diff options
Diffstat (limited to 'assets/css/scss/basic/_base.scss')
| -rw-r--r-- | assets/css/scss/basic/_base.scss | 785 |
1 files changed, 785 insertions, 0 deletions
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); +} |