mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-09-05 21:47:59 +00:00
Restructure Sass files and folders for proper application Sass development
This commit is contained in:
iRouge
@@ -0,0 +1,44 @@
|
||||
// SOGo by Inverse
|
||||
// sogo.nu
|
||||
// version 3.alpha
|
||||
//
|
||||
|
||||
//
|
||||
// UTILITIES FUNCTIONS
|
||||
//
|
||||
|
||||
// Strip Unit - From Foundation
|
||||
// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
|
||||
//
|
||||
// @param {number} $num - Number to strip unit from.
|
||||
// @return The same number, sans unit.
|
||||
@function strip-unit($num) {
|
||||
@return $num / ($num * 0 + 1);
|
||||
}
|
||||
|
||||
/// sp|dp to px
|
||||
// Google's Material design specs are in 'sp' or 'dp' which are not css units
|
||||
// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels' (same as dp, but will be scaled by the user's font size preference)
|
||||
// Android gives a 160dpi base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px'
|
||||
// We define a scaling factor in case we need to adjust
|
||||
// 'sp' is scale to 1 css-px for a rem-base-value of 16px (default)
|
||||
// 'dp' is scale to 1 css-px according to scaling factor
|
||||
//
|
||||
// sp-to-px converts a 'sp' value to css-pixel value. Units, if specified will be stripped
|
||||
// dp-to-px converts a 'dp' value to css-pixel value. Units, if specified will be stripped
|
||||
//
|
||||
// @param {number} $value - sp or dp value to convert.
|
||||
//
|
||||
// @return {number} in px.
|
||||
//
|
||||
@function dp-to-px($value) {
|
||||
$value: strip-unit($value) * strip-unit($sg-dp-scale-factor) * 1px;
|
||||
@if ($value == 0sp) { $value: 0; } // Turn 0rem into 0
|
||||
@return $value;
|
||||
}
|
||||
@function sp-to-px($value) {
|
||||
$value: strip-unit($value) * $sg-sp-scale-factor * 1px;
|
||||
@if ($value == 0sp) { $value: 0; } // Turn 0sp into 0
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,282 @@
|
||||
// Responsive attributes
|
||||
// ------------------------------
|
||||
|
||||
// hide means hide everywhere
|
||||
/* Sizes:
|
||||
0 <= size <= 600 Phone
|
||||
600 <= size <= 960 Tablet
|
||||
960 <= size <= 1200 Tablet-Landscape
|
||||
1200 <= size PC
|
||||
*/
|
||||
|
||||
[layout] {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[layout=column] {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
[layout=row] {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
[layout-padding],
|
||||
[layout-padding] > [flex] {
|
||||
padding: $layout-gutter-width / 2;
|
||||
}
|
||||
[layout-margin],
|
||||
[layout-margin] > [flex] {
|
||||
margin: $layout-gutter-width / 2;
|
||||
}
|
||||
|
||||
[layout-wrap] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[layout-fill] {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
[layout-fill] {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin layout-for-name($name) {
|
||||
[layout-#{$name}] {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
[layout-#{$name}=column] {
|
||||
flex-direction: column;
|
||||
}
|
||||
[layout-#{$name}=row] {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex-properties-for-name($name: null) {
|
||||
$flexName: 'flex';
|
||||
@if $name != null {
|
||||
$flexName: 'flex-#{$name}';
|
||||
}
|
||||
|
||||
[#{$flexName}] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
// (0-20) * 5 = 0-100%
|
||||
@for $i from 0 through 20 {
|
||||
[#{$flexName}="#{$i * 5}"] {
|
||||
flex: 0 0 #{$i * 5 + '%'};
|
||||
}
|
||||
[layout="row"] > [#{$flexName}="#{$i * 5}"] {
|
||||
max-width: #{$i * 5 + '%'};
|
||||
}
|
||||
[layout="column"] > [#{$flexName}="#{$i * 5}"] {
|
||||
max-height: #{$i * 5 + '%'};
|
||||
}
|
||||
}
|
||||
|
||||
[layout="row"] {
|
||||
> [#{$flexName}="33"], > [#{$flexName}="34"] {
|
||||
flex: 0 0 33.33%;
|
||||
max-width: 33.33%;
|
||||
}
|
||||
> [#{$flexName}="66"], > [#{$flexName}="67"] {
|
||||
flex: 0 0 66.66%;
|
||||
max-width: 66.66%;
|
||||
}
|
||||
}
|
||||
[layout="column"] {
|
||||
> [#{$flexName}="33"], > [#{$flexName}="34"] {
|
||||
flex: 0 0 33.33%;
|
||||
max-height: 33.33%;
|
||||
}
|
||||
> [#{$flexName}="66"], > [#{$flexName}="67"] {
|
||||
flex: 0 0 66.66%;
|
||||
max-height: 66.66%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment attributes for layout containers' children
|
||||
// Arrange on the Main Axis
|
||||
// center, start, end, space-between, space-around
|
||||
// flex-start is the default for justify-content
|
||||
// ------------------------------
|
||||
|
||||
@mixin layout-align-for-name($suffix: null) {
|
||||
$name: 'layout-align';
|
||||
@if $suffix != null {
|
||||
$name: 'layout-align-#{$suffix}';
|
||||
}
|
||||
|
||||
// Main Axis Center
|
||||
[#{$name}="center"], //stretch
|
||||
[#{$name}="center center"],
|
||||
[#{$name}="center start"],
|
||||
[#{$name}="center end"] {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Main Axis End
|
||||
[#{$name}="end"], //stretch
|
||||
[#{$name}="end center"],
|
||||
[#{$name}="end start"],
|
||||
[#{$name}="end end"] {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// Main Axis Space Around
|
||||
[#{$name}="space-around"], //stretch
|
||||
[#{$name}="space-around center"],
|
||||
[#{$name}="space-around start"],
|
||||
[#{$name}="space-around end"] {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
// Main Axis Space Between
|
||||
[#{$name}="space-between"], //stretch
|
||||
[#{$name}="space-between center"],
|
||||
[#{$name}="space-between start"],
|
||||
[#{$name}="space-between end"] {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
// Arrange on the Cross Axis
|
||||
// center, start, end
|
||||
// stretch is the default for align-items
|
||||
// ------------------------------
|
||||
|
||||
// Cross Axis Center
|
||||
[#{$name}="center center"],
|
||||
[#{$name}="start center"],
|
||||
[#{$name}="end center"],
|
||||
[#{$name}="space-between center"],
|
||||
[#{$name}="space-around center"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Cross Axis Start
|
||||
[#{$name}="center start"],
|
||||
[#{$name}="start start"],
|
||||
[#{$name}="end start"],
|
||||
[#{$name}="space-between start"],
|
||||
[#{$name}="space-around start"] {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// Cross Axis End
|
||||
[#{$name}="center end"],
|
||||
[#{$name}="start end"],
|
||||
[#{$name}="end end"],
|
||||
[#{$name}="space-between end"],
|
||||
[#{$name}="space-around end"] {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Flex attributes for layout children
|
||||
// ------------------------------
|
||||
|
||||
@include flex-properties-for-name();
|
||||
@include layout-align-for-name();
|
||||
|
||||
[hide]:not([show]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $layout-breakpoint-sm) {
|
||||
[hide-sm], [hide] {
|
||||
&:not([show-sm]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(sm);
|
||||
@include layout-for-name(sm);
|
||||
@include flex-properties-for-name(sm);
|
||||
}
|
||||
@media (min-width: $layout-breakpoint-sm) {
|
||||
[hide-gt-sm], [hide] {
|
||||
&:not([show-gt-sm]):not([show-md]):not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(gt-sm);
|
||||
@include layout-for-name(gt-sm);
|
||||
@include flex-properties-for-name(gt-sm);
|
||||
}
|
||||
|
||||
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) {
|
||||
[hide-md], [hide] {
|
||||
&:not([show-md]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(md);
|
||||
@include layout-for-name(md);
|
||||
@include flex-properties-for-name(md);
|
||||
}
|
||||
@media (min-width: $layout-breakpoint-md) {
|
||||
[hide-gt-md], [hide] {
|
||||
&:not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(gt-md);
|
||||
@include layout-for-name(gt-md);
|
||||
@include flex-properties-for-name(gt-md);
|
||||
}
|
||||
|
||||
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) {
|
||||
[hide-lg], [hide] {
|
||||
&:not([show-lg]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(lg);
|
||||
@include layout-for-name(lg);
|
||||
@include flex-properties-for-name(lg);
|
||||
}
|
||||
@media (min-width: $layout-breakpoint-lg) {
|
||||
[hide-gt-lg], [hide] {
|
||||
&:not([show-gt-lg]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(gt-lg);
|
||||
@include layout-for-name(gt-lg);
|
||||
@include flex-properties-for-name(gt-lg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Order attributes for layout children
|
||||
// ------------------------------
|
||||
[flex-order="0"] { order: 0; }
|
||||
[flex-order="1"] { order: 1; }
|
||||
[flex-order="2"] { order: 2; }
|
||||
[flex-order="3"] { order: 3; }
|
||||
[flex-order="4"] { order: 4; }
|
||||
[flex-order="5"] { order: 5; }
|
||||
[flex-order="6"] { order: 6; }
|
||||
[flex-order="7"] { order: 7; }
|
||||
[flex-order="8"] { order: 8; }
|
||||
[flex-order="9"] { order: 9; }
|
||||
@@ -0,0 +1,19 @@
|
||||
@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
|
||||
-webkit-margin-before: $before;
|
||||
-webkit-margin-after: $after;
|
||||
-webkit-margin-start: $start;
|
||||
-webkit-margin-end: $end;
|
||||
}
|
||||
|
||||
@mixin not-selectable($value:none) {
|
||||
user-select: $value;
|
||||
}
|
||||
|
||||
@mixin input-placeholder-color($color) {
|
||||
&::-webkit-input-placeholder,
|
||||
&::-moz-placeholder, /* Firefox 19+ */
|
||||
&:-moz-placeholder, /* Firefox 18- */
|
||||
&:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
/**
|
||||
*
|
||||
* SOGo v3
|
||||
* ng-Material overrides and project variables
|
||||
* typography - definitions from http://www.google.com/design/spec/style/typography.html#typography-standard-styles
|
||||
**/
|
||||
|
||||
// Google's Material design specs are in 'sp' or 'dp' which are not css units
|
||||
// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels' (same as dp, but will be scaled by the user's font size preference)
|
||||
// Android gives a 160dpi base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px'
|
||||
// We define a scaling factor in case we need to adjust
|
||||
// 'sp' is scale to 1 css-px for a rem-base-value of 16px (default)
|
||||
// 'dp' is scale to 1 css-px according to scaling factor
|
||||
|
||||
$sg-dp-scale-factor: 1 !global;
|
||||
|
||||
// rem specification (in 'px')
|
||||
$sg-rem-base-value: 16 !global;
|
||||
$sg-rem-value: $sg-rem-base-value !default;
|
||||
|
||||
// We assume that user define rem value to get legible font-size
|
||||
$sg-sp-scale-factor: $sg-rem-value / $sg-rem-base-value !global;
|
||||
|
||||
// Font-size basic scale (from Google)
|
||||
// NiceToHave : generate with a loop
|
||||
$sg-typo-scale: (
|
||||
12,
|
||||
14,
|
||||
16,
|
||||
20,
|
||||
24,
|
||||
34,
|
||||
45,
|
||||
56,
|
||||
112
|
||||
) !global;
|
||||
|
||||
@function sg-font-size($nb) {
|
||||
$size: nth($sg-typo-scale, $nb);
|
||||
$sg-font-size: sp-to-px($size);
|
||||
@return $sg-font-size;
|
||||
}
|
||||
// Basic typographic classes
|
||||
|
||||
$sg-font-size-1 :sp-to-px(1);
|
||||
|
||||
$h1-font-size-base: 2em !default;
|
||||
$h1-margin-base: 0.67em 0 !default;
|
||||
|
||||
$h2-font-size-base: 1.5em !default;
|
||||
$h2-margin-base: 0.83em 0 !default;
|
||||
|
||||
$h3-font-size-base: 1.17em !default;
|
||||
$h3-margin-base: 1em 0 !default;
|
||||
|
||||
$h4-font-size-base: 1em !default;
|
||||
$h4-margin-base: 1.33em 0 !default;
|
||||
|
||||
$h5-font-size-base: 0.83em !default;
|
||||
$h5-margin-base: 1.67em 0 !default;
|
||||
|
||||
$h6-font-size-base: 0.75em !default;
|
||||
$h6-margin-base: 2.33em 0 !default;
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
color: $foreground-primary-color;
|
||||
background: $background-color-base;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
p {
|
||||
line-height: 1.846;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: block;
|
||||
@include margin-selectors();
|
||||
font-size: 1.17em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
select,
|
||||
html,
|
||||
textarea,
|
||||
input {
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: sg-font-size(2);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.inset {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
a,
|
||||
a:-webkit-any-link {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1-font-size-base;
|
||||
margin: $h1-margin-base;
|
||||
}
|
||||
h2 {
|
||||
font-size: $h2-font-size-base;
|
||||
margin: $h2-margin-base;
|
||||
}
|
||||
h3 {
|
||||
font-size: $h3-font-size-base;
|
||||
margin: $h3-margin-base;
|
||||
}
|
||||
h4 {
|
||||
font-size: $h4-font-size-base;
|
||||
margin: $h4-margin-base;
|
||||
}
|
||||
h5 {
|
||||
font-size: $h5-font-size-base;
|
||||
margin: $h5-margin-base;
|
||||
}
|
||||
h6 {
|
||||
font-size: $h6-font-size-base;
|
||||
margin: $h6-margin-base;
|
||||
}
|
||||
|
||||
select,
|
||||
button,
|
||||
textarea,
|
||||
input {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Fix Android 4.0 button bugs
|
||||
input[type="reset"],
|
||||
input[type="submit"],
|
||||
html input[type="button"],
|
||||
button {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: button;
|
||||
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="radio"],
|
||||
&[type="checkbox"] {
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.md-shadow-bottom-z-1 {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
.md-shadow-bottom-z-2 {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.md-shadow-animated.md-shadow {
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* A container inside of a rippling element (eg a button),
|
||||
* which contains all of the individual ripples
|
||||
*/
|
||||
.md-ripple-container {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.55s $swift-ease-out-timing-function;
|
||||
}
|
||||
|
||||
.md-ripple {
|
||||
position: absolute;
|
||||
transform: scale(0);
|
||||
transform-origin: 50% 50%;
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
&.md-ripple-placed {
|
||||
transition: left 0.9s $swift-ease-out-timing-function,
|
||||
top 0.9s $swift-ease-out-timing-function,
|
||||
margin 0.65s $swift-ease-out-timing-function,
|
||||
border 0.65s $swift-ease-out-timing-function,
|
||||
width 0.65s $swift-ease-out-timing-function,
|
||||
height 0.65s $swift-ease-out-timing-function,
|
||||
opacity 0.65s $swift-ease-out-timing-function,
|
||||
transform 0.65s $swift-ease-out-timing-function;
|
||||
}
|
||||
&.md-ripple-scaled {
|
||||
transform: scale(1);
|
||||
}
|
||||
&.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
|
||||
opacity: 0.20;
|
||||
}
|
||||
}
|
||||
|
||||
md-tab {
|
||||
> .md-ripple-container {
|
||||
.md-ripple {
|
||||
box-sizing: content-box;
|
||||
background-color: transparent !important;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
opacity: 0.20;
|
||||
transform: none !important;
|
||||
&.md-ripple-placed {}
|
||||
&.md-ripple-scaled {}
|
||||
&.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
|
||||
opacity: 0.20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function map-to-string($map) {
|
||||
$map-str: '{';
|
||||
$keys: map-keys($map);
|
||||
$len: length($keys);
|
||||
@for $i from 1 through $len {
|
||||
$key: nth($keys, $i);
|
||||
$value: map-get($map, $key);
|
||||
$map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
|
||||
@if $i != $len {
|
||||
$map-str: $map-str + ',';
|
||||
}
|
||||
}
|
||||
@return $map-str + '}';
|
||||
}
|
||||
.md-color-palette-definition {
|
||||
$content-rule: '{';
|
||||
$map-str: '';
|
||||
$keys: map-keys($colors);
|
||||
$len: length($keys);
|
||||
@for $i from 1 through $len {
|
||||
$key: nth($keys, $i);
|
||||
$value: map-get($colors, $key);
|
||||
$content-rule: $content-rule + '_' + $key + '_: ' + map-to-string($value);
|
||||
@if $i != $len {
|
||||
$content-rule: $content-rule + ',';
|
||||
}
|
||||
}
|
||||
$content-rule: $content-rule + '}';
|
||||
background-image: url("data:image/svg+xml;utf8,#{$content-rule}");
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
// Font Variables
|
||||
$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
|
||||
$font-family: Ubuntu, 'Helvetica Neue', sans-serif; //override
|
||||
$dark-theme: false !default;
|
||||
$foreground-color-palette: $color-grey !default;
|
||||
$foreground-base-color: map-get($foreground-color-palette, '1000') !default;
|
||||
$foreground-primary-color: rgba($foreground-base-color, 0.73) !default; $foreground-primary-color: rgba($foreground-base-color, 0.87);//override
|
||||
$foreground-secondary-color: rgba($foreground-base-color, 0.54) !default;
|
||||
$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default;
|
||||
$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default;
|
||||
$foreground-text-shadow: none !default;
|
||||
|
||||
|
||||
$input-border-color: $foreground-secondary-color !default;
|
||||
$input-disabled-border-color: $foreground-tertiary-color !default;
|
||||
|
||||
$background-color-palette: $color-grey !default;
|
||||
$background-color-base: map-get($background-color-palette, 'A100') !default;
|
||||
|
||||
$primary-color-palette: $color-light-blue !default;
|
||||
$warn-color-palette: $color-red !default;
|
||||
$primary-color-palette-contrast-color: white !default;
|
||||
|
||||
// Layout
|
||||
// ------------------------------
|
||||
|
||||
$baseline-grid: 8px !default;
|
||||
$layout-breakpoint-sm: 600px !default;
|
||||
$layout-breakpoint-md: 960px !default;
|
||||
$layout-breakpoint-lg: 1200px !default;
|
||||
$layout-gutter-width: ($baseline-grid * 2) !default;
|
||||
|
||||
|
||||
// App bar variables
|
||||
$app-bar-height: 64px;
|
||||
|
||||
$toast-height: $baseline-grid * 3 !default;
|
||||
$toast-margin: $baseline-grid * 1 !default;
|
||||
|
||||
// Whiteframes
|
||||
|
||||
$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0,0,0,0.26) !default;
|
||||
$whiteframe-zindex-z1: 1 !default;
|
||||
$whiteframe-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2) !default;
|
||||
$whiteframe-zindex-z2: 2 !default;
|
||||
$whiteframe-shadow-z3: 0px 17px 50px rgba(0,0,0,0.19) !default;
|
||||
$whiteframe-zindex-z3: 3 !default;
|
||||
$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0,0,0,0.22) !default;
|
||||
$whiteframe-zindex-z4: 4 !default;
|
||||
$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2) !default;
|
||||
$whiteframe-zindex-z5: 5 !default;
|
||||
|
||||
|
||||
|
||||
// Z-indexes
|
||||
//--------------------------------------------
|
||||
|
||||
$z-index-tooltip: 100 !default;
|
||||
$z-index-dialog: 80 !default;
|
||||
$z-index-toast: 90 !default;
|
||||
$z-index-bottom-sheet: 70 !default;
|
||||
$z-index-sidenav: 60 !default;
|
||||
$z-index-backdrop: 50 !default;
|
||||
$z-index-fab: 20 !default;
|
||||
|
||||
// Easing Curves
|
||||
//--------------------------------------------
|
||||
|
||||
$swift-ease-out-duration: 0.4s !default;
|
||||
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
||||
|
||||
$swift-ease-in-duration: 0.3s !default;
|
||||
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
|
||||
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
|
||||
|
||||
$swift-ease-in-out-duration: 0.5s !default;
|
||||
$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
|
||||
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
|
||||
Reference in New Issue
Block a user