Typography-2
iRouge
Francis Lachapelle
parent
8f01b0c739
commit
907df81436
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,316 +1,4 @@
|
|||
/**
|
||||
*
|
||||
* 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' equals 1/16rem, wich represents 1 css pixel
|
||||
// 'dp' is scale to 1 css-px according
|
||||
|
||||
// We assume users are setting browser's base font-size according to their needs
|
||||
// The default rem size in use for most browsers is 16 css pixels
|
||||
// Body font size is defined as 100%, so it won't changege users'settings
|
||||
$sg-rem-base-value: 16 !global;
|
||||
$sg-sp-value: (1 / $sg-rem-base-value) !default; // sp value
|
||||
|
||||
// Font-size basic scale (from Google)
|
||||
// NiceToHave : generate with a loop
|
||||
$sg-typo-scale: (
|
||||
12,
|
||||
14,
|
||||
16,
|
||||
20,
|
||||
24,
|
||||
34,
|
||||
45,
|
||||
56,
|
||||
112
|
||||
) !global;
|
||||
|
||||
// todo: fix that
|
||||
@function sg-font-sizes($size-list: $sg-typo-scale, $prefix: '$sg-font-size') {
|
||||
@for $n from 1 to length($size-list) {
|
||||
@return '#{$prefix}-#{$n}: sp-to-px( nth($size-list, $n) )';
|
||||
}
|
||||
}
|
||||
|
||||
// Basic typographic sizes
|
||||
// Fixme: add a rounding function
|
||||
|
||||
$sg-font-size-1: nth($sg-typo-scale, 1) * 1px;
|
||||
$sg-font-size-2: nth($sg-typo-scale, 2) * 1px;
|
||||
$sg-font-size-3: nth($sg-typo-scale, 3) * 1px;
|
||||
$sg-font-size-4: nth($sg-typo-scale, 4) * 1px;
|
||||
$sg-font-size-5: nth($sg-typo-scale, 5) * 1px;
|
||||
$sg-font-size-6: nth($sg-typo-scale, 6) * 1px;
|
||||
$sg-font-size-7: nth($sg-typo-scale, 7) * 1px;
|
||||
$sg-font-size-8: nth($sg-typo-scale, 8) * 1px;
|
||||
$sg-font-size-9: nth($sg-typo-scale, 9) * 1px;
|
||||
|
||||
$h1-font-size-base: $sg-font-size-9;
|
||||
$h1-margin-base: 0.67em 0;
|
||||
|
||||
$h2-font-size-base: $sg-font-size-8;
|
||||
$h2-margin-base: 0.83em 0 !default;
|
||||
|
||||
$h3-font-size-base: $sg-font-size-7;
|
||||
$h3-margin-base: 1em 0;
|
||||
|
||||
$h4-font-size-base: $sg-font-size-6;
|
||||
$h4-margin-base: 1.33em 0;
|
||||
|
||||
$h5-font-size-base: $sg-font-size-5;
|
||||
$h5-margin-base: 1.67em 0;
|
||||
|
||||
$h6-font-size-base: $sg-font-size-4;
|
||||
$h6-margin-base: 2.33em 0;
|
||||
|
||||
*,
|
||||
*: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;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
select,
|
||||
html,
|
||||
textarea,
|
||||
input {
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 100%;
|
||||
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;
|
||||
}
|
||||
// Ad html selector to prevent angular-material.css from overriding our definition
|
||||
// fixme: remove this for production
|
||||
html h3 {
|
||||
display: block;
|
||||
@include margin-selectors();
|
||||
font-size: $h3-font-size-base;
|
||||
font-weight: 400;
|
||||
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;
|
||||
//}
|
||||
/*! structure.scss - */
|
||||
// ngMaterial source for overrides
|
||||
// ----------------------------------------------------------------------------
|
||||
@import '../../angular-material/src/core/style/structure.scss';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,325 @@
|
|||
/*! typography.scss - */
|
||||
////
|
||||
/// SOGo
|
||||
/// Version: #{$Version}
|
||||
/// Module: typography
|
||||
///
|
||||
/// Main typography module file define basic typographic styles
|
||||
////
|
||||
|
||||
// Fonts declaration
|
||||
// ----------------------------------------------------------------------------
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-Hair.eot');
|
||||
src: url('fonts/FiraSans-Hair.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-Hair.woff') format('woff'),
|
||||
url('fonts/FiraSans-Hair.ttf') format('truetype');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-Book.eot');
|
||||
src: url('fonts/FiraSans-Book.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-Book.woff') format('woff'),
|
||||
url('fonts/FiraSans-Book.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-Light.eot');
|
||||
src: url('fonts/FiraSans-Light.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-Light.woff') format('woff'),
|
||||
url('fonts/FiraSans-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-Regular.eot');
|
||||
src: url('fonts/FiraSans-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-Regular.woff') format('woff'),
|
||||
url('fonts/FiraSans-Regular.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-Thin.eot');
|
||||
src: url('fonts/FiraSans-Thin.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-Thin.woff') format('woff'),
|
||||
url('fonts/FiraSans-Thin.ttf') format('truetype');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-medium.eot');
|
||||
src: url('fonts/FiraSans-medium.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-medium.woff') format('woff'),
|
||||
url('fonts/FiraSans-medium.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-HairItalic.eot');
|
||||
src: url('fonts/FiraSans-HairItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-HairItalic.woff2') format('woff2'),
|
||||
url('fonts/FiraSans-HairItalic.woff') format('woff'),
|
||||
url('fonts/FiraSans-HairItalic.ttf') format('truetype');
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-BookItalic.eot');
|
||||
src: url('fonts/FiraSans-BookItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-BookItalic.woff') format('woff'),
|
||||
url('fonts/FiraSans-BookItalic.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-LightItalic.eot');
|
||||
src: url('fonts/FiraSans-LightItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-LightItalic.woff') format('woff'),
|
||||
url('fonts/FiraSans-LightItalic.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-RegularItalic.eot');
|
||||
src: url('fonts/FiraSans-RegularItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-RegularItalic.woff') format('woff'),
|
||||
url('fonts/FiraSans-RegularItalic.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-ThinItalic.eot');
|
||||
src: url('fonts/FiraSans-ThinItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-ThinItalic.woff') format('woff'),
|
||||
url('fonts/FiraSans-ThinItalic.ttf') format('truetype');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira sans';
|
||||
src: url('fonts/FiraSans-mediumItalic.eot');
|
||||
src: url('fonts/FiraSans-mediumItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/FiraSans-mediumItalic.woff') format('woff'),
|
||||
url('fonts/FiraSans-mediumItalic.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// 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' equals 1/16rem, wich represents 1 css pixel
|
||||
// 'dp' is scale to 1 css-px according
|
||||
|
||||
// We assume users are setting browser's base font-size according to their needs
|
||||
// The default rem size in use for most browsers is 16 css pixels
|
||||
// Body font size is defined as 100%, so it won't changege users'settings
|
||||
|
||||
$sg-rem-Base-value: 16 !global;
|
||||
$sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value
|
||||
|
||||
$sg-md-baseline: 4px;
|
||||
|
||||
// Font-size basic scale (from Google)
|
||||
// NiceToHave : generate with a loop
|
||||
$sg-typo-scale: (
|
||||
12,
|
||||
14,
|
||||
16,
|
||||
20,
|
||||
24,
|
||||
34,
|
||||
45,
|
||||
56,
|
||||
112
|
||||
) !global;
|
||||
|
||||
// todo: fix that
|
||||
@function sg-font-sizes($size-List: $sg-typo-scale, $prefix: '$sg-font-size') {
|
||||
@for $n from 1 to length($size-List) {
|
||||
@return '#{$prefix}-#{$n}: sp-to-px( nth($size-List, $n) )';
|
||||
}
|
||||
}
|
||||
|
||||
// Basic typographic sizes
|
||||
// ----------------------------------------------------------------------------
|
||||
$sg-font-size-1: nth($sg-typo-scale, 1) * 1px;
|
||||
$sg-font-size-2: nth($sg-typo-scale, 2) * 1px;
|
||||
$sg-font-size-3: nth($sg-typo-scale, 3) * 1px;
|
||||
$sg-font-size-4: nth($sg-typo-scale, 4) * 1px;
|
||||
$sg-font-size-5: nth($sg-typo-scale, 5) * 1px;
|
||||
$sg-font-size-6: nth($sg-typo-scale, 6) * 1px;
|
||||
$sg-font-size-7: nth($sg-typo-scale, 7) * 1px;
|
||||
$sg-font-size-8: nth($sg-typo-scale, 8) * 1px;
|
||||
$sg-font-size-9: nth($sg-typo-scale, 9) * 1px;
|
||||
|
||||
// Basic line heights
|
||||
// ----------------------------------------------------------------------------
|
||||
$sg-line-height-1: $sg-font-size-1 + $sg-md-baseline;
|
||||
$sg-line-height-2: 20px;
|
||||
$sg-line-height-3: 24px;
|
||||
$sg-line-height-4: $sg-font-size-4 + $sg-md-baseline;
|
||||
$sg-line-height-5: 32px;
|
||||
$sg-line-height-6: 40px;
|
||||
$sg-line-height-7: $sg-font-size-7 + $sg-md-baseline;
|
||||
$sg-line-height-8: $sg-font-size-8 + $sg-md-baseline;
|
||||
$sg-line-height-9: $sg-font-size-9 + $sg-md-baseline;
|
||||
// Font weights
|
||||
// Google Material Design specifications strongly recommend to avoid bold
|
||||
// font weight. Here are some variables to define weights more conveniently
|
||||
// ----------------------------------------------------------------------------
|
||||
$sg-font-light: 200;
|
||||
$sg-font-regular: 400;
|
||||
$sg-font-medium: 600;
|
||||
$sg-font-Bold: $sg-font-medium;
|
||||
|
||||
// h elements definitions
|
||||
// ----------------------------------------------------------------------------
|
||||
$h1-font-size-Base: $sg-font-size-9;
|
||||
$h1-margin-Base: 0.67em 0;
|
||||
|
||||
$h2-font-size-Base: $sg-font-size-8;
|
||||
$h2-margin-Base: 0.83em 0;
|
||||
|
||||
$h3-font-size-Base: $sg-font-size-7;
|
||||
$h3-margin-Base: 1em 0;
|
||||
|
||||
$h4-font-size-Base: $sg-font-size-6;
|
||||
$h4-margin-Base: 1.33em 0;
|
||||
|
||||
$h5-font-size-Base: $sg-font-size-5;
|
||||
$h5-margin-Base: 1.67em 0;
|
||||
|
||||
$h6-font-size-Base: $sg-font-size-4;
|
||||
$h6-margin-Base: 2.33em 0;
|
||||
|
||||
/// Gogle Material Design Standard styles
|
||||
/// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles)
|
||||
// -------------------------------------------------------------------------------------------------
|
||||
.sg-md {
|
||||
&-.caption {
|
||||
font-size: $sg-font-size-1;
|
||||
line-height: $sg-line-height-1;
|
||||
font-weight: $sg-font-regular;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&-.menu {
|
||||
font-size: $sg-font-size-2;
|
||||
line-height: $sg-line-height-1;
|
||||
font-weight: $sg-font-medium;
|
||||
white-space: nowrap;}
|
||||
&-.button {
|
||||
font-size: $sg-font-size-2;
|
||||
line-height: $sg-line-height-1;
|
||||
font-weight: $sg-font-medium;
|
||||
white-space: nowrap;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
&-.body-1 {
|
||||
font-size: $sg-font-size-1;
|
||||
line-height: $sg-line-height-2;
|
||||
font-weight: $sg-font-regular;
|
||||
margin-top: ($sg-line-height-2 * -1);
|
||||
margin-bottom: $sg-line-height-2;
|
||||
}
|
||||
/// @alias .body-1
|
||||
&-.body-multi {
|
||||
@extend .body-1;
|
||||
}
|
||||
&-.body-2 {
|
||||
$lineHeight : $sg-line-height-2 + $sg-md-baseline;
|
||||
font-size: $sg-font-size-1;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-medium;
|
||||
margin-top: ($lineHeight * -1);
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
&-.subhead-1 {
|
||||
$lineHeight : $sg-line-height-3;
|
||||
font-size: $sg-font-size-3;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-regular;
|
||||
margin-top: ($lineHeight * -1);
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
&-.subhead-2 {
|
||||
$lineHeight : $sg-line-height-3 + $sg-md-baseline;
|
||||
font-size: $sg-font-size-3;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-regular;
|
||||
margin-top: ($lineHeight * -1);
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
&-.title {
|
||||
$lineHeight : $sg-line-height-4;
|
||||
font-size: $sg-font-size-4;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-medium;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&-.headline {
|
||||
$lineHeight : $sg-line-height-5;
|
||||
font-size: $sg-font-size-5;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-regular;
|
||||
margin-top: ($lineHeight * -1);
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
&-.display-1 {
|
||||
$lineHeight : $sg-line-height-6;
|
||||
font-size: $sg-font-size-6;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-regular;
|
||||
margin-top: ($lineHeight * -1);
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
&-.display-2 {
|
||||
$lineHeight: $sg-line-height-7;
|
||||
font-size: $sg-font-size-7;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-regular;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&-.display-3 {
|
||||
$lineHeight : $sg-line-height-8;
|
||||
font-size: $sg-font-size-8;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-regular;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&-.display-4 {
|
||||
$lineHeight : $sg-line-height-9;
|
||||
font-size: $sg-font-size-9;
|
||||
line-height: $lineHeight;
|
||||
font-weight: $sg-font-light;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
/// Some specification class names are counterintuitive. Here are some aliases
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -21,7 +21,7 @@ $foreground-primary-color: rgba($primary-color, 0.87);//override
|
|||
//$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;
|
||||
|
||||
$bottombar-color: #212121;
|
||||
|
||||
//$input-border-color: $foreground-secondary-color !default;
|
||||
//$input-disabled-border-color: $foreground-tertiary-color !default;
|
||||
|
|
@ -32,8 +32,7 @@ $foreground-primary-color: rgba($primary-color, 0.87);//override
|
|||
//$primary-color-palette: $color-light-blue !default;
|
||||
//$warn-color-palette: $color-red !default;
|
||||
//$primary-color-palette-contrast-color: white !default;
|
||||
//todo ; create grey map
|
||||
$bottombar-color: #121212;
|
||||
//todo ; create grey map$bottombar-color: #121212;
|
||||
|
||||
// Layout
|
||||
// ------------------------------
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
@import 'core/mixins';
|
||||
@import 'core/structure';
|
||||
@import 'core/layout';
|
||||
@import 'core/typography/typography';
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue