ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Update scss vars namespace and add easings

Browse Source
This commit is contained in:
Lucas Vallenet
2022-05-20 13:32:47 +02:00
parent 32ba1c0eeb
commit 141a8ffa97
9 changed files with 104 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/styles/components/_form.scss
View File

@@ -27,7 +27,7 @@ $input-icon-color: 424242; // No #
.c-form_input {
padding: rem(10px);
border: 1px solid lightgray;
background-color: white;
background-color: $color-lightest;
&:hover {
border-color: darkgray;
@@ -71,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
}
&::before {
background-color: $white;
background-color: $color-lightest;
border: 1px solid lightgray;
}

2
assets/styles/components/_scrollbar.scss
View File

@@ -25,7 +25,7 @@
position: absolute;
top: 0;
right: 0;
background-color: black;
background-color: $color-darkest;
opacity: 0.5;
width: 7px;
border-radius: 10px;

6
assets/styles/elements/_document.scss
View File

@@ -15,7 +15,7 @@ html {
min-height: 100%; // [2]
line-height: $line-height;
font-family: ff("sans");
color: $color;
color: $font-color;
line-height: $line-height; // [3]
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -74,9 +74,9 @@ body {
}
a {
color: $link-color;
color: $color-link;
@include u-hocus {
color: $link-hover-color;
color: $color-link-hover;
}
}

2
assets/styles/generic/_generic.scss
View File

@@ -33,7 +33,7 @@ i {
b,
strong {
font-weight: $bold;
font-weight: $font-weight-bold;
}
a {

22
assets/styles/settings/_config.colors.scss
View File

@@ -5,25 +5,25 @@
// Palette
// =============================================================================
$white: #FFFFFF;
$black: #000000;
$color-lightest : #FFFFFF;
$color-darkest : #000000;
// Specific
// =============================================================================
// Link
$link-color: #1A0DAB;
$link-focus-color: #1A0DAB;
$link-hover-color: darken(#1A0DAB, 10%);
$color-link : #1A0DAB;
$color-link-focus : #1A0DAB;
$color-link-hover : darken(#1A0DAB, 10%);
// Selection
$selection-text-color: #3297FD;
$selection-background-color: #FFFFFF;
$selection-text-color : #3297FD;
$selection-background-color : #FFFFFF;
// Social Colors
// =============================================================================
$facebook-color: #3B5998;
$instagram-color: #E1306C;
$youtube-color: #CD201F;
$twitter-color: #1DA1F2;
$color-facebook : #3B5998;
$color-instagram : #E1306C;
$color-youtube : #CD201F;
$color-twitter : #1DA1F2;

63
assets/styles/settings/_config.eases.scss
View File

@@ -2,22 +2,47 @@
// Settings / Config / Eases
// ==========================================================================
$Power1EaseOut: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$Power2EaseOut: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$Power3EaseOut: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$Power4EaseOut: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$Power1EaseIn: cubic-bezier(0.550, 0.085, 0.680, 0.530) ;
$Power2EaseIn: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$Power3EaseIn: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$Power4EaseIn: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ExpoEaseOut: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ExpoEaseIn: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ExpoEaseInOut: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$SineEaseOut: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$SineEaseIn: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$Power1EaseInOut: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$Power2EaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$Power3EaseInOut: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$Power4EaseInOut: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$SlowEaseOut: cubic-bezier(.04,1.15,0.4,.99);
$bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33);
// Power 1
$ease-power1-in : cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-power1-out : cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-power1-in-out : cubic-bezier(0.455, 0.030, 0.515, 0.955);
// Power 2
$ease-power2-in : cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-power2-out : cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-power2-in-out : cubic-bezier(0.645, 0.045, 0.355, 1.000);
// Power 3
$ease-power3-in : cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-power3-out : cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-power3-in-out : cubic-bezier(0.770, 0.000, 0.175, 1.000);
// Power 3
$ease-power4-in : cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-power4-out : cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-power4-in-out : cubic-bezier(0.860, 0.000, 0.070, 1.000);
// Expo
$ease-expo-in : cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-expo-out : cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-expo-in-out : cubic-bezier(1.000, 0.000, 0.000, 1.000);
// Back
$ease-back-in : cubic-bezier(0.600, -0.280, 0.735, 0.045);
$ease-back-out : cubic-bezier(0.175, 00.885, 0.320, 1.275);
$ease-back-in-out : cubic-bezier(0.680, -0.550, 0.265, 1.550);
// Sine
$ease-sine-in : cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-sine-out : cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-sine-in-out : cubic-bezier(0.445, 0.050, 0.550, 0.950);
// Circ
$ease-circ-in : cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-circ-out : cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-circ-in-out : cubic-bezier(0.785, 0.135, 0.150, 0.860);
// Misc
$ease-bounce : cubic-bezier(0.17, 0.67, 0.3, 1.33);
$ease-slow-out : cubic-bezier(.04,1.15,0.4,.99);
$ease-smooth : cubic-bezier(0.380, 0.005, 0.215, 1);

76
assets/styles/settings/_config.scss
View File

@@ -31,61 +31,61 @@ $font-faces: (
// =============================================================================
// Base
$font-size: 16px;
$line-height: 24px / $font-size;
$color: #222222;
$font-size : 16px;
$line-height : 24px / $font-size;
$font-color : $color-darkest;
// Headings
$font-size-h1: 36px !default;
$font-size-h2: 28px !default;
$font-size-h3: 24px !default;
$font-size-h4: 20px !default;
$font-size-h5: 18px !default;
$font-size-h6: 16px !default;
$line-height-h: $line-height;
$font-size-h1 : 36px !default;
$font-size-h2 : 28px !default;
$font-size-h3 : 24px !default;
$font-size-h4 : 20px !default;
$font-size-h5 : 18px !default;
$font-size-h6 : 16px !default;
$line-height-h : $line-height;
// Weights
$light: 300;
$normal: 400;
$medium: 500;
$bold: 700;
$font-weight-light : 300;
$font-weight-normal : 400;
$font-weight-medium : 500;
$font-weight-bold : 700;
// Transitions
// =============================================================================
$speed: 0.3s;
$easing: $Power2EaseOut;
$speed : 0.3s;
$easing : $ease-power2-out;
// Spacing Units
// =============================================================================
$unit: 60px;
$unit-small: 30px;
$unit : 60px;
$unit-small : 30px;
// Container
// =============================================================================
$container-width: 2000px;
$padding: $unit;
$container-width : 2000px;
$padding : $unit;
// Breakpoints
// =============================================================================
$from-tiny: 500px !default;
$to-tiny: $from-tiny - 1 !default;
$from-small: 700px !default;
$to-small: $from-small - 1 !default;
$from-medium: 1000px !default;
$to-medium: $from-medium - 1 !default;
$from-large: 1200px !default;
$to-large: $from-large - 1 !default;
$from-big: 1400px !default;
$to-big: $from-big - 1 !default;
$from-huge: 1600px !default;
$to-huge: $from-huge - 1 !default;
$from-enormous: 1800px !default;
$to-enormous: $from-enormous - 1 !default;
$from-gigantic: 2000px !default;
$to-gigantic: $from-gigantic - 1 !default;
$from-colossal: 2400px !default;
$to-colossal: $from-colossal - 1 !default;
$from-tiny : 500px !default;
$to-tiny : $from-tiny - 1 !default;
$from-small : 700px !default;
$to-small : $from-small - 1 !default;
$from-medium : 1000px !default;
$to-medium : $from-medium - 1 !default;
$from-large : 1200px !default;
$to-large : $from-large - 1 !default;
$from-big : 1400px !default;
$to-big : $from-big - 1 !default;
$from-huge : 1600px !default;
$to-huge : $from-huge - 1 !default;
$from-enormous : 1800px !default;
$to-enormous : $from-enormous - 1 !default;
$from-gigantic : 2000px !default;
$to-gigantic : $from-gigantic - 1 !default;
$from-colossal : 2400px !default;
$to-colossal : $from-colossal - 1 !default;

6
www/assets/styles/main.css
View File

@@ -520,7 +520,7 @@ html {
min-height: 100%;
line-height: 1.5;
font-family: "Webfont Sans", "Helvetica Neue", Arial, sans-serif;
color: #222222;
color: #000000;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -753,7 +753,7 @@ a:focus, a:hover {
position: absolute;
top: 0;
right: 0;
background-color: black;
background-color: #000000;
opacity: 0.5;
width: 7px;
border-radius: 10px;
@@ -818,7 +818,7 @@ a:focus, a:hover {
.c-form_input, .c-form_select_input, .c-form_textarea {
padding: 0.625rem;
border: 1px solid lightgray;
background-color: white;
background-color: #FFFFFF;
}
.c-form_input:hover, .c-form_select_input:hover, .c-form_textarea:hover {

2
www/assets/styles/main.css.map
View File

File diff suppressed because one or more lines are too long