alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Fronted] Significant refactoring of btn classes

Browse Source 
WTD-839
Refactoring in advance of style mods to switcher when in frame;
Moved btn styles from _controls.scss to _buttons.scss;
Markup cleaned up with css classing simplified;
This commit is contained in:
Charles Hacskaylo
2015-06-10 17:23:08 -07:00
parent 5219105887
commit 0b8d5ceb86
11 changed files with 356 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@@ -19,20 +19,64 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
$pad: $interiorMargin * 1.5;
$baseRatio: 1.5;
$pad: $interiorMargin * $baseRatio;
/*********************************** TYPE STYLES */
.t-btn {
cursor: pointer;
/******* LAYOUT AND SIZING */
.btn,
.l-btn {
line-height: 1.2em;
padding: 0 $pad;
text-decoration: none;
&.lg,
&.create-btn {
$h: $ueTopBarH - $interiorMargin;
height: $h;
line-height: $h;
padding: 0 $pad * 3;
}
&.create-btn {
.menu {
margin-left: $pad * -1;
}
>.ui-symbol {
font-size: 1.1em;
}
}
&.sm {
padding: 0 $pad / $baseRatio;
}
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
}
/*********************************** STYLE STYLES */
.btn,
.s-btn {
$base: lighten($colorBodyBg, 20%); // Moved to s-btn
@include border-radius($controlCr);
@include box-sizing(border-box);
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
line-height: 1.2em;
cursor: pointer;
text-decoration: none;
&.major {
$bg: $colorKey;
@include btnNoticeable($bg);
$fg: lighten($bg, 50%);
color: $fg;
&:hover {
@include btnNoticeable(lighten($bg, 5%));
color: $fg;
}
.invoke-menu {
color: $fg;
}
}
&.subtle {
@include btnSubtle($base, lighten($base, 40%));
}
&.very-subtle,
&.s-very-subtle {
@include containerSubtle($colorBodyBg, $colorBodyFg, true);
&.paused {
@@ -44,9 +88,10 @@ $pad: $interiorMargin * 1.5;
}
}
.icon-btn,
.s-icon-btn {
@extend .s-btn;
font-size: 1.2em;
font-size: 1em;
.icon {
color: $colorKey;
}
@@ -93,19 +138,13 @@ $pad: $interiorMargin * 1.5;
}
/*********************************** LAYOUT STYLES */
span.btn,
span.btn span,
span.l-btn,
span.l-btn span,
a.btn,
a.btn span,
a.l-btn,
a.l-btn span {
display: inline-block;
}
.l-btn {
padding: 0 $pad;
&.sm {
padding: 0 $interiorMargin;
}
&.vsm {
padding: 0 $interiorMargin/2;
}
}

68
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@@ -92,74 +92,6 @@
}
}
.btn {
$base: lighten($colorBodyBg, 20%); // Moved to s-btn
$p: 10px; // Moved to s-btn
@include border-radius($controlCr); // Moved to s-btn
@include box-sizing(border-box); // Moved to s-btn
@include text-shadow(rgba(black, 0.3) 0 1px 1px); // Moved to s-btn
// display: inline-block;
// margin-right: 10px;
padding: 0 ($interiorMargin * 2); // Moved to s-btn
text-decoration: none; // Moved to s-btn
&.create-btn {
$h: $ueTopBarH - $interiorMargin; //$btnStdH * 1.5;;
$p: $p * 2.25;
height: $h;
line-height: $h;
//font-size: 1.1em;
padding: 0 $p;
.menu {
margin-left: $p * -1;
}
.ui-symbol.major {
font-size: 1.1em;
}
}
&.major {
$bg: $colorKey;
@include btnNoticeable($bg);
$fg: lighten($bg, 50%);
color: $fg;
&:hover {
@include btnNoticeable(lighten($bg, 5%));
color: $fg;
}
.invoke-menu {
color: $fg;
}
}
&.normal {
padding: $p * 0.5 $p * 0.7;
}
&.outline {
&:hover {
background: rgba(#fff, 0.1);
}
}
&.subtle {
@include btnSubtle($base, lighten($base, 40%));
}
&.very-subtle {
@include btnSubtle($colorBodyBg, lighten($colorBodyBg, 50%));
}
&.lg {
@include border-radius($controlCr * 1.5);
font-size: 1.2em;
padding: 7px 25px;
}
&.icon-btn {
.icon {
color: $colorKey;
}
&:not(.disabled):hover .icon {
color: lighten($colorKey, $ltGamma);
}
}
}
.btn-bar {
// position: relative;
.btn,