LupusNobilis/sogo
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

(css) Cleanup Sass

Browse source
This commit is contained in:
Francis Lachapelle 2015-09-02 21:44:12 -04:00
parent 0bdbe5bbac
commit 1d2c0ed350
3 changed files with 183 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
UI/WebServerResources/scss/components/list/list.scss
View file

@ -150,46 +150,52 @@ div.md-tile-left {
font-size: 40px; font-size: 40px;
color: rgba(0, 0, 0, 0.26); color: rgba(0, 0, 0, 0.26);
} }
.md-tile-left-card:before { .md-tile-left-card {
@extend .md-tile-left; @extend .md-tile-left;
content: "\e7fd"; // person &:before {
content: "\e7fd"; // person
}
} }
.md-tile-left-list:before { .md-tile-left-list {
@extend .md-tile-left; @extend .md-tile-left;
content: "\e7ef"; // group &:before {
content: "\e7ef"; // group
}
} }
.md-tile-left-selected:before { .md-tile-left-selected {
@extend .md-tile-left; @extend .md-tile-left;
content: "\e5ca"; // check &:before {
} content: "\e5ca"; // check
.md-tile-left-accepted:before { }
@extend .md-tile-left;
background-color: rgba(0, 255, 0, 0.3) !important;
content: "\e5ca"; // check
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-declined:before {
@extend .md-tile-left;
background-color: rgba(255, 0, 0, 0.3) !important;
content: "\e15b"; // remove
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-delegated:before {
@extend .md-tile-left;
background-color: rgba(192, 192, 192, 0.3) !important;
content: "\e5c8"; // arrow-forward
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-needs-action:before {
@extend .md-tile-left;
background-color: rgba(255, 255, 0, 0.3) !important;
content: "?";
}
.md-tile-left-tentative:before {
@extend .md-tile-left;
background-color: rgba(255, 255, 0, 0.3) !important;
content: "\e7fd"; // person
} }
//.md-tile-left-accepted:before {
// @extend .md-tile-left;
// background-color: rgba(0, 255, 0, 0.3) !important;
// content: "\e5ca"; // check
// color: rgba(0, 0, 0, 0.5);
//}
//.md-tile-left-declined:before {
// @extend .md-tile-left;
// background-color: rgba(255, 0, 0, 0.3) !important;
// content: "\e15b"; // remove
// color: rgba(0, 0, 0, 0.5);
//}
//.md-tile-left-delegated:before {
// @extend .md-tile-left;
// background-color: rgba(192, 192, 192, 0.3) !important;
// content: "\e5c8"; // arrow-forward
// color: rgba(0, 0, 0, 0.5);
//}
//.md-tile-left-needs-action:before {
// @extend .md-tile-left;
// background-color: rgba(255, 255, 0, 0.3) !important;
// content: "?";
//}
//.md-tile-left-tentative:before {
// @extend .md-tile-left;
// background-color: rgba(255, 255, 0, 0.3) !important;
// content: "\e7fd"; // person
//}
.sg-avatar { .sg-avatar {
@extend .md-tile-left-card; @extend .md-tile-left-card;
margin-right: 0; margin-right: 0;
@ -205,28 +211,28 @@ div.md-tile-left {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
.sg-accepted { //.sg-accepted {
@extend .md-tile-left-accepted; // @extend .md-tile-left-accepted;
margin-right: 0; // margin-right: 0;
margin-left: 0; // margin-left: 0;
} //}
.sg-declined { //.sg-declined {
@extend .md-tile-left-declined; // @extend .md-tile-left-declined;
margin-right: 0; // margin-right: 0;
margin-left: 0; // margin-left: 0;
} //}
.sg-delegated { //.sg-delegated {
@extend .md-tile-left-delegated; // @extend .md-tile-left-delegated;
margin-right: 0; // margin-right: 0;
margin-left: 0; // margin-left: 0;
} //}
.sg-needs-action { //.sg-needs-action {
@extend .md-tile-left-needs-action; // @extend .md-tile-left-needs-action;
margin-right: 0; // margin-right: 0;
margin-left: 0; // margin-left: 0;
} //}
.sg-tentative { //.sg-tentative {
@extend .md-tile-left-tentative; // @extend .md-tile-left-tentative;
margin-right: 0; // margin-right: 0;
margin-left: 0; // margin-left: 0;
} //}

10
UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
View file

@ -60,11 +60,11 @@ $input-padding-top: 2px !default;
margin-top: 0; margin-top: 0;
} }
// md overqualifies so we are // md overqualifies so we are
.md-input-focused label.pseudo-input-label, //.md-input-focused label.pseudo-input-label,
.md-input-has-value label.pseudo-input-label { //.md-input-has-value label.pseudo-input-label {
transform: translate3d(0, 4px, 0) scale(1); // transform: translate3d(0, 4px, 0) scale(1);
margin-top: $mg; // margin-top: $mg;
} //}
.pseudo-input-field { .pseudo-input-field {
display: block; display: block;

226
UI/WebServerResources/scss/core/layout.scss
View file

@ -26,102 +26,102 @@
*/ */
// SMALL SCREEN // SMALL SCREEN
@include at(sm) { //@include at(sm) {
.hide-sm, .hide { // .hide-sm, .hide {
&:not(.show-sm):not(.show) { // &:not(.show-sm):not(.show) {
display: none !important; // display: none !important;
} // }
} // }
//
// @include flex-order-for-name(sm);
// @include layout-align-for-name(sm);
// @include layout-for-name(sm);
// @include flex-properties-for-name(sm);
//}
@include flex-order-for-name(sm); //@include from(md) {
@include layout-align-for-name(sm); // .show-sm {
@include layout-for-name(sm); // display: none !important;
@include flex-properties-for-name(sm); // }
} //}
@include from(md) {
.show-sm {
display: none !important;
}
}
// BIGGER THAN SMALL SCREEN // BIGGER THAN SMALL SCREEN
@include from(md) { //@include from(md) {
@include flex-order-for-name(gt-sm); // @include flex-order-for-name(gt-sm);
@include layout-align-for-name(gt-sm); // @include layout-align-for-name(gt-sm);
@include layout-for-name(gt-sm); // @include layout-for-name(gt-sm);
@include flex-properties-for-name(gt-sm); // @include flex-properties-for-name(gt-sm);
} //}
// MEDIUM SCREEN // MEDIUM SCREEN
@include at(md) { //@include at(md) {
.hide, .hide-gt-sm { // .hide, .hide-gt-sm {
&:not(.show-gt-sm):not(.show-md):not(.show) { // &:not(.show-gt-sm):not(.show-md):not(.show) {
display: none; // display: none;
} // }
} // }
.hide-md:not(.show-md):not(.show) { // .hide-md:not(.show-md):not(.show) {
display: none; // display: none;
} // }
//
@include flex-order-for-name(md); // @include flex-order-for-name(md);
@include layout-align-for-name(md); // @include layout-align-for-name(md);
@include layout-for-name(md); // @include layout-for-name(md);
@include flex-properties-for-name(md); // @include flex-properties-for-name(md);
} //}
// BIGGER THAN MEDIUM SCREEN // BIGGER THAN MEDIUM SCREEN
@include from(lg) { //@include from(lg) {
@include flex-order-for-name(gt-md); // @include flex-order-for-name(gt-md);
@include layout-align-for-name(gt-md); // @include layout-align-for-name(gt-md);
@include layout-for-name(gt-md); // @include layout-for-name(gt-md);
@include flex-properties-for-name(gt-md); // @include flex-properties-for-name(gt-md);
@include flex-order-for-name(lg); // @include flex-order-for-name(lg);
@include layout-align-for-name(lg); // @include layout-align-for-name(lg);
@include layout-for-name(lg); // @include layout-for-name(lg);
@include flex-properties-for-name(lg); // @include flex-properties-for-name(lg);
} //}
// BIGGER THAN LARGE SCREEN // BIGGER THAN LARGE SCREEN
@include from(lg) { //@include from(lg) {
.hide, .hide-gt-sm, .hide-gt-md { // .hide, .hide-gt-sm, .hide-gt-md {
&:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) { // &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
display: none; // display: none;
} // }
} // }
.hide-lg:not(.show-lg):not(.show) { // .hide-lg:not(.show-lg):not(.show) {
display: none; // display: none;
} // }
} //}
// BIGGER THAN X-LARGE SCREEN in needed // BIGGER THAN X-LARGE SCREEN in needed
@include from(xl) { //@include from(xl) {
.hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide { // .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
&:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) { // &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
display: none; // display: none;
} // }
} // }
//
@include flex-order-for-name(gt-lg); // @include flex-order-for-name(gt-lg);
@include layout-align-for-name(gt-lg); // @include layout-align-for-name(gt-lg);
@include layout-for-name(gt-lg); // @include layout-for-name(gt-lg);
@include flex-properties-for-name(gt-lg); // @include flex-properties-for-name(gt-lg);
} //}
// Utility classes to compensate for the the xml mandatory attribute values // Utility classes to compensate for the the xml mandatory attribute values
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
$selectors: layout, layout-align, layout-padding, layout-margin, layout-wrap, layout-fill, //$selectors: layout, layout-align, layout-padding, layout-margin, layout-wrap, layout-fill,
flex, hide, show, show-sm; //flex, hide, show, show-sm;
@include attributesToClasses($selectors);
//@include attributesToClasses($selectors);
//
// We need to silently extend this class // We need to silently extend this class
%md-layout-fill { //%md-layout-fill {
margin: 0; // margin: 0;
min-height: 100%; // min-height: 100%;
width: 100%; // width: 100%;
} //}
.md-flex { .md-flex {
flex: 1 1 auto; flex: 1 1 auto;
@ -133,49 +133,49 @@ flex, hide, show, show-sm;
// Generate responsive columns // Generate responsive columns
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@mixin responsive-columns($breakpoint, $query) { //@mixin responsive-columns($breakpoint, $query) {
$cols: map-get($base-grid-total-columns, $breakpoint); // $cols: map-get($base-grid-total-columns, $breakpoint);
$colWidth: ((100 / $cols) * 1vw); // $colWidth: ((100 / $cols) * 1vw);
// there must be a way to escape the rule but we didn't found-out // // there must be a way to escape the rule but we didn't found-out
@if ($query == 'from') { // @if ($query == 'from') {
@include from($breakpoint) { // @include from($breakpoint) {
@for $i from 1 to $cols { // @for $i from 1 to $cols {
.cols-#{$i}, { // .cols-#{$i}, {
max-width: ($colWidth * $i); // max-width: ($colWidth * $i);
flex: 1 1 ($colWidth * $i); // flex: 1 1 ($colWidth * $i);
} // }
} // }
} // }
} @else { // } @else {
@include at($breakpoint) { // @include at($breakpoint) {
@for $i from 1 to $cols { // @for $i from 1 to $cols {
.cols-#{$i} { // .cols-#{$i} {
max-width: ($colWidth * $i); // max-width: ($colWidth * $i);
flex: 1 1 ($colWidth * $i); // flex: 1 1 ($colWidth * $i);
} // }
} // }
} // }
} // }
} //}
@include responsive-columns('md', 'at'); //@include responsive-columns('md', 'at');
@include responsive-columns('lg', 'from'); //@include responsive-columns('lg', 'from');
// Utility to implement a specific one without extending // Utility to implement a specific one without extending
// todo: include error handling // todo: include error handling
@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) { @mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
$cols: map-get($base-grid-total-columns, $breakpoint); $cols: map-get($base-grid-total-columns, $breakpoint);
$colWidth: ((100 / $cols) * 1vw); $colWidth: ((100 / $cols) * 1vw);
max-width: ($colWidth * $nb); max-width: ($colWidth * $nb);
flex: $grow $shrink ($colWidth * $nb); flex: $grow $shrink ($colWidth * $nb);
} }
// Rows are included in padded containers, margins are used for vertical spacing // Rows are included in padded containers, margins are used for vertical spacing
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
[layout="row"].md-layout-margin { //[layout="row"].md-layout-margin {
margin-right: 0; // margin-right: 0;
margin-left: 0; // margin-left: 0;
} //}
// App container for responsive // App container for responsive
.sg-app-content { .sg-app-content {