diff options
Diffstat (limited to 'assets/css/scss/helpers')
| -rw-r--r-- | assets/css/scss/helpers/.DS_Store | bin | 0 -> 6148 bytes | |||
| -rw-r--r-- | assets/css/scss/helpers/_custom.scss | 3 | ||||
| -rw-r--r-- | assets/css/scss/helpers/_mixins.scss | 97 | ||||
| -rw-r--r-- | assets/css/scss/helpers/_utilities.scss | 455 | ||||
| -rw-r--r-- | assets/css/scss/helpers/_variables.scss | 91 |
5 files changed, 646 insertions, 0 deletions
diff --git a/assets/css/scss/helpers/.DS_Store b/assets/css/scss/helpers/.DS_Store Binary files differnew file mode 100644 index 0000000..3774adc --- /dev/null +++ b/assets/css/scss/helpers/.DS_Store diff --git a/assets/css/scss/helpers/_custom.scss b/assets/css/scss/helpers/_custom.scss new file mode 100644 index 0000000..d1701d5 --- /dev/null +++ b/assets/css/scss/helpers/_custom.scss @@ -0,0 +1,3 @@ +// +// Your Custom Styles // +//
\ No newline at end of file diff --git a/assets/css/scss/helpers/_mixins.scss b/assets/css/scss/helpers/_mixins.scss new file mode 100644 index 0000000..912ad47 --- /dev/null +++ b/assets/css/scss/helpers/_mixins.scss @@ -0,0 +1,97 @@ +// +// Mixins // +// +@mixin display-flex { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +@mixin background-size($background-size) { + -webkit-background-size: $background-size; + -moz-background-size: $background-size; + background-size: $background-size; +} + +@mixin box-shadow($box-shadow) { + -webkit-box-shadow: $box-shadow; + box-shadow: $box-shadow; +} + +@mixin text-shadow($text-shadow) { + -webkit-text-shadow: $text-shadow; + text-shadow: $text-shadow; +} + +@mixin filter($filter) { + -webkit-filter: $filter; + filter: $filter; +} + +@mixin transition($transition) { + -webkit-transition: $transition; + transition: $transition; +} +@mixin transition-delay($transition-delay) { + -webkit-transition-delay: $transition-delay; + transition-delay: $transition-delay; +} +@mixin transition-duration($transition-duration) { + -webkit-transition-duration: $transition-duration; + transition-duration: $transition-duration; +} + +@mixin transform($transform) { + -webkit-transform: $transform; + transform: $transform; +} +@mixin transform-origin($transform-origin) { + -webkit-transform-origin: $transform-origin; + transform-origin: $transform-origin; +} + +@mixin animation($animation) { + -webkit-animation: $animation; + animation: $animation; +} +@mixin animation-delay($animation-delay) { + -webkit-animation-delay: $animation-delay; + animation-delay: $animation-delay; +} +@mixin animation-fill-mode($animation-fill-mode) { + -webkit-animation-fill-mode: $animation-fill-mode; + animation-fill-mode: $animation-fill-mode; +} + +@mixin breakpoint-above($class) { + @if $class == xs { + @media (min-width: 0) { @content; } + } + @else if $class == sm { + @media (min-width: 576px) { @content; } + } + @else if $class == md { + @media (min-width: 768px) { @content; } + } + @else if $class == lg { + @media (min-width: 992px) { @content; } + } + @else if $class == xl { + @media (min-width: 1200px) { @content; } + } +} +@mixin breakpoint-less($class) { + @if $class == xs { + @media (max-width: 575.98px) { @content; } + } + @else if $class == sm { + @media (max-width: 767.98px) { @content; } + } + @else if $class == md { + @media (max-width: 991.98px) { @content; } + } + @else if $class == lg { + @media (max-width: 1199.98px) { @content; } + } +}
\ No newline at end of file diff --git a/assets/css/scss/helpers/_utilities.scss b/assets/css/scss/helpers/_utilities.scss new file mode 100644 index 0000000..ec59fe1 --- /dev/null +++ b/assets/css/scss/helpers/_utilities.scss @@ -0,0 +1,455 @@ +// +// Background colors // +// +.bg-white { background: $color-white !important; } +.bg-white-09 { background: $color-white-09 !important; } +.bg-white-08 { background: $color-white-08 !important; } +.bg-white-07 { background: $color-white-07 !important; } +.bg-white-06 { background: $color-white-06 !important; } +.bg-white-05 { background: $color-white-05 !important; } +.bg-white-04 { background: $color-white-04 !important; } +.bg-white-03 { background: $color-white-03 !important; } +.bg-white-02 { background: $color-white-02 !important; } +.bg-white-01 { background: $color-white-01 !important; } +.bg-black { background: $color-black !important; } +.bg-black-09 { background: $color-black-09 !important; } +.bg-black-08 { background: $color-black-08 !important; } +.bg-black-07 { background: $color-black-07 !important; } +.bg-black-06 { background: $color-black-06 !important; } +.bg-black-05 { background: $color-black-05 !important; } +.bg-black-04 { background: $color-black-04 !important; } +.bg-black-03 { background: $color-black-03 !important; } +.bg-black-02 { background: $color-black-02 !important; } +.bg-black-01 { background: $color-black-01 !important; } +.bg-dark { background: $bg-dark !important; } +.bg-dark-lighter { background: $bg-dark-lighter !important; } +.bg-dark-lightest { background: $bg-dark-lightest !important; } +.bg-dark-grey { background: $bg-dark-grey !important; } +.bg-dark-grey-09 { background: $bg-dark-grey-09 !important; } +.bg-dark-grey-08 { background: $bg-dark-grey-08 !important; } +.bg-dark-grey-07 { background: $bg-dark-grey-07 !important; } +.bg-dark-grey-06 { background: $bg-dark-grey-06 !important; } +.bg-dark-grey-05 { background: $bg-dark-grey-05 !important; } +.bg-dark-grey-04 { background: $bg-dark-grey-04 !important; } +.bg-dark-grey-03 { background: $bg-dark-grey-03 !important; } +.bg-dark-grey-02 { background: $bg-dark-grey-02 !important; } +.bg-dark-grey-01 { background: $bg-dark-grey-01 !important; } +.bg-grey { background: $bg-grey !important; } +.bg-grey-lighter { background: $bg-grey-lighter !important; } +.bg-grey-lightest { background: $bg-grey-lightest !important; } +.bg-transparent { background: transparent !important; } + +.bg-white-content { + color: $color-primary; + h1,h2,h3,h4,h5,h6 { color: $color-dark; } + a { + &:not([class*=' button'], [class^='button']) { + color: $color-primary; + &:hover, &:focus { color: $color-dark; } + } + } +} +.bg-dark-content { + color: $color-white-07; + h1, h2, h3, h4, h5, h6 { color: $color-white; } + a { + &:not([class*=' button'], [class^='button']) { + color: $color-white-08; + &:hover, &:focus { color: $color-white; } + } + } +} +div[class^='bg-white'], div[class*=' bg-white'] { + @extend .bg-white-content; +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + @extend .bg-dark-content; +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + div[class^='bg-white'], div[class*=' bg-white'] { + @extend .bg-white-content; + } +} + +// +// Font Families // +// +.font-family-primary { font-family: $font-family-primary } +.font-family-secondary, .font-family-playfair { font-family: $font-family-secondary } +.font-family-tertiary { font-family: $font-family-tertiary } + +// +// Font Weights // +// +.font-weight-thin { font-weight: $font-weight-thin; } +.font-weight-extra-light { font-weight: $font-weight-extra-light; } +.font-weight-medium { font-weight: $font-weight-medium; } +.font-weight-semi-bold { font-weight: $font-weight-semi-bold; } +.font-weight-extra-bold { font-weight: $font-weight-extra-bold; } +.font-weight-black { font-weight: $font-weight-black; } + +// +// Text Colors // +// +*.text-white-09 { color: $color-white-09; } +*.text-white-08 { color: $color-white-08; } +*.text-white-07 { color: $color-white-07; } +*.text-white-06 { color: $color-white-06; } +*.text-white-05 { color: $color-white-05; } +*.text-white-04 { color: $color-white-04; } +*.text-white-03 { color: $color-white-03; } +*.text-white-02 { color: $color-white-02; } +*.text-white-01 { color: $color-white-01; } + +*.text-black { color: $color-black; } +*.text-black-09 { color: $color-black-09; } +*.text-black-08 { color: $color-black-08; } +*.text-black-07 { color: $color-black-07; } +*.text-black-06 { color: $color-black-06; } +*.text-black-05 { color: $color-black-05; } +*.text-black-04 { color: $color-black-04; } +*.text-black-03 { color: $color-black-03; } +*.text-black-02 { color: $color-black-02; } +*.text-black-01 { color: $color-black-01; } + +*.text-dark { color: $color-dark !important; } +*.text-yellow { color: $color-warning-lighter; } +*.text-red { color: $color-red-lighter; } +*.text-green { color: $color-green-lighter; } +*.text-blue { color: $color-blue; } + +// +// Text Decorations // +// +.text-decoration-overline { text-decoration: overline; } +.text-decoration-line-through { text-decoration: line-through; } +.text-decoration-underline { text-decoration: underline; } +.text-decoration-underline-overline { text-decoration: underline overline; } +a, button { + &.text-decoration-overline { + &:hover { text-decoration: overline; } + } + &.text-decoration-line-through { + &:hover { text-decoration: line-through; } + } + &.text-decoration-underline { + &:hover { text-decoration: underline; } + } + &.text-decoration-underline-overline { + &:hover { text-decoration: underline overline; } + } +} + +// +// Stroke Text // +// +.stroke-text { + color: $color-dark; + -webkit-text-fill-color: transparent; + -webkit-text-stroke-width: 1.0px; + -webkit-text-stroke-color: $color-dark; + @include breakpoint-above(md) { + -webkit-text-stroke-width: 1.2px; + } + @include breakpoint-above(lg) { + -webkit-text-stroke-width: 1.4px; + } +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + .stroke-text { + color: $color-white; + -webkit-text-stroke-color: $color-white; + } + div[class^='bg-white'], div[class*=' bg-white'] { + color: $color-dark; + -webkit-text-stroke-color: $color-dark; + } +} + +// +// Fancy Text // +// +.fancy-text { + -webkit-text-fill-color: transparent; + -webkit-text-stroke-width: 1.0px; + -webkit-text-stroke-color: $color-dark; + @include text-shadow(3px 3px 0 rgb(219, 221, 223)); + @include breakpoint-above(md) { -webkit-text-stroke-width: 1.2px; } + @include breakpoint-above(lg) { -webkit-text-stroke-width: 1.4px; } + &.display-1, &.display-2, &.display-3 { + @include text-shadow(4px 4px 0 rgb(219, 221, 223)); + } + @include breakpoint-above(md) { + &.display-1, &.display-2, &.display-3 { + @include text-shadow(5px 5px 0 rgb(219, 221, 223)); + } + &.display-4 { + @include text-shadow(4px 4px 0 rgb(219, 221, 223)); + } + } +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + .fancy-text { + color: $color-white; + -webkit-text-stroke-color: $color-white; + @include text-shadow(3px 3px 0 rgb(46, 48, 50)); + &.display-1, &.display-2, &.display-3 { + @include text-shadow(4px 4px 0 rgb(46, 48, 50)); + } + @include breakpoint-above(md) { + &.display-1, &.display-2, &.display-3 { + @include text-shadow(5px 5px 0 rgb(46, 48, 50)); + } + &.display-4 { + @include text-shadow(4px 4px 0 rgb(46, 48, 50)); + } + } + } + div[class^='bg-white'], div[class*=' bg-white'] { + .fancy-text { + color: $color-dark; + -webkit-text-stroke-color: $color-dark; + @include text-shadow(3px 3px 0 rgb(219, 221, 223)); + &.display-1, &.display-2, &.display-3 { + @include text-shadow(4px 4px 0 rgb(219, 221, 223)); + } + @include breakpoint-above(md) { + &.display-1, &.display-2, &.display-3 { + @include text-shadow(5px 5px 0 rgb(219, 221, 223)); + } + &.display-4 { + @include text-shadow(4px 4px 0 rgb(219, 221, 223)); + } + } + } + } +} + +// +// Borders // +// +.border-all, +.border-top, +.border-right, +.border-bottom, +.border-left { + border-width: 0; + border-style: solid; + border-color: $color-black-01 !important; +} +.border-all { border-width: 1px; } +.border-top { border-top-width: 1px; } +.border-right { border-right-width: 1px; } +.border-bottom { border-bottom-width: 1px; } +.border-left { border-left-width: 1px; } + +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + .border-all, .border-top, .border-right, .border-bottom, .border-left { + border-color: $color-white-02 !important; + } +} + +// +// Border Styles // +// +.border-style-dotted { border-style: dotted !important; } +.border-style-dashed { border-style: dashed !important; } + +// +// Spacing - Margin // +// +.margin-top-10 { margin-top: 10px; } +.margin-top-20 { margin-top: 20px; } +.margin-top-30 { margin-top: 30px; } +.margin-top-40 { margin-top: 40px; } +.margin-top-50 { margin-top: 50px; } +.margin-top-60 { margin-top: 60px; } +.margin-top-70 { margin-top: 70px; } +.margin-right-10 { margin-right: 10px; } +.margin-right-20 { margin-right: 20px; } +.margin-right-30 { margin-right: 30px; } +.margin-left-10 { margin-left: 10px; } +.margin-left-20 { margin-left: 20px; } +.margin-left-30 { margin-left: 30px; } +.margin-bottom-10 { margin-bottom: 10px; } +.margin-bottom-20 { margin-bottom: 20px; } +.margin-bottom-30 { margin-bottom: 30px; } +.margin-bottom-40 { margin-bottom: 40px; } +.margin-bottom-50 { margin-bottom: 50px; } +.margin-bottom-60 { margin-bottom: 60px; } +.margin-bottom-70 { margin-bottom: 70px; } +@include breakpoint-above(md) { + .margin-md-top-10 { margin-top: 10px; } + .margin-md-top-20 { margin-top: 20px; } + .margin-md-top-30 { margin-top: 30px; } + .margin-md-top-40 { margin-top: 40px; } + .margin-md-top-50 { margin-top: 50px; } + .margin-md-top-60 { margin-top: 60px; } + .margin-md-top-70 { margin-top: 70px; } + .margin-md-right-10 { margin-right: 10px; } + .margin-md-right-20 { margin-right: 20px; } + .margin-md-right-30 { margin-right: 30px; } + .margin-md-left-10 { margin-left: 10px; } + .margin-md-left-20 { margin-left: 20px; } + .margin-md-left-30 { margin-left: 30px; } + .margin-md-bottom-10 { margin-bottom: 10px; } + .margin-md-bottom-20 { margin-bottom: 20px; } + .margin-md-bottom-30 { margin-bottom: 30px; } + .margin-md-bottom-40 { margin-bottom: 40px; } + .margin-md-bottom-50 { margin-bottom: 50px; } + .margin-md-bottom-60 { margin-bottom: 60px; } + .margin-md-bottom-70 { margin-bottom: 70px; } +} +@include breakpoint-above(lg) { + .margin-lg-top-10 { margin-top: 10px; } + .margin-lg-top-20 { margin-top: 20px; } + .margin-lg-top-30 { margin-top: 30px; } + .margin-lg-top-40 { margin-top: 40px; } + .margin-lg-top-50 { margin-top: 50px; } + .margin-lg-top-60 { margin-top: 60px; } + .margin-lg-top-70 { margin-top: 70px; } + .margin-lg-right-10 { margin-right: 10px; } + .margin-lg-right-20 { margin-right: 20px; } + .margin-lg-right-30 { margin-right: 30px; } + .margin-lg-left-10 { margin-left: 10px; } + .margin-lg-left-20 { margin-left: 20px; } + .margin-lg-left-30 { margin-left: 30px; } + .margin-lg-bottom-10 { margin-bottom: 10px; } + .margin-lg-bottom-20 { margin-bottom: 20px; } + .margin-lg-bottom-30 { margin-bottom: 30px; } + .margin-lg-bottom-40 { margin-bottom: 40px; } + .margin-lg-bottom-50 { margin-bottom: 50px; } + .margin-lg-bottom-60 { margin-bottom: 60px; } + .margin-lg-bottom-70 { margin-bottom: 70px; } +} +@include breakpoint-above(xl) { + .margin-xl-top-10 { margin-top: 10px; } + .margin-xl-top-20 { margin-top: 20px; } + .margin-xl-top-30 { margin-top: 30px; } + .margin-xl-top-40 { margin-top: 40px; } + .margin-xl-top-50 { margin-top: 50px; } + .margin-xl-top-60 { margin-top: 60px; } + .margin-xl-top-70 { margin-top: 70px; } + .margin-xl-right-10 { margin-right: 10px; } + .margin-xl-right-20 { margin-right: 20px; } + .margin-xl-right-30 { margin-right: 30px; } + .margin-xl-left-10 { margin-left: 10px; } + .margin-xl-left-20 { margin-left: 20px; } + .margin-xl-left-30 { margin-left: 30px; } + .margin-xl-bottom-10 { margin-bottom: 10px; } + .margin-xl-bottom-20 { margin-bottom: 20px; } + .margin-xl-bottom-30 { margin-bottom: 30px; } + .margin-xl-bottom-40 { margin-bottom: 40px; } + .margin-xl-bottom-50 { margin-bottom: 50px; } + .margin-xl-bottom-60 { margin-bottom: 60px; } + .margin-xl-bottom-70 { margin-bottom: 70px; } +} +.margin-0 { margin: 0 !important; } +@include breakpoint-above(md) { + .margin-md-0 { margin: 0 !important; } +} +@include breakpoint-above(lg) { + .margin-lg-0 { margin: 0 !important; } +} +@include breakpoint-above(xl) { + .margin-xl-0 { margin: 0 !important; } +} + +// +// Spacing - Padding // +// +.padding-10 { padding: 10px; } +.padding-20 { padding: 20px; } +.padding-30 { padding: 30px; } +.padding-40 { padding: 40px; } +.padding-50 { padding: 50px; } +.padding-60 { padding: 60px; } +.padding-70 { padding: 70px; } +.padding-x-10 { padding-left: 10px; padding-right: 10px; } +.padding-x-20 { padding-left: 20px; padding-right: 20px; } +.padding-x-30 { padding-left: 30px; padding-right: 30px; } +.padding-x-40 { padding-left: 40px; padding-right: 40px; } +.padding-x-50 { padding-left: 50px; padding-right: 50px; } +.padding-x-60 { padding-left: 60px; padding-right: 60px; } +.padding-x-70 { padding-left: 70px; padding-right: 70px; } +.padding-y-10 { padding-top: 10px; padding-bottom: 10px; } +.padding-y-20 { padding-top: 20px; padding-bottom: 20px; } +.padding-y-30 { padding-top: 30px; padding-bottom: 30px; } +.padding-y-40 { padding-top: 40px; padding-bottom: 40px; } +.padding-y-50 { padding-top: 50px; padding-bottom: 50px; } +.padding-y-60 { padding-top: 60px; padding-bottom: 60px; } +.padding-y-70 { padding-top: 70px; padding-bottom: 70px; } +@include breakpoint-above(md) { + .padding-md-10 { padding: 10px; } + .padding-md-20 { padding: 20px; } + .padding-md-30 { padding: 30px; } + .padding-md-40 { padding: 40px; } + .padding-md-50 { padding: 50px; } + .padding-md-60 { padding: 60px; } + .padding-md-70 { padding: 70px; } + .padding-x-md-10 { padding-left: 10px; padding-right: 10px; } + .padding-x-md-20 { padding-left: 20px; padding-right: 20px; } + .padding-x-md-30 { padding-left: 30px; padding-right: 30px; } + .padding-x-md-40 { padding-left: 40px; padding-right: 40px; } + .padding-x-md-50 { padding-left: 50px; padding-right: 50px; } + .padding-x-md-60 { padding-left: 60px; padding-right: 60px; } + .padding-x-md-70 { padding-left: 70px; padding-right: 70px; } + .padding-y-md-10 { padding-top: 10px; padding-bottom: 10px; } + .padding-y-md-20 { padding-top: 20px; padding-bottom: 20px; } + .padding-y-md-30 { padding-top: 30px; padding-bottom: 30px; } + .padding-y-md-40 { padding-top: 40px; padding-bottom: 40px; } + .padding-y-md-50 { padding-top: 50px; padding-bottom: 50px; } + .padding-y-md-60 { padding-top: 60px; padding-bottom: 60px; } + .padding-y-md-70 { padding-top: 70px; padding-bottom: 70px; } +} +@include breakpoint-above(lg) { + .padding-lg-10 { padding: 10px; } + .padding-lg-20 { padding: 20px; } + .padding-lg-30 { padding: 30px; } + .padding-lg-40 { padding: 40px; } + .padding-lg-50 { padding: 50px; } + .padding-lg-60 { padding: 60px; } + .padding-lg-70 { padding: 70px; } + .padding-x-lg-10 { padding-left: 10px; padding-right: 10px; } + .padding-x-lg-20 { padding-left: 20px; padding-right: 20px; } + .padding-x-lg-30 { padding-left: 30px; padding-right: 30px; } + .padding-x-lg-40 { padding-left: 40px; padding-right: 40px; } + .padding-x-lg-50 { padding-left: 50px; padding-right: 50px; } + .padding-x-lg-60 { padding-left: 60px; padding-right: 60px; } + .padding-x-lg-70 { padding-left: 70px; padding-right: 70px; } + .padding-y-lg-10 { padding-top: 10px; padding-bottom: 10px; } + .padding-y-lg-20 { padding-top: 20px; padding-bottom: 20px; } + .padding-y-lg-30 { padding-top: 30px; padding-bottom: 30px; } + .padding-y-lg-40 { padding-top: 40px; padding-bottom: 40px; } + .padding-y-lg-50 { padding-top: 50px; padding-bottom: 50px; } + .padding-y-lg-60 { padding-top: 60px; padding-bottom: 60px; } + .padding-y-lg-70 { padding-top: 70px; padding-bottom: 70px; } +} +@include breakpoint-above(xl) { + .padding-xl-10 { padding: 10px; } + .padding-xl-20 { padding: 20px; } + .padding-xl-30 { padding: 30px; } + .padding-xl-40 { padding: 40px; } + .padding-xl-50 { padding: 50px; } + .padding-xl-60 { padding: 60px; } + .padding-xl-70 { padding: 70px; } + .padding-x-xl-10 { padding-left: 10px; padding-right: 10px; } + .padding-x-xl-20 { padding-left: 20px; padding-right: 20px; } + .padding-x-xl-30 { padding-left: 30px; padding-right: 30px; } + .padding-x-xl-40 { padding-left: 40px; padding-right: 40px; } + .padding-x-xl-50 { padding-left: 50px; padding-right: 50px; } + .padding-x-xl-60 { padding-left: 60px; padding-right: 60px; } + .padding-x-xl-70 { padding-left: 70px; padding-right: 70px; } + .padding-y-xl-10 { padding-top: 10px; padding-bottom: 10px; } + .padding-y-xl-20 { padding-top: 20px; padding-bottom: 20px; } + .padding-y-xl-30 { padding-top: 30px; padding-bottom: 30px; } + .padding-y-xl-40 { padding-top: 40px; padding-bottom: 40px; } + .padding-y-xl-50 { padding-top: 50px; padding-bottom: 50px; } + .padding-y-xl-60 { padding-top: 60px; padding-bottom: 60px; } + .padding-y-xl-70 { padding-top: 70px; padding-bottom: 70px; } +} +.padding-0 { padding: 0 !important; } +.padding-top-0 { padding-top: 0 !important; } +.padding-right-0 { padding-right: 0 !important; } +.padding-bottom-0 { padding-bottom: 0 !important; } +.padding-left-0 { padding-left: 0 !important; }
\ No newline at end of file diff --git a/assets/css/scss/helpers/_variables.scss b/assets/css/scss/helpers/_variables.scss new file mode 100644 index 0000000..0eadb79 --- /dev/null +++ b/assets/css/scss/helpers/_variables.scss @@ -0,0 +1,91 @@ +// +// Font // +// +$font-family-primary: 'Open Sans', sans-serif; +$font-family-secondary: 'Playfair Display', serif; +$font-family-tertiary: 'Poppins', sans-serif; +$font-weight-black: 900; +$font-weight-extra-bold: 800; +$font-weight-bold: 700; +$font-weight-semi-bold: 600; +$font-weight-medium: 500; +$font-weight-regular: 400; +$font-weight-light: 300; +$font-weight-extra-light: 200; +$font-weight-thin: 100; + +// +// Colors // +// +$color-white: #fff; +$color-black: #000; +$color-black-09: rgba(0, 0, 0, 0.9); +$color-black-08: rgba(0, 0, 0, 0.8); +$color-black-07: rgba(0, 0, 0, 0.7); +$color-black-06: rgba(0, 0, 0, 0.6); +$color-black-05: rgba(0, 0, 0, 0.5); +$color-black-04: rgba(0, 0, 0, 0.4); +$color-black-03: rgba(0, 0, 0, 0.3); +$color-black-02: rgba(0, 0, 0, 0.2); +$color-black-015: rgba(0, 0, 0, 0.15); +$color-black-01: rgba(0, 0, 0, 0.1); +$color-black-005: rgba(0, 0, 0, 0.05); +$color-white-09: rgba(255, 255, 255, 0.9); +$color-white-08: rgba(255, 255, 255, 0.8); +$color-white-07: rgba(255, 255, 255, 0.7); +$color-white-06: rgba(255, 255, 255, 0.6); +$color-white-05: rgba(255, 255, 255, 0.5); +$color-white-04: rgba(255, 255, 255, 0.4); +$color-white-03: rgba(255, 255, 255, 0.3); +$color-white-02: rgba(255, 255, 255, 0.2); +$color-white-015: rgba(255, 255, 255, 0.15); +$color-white-01: rgba(255, 255, 255, 0.1); +$color-primary: #7C7C7C; +$color-primary-lighter: #AAAAAA; +$color-green: #24963e; +$color-green-lighter: #28a745; +$color-red: #c62f3e; +$color-red-lighter: #dc3545; +$color-warning: #e5ad06; +$color-warning-lighter: #ffc107; +$color-info: #1491a5; +$color-info-lighter: #17a2b8; +$color-dark: rgb(19, 21, 23); +$color-dark-lighter: rgb(26, 28, 30); +$color-blue: #007bff; + +// +// Background colors // +// +$bg-dark: rgb(19, 21, 23); +$bg-dark-lighter: rgb(26, 28, 30); +$bg-dark-lightest: rgb(33, 35, 37); +$bg-dark-grey: rgb(48, 50, 52); +$bg-dark-grey-09: rgba(48, 50, 52, 0.9); +$bg-dark-grey-09: rgba(48, 50, 52, 0.9); +$bg-dark-grey-08: rgba(48, 50, 52, 0.8); +$bg-dark-grey-07: rgba(48, 50, 52, 0.7); +$bg-dark-grey-06: rgba(48, 50, 52, 0.6); +$bg-dark-grey-05: rgba(48, 50, 52, 0.5); +$bg-dark-grey-04: rgba(48, 50, 52, 0.4); +$bg-dark-grey-03: rgba(48, 50, 52, 0.3); +$bg-dark-grey-02: rgba(48, 50, 52, 0.2); +$bg-dark-grey-01: rgba(48, 50, 52, 0.1); +$bg-grey: rgb(239, 242, 245); +$bg-grey-lighter: rgb(242, 245, 248); +$bg-grey-lightest: rgb(245, 248, 251); + +// +// Border colors // +// +$border-dark: $color-dark; +$border-grey: rgb(227, 230, 233); + +// +// Button colors // +// +$button-dark: $color-dark; +$button-dark-lighter: rgb(29, 32, 35); +$button-grey: rgb(229, 232, 235); +$button-grey-lighter: rgb(239, 242, 245); +$button-grey-darker: rgb(221, 224, 227);
\ No newline at end of file |