[Frontend] IN-PROGRESS Theme changes continuing

open #95
Refactored btnSubtle and containerSubtle mixins
to simplify;
This commit is contained in:
Charles Hacskaylo
2015-09-09 16:49:59 -07:00
parent 4db48afab0
commit 32b895ba62
8 changed files with 356 additions and 364 deletions

View File

@@ -972,7 +972,7 @@ mct-container {
right: 0;
width: auto;
height: 5px; }
/* line 159, ../../../../general/res/sass/_mixins.scss */
/* line 185, ../../../../general/res/sass/_mixins.scss */
.split-layout.horizontal > .splitter:before {
-moz-transition-property: "border-color";
-o-transition-property: "border-color";
@@ -996,7 +996,7 @@ mct-container {
top: 2px;
left: 5px;
right: 5px; }
/* line 181, ../../../../general/res/sass/_mixins.scss */
/* line 207, ../../../../general/res/sass/_mixins.scss */
.split-layout.horizontal > .splitter:not(.disabled):hover:before {
-moz-transition-property: "border-color";
-o-transition-property: "border-color";
@@ -1026,7 +1026,7 @@ mct-container {
bottom: 0;
cursor: col-resize;
width: 5px; }
/* line 159, ../../../../general/res/sass/_mixins.scss */
/* line 185, ../../../../general/res/sass/_mixins.scss */
.split-layout.vertical > .splitter:before {
-moz-transition-property: "border-color";
-o-transition-property: "border-color";
@@ -1050,7 +1050,7 @@ mct-container {
left: 2px;
bottom: 5px;
top: 5px; }
/* line 181, ../../../../general/res/sass/_mixins.scss */
/* line 207, ../../../../general/res/sass/_mixins.scss */
.split-layout.vertical > .splitter:not(.disabled):hover:before {
-moz-transition-property: "border-color";
-o-transition-property: "border-color";
@@ -1371,13 +1371,6 @@ mct-container {
padding: 0 2.5px; }
/* line 88, ../../../../general/res/sass/controls/_buttons.scss */
.s-btn.major, .major.s-menu, .major.select {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #0099cc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -1385,23 +1378,24 @@ mct-container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
display: inline-block;
color: #fff; }
/* line 17, ../sass/_mixins.scss */
.s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
color: #fff; }
/* line 21, ../sass/_mixins.scss */
.s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
background-color: deepskyblue; }
/* line 94, ../../../../general/res/sass/controls/_buttons.scss */
.s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
user-select: none; }
/* line 159, ../../../../general/res/sass/_mixins.scss */
.s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
color: #fff; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 164, ../../../../general/res/sass/_mixins.scss */
.s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
background: #0099cc; }
/* line 166, ../../../../general/res/sass/_mixins.scss */
.s-btn.major:not(.disabled):hover .icon, .major.s-menu:not(.disabled):hover .icon, .major.select:not(.disabled):hover .icon {
color: white; } }
/* line 94, ../../../../general/res/sass/controls/_buttons.scss */
.s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
background-color: #a3a3a3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -1409,23 +1403,24 @@ mct-container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
display: inline-block;
color: #fff; }
/* line 17, ../sass/_mixins.scss */
.s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
color: #fff; }
/* line 21, ../sass/_mixins.scss */
.s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
background-color: #0099cc; }
/* line 99, ../../../../general/res/sass/controls/_buttons.scss */
.s-btn.paused, .paused.s-menu, .paused.select {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
user-select: none; }
/* line 159, ../../../../general/res/sass/_mixins.scss */
.s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
color: #fff; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 164, ../../../../general/res/sass/_mixins.scss */
.s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
background: #0099cc; }
/* line 166, ../../../../general/res/sass/_mixins.scss */
.s-btn:not(.major):not(.disabled):hover .icon, .s-menu:not(.major):not(.disabled):hover .icon, .select:not(.major):not(.disabled):hover .icon {
color: white; } }
/* line 99, ../../../../general/res/sass/controls/_buttons.scss */
.s-btn.paused, .paused.s-menu, .paused.select {
background-color: #c56f01;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -1433,14 +1428,22 @@ mct-container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
display: inline-block;
color: #fff; }
/* line 17, ../sass/_mixins.scss */
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 159, ../../../../general/res/sass/_mixins.scss */
.s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
color: #fff; }
/* line 21, ../sass/_mixins.scss */
.s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
background-color: #f88c01; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 164, ../../../../general/res/sass/_mixins.scss */
.s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
background: #0099cc; }
/* line 166, ../../../../general/res/sass/_mixins.scss */
.s-btn.paused:not(.disabled):hover .icon, .paused.s-menu:not(.disabled):hover .icon, .paused.select:not(.disabled):hover .icon {
color: white; } }
/* line 101, ../../../../general/res/sass/controls/_buttons.scss */
.s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
content: "\0000EF"; }
@@ -1837,7 +1840,6 @@ label.checkbox.custom {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #cccccc;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
padding-right: 0.35em; }
@@ -1888,13 +1890,6 @@ label.checkbox.custom {
left: 0; }
/* line 308, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #a3a3a3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -1902,8 +1897,12 @@ label.checkbox.custom {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
color: #fff;
display: inline-block;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: ew-resize;
position: absolute;
height: 100%;
@@ -1912,10 +1911,17 @@ label.checkbox.custom {
auto: 0;
bottom: auto;
left: auto; }
/* line 17, ../sass/_mixins.scss */
/* line 159, ../../../../general/res/sass/_mixins.scss */
.slider .knob .icon {
color: #fff; }
/* line 159, ../../../../general/res/sass/_mixins.scss */
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 164, ../../../../general/res/sass/_mixins.scss */
.slider .knob:not(.disabled):hover {
background: #0099cc; }
/* line 166, ../../../../general/res/sass/_mixins.scss */
.slider .knob:not(.disabled):hover .icon {
color: white; } }
/* line 185, ../../../../general/res/sass/_mixins.scss */
.slider .knob:before {
-moz-transition-property: "border-color";
-o-transition-property: "border-color";
@@ -1939,7 +1945,7 @@ label.checkbox.custom {
left: 2px;
bottom: 5px;
top: 5px; }
/* line 181, ../../../../general/res/sass/_mixins.scss */
/* line 207, ../../../../general/res/sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before {
-moz-transition-property: "border-color";
-o-transition-property: "border-color";
@@ -2115,6 +2121,7 @@ label.checkbox.custom {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #4d4d4d;
display: inline-block;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
@@ -2127,7 +2134,7 @@ label.checkbox.custom {
.menu-element .menu ul {
margin: 0;
padding: 0; }
/* line 319, ../../../../general/res/sass/_mixins.scss */
/* line 345, ../../../../general/res/sass/_mixins.scss */
.menu-element .menu ul li {
list-style-type: none;
margin: 0;
@@ -2544,7 +2551,7 @@ label.checkbox.custom {
padding: 0 3px;
position: relative;
height: 150px; }
/* line 270, ../../../../general/res/sass/_mixins.scss */
/* line 296, ../../../../general/res/sass/_mixins.scss */
.form .form-row .selector-list.error {
background: rgba(255, 0, 0, 0.5); }
/* line 124, ../../../../general/res/sass/forms/_elems.scss */
@@ -2601,7 +2608,7 @@ input[type="text"] {
color: #666;
outline: none;
padding: 0 3px; }
/* line 270, ../../../../general/res/sass/_mixins.scss */
/* line 296, ../../../../general/res/sass/_mixins.scss */
input[type="text"].error {
background: rgba(255, 0, 0, 0.5); }
/* line 172, ../../../../general/res/sass/forms/_elems.scss */
@@ -2629,7 +2636,7 @@ textarea {
position: absolute;
height: 100%;
width: 100%; }
/* line 270, ../../../../general/res/sass/_mixins.scss */
/* line 296, ../../../../general/res/sass/_mixins.scss */
textarea.error {
background: rgba(255, 0, 0, 0.5); }
@@ -2656,13 +2663,6 @@ textarea {
*****************************************************************************/
/* line 22, ../../../../general/res/sass/forms/_selects.scss */
.select {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #a3a3a3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -2670,14 +2670,25 @@ textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
color: #fff;
display: inline-block;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
margin: 0 0 2px 2px;
overflow: hidden;
position: relative; }
/* line 17, ../sass/_mixins.scss */
/* line 159, ../../../../general/res/sass/_mixins.scss */
.select .icon {
color: #fff; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 164, ../../../../general/res/sass/_mixins.scss */
.select:not(.disabled):hover {
background: #0099cc; }
/* line 166, ../../../../general/res/sass/_mixins.scss */
.select:not(.disabled):hover .icon {
color: white; } }
/* line 30, ../../../../general/res/sass/forms/_selects.scss */
.select select {
-moz-appearance: none;
@@ -2748,7 +2759,7 @@ textarea {
max-height: 400px;
overflow: auto;
padding: 5px; }
/* line 270, ../../../../general/res/sass/_mixins.scss */
/* line 296, ../../../../general/res/sass/_mixins.scss */
.channel-selector .treeview.error {
background: rgba(255, 0, 0, 0.5); }
/* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2905,7 +2916,7 @@ span.req {
padding: 0 3px;
background: #f7f7f7;
border-bottom: 1px solid white; }
/* line 270, ../../../../general/res/sass/_mixins.scss */
/* line 296, ../../../../general/res/sass/_mixins.scss */
.filter input.filter.error,
.filter input.t-filter-input.error,
.t-filter input.filter.error,
@@ -3875,6 +3886,7 @@ span.req {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #666;
display: inline-block;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
@@ -3925,13 +3937,6 @@ span.req {
padding: 0 15px; }
/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #898989;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -3939,14 +3944,22 @@ span.req {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
display: inline-block;
color: #fff; }
/* line 17, ../sass/_mixins.scss */
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 159, ../../../../general/res/sass/_mixins.scss */
.overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
color: #fff; }
/* line 21, ../sass/_mixins.scss */
.overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
background-color: #6f6f6f; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 164, ../../../../general/res/sass/_mixins.scss */
.overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
background: #0099cc; }
/* line 166, ../../../../general/res/sass/_mixins.scss */
.overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover .icon {
color: white; } }
/* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog {
top: 5px;
@@ -4023,7 +4036,7 @@ ul.tree {
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 319, ../../../../general/res/sass/_mixins.scss */
/* line 345, ../../../../general/res/sass/_mixins.scss */
ul.tree li {
list-style-type: none;
margin: 0;
@@ -5260,13 +5273,6 @@ table {
top: 0; }
/* line 29, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #a3a3a3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -5274,8 +5280,12 @@ table {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
color: #fff;
display: inline-block;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
box-sizing: border-box;
cursor: pointer;
float: left;
@@ -5284,12 +5294,16 @@ table {
margin-bottom: 3px;
margin-right: 3px;
position: relative; }
/* line 17, ../sass/_mixins.scss */
/* line 159, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item .icon {
color: #fff; }
/* line 21, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover {
background-color: #fff; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 164, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover {
background: #0099cc; }
/* line 166, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover .icon {
color: white; } }
/* line 47, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type {
color: deepskyblue; }
@@ -5393,13 +5407,6 @@ table {
font-size: 0.8em; }
/* line 138, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #0099cc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@@ -5407,12 +5414,23 @@ table {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
color: #fff;
display: inline-block;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
color: #80dfff; }
/* line 17, ../sass/_mixins.scss */
/* line 159, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item.selected .icon {
color: #fff; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 164, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover {
background: #0099cc; }
/* line 166, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover .icon {
color: white; } }
/* line 143, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
color: #80dfff; }

View File

@@ -1,27 +1,10 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
$hovRatio: 5%;
$bgBase: $bg; //pullForward($bg, $contrastRatioPercent);
$fgBase: $fg; //pushBack($bg, $contrastRatioPercent);
background-color: $bgBase;
@include border-radius($controlCr);
@include box-sizing(border-box);
display: inline-block;
@include containerBase($bg, $fg);
}
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
@include user-select(none);
@include border-radius($controlCr);
@include containerSubtle($bg, $fg);
color: $ic;
.icon {
color: $ic;
}
@if $bgHov != none {
&:not(.disabled):hover {
background-color: $bgHov;
}
}
@include containerSubtle($bg, $fg);
@include btnBase($bg, $colorKey, $fg, $ic);
}
@function pullForward($c: $colorBodyBg, $p: 20%) {

View File

@@ -33,7 +33,7 @@
@import "../../../../general/res/sass/mobile/constants";
@import "constants";
@import "../../../../general/res/sass/main";
@import "../../../../general/res/sass/main"; //
@import "controls";