parent
412f162142
commit
1829d6a508
5 changed files with 1202 additions and 0 deletions
@ -0,0 +1,132 @@ |
||||
// button style |
||||
.content.content-active a { |
||||
color: $color-primary; |
||||
} |
||||
.content.has-underdot-link a { |
||||
border-bottom: 1px dashed; |
||||
&:hover { |
||||
border-bottom-style: solid; |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
.btn { |
||||
font-size: 15px; |
||||
padding: 14px 27px; |
||||
color: $white; |
||||
border-radius: 5px; |
||||
border: 0; |
||||
font-weight: 500; |
||||
transition: .3s; |
||||
position: relative; |
||||
svg{ |
||||
vertical-align: middle; |
||||
} |
||||
&:active, |
||||
&:focus { |
||||
border: 0; |
||||
box-shadow: none !important; |
||||
border-color: $color-primary !important; |
||||
} |
||||
&.btn-sm { |
||||
padding: 10px 25px; |
||||
} |
||||
&:hover { |
||||
transform: translateY(-3px); |
||||
.icon { |
||||
background-color: darken($color-primary, 12); |
||||
svg { |
||||
transform: translateX(3px); |
||||
} |
||||
} |
||||
} |
||||
&.has-icon { |
||||
padding: 14px 20px; |
||||
padding-right: 60px; |
||||
.icon { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
background-color: darken(desaturate($color-primary, 12.17), 4.71); |
||||
height: 100%; |
||||
width: 42px; |
||||
padding: 0 8px; |
||||
border-top-right-radius: 5px; |
||||
border-bottom-right-radius: 5px; |
||||
transition: 0.3s; |
||||
overflow: hidden; |
||||
svg { |
||||
height: 100%; |
||||
width: 27px; |
||||
margin-left: -1px; |
||||
transition: 0.3s; |
||||
} |
||||
} |
||||
} |
||||
&.btn-primary { |
||||
background-color: $color-primary !important; |
||||
&:hover, |
||||
&:active, |
||||
&:focus { |
||||
color: $white; |
||||
background-color: darken($color-primary, 5) !important; |
||||
} |
||||
&:hover { |
||||
box-shadow: 0px 15px 35px rgba($color-primary, .3); |
||||
} |
||||
} |
||||
&.btn-outline-primary { |
||||
color: $black-200; |
||||
background-color: transparent; |
||||
border: 0.094rem solid $color-primary; |
||||
&:active, |
||||
&:hover, |
||||
&:focus { |
||||
color: $white; |
||||
background-color: $color-primary !important; |
||||
} |
||||
&:hover { |
||||
box-shadow: 0px 15px 35px rgba($color-primary, .3); |
||||
} |
||||
} |
||||
&.btn-secondary { |
||||
background-color: darken($gray, 20) !important; |
||||
&:hover, |
||||
&:active, |
||||
&:focus { |
||||
color: $white; |
||||
background-color: darken($gray, 40) !important; |
||||
} |
||||
} |
||||
&.btn-outline-secondary { |
||||
color: $black-200; |
||||
background-color: transparent; |
||||
border: 0.094rem solid $gray; |
||||
&:active, |
||||
&:hover, |
||||
&:focus { |
||||
color: $white; |
||||
border-color: rgba($color-tertiary, .5) !important; |
||||
background-color: darken($gray, 20) !important; |
||||
} |
||||
} |
||||
&.btn-link { |
||||
color: $black-200; |
||||
background-color: transparent; |
||||
border: 0; |
||||
svg { |
||||
transition: transform .3s; |
||||
} |
||||
&:active, |
||||
&:hover, |
||||
&:focus { |
||||
color: $color-primary; |
||||
text-decoration: none; |
||||
svg { |
||||
transform: translateX(2px); |
||||
} |
||||
} |
||||
&.text-primary:hover { |
||||
color: darken($color-primary, 20) !important; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,961 @@ |
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap'); |
||||
|
||||
body { |
||||
color: $black-300; |
||||
background-color: $white; |
||||
font-family: $font-primary; |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
line-height: 1.65; |
||||
} |
||||
|
||||
::selection { |
||||
color: $white; |
||||
background-color: darken($color-primary, 5); |
||||
text-shadow: none; |
||||
} |
||||
|
||||
:focus { |
||||
outline: 0; |
||||
} |
||||
|
||||
/*------------------------------------------------------------------ |
||||
# default styles |
||||
-------------------------------------------------------------------*/ |
||||
@media (min-width: 1200px) { |
||||
|
||||
.container, |
||||
.container-lg, |
||||
.container-md, |
||||
.container-sm, |
||||
.container-xl { |
||||
max-width: 1170px; |
||||
} |
||||
} |
||||
|
||||
.section-padding { |
||||
padding: 80px 0; |
||||
} |
||||
|
||||
.section-title { |
||||
font-weight: 500; |
||||
text-transform: capitalize; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.badge { |
||||
color: $white !important; |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
padding: .45em .8em; |
||||
border-radius: 4px; |
||||
|
||||
&.badge-changed { |
||||
background-color: #3A9CFF |
||||
} |
||||
|
||||
&.badge-added { |
||||
background-color: #00CE92 |
||||
} |
||||
|
||||
&.badge-removed { |
||||
background-color: #973CFF |
||||
} |
||||
|
||||
&.badge-security { |
||||
background-color: #9C275F |
||||
} |
||||
|
||||
&.badge-depreciate { |
||||
background-color: #FF3158 |
||||
} |
||||
} |
||||
|
||||
.divider-text { |
||||
position: relative; |
||||
text-align: center; |
||||
z-index: 1; |
||||
|
||||
span { |
||||
padding: 0 15px; |
||||
} |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
content: ""; |
||||
height: 1px; |
||||
width: 100%; |
||||
background-color: $gray; |
||||
left: 0; |
||||
top: calc(50% - 0.03125rem); |
||||
z-index: -1; |
||||
} |
||||
} |
||||
|
||||
.has-shapes { |
||||
position: relative; |
||||
z-index: 1; |
||||
|
||||
.shape-xl, |
||||
.shape-lg, |
||||
.shape-md, |
||||
.shape-sm, |
||||
.shape-sm-2, |
||||
.shape-xs, |
||||
.shape-xs-2 { |
||||
position: absolute; |
||||
pointer-events: none; |
||||
z-index: -1; |
||||
} |
||||
|
||||
.shape-xl { |
||||
height: 105px; |
||||
width: 105px; |
||||
} |
||||
|
||||
.shape-lg { |
||||
height: 93px; |
||||
width: 93px; |
||||
} |
||||
|
||||
.shape-md { |
||||
height: 76px; |
||||
width: 76px; |
||||
} |
||||
|
||||
.shape-sm { |
||||
height: 55px; |
||||
width: 55px; |
||||
} |
||||
|
||||
.shape-sm-2 { |
||||
height: 35px; |
||||
width: 35px; |
||||
} |
||||
|
||||
.shape-xs { |
||||
height: 26px; |
||||
width: 26px; |
||||
} |
||||
|
||||
.shape-xs-2 { |
||||
height: 15px; |
||||
width: 15px; |
||||
} |
||||
} |
||||
|
||||
.has-shadow { |
||||
padding-bottom: 40px; |
||||
position: relative; |
||||
z-index: 1; |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
content: ""; |
||||
height: calc(100% - 40px); |
||||
width: calc(100% - 40px); |
||||
bottom: 0; |
||||
background-color: #E0E0E0; |
||||
z-index: -1; |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
&.shadow-light::after { |
||||
background-color: #f6f6f6; |
||||
} |
||||
|
||||
@include breakAt(md-device) { |
||||
padding-bottom: 25px; |
||||
|
||||
&::after { |
||||
height: calc(100% - 25px); |
||||
width: calc(100% - 25px); |
||||
} |
||||
} |
||||
|
||||
&.has-shapes { |
||||
.shape-1 { |
||||
top: -30px; |
||||
} |
||||
|
||||
.shape-2 { |
||||
bottom: 0; |
||||
z-index: 2; |
||||
|
||||
@include breakAt(md-device) { |
||||
height: 80px; |
||||
width: 80px; |
||||
} |
||||
} |
||||
|
||||
.shape-3 { |
||||
bottom: calc(50% - 40px); |
||||
z-index: 2; |
||||
height: 81px; |
||||
width: 81px; |
||||
|
||||
@include breakAt(md-device) { |
||||
height: 50px; |
||||
width: 50px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.shadow-right { |
||||
padding-right: 40px; |
||||
|
||||
&::after { |
||||
right: 0; |
||||
} |
||||
|
||||
@include breakAt(md-device) { |
||||
padding-right: 25px; |
||||
padding-bottom: 25px; |
||||
|
||||
&::after { |
||||
height: calc(100% - 25px); |
||||
width: calc(100% - 25px); |
||||
} |
||||
} |
||||
|
||||
&.has-shapes { |
||||
.shape-1 { |
||||
left: -30px; |
||||
} |
||||
|
||||
.shape-2 { |
||||
left: -40px; |
||||
} |
||||
|
||||
.shape-3 { |
||||
right: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.shadow-left { |
||||
padding-left: 40px; |
||||
|
||||
&::after { |
||||
left: 0; |
||||
} |
||||
|
||||
@include breakAt(md-device) { |
||||
padding-left: 25px; |
||||
padding-bottom: 25px; |
||||
|
||||
&::after { |
||||
height: calc(100% - 25px); |
||||
width: calc(100% - 25px); |
||||
} |
||||
} |
||||
|
||||
&.has-shapes { |
||||
.shape-1 { |
||||
right: -30px; |
||||
left: auto; |
||||
} |
||||
|
||||
.shape-2 { |
||||
right: -40px; |
||||
top: auto; |
||||
} |
||||
|
||||
.shape-3 { |
||||
left: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.check-list { |
||||
li { |
||||
position: relative; |
||||
padding-left: 25px; |
||||
|
||||
svg { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 6px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.check-list-2, |
||||
.check-list-primary { |
||||
li { |
||||
position: relative; |
||||
padding-left: 35px; |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
|
||||
span { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 6px; |
||||
z-index: 1; |
||||
|
||||
svg { |
||||
height: 8px; |
||||
width: 12px; |
||||
color: #33B27C; |
||||
position: absolute; |
||||
top: 3px; |
||||
left: 8px; |
||||
} |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
content: ""; |
||||
height: 27px; |
||||
width: 27px; |
||||
left: 0; |
||||
top: -7px; |
||||
background-color: #E1F4EC; |
||||
border-radius: 50px; |
||||
z-index: -1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.check-list-primary { |
||||
li { |
||||
padding-left: 30px; |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
|
||||
span { |
||||
top: 6px; |
||||
|
||||
svg { |
||||
height: 7px; |
||||
width: 11px; |
||||
color: $color-primary; |
||||
top: 3px; |
||||
left: 5px; |
||||
} |
||||
|
||||
&::after { |
||||
height: 20px; |
||||
width: 20px; |
||||
top: -4px; |
||||
background-color: rgba($color-primary, .15); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bullet-list { |
||||
li { |
||||
position: relative; |
||||
padding-left: 18px; |
||||
margin-bottom: 10px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
content: ""; |
||||
height: 7px; |
||||
width: 7px; |
||||
background-color: $color-primary; |
||||
border-radius: 50px; |
||||
left: 0; |
||||
top: 8px; |
||||
} |
||||
} |
||||
|
||||
&.bullet-list-dark { |
||||
li::after { |
||||
background-color: $black-200; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tabs-navbar { |
||||
.nav-link { |
||||
|
||||
&.active, |
||||
&:hover { |
||||
color: $color-primary; |
||||
} |
||||
} |
||||
|
||||
&.nav-tabs { |
||||
.nav-item { |
||||
margin-bottom: -1px; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.nav-link:hover, |
||||
.active { |
||||
border-bottom: 1px solid $color-primary !important; |
||||
|
||||
@include breakAt(sm-device) { |
||||
border-bottom: 0 !important; |
||||
padding: 0 !important; |
||||
} |
||||
} |
||||
|
||||
.nav-link { |
||||
@include breakAt(sm-device) { |
||||
padding: 0px !important; |
||||
margin-bottom: 15px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.form-control { |
||||
height: 50px; |
||||
border-color: $gray; |
||||
border-radius: 5px; |
||||
padding: 15px 20px; |
||||
|
||||
&:focus { |
||||
box-shadow: none; |
||||
border-color: $black-800; |
||||
} |
||||
} |
||||
|
||||
.custom-checkbox { |
||||
margin-top: 15px; |
||||
|
||||
.custom-control-label::before { |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.custom-control-input:checked~.custom-control-label::before, |
||||
.custom-control-input:not(:disabled):active~.custom-control-label::before { |
||||
background-color: $color-primary; |
||||
border-color: $color-primary; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.custom-control-input:focus:not(:checked)~.custom-control-label::before { |
||||
border-color: $color-primary; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.custom-control-input:disabled:checked~.custom-control-label::before { |
||||
background-color: rgba($color-primary, .5); |
||||
border-color: rgba($color-primary, .2); |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
|
||||
.colored-icon { |
||||
&.icon-1 { |
||||
color: $color-primary; |
||||
} |
||||
|
||||
&.icon-2 { |
||||
color: $color-secondary; |
||||
} |
||||
|
||||
&.icon-3 { |
||||
color: $color-tertiary; |
||||
} |
||||
|
||||
&.icon-4 { |
||||
color: #497CFF; |
||||
} |
||||
} |
||||
|
||||
/*------------------------------------------------------------------ |
||||
# helper classes |
||||
-------------------------------------------------------------------*/ |
||||
.font-primary { |
||||
font-family: $font-primary |
||||
} |
||||
|
||||
.rounded { |
||||
border-radius: 5px |
||||
} |
||||
|
||||
.shadow { |
||||
box-shadow: 0px 25px 65px rgba($black, 0.05) !important |
||||
} |
||||
|
||||
.border-top { |
||||
border-top: 1px solid #E3E3E3 !important |
||||
} |
||||
|
||||
.border-bottom { |
||||
border-bottom: 1px solid #E3E3E3 !important |
||||
} |
||||
|
||||
.border-left { |
||||
border-left: 1px solid #E3E3E3 !important |
||||
} |
||||
|
||||
.border-right { |
||||
border-right: 1px solid #E3E3E3 !important |
||||
} |
||||
|
||||
@include breakAt(xl-device) { |
||||
.border-xl-0 { |
||||
border: 0 !important |
||||
} |
||||
} |
||||
|
||||
@include breakAt(lg-device) { |
||||
.border-lg-0 { |
||||
border: 0 !important |
||||
} |
||||
} |
||||
|
||||
@include breakAt(md-device) { |
||||
.border-md-0 { |
||||
border: 0 !important |
||||
} |
||||
} |
||||
|
||||
@include breakAt(sm-device) { |
||||
.border-sm-0 { |
||||
border: 0 !important |
||||
} |
||||
} |
||||
|
||||
.font-weight-500 { |
||||
font-weight: 500 |
||||
} |
||||
|
||||
.font-weight-600 { |
||||
font-weight: 600 |
||||
} |
||||
|
||||
.text-underline { |
||||
text-decoration: 1px dashed; |
||||
} |
||||
|
||||
a.text-underline:hover { |
||||
text-decoration-style: solid; |
||||
} |
||||
|
||||
.has-bg-brash { |
||||
background-size: 1200px; |
||||
background-repeat: repeat-x; |
||||
} |
||||
|
||||
.no-bg-image { |
||||
background-image: none !important; |
||||
} |
||||
|
||||
.bg-brash-top { |
||||
background-position: center top; |
||||
} |
||||
|
||||
.bg-brash-bottom { |
||||
background-position: center bottom; |
||||
} |
||||
|
||||
.bg-brash-y { |
||||
background-position: center top, center bottom; |
||||
} |
||||
|
||||
.bg-cover { |
||||
background-size: cover; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.text-light-gray { |
||||
color: $light-gray |
||||
} |
||||
|
||||
.bg-light-gray { |
||||
background-color: $light-gray |
||||
} |
||||
|
||||
.text-primary { |
||||
color: $color-primary !important |
||||
} |
||||
|
||||
a.text-primary:hover { |
||||
color: darken($color-primary, 10) !important |
||||
} |
||||
|
||||
.bg-primary { |
||||
background-color: $color-primary !important |
||||
} |
||||
|
||||
.text-primary { |
||||
color: $color-primary !important |
||||
} |
||||
|
||||
.bg-primary { |
||||
background-color: rgba($color-primary, .5) !important |
||||
} |
||||
|
||||
.bg-primary-fill { |
||||
background-color: $color-primary !important |
||||
} |
||||
|
||||
.text-secondary { |
||||
color: rgba($color-secondary, .5) !important |
||||
} |
||||
|
||||
.bg-secondary { |
||||
background-color: rgba($color-secondary, .5) !important |
||||
} |
||||
|
||||
.text-secondary-fill { |
||||
color: $color-secondary !important |
||||
} |
||||
|
||||
.bg-secondary-fill { |
||||
background-color: $color-secondary !important |
||||
} |
||||
|
||||
.text-tertiary { |
||||
color: rgba($color-tertiary, .5) !important |
||||
} |
||||
|
||||
.bg-tertiary { |
||||
background-color: rgba($color-tertiary, .5) !important |
||||
} |
||||
|
||||
.text-tertiary-fill { |
||||
color: $color-tertiary !important |
||||
} |
||||
|
||||
.bg-tertiary-fill { |
||||
background-color: $color-tertiary !important |
||||
} |
||||
|
||||
.bg-black { |
||||
background-color: $black |
||||
} |
||||
|
||||
.text-black { |
||||
color: $black |
||||
} |
||||
|
||||
.text-black-100 { |
||||
color: $black-100 |
||||
} |
||||
|
||||
.bg-black-100 { |
||||
background-color: $black-100 |
||||
} |
||||
|
||||
.bg-black-200 { |
||||
background-color: $black-200 |
||||
} |
||||
|
||||
.text-black-200 { |
||||
color: $black-200 |
||||
} |
||||
|
||||
.bg-black-300 { |
||||
background-color: $black-300 |
||||
} |
||||
|
||||
.text-black-300 { |
||||
color: $black-300 |
||||
} |
||||
|
||||
.text-black-400 { |
||||
color: $black-400 |
||||
} |
||||
|
||||
.bg-black-400 { |
||||
background-color: $black-400 |
||||
} |
||||
|
||||
.text-black-500 { |
||||
color: $black-500 |
||||
} |
||||
|
||||
.bg-black-500 { |
||||
background-color: $black-500 |
||||
} |
||||
|
||||
.text-black-600 { |
||||
color: $black-600 |
||||
} |
||||
|
||||
.bg-black-600 { |
||||
background-color: $black-600 |
||||
} |
||||
|
||||
.text-black-700 { |
||||
color: $black-700 |
||||
} |
||||
|
||||
.bg-black-700 { |
||||
background-color: $black-700 |
||||
} |
||||
|
||||
.text-black-800 { |
||||
color: $black-800 |
||||
} |
||||
|
||||
.bg-black-800 { |
||||
background-color: $black-800 |
||||
} |
||||
|
||||
.text-black-900 { |
||||
color: $black-900 |
||||
} |
||||
|
||||
.bg-black-900 { |
||||
background-color: $black-900 |
||||
} |
||||
|
||||
a.text-black-200:hover, |
||||
a.text-black-300:hover, |
||||
a.text-black-400:hover { |
||||
color: $color-primary |
||||
} |
||||
|
||||
/*------------------------------------------------------------------ |
||||
# spacing classes |
||||
-------------------------------------------------------------------*/ |
||||
$step: 5; // minimum value |
||||
$max: 121; // maximum value (+)1 |
||||
|
||||
@for $i from 1 through ceil($max/$step) { |
||||
$value: ($i - 1)*$step; |
||||
|
||||
.m-#{$value} { |
||||
margin: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.mt-#{$value} { |
||||
margin-top: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.mb-#{$value} { |
||||
margin-bottom: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.ml-#{$value} { |
||||
margin-left: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.mr-#{$value} { |
||||
margin-right: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.p-#{$value} { |
||||
padding: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.pt-#{$value} { |
||||
padding-top: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.pb-#{$value} { |
||||
padding-bottom: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.pl-#{$value} { |
||||
padding-left: #{$value}px |
||||
} |
||||
|
||||
; |
||||
|
||||
.pr-#{$value} { |
||||
padding-right: #{$value}px |
||||
} |
||||
|
||||
; |
||||
} |
||||
|
||||
|
||||
// content style |
||||
.content { |
||||
|
||||
* { |
||||
word-break: break-word; |
||||
overflow-wrap: break-word; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
img { |
||||
max-width: 100%; |
||||
} |
||||
|
||||
a { |
||||
color: $black-300; |
||||
|
||||
&:hover { |
||||
color: $color-primary; |
||||
} |
||||
} |
||||
|
||||
ol{ |
||||
margin-left: 0; |
||||
padding-left: 0; |
||||
} |
||||
|
||||
ul { |
||||
li { |
||||
position: relative; |
||||
padding-left: 18px; |
||||
margin-bottom: 10px; |
||||
list-style-type: none; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
content: ""; |
||||
height: 7px; |
||||
width: 7px; |
||||
background-color: $color-primary; |
||||
border-radius: 50px; |
||||
left: 0; |
||||
top: 8px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
table { |
||||
width: 100%; |
||||
max-width: 100%; |
||||
margin-bottom: 1rem; |
||||
border: 1px solid $black-900; |
||||
} |
||||
|
||||
table td, |
||||
table th { |
||||
padding: .75rem; |
||||
vertical-align: top; |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
tr:not(:last-child) { |
||||
border-bottom: 1px solid $black-900; |
||||
} |
||||
|
||||
th { |
||||
font-weight: 500; |
||||
} |
||||
|
||||
thead { |
||||
background: $light-gray; |
||||
margin-bottom: 0; |
||||
|
||||
tr { |
||||
border-bottom: 1px solid $black-900; |
||||
} |
||||
} |
||||
|
||||
tbody { |
||||
background: lighten($color: $light-gray, $amount: 5); |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.notices { |
||||
margin: 2rem 0; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.notices p { |
||||
padding: 10px; |
||||
margin-bottom: 0; |
||||
background-color: $white !important; |
||||
} |
||||
|
||||
.notices p::before { |
||||
position: absolute; |
||||
top: 2px; |
||||
color: $white; |
||||
font-family: "themify"; |
||||
font-weight: 900; |
||||
content: "\e717"; |
||||
left: 10px; |
||||
} |
||||
|
||||
.notices.note p { |
||||
border-top: 30px solid #6ab0de; |
||||
background: $light-gray; |
||||
} |
||||
|
||||
.notices.note p::after { |
||||
content: 'Note'; |
||||
position: absolute; |
||||
top: 2px; |
||||
color: $white; |
||||
left: 2rem; |
||||
} |
||||
|
||||
|
||||
.notices.tip p { |
||||
border-top: 30px solid #78C578; |
||||
background: $light-gray; |
||||
} |
||||
|
||||
.notices.tip p::after { |
||||
content: 'Tip'; |
||||
position: absolute; |
||||
top: 2px; |
||||
color: $white; |
||||
left: 2rem; |
||||
} |
||||
|
||||
.notices.info p { |
||||
border-top: 30px solid #F0B37E; |
||||
background: $light-gray; |
||||
} |
||||
|
||||
.notices.info p::after { |
||||
content: 'Info'; |
||||
position: absolute; |
||||
top: 2px; |
||||
color: $white; |
||||
left: 2rem; |
||||
} |
||||
|
||||
|
||||
.notices.warning p { |
||||
border-top: 30px solid #E06F6C; |
||||
background: $light-gray; |
||||
} |
||||
|
||||
.notices.warning p::after { |
||||
content: 'Warning'; |
||||
position: absolute; |
||||
top: 2px; |
||||
color: #fff; |
||||
left: 2rem; |
||||
} |
||||
|
||||
pre { |
||||
display: block; |
||||
padding: 9.5px; |
||||
margin: 10px 0px 10px; |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
code { |
||||
margin-bottom: 0 !important; |
||||
font-size: 100%; |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
// Responsive mixin |
||||
// @include breakAt(lg-device) { style goes here } |
||||
@mixin breakAt($point) { |
||||
@if $point == xl-device { |
||||
@media (max-width: 1199px){@content;} |
||||
} |
||||
@else if $point == lg-device { |
||||
@media (max-width: 991px){@content;} |
||||
} |
||||
@else if $point == md-device { |
||||
@media (max-width: 767px){@content;} |
||||
} |
||||
@else if $point == sm-device { |
||||
@media (max-width: 575px) {@content;} |
||||
} |
||||
@else if $point == xs-device { |
||||
@media (max-width: 480px) {@content;} |
||||
} |
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
h1, .h1 { |
||||
font-size: $h1; |
||||
line-height: 56px; |
||||
@include breakAt(md-device) { |
||||
font-size: $h1-md; |
||||
} |
||||
} |
||||
h2, .h2 { |
||||
font-size: $h2; |
||||
@include breakAt(md-device) { |
||||
font-size: $h2-md; |
||||
} |
||||
} |
||||
h3, .h3 { |
||||
font-size: $h3; |
||||
@include breakAt(md-device) { |
||||
font-size: $h3-md; |
||||
} |
||||
} |
||||
h4, .h4 { |
||||
font-size: $h4; |
||||
} |
||||
h5, .h5 { |
||||
font-size: $h5; |
||||
} |
||||
h6, .h6 { |
||||
font-size: $h6; |
||||
} |
||||
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { |
||||
color: $black-200; |
||||
line-height: 1.3; |
||||
} |
||||
h1 a:hover, a.h1:hover, h2 a:hover, a.h2:hover, h3 a:hover, a.h3:hover, h4 a:hover, a.h4:hover, h5 a:hover, a.h5:hover, h6 a:hover, a.h6:hover { |
||||
color: $color-primary; |
||||
} |
||||
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p { |
||||
margin: 0; |
||||
} |
||||
p { |
||||
line-height: 1.75; |
||||
} |
||||
a:focus, |
||||
button:focus { |
||||
outline: 0; |
||||
} |
||||
a { |
||||
text-decoration: none; |
||||
transition: all .3s; |
||||
} |
||||
a:hover { |
||||
text-decoration: underline; |
||||
color: initial; |
||||
} |
||||
ol, ul { |
||||
list-style-position: inside; |
||||
} |
||||
ul, li { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
$font-primary: 'Lato', sans-serif; |
||||
|
||||
$h1: 46px; |
||||
$h1-md: 38px; |
||||
$h2: 36px; |
||||
$h2-md: 28px; |
||||
$h3: 24px; |
||||
$h3-md: 22px; |
||||
$h4: 20px; |
||||
$h5: 18px; |
||||
$h6: 15px; |
||||
|
||||
$white:#ffffff; |
||||
$black:#000000; |
||||
$dark:#4F5B66; |
||||
$light-gray:#A7ADBA; |
||||
$gray:#65737E; |
||||
$color-primary:#375B7D; |
||||
$color-secondary:#4675A1; |
||||
$color-tertiary:#19BFB7; |
||||
|
||||
$black-100:#111111; |
||||
$black-200:#222222; |
||||
$black-300:#333333; |
||||
$black-400:#444444; |
||||
$black-500:#555555; |
||||
$black-600:#666666; |
||||
$black-700:#777777; |
||||
$black-800:#888888; |
||||
$black-900:#999999; |
||||
Loading…
Reference in new issue