css: refactoring & fixing - day 1
This commit is contained in:
24
src/styles/abstracts/_mixins.scss
Normal file
24
src/styles/abstracts/_mixins.scss
Normal file
@ -0,0 +1,24 @@
|
||||
@mixin style-template-fieldset($name: 'default') {
|
||||
template-legend-#{$name} {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
color: $color-233-18-29;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
|
||||
box-shadow: 0 0 8px 0 $shadow;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
%user-role {
|
||||
border: 1px solid $color-45-95-54;
|
||||
border-radius: 3px;
|
||||
color: $color-210-4-50;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
margin-right: 0.4rem;
|
||||
padding: calc(1.6rem - 0.8em) 0.7em;
|
||||
}
|
25
src/styles/abstracts/_variables.scss
Normal file
25
src/styles/abstracts/_variables.scss
Normal file
@ -0,0 +1,25 @@
|
||||
// Color Variables
|
||||
$color-43-100-50: hsl(43, 100%, 50%);
|
||||
$color-45-95-54: hsl(45, 95%, 54%);
|
||||
$color-46-100-67: hsl(46, 100%, 67%);
|
||||
$color-46-100-50: hsl(46, 100%, 50%);
|
||||
$color-0-0-100: hsl(0, 0%, 100%);
|
||||
$color-210-17-91: hsl(210, 17%, 91%);
|
||||
$color-222-52-90: hsl(222, 52%, 90%);
|
||||
$color-210-25-95: hsl(210, 25%, 95%);
|
||||
$color-222-57-95: hsl(222, 57%, 95%);
|
||||
$color-213-20-91: hsl(213, 20%, 91%);
|
||||
$color-221-51-90: hsl(221, 51%, 90%);
|
||||
$color-0-0-85: hsl(0, 0%, 85%);
|
||||
$color-229-25-79: hsl(229, 25%, 79%);
|
||||
$color-215-9-73: hsl(215, 9%, 73%);
|
||||
$color-244-10-70: hsl(244, 10%, 70%);
|
||||
$color-215-6-63: hsl(215, 6%, 63%);
|
||||
$color-210-5-56: hsl(210, 5%, 56%);
|
||||
$color-210-4-50: hsl(210, 4%, 50%);
|
||||
$color-213-4-50: hsl(213, 4%, 50%);
|
||||
$color-213-13-86: hsla(213, 13%, 86%, 0.2);
|
||||
$color-0-0-29: hsl(0, 0%, 29%);
|
||||
$color-233-18-29: hsl(233, 18%, 29%);
|
||||
$color-216-4-22: hsl(216, 4%, 22%);
|
||||
$color-244-73-62: hsl(244, 73%, 62%);
|
Reference in New Issue
Block a user