diff options
Diffstat (limited to 'assets/css/scss/basic')
| -rw-r--r-- | assets/css/scss/basic/.DS_Store | bin | 0 -> 6148 bytes | |||
| -rw-r--r-- | assets/css/scss/basic/_background.scss | 40 | ||||
| -rw-r--r-- | assets/css/scss/basic/_base.scss | 785 | ||||
| -rw-r--r-- | assets/css/scss/basic/_form.scss | 211 | ||||
| -rw-r--r-- | assets/css/scss/basic/_image.scss | 46 | ||||
| -rw-r--r-- | assets/css/scss/basic/_list.scss | 315 | ||||
| -rw-r--r-- | assets/css/scss/basic/_typography.scss | 156 |
7 files changed, 1553 insertions, 0 deletions
diff --git a/assets/css/scss/basic/.DS_Store b/assets/css/scss/basic/.DS_Store Binary files differnew file mode 100644 index 0000000..b0192fe --- /dev/null +++ b/assets/css/scss/basic/.DS_Store diff --git a/assets/css/scss/basic/_background.scss b/assets/css/scss/basic/_background.scss new file mode 100644 index 0000000..564497c --- /dev/null +++ b/assets/css/scss/basic/_background.scss @@ -0,0 +1,40 @@ +// +// Background Styles // +// +.bg-image { + position: relative; + background-position: center center; + background-attachment: scroll; + @include background-size(cover); + background-repeat: no-repeat; + &[class^="bg-image-gradient-"], &[class*=" bg-image-gradient-"] { + &:before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + } + } + &.bg-image-gradient-top { &:before { background-image: linear-gradient(to top, $color-white, $color-white-02); } } + &.bg-image-gradient-right { &:before { background-image: linear-gradient(to right, $color-white, $color-white-02); } } + &.bg-image-gradient-bottom { &:before { background-image: linear-gradient(to bottom, $color-white, $color-white-02); } } + &.bg-image-gradient-left { &:before { background-image: linear-gradient(to left, $color-white, $color-white-02); } } + &.bg-image-gradient-black-top { &:before { background-image: linear-gradient(to top, $color-black, $color-black-02); } } + &.bg-image-gradient-black-right { &:before { background-image: linear-gradient(to right, $color-black, $color-black-02); } } + &.bg-image-gradient-black-bottom { &:before { background-image: linear-gradient(to bottom, $color-black, $color-black-02); } } + &.bg-image-gradient-black-left { &:before { background-image: linear-gradient(to left, $color-black, $color-black-02); } } +} + +.bg-video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + video { + object-fit: cover; + width: 100%; + height: 100%; + } +}
\ No newline at end of file diff --git a/assets/css/scss/basic/_base.scss b/assets/css/scss/basic/_base.scss new file mode 100644 index 0000000..4c63bc2 --- /dev/null +++ b/assets/css/scss/basic/_base.scss @@ -0,0 +1,785 @@ +// +// Base Styles // +// +html, body { + width: 100%; + height: 100%; +} +body { + overflow-x: hidden; +} + +// +// Container, Row // +// +.container, .container-fluid { + position: relative; + padding: 0 30px; +} +.row { + margin-bottom: -30px; + div[class^="col-"]:not(.row) { + margin-bottom: 30px; + } + .form-row { + div[class^="col-"]:not(.row) { + margin-bottom: 0; + padding-right: 8px; + padding-left: 8px; + } + } +} + +// +// Column Spacing // +// +@include breakpoint-above(md) { + .col-spacing-70, + .col-spacing-60, + .col-spacing-50, + .col-spacing-40 { + .row { + &:not([class^="col-spacing-"], [class*=" col-spacing-"]) { + margin-right: -15px; + margin-bottom: -30px; + margin-left: -15px; + div[class^="col-"]:not(.row) { + margin-bottom: 30px; + padding: 0 15px; + } + } + } + } + .col-spacing-70 { + margin-right: -35px; + margin-bottom: -70px; + margin-left: -35px; + div[class^="col-"]:not(.row) { + margin-bottom: 70px; + padding: 0 35px; + } + } + .col-spacing-60 { + margin-right: -30px; + margin-bottom: -60px; + margin-left: -30px; + div[class^="col-"]:not(.row) { + margin-bottom: 60px; + padding: 0 30px; + } + } + .col-spacing-50 { + margin-right: -25px; + margin-bottom: -50px; + margin-left: -25px; + div[class^="col-"]:not(.row) { + margin-bottom: 50px; + padding: 0 25px; + } + } + .col-spacing-40 { + margin-right: -20px; + margin-bottom: -40px; + margin-left: -20px; + div[class^="col-"]:not(.row) { + margin-bottom: 40px; + padding: 0 20px; + } + } + .container-fluid { + .col-spacing-70 { + margin-right: 5px; + margin-left: 5px; + } + .col-spacing-60 { + margin-right: 0; + margin-left: 0; + } + .col-spacing-50 { + margin-right: -5px; + margin-left: -5px; + } + .col-spacing-40 { + margin-right: -10px; + margin-left: -10px; + } + } +} + +.col-spacing-20, +.col-spacing-10, +.col-spacing-0 { + .row { + margin-right: -15px; + margin-bottom: -30px; + margin-left: -15px; + div[class^="col-"]:not(.row) { + margin-bottom: 30px; + padding: 0 15px; + } + } +} +.col-spacing-20 { + margin-right: -10px; + margin-bottom: -20px; + margin-left: -10px; + div[class^="col-"]:not(.row) { + margin-bottom: 20px; + padding: 0 10px; + } +} +.col-spacing-10 { + margin-right: -5px; + margin-bottom: -10px; + margin-left: -5px; + div[class^="col-"]:not(.row) { + margin-bottom: 10px; + padding: 0 5px; + } +} +.col-spacing-0 { + margin-right: 0; + margin-bottom: 0; + margin-left: 0; + div[class^="col-"]:not(.row) { + margin-bottom: 0; + padding: 0; + } +} +.container-fluid { + .col-spacing-20 { + margin-right: -20px; + margin-left: -20px; + } + .col-spacing-10 { + margin-right: -25px; + margin-left: -25px; + } + .col-spacing-0 { + margin-right: -30px; + margin-left: -30px; + } +} + + +// +// Positioning // +// +.position-center { + position: absolute; + top: 50%; + left: 50%; + @include transform(translate(-50%,-50%)); +} +.position-middle { + position: relative; + top: 50%; + @include transform(translateY(-50%)); + margin: 0 auto; +} +.position-top, .position-bottom { + position: absolute; + left: 0; + width: 100%; +} +.position-top { + top: 30px; +} +.position-bottom { + bottom: 30px; +} +.container, .container-fluid { + .position-top, .position-bottom { + padding: 0 30px; + } +} + +// +// Mark // +// +mark { + background: $bg-grey; + color: $color-dark; +} + +// +// iframe // +// +iframe { + width: 100%; + border: 0; +} + +// +// Pre(Preformatted text) // +// +pre { + border: 1px solid $color-black-01; + border-radius: 0.375em; + padding: 6px 20px; + color: $color-primary; +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + pre { + border-color: $color-white-02; + color: $color-white-06; + } +} + +// +// Badge Styles // +// +.badge { padding: 4px 6px; vertical-align: middle; } +.badge-xs { padding: 4px 6px } +.badge-sm { padding: 8px 12px } +.badge-md { padding: 10px 16px; font-size: 80%; } +.badge-lg { padding: 14px 20px; font-size: 90%; } +.badge-xl { padding: 18px 30px; font-size: 100%; } + +// +// Blockquote Styles // +// +.blockquote { + background: $bg-grey-lighter; + margin-bottom: 20px; + border-left: 4px solid $color-black-01; + padding: 24px 30px; + @include breakpoint-less(sm) { + padding: 16px 20px; + } + p { + font-size: 16px; + line-height: 30px; + &.font-small { + font-size: 14px; + line-height: 26px; + } + &.font-large { + font-size: 20px; + line-height: 36px; + } + } + .blockquote-footer { + margin-top: 10px; + color: $color-dark; + &:before { + padding-right: 5px; + } + h1, h2, h3, h4, h5, h6 { + display: inline-block; + margin: 0; + } + p { + font-size: 16px; + line-height: 30px; + } + } + &.style-2 { + background: transparent; + padding: 16px 30px; + @include breakpoint-less(sm) { + padding: 16px 20px; + } + } + &.style-3 { + position: relative; + background: transparent; + border: 0; + padding: 20px 20px 20px 40px; + @include breakpoint-less(sm) { + padding: 16px 16px 16px 36px; + } + &:before { + content: '\f10d'; + position: absolute; + top: 0; + left: 0; + color: $color-black-01; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + font-weight: 900; + } + } +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + .blockquote { + background: $color-white-01; + border-color: $color-white-02; + .blockquote-footer { + color: $color-white; + } + &.style-2 { + background: transparent; + border-color: $color-white-02; + } + &.style-3 { + background: transparent; + &:before { + color: $color-white-02; + } + } + } +} + +// +// Breadcrumb Styles // +// +.breadcrumb { + display: inline-block; + background: transparent; + margin: 0 0 -10px; + padding: 0; + .breadcrumb-item { + display: inline-block; + font: 400 13px $font-family-primary; + letter-spacing: 1px; + text-transform: uppercase; + &:before { + color: $color-black-02; + } + &.active { + color: $color-primary-lighter; + } + a { + @include transition(linear 0.1s); + } + } +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + .breadcrumb { + .breadcrumb-item { + &:before { + color: $color-white-03; + } + &.active { + color: $color-white-05; + } + } + } +} + +// +// Card // +// +.card { + border: 1px solid $color-black-01; +} + +// +// Dropdown Styles // +// +.dropdown, .btn-group { + .dropdown-menu { + border: 0; + border-radius: 0; + @include box-shadow(0 6px 36px -4px rgba(22,24,26,0.14)); + padding: 15px 20px; + .dropdown-item { + margin-bottom: 10px; + padding: 0; + color: $color-dark; + font: 300 15px $font-family-primary; + letter-spacing: 0; + text-transform: none; + @include transition(linear 0.1s); + &:last-child { + margin: 0; + } + &:hover, &:focus, &:active { + background: transparent; + color: $color-primary; + } + } + } +} + +// +// Modal Styles // +// +.modal { + &.fade { + .modal-dialog { + @include transition(ease-out 0.2s); + @include transform(translate(0) scale(0.98)); + } + } + &.show { + .modal-dialog { + @include transform(translate(0) scale(1.0)); + } + } + .modal-content { + @include box-shadow(0 6px 36px -4px rgba(22,24,26,0.3)); + border: 0; + .modal-header { border-bottom: 1px solid $color-black-01; } + .modal-footer { border-top: 1px solid $color-black-01; } + } +} + +// +// Nav Styles // +// +.nav { + margin: 0; + padding: 0; + .nav-item { + margin: 0 30px 0 0; + &:last-child { + margin-right: 0; + } + .nav-link { + padding: 0; + color: $color-primary; + @include transition(linear 0.1s); + h1, h2, h3, h4, h5, h6 { + margin: 0; + color: $color-primary; + @include transition(linear 0.1s); + } + &.active, &:hover { + color: $color-dark; + h1, h2, h3, h4, h5, h6 { + color: $color-dark; + } + } + &.disabled { + color: $color-primary-lighter; + } + } + } + &.nav-tabs { + border-bottom: 1px solid $border-grey; + .nav-item { + margin: 0 0 -1px; + .nav-link { + background: transparent; + padding: 10px 20px; + color: $color-primary; + &:hover { + border-color: $border-grey; + } + &.active { + border-color: $border-grey $border-grey $color-white; + color: $color-dark; + } + &.disabled { + &:hover { + border-color: transparent; + } + } + } + } + } + &.nav-pills { + .nav-item { + margin: 0; + .nav-link { + padding: 10px 20px; + } + .nav-link.active, + .show .nav-link { + background: $color-dark; + color: $color-white; + } + h1, h2, h3, h4, h5, h6 { + margin: 0; + } + } + } + &.tabs { + display: inline-block; + border: 1px solid $border-grey; + border-radius: 0.375em; + .nav-item { + display: inline-block; + margin: 0; + .nav-link { + padding: 10px 20px; + border-right: 1px solid $border-grey; + } + &:last-child { + .nav-link { + border: 0; + } + } + } + } + &.nav-custom { + .nav-item { + .nav-link { + position: relative; + overflow: visible; + &:after { + content: ''; + position: absolute; + right: 0; + bottom: -1px; + left: 0; + background: $color-dark; + height: 1px; + @include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both); + } + &.active { + &:after { + width: 100%; + @include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both); + } + } + } + } + } +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + .nav { + .nav-item { + .nav-link { + color: $color-white-08; + &.active, &:hover { + color: $color-white; + } + } + } + &.nav-tabs { + border-color: $color-white-02; + .nav-item { + .nav-link { + color: $color-white-08; + &.active, &:hover { + border-color: $color-white-02 $color-white-02 transparent; + } + &.active { + color: $color-white; + } + } + } + } + &.nav-pills { + .nav-item { + .nav-link.active, + .show .nav-link { + background: $color-white; + color: $color-dark; + } + } + } + &.tabs { + border: 1px solid $color-white-02; + .nav-item { + .nav-link { + border-right: 1px solid $color-white-02; + } + } + } + &.nav-custom { + .nav-item { + .nav-link { + &:after { background: $color-white; } + } + } + } + } +} + +// +// Pagination Styles // +// +.pagination { + margin: 0; + padding: 0; + .page-item { + margin: 0 6px 0 0; + text-align: center; + &:last-child { + margin-right: 0; + } + .page-link { + background: transparent; + min-width: 31px; + height: 31px; + border: 0; + border-radius: 20px; + padding: 0; + color: $color-primary; + font-size: 14px; + line-height: 31px; + @include transition(ease-out 0.12s); + &:hover { + background: $button-grey; + } + } + &.active { + .page-link { + background: $button-grey; + color: $color-dark; + } + } + } + &.pagination-sm { + .page-item { + .page-link { + min-width: 27px; + height: 27px; + border-radius: 20px; + padding: 0; + line-height: 27px; + } + } + } + &.pagination-lg { + .page-item { + .page-link { + min-width: 35px; + height: 35px; + border-radius: 20px; + padding: 0; + line-height: 35px; + } + } + } + // + // Pagination - Hover style 2 // + // + &.hover-style-2 { + .page-item { + .page-link { + &:hover { + background: $border-grey; + border-color: $border-grey; + } + } + &.active { + .page-link { + background: $color-dark; + border-color: $color-dark; + color: $color-white; + } + } + } + } +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + .pagination { + .page-item { + .page-link { + color: $color-white-07; + &:hover { + background: $color-white-01; + } + } + &.active { + .page-link { + background: $color-white-01; + color: $color-white; + } + } + } + &.hover-style-2 { + .page-item { + .page-link { + &:hover { + background: $color-white; + border-color: $color-white; + color: $color-black-09; + } + } + &.active { + .page-link { + background: $color-white; + border-color: $color-white; + color: $color-black-09; + } + } + } + } + } +} + +// +// Popover Styles // +// +.popover { + border: 0; + @include box-shadow(0 0 12px 0 rgba(0,0,0,0.08)); + .arrow { + &:before { border: 0; } + } + .popover-header { + background: transparent; + padding: 15px 20px; + font-size: 16px; + line-height: 32px; + } + .popover-body { + padding: 20px; + } +} + +// +// Table Styles // +// +.table { + td, th { border-top: 1px solid $border-grey; } + thead { + th { border-bottom: 2px solid $border-grey; } + } + + &.table-dark { + background: $bg-dark-lighter; + thead { + th { border-bottom: 2px solid $color-white-01; } + } + td, th { border-top: 1px solid $color-white-01; } + } + &.table-bordered { + td, th { border: 1px solid $border-grey; } + &.table-dark { + td, th { border: 1px solid $color-white-01; } + } + } + + .thead-dark { + th { background: $bg-dark-lighter; border-color: $color-white-01; } + } + .thead-light { + th { background: $button-grey-lighter; } + } + + .table-active { + td, th { background: $button-grey-darker; } + } + .table-secondary { + td, th { background: $button-grey; } + } + .table-light { + td, th { background: $bg-grey-lighter; } + } + .table-dark { + td, th { background: $button-grey; } + } +} + +// +// Scroll To Top button // +// +.scrolltotop { + position: fixed; + right: 20px; + bottom: 20px; + @include transform(translateY(20px)); + z-index: 992; + visibility: hidden; + opacity: 0; + @include transition(ease-out 0.12s); + &.scrolltotop-show { + @include transform(translateY(0)); + visibility: visible; + opacity: 1; + } +} + +// +// Scroll Animations Libary // +// +[data-sal] { + @include transition-duration(0.5s); +} diff --git a/assets/css/scss/basic/_form.scss b/assets/css/scss/basic/_form.scss new file mode 100644 index 0000000..d04fdc9 --- /dev/null +++ b/assets/css/scss/basic/_form.scss @@ -0,0 +1,211 @@ +// +// Form Styles // +// +.form-row { + margin-right: -8px; + margin-left: -8px; + div[class^="col-"], div[class*=" col-"], .col { + margin: 0; + padding-right: 8px; + padding-left: 8px; + } +} +input, +textarea { + background: transparent; + width: 100%; + border: 1px solid $color-black-01; + margin-bottom: 1rem; + padding: 15px 20px; + box-shadow: none; + font: 400 15px $font-family-primary; + line-height: 1.4; + @include transition(ease-out 0.16s); + &:focus, &:active { + outline: 0; + box-shadow: none; + } +} +textarea { + height: 140px; +} +input, textarea, .form-control { + color: $color-primary; + &::-webkit-input-placeholder { color: $color-primary-lighter; } + &::-moz-placeholder { color: $color-primary-lighter; } + &:-ms-placeholder { color: $color-primary-lighter; } + &::-ms-placeholder { color: $color-primary-lighter; } + &::placeholder { color: $color-primary-lighter; } + &:focus { + border-color: $color-black-02; + } +} +input { + &[type="checkbox"], + &[type="radio"] { + width: auto; + } +} +.form-control { + background: transparent; + height: auto; + border: 1px solid $color-black-01; + border-radius: 0; + padding: 15px 20px; + font: 400 15px $font-family-primary; + line-height: 1.4; + &:focus { + background: transparent; + box-shadow: none; + } + &:read-only { + background: $button-grey; + border: 0; + } + &.form-control-sm { + padding: 10px 15px; + font-size: 0.875rem; + } + &.form-control-lg { + font-size: 1.25rem; + } +} +.form-control-plaintext { + border: 0; +} +.form-check-input:disabled ~ .form-check-label { + color: $color-primary-lighter; +} +.required { + &:after { + content: '*'; + padding-left: 3px; + } +} + +// +// Select // +// +select { + margin-bottom: 16px; +} +.custom-select { + background-color: transparent; + width: auto; + min-width: 160px; + height: auto; + border-radius: 0; + padding: 15px 20px; + border-color: $color-black-01; + color: $color-primary; + font: 400 15px $font-family-primary; + line-height: 1.4; + @include transition(ease-out 0.16s); + &:focus { + border-color: $color-black-02; + outline: 0; + box-shadow: none; + } + &.custom-select-sm { + height: auto; + padding: 10px 15px; + font-size: 0.875rem; + } + &.custom-select-lg { + height: auto; + padding: 15px 20px; + font-size: 1.25rem; + } + &.select-fullwidth { + width: 100%; + } +} +// +// Form Styles 2,3,4 // +// +form.form-style-3, .form-style-3, +form.form-style-4, .form-style-4 { + input, textarea, .custom-select, .form-control { + margin-bottom: 20px; + padding: 0 0 10px; + border-top-width: 0; + border-right-width: 0; + border-bottom-width: 1px; + border-left-width: 0; + } +} +form.form-style-2, .form-style-2, +form.form-style-4, .form-style-4 { + input, textarea, .custom-select, .form-control { + &:focus { + border-color: $color-black-09; + } + } +} + +// +// Form Style 5 // +// +form.form-style-5, .form-style-5 { + input, textarea, .custom-select, .form-control { + background: $bg-grey; + border: 0; + &:focus { + background: $button-grey-lighter; + } + } +} +div[class^='bg-grey'], div[class*=' bg-grey'] { + form.form-style-5, .form-style-5 { + input, textarea, .custom-select, .form-control { + background: $color-white; + &:focus { + background: $color-white; + } + } + } +} + +// +// Forms on Dark background // +// +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + input, textarea, .form-control { + background: transparent; + border-color: $color-white-02; + color: $color-white-07; + &::-webkit-input-placeholder { color: $color-white-05; } + &::-moz-placeholder { color: $color-white-05; } + &:-ms-placeholder { color: $color-white-05; } + &::-ms-placeholder { color: $color-white-05; } + &::placeholder { color: $color-white-05; } + &:focus { + border-color: $color-white-03; + } + } + .custom-select { + background: transparent; + border-color: $color-white-02; + color: $color-white-07; + &:focus { + border-color: $color-white-03; + } + } + form.form-style-2, .form-style-2, + form.form-style-4, .form-style-4 { + input, textarea, .custom-select, .form-control { + &:focus { + border-color: $color-white; + } + } + } + form.form-style-5, .form-style-5 { + input, textarea, .custom-select, .form-control { + background: $color-white-01; + border: 0; + &:focus { + background: $color-white-02; + } + } + } +}
\ No newline at end of file diff --git a/assets/css/scss/basic/_image.scss b/assets/css/scss/basic/_image.scss new file mode 100644 index 0000000..0f8ca3d --- /dev/null +++ b/assets/css/scss/basic/_image.scss @@ -0,0 +1,46 @@ +// +// Image Styles // +// +img { + width: auto; + max-width: 100%; + height: auto; + &[class^='img-circle'], &[class*=' img-circle'] { + border-radius: 50%; + } + &.img-circle-xs { + min-width: 60px; + width: 60px; + height: 60px; + } + &.img-circle-sm { + min-width: 80px; + width: 80px; + height: 80px; + } + &.img-circle-md { + min-width: 100px; + width: 100px; + height: 100px; + } + &.img-circle-lg { + min-width: 120px; + width: 120px; + height: 120px; + } + &.img-circle-xl { + min-width: 140px; + width: 140px; + height: 140px; + } + &.img-circle-2xl { + min-width: 160px; + width: 160px; + height: 160px; + } + &.img-circle-3xl { + min-width: 180px; + width: 180px; + height: 180px; + } +}
\ No newline at end of file diff --git a/assets/css/scss/basic/_list.scss b/assets/css/scss/basic/_list.scss new file mode 100644 index 0000000..cc4b472 --- /dev/null +++ b/assets/css/scss/basic/_list.scss @@ -0,0 +1,315 @@ +// +// List styles // +// +ul { + margin: 0 0 -7px; + li { + margin: 0 0 7px; + ul, ol { + margin-top: 7px; + } + a { + @include transition(linear 0.1s); + } + } + &[class*=' list-'], &[class^='list-'] { + padding: 0; + } + &.list-unstyled, + &.list-dash, + &.list-icon { + li { + list-style-type: none; + } + } + &.list-dash { + li { + &:before { + content: '-'; + padding-right: 7px; + } + a { + &:hover { + padding-left: 2px; + } + } + ul, ol { + padding-left: 40px; + } + } + } + // + // Horizontal List // + // + &[class*=' list-inline'], &[class^='list-inline'] { + li { + display: inline-block; + } + } + &.list-inline { + margin-right: -7px; + margin-left: -7px; + li { + padding: 0 7px; + } + } + &.list-inline-sm { + margin-right: -3px; + margin-left: -3px; + li { + padding: 0 3px; + } + } + &.list-inline-lg { + margin-right: -14px; + margin-left: -14px; + li { + padding: 0 14px; + } + } + &.list-inline-dash { + li { &:after { content: '-'; } } + } + &.list-inline-slash { + li { &:after { content: '/'; } } + } + &.list-inline-vbar { + li { &:after { content: '|'; } } + } + &.list-inline-dash, + &.list-inline-slash, + &.list-inline-vbar { + li { + &:after { + padding: 0 3px 0 6px; + } + &:last-child { + &:after { + content: ''; + padding: 0; + } + } + } + } + // + // Icon List // + // + &.list-icon { + li { + position: relative; + padding-left: 24px; + &:before { + position: absolute; + top: 0; + left: 0; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + } + a { + &:hover { + padding-left: 2px; + } + } + ul, ol { + padding-left: 40px; + } + } + &.list-icon-check { + li { &:before { content: "\f00c"; } } + } + &.list-icon-close { + li { &:before { content: "\f00d"; } } + } + &.list-icon-plus { + li { &:before { content: "\f067"; } } + } + &.list-icon-arrow { + li { padding-left: 16px; &:before { content: "\f105"; } } + } + &.list-icon-caret { + li { padding-left: 16px; &:before { content: "\f0da"; } } + } + &.list-icon-globe { + li { &:before { content: "\f0ac"; } } + } + &.list-icon-circle-check { + li { &:before { content: "\f058"; } } + } + &.list-icon-circle-plus { + li { &:before { content: "\f055"; } } + } + &.list-icon-circle-arrow { + li { &:before { content: "\f138"; } } + } + } +} +ol { + margin: 0 0 -7px; + li { + margin: 0 0 7px; + } + li { + ul, ol { + margin-top: 7px; + } + } + &.list-ordered { + list-style: none; + counter-reset: custom-counter; + padding-left: 0; + li { + position: relative; + padding-left: 34px; + counter-increment: custom-counter; + &::before { + content: counter(custom-counter); + } + ol { + list-style: none; + padding-left: 0; + } + } + &.style-2, + &.style-3, + &.style-4, + &.style-5 { + li { + &::before { + position: absolute; + top: 0; + left: 0; + width: 24px; + height: 24px; + border-radius: 50%; + font-size: 13px; + line-height: 24px; + text-align: center; + } + } + } + &.style-2 { + li { + &::before { + background: $color-black-01; + color: $color-black; + } + } + } + &.style-3 { + li { + &::before { + background: $color-black-09; + color: $color-white; + } + } + } + &.style-4 { + li { + &::before { + border: 1px solid $color-black-02; + color: $color-black-05; + } + } + } + &.style-5 { + li { + &::before { + border: 1px solid $color-black-09; + color: $color-black; + } + } + } + } +} +div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] { + ol { + &.list-ordered { + &.style-2 { + li { + &::before { + background: $color-white-02; + color: $color-white; + } + } + } + &.style-3 { + li { + &::before { + background: $color-white; + color: $color-black; + } + } + } + &.style-4 { + li { + &::before { + border-color: $color-white-03; + color: $color-white-06; + } + } + } + &.style-5 { + li { + &::before { + border-color: $color-white; + color: $color-white; + } + } + } + } + } +} +@include breakpoint-less(md) { + ol { + margin: 0 0 -5px; + li { + margin: 0 0 5px; + } + } + ul { + margin: 0 0 -5px; + li { + margin: 0 0 5px; + ul, ol { + margin-top: 5px; + } + } + &.list-dash { + li { + &:before { + content: '-'; + padding-right: 6px; + } + a { + &:hover { + padding-left: 2px; + } + } + ul, ol { + padding-left: 30px; + } + } + } + &.list-inline-lg { + margin-right: -12px; + margin-left: -12px; + li { + padding: 0 12px; + } + } + &.list-inline { + margin-right: -6px; + margin-left: -6px; + li { + padding: 0 6px; + } + } + &.list-inline-sm { + margin-right: -2px; + margin-left: -2px; + li { + padding: 0 2px; + } + } + } +}
\ No newline at end of file diff --git a/assets/css/scss/basic/_typography.scss b/assets/css/scss/basic/_typography.scss new file mode 100644 index 0000000..66ea287 --- /dev/null +++ b/assets/css/scss/basic/_typography.scss @@ -0,0 +1,156 @@ +// +// Typography Styles // +// +body { + color: $color-primary; + font-family: $font-family-primary; + font-size: 15px; + font-weight: 400; + letter-spacing: 0; + @include breakpoint-less(md) { + font-size: 14px; + } +} +h1,h2,h3,h4,h5,h6 { + margin: 0 0 10px; + letter-spacing: -0.3px; + color: $color-dark; + font-family: $font-family-tertiary; + font-weight: $font-weight-semi-bold; +} +h1 { + font-size: 2.66em; /* 40px */ + line-height: 1.5; /* 60px */ +} +h2 { + font-size: 2.13em; /* 32px */ + line-height: 1.625; /* 52px */ +} +h3 { + font-size: 1.86em; /* 28px */ + line-height: 1.65; /* 46px */ +} +h4 { + font-size: 1.6em; /* 24px */ + line-height: 1.7; /* 40px */ +} +h5 { + font-size: 1.33em; /* 20px */ + line-height: 1.8; /* 36px */ +} +h6 { + font-size: 1.06em; /* 16px */ + line-height: 1.87; /* 30px */ +} + +p { + margin: 0; + line-height: 1.86; /* 28px */ + @include breakpoint-less(md) { + line-height: 1.75; /* 24.5px */ + } +} + +.display-1 { font-size: 6.4em; } /* 96px */ +.display-2 { font-size: 5.86em; } /* 88px */ +.display-3 { font-size: 4.8em; } /* 72px */ +.display-4 { font-size: 3.73em; } /* 56px */ +@include breakpoint-less(sm) { + .display-1 { font-size: 5.73em; } /* 86px */ + .display-2 { font-size: 5.33em; } /* 80px */ + .display-3 { font-size: 4.26em; } /* 64px */ + .display-4 { font-size: 3.2em; } /* 48px */ +} +@include breakpoint-less(xs) { + .display-1 { font-size: 5.33em; } /* 80px */ + .display-2 { font-size: 4.8em; } /* 72px */ + .display-3 { font-size: 3.73em; } /* 56px */ + .display-4 { font-size: 3.2em; } /* 48px */ +} + +.uppercase { + letter-spacing: 1px; + text-transform: uppercase; +} + +.font-small { + font-size: 0.875em; /* 13px */ + line-height: 1.85; /* 24px */ + @include breakpoint-less(md) { + font-size: 0.85em; /* 12px */ + line-height: 1.66; /* 20px */ + } +} +.font-large { + font-size: 1.13em; /* 17px */ + line-height: 1.8; /* 30px */ + @include breakpoint-less(md) { + font-size: 1.145em; /* 16px */ + } +} +@include breakpoint-above(lg) { + .font-lg-large { + font-size: 1.13em; /* 17px */ + line-height: 1.8; /* 30px */ + } + .font-lg-small { + font-size: 0.875em; /* 13px */ + line-height: 1.85; /* 24px */ + } +} + +// +// Letter Spacing // +// +.letter-spacing-1, .letter-spacing-1px { letter-spacing: 1px; } +.letter-spacing-2, .letter-spacing-2px { letter-spacing: 2px; } +.letter-spacing-3, .letter-spacing-3px { letter-spacing: 3px; } +.letter-spacing-4, .letter-spacing-4px { letter-spacing: 4px; } +.letter-spacing-5, .letter-spacing-5px { letter-spacing: 5px; } + +// +// Line Heights // +// +.line-height-100 { line-height: 100%; } +.line-height-110 { line-height: 110%; } +.line-height-120 { line-height: 120%; } +.line-height-130 { line-height: 130%; } +.line-height-140 { line-height: 140%; } +.line-height-150 { line-height: 150%; } +.line-height-160 { line-height: 160%; } +.line-height-170 { line-height: 170%; } +.line-height-180 { line-height: 180%; } +.line-height-190 { line-height: 190%; } +.line-height-200 { line-height: 200%; } + +// +// Font Icon Styles // +// +i { + display: inline-block; +} + +// +// Icon sizes // +// +.icon-5xl { + i { font-size: 2.8em; } /* 42px */ +} +.icon-4xl { + i { font-size: 2.4em; } /* 36px */ +} +.icon-3xl { + i { font-size: 2.13em; } /* 32px */ +} +.icon-2xl { + i { font-size: 1.86em; } /* 28px */ +} +.icon-xl { + i { font-size: 1.6em; } /* 24px */ +} +.icon-lg { + i { font-size: 1.33em; } /* 20px */ +} +.icon-sm { + i { font-size: 0.86em; } /* 13px */ +}
\ No newline at end of file |