Initial Commit
This commit is contained in:
GiacomoHome
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// user-variables.scss
|
||||
// Use this to overwrite Bootstrap and theme variables
|
||||
//
|
||||
|
||||
// Example of a variable override to change theme's background color
|
||||
// Remove the "//" to comment it in and see it in action!
|
||||
// $font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
|
||||
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// user.scss
|
||||
// Use this to write your custom SCSS
|
||||
//
|
||||
|
||||
.navbar-brand-img {
|
||||
max-height: 3rem;
|
||||
}
|
||||
|
||||
.list-payment-icon{
|
||||
max-width: 2.5rem;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import '~aos/dist/aos.css';
|
||||
@import '~flickity/dist/flickity.min.css';
|
||||
@import '~flickity-fade/flickity-fade.css';
|
||||
@import '~highlight.js/styles/vs2015.css';
|
||||
@import '~quill/dist/quill.core.css';
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Custom variables followed by theme variables followed by Bootstrap variables
|
||||
* to ensure cascade of styles.
|
||||
*/
|
||||
|
||||
// Bootstrap functions
|
||||
@import '~bootstrap/scss/functions';
|
||||
|
||||
// Theme functions
|
||||
@import 'theme/functions';
|
||||
|
||||
// Custom variables
|
||||
@import 'user-variables';
|
||||
|
||||
// Theme variables
|
||||
@import 'theme/variables';
|
||||
|
||||
// Bootstrap core
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
// Theme core
|
||||
@import 'theme/theme';
|
||||
|
||||
// Custom core
|
||||
@import 'user';
|
||||
@@ -0,0 +1,24 @@
|
||||
//
|
||||
// accordion.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Button
|
||||
|
||||
.accordion-button:not(.collapsed) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.accordion-button:not([data-bs-toggle="collapse"])::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accordion-button::after {
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
// Body
|
||||
|
||||
.accordion-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// alert.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Color variants
|
||||
//
|
||||
// Using Bootstrap's core alert-variant mixin to generate solid background color + yiq colorized text (and making close/links match those colors)
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(shift-color($value, $alert-bg-scale), shift-color($value, $alert-border-scale), color-contrast(shift-color($value, $alert-bg-scale)));
|
||||
|
||||
.alert-link, .btn-close {
|
||||
color: color-contrast(shift-color($value, $alert-bg-scale));
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: darken(shift-color($value, $alert-border-scale), 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
//
|
||||
// avatar.scss
|
||||
// Theme component
|
||||
//
|
||||
|
||||
// General
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $avatar-size-base;
|
||||
height: $avatar-size-base;
|
||||
font-size: $avatar-size-base / 3;
|
||||
|
||||
// Loads mask images so they don't lag on hover
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-image: url(#{$path-to-img}/masks/avatar-status.svg),
|
||||
url(#{$path-to-img}/masks/avatar-group.svg),
|
||||
url(#{$path-to-img}/masks/avatar-group-hover.svg),
|
||||
url(#{$path-to-img}/masks/avatar-group-hover-last.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $avatar-title-bg;
|
||||
color: $avatar-title-color;
|
||||
}
|
||||
|
||||
|
||||
// Status
|
||||
|
||||
.avatar-online,
|
||||
.avatar-offline {
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
right: 5%;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
mask-image: url(#{$path-to-img}/masks/avatar-status.svg);
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-online::before {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.avatar-offline::before {
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
|
||||
.avatar-xs {
|
||||
width: $avatar-size-xs;
|
||||
height: $avatar-size-xs;
|
||||
font-size: $avatar-size-xs / 3;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: $avatar-size-sm;
|
||||
height: $avatar-size-sm;
|
||||
font-size: $avatar-size-sm / 3;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: $avatar-size-lg;
|
||||
height: $avatar-size-lg;
|
||||
font-size: $avatar-size-lg / 3;
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
width: $avatar-size-lg;
|
||||
height: $avatar-size-lg;
|
||||
font-size: $avatar-size-lg / 3;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: $avatar-size-xl;
|
||||
height: $avatar-size-xl;
|
||||
font-size: $avatar-size-xl / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-xxl {
|
||||
width: $avatar-size-xl;
|
||||
height: $avatar-size-xl;
|
||||
font-size: $avatar-size-xl / 3;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: $avatar-size-xxl;
|
||||
height: $avatar-size-xxl;
|
||||
font-size: $avatar-size-xxl / 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Ratio
|
||||
|
||||
.avatar.avatar-4by3 {
|
||||
width: $avatar-size-base * 4 / 3;
|
||||
}
|
||||
|
||||
.avatar-xs.avatar-4by3 {
|
||||
width: $avatar-size-xs * 4 / 3;
|
||||
}
|
||||
|
||||
.avatar-sm.avatar-4by3 {
|
||||
width: $avatar-size-sm * 4 / 3;
|
||||
}
|
||||
|
||||
.avatar-lg.avatar-4by3 {
|
||||
width: $avatar-size-lg * 4 / 3;
|
||||
}
|
||||
|
||||
.avatar-xl.avatar-4by3 {
|
||||
width: $avatar-size-xl * 4 / 3;
|
||||
}
|
||||
|
||||
.avatar-xxl.avatar-4by3 {
|
||||
width: $avatar-size-xxl * 4 / 3;
|
||||
}
|
||||
|
||||
|
||||
// Group
|
||||
|
||||
.avatar-group {
|
||||
display: inline-flex;
|
||||
|
||||
// Shift every next avatar left
|
||||
|
||||
.avatar + .avatar {
|
||||
margin-left: -$avatar-size-base / 4;
|
||||
}
|
||||
|
||||
.avatar-xs + .avatar-xs {
|
||||
margin-left: -$avatar-size-xs / 4;
|
||||
}
|
||||
|
||||
.avatar-sm + .avatar-sm {
|
||||
margin-left: -$avatar-size-sm / 4;
|
||||
}
|
||||
|
||||
.avatar-lg + .avatar-lg {
|
||||
margin-left: -$avatar-size-lg / 4;
|
||||
}
|
||||
|
||||
.avatar-xl + .avatar-xl {
|
||||
margin-left: -$avatar-size-xl / 4;
|
||||
}
|
||||
|
||||
.avatar-xxl + .avatar-xxl {
|
||||
margin-left: -$avatar-size-xxl / 4;
|
||||
}
|
||||
|
||||
// Add some spacing between avatars
|
||||
|
||||
.avatar:not(:last-child) {
|
||||
mask-image: url(#{$path-to-img}/masks/avatar-group.svg);
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
// Bring an avatar to front on hover
|
||||
|
||||
.avatar:hover {
|
||||
mask-image: none;
|
||||
z-index: 1;
|
||||
|
||||
+ .avatar {
|
||||
mask-image: url(#{$path-to-img}/masks/avatar-group-hover.svg);
|
||||
mask-size: 100% 100%;
|
||||
|
||||
&:last-child {
|
||||
mask-image: url(#{$path-to-img}/masks/avatar-group-hover-last.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
//
|
||||
// badge.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Links
|
||||
|
||||
.badge[href] {
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
|
||||
.badge-lg {
|
||||
padding: $badge-padding-y-lg $badge-padding-x-lg;
|
||||
}
|
||||
|
||||
|
||||
// Rounded circle
|
||||
|
||||
.badge-rounded-circle {
|
||||
height: calc(1em + #{$badge-padding-y * 2});
|
||||
padding-left: $badge-padding-y;
|
||||
padding-right: $badge-padding-y;
|
||||
border-radius: $border-radius-pill;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
|
||||
&.badge-lg {
|
||||
height: calc(1em + #{$badge-padding-y-lg * 2});
|
||||
padding-left: $badge-padding-y-lg;
|
||||
padding-right: $badge-padding-y-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Positioning
|
||||
|
||||
.badge-float {
|
||||
position: absolute;
|
||||
z-index: $zindex-dropdown;
|
||||
}
|
||||
|
||||
.badge-float-inside {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.badge-float-outside {
|
||||
top: -.5rem;
|
||||
right: -.5rem;
|
||||
}
|
||||
|
||||
|
||||
// Active states
|
||||
|
||||
.badge.bg-white-soft.active {
|
||||
background-color: $white !important;
|
||||
color: $primary !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: darken($white, 5%);
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.badge.bg-secondary-soft.active {
|
||||
background-color: $primary !important;
|
||||
color: color-contrast($primary) !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: darken($primary, 5%);
|
||||
color: color-contrast(darken($primary, 5%));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Creates the "soft" badge variant
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge.bg-#{$color}-soft {
|
||||
@include badge-variant-soft($value, $badge-soft-bg-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.badge.bg-gray-700-soft {
|
||||
@include badge-variant-soft($gray-700, $badge-soft-bg-opacity);
|
||||
}
|
||||
|
||||
|
||||
// Color options
|
||||
|
||||
.badge.bg-gray-600 {
|
||||
background-color: $gray-600;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
// Text color
|
||||
//
|
||||
// Replacing the default white text color
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge.bg-#{$color} {
|
||||
color: color-contrast($value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
//
|
||||
// breadcrumb.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.breadcrumb-item {
|
||||
font-size: $breadcrumb-font-size;
|
||||
|
||||
+ .breadcrumb-item {
|
||||
|
||||
&::before {
|
||||
content: "\e930";
|
||||
font-family: "Feather";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Horizontal scroll
|
||||
|
||||
.breadcrumb-scroll {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: auto;
|
||||
|
||||
.breadcrumb-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Hide scrollbar
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
//
|
||||
// buttons.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.btn > img {
|
||||
max-height: 1em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn:not([class*="btn-outline"]) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
|
||||
.btn-xs {
|
||||
padding: $input-btn-padding-y-xs $input-btn-padding-x-xs;
|
||||
font-size: $input-btn-font-size-xs;
|
||||
}
|
||||
|
||||
|
||||
// Custom colors
|
||||
|
||||
.btn-white {
|
||||
background-color: $white;
|
||||
color: $primary;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $white;
|
||||
color: darken($primary, 5%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: darken($white, 5%);
|
||||
color: darken($primary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group .btn-white {
|
||||
border-color: $gray-300 !important;
|
||||
color: $text-muted;
|
||||
|
||||
&.active {
|
||||
background-color: darken($white, 5%);
|
||||
color: darken($text-muted, 5%);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gray-300-20 {
|
||||
background-color: rgba($gray-300, .2);
|
||||
color: $white;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: rgba($gray-300, .25);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba($gray-300, .25);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gray-400 {
|
||||
background-color: $gray-400;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: darken($gray-400, 5%);
|
||||
color: darken($white, 5%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: darken($gray-400, 5%);
|
||||
color: darken($white, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gray-400-10 {
|
||||
background-color: rgba($gray-400, .1);
|
||||
color: $white;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: rgba($gray-400, .15);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba($gray-400, .15);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-white {
|
||||
border-color: $gray-300;
|
||||
color: $body-color;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: darken($white, 5%);
|
||||
border-color: $gray-400;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: darken($white, 5%);
|
||||
border-color: $gray-400;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-gray-300 {
|
||||
border-color: $gray-300;
|
||||
color: $primary;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Soft variants
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color}-soft {
|
||||
@include btn-variant-soft(rgba($value, $btn-soft-bg-opacity), $value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pill
|
||||
|
||||
.btn-pill {
|
||||
border-radius: $border-radius-pill;
|
||||
}
|
||||
|
||||
|
||||
// Rounded circle
|
||||
|
||||
.btn-rounded-circle {
|
||||
padding-left: $btn-padding-y;
|
||||
padding-right: $btn-padding-y;
|
||||
border-radius: $border-radius-pill;
|
||||
}
|
||||
|
||||
.btn-rounded-circle > * {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.btn-rounded-circle.btn-lg {
|
||||
padding-left: $btn-padding-y-lg;
|
||||
padding-right: $btn-padding-y-lg;
|
||||
}
|
||||
|
||||
.btn-rounded-circle.btn-sm {
|
||||
padding-left: $btn-padding-y-sm;
|
||||
padding-right: $btn-padding-y-sm;
|
||||
}
|
||||
|
||||
.btn-rounded-circle.btn-xs {
|
||||
padding-left: $btn-padding-y-xs;
|
||||
padding-right: $btn-padding-y-xs;
|
||||
}
|
||||
@@ -0,0 +1,282 @@
|
||||
//
|
||||
// card.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Card resets
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: transparent;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: block;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.card-body, .card-footer, .card-meta, .card-img, .card-img-top, .card-img-start, .card-img-end {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
|
||||
// Card action
|
||||
|
||||
a.card, a.card-body, a.card-footer, a.card-meta {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Card flush
|
||||
|
||||
.card-flush {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.card-flush > *:not(.card-btn) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
// Card border
|
||||
|
||||
.card-border {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-border::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
border-top-width: $border-width * 2;
|
||||
border-bottom-width: calc(#{$card-border-radius} - #{$border-width * 2});
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: inherit;
|
||||
border-bottom-color: transparent;
|
||||
border-top-left-radius: $card-border-radius;
|
||||
border-top-right-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-border-lg::after {
|
||||
border-top-width: $border-width * 3;
|
||||
border-bottom-width: calc(#{$card-border-radius} - #{$border-width * 3});
|
||||
}
|
||||
|
||||
.card-border-xl::after {
|
||||
border-top-width: $border-width * 4;
|
||||
border-bottom-width: calc(#{$card-border-radius} - #{$border-width * 3});
|
||||
}
|
||||
|
||||
|
||||
// Card row
|
||||
|
||||
.card-row {
|
||||
|
||||
.card-body {
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: $card-row-spacer-y $card-row-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: $card-row-spacer-x;
|
||||
padding-right: $card-row-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Card image
|
||||
|
||||
.card-img-end {
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
border-radius: 0 $border-radius $border-radius 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-img-start {
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
border-radius: $border-radius 0 0 $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Card image slider
|
||||
|
||||
.card-img-slider {
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
* {
|
||||
height: inherit !important;
|
||||
width: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Card image overlay
|
||||
|
||||
.card-img-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $card-spacer-x;
|
||||
}
|
||||
|
||||
.card-img-overlay .card-body {
|
||||
margin: -$card-spacer-x;
|
||||
margin-top: auto;
|
||||
border-bottom-right-radius: $card-inner-border-radius;
|
||||
border-bottom-left-radius: $card-inner-border-radius;
|
||||
}
|
||||
|
||||
|
||||
.card-img-overlay-hover {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-img-overlay-hover .card-body {
|
||||
transform: translateY(110%);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.card-img-overlay-hover:hover .card-body {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Card group
|
||||
|
||||
.card-group {
|
||||
|
||||
@include media-breakpoint-only(sm) {
|
||||
flex-direction: column !important;
|
||||
|
||||
> .card {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Card meta
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 0 $card-spacer-x $card-meta-spacer-y;
|
||||
}
|
||||
|
||||
.card-meta-divider {
|
||||
width: 100%;
|
||||
margin: 0 0 $card-meta-spacer-y;
|
||||
}
|
||||
|
||||
|
||||
// Card button
|
||||
|
||||
.card-btn:last-child {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
// Zoom
|
||||
|
||||
.card-zoom {
|
||||
overflow: hidden !important;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.card-zoom > [class*="card-img"] {
|
||||
transition: all .3s ease;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.card:hover > .card-zoom > [class*="card-img"] {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
// Card list
|
||||
|
||||
.card-list .list-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-list .list-link::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -$card-spacer-x;
|
||||
border-right: $border-width * 2 solid $primary;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-list .list-link:hover {
|
||||
color: $body-color !important;
|
||||
}
|
||||
|
||||
.card-list .active .list-link {
|
||||
color: $body-color !important;
|
||||
}
|
||||
|
||||
.card-list .active .list-link::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Card bleed
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
.card-bleed {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
margin-right: -$grid-gutter-width / 2;
|
||||
margin-left: -$grid-gutter-width / 2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.card-bleed .card-footer,
|
||||
.card-bleed .card-header,
|
||||
.card-bleed .card-body {
|
||||
padding-right: $grid-gutter-width / 2;
|
||||
padding-left: $grid-gutter-width / 2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.card-bleed .card-list .list-link::before {
|
||||
left: -$grid-gutter-width / 2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// close.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.btn-close {
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
//
|
||||
// device.scss
|
||||
// Theme component
|
||||
//
|
||||
|
||||
.device {
|
||||
position: relative;
|
||||
|
||||
> .img-fluid {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.device::before {
|
||||
content: "";
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
.device::before,
|
||||
.device-screen {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Single devices
|
||||
//
|
||||
|
||||
.device-iphonex::before,
|
||||
.device-iphonex > .device-screen {
|
||||
top: 7.784431138%; left: 16.4021164%;
|
||||
width: 66.137566137%; height: 80.838323353%;
|
||||
}
|
||||
|
||||
.device-macbook::before,
|
||||
.device-macbook > .device-screen {
|
||||
top: 11.53846154%; left: 13.38709677%;
|
||||
width: 73.548387096%; height: 73.076923076%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Combos
|
||||
//
|
||||
|
||||
.device-combo {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.device-combo > .device {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.device-combo-iphonex-iphonex {
|
||||
padding-bottom: 130.250482%;
|
||||
}
|
||||
|
||||
.device-combo-iphonex-iphonex > .device-iphonex {
|
||||
|
||||
&:first-child {
|
||||
bottom: 0; left: 0;
|
||||
width: 65.5260116%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
top: 0; right: 0;
|
||||
width: 72.8323699%;
|
||||
}
|
||||
}
|
||||
|
||||
.device-combo-macbook-iphonex,
|
||||
.device-combo-iphonex-macbook {
|
||||
padding-bottom: 62.4260355%;
|
||||
}
|
||||
|
||||
.device-combo-macbook-iphonex > .device-macbook,
|
||||
.device-combo-iphonex-macbook > .device-macbook {
|
||||
width: 91.7159763%;
|
||||
}
|
||||
|
||||
.device-combo-macbook-iphonex > .device-iphonex,
|
||||
.device-combo-iphonex-macbook > .device-iphonex {
|
||||
width: 27.9585799%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.device-combo-macbook-iphonex > .device-macbook {
|
||||
top: 0; left: 0;
|
||||
}
|
||||
|
||||
.device-combo-iphonex-macbook > .device-macbook {
|
||||
top: 0; right: 0;
|
||||
}
|
||||
|
||||
.device-combo-macbook-iphonex > .device-iphonex {
|
||||
bottom: 0; right: 0;
|
||||
}
|
||||
|
||||
.device-combo-iphonex-macbook > .device-iphonex {
|
||||
bottom: 0; left: 0;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
//
|
||||
// dropdown.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.dropdown-menu {
|
||||
padding-left: $dropdown-padding-x;
|
||||
padding-right: $dropdown-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Item
|
||||
|
||||
.dropdown-item {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
margin-left: -$dropdown-padding-x;
|
||||
margin-right: -$dropdown-padding-x;
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item + .dropdown-item {
|
||||
margin-top: $dropdown-item-spacing-y;
|
||||
}
|
||||
|
||||
|
||||
// Link (optional)
|
||||
|
||||
.dropdown-link {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Header
|
||||
|
||||
.dropdown-header {
|
||||
margin-left: -$dropdown-padding-x;
|
||||
margin-right: -$dropdown-padding-x;
|
||||
padding-top: 0;
|
||||
padding-bottom: $headings-margin-bottom;
|
||||
font-size: $h6-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: $h6-line-height;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
|
||||
// Toggle
|
||||
|
||||
.dropdown-toggle::after {
|
||||
font-family: "Feather";
|
||||
vertical-align: middle;
|
||||
border: none !important;
|
||||
content: "\e92e";
|
||||
}
|
||||
|
||||
.dropend > .dropdown-toggle::after {
|
||||
content: "\e930";
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
|
||||
.dropdown-menu-xs {
|
||||
min-width: $dropdown-min-width-xs;
|
||||
padding: $dropdown-padding-y-xs $dropdown-padding-x-xs;
|
||||
}
|
||||
|
||||
.dropdown-menu-md {
|
||||
min-width: $dropdown-min-width-md;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
min-width: $dropdown-min-width-lg;
|
||||
}
|
||||
|
||||
.dropdown-menu-xl {
|
||||
min-width: $dropdown-min-width-xl;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg,
|
||||
.dropdown-menu-xl {
|
||||
padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg .dropdown-item,
|
||||
.dropdown-menu-xl .dropdown-header {
|
||||
margin-left: -$dropdown-padding-x-lg;
|
||||
margin-right: -$dropdown-padding-x-lg;
|
||||
padding-left: $dropdown-item-padding-x-lg;
|
||||
padding-right: $dropdown-item-padding-x-lg;
|
||||
}
|
||||
|
||||
|
||||
// Positioning
|
||||
|
||||
.dropend > .dropdown-menu {
|
||||
top: -$dropdown-padding-y;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// footer.scss
|
||||
// Theme component
|
||||
//
|
||||
|
||||
// Brand image
|
||||
|
||||
.bg-dark .footer-brand {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import 'forms/floating-labels';
|
||||
@import 'forms/form-check';
|
||||
@import 'forms/form-control';
|
||||
@import 'forms/form-group';
|
||||
@import 'forms/form-select';
|
||||
@import 'forms/input-group';
|
||||
@@ -0,0 +1,13 @@
|
||||
//
|
||||
// functions.scss
|
||||
//
|
||||
|
||||
// Colors
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(white, $color, $percentage);
|
||||
}
|
||||
|
||||
@function shade($color, $percentage) {
|
||||
@return mix(black, $color, $percentage);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// grid.scsss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
[class^="container"] {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: $grid-gutter-width / 2;
|
||||
padding-left: $grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
[class^="col"] {
|
||||
position: relative;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
//
|
||||
// icon.scss
|
||||
// Theme component
|
||||
//
|
||||
|
||||
.icon > svg {
|
||||
width: $icon-size-base;
|
||||
height: $icon-size-base;
|
||||
}
|
||||
|
||||
// Use "text-" utilities to fill svg icons
|
||||
.icon[class*="text-"] > svg [fill]:not([fill="none"]) {
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
|
||||
.icon-xs > svg {
|
||||
width: $icon-size-xs;
|
||||
height: $icon-size-xs;
|
||||
}
|
||||
|
||||
.icon-sm > svg {
|
||||
width: $icon-size-sm;
|
||||
height: $icon-size-sm;
|
||||
}
|
||||
|
||||
.icon-lg > svg {
|
||||
width: $icon-size-lg;
|
||||
height: $icon-size-lg;
|
||||
}
|
||||
|
||||
.icon-xl > svg {
|
||||
width: $icon-size-xl;
|
||||
height: $icon-size-xl;
|
||||
}
|
||||
|
||||
|
||||
// Circle
|
||||
|
||||
.icon-circle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $icon-circle-size;
|
||||
height: $icon-circle-size;
|
||||
border-radius: 50%;
|
||||
|
||||
> .fe {
|
||||
font-size: $icon-circle-font-size;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
//
|
||||
// images.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Image cover
|
||||
//
|
||||
// Spans the whole with of the viewport
|
||||
|
||||
.img-cover {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
margin-left: calc(50% - 50vw);
|
||||
}
|
||||
|
||||
// Extending .img-fluid class to support nested images
|
||||
|
||||
.img-fluid > img,
|
||||
.img-fluid > svg {
|
||||
max-width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
// Figure
|
||||
|
||||
.figure {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// list-group.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.list-group-flush {
|
||||
|
||||
.list-group-item {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0 !important;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0 !important;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
//
|
||||
// list.scss
|
||||
// Theme component
|
||||
//
|
||||
|
||||
.list {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.list-item + .list-item {
|
||||
margin-top: $list-item-spacing-y;
|
||||
}
|
||||
|
||||
.list-link {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
font-size: $list-link-font-size;
|
||||
color: $list-link-color;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
color: $list-link-hover-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// mixins.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
@import "mixins/badge";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/overlay";
|
||||
@@ -0,0 +1,18 @@
|
||||
//
|
||||
// modal.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.modal-open .navbar.fixed-top {
|
||||
padding-right: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
.modal .btn-close {
|
||||
position: absolute;
|
||||
top: $spacer * 1.5;
|
||||
right: $spacer * 1.5;
|
||||
z-index: $zindex-dropdown;
|
||||
}
|
||||
@@ -0,0 +1,394 @@
|
||||
//
|
||||
// navbar.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.navbar {
|
||||
transition: $transition-base;
|
||||
transition-property: background-color, color;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
|
||||
// Dark version
|
||||
|
||||
.navbar-dark {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
.navbar-nav .nav-item .nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item.active .nav-link,
|
||||
.navbar-nav .nav-item .nav-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-toggler {
|
||||
color: $navbar-light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contaner
|
||||
|
||||
.navbar > .container,
|
||||
.navbar > .container-fluid {
|
||||
padding-left: $grid-gutter-width / 2 !important;
|
||||
padding-right: $grid-gutter-width / 2 !important;
|
||||
}
|
||||
|
||||
|
||||
// Brand
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: $navbar-brand-font-weight;
|
||||
}
|
||||
|
||||
.navbar-brand-img {
|
||||
max-height: $navbar-brand-height;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-brand {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
|
||||
// Button
|
||||
|
||||
.navbar-btn {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: 100%;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
font-size: $btn-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-weight: $navbar-nav-link-font-weight;
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boxed layout
|
||||
|
||||
.navbar-dark.fixed-top > .container {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -$navbar-padding-y;
|
||||
left: 0;
|
||||
border-top: $border-width solid fade-out($white, .8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Collapse
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
.navbar-collapse {
|
||||
position: fixed;
|
||||
top: $spacer;
|
||||
left: $spacer;
|
||||
height: auto;
|
||||
max-height: calc(100% - #{$spacer * 2}) !important;
|
||||
width: calc(100% - #{$spacer * 2});
|
||||
background-color: $dropdown-bg;
|
||||
border-radius: $dropdown-border-radius;
|
||||
box-shadow: $box-shadow-dark-lg;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
// Animation
|
||||
|
||||
.navbar-collapse.show,
|
||||
.navbar-collapse.collapsing {
|
||||
transition: $transition-base;
|
||||
transition-property: opacity, transform, -webkit-transform;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.navbar-collapse.show {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing {
|
||||
opacity: 0;
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Toggler
|
||||
|
||||
.navbar .navbar-toggler {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-toggler {
|
||||
position: absolute;
|
||||
top: $spacer;
|
||||
right: $spacer;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
|
||||
.navbar-collapse .navbar-nav .nav-item {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $navbar-nav-item-spacing;
|
||||
|
||||
+ .nav-item {
|
||||
border-top: $border-width solid $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .nav-link {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown menu
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
box-shadow: none;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
box-shadow: $box-shadow-dark-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropdown-menu {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropdown > .dropdown-menu {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropend > .dropdown-menu {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
padding-left: $spacer / 2;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown item
|
||||
|
||||
.navbar-collapse .navbar-nav .dropdown-item,
|
||||
.navbar-collapse .navbar-nav .dropdown-header {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown toggle
|
||||
|
||||
.navbar-nav .dropdown > .dropdown-toggle {
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropdown > .dropdown-toggle {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-bottom: $navbar-dropdown-toggle-margin-bottom;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .dropend > .dropdown-toggle {
|
||||
display: flex;
|
||||
|
||||
&::after {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropend > .dropdown-toggle {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
&::after {
|
||||
content: "\e92e";
|
||||
}
|
||||
|
||||
&[aria-expanded="true"]::after {
|
||||
transform-origin: center center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown image
|
||||
|
||||
.navbar-nav .dropdown-img-start {
|
||||
height: 100%;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||
background: no-repeat center center / cover;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: fade-out($primary, .2);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
// Content
|
||||
|
||||
* {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu-lg .dropdown-img-start,
|
||||
.navbar-nav .dropdown-menu-xl .dropdown-img-start {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown body
|
||||
|
||||
.navbar-nav .dropdown-body {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu-lg .dropdown-body,
|
||||
.navbar-nav .dropdown-menu-xl .dropdown-body {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown list group
|
||||
|
||||
.navbar-nav .dropdown-menu .list-group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle dropdown on hover
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: $transition-base;
|
||||
transition-property: opacity, transform, -webkit-transform;
|
||||
}
|
||||
|
||||
.navbar-nav .dropend > .dropdown-menu {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown > .dropdown-menu {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 10px);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu.showing {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navbar-nav .dropend > .dropdown-menu.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown > .dropdown-menu.show {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
//
|
||||
// pagination.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.pagination-sm .page-link {
|
||||
line-height: $btn-line-height-sm;
|
||||
font-size: $btn-font-size-sm;
|
||||
}
|
||||
|
||||
.pagination-sm .page-item:first-child .page-link {
|
||||
border-top-left-radius: $btn-border-radius-sm;
|
||||
border-bottom-left-radius: $btn-border-radius-sm;
|
||||
}
|
||||
|
||||
.pagination-sm .page-item:last-child .page-link {
|
||||
border-top-right-radius: $btn-border-radius-sm;
|
||||
border-bottom-right-radius: $btn-border-radius-sm;
|
||||
}
|
||||
|
||||
.pagination-lg .page-link {
|
||||
line-height: $btn-line-height-lg;
|
||||
font-size: $btn-font-size-lg;
|
||||
}
|
||||
|
||||
.pagination-lg .page-item:first-child .page-link {
|
||||
border-top-left-radius: $btn-border-radius-lg;
|
||||
border-bottom-left-radius: $btn-border-radius-lg;
|
||||
}
|
||||
|
||||
.pagination-lg .page-item:last-child .page-link {
|
||||
border-top-right-radius: $btn-border-radius-lg;
|
||||
border-bottom-right-radius: $btn-border-radius-lg;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// popover.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.popover-header {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-size: $popover-header-font-size;
|
||||
color: $popover-header-color;
|
||||
}
|
||||
|
||||
.popover-header:not(:empty) ~ .popover-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// reboot.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
//
|
||||
// screenshot.scss
|
||||
// Theme component
|
||||
//
|
||||
|
||||
.screenshot {
|
||||
border-radius: $screenshot-border-radius;
|
||||
box-shadow: $screenshot-box-shadow;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// section.scss
|
||||
// Theme module
|
||||
//
|
||||
|
||||
.section-border {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-border::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-width: $border-width * 2 0 0 0;
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
content: "";
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
//
|
||||
// shapes.scss
|
||||
// Theme component
|
||||
//
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.shape > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.shape:not([class*="shape-blur"]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shape:not([class*="shape-blur"]) > * {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
|
||||
// Hide SVG images in IE
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
|
||||
.shape > svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Position
|
||||
|
||||
.shape-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.shape-top > * {
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.shape-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.shape-end > * {
|
||||
position: inherit;
|
||||
top: inherit;
|
||||
bottom: inherit;
|
||||
right: inherit;
|
||||
transform-origin: center left;
|
||||
}
|
||||
|
||||
.shape-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.shape-bottom > * {
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.shape-bottom-100 {
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.shape-bottom-100 > * {
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.shape-start {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.shape-start > * {
|
||||
position: inherit;
|
||||
top: inherit;
|
||||
bottom: inherit;
|
||||
left: inherit;
|
||||
transform-origin: center right;
|
||||
}
|
||||
|
||||
|
||||
// Orientation
|
||||
|
||||
.shape-fluid-x > * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.shape-fluid-y > * {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
// Direction
|
||||
|
||||
.shape-flip-x {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
|
||||
// Blurs
|
||||
|
||||
.shape-blur-1 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.shape-blur-1 > * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.shape-blur-2 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.shape-blur-2 > * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.shape-blur-3 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.shape-blur-3 > * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.shape-blur-4 {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translateX(-50%) scale(1.3);
|
||||
}
|
||||
|
||||
.shape-blur-4 > * {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
//
|
||||
// sidenav.scss
|
||||
// Theme components
|
||||
//
|
||||
|
||||
.sidenav {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: fixed;
|
||||
top: 84px;
|
||||
height: calc(100vh - 84px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-start {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-end {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// tables.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Alignment
|
||||
|
||||
.table-align-middle {
|
||||
|
||||
thead > tr > th,
|
||||
tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
// Configuration
|
||||
@import "mixins";
|
||||
@import "utilities";
|
||||
|
||||
// Layout & components
|
||||
@import "reboot";
|
||||
@import "type";
|
||||
@import "images";
|
||||
@import "grid";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "buttons";
|
||||
@import "dropdown";
|
||||
@import "navbar";
|
||||
@import "card";
|
||||
@import "accordion";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "badge";
|
||||
@import "alert";
|
||||
@import "list-group";
|
||||
@import "close";
|
||||
@import "modal";
|
||||
@import "popover";
|
||||
|
||||
// Theme
|
||||
@import "avatar";
|
||||
@import "device";
|
||||
@import "footer";
|
||||
@import "icon";
|
||||
@import "list";
|
||||
@import "screenshot";
|
||||
@import "section";
|
||||
@import "shapes";
|
||||
@import "sidenav";
|
||||
@import "vendor";
|
||||
@@ -0,0 +1,193 @@
|
||||
//
|
||||
// type.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Font
|
||||
|
||||
@font-face {
|
||||
font-family: "HKGroteskPro";
|
||||
font-weight: 400;
|
||||
src: url("#{$path-to-fonts}/HK%20Grotesk%20Pro/HKGroteskPro-Regular.woff2") format("woff2"),
|
||||
url("#{$path-to-fonts}/HK%20Grotesk%20Pro/HKGroteskPro-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HKGroteskPro";
|
||||
font-weight: 600;
|
||||
src: url("#{$path-to-fonts}/HK%20Grotesk%20Pro/HKGroteskPro-Medium.woff2") format("woff2"),
|
||||
url("#{$path-to-fonts}/HK%20Grotesk%20Pro/HKGroteskPro-Medium.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HKGroteskPro";
|
||||
font-weight: 700;
|
||||
src: url("#{$path-to-fonts}/HK%20Grotesk%20Pro/HKGroteskPro-Bold.woff2") format("woff2"),
|
||||
url("#{$path-to-fonts}/HK%20Grotesk%20Pro/HKGroteskPro-Bold.woff") format("woff");
|
||||
}
|
||||
|
||||
|
||||
// Feather icons
|
||||
|
||||
@font-face {
|
||||
font-family: 'Feather';
|
||||
src: url('#{$path-to-fonts}/Feather/Feather.ttf?sdxovp') format('truetype'), url('#{$path-to-fonts}/Feather/Feather.woff?sdxovp') format('woff'), url('#{$path-to-fonts}/Feather/Feather.svg?sdxovp#Feather') format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
// Headings
|
||||
|
||||
h1, h2, .h1, .h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
line-height: $h1-line-height;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $h1-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
line-height: $h2-line-height;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $h2-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
line-height: $h3-line-height;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $h3-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
h4, .h4 {
|
||||
line-height: $h4-line-height;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $h4-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
h5, .h5 {
|
||||
line-height: $h5-line-height;
|
||||
}
|
||||
|
||||
h6, .h6 {
|
||||
line-height: $h6-line-height;
|
||||
|
||||
&.text-uppercase {
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Display
|
||||
|
||||
.display-1, .display-2, .display-3, .display-4 {
|
||||
letter-spacing: $display-letter-spacing;
|
||||
}
|
||||
|
||||
.display-1 {
|
||||
line-height: $display-line-height;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $display1-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
.display-2 {
|
||||
line-height: $display-line-height;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $display2-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
.display-3 {
|
||||
line-height: $display-line-height;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $display3-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
.display-4 {
|
||||
line-height: $display-line-height;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $display4-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Lead
|
||||
|
||||
.lead {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $lead-font-size-md;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Blockquote
|
||||
|
||||
.blockquote-img {
|
||||
max-height: 2.5rem;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
margin-top: 0;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Social list
|
||||
|
||||
.list-social-icon {
|
||||
max-width: 1.25rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
// Dividers
|
||||
|
||||
.hr-sm {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.hr-sm:not([size]) {
|
||||
height: $border-width * 2;
|
||||
}
|
||||
|
||||
.hr-md {
|
||||
width: 100px;
|
||||
;
|
||||
}
|
||||
|
||||
.hr-md:not([size]) {
|
||||
height: $border-width * 2;
|
||||
}
|
||||
|
||||
|
||||
// Code
|
||||
|
||||
code {
|
||||
line-height: $code-line-height;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
//
|
||||
// utilities.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
@import 'utilities/background';
|
||||
@import 'utilities/images';
|
||||
@import 'utilities/lift';
|
||||
@import 'utilities/overlay';
|
||||
@import 'utilities/position';
|
||||
@import 'utilities/shadows';
|
||||
@import 'utilities/sizing';
|
||||
@import 'utilities/type';
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,8 @@
|
||||
@import "vendor/aos";
|
||||
@import "vendor/bigpicture";
|
||||
@import "vendor/choices";
|
||||
@import "vendor/dropzone";
|
||||
@import "vendor/feather";
|
||||
@import "vendor/flickity";
|
||||
@import "vendor/highlight";
|
||||
@import "vendor/quill";
|
||||
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// floating-labels.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.form-floating > label {
|
||||
color: $form-floating-label-color;
|
||||
}
|
||||
|
||||
.form-floating > .form-control:focus ~ label,
|
||||
.form-floating > .form-control:not(:placeholder-shown) ~ label,
|
||||
.form-floating > .form-select ~ label {
|
||||
font-size: $form-floating-label-font-size;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
//
|
||||
// form-check.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
//
|
||||
// Check
|
||||
//
|
||||
|
||||
.form-check {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-check + .form-check {
|
||||
margin-top: $form-check-margin-bottom;
|
||||
}
|
||||
|
||||
// Dark
|
||||
|
||||
.form-check-dark .form-check-input {
|
||||
background-color: $form-check-input-bg-dark;
|
||||
}
|
||||
|
||||
.form-check-dark .form-check-input:checked {
|
||||
background-color: $form-check-input-checked-bg-color-dark;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Switch
|
||||
//
|
||||
|
||||
.form-switch {
|
||||
min-height: $form-switch-min-height;
|
||||
}
|
||||
|
||||
.form-switch > .form-check-input {
|
||||
height: $form-switch-min-height;
|
||||
}
|
||||
|
||||
.form-switch > .form-check-label {
|
||||
margin-top: calc((#{$form-switch-min-height} - #{$line-height-base} * 1em) / 2);
|
||||
}
|
||||
|
||||
// Dark
|
||||
|
||||
.form-check-dark.form-switch .form-check-input {
|
||||
background-image: escape-svg($form-switch-bg-image-dark);
|
||||
}
|
||||
|
||||
.form-check-dark.form-switch .form-check-input:focus {
|
||||
background-image: escape-svg($form-switch-focus-bg-image-dark);
|
||||
}
|
||||
|
||||
.form-check-dark.form-switch .form-check-input:checked {
|
||||
background-image: escape-svg($form-switch-checked-bg-image-dark);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
//
|
||||
// form-control.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Sizing
|
||||
|
||||
.form-control-xs {
|
||||
min-height: $input-height-xs;
|
||||
padding: $input-padding-y-xs $input-padding-x-xs;
|
||||
line-height: $input-line-height-xs;
|
||||
font-size: $input-font-size-xs;
|
||||
}
|
||||
|
||||
|
||||
// Form control flush
|
||||
|
||||
.form-control-flush,
|
||||
.form-floating > .form-control-flush {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-floating > .form-control-flush ~ label {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// form-group.scss
|
||||
// Theme component
|
||||
//
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $form-group-margin-bottom;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// form-select.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Sizes
|
||||
|
||||
.form-select-xs {
|
||||
height: $form-select-height-xs;
|
||||
padding: $form-select-padding-y-xs calc(#{$form-select-padding-x-xs} + #{$form-select-indicator-padding-xs} + #{$form-select-bg-size-xs}) $form-select-padding-y-xs $form-select-padding-x-xs;
|
||||
line-height: $form-select-line-height-xs;
|
||||
font-size: $form-select-font-size-xs;
|
||||
background-size: $form-select-bg-size-xs;
|
||||
background-position: right $form-select-padding-x-xs center;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
//
|
||||
// input-group.scss
|
||||
//
|
||||
|
||||
// Sizing
|
||||
|
||||
.input-group-xs .form-control {
|
||||
min-height: $input-height-xs;
|
||||
padding: $input-padding-y-xs $input-padding-x-xs;
|
||||
line-height: $input-line-height-xs;
|
||||
font-size: $input-font-size-xs;
|
||||
}
|
||||
|
||||
.input-group-xs .input-group-text {
|
||||
padding: $input-padding-y-xs $input-padding-x-xs;
|
||||
line-height: $input-line-height-xs;
|
||||
font-size: $input-btn-font-size-xs;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// forms.scss
|
||||
// Extended from Boostrap
|
||||
//
|
||||
|
||||
// Custom file input
|
||||
|
||||
.custom-file-label::after {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// badge.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
@mixin badge-variant-soft($color, $badge-soft-bg-opacity) {
|
||||
background-color: rgba($color, $badge-soft-bg-opacity);
|
||||
color: $color;
|
||||
|
||||
&[href]:hover,
|
||||
&[href]:focus {
|
||||
background-color: rgba($color, $badge-soft-bg-opacity * 2);
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// buttons.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
@mixin btn-variant-soft($bg, $color) {
|
||||
background-color: $bg;
|
||||
color: $color;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: fade-in($bg, .05);
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: fade-in($bg, .05);
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
//
|
||||
// overlay.scss
|
||||
// Theme mixin
|
||||
//
|
||||
|
||||
@mixin overlay($color) {
|
||||
|
||||
&::before {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin overlay-gradient($color, $direction) {
|
||||
|
||||
&::before {
|
||||
background-image: linear-gradient(to bottom, transparent, $color);
|
||||
|
||||
@if($direction == "right" OR $direction == "left") {
|
||||
@include media-breakpoint-up(lg) {
|
||||
background-image: linear-gradient(to $direction, transparent, $color 50%, $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
//
|
||||
// background.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.bg-cover {
|
||||
background: no-repeat center center / cover;
|
||||
}
|
||||
|
||||
|
||||
// Between
|
||||
|
||||
.bg-between {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center, right center;
|
||||
background-size: auto 70%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Gradients
|
||||
|
||||
.bg-gradient-light-white {
|
||||
background-image: linear-gradient(to bottom, $light 0%, $white 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-dark-black {
|
||||
background-image: linear-gradient(to bottom, $dark 0%, $black 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-multicolor {
|
||||
background-image: conic-gradient(from 52deg at 50% 50%,
|
||||
#8024A0 0deg,
|
||||
#31EEC1 33deg,
|
||||
#6924A0 222deg,
|
||||
#D6723B 264deg,
|
||||
#D5498C 295deg,
|
||||
#8024A0 360deg);
|
||||
}
|
||||
|
||||
|
||||
// Patterns
|
||||
|
||||
.bg-pattern-2 {
|
||||
background-image: linear-gradient(to bottom, transparent 0%, $black 100%), url('#{$path-to-img}/patterns/pattern-2.png');
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
//
|
||||
// images.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
//
|
||||
// Skewed
|
||||
//
|
||||
|
||||
.img-skewed {
|
||||
perspective: 1500px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
// Left
|
||||
|
||||
.img-skewed-start {
|
||||
perspective-origin: left center;
|
||||
|
||||
.img-skewed-item {
|
||||
transform: rotateY(-$img-skewed-rotate-y) rotateX($img-skewed-rotate-x);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
|
||||
.img-skewed-end {
|
||||
perspective-origin: right center;
|
||||
|
||||
.img-skewed-item {
|
||||
transform: rotateY($img-skewed-rotate-y) rotateX($img-skewed-rotate-x);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
//
|
||||
// lift.scss
|
||||
// Theme utility
|
||||
//
|
||||
|
||||
.lift {
|
||||
transition: box-shadow .25s ease, transform .25s ease;
|
||||
}
|
||||
|
||||
.lift:hover,
|
||||
.lift:focus {
|
||||
box-shadow: $box-shadow-lift !important;
|
||||
transform: translate3d(0, -3px, 0);
|
||||
}
|
||||
|
||||
.lift-lg:hover,
|
||||
.lift-lg:focus {
|
||||
box-shadow: $box-shadow-lift-lg !important;
|
||||
transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
//
|
||||
// overlay.scss
|
||||
// Theme utility
|
||||
//
|
||||
|
||||
.overlay {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Colors
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
|
||||
// Solid
|
||||
.overlay-#{$color} {
|
||||
@include overlay($value);
|
||||
}
|
||||
|
||||
// Gradient
|
||||
.overlay-gradient-#{$color}-end {
|
||||
@include overlay-gradient($value, right);
|
||||
}
|
||||
.overlay-gradient-#{$color}-down {
|
||||
@include overlay-gradient($value, bottom);
|
||||
}
|
||||
.overlay-gradient-#{$color}-start {
|
||||
@include overlay-gradient($value, left);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Opacity
|
||||
|
||||
@for $i from 1 through 9 {
|
||||
.overlay-#{$i * 10} {
|
||||
|
||||
&::before {
|
||||
opacity: #{$i / 10};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// position.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.center {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// shadows.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.shadow-multicolor {
|
||||
box-shadow: -300px 100px 300px rgba(#501AE8, .2), 300px -100px 300px rgba(#24A1FC, .2);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
//
|
||||
// sizing.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
// Cover
|
||||
//
|
||||
// Spans the container till the edge of the viewport
|
||||
|
||||
.w-cover {
|
||||
|
||||
@each $width, $value in $container-max-widths {
|
||||
|
||||
@include media-breakpoint-up(#{$width}) {
|
||||
width: calc(100% + (100vw - #{$value}) / 2 + #{$grid-gutter-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// type.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
//
|
||||
// Font sizing
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.font-size-lg {
|
||||
font-size: $font-size-lg-md !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user