[Frontend] Significant re-factoring of CSS and markup
open #95 IN-PROGRESS!; Mostly buttons and menus classes (s-btn and s-menu); Removed unused templates and .css files; Normalized some button containers;
This commit is contained in:
Charles Hacskaylo
@@ -23,8 +23,7 @@ $baseRatio: 1.5;
|
||||
$pad: $interiorMargin * $baseRatio;
|
||||
|
||||
/******* LAYOUT AND SIZING */
|
||||
.btn,
|
||||
.l-btn {
|
||||
/*.l-btn {
|
||||
@include user-select(none);
|
||||
//line-height: 1.5em; // Was 1.25em
|
||||
line-height: 150%;
|
||||
@@ -35,14 +34,13 @@ $pad: $interiorMargin * $baseRatio;
|
||||
$h: $ueTopBarH; // - $interiorMargin;
|
||||
height: $h;
|
||||
line-height: $h - 2;
|
||||
//padding: 0 $pad * 6 0 $pad;
|
||||
padding: 0 $pad * 3;
|
||||
}
|
||||
&.create-btn {
|
||||
font-size: 1em;
|
||||
&:before {
|
||||
content:"+";
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.menu {
|
||||
margin-left: $pad * -1;
|
||||
@@ -57,105 +55,109 @@ $pad: $interiorMargin * $baseRatio;
|
||||
&.vsm {
|
||||
padding: 0 ($pad / $baseRatio) / 2;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
/*********************************** STYLE STYLES */
|
||||
.btn,
|
||||
.s-btn {
|
||||
$base: lighten($colorBodyBg, 20%); // Moved to s-btn
|
||||
$base: lighten($colorBodyBg, 20%);
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
|
||||
@include user-select(none);
|
||||
//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
|
||||
cursor: pointer;
|
||||
//line-height: 1.2em;
|
||||
text-decoration: none;
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
@include btnSubtle($bg);
|
||||
$fg: lighten($bg, 50%);
|
||||
color: $fg;
|
||||
&:hover {
|
||||
@include btnSubtle(lighten($bg, 5%), $fg);
|
||||
//color: $fg;
|
||||
}
|
||||
.invoke-menu {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
&.subtle {
|
||||
@include btnSubtle($base, lighten($base, 40%));
|
||||
}
|
||||
&.very-subtle,
|
||||
&.s-very-subtle {
|
||||
@include containerSubtle($colorBodyBg, $colorBodyFg, true);
|
||||
&.paused {
|
||||
@include containerSubtle($colorPausedBg, $colorPausedFg, true);
|
||||
.icon:before {
|
||||
content:"\0000EF";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
height: $btnStdH;
|
||||
line-height: $btnStdH;
|
||||
padding: 0 $pad;
|
||||
|
||||
.icon-btn,
|
||||
.s-icon-btn {
|
||||
@extend .s-btn;
|
||||
font-size: 1em;
|
||||
font-size: 0.7rem;
|
||||
.icon {
|
||||
font-size: 0.8rem;
|
||||
color: $colorKey;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
padding: 0 $pad / $baseRatio;
|
||||
}
|
||||
&.vsm {
|
||||
padding: 0 ($pad / $baseRatio) / 2;
|
||||
}
|
||||
|
||||
&:not(.major) {
|
||||
@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
|
||||
}
|
||||
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
$fg: lighten($bg, 70%);
|
||||
@include btnSubtle($bg, $fg, $fg);
|
||||
}
|
||||
|
||||
&.paused {
|
||||
.icon {
|
||||
color: $colorPausedFg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.disabled) {
|
||||
&:not(.paused) {
|
||||
&:hover {
|
||||
.icon {
|
||||
color: lighten($colorKey, $ltGamma);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.labeled {
|
||||
padding: 0 $pad/2;
|
||||
.icon {
|
||||
//font-size: 1.5em;
|
||||
}
|
||||
.title-label {
|
||||
margin-left: $interiorMargin;
|
||||
@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
|
||||
.icon:before {
|
||||
content: "\0000EF";
|
||||
}
|
||||
}
|
||||
|
||||
&.pause-play {
|
||||
/* &.paused {
|
||||
.icon {
|
||||
@include pulse(500ms);
|
||||
/*
|
||||
&.paused {
|
||||
.icon {
|
||||
@include pulse(500ms);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
*/
|
||||
.icon:before {
|
||||
content:"\0000F1";
|
||||
content: "\0000F1";
|
||||
}
|
||||
}
|
||||
|
||||
&.show-thumbs {
|
||||
.icon:before {
|
||||
content:"\000039";
|
||||
content: "\000039";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
// Structure: .btn-set > mct-representation class=first|last > .s-btn
|
||||
//@include test(red);
|
||||
font-size: 0; // Remove space between s-btn elements due to white space in markup
|
||||
|
||||
.s-btn {
|
||||
@include border-radius(0);
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.first {
|
||||
.s-btn {
|
||||
@include border-left-radius($controlCr);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.last {
|
||||
.s-btn {
|
||||
@include border-right-radius($controlCr);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*********************************** 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 {
|
||||
/*
|
||||
|
||||
span.s-btn,
|
||||
span.s-btn span,
|
||||
a.s-btn,
|
||||
a.s-btn span,
|
||||
a.s-btn,
|
||||
a.s-btn span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -100,22 +100,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-bar {
|
||||
// position: relative;
|
||||
/* .btn,
|
||||
.btn-set,
|
||||
.t-btn {
|
||||
display: inline-block;
|
||||
// margin-left: $interiorMargin;
|
||||
}
|
||||
.btn,
|
||||
.t-btn {
|
||||
&:first-child {
|
||||
// margin-left: 0;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.l-composite-control {
|
||||
vertical-align: middle;
|
||||
&.l-checkbox {
|
||||
@@ -153,42 +137,6 @@
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/*
|
||||
.btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
.btn,
|
||||
.t-btn {
|
||||
@include border-radius(0);
|
||||
border-left: 1px solid lighten($colorBodyBg, 20%);
|
||||
margin-left: 0;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
@include border-left-radius($controlCr);
|
||||
}
|
||||
&:last-child {
|
||||
@include border-right-radius($controlCr);
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.object-browse-bar .btn,
|
||||
.object-browse-bar .t-btn,
|
||||
.object-browse-bar .view-switcher,
|
||||
.top-bar .buttons-main .btn,
|
||||
.top-bar .buttons-main .t-btn,
|
||||
.top-bar .view-switcher,
|
||||
.tool-bar .btn,
|
||||
.tool-bar .t-btn {
|
||||
$h: $btnToolbarH;
|
||||
display: inline-block;
|
||||
font-size: $h * $btnFontSizeToH;
|
||||
line-height: 200%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
label.checkbox.custom {
|
||||
$bg: lighten($colorBodyBg, $ltGamma);
|
||||
$d: $formRowCtrlsH;
|
||||
@@ -256,7 +204,7 @@ label.checkbox.custom {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu label.checkbox.custom {
|
||||
.s-menu label.checkbox.custom {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@@ -267,84 +215,6 @@ label.checkbox.custom {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
$h: 20px;
|
||||
$p: $interiorMarginSm * 2;
|
||||
$c: $colorBodyFg;
|
||||
@include btnSubtle($colorBodyBg);
|
||||
/* height: $h;
|
||||
line-height: $h;
|
||||
&.dropdown {
|
||||
padding-left: $p;
|
||||
padding-right: $p;
|
||||
}*/
|
||||
|
||||
&:not(.disabled):hover {
|
||||
color: lighten($c, 20%);
|
||||
}
|
||||
|
||||
/* &.context-available {
|
||||
// An element like the invoke-menu triangle;
|
||||
// Indicates that this element has a dropdown menu available;
|
||||
// Currently unused
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
padding: 0 5px;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
}
|
||||
}*/
|
||||
|
||||
span.l-click-area {
|
||||
// In markup, this element should not enclose anything.
|
||||
@extend .abs;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
//margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
.menu {
|
||||
// margin-left: (-1 * $p);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
.ui-symbol.icon {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar .btn-menu {
|
||||
$h: $btnStdH; //$ueTopBarBtnH; // 35px
|
||||
$p: 10px;
|
||||
$badgeM: $interiorMargin;
|
||||
$badgeD: $h - ($badgeM * 2);
|
||||
//height: $h;
|
||||
//line-height: $h;
|
||||
//padding-right: 10px;
|
||||
&.browse-btn {
|
||||
margin-right: $interiorMargin;
|
||||
padding-left: $badgeD + $badgeM * 2;
|
||||
.badge {
|
||||
@include border-radius($controlCr * 1.5);
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
line-height: $badgeD;
|
||||
position: absolute;
|
||||
top: $badgeM;
|
||||
left: $badgeM;
|
||||
bottom: $badgeM;
|
||||
right: auto;
|
||||
width: $badgeD;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-available {
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
@@ -355,9 +225,6 @@ label.checkbox.custom {
|
||||
|
||||
.view-switcher {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
.type-icon {
|
||||
//vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** OBJECT-HEADER */
|
||||
|
||||
@@ -19,7 +19,52 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/******************************************************** MENUS */
|
||||
/******************************************************** MENU BUTTONS */
|
||||
.s-menu {
|
||||
// Formerly .btn-menu
|
||||
@extend .s-btn;
|
||||
span.l-click-area {
|
||||
// In markup, this element should not enclose anything.
|
||||
@extend .abs;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&:after {
|
||||
// Adds the downward facing arrow element
|
||||
color: rgba($colorInvokeMenu, 0.2);
|
||||
content: '\76';
|
||||
display: inline-block;
|
||||
font-family: 'symbolsfont';
|
||||
margin-left: $interiorMarginSm;
|
||||
@include text-shadow(none);
|
||||
vertical-align: top;
|
||||
}
|
||||
&.create-btn {
|
||||
.title-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
&:after {
|
||||
color: rgba($colorInvokeMenu, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
left: 0;
|
||||
text-align: left;
|
||||
.ui-symbol.icon {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** MENUS THEMSELVES */
|
||||
.menu-element {
|
||||
$bg: lighten($colorBodyBg, 5%);
|
||||
$bgHover: lighten($bg, 20%);
|
||||
|
||||
Reference in New Issue
Block a user