Update CSS variable architecture
This commit is contained in:
schmelczerandras
parent
d77aabf966
commit
7e75685b0e
39 changed files with 585 additions and 1952 deletions
|
|
@ -1,6 +0,0 @@
|
|||
$_id_value: 0;
|
||||
@function id() {
|
||||
$_id_value: $_id_value + 1 !global;
|
||||
@return $_id_value;
|
||||
}
|
||||
|
||||
|
|
@ -1,50 +1,48 @@
|
|||
@use 'sass:color';
|
||||
@use 'include' as i;
|
||||
@use 'style/mixins' as *;
|
||||
|
||||
@include i.responsive() using ($vars) {
|
||||
a {
|
||||
$border-shift: 10px;
|
||||
$line-width: 2px;
|
||||
a {
|
||||
$border-shift: 10px;
|
||||
$line-width: 2px;
|
||||
|
||||
@include i.special-text-font($vars);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
@include special-text-font();
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
padding-bottom: $line-width;
|
||||
padding-bottom: $line-width;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: calc(100% + #{$border-shift});
|
||||
border-bottom: $line-width dashed var(--accent-color);
|
||||
transition: transform var(--transition-time);
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: $line-width;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--card-color) 0,
|
||||
transparent 4px,
|
||||
transparent calc(100% - 4px),
|
||||
var(--card-color) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
width: calc(100% + #{$border-shift});
|
||||
border-bottom: $line-width dashed map_get($vars, i.$accent-color);
|
||||
transition: transform map_get($vars, i.$transition-time);
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: $line-width;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
map_get($vars, i.$card-color) 0,
|
||||
color.adjust(map_get($vars, i.$card-color), $alpha: -1) 4px,
|
||||
color.adjust(map_get($vars, i.$card-color), $alpha: -1) calc(100% - 4px),
|
||||
map_get($vars, i.$card-color) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
transform: translateX(-$border-shift);
|
||||
}
|
||||
transform: translateX(-$border-shift);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
@use 'vars';
|
||||
@forward "../framework/framework" with (
|
||||
$small-screen-light-theme-variables: vars.$small-screen-light-theme-variables,
|
||||
$small-screen-dark-theme-variables: vars.$small-screen-dark-theme-variables,
|
||||
$large-screen-light-theme-variables: vars.$large-screen-light-theme-variables,
|
||||
$large-screen-dark-theme-variables: vars.$large-screen-dark-theme-variables,
|
||||
);
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
// https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin
|
||||
/* lato-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url('../static/fonts/lato/lato-v16-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Regular'), local('Lato-Regular'),
|
||||
url('../static/fonts/lato/lato-v16-latin-regular.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url('../static/fonts/lato/lato-v16-latin-regular.woff2')
|
||||
format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../static/fonts/lato/lato-v16-latin-regular.woff') format('woff'),
|
||||
/* Modern Browsers */ url('../static/fonts/lato/lato-v16-latin-regular.ttf')
|
||||
format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../static/fonts/lato/lato-v16-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
/* lato-italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url('../static/fonts/lato/lato-v16-latin-italic.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Italic'), local('Lato-Italic'),
|
||||
url('../static/fonts/lato/lato-v16-latin-italic.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url('../static/fonts/lato/lato-v16-latin-italic.woff2')
|
||||
format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../static/fonts/lato/lato-v16-latin-italic.woff') format('woff'),
|
||||
/* Modern Browsers */ url('../static/fonts/lato/lato-v16-latin-italic.ttf')
|
||||
format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../static/fonts/lato/lato-v16-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* montserrat-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url('../static/fonts/montserrat/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Montserrat Regular'), local('Montserrat-Regular'),
|
||||
url('../static/fonts/montserrat/montserrat-v14-latin-regular.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../static/fonts/montserrat/montserrat-v14-latin-regular.woff2')
|
||||
format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../static/fonts/montserrat/montserrat-v14-latin-regular.woff')
|
||||
format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../static/fonts/montserrat/montserrat-v14-latin-regular.ttf')
|
||||
format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../static/fonts/montserrat/montserrat-v14-latin-regular.svg#Montserrat')
|
||||
format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@forward "configured-responsive";
|
||||
@forward "mixins";
|
||||
@forward "vars" hide
|
||||
$small-screen-light-theme-variables,
|
||||
$small-screen-dark-theme-variables,
|
||||
$large-screen-light-theme-variables,
|
||||
$large-screen-dark-theme-variables;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@use "configured-responsive";
|
||||
@use "vars";
|
||||
@import '../framework/framework';
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Open+Sans:ital@0;1&display=swap');
|
||||
|
||||
@mixin center-children() {
|
||||
display: flex;
|
||||
|
|
@ -14,10 +15,10 @@
|
|||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
@mixin card-base($vars) {
|
||||
@mixin card-base() {
|
||||
text-align: center;
|
||||
padding: map_get($vars, vars.$normal-margin);
|
||||
box-shadow: map_get($vars, vars.$shadow);
|
||||
padding: var(--normal-margin);
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -32,32 +33,32 @@
|
|||
max-height: $size;
|
||||
}
|
||||
|
||||
@mixin title-font($vars) {
|
||||
font: 400 3.5rem 'Montserrat', serif;
|
||||
@mixin title-font() {
|
||||
font: 400 3rem 'Comfortaa', serif;
|
||||
font-style: normal;
|
||||
color: map_get($vars, vars.$normal-text-color);
|
||||
color: var(--normal-text-color);
|
||||
line-height: 1;
|
||||
|
||||
@include configured-responsive.on-small-screen {
|
||||
font-size: 3rem;
|
||||
@include on-small-screen {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sub-title-font($vars) {
|
||||
font: 400 2rem 'Montserrat', serif;
|
||||
color: map_get($vars, vars.$normal-text-color);
|
||||
@mixin sub-title-font() {
|
||||
font: 400 1.75rem 'Comfortaa', serif;
|
||||
color: var(--normal-text-color);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@mixin main-font($vars) {
|
||||
font: 400 1.25rem 'Lato', sans-serif;
|
||||
color: map_get($vars, vars.$normal-text-color);
|
||||
@mixin main-font() {
|
||||
font: 400 1.1rem 'Open Sans', sans-serif;
|
||||
color: var(--normal-text-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@mixin special-text-font($vars) {
|
||||
font: 400 1.1rem 'Lato', sans-serif;
|
||||
color: map_get($vars, vars.$special-text-color);
|
||||
@mixin special-text-font() {
|
||||
font: 400 1rem 'Open Sans', sans-serif;
|
||||
color: var(--special-text-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,108 +1,55 @@
|
|||
@use 'fonts';
|
||||
@use "id" as *;
|
||||
@import '../framework/framework';
|
||||
|
||||
/* KEYS */
|
||||
$background: id();
|
||||
$normal-text-color: id();
|
||||
$very-light-text-color: id();
|
||||
$special-text-color: id();
|
||||
$card-color: id();
|
||||
$sun-color: id();
|
||||
$accent-color: id();
|
||||
:root {
|
||||
--transition-time: 250ms;
|
||||
--line-width: 3px;
|
||||
--line-height: 18px;
|
||||
--accent-color: #b7455e;
|
||||
--sun-color: #f7f78c;
|
||||
--very-light-text-color: #ffffff;
|
||||
}
|
||||
|
||||
$transition-time: id();
|
||||
$border-radius: id();
|
||||
$line-width: id();
|
||||
$body-width: id();
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--normal-text-color: #31343f;
|
||||
--card-color: #ffffff;
|
||||
--special-text-color: var(--accent-color);
|
||||
}
|
||||
|
||||
$small-margin: id();
|
||||
$normal-margin: id();
|
||||
$large-margin: id();
|
||||
$icon-size: id();
|
||||
$line-height: id();
|
||||
@include on-large-screen {
|
||||
:root {
|
||||
--border-radius: 15px;
|
||||
--large-margin: 70px;
|
||||
--normal-margin: 45px;
|
||||
--small-margin: 25px;
|
||||
--shadow: 0 0 10px 2px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
--inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.075),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
--icon-size: 35px;
|
||||
--body-width: 765px;
|
||||
}
|
||||
}
|
||||
|
||||
$shadow: id();
|
||||
$inset-shadow: id();
|
||||
/**/
|
||||
@include on-small-screen {
|
||||
:root {
|
||||
--border-radius: 10px;
|
||||
--large-margin: 60px;
|
||||
--normal-margin: 30px;
|
||||
--small-margin: 15px;
|
||||
--shadow: 0 0 10px 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.125);
|
||||
--inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.05),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.125);
|
||||
--icon-size: 25px;
|
||||
--body-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
$universal-variables: (
|
||||
$transition-time: 250ms,
|
||||
$line-width: 3px,
|
||||
$line-height: 18px,
|
||||
$accent-color: #b7455e,
|
||||
$sun-color: #f7f78c,
|
||||
$very-light-text-color: #ffffff,
|
||||
);
|
||||
|
||||
$large-screen-variables: (
|
||||
$border-radius: 15px,
|
||||
$large-margin: 70px,
|
||||
$normal-margin: 45px,
|
||||
$small-margin: 25px,
|
||||
$shadow: (
|
||||
0 0 10px 2px rgba(0, 0, 0, 0.075),
|
||||
0 0 1px rgba(0, 0, 0, 0.2),
|
||||
),
|
||||
$inset-shadow: (
|
||||
inset 0 0 10px 2px rgba(0, 0, 0, 0.075),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.2),
|
||||
),
|
||||
$icon-size: 35px,
|
||||
$body-width: 765px,
|
||||
);
|
||||
|
||||
$small-screen-variables: (
|
||||
$border-radius: 10px,
|
||||
$large-margin: 60px,
|
||||
$normal-margin: 30px,
|
||||
$small-margin: 15px,
|
||||
$shadow: (
|
||||
0 0 10px 2px rgba(0, 0, 0, 0.05),
|
||||
0 0 1px rgba(0, 0, 0, 0.125),
|
||||
),
|
||||
$inset-shadow: (
|
||||
inset 0 0 10px 2px rgba(0, 0, 0, 0.05),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.125),
|
||||
),
|
||||
$icon-size: 25px,
|
||||
$body-width: 90%,
|
||||
);
|
||||
|
||||
$light-theme-variables: (
|
||||
$background: #ffffff,
|
||||
$normal-text-color: #31343f,
|
||||
$card-color: #ffffff,
|
||||
$special-text-color: map_get($universal-variables, $accent-color),
|
||||
);
|
||||
|
||||
$dark-theme-variables: (
|
||||
$background: #242638,
|
||||
$normal-text-color: #ffffff,
|
||||
$card-color: #263551,
|
||||
$special-text-color: #ffffff,
|
||||
$shadow: (
|
||||
0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
0 0 1px rgba(0, 0, 0, 0.4),
|
||||
),
|
||||
$inset-shadow: (
|
||||
inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.4),
|
||||
),
|
||||
);
|
||||
|
||||
$small-screen-light-theme-variables: map_merge(
|
||||
$universal-variables,
|
||||
map_merge($small-screen-variables, $light-theme-variables)
|
||||
);
|
||||
$small-screen-dark-theme-variables: map_merge(
|
||||
$universal-variables,
|
||||
map_merge($small-screen-variables, $dark-theme-variables)
|
||||
);
|
||||
$large-screen-light-theme-variables: map_merge(
|
||||
$universal-variables,
|
||||
map_merge($large-screen-variables, $light-theme-variables)
|
||||
);
|
||||
$large-screen-dark-theme-variables: map_merge(
|
||||
$universal-variables,
|
||||
map_merge($large-screen-variables, $dark-theme-variables)
|
||||
);
|
||||
@include in-dark-mode {
|
||||
--background: #242638;
|
||||
--normal-text-color: #ffffff;
|
||||
--card-color: #263551;
|
||||
--special-text-color: #ffffff;
|
||||
--shadow: 0 0 10px 2px rgba(0, 0, 0, 0.175), 0 0 1px rgba(0, 0, 0, 0.4);
|
||||
--inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
|
||||
inset 0 0 1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue