Husky/shop
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Damian Wessels
2023-11-10 15:57:52 +01:00
commit eb87e1912f
351 changed files with 51965 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/scss/argon-design-system.scss Normal file
View File

@@ -0,0 +1,27 @@
/*!
=========================================================
* Argon Design System - v 1.2.2
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-design-system
* Copyright 2020 Creative Tim (http://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Bootstrap Functions
@import "bootstrap/functions";
// Theme Variables
@import "argon-design-system/variables";
// Bootstrap Core
@import "bootstrap/bootstrap";
// Theme Core
@import "argon-design-system/theme";

0
assets/scss/argon-design-system/accordion.scss Normal file
View File

75
assets/scss/argon-design-system/alert.scss Normal file
View File

@@ -0,0 +1,75 @@
.alert {
padding: $alert-padding-y $alert-padding-x;
border: 0;
font-size: $font-size-sm;
@include border-radius($alert-border-radius);
.alert-inner--icon {
font-size: 1.25rem;
margin-right: 1.25rem;
display: inline-block;
vertical-align: middle;
i.ni {
position: relative;
top: 1px;
}
}
.alert-inner--text {
display: inline-block;
vertical-align: middle;
}
}
.alert:not(.alert-secondary) {
color: $white;
}
[class*="alert-"] {
.alert-link {
color: $white;
border-bottom: 1px dotted rgba($white, .5);
}
}
.alert-heading {
font-weight: $font-weight-bold;
font-size: $h4-font-size;
margin-top: .15rem;
}
.alert-dismissible {
.close {
top: 50%;
right: $alert-padding-x;
padding: 0;
transform: translateY(-50%);
color: rgba($white, .6);
opacity: 1;
&:hover,
&:focus {
color: rgba($white, .9);
opacity: 1 !important;
}
@include media-breakpoint-down(xs) {
top: 1rem;
right: .5rem;
}
&>span:not(.sr-only) {
font-size: 1.5rem;
background-color: transparent;
color: rgba($white, .6);
}
&:hover,
&:focus {
&>span:not(.sr-only) {
background-color: transparent;
color: rgba($white, .9);
}
}
}
}

51
assets/scss/argon-design-system/avatar.scss Normal file
View File

@@ -0,0 +1,51 @@
.avatar {
color: $white;
background-color: $gray-500;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 50%;
height: 48px;
width: 48px;
}
.avatar img {
width: 100%;
border-radius: 50%;
}
.avatar + .avatar-content {
display: inline-block;
margin-left: .75rem;
}
.avatar-lg {
width: 58px;
height: 58px;
font-size: $font-size-sm;
}
.avatar-sm {
width: 38px;
height: 38px;
font-size: $font-size-sm;
}
// Overlapped avatars
.avatar-group {
.avatar {
position: relative;
z-index: 2;
border: 2px solid $card-bg;
&:hover {
z-index: 3;
}
}
.avatar + .avatar {
margin-left: -1rem;
}
}

67
assets/scss/argon-design-system/badge.scss Normal file
View File

@@ -0,0 +1,67 @@
.badge {
text-transform: $badge-text-transfom;
a {
color: #FFF;
}
}
// Variations
.badge-pill {
padding-right: $badge-pill-padding-x;
padding-left: $badge-pill-padding-x;
}
.badge-circle {
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 2rem;
height: 2rem;
font-size: .875rem;
}
// Multiple inline badges
.badge-inline {
margin-right: .625rem;
}
.badge-inline + span {
top: 2px;
position: relative;
}
.badge-inline + span > a {
text-decoration: underline;
}
// Sizes
.badge-md {
padding: .65em 1em;
}
.badge-lg {
padding: .85em 1.375em;
}
// Color variations
.badge-secondary {
color: $gray-800;
}
// Link badges
.btn {
.badge {
&:not(:first-child) {
margin-left: .5rem;
}
&:not(:last-child) {
margin-right: .5rem;
}
}
}

181
assets/scss/argon-design-system/buttons.scss Normal file
View File

@@ -0,0 +1,181 @@
// General
.btn {
position: relative;
text-transform: $btn-text-transform;
will-change: transform;
letter-spacing: $btn-letter-spacing;
font-size: $input-btn-font-size;
&:hover {
@include box-shadow($btn-hover-box-shadow);
transform: translateY(-1px);
}
&:not(:last-child) {
margin-right: .5rem;
}
}
.btn-group,
.input-group {
.btn {
margin-right: 0;
transform: translateY(0);
}
}
// Sizes
.btn-sm {
font-size: $input-btn-font-size-sm;
&.btn-icon-only {
width: 35px;
height: 35px;
}
.btn-inner--icon {
font-size: 0.5rem;;
}
}
.btn-lg {
&.btn-icon-only {
width: 52px;
height: 52px;
}
.btn-inner--icon {
font-size: 1.2rem;
position: relative;
top: 2px;
}
}
// Fixes
[class*="btn-outline-"] {
border-width: 1px;
}
.btn-outline-secondary {
color: darken(theme-color("secondary"), 50%);
}
.btn-inner--icon {
i:not(.fa) {
position: relative;
}
}
.btn-link {
font-weight: $btn-font-weight;
box-shadow: none;
&:hover {
box-shadow: none;
transform: none;
}
&.text-secondary {
color: darken(theme-color("secondary"), 50%) !important;
}
}
.btn-neutral {
color: theme-color("primary");
}
// Icons
.btn svg:not(:first-child),
.btn i:not(:first-child) {
margin-left: 0.5rem;
}
.btn svg:not(:last-child),
.btn i:not(:last-child) {
margin-right: 0.5rem;
}
// Icon labels
.btn-icon-label {
position: relative;
.btn-inner--icon {
position: absolute;
height: 100%;
line-height: 1;
border-radius: 0;
text-align: center;
margin: 0;
width: 3em;
background-color: rgba(0, 0, 0, .1);
}
.btn-inner--icon:not(:first-child) {
right: 0;
top: 0;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.btn-inner--icon:not(:last-child) {
left: 0;
top: 0;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.btn-inner--icon svg {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btn-inner--text:not(:first-child) {
padding-left: 3em;
}
.btn-inner--text:not(:last-child) {
padding-right: 3em;
}
}
// Icons
.btn-icon {
.btn-inner--icon {
img {
width: 20px;
}
}
.btn-inner--text:not(:first-child) {
margin-left: .75em;
}
.btn-inner--text:not(:last-child) {
margin-right: .75em;
}
}
.btn-icon-only {
width: 2.375rem;
height: 2.375rem;
padding: 0;
}
a.btn-icon-only {
line-height: 2.5;
}
.btn-icon-only.btn-sm {
width: 2rem;
height: 2rem;
}
// Brand buttons
@each $color,
$value in $brand-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}

102
assets/scss/argon-design-system/card.scss Normal file
View File

@@ -0,0 +1,102 @@
.card {
position: relative;
&.card-plain {
background: transparent;
box-shadow: none;
border: none;
}
}
.profile-page {
.card-profile {
margin-top: -150px;
.card-profile-image {
position: relative;
//min-height: 130px;
img {
max-width: 180px;
border-radius: $border-radius;
@extend .shadow;
transform: translate(-50%,-30%);
position: absolute;
left: 50%;
transition: $transition-base;
&:hover {
transform: translate(-50%, -33%);
}
}
}
.card-profile-stats {
padding: 1rem 0;
> div {
text-align: center;
margin-right: 1rem;
padding: .875rem;
&:last-child {
margin-right: 0;
}
.heading {
font-size: 1.1rem;
font-weight: bold;
display: block;
}
.description {
font-size: .875rem;
color: $gray-500;
}
}
}
.card-profile-actions {
padding: .875rem;
}
@include media-breakpoint-down(xs) {
.card-profile-actions {
margin-top: 110px;
}
}
@include media-breakpoint-between(sm, md) {
.card-profile-stats {
margin-top: 30px;
}
}
}
}
// Card with blockquotes
.card {
.card-blockquote {
padding: 2rem;
position: relative;
.svg-bg {
display: block;
width: 100%;
height: 95px;
position: absolute;
top: -94px;
left: 0;
}
}
}
// Animated cards
.card-lift--hover {
&:hover {
transform: translateY(-20px);
@include transition($transition-base);
}
}

1
assets/scss/argon-design-system/carousel.scss Normal file
View File

@@ -0,0 +1 @@
// Bootstrap carousel

29
assets/scss/argon-design-system/close.scss Normal file
View File

@@ -0,0 +1,29 @@
.close {
@if $enable-transitions {
transition: $transition-base;
}
&>span:not(.sr-only) {
background-color: $close-bg;
color: $close-color;
line-height: 17px;
height: 1.25rem;
width: 1.25rem;
border-radius: 50%;
font-size: 1.25rem;
display: block;
@if $enable-transitions {
transition: $transition-base;
}
}
&:hover,
&:focus {
background-color: $close-hover-bg;
color: $close-hover-color;
outline: none;
span:not(.sr-only) {
background-color: $close-hover-bg;
}
}
}

0
assets/scss/argon-design-system/content.scss Normal file
View File

195
assets/scss/argon-design-system/custom-forms.scss Normal file
View File

@@ -0,0 +1,195 @@
.custom-control-label {
// Background-color and (when enabled) gradient
&::before {
border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
@if $enable-transitions {
transition: all .3s ease;;
}
}
span {
position: relative;
top: 2px;
}
}
.custom-control {
padding-left: 1.7rem !important;
}
.custom-control-label {
margin-bottom: 0;
&:before,
&:after {
left: -1.75rem;
}
}
.custom-control-input {
&:active~.custom-control-label::before {
border-color: $custom-control-indicator-active-border-color;
}
}
// Alternative custom control
.custom-control-alternative {
.custom-control-label {
// Background-color and (when enabled) gradient
&::before {
border: 0;
box-shadow: $input-alternative-box-shadow;
}
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
box-shadow: $input-focus-alternative-box-shadow;
}
}
}
&:active~.custom-control-label::before,
&:focus~.custom-control-label::before {
box-shadow: $input-alternative-box-shadow;
}
}
}
// Checkboxes
.custom-checkbox {
.custom-control-input~.custom-control-label {
cursor: pointer;
font-size: $font-size-sm;
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked;
}
}
}
&:disabled {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-disabled-bg;
}
}
&:checked {
&::before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
}
}
// Radios
.custom-radio {
.custom-control-input~.custom-control-label {
cursor: pointer;
font-size: $font-size-sm;
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
background-image: $custom-radio-indicator-icon-checked;
}
}
}
&:disabled {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-disabled-bg;
}
}
&:checked {
&::before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
}
}
// Toggles
.custom-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 1.5rem;
input {
display: none;
&:checked {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
&:before {
background: $custom-toggle-checked-bg;
transform: translateX(1.625rem);
}
}
}
&:disabled {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
}
&:checked {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
&:before {
background-color: lighten($custom-control-indicator-checked-bg, 10%);
}
}
}
}
}
}
.custom-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: $custom-control-indicator-border-width solid $input-border-color;
border-radius: 34px !important;
background-color: transparent;
&:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
border-radius: 50% !important;
background-color: $custom-toggle-slider-bg;
transition: $input-transition;
}
}

9
assets/scss/argon-design-system/docs.scss Normal file
View File

@@ -0,0 +1,9 @@
@import "docs/variables";
@import "docs/clipboard-js";
@import "docs/component-examples";
@import "docs/content";
@import "docs/footer";
@import "docs/nav";
@import "docs/prism";
@import "docs/sidebar";

40
assets/scss/argon-design-system/docs/clipboard-js.scss Normal file
View File

@@ -0,0 +1,40 @@
// clipboard.js
//
// JS-based `Copy` buttons for code snippets.
.ct-clipboard {
position: relative;
display: none;
float: right;
+ .highlight {
margin-top: 0;
}
}
.btn-clipboard {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 10;
display: block;
padding: .25rem .5rem;
font-size: 75%;
cursor: pointer;
background-color: transparent;
border: 0;
border-radius: .25rem;
color: #fff;
background-color: $ct-primary;
&:hover {
color: #fff;
background-color: darken($ct-primary, 10%);
}
}
@media (min-width: 768px) {
.ct-clipboard {
display: block;
}
}

516
assets/scss/argon-design-system/docs/component-examples.scss Normal file
View File

@@ -0,0 +1,516 @@
// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
//
// Grid examples
//
.ct-example-row {
.row {
> .col,
> [class^="col-"] {
span {
display: block;
padding: .75rem;
color: rgb(57, 63, 73);
background-color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
font-size: $font-size-sm;
border-radius: .25rem;
margin: 1rem 0;
}
}
}
.no-gutters {
> .col,
> [class^="col-"] {
span {
border-radius: 0;
}
}
}
.flex-items-top,
.flex-items-middle,
.flex-items-bottom {
min-height: 6rem;
background-color: rgba(255, 0, 0, .1);
}
}
.ct-example-row-flex-cols .row {
min-height: 10rem;
background-color: rgba(255, 0, 0, .1);
& + .row {
margin-top: 1rem;
}
}
.ct-highlight {
background-color: rgba($ct-primary, .15);
border: 1px solid rgba($ct-primary, .15);
}
// Grid mixins
.example-container {
width: 800px;
@include make-container();
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
//
// Container illustrations
//
.ct-example-container {
min-width: 16rem;
max-width: 25rem;
margin-right: auto;
margin-left: auto;
}
.ct-example-container-header {
height: 3rem;
margin-bottom: .5rem;
background-color: lighten($blue, 50%);
border-radius: .25rem;
}
.ct-example-container-sidebar {
float: right;
width: 4rem;
height: 8rem;
background-color: lighten($blue, 25%);
border-radius: .25rem;
}
.ct-example-container-body {
height: 8rem;
margin-right: 4.5rem;
background-color: lighten($ct-primary, 25%);
border-radius: .25rem;
}
.ct-example-container-fluid {
max-width: none;
}
//
// Docs examples
//
.ct-example {
position: relative;
margin: 1rem (-$grid-gutter-width / 2) 0;
@include clearfix();
@include media-breakpoint-up(sm) {
margin-right: 0;
margin-left: 0;
}
+ .highlight,
+ .clipboard + .highlight {
margin-top: 0;
}
+ p {
margin-top: 2rem;
}
.pos-f-t {
position: relative;
margin: -1rem;
@include media-breakpoint-up(sm) {
margin: -1.5rem;
}
}
.custom-file-input:lang(es) ~ .custom-file-label::after {
content: "Elegir";
}
> .form-control {
+ .form-control {
margin-top: .5rem;
}
}
> .nav + .nav,
> .alert + .alert,
> .navbar + .navbar,
> .progress + .progress,
> .progress + .btn,
.badge,
.btn {
margin-top: .5rem;
margin-bottom: .5rem;
}
.btn-group {
margin-top: .5rem;
margin-bottom: .5rem;
.btn {
margin: 0;
}
}
.alert {
margin: 0;
+ .alert {
margin-top: 1.25rem;
}
}
.badge {
margin-right: .5rem;
}
> .dropdown-menu:first-child {
position: static;
display: block;
}
> .form-group:last-child {
margin-bottom: 0;
}
> .close {
float: none;
}
}
// Typography
.ct-example-type {
.table {
.type-info {
color: #999;
vertical-align: middle;
}
td {
padding: 1rem 0;
border-color: #eee;
}
tr:first-child td {
border-top: 0;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0;
}
}
// Contextual background colors
.ct-example-bg-classes p {
padding: 1rem;
}
// Images
.ct-example > img {
+ img {
margin-left: .5rem;
}
}
// Buttons
.ct-example {
> .btn-group {
margin-top: .25rem;
margin-bottom: .25rem;
}
> .btn-toolbar + .btn-toolbar {
margin-top: .5rem;
}
}
// Forms
.ct-example-control-sizing select,
.ct-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: .5rem;
}
.ct-example-form .input-group {
margin-bottom: .5rem;
}
.ct-example > textarea.form-control {
resize: vertical;
}
// List groups
.ct-example > .list-group {
max-width: 400px;
}
// Navbars
.ct-example {
.fixed-top,
.sticky-top {
position: static;
margin: -1rem -1rem 1rem;
}
.fixed-bottom {
position: static;
margin: 1rem -1rem -1rem;
}
@include media-breakpoint-up(sm) {
.fixed-top,
.sticky-top {
margin: -1.5rem -1.5rem 1rem;
}
.fixed-bottom {
margin: 1rem -1.5rem -1.5rem;
}
}
}
// Pagination
.ct-example .pagination {
margin-top: .5rem;
margin-bottom: .5rem;
}
// Example modals
.modal {
z-index: 1072;
.tooltip,
.popover {
z-index: 1073;
}
}
.modal-backdrop {
z-index: 1071;
}
.ct-example-modal {
background-color: #fafafa;
.modal {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 1;
display: block;
}
.modal-dialog {
left: auto;
margin-right: auto;
margin-left: auto;
}
}
// Example tabbable tabs
.ct-example-tabs .nav-tabs {
margin-bottom: 1rem;
}
// Popovers
.ct-example-popover-static {
padding-bottom: 1.5rem;
background-color: #f9f9f9;
.popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 1.25rem;
}
}
// Tooltips
.tooltip-demo a {
white-space: nowrap;
}
.ct-example-tooltip-static .tooltip {
position: relative;
display: inline-block;
margin: 10px 20px;
opacity: 1;
}
// Scrollspy demo on fixed height div
.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}
.scrollspy-example-2 {
position: relative;
height: 350px;
overflow: auto;
}
.ct-example-border-utils {
[class^="border"] {
display: inline-block;
width: 5rem;
height: 5rem;
margin: .25rem;
background-color: #f5f5f5;
}
}
.ct-example-border-utils-0 {
[class^="border"] {
border: 1px solid $border-color;
}
}
//
// Code snippets
//
.highlight {
padding: 0;
margin-top: 1rem;
//margin-bottom: 3rem;
//background-color: $gray-100;
-ms-overflow-style: -ms-autohiding-scrollbar;
@include media-breakpoint-up(sm) {
padding: 0;
}
}
.ct-content .highlight {
margin-right: (-$grid-gutter-width / 2);
margin-left: (-$grid-gutter-width / 2);
@include media-breakpoint-up(sm) {
margin-right: 0;
margin-left: 0;
}
}
//
// Component-Code tabs
//
.ct-example {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid $gray-200;
.tab-content {
.tab-example-result {
background-color: #f5f7f9;
border: 1px solid #e6ecf1;
padding: 1.25rem;
border-radius: .25rem;
}
}
.nav-tabs-code {
margin-bottom: .375rem;
.nav-link {
font-size: .875rem;
&:active,
&.active {
color: $ct-primary;
}
}
}
}
// Icon examples
.icon-examples {
margin-top: 1rem;
}
.btn-icon-clipboard {
margin: 0px;
padding: 24px;
font-size: 16px;
font-weight: 400;
line-height: 1.25;
color: rgb(57, 63, 73);
background-color: rgb(248, 249, 250);
border-radius: 4px;
border: 0px none;
text-align: left;
font-family: inherit;
display: inline-block;
vertical-align: middle;
text-decoration: none;
-moz-appearance: none;
cursor: pointer;
width: 100%;
margin: .5rem 0;
&:hover {
background-color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
}
> div {
align-items: center;
display: flex;
}
i {
box-sizing: content-box;
color: rgb(57, 63, 73);
vertical-align: middle;
font-size: 1.5rem;
}
span {
display: inline-block;
font-size: .875rem;
line-height: 1.5;
color: rgb(57, 63, 73);
margin-left: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
}

374
assets/scss/argon-design-system/docs/content.scss Normal file
View File

@@ -0,0 +1,374 @@
.docs {
background: #FFF;
h6 {
font-size: 1rem;
font-weight: $font-weight-bold;
}
}
.ct-content {
order: 1;
>h2[id],
>h3[id],
>h4[id] {
pointer-events: none;
>div,
>a {
pointer-events: auto;
}
&::before {
display: block;
height: 6rem;
margin-top: -6rem;
visibility: hidden;
content: "";
}
}
>table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
@include media-breakpoint-down(md) {
display: block;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
&.table-bordered {
border: 0;
}
} // Cells
>thead,
>tbody,
>tfoot {
>tr {
>th,
>td {
padding: $table-cell-padding;
vertical-align: top;
border: 1px solid $table-border-color;
>p:last-child {
margin-bottom: 0;
}
}
}
} // Prevent breaking of code (e.g., Grunt tasks list)
td:first-child>code {
white-space: nowrap;
}
}
}
//
// Docs sections
//
.ct-content {
>h2:not(:first-child) {
margin-top: 3rem;
font-size: 1.5rem;
font-weight: $font-weight-bold;
}
>h3 {
margin-top: 2.5rem;
font-size: 1.25rem;
font-weight: $font-weight-bold;
}
>ul li,
>ol li {
margin-bottom: .25rem;
}
@include media-breakpoint-up(lg) {
>ul,
>ol,
>p {
max-width: 80%;
}
}
}
.ct-page-title {
padding-left: 1.25rem;
border-left: 2px solid $ct-primary;
margin-bottom: 1.5rem;
}
.ct-title {
margin-top: 1rem;
margin-bottom: .5rem;
font-weight: 300;
@include media-breakpoint-up(sm) {
font-size: 1.5rem;
font-weight: $font-weight-bold;
}
}
.ct-lead {
color: rgb(59, 69, 78);
font-weight: 500;
@include media-breakpoint-up(sm) {
max-width: 80%;
margin-bottom: 1rem;
font-size: .875rem;
}
}
.ct-text-purple {
color: $ct-primary;
}
.ct-text-purple-bright {
color: $ct-primary-bright;
}
// Docs code example tabs
.ct-tabs-example {
.nav-link i {
margin-right: 5px;
}
}
// Color swatches
.color-swatch {
margin: 1rem 0;
border-radius: .25rem;
background-color: #F4F5F7;
}
.color-swatch:after {
content: " ";
display: table;
clear: both;
}
.color-swatch-header {
position: relative;
height: 0;
padding-bottom: 50%;
border-radius: .25rem .25rem 0 0;
border: 1px solid transparent;
}
.color-swatch-header.is-light {
border-color: #C1C7D0;
}
.color-swatch-header .pass-fail {
position: absolute;
width: 100%;
bottom: 0;
}
.color-swatch-header .pass-fail-item-wrap {
position: relative;
float: left;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.color-swatch-header .pass-fail-item-group {
display: inline-block;
padding: 0 5px;
}
.color-swatch-header .pass-fail-item {
float: left;
display: inline-block;
text-align: center;
padding: 2px;
}
.color-swatch-header .pass-fail-item.white .example {
color: #fff;
}
.color-swatch-header .pass-fail-item.small .example {
font-size: 10px;
}
.color-swatch-header .pass-fail-item .lozenge {
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
background: #000;
color: #fff;
padding: 2px 4px;
line-height: 10px;
border-radius: 4px;
letter-spacing: 0.05em;
}
.color-swatch-body {
position: relative;
left: 50%;
float: left;
padding: 10px 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.color-swatch-body .prop-item-wrap {
float: left;
padding: 0 15px;
min-width: 65px;
}
.color-swatch-body .prop-item {
padding: 15px 0;
}
.color-swatch-body .prop-item .label {
font-size: 11px;
color: #62748C;
text-transform: uppercase;
line-height: 16px;
}
.color-swatch-body .prop-item .value {
font-size: 14px;
}
.table-colors {
font-weight: 600;
font-size: 16px;
width: 100%;
}
.table-colors td,
.table-colors:first-child td,
.table-colors td:first-child,
.table-colors:first-child td:first-child,
.table-colors td:last-child,
.table-colors:first-child td:last-child {
background: $ct-primary-light;
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding: 10px;
}
.table-colors tr:last-child td,
.table-colors:first-child tr:last-child td {
border-bottom: none;
}
.table-colors td:nth-child(1),
.table-colors:first-child td:nth-child(1) {
line-height: 40px;
}
.table-colors .swatch,
.table-colors:first-child .swatch {
float: left;
height: 40px;
width: 40px;
margin-right: 20px;
display: inline-block;
border-radius: 4px;
border: 1px solid transparent;
}
.table-colors .swatch.is-light,
.table-colors:first-child .swatch.is-light {
border-color: #C1C7D0;
}
.table-colors .lozenge,
.table-colors:first-child .lozenge {
float: left;
margin: 5px 10px 0 0;
font-size: 10px;
display: inline-block;
text-transform: uppercase;
font-weight: 600;
background: #97A0AF;
color: #042A53;
padding: 2px 4px;
line-height: 10px;
border-radius: 4px;
letter-spacing: 0.05em;
}
#tags-component.tab-pane {
.choices__inner {
height: 60px;
}
}
.highlight pre {
overflow: auto;
margin: 0;
padding: 1.25rem;
font-family: Consolas,Menlo,Monaco,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L','Courier New',Courier,monospace;
font-size: 14px;
line-height: 1.375;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
hyphens: none;
color: #5e6687;
border-radius: .25rem;
background: #f5f7ff;
direction: ltr;
-ms-hyphens: none;
code {
font-size: 87.5%;
word-break: break-word;
color: #5e6687;
}
pre code {
font-size: inherit;
word-break: normal;
color: inherit;
}
code, kbd, pre, samp {
font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
font-size: 1em;
}
.nt {
color: #3d8fd1;
}
.na {
color: #c76b29;
}
.s,
.token.control,
.token.directive,
.token.keyword,
.token.unit {
color: #ac9739;
}
.token.punctuation {
color: #5e6687;
}
}
.btn-clipboard {
top: 3.5rem;
}
.offline-doc .page-header{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

39
assets/scss/argon-design-system/docs/footer.scss Normal file
View File

@@ -0,0 +1,39 @@
//
// Footer
//
.ct-footer {
font-size: 85%;
text-align: center;
background-color: #f7f7f7;
a {
font-weight: 500;
color: $gray-700;
&:hover,
&:focus {
color: $link-color;
}
}
p {
margin-bottom: 0;
}
@include media-breakpoint-up(sm) {
text-align: left;
}
}
.ct-footer-links {
padding-left: 0;
margin-bottom: 1rem;
li {
display: inline-block;
+li {
margin-left: 1rem;
}
}
}

110
assets/scss/argon-design-system/docs/nav.scss Normal file
View File

@@ -0,0 +1,110 @@
//
// Main navbar
//
.ct-navbar {
background-color: $ct-primary;
box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
padding-top: .5rem;
padding-bottom: .5rem;
@include media-breakpoint-down(md) {
padding-right: .5rem;
padding-left: .5rem;
.navbar-nav-scroll {
max-width: 100%;
height: 2.5rem;
margin-top: .25rem;
overflow: hidden;
font-size: .875rem;
.navbar-nav {
padding-bottom: 2rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
}
@include media-breakpoint-up(md) {
@supports (position: sticky) {
position: sticky;
top: 0;
z-index: 1071; // over everything in bootstrap
}
}
.navbar-nav {
.nav-link {
padding-right: .5rem;
padding-left: .5rem;
color: $ct-primary-light !important;
&.active,
&:hover {
color: #fff !important;
background-color: transparent !important;
}
&.active {
font-weight: 500;
}
}
}
.navbar-nav-svg {
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: text-top;
}
.dropdown-menu {
font-size: .875rem;
}
.dropdown-item.active {
font-weight: 500;
color: $gray-900;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: .4rem .87rem;
background-size: .75rem .75rem;
padding-left: 25px;
}
}
// Github corner
.github-corner {
position: fixed;
right: 0;
z-index: 1080;
&:hover {
.octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
svg {
fill: $white;
color: $ct-primary;
}
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}

176
assets/scss/argon-design-system/docs/prism.scss Normal file
View File

@@ -0,0 +1,176 @@
code[class*="language-"],
pre[class*="language-"] {
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
font-size: 14px;
line-height: 1.375;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: #f5f7ff;
color: #5e6687;
border-radius: .25rem;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #dfe2f1;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #dfe2f1;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1.25rem;
margin: 0;
overflow: auto;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #898ea4;
}
.token.punctuation {
color: #5e6687;
}
.token.namespace {
opacity: .7;
}
.token.operator,
.token.boolean,
.token.number {
color: #c76b29;
}
.token.property {
color: #c08b30;
}
.token.tag {
color: #3d8fd1;
}
.token.string {
color: #22a2c9;
}
.token.selector {
color: #6679cc;
}
.token.attr-name {
color: #c76b29;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #22a2c9;
}
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit {
color: #ac9739;
}
.token.statement,
.token.regex,
.token.atrule {
color: #22a2c9;
}
.token.placeholder,
.token.variable {
color: #3d8fd1;
}
.token.deleted {
text-decoration: line-through;
}
.token.inserted {
border-bottom: 1px dotted #202746;
text-decoration: none;
}
.token.italic {
font-style: italic;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.important {
color: #c94922;
}
.token.entity {
cursor: help;
}
pre>code.highlight {
outline: 0.4em solid #c94922;
outline-offset: .4em;
}
/* overrides color-values for the Line Numbers plugin
* http://prismjs.com/plugins/line-numbers/
*/
.line-numbers .line-numbers-rows {
border-right-color: #dfe2f1;
}
.line-numbers-rows>span:before {
color: #979db4;
}
/* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/
.line-highlight {
background: rgba(107, 115, 148, 0.2);
background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
}

213
assets/scss/argon-design-system/docs/sidebar.scss Normal file
View File

@@ -0,0 +1,213 @@
// stylelint-disable declaration-no-important
//
// Right side table of contents
//
.ct-toc {
@supports (position: sticky) {
position: sticky;
top: 4rem;
height: calc(100vh - 4rem);
overflow-y: auto;
}
order: 2;
padding-top: 2rem;
padding-bottom: 1.5rem;
font-size: .875rem;
}
.section-nav {
padding-left: 0;
border-left: 1px solid #eee;
ul {
padding-left: 1rem;
ul {
display: none;
}
}
}
.toc-entry {
display: block;
font-size: 1rem;
a {
display: block;
padding: .125rem 1.5rem;
color: #99979c;
font-size: 90%;
&:hover {
color: $blue;
text-decoration: none;
}
}
}
//
// Left side navigation
//
.ct-sidebar {
order: 0; // background-color: #f5f2f9;
border-bottom: 1px solid $ct-sidebar-border-color;
background-color: $ct-sidebar-bg;
@include media-breakpoint-up(md) {
@supports (position: sticky) {
position: sticky;
top: 4rem;
z-index: 1000;
height: calc(100vh - 4rem);
}
border-right: 1px solid $ct-sidebar-border-color;
}
@include media-breakpoint-up(xl) {
flex: 0 1 320px;
}
}
.ct-links {
padding-top: 2rem;
padding-bottom: 1rem;
margin-right: -15px;
margin-left: -15px;
@include media-breakpoint-up(md) {
@supports (position: sticky) {
max-height: calc(100vh - 5rem);
overflow-y: auto;
}
} // Override collapse behaviors
@include media-breakpoint-up(md) {
display: block !important;
}
}
.ct-search {
position: relative; // To contain the Algolia search
padding: 1rem 15px;
margin-right: -15px;
margin-left: -15px;
border-bottom: 1px solid rgba(0, 0, 0, .05);
.form-control:focus {
border-color: $ct-primary-bright;
box-shadow: 0 0 0 3px rgba($ct-primary-bright, .25);
}
}
.ct-search-docs-toggle {
line-height: 1;
color: $gray-900;
}
.ct-sidenav {
display: none;
}
.ct-toc-link {
display: block;
padding: .25rem 1.5rem;
font-weight: 600;
font-size: .875rem;
color: #0d2b3e;
&:hover {
color: rgba(0, 0, 0, .85);
text-decoration: none;
}
}
.ct-toc-item {
&.active {
margin-bottom: 1rem;
&:not(:first-child) {
margin-top: 1rem;
}
>.ct-toc-link {
color: rgba(0, 0, 0, .85);
&:hover {
background-color: transparent;
}
}
>.ct-sidenav {
display: block;
}
}
}
// All levels of nav
.ct-sidebar .nav>li>a {
display: block;
padding: .25rem 1.5rem;
font-size: 84%;
color: #4c555a;
}
.ct-sidebar .nav>li>a:hover {
color: rgba(0, 0, 0, .85);
text-decoration: none;
background-color: transparent;
}
.ct-sidebar .nav>.active>a {
font-weight: 500;
color: #0099e5;
background-color: transparent;
padding-left: 2rem;
position: relative;
&:before {
content: '';
position: absolute;
height: 16px;
width: 2px;
background-color: #0099e5;
top: 50%;
left: 1.5rem;
transform: translateY(-50%);
}
}
.ct-sidebar .nav>.active:hover>a {
color: #0099e5
}
.scrollbar-inner {
height: 100%;
&:not(:hover) .scroll-element {
opacity: 0;
}
.scroll-element {
transition: opacity 300ms;
margin-right: 2px;
.scroll-bar,
.scroll-element_track {
transition: background-color 300ms;
}
.scroll-element_track {
background-color: transparent;
}
}
.scroll-element.scroll-y {
width: 3px;
right: 0;
}
.scroll-element.scroll-x {
height: 3px;
bottom: 0;
}
}

13
assets/scss/argon-design-system/docs/variables.scss Normal file
View File

@@ -0,0 +1,13 @@
// Local docs variables
$ct-primary: theme-color("primary") !default;
$ct-primary-bright: lighten(saturate($ct-primary, 5%), 15%) !default;
$ct-primary-light: rgba(255, 255, 255, .9) !default;
$ct-dark: #2a2730 !default;
$ct-download: #ffe484 !default;
$ct-info: #5bc0de !default;
$ct-warning: #f0ad4e !default;
$ct-danger: #d9534f !default;
$ct-sidebar-bg: #f5f7f9;
$ct-sidebar-border-color: #e6ecf1;

69
assets/scss/argon-design-system/dropdown.scss Normal file
View File

@@ -0,0 +1,69 @@
.dropdown,
.dropup,
.dropright,
.dropleft {
display: inline-block;
}
.dropdown-menu {
min-width: 12rem;
.dropdown-item {
padding: 1rem;
font-size: $font-size-sm;
> i,
> svg {
margin-right: 1rem;
font-size: 1rem;
vertical-align: -17%;
}
}
}
.dropdown-header {
padding-left: 1rem;
padding-right: 1rem;
color: $gray-100;
font-size: .625rem;
text-transform: uppercase;
font-weight: 700;
}
// Dropdown elements
.dropdown-menu {
a.media {
> div {
&:first-child {
line-height: 1;
}
}
p {
color: $gray-600;
}
&:hover {
.heading, p {
color: theme-color("default") !important;
}
}
}
}
// Dropown: Sizes
.dropdown-menu-sm {
min-width: 100px;
border: $border-radius-lg;
}
.dropdown-menu-lg {
min-width: 260px;
border-radius: $border-radius-lg;
}
.dropdown-menu-xl {
min-width: 450px;
border-radius: $border-radius-lg;
}

89
assets/scss/argon-design-system/footer.scss Normal file
View File

@@ -0,0 +1,89 @@
.footer {
background: $secondary;
padding: 1.5rem 0;
.col-footer {
.heading {
color: $footer-heading-color;
letter-spacing: 0;
font-size: $footer-heading-font-size;
text-transform: uppercase;
font-weight: $font-weight-bold;
margin-bottom: 1rem;
}
}
.nav .nav-item .nav-link,
.footer-link {
color: $footer-link-color !important;
&:hover {
color: $footer-link-hover-color !important;
}
}
.list-unstyled li a {
display: inline-block;
padding: .125rem 0;
color: $footer-link-color;
font-size: $footer-link-font-size;
&:hover {
color: $footer-link-hover-color;
}
}
.copyright {
font-size: $font-size-sm;
}
.dropdown {
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus {
box-shadow: none;
}
}
}
.footer-dark {
.col-footer .heading {
color: $white;
}
}
.footer.has-cards {
overflow: hidden;
padding-top: 500px;
margin-top: -420px;
position: relative;
background: transparent;
pointer-events: none;
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 600px;
height: 2000px;
background: theme-color("secondary");
transform: skew(0,-8deg);
}
.container {
pointer-events: auto;
position: relative;
}
}
.nav-footer {
.nav-link {
font-size: $font-size-sm;
}
.nav-item:last-child {
.nav-link {
padding-right: 0;
}
}
}

141
assets/scss/argon-design-system/forms.scss Normal file
View File

@@ -0,0 +1,141 @@
/* Form controls */
label {
font-size: $font-size-sm;
}
.form-control {
font-size: $input-btn-font-size;
transition: $transition-base;
&:focus {
&::placeholder {
color: $input-focus-placeholder-color;
}
}
&.is-valid,
&.is-invalid {
background-image: none;
}
}
/* Textareas */
textarea[resize="none"] {
resize: none!important;
}
textarea[resize="both"] {
resize: both!important;
}
textarea[resize="vertical"] {
resize: vertical!important;
}
textarea[resize="horizontal"] {
resize: horizontal!important;
}
/* Alternative styles */
.form-control-muted {
background-color: $input-muted-bg;
border-color: $input-muted-bg;
box-shadow: none;
&:focus {
background-color: $input-muted-bg;
}
}
.form-control-alternative {
box-shadow: $input-alternative-box-shadow;
border: 0;
transition: box-shadow .15s ease;
&:focus {
box-shadow: $input-focus-alternative-box-shadow;
}
}
// Sizes
.form-control-lg {
font-size: $font-size-base;
}
// Validation
.has-success,
.has-danger {
position: relative;
&:after {
width: 19px;
height: 19px;
line-height: 19px;
text-align: center;
font-family: 'NucleoIcons';
display: inline-block;
position: absolute;
right: 15px;
top: 2px;
transform: translateY(50%);
border-radius: 50%;
font-size: 9px;
opacity: 1;
}
.form-control-alternative {
&.is-valid,
&.is-invalid {
&:focus {
box-shadow: $input-focus-alternative-box-shadow !important;
}
}
}
}
.has-success {
&:after {
content: "\ea26";
color: daken($form-feedback-valid-color, 18%);
background-color: $form-feedback-valid-bg;
}
.form-control {
background-color: $input-focus-bg;
&:focus {
border-color: $input-focus-border-color;
}
// Placeholder
&::placeholder {
color: $form-feedback-valid-color;
}
}
}
.has-danger {
&:after {
content: "\ea53";
color: daken($form-feedback-invalid-color, 18%);
background-color: $form-feedback-invalid-bg;
}
.form-control {
background-color: $input-focus-bg;
&:focus {
border-color: $input-focus-border-color;
}
// Placeholder
&::placeholder {
color: $form-feedback-invalid-color;
}
}
}

23
assets/scss/argon-design-system/functions.scss Normal file
View File

@@ -0,0 +1,23 @@
// Retrieve color Sass maps
@function section-color($key: "primary") {
@return map-get($section-colors, $key);
}
// Lines colors
@function shapes-primary-color($key: "step-1-gradient-bg") {
@return map-get($shapes-primary-colors, $key);
}
@function shapes-default-color($key: "step-1-gradient-bg") {
@return map-get($shapes-default-colors, $key);
}
@function lines-light-color($key: "step-1-gradient-bg") {
@return map-get($shapes-light-colors, $key);
}
@function shapes-dark-color($key: "step-1-gradient-bg") {
@return map-get($shapes-dark-colors, $key);
}

181
assets/scss/argon-design-system/global.scss Normal file
View File

@@ -0,0 +1,181 @@
// Nucleo icons
.section-nucleo-icons .icons-container {
position: relative;
max-width: 100%;
height: 360px;
margin: 0 auto;
z-index: 1;
}
.section-nucleo-icons {
--icon-size: 5rem;
--icon-sm-size: 3.75rem;
--gutter: 7rem;
.icons-container {
i {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: $white;
z-index: 1;
transform: translate(-50%, -50%);
@include box-shadow($box-shadow);
transition: all .2s cubic-bezier(.25,.65,.9,.75);
&.icon {
width: var(--icon-size);
height: var(--icon-size);
font-size: 1.7em;
}
&.icon-sm {
width: var(--icon-sm-size);
height: var(--icon-sm-size);
font-size: 1.5em;
}
&:nth-child(1) {
font-size: 42px;
color: theme-color("warning");
z-index: 2;
}
}
&:not(.on-screen) {
i {
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
&:not(:nth-child(1)) {
opacity: 0;
}
}
}
&.on-screen {
i {
opacity: 1;
&:nth-child(1) {
left: 50%;
top: 50%;
font-size: 42px;
color: theme-color("warning");
}
&:nth-child(2) {
left: calc(50% + (var(--gutter) * 1.7));
top: 50%;
}
&:nth-child(3) {
left: calc(50% + var(--gutter));
top: calc(50% + var(--gutter));
}
&:nth-child(4) {
left: calc(50% + var(--gutter));
top: calc(50% - var(--gutter));
}
&:nth-child(5) {
left: calc(50% + (var(--gutter) * 3));
top: 50%;
}
&:nth-child(6) {
left: calc(50% + (var(--gutter) * 2.7));
top: calc(50% + (var(--gutter) * 1.5));
}
&:nth-child(7) {
left: calc(50% + (var(--gutter) * 2.7));
top: calc(50% - (var(--gutter) * 1.5));
}
&:nth-child(8) {
left: calc(50% - (var(--gutter) * 1.7));
top: 50%;
}
&:nth-child(9) {
left: calc(50% - var(--gutter));
top: calc(50% + var(--gutter));
}
&:nth-child(10) {
left: calc(50% - var(--gutter));
top: calc(50% - var(--gutter));
}
&:nth-child(11) {
left: calc(50% - (var(--gutter) * 4));
top: 50%;
}
&:nth-child(12) {
left: calc(50% - (var(--gutter) * 2.7));
top: calc(50% + (var(--gutter) * 1.5));
}
&:nth-child(13) {
left: calc(50% - (var(--gutter) * 2.7));
top: calc(50% - (var(--gutter) * 1.5));
}
}
}
}
@include media-breakpoint-down(md) {
overflow: hidden;
}
}
// Blurable sections
.blur--hover {
position: relative;
.blur-item {
transition: 1s cubic-bezier(.19,1,.22,1);
will-change: transform;
filter: blur(0);
opacity: 1;
}
.blur-hidden {
position: absolute;
top: calc(50% + 7px);
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: $transition-base;
z-index: 100;
}
&:hover {
.blur-item {
opacity: .8;
filter: blur(10px);
transform: scale(.95);
z-index: 1;
}
.blur-hidden {
opacity: 1;
top: 50%;
}
}
}
.info .info-title{
margin: 25px 0 15px;
font-weight: 600;
}

5
assets/scss/argon-design-system/grid.scss Normal file
View File

@@ -0,0 +1,5 @@
@include media-breakpoint-up(lg) {
.container-lg {
max-width: 1160px;
}
}

107
assets/scss/argon-design-system/icons.scss Normal file
View File

@@ -0,0 +1,107 @@
.icon {
width: $icon-size;
height: $icon-size;
i, svg {
font-size: $icon-size - .75;
}
}
.icon + .icon-text {
padding-left: 1rem;
width: calc(100% - #{$icon-size} - 1);
}
.icon-xl {
width: $icon-size-xl;
height: $icon-size-xl;
i, svg {
font-size: $icon-size-xl - .75;
}
}
.icon-xl + .icon-text {
width: calc(100% - $icon-size-xl - 1);
}
.icon-lg {
width: $icon-size-lg;
height: $icon-size-lg;
i, svg {
font-size: $icon-size-lg - .75;
}
}
.icon-lg + .icon-text {
width: calc(100% - $icon-size-lg - 1);
}
.icon-sm {
width: $icon-size-sm;
height: $icon-size-sm;
i, svg {
font-size: $icon-size-sm - .75;
}
}
.icon-sm + .icon-text {
width: calc(100% - $icon-size-sm - 1);
}
// Extra Small icon
.icon-xs {
width: $icon-size-xs;
height: $icon-size-xs;
i, svg {
font-size: $icon-size-xs - .75 !important;
}
+ .icon-text {
width: calc(100% - $icon-size-xs - 1);
}
}
// Icons included in shapes
.icon-shape {
padding: 12px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
i, svg {
font-size: 1.25rem;
}
&.icon-lg {
i, svg {
font-size: 1.625rem;
}
}
&.icon-sm {
i, svg {
font-size: .875rem;
}
}
svg {
width: 30px;
height: 30px;
}
}
@each $color, $value in $theme-colors {
.icon-shape-#{$color} {
@include icon-shape-variant(theme-color($color));
}
}

70
assets/scss/argon-design-system/input-group.scss Normal file
View File

@@ -0,0 +1,70 @@
.input-group {
box-shadow: $input-box-shadow;
border-radius: $input-border-radius;
transition: $transition-base;
.form-control {
box-shadow: none;
&:not(:first-child) {
border-left: 0;
padding-left: 0;
}
&:not(:last-child) {
border-right: 0;
padding-right: 0;
}
&:focus {
box-shadow: none;
}
}
.input-group-prepend {
margin-right: 0;
.input-group-text {
border-right: none;
}
}
}
.input-group-text {
transition: $transition-base;
}
.input-group-alternative {
box-shadow: $input-alternative-box-shadow;
border: 0;
transition: box-shadow .15s ease;
.form-control,
.input-group-text {
border: 0;
box-shadow: none;
}
}
.focused {
.input-group-alternative {
box-shadow: $input-focus-alternative-box-shadow !important;
}
}
// .focus class is applied dinamycally from theme.js
.focused {
.input-group {
box-shadow: $input-focus-box-shadow;
}
.input-group-text {
color: $input-group-addon-focus-color;
background-color: $input-group-addon-focus-bg;
border-color: $primary;
}
.form-control {
border-color: $primary;
}
}

30
assets/scss/argon-design-system/kit-free.scss Normal file
View File

@@ -0,0 +1,30 @@
// @import "accordion.scss";
// @import "alerts.scss";
// @import "avatars.scss";
// @import "badge.scss";
// @import "buttons.scss";
// @import "card.scss";
// @import "carousel.scss";
// @import "close.scss";
// @import "custom-forms.scss";
// @import "dropdown.scss";
// @import "footer.scss";
// @import "forms.scss";
// @import "grid.scss";
// @import "icons.scss";
// @import "input-group.scss";
// @import "list-group.scss";
// @import "modal.scss";
// @import "nav.scss";
// @import "navbar.scss";
// @import "pagination.scss";
// @import "popover.scss";
// @import "progress.scss";
// @import "section.scss";
// @import "type.scss";
//
// // Vendor
//
// @import "vendor/bootstrap-datepicker.scss";
// @import "vendor/headroom.scss";
// @import "vendor/nouislider.scss";

39
assets/scss/argon-design-system/list-group.scss Normal file
View File

@@ -0,0 +1,39 @@
// Space list items
.list-group-space {
.list-group-item {
margin-bottom: 1.5rem;
@include border-radius($list-group-border-radius);
}
}
// List group components
.list-group-img {
width: 3rem;
height: 3rem;
border-radius: 50%;
vertical-align: top;
margin: -.1rem 1.2rem 0 -.2rem;
}
.list-group-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
}
.list-group-content > p {
color: $gray-500;
line-height: 1.5;
margin: .2rem 0 0;
}
.list-group-heading {
font-size: $font-size-base;
color: $gray-800;
}
.list-group-heading > small {
float: right;
color: $gray-500;
font-weight: 500;
}

8
assets/scss/argon-design-system/mixins.scss Normal file
View File

@@ -0,0 +1,8 @@
@import "mixins/alert";
@import "mixins/badge";
@import "mixins/background-variant";
@import "mixins/buttons";
@import "mixins/forms";
@import "mixins/icon";
@import "mixins/modals";
@import "mixins/popover";

13
assets/scss/argon-design-system/mixins/alert.scss Normal file
View File

@@ -0,0 +1,13 @@
@mixin alert-variant($background, $border, $color) {
color: color-yiq($background);
@include gradient-bg($background);
border-color: $border;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($color, 10%);
}
}

30
assets/scss/argon-design-system/mixins/background-variant.scss Normal file
View File

@@ -0,0 +1,30 @@
// Contextual backgrounds
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color !important;
}
a#{$parent},
button#{$parent} {
@include hover-focus {
background-color: darken($color, 10%) !important;
}
}
}
@mixin bg-gradient-variant($parent, $color) {
#{$parent} {
background: linear-gradient(35deg, $color 0, adjust-hue($color, 25%) 100%) !important;
}
}
@mixin bg-translucent-variant($parent, $color) {
#{$parent} {
background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
}
a#{$parent},
button#{$parent} {
@include hover-focus {
background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
}
}
}

12
assets/scss/argon-design-system/mixins/badge.scss Normal file
View File

@@ -0,0 +1,12 @@
@mixin badge-variant($bg) {
color: saturate(darken($bg, 10%), 10);
background-color: transparentize(lighten($bg, 25%), .5);
&[href] {
@include hover-focus {
color: color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 10%);
}
}
}

106
assets/scss/argon-design-system/mixins/buttons.scss Normal file
View File

@@ -0,0 +1,106 @@
@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
color: color-yiq($background);
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
}
&:focus,
&.focus {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
}
@else {
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
}
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
color: color-yiq($background);
background-color: $background;
border-color: $border;
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show>&.dropdown-toggle {
color: color-yiq($active-background);
background-color: $active-background;
@if $enable-gradients {
background-image: none; // Remove the gradient for the pressed/active state
}
border-color: $active-border;
&:focus {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
}
@else {
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
}
}
}
}
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
color: $color;
background-color: transparent;
background-image: none;
border-color: $color;
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
&:focus,
&.focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
&.disabled,
&:disabled {
color: $color;
background-color: transparent;
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show>&.dropdown-toggle {
color: color-yiq($active-background);
background-color: $active-background;
border-color: $active-border;
&:focus {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows and $btn-active-box-shadow !=none {
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
}
@else {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
}
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height; // Manually declare to provide an override to the browser default
@if $enable-rounded {
border-radius: $border-radius;
}
@else {
border-radius: 0;
}
}

128
assets/scss/argon-design-system/mixins/forms.scss Normal file
View File

@@ -0,0 +1,128 @@
@mixin form-control-focus() {
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
box-shadow: $input-focus-box-shadow;
}
}
}
@mixin form-validation-state($state, $color) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
font-size: $form-feedback-font-size;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: .5rem;
margin-top: .1rem;
font-size: .875rem;
line-height: 1;
color: #fff;
background-color: rgba($color, .8);
border-radius: .2rem;
}
.form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
&:focus {
border-color: $color;
//box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
}
.form-check-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .form-check-label {
color: $color;
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
}
.custom-control-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-label {
color: $color;
&::before {
background-color: lighten($color, 25%);
border-color: lighten($color, 25%);
}
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:checked {
~ .custom-control-label::before {
@include gradient-bg(lighten($color, 10%));
border-color: lighten($color, 25%);
}
}
&:focus {
~ .custom-control-label::before {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
}
// custom file
.custom-file-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-file-label {
border-color: $color;
&::before { border-color: inherit; }
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:focus {
~ .custom-file-label {
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
}
}

4
assets/scss/argon-design-system/mixins/icon.scss Normal file
View File

@@ -0,0 +1,4 @@
@mixin icon-shape-variant($color) {
color: saturate(darken($color, 10%), 10);
background-color: transparentize(lighten($color, 10%), .5);
}

23
assets/scss/argon-design-system/mixins/modals.scss Normal file
View File

@@ -0,0 +1,23 @@
@mixin modal-variant($background) {
.modal-title {
color: color-yiq($background);
}
.modal-header,
.modal-footer {
border-color: rgba(color-yiq($background), .075);
}
.modal-content {
background-color: $background;
color: color-yiq($background);
.heading {
color: color-yiq($background);
}
}
.close {
&>span:not(.sr-only) {
color: $white;
}
}
}

36
assets/scss/argon-design-system/mixins/popover.scss Normal file
View File

@@ -0,0 +1,36 @@
@mixin popover-variant($background) {
background-color: $background;
.popover-header {
background-color: $background;
color: color-yiq($background);
}
.popover-body {
color: color-yiq($background);
}
.popover-header{
border-color: rgba(color-yiq($background), .2);
}
&.bs-popover-top {
.arrow::after {
border-top-color: $background;
}
}
&.bs-popover-right {
.arrow::after {
border-right-color: $background;
}
}
&.bs-popover-bottom {
.arrow::after {
border-bottom-color: $background;
}
}
&.bs-popover-left {
.arrow::after {
border-left-color: $background;
}
}
}

26
assets/scss/argon-design-system/modal.scss Normal file
View File

@@ -0,0 +1,26 @@
.modal-content {
border: 0;
@if $enable-rounded {
border-radius: $modal-content-border-radius;
} @else {
border-radius: 0;
}
}
.modal-fluid {
.modal-dialog {
margin-top: 0;
margin-bottom: 0;
}
.modal-content {
border-radius: 0;
}
}
@each $color, $value in $theme-colors {
.modal-#{$color} {
@include modal-variant($value);
}
}

85
assets/scss/argon-design-system/nav.scss Normal file
View File

@@ -0,0 +1,85 @@
.nav-link {
color: $nav-link-color;
&:hover,
&.active {
color: theme-color("primary");
}
i:not(.fa) {
position: relative;
top: 2px;
}
}
// Pills
.nav-pills {
.nav-item:not(:last-child) {
padding-right: $nav-pills-space-x;
}
.nav-link {
padding: $nav-pills-padding-y $nav-pills-padding-x;
color: $nav-pills-link-color;
font-weight: 500;
font-size: $font-size-sm;
box-shadow: $nav-pills-box-shadow;
background-color: $nav-pills-bg;
transition: $transition-base;
&:hover {
color: $nav-pills-link-hover-color;
}
}
.nav-link.active,
.show > .nav-link {
color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg;
}
@include media-breakpoint-down(xs) {
.nav-item {
margin-bottom: $spacer;
}
}
}
@include media-breakpoint-down(sm) {
.nav-pills:not(.nav-pills-circle) {
.nav-item {
padding-right: 0;
}
}
}
// Nav pills circle
.nav-pills-circle {
.nav-link {
text-align: center;
height: 60px;
width: 60px;
padding: 0;
line-height: 60px;
border-radius: 50%;
}
.nav-link-icon {
i, svg {
font-size: 1rem;
}
}
}
// Nav wrapper
.nav-wrapper {
padding: 1rem 0;
@include border-top-radius($card-border-radius);
+ .card {
@include border-top-radius(0);
@include border-bottom-radius($card-border-radius);
}
}

401
assets/scss/argon-design-system/navbar.scss Normal file
View File

@@ -0,0 +1,401 @@
.navbar {
&.navbar-absolute {
position: absolute;
z-index: 1050;
width: 100%;
}
&.navbar-main {
z-index: 3;
}
}
.navbar-nav {
.nav-link {
font-size: $navbar-nav-link-font-size;
font-family: $navbar-nav-link-font-family;
font-weight: $navbar-nav-link-font-weight;
text-transform: $navbar-nav-link-text-transform;
letter-spacing: $navbar-nav-link-letter-spacing;
@include transition($navbar-transition);
.nav-link-inner--text {
margin-left: .25rem;
}
}
}
.navbar-brand {
font-size: $font-size-sm;
font-weight: 600;
text-transform: uppercase;
font-size: .875rem;
letter-spacing: .05px;
img {
height: 30px;
}
}
.navbar-dark {
.navbar-brand {
color: $white;
}
}
.navbar-light {
.navbar-brand {
color: $gray-800;
}
}
.navbar-nav {
.nav-item {
.media:not(:last-child){
margin-bottom: 1.5rem;
}
}
}
@include media-breakpoint-up(lg) {
// .navbar-main {
// padding: 1rem 0;
// }
.navbar-nav {
.nav-item {
margin-right: .5rem;
[data-toggle="dropdown"]::after {
transition: $transition-base;
}
&.show {
[data-toggle="dropdown"]::after {
transform: rotate(180deg);
}
}
}
.nav-link {
padding-top: $navbar-nav-link-padding-y;
padding-bottom: $navbar-nav-link-padding-y;
border-radius: $navbar-nav-link-border-radius;
i {
margin-right: .625rem;
}
}
.nav-link-icon {
padding-left: .5rem !important;
padding-right: .5rem !important;
font-size: 1rem;
border-radius: $navbar-nav-link-border-radius;
i {
margin-right: 0;
}
}
// Dropdown menu
.dropdown-menu {
opacity: 0;
pointer-events: none;
margin: 0;
&:before {
background: $dropdown-bg;
box-shadow: none;
content: '';
display: block;
height: 16px;
width: 16px;
left: 5px;
position: absolute;
bottom: 100%;
transform: rotate(-45deg) translateY(1rem);
z-index: -5;
border-radius: $border-radius-sm;
}
}
.dropdown-menu-right {
&:before {
right: 20px;
left: auto;
}
}
&:not(.navbar-nav-hover) {
.dropdown-menu {
&.show {
opacity: 1;
pointer-events: auto;
animation: show-navbar-dropdown .25s ease forwards;
}
&.close {
display: block;
animation: hide-navbar-dropdown .15s ease backwards;
}
}
}
&.navbar-nav-hover {
.dropdown-menu {
opacity: 0;
display: block;
pointer-events: none;
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
animation: none;
}
.nav-item.dropdown:hover > .dropdown-menu {
display: block;
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translate(0, 0);
animation: none;
}
.nav-item.dropdown > .dropdown-menu {
.dropdown-item.open + .dropdown-menu {
display: block;
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translate(0, 0);
animation: none;
}
.dropdown-item + .dropdown-menu {
margin-left: 10px;
&:before {
left: -16px;
top: 4px;
}
}
}
}
.dropdown-menu-inner {
position: relative;
padding: 1rem;
}
}
}
// Transparent navbar
.navbar-transparent {
position: absolute;
top: 0;
width: 100%;
z-index: 100;
background-color: transparent !important;
border: 0;
box-shadow: none;
.navbar-brand {
color: rgba(255, 255, 255, 1);
}
.navbar-toggler {
color: rgba(255, 255, 255, 1);
}
.navbar-toggler-icon {
background-image: $navbar-dark-toggler-icon-bg;
}
}
.bg-white {
.navbar-toggler-icon {
background-image: $navbar-light-toggler-icon-bg
}
}
@include media-breakpoint-up(md) {
.navbar-transparent {
.navbar-nav {
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-dark-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
}
.navbar-brand {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-color;
}
}
}
}
// Collapse
.navbar-collapse-header {
display: none;
}
@include media-breakpoint-down(md) {
.navbar-nav {
.nav-link {
padding: .625rem 0;
color: theme-color("default") !important;
}
.dropdown-menu {
box-shadow: none;
min-width: auto;
.media {
svg {
width: 30px;
}
}
}
}
.navbar-collapse {
width: calc(100% - 1.4rem);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1050;
margin: .7rem;
overflow-y: auto;
height: auto !important;
opacity: 0;
.navbar-toggler {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
display: inline-block;
padding: 0;
span {
display: block;
position: absolute;
width: 100%;
height: 2px;
border-radius: 2px;
opacity: 1;
background: #283448;
}
:nth-child(1) {
transform: rotate(135deg);
}
:nth-child(2) {
transform: rotate(-135deg);
}
}
.navbar-collapse-header {
display: block;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.collapse-brand {
img {
height: 36px;
}
}
.collapse-close {
text-align: right;
}
}
.navbar-collapse.collapsing,
.navbar-collapse.show {
padding: 1.5rem;
border-radius: $border-radius;
background: #FFF;
box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1);
animation: show-navbar-collapse .2s ease forwards;
}
.navbar-collapse.collapsing-out {
animation: hide-navbar-collapse .2s ease forwards;
}
}
// Keyframes
@keyframes show-navbar-collapse {
0% {
opacity: 0;
transform: scale(.95);
transform-origin: 100% 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes hide-navbar-collapse {
from {
opacity: 1;
transform: scale(1);
transform-origin: 100% 0;
}
to {
opacity: 0;
transform: scale(.95);
}
}
@keyframes show-navbar-dropdown {
0% {
opacity: 0;
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes hide-navbar-dropdown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate(0, 10px);
}
}

40
assets/scss/argon-design-system/pagination.scss Normal file
View File

@@ -0,0 +1,40 @@
.page-item {
&.active .page-link {
box-shadow: $pagination-active-box-shadow;
}
.page-link,
span {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0 3px;
border-radius: 50% !important;
width: 36px;
height: 36px;
font-size: $font-size-sm;
}
}
.pagination-lg {
.page-item {
.page-link,
span {
width: 46px;
height: 46px;
line-height: 46px;
}
}
}
.pagination-sm {
.page-item {
.page-link,
span {
width: 30px;
height: 30px;
line-height: 30px;
}
}
}

14
assets/scss/argon-design-system/popover.scss Normal file
View File

@@ -0,0 +1,14 @@
.popover {
border: 0;
}
.popover-header {
font-weight: $font-weight-bold;
}
// Alternative colors
@each $color, $value in $theme-colors {
.popover-#{$color} {
@include popover-variant($value);
}
}

71
assets/scss/argon-design-system/progress.scss Normal file
View File

@@ -0,0 +1,71 @@
.progress-wrapper {
position: relative;
padding-top: 1.5rem;
}
.progress {
height: 8px;
margin-bottom: $spacer;
overflow: hidden;
border-radius: $border-radius-sm;
background-color: $progress-bg;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress .sr-only {
width: auto;
height: 20px;
margin: 0 0 0 30px;
left: 0;
clip: auto;
line-height: 20px;
font-size: 13px;
}
.progress-heading {
font-size: 14px;
font-weight: 500;
margin: 0 0 2px;
padding: 0;
}
.progress-bar {
box-shadow: none;
border-radius: 0;
height: auto;
}
.progress-label {
span {
display: inline-block;
color: $default;
font-size: .625rem;
font-weight: 600;
text-transform: uppercase;
padding: .25rem 0rem;
}
}
.progress-percentage {
text-align: right;
span {
display: inline-block;
color: $gray-600;
font-size: .875rem;
font-weight: 600;
}
}
.index-page {
.progress-wrapper {
padding-top: 1rem;
.progress-label {
position: absolute;
top: auto;
bottom: 10px;
}
.progress {
margin-bottom: 0;
}
}
}

13
assets/scss/argon-design-system/reboot.scss Normal file
View File

@@ -0,0 +1,13 @@
iframe {
border: 0;
}
figcaption,
figure,
main {
display: block;
}
main {
overflow: hidden;
}

571
assets/scss/argon-design-system/section.scss Normal file
View File

@@ -0,0 +1,571 @@
.section {
position: relative;
padding-top: $spacer * 4;
padding-bottom: $spacer * 4;
}
.section-xl {
padding-top: $spacer * 8;
padding-bottom: $spacer * 8;
}
.section-lg {
padding-top: $spacer * 6;
padding-bottom: $spacer * 6;
}
.section-sm {
padding-top: $spacer * 2;
padding-bottom: $spacer * 2;
}
// Hero sections
.section-hero {
@include media-breakpoint-up(md) {
min-height: 500px;
}
}
// Circle sections
.section-shaped {
position: relative;
overflow: hidden;
&.section-hero {
&:before {
top: 680px;
}
}
.stars-and-coded{
margin-top: 8rem;
}
.shape {
position: absolute;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
span {
position: absolute;
}
+.container {
position: relative;
// padding-top: 6rem;
// padding-bottom: 0rem;
height: 100%;
}
&.shape-skew {
+.container {
padding-top: 0;
.col {
margin-top: -100px;
}
}
+ .shape-container {
padding-top: 18rem;
padding-bottom: 19rem;
}
}
}
.shape-skew {
transform: skewY(-4deg);
transform-origin: 0;
span {
transform: skew(4deg);
}
}
// Color variations
.shape-primary {
background: linear-gradient(150deg, shapes-primary-color("step-1-gradient-bg") 15%, shapes-primary-color("step-2-gradient-bg") 70%, shapes-primary-color("step-3-gradient-bg") 94%);
:nth-child(1) {
background: shapes-primary-color("span-1-bg");
}
:nth-child(2) {
background: shapes-primary-color("span-2-bg");
}
:nth-child(3) {
background: shapes-primary-color("span-3-bg");
}
:nth-child(4) {
background: shapes-primary-color("span-4-bg");
}
:nth-child(5) {
background: shapes-primary-color("span-5-bg");
}
}
.shape-default {
background: linear-gradient(150deg, shapes-default-color("step-1-gradient-bg") 15%, shapes-default-color("step-2-gradient-bg") 70%, shapes-default-color("step-3-gradient-bg") 94%);
:nth-child(1) {
background: shapes-default-color("span-1-bg");
}
:nth-child(2) {
background: shapes-default-color("span-2-bg");
}
:nth-child(3) {
background: shapes-default-color("span-3-bg");
}
:nth-child(4) {
background: shapes-default-color("span-4-bg");
}
:nth-child(5) {
background: shapes-default-color("span-5-bg");
}
}
.shape-light {
background: linear-gradient(150deg, shapes-light-color("step-1-gradient-bg") 15%, shapes-light-color("step-2-gradient-bg") 70%, shapes-light-color("step-3-gradient-bg") 94%);
:nth-child(1) {
background: shapes-light-color("span-1-bg");
}
:nth-child(2) {
background: shapes-light-color("span-2-bg");
}
:nth-child(3) {
background: shapes-light-color("span-3-bg");
}
:nth-child(4) {
background: shapes-light-color("span-4-bg");
}
:nth-child(5) {
background: shapes-light-color("span-5-bg");
}
}
.shape-dark {
background: linear-gradient(150deg, shapes-dark-color("step-1-gradient-bg") 15%, shapes-dark-color("step-2-gradient-bg") 70%, shapes-dark-color("step-3-gradient-bg") 94%);
:nth-child(1) {
background: shapes-dark-color("span-1-bg");
}
:nth-child(2) {
background: shapes-dark-color("span-2-bg");
}
:nth-child(3) {
background: shapes-dark-color("span-3-bg");
}
:nth-child(4) {
background: shapes-dark-color("span-4-bg");
}
:nth-child(5) {
background: shapes-dark-color("span-5-bg");
}
}
.shape-style-1 {
span {
height: 120px;
width: 120px;
border-radius: 50%;
}
.span-200 {
height: 200px;
width: 200px;
}
.span-150 {
height: 150px;
width: 150px;
}
.span-100 {
height: 100px;
width: 100px;
}
.span-75 {
height: 75px;
width: 75px;
}
.span-50 {
height: 50px;
width: 50px;
}
:nth-child(1) {
left: -4%;
bottom: auto;
background: rgba(255, 255, 255, .1);
}
:nth-child(2) {
right: 4%;
top: 10%;
background: rgba(255, 255, 255, .1);
}
:nth-child(3) {
top: 280px;
right: 5.66666%;
background: rgba(255, 255, 255, .3);
}
:nth-child(4) {
top: 320px;
right: 7%;
background: rgba(255, 255, 255, .15);
}
:nth-child(5) {
top: 38%;
left: 1%;
right: auto;
background: rgba(255, 255, 255, .05);
}
:nth-child(6) {
width: 200px;
height: 200px;
top: 44%;
left: 10%;
right: auto;
background: rgba(255, 255, 255, .15);
}
:nth-child(7) {
bottom: 50%;
right: 36%;
background: rgba(255, 255, 255, .04);
}
:nth-child(8) {
bottom: 70px;
right: 2%;
background: rgba(255, 255, 255, .2);
}
:nth-child(9) {
bottom: 1%;
right: 2%;
background: rgba(255, 255, 255, .1);
}
:nth-child(10) {
bottom: 1%;
left: 1%;
right: auto;
background: rgba(255, 255, 255, .05);
}
@include media-breakpoint-down(md) {
span {
height: 120px;
}
}
@include media-breakpoint-down(sm) {
span {
height: 90px;
}
}
// shape color variations
&.shape-primary {
background: linear-gradient(150deg, shapes-primary-color("step-1-gradient-bg") 15%, shapes-primary-color("step-2-gradient-bg") 70%, shapes-primary-color("step-3-gradient-bg") 94%);
}
&.shape-default {
background: linear-gradient(150deg, shapes-default-color("step-1-gradient-bg") 15%, shapes-default-color("step-2-gradient-bg") 70%, shapes-default-color("step-3-gradient-bg") 94%);
}
&.shape-light {
background: linear-gradient(150deg, shapes-light-color("step-1-gradient-bg") 15%, shapes-light-color("step-2-gradient-bg") 70%, shapes-light-color("step-3-gradient-bg") 94%);
}
&.shape-dark {
background: linear-gradient(150deg, shapes-dark-color("step-1-gradient-bg") 15%, shapes-dark-color("step-2-gradient-bg") 70%, shapes-dark-color("step-3-gradient-bg") 94%);
}
}
// Styles - works with a color variation class (e.g shapes-default)
.shape-style-2 {
span {
height: 190px;
}
.span-sm {
height: 100px;
}
:nth-child(1) {
width: 33.33333%;
top: 0;
left: -16.66666%;
}
:nth-child(2) {
width: 33.33333%;
top: 0;
left: 16.66666%;
right: auto;
}
:nth-child(3) {
width: 33.33333%;
left: 49.99999%;
bottom: auto;
}
:nth-child(4) {
width: 33.33333%;
top: 55%;
right: -16.66666%;
}
:nth-child(5) {
width: 33.33333%;
bottom: 0;
}
@include media-breakpoint-down(md) {
span {
height: 120px;
}
}
@include media-breakpoint-down(sm) {
span {
height: 90px;
}
}
}
.shape-style-3 {
span {
height: 140px;
}
.span-sm {
height: 100px;
}
:nth-child(1) {
width: 66%;
left: -16.66666%;
bottom: auto;
}
:nth-child(2) {
width: 40%;
top: 54%;
//height: 320px;
right: -16.66666%;
}
:nth-child(3) {
width: 33.33333%;
top: 34%;
left: -16.66666%;
right: auto;
}
:nth-child(4) {
width: 60%;
bottom: 0;
right: -16.66666%;
opacity: .6;
}
:nth-child(5) {
width: 33.33333%;
bottom: 0;
}
@include media-breakpoint-down(md) {
span {
height: 120px;
}
}
@include media-breakpoint-down(sm) {
span {
height: 90px;
}
}
}
}
// Device illustrations used on shape sections
.device-ill {
pointer-events: none;
position: absolute;
display: flex;
width: 1287px;
left: 50%;
margin-left: -644px;
transform: scale(.5) rotate(-12deg) translateX(50px);
transform-origin: 50% 20%;
will-change: transform;
div {
display: flex;
justify-content: center;
align-items: center;
border-radius: $border-radius;
padding: .875rem;
background: #fff;
box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05);
}
.tablet-landscape {
width: 512px;
height: 352px;
margin: 115px 50px 0;
}
}
@media (min-width:670px) {
.device-ill {
flex-wrap: wrap;
width: 512px;
margin-left: -50px;
top: 215px;
transform: rotate(-12deg);
transform-origin: 100% 0;
[class^=tablet] {
margin: 0;
}
.tablet-landscape {
width: 512px;
height: 352px;
}
}
}
@media (min-width:880px) {
.device-ill {
width: 829px;
margin-left: -10px;
top: 20px;
.tablet-landscape {
align-self: flex-end;
margin-right: 50px;
}
.phone-big {
display: flex;
width: 267px;
height: 553px;
}
}
}
// Profile cover
.section-profile-cover {
height: 580px;
background-size: cover;
background-position: center center;
}
@include media-breakpoint-down(md) {
.section-profile-cover {
height: 400px;
}
}
// Components section (for demo)
.section-components {
>.form-control {
+.form-control {
margin-top: .5rem;
}
}
>.nav+.nav,
>.alert+.alert,
>.navbar+.navbar,
>.progress+.progress,
>.progress+.btn,
.badge,
.btn {
margin-top: .5rem;
margin-bottom: .5rem;
}
.btn-group {
margin-top: .5rem;
margin-bottom: .5rem;
.btn {
margin: 0;
}
}
.alert {
margin: 0;
+.alert {
margin-top: 1.25rem;
}
}
.badge {
margin-right: .1rem;
}
.modal-footer {
.btn {
margin: 0;
}
}
}
/* .floating-cards {
perspective:1500px;
position:relative;
align-items:center
}
.floating-cards > div {
position:absolute;
-ms-flex-negative:0;
flex-shrink:0;
border-radius:8px;
overflow:hidden
}
.floating-cards .shine {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
pointer-events:none
}
*/

215
assets/scss/argon-design-system/separator.scss Normal file
View File

@@ -0,0 +1,215 @@
.separator {
position: absolute;
top: auto;
left: 0;
right: 0;
width: 100%;
height: 150px;
z-index: 1;
transform: translateZ(0);
overflow: hidden;
pointer-events: none;
svg {
position: absolute;
pointer-events: none;
}
}
.separator-top {
top: 0;
bottom: auto;
svg {
top: 0;
}
}
.separator-bottom {
top: auto;
bottom: 0;
svg {
bottom: 0;
}
}
.separator-inverse {
transform: rotate(180deg);
}
// Styles
.separator-skew {
height: 80px;
@include media-breakpoint-down(md) {
z-index: 0;
}
}
.mt-md,
.my-md
{
margin-top: 4rem !important;
}
.mr-md,
.mx-md
{
margin-right: 4rem !important;
}
.mb-md,
.my-md
{
margin-bottom: 4rem !important;
}
.ml-md,
.mx-md
{
margin-left: 4rem !important;
}
.m-lg
{
margin: 6rem !important;
}
.mt-lg,
.my-lg
{
margin-top: 6rem !important;
}
.mr-lg,
.mx-lg
{
margin-right: 6rem !important;
}
.mb-lg,
.my-lg
{
margin-bottom: 6rem !important;
}
.ml-lg,
.mx-lg
{
margin-left: 6rem !important;
}
.m-xl
{
margin: 8rem !important;
}
.mt-xl,
.my-xl
{
margin-top: 8rem !important;
}
.mr-xl,
.mx-xl
{
margin-right: 8rem !important;
}
.mb-xl,
.my-xl
{
margin-bottom: 8rem !important;
}
.ml-xl,
.mx-xl
{
margin-left: 8rem !important;
}
.pt-lg,
.py-lg
{
padding-top: 6rem !important;
}
.pr-lg,
.px-lg
{
padding-right: 6rem !important;
}
.pb-lg,
.py-lg
{
padding-bottom: 6rem !important;
}
.pl-lg,
.px-lg
{
padding-left: 6rem !important;
}
.p-xl
{
padding: 8rem !important;
}
.pt-xl,
.py-xl
{
padding-top: 8rem !important;
}
.pr-xl,
.px-xl
{
padding-right: 8rem !important;
}
.pb-xl,
.py-xl
{
padding-bottom: 8rem !important;
}
.pl-xl,
.px-xl
{
padding-left: 8rem !important;
}
.m-auto
{
margin: auto !important;
}
.mt-auto,
.my-auto
{
margin-top: auto !important;
}
.mr-auto,
.mx-auto
{
margin-right: auto !important;
}
.mb-auto,
.my-auto
{
margin-bottom: auto !important;
}
.ml-auto,
.mx-auto
{
margin-left: auto !important;
}

62
assets/scss/argon-design-system/theme.scss Normal file
View File

@@ -0,0 +1,62 @@
/*!
=========================================================
* {{ site.product.name }} {{ site.product.name_long }} - v{{ site.product.version }}
=========================================================
* Product Page: {{ site.product.download }}
* Copyright {{ 'now' | date: "%Y" }} {{ site.author }} ({{ site.website.url }})
* Licensed under MIT ({{ site.product.license }})
* Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// {{ site.product.name }} components
@import "functions";
@import "mixins";
@import "reboot";
@import "global";
@import "utilities";
@import "accordion";
@import "alert";
@import "avatar";
@import "badge";
@import "buttons";
@import "card";
@import "carousel";
@import "close";
@import "content";
@import "custom-forms";
@import "dropdown";
@import "footer";
@import "forms";
@import "grid";
@import "icons";
@import "input-group";
@import "list-group";
@import "modal";
@import "nav";
@import "navbar";
@import "pagination";
@import "popover";
@import "progress";
@import "section";
@import "separator";
@import "type";
// Vendor
@import "vendors";
// Docs
@import "docs";

93
assets/scss/argon-design-system/type.scss Normal file
View File

@@ -0,0 +1,93 @@
// General styles
p {
font-size: $paragraph-font-size;
font-weight: $paragraph-font-weight;
line-height: $paragraph-line-height;
}
.lead {
font-size: $lead-font-size;
font-weight: $lead-font-weight;
line-height: $paragraph-line-height;
margin-top: 1.5rem;
+ .btn-wrapper {
margin-top: 3rem;
}
}
.description {
font-size: $font-size-sm;
}
// Headings
.heading {
letter-spacing: $heading-letter-spacing;
font-size: $heading-font-size;
text-transform: $heading-text-transform;
font-weight: $heading-font-weight;
}
.heading-title {
letter-spacing: $heading-title-letter-spacing;
font-size: $heading-title-font-size;
font-weight: $heading-title-font-weight;
text-transform: $heading-title-text-transform;
}
.heading-section {
letter-spacing: $heading-section-letter-spacing;
font-size: $heading-section-font-size;
font-weight: $heading-section-font-weight;
text-transform: $heading-section-text-transform;
img {
display: block;
width: 72px;
height: 72px;
margin-bottom: 1.5rem;
}
&.text-center {
img {
margin-left: auto;
margin-right: auto;
}
}
}
// Section titles
.display-1,
.display-2,
.display-3,
.display-4 {
span {
display: block;
font-weight: $font-weight-light;
}
}
// Articles
article {
h4:not(:first-child),
h5:not(:first-child) {
margin-top: 3rem;
}
h4, h5 {
margin-bottom: 1.5rem;
}
figure {
margin: 3rem 0;
}
h5 + figure {
margin-top: 0;
}
}

9
assets/scss/argon-design-system/utilities.scss Normal file
View File

@@ -0,0 +1,9 @@
@import "utilities/backgrounds";
@import "utilities/floating";
@import "utilities/helper";
@import "utilities/position";
@import "utilities/sizing";
@import "utilities/spacing";
@import "utilities/shadows";
@import "utilities/text";
@import "utilities/transform";

44
assets/scss/argon-design-system/utilities/backgrounds.scss Normal file
View File

@@ -0,0 +1,44 @@
@each $color, $value in $colors {
@include bg-variant(".bg-#{$color}", $value);
}
@each $color, $value in $theme-colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
@each $color, $value in $colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
// Background colors with transparency
@each $color, $value in $theme-colors {
@include bg-translucent-variant(".bg-translucent-#{$color}", $value);
}
// Sections
@each $color, $value in $section-colors {
@include bg-variant(".section-#{$color}", $value);
}
@each $color, $value in $theme-colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
// Shape (svg) fill colors
@each $color, $value in $theme-colors {
.fill-#{$color} {
fill: $value;
}
.stroke-#{$color} {
stroke: $value;
}
}
.fill-opacity-8 {
fill-opacity: .8;
}

54
assets/scss/argon-design-system/utilities/floating.scss Normal file
View File

@@ -0,0 +1,54 @@
.floating {
animation: floating 3s ease infinite;
will-change: transform;
&:hover {
animation-play-state: paused;
}
}
.floating-lg {
animation: floating-lg 3s ease infinite;
}
.floating-sm {
animation: floating-sm 3s ease infinite;
}
// Keyframes
@keyframes floating-lg {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(15px)
}
100% {
transform: translateY(0px)
}
}
@keyframes floating {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(10px)
}
100% {
transform: translateY(0px)
}
}
@keyframes floating-sm {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(5px)
}
100% {
transform: translateY(0px)
}
}

62
assets/scss/argon-design-system/utilities/helper.scss Normal file
View File

@@ -0,0 +1,62 @@
// Image
.img-center {
display: block;
margin-left: auto;
margin-right: auto;
}
// Clearfix
.floatfix {
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
}
// Overflows
.overflow-visible {
overflow: visible !important;
}
.overflow-hidden {
overflow: hidden !important;
}
// Opacity classes
.opacity-1 {
opacity: .1 !important;
}
.opacity-2 {
opacity: .2 !important;
}
.opacity-3 {
opacity: .3 !important;
}
.opacity-4 {
opacity: .4 !important;
}
.opacity-5 {
opacity: .5 !important;
}
.opacity-6 {
opacity: .6 !important;
}
.opacity-7 {
opacity: .7 !important;
}
.opacity-8 {
opacity: .8 !important;
}
.opacity-9 {
opacity: .9 !important;
}
.opacity-10 {
opacity: 1 !important;
}

19
assets/scss/argon-design-system/utilities/position.scss Normal file
View File

@@ -0,0 +1,19 @@
@each $size, $value in $spacers {
.top-#{$size} {
top: $value;
}
.right-#{$size} {
right: $value;
}
.bottom-#{$size} {
bottom: $value;
}
.left-#{$size} {
left: $value;
}
}
.center {
left: 50%;
transform: translateX(-50%);
}

10
assets/scss/argon-design-system/utilities/shadows.scss Normal file
View File

@@ -0,0 +1,10 @@
[class*="shadow"] {
@if $enable-transitions {
transition: $transition-base;
}
}
.shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; }
.shadow--hover:hover { box-shadow: $box-shadow !important; }
.shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; }
.shadow-none--hover:hover { box-shadow: none !important; }

5
assets/scss/argon-design-system/utilities/sizing.scss Normal file
View File

@@ -0,0 +1,5 @@
// Height values in vh
.h-100vh {
height: 100vh !important;
}

105
assets/scss/argon-design-system/utilities/spacing.scss Normal file
View File

@@ -0,0 +1,105 @@
// Spacing columns vertically
.row.row-grid > [class*="col-"] + [class*="col-"] {
margin-top: 3rem;
}
@include media-breakpoint-up(lg) {
.row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] {
margin-top: 0;
}
}
@include media-breakpoint-up(md) {
.row.row-grid > [class*="col-md-"] + [class*="col-md-"] {
margin-top: 0;
}
}
@include media-breakpoint-up(sm) {
.row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] {
margin-top: 0;
}
}
.row-grid + .row-grid {
margin-top: 3rem;
}
// Negative margins and paddings
@media(min-width: 992px) {
[class*="mt--"],
[class*="mr--"],
[class*="mb--"],
[class*="ml--"] {
position: relative;
z-index: 5;
}
// Large negative margins in pixels
.mt--100 {
margin-top: -100px !important;
}
.mr--100 {
margin-right: -100px !important;
}
.mb--100 {
margin-bottom: -100px !important;
}
.ml--100 {
margin-left: -100px !important;
}
.mt--150 {
margin-top: -150px !important;
}
.mb--150 {
margin-bottom: -150px !important;
}
.mt--200 {
margin-top: -200px !important;
}
.mb--200 {
margin-bottom: -200px !important;
}
.mt--300 {
margin-top: -300px !important;
}
.mb--300 {
margin-bottom: -300px !important;
}
// Large margins in pixels
.pt-100 {
padding-top: 100px !important;
}
.pb-100 {
padding-bottom: 100px !important;
}
.pt-150 {
padding-top: 150px !important;
}
.pb-150 {
padding-bottom: 150px !important;
}
.pt-200 {
padding-top: 200px !important;
}
.pb-200 {
padding-bottom: 200px !important;
}
.pt-250 {
padding-top: 250px !important;
}
.pb-250 {
padding-bottom: 250px !important;
}
.pt-300 {
padding-top: 300px!important;
}
.pb-300 {
padding-bottom: 300px!important;
}
}

41
assets/scss/argon-design-system/utilities/text.scss Normal file
View File

@@ -0,0 +1,41 @@
// Weight and italics
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-weight-800 { font-weight: 800 !important; }
.font-weight-900 { font-weight: 900 !important; }
// Text decorations
.text-underline { text-decoration: underline; }
.text-through { text-decoration: line-through; }
// Line heights
.lh-100 { line-height: 1; }
.lh-110 { line-height: 1.1; }
.lh-120 { line-height: 1.2; }
.lh-130 { line-height: 1.3; }
.lh-140 { line-height: 1.4; }
.lh-150 { line-height: 1.5; }
.lh-160 { line-height: 1.6; }
.lh-170 { line-height: 1.7; }
.lh-180 { line-height: 1.8; }
// Letter spacings
.ls-1 { letter-spacing: .0625rem; }
.ls-15 { letter-spacing: .09375rem; }
.ls-2 { letter-spacing: 0.125rem; }
// Color variations
@each $color, $value in $colors {
@include text-emphasis-variant(".text-#{$color}", $value);
}

8
assets/scss/argon-design-system/utilities/transform.scss Normal file
View File

@@ -0,0 +1,8 @@
@include media-breakpoint-up(lg) {
.transform-perspective-right {
transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
}
.transform-perspective-left{
transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
}
}

903
assets/scss/argon-design-system/variables.scss Normal file
View File

@@ -0,0 +1,903 @@
// Global settings
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
// Color system
$white: #fff !default;
$gray-100: #f6f9fc !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #8898aa !default; // Line footer color
$gray-700: #525f7f !default; // Line p color
$gray-800: #32325d !default; // Line heading color
$gray-900: #212529 !default;
$black: #000 !default;
$grays: () !default;
$grays: map-merge((
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
), $grays);
$blue: #5e72e4 !default;
$indigo: #5603ad !default;
$purple: #8965e0 !default;
$pink: #f3a4b5 !default;
$red: #f5365c !default;
$orange: #fb6340 !default;
$yellow: #ffd600 !default;
$green: #2dce89 !default;
$teal: #11cdef !default;
$cyan: #2bffc6 !default;
$colors: () !default;
$colors: map-merge((
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"light": $gray-400,
"lighter": $gray-200,
"gray-dark": $gray-800
), $colors);
$default: #172b4d !default;
$primary: #5e72e4 !default;
$secondary: #f4f5f7 !default;
$success: $green !default;
$info: $teal !default;
$warning: $orange !default;
$danger: $red !default;
$light: $gray-500 !default;
$dark: $gray-900 !default;
$darker: darken($gray-900, 15%) !default;
$facebook: #3b5999 !default;
$twitter: #1da1f2 !default;
$google-plus: #dd4b39 !default;
$instagram: #e4405f !default;
$pinterest: #bd081c !default;
$youtube: #cd201f !default;
$slack: #3aaf85 !default;
$dribbble: #ea4c89 !default;
$github: #222222 !default;
$theme-colors: () !default;
$theme-colors: map-merge((
"default": $default,
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"white": $white,
"neutral": $white,
"dark": $dark,
"darker": $darker
), $theme-colors);
$brand-colors: () !default;
$brand-colors: map-merge((
"facebook": $facebook,
"twitter": $twitter,
"google-plus": $google-plus,
"instagram": $instagram,
"pinterest": $pinterest,
"youtube": $youtube,
"slack": $slack,
"dribbble": $dribbble,
"github": $github
), $brand-colors);
$shape-colors: () !default;
$shape-colors: map-merge((
"default": #32325d,
"primary": #5533ff,
"secondary": #24b47e,
"neutral": #e9ecef,
"blue-gray": #b2cbe1,
), $shape-colors);
$shapes-primary-colors: () !default;
$shapes-primary-colors: map-merge((
"step-1-gradient-bg": #281483,
"step-2-gradient-bg": #8f6ed5,
"step-3-gradient-bg": #d782d9,
"span-1-bg": #53f,
"span-2-bg": #4553ff,
"span-3-bg": #4f40ff,
"span-4-bg": #25ddf5,
"span-5-bg": #1fa2ff
), $shapes-primary-colors);
$shapes-default-colors: () !default;
$shapes-default-colors: map-merge((
"step-1-gradient-bg": #7795f8,
"step-2-gradient-bg": #6772e5,
"step-3-gradient-bg": #555abf,
"span-1-bg": #7795f8,
"span-2-bg": #7b9aff,
"span-3-bg": #6f8ff8,
"span-4-bg": #76eea7,
"span-5-bg": #6adaff
), $shapes-default-colors);
$shapes-light-colors: () !default;
$shapes-light-colors: map-merge((
"step-1-gradient-bg": #b2cbe1,
"step-2-gradient-bg": #f6f9fc,
"step-3-gradient-bg": #f6f9fc,
"span-1-bg": #b4cce1,
"span-2-bg": #c5dbef,
"span-3-bg": #b9d5ed,
"span-4-bg": #74e4a2,
"span-5-bg": #008169
), $shapes-light-colors);
$shapes-dark-colors: () !default;
$shapes-dark-colors: map-merge((
"step-1-gradient-bg": #32325d,
"step-2-gradient-bg": #32325d,
"step-3-gradient-bg": #32325d,
"span-1-bg": #2e2e57,
"span-2-bg": #2b2b58,
"span-3-bg": #25254d,
"span-4-bg": #d782d9,
"span-5-bg": #008169
), $shapes-dark-colors);
// Translucent color variations
$translucent-color-opacity: .6;
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 200 !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;
// Action colors
$star-rating-color: $gray-400 !default;
$star-rating-color-active: $yellow !default;
$favorite-color: $yellow !default;
$like-color: $blue !default;
$love-color: $red !default;
// Body
$body-bg: $white !default;
$body-color: $gray-700 !default;
// Sections
$section-colors: () !default;
$section-colors: map-merge((
"primary": $body-bg,
"secondary": $secondary,
"light": $gray-400,
"dark": $dark,
"darker": $darker
), $section-colors);
// Links
$link-color: $primary !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%);
$link-hover-decoration: none !default;
// Grid breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1040px
);
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Spacing
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
-9: -($spacer * 10),
-8: -($spacer * 8),
-7: -($spacer * 6),
-6: -($spacer * 4.5),
-5: -($spacer * 3),
-4: -($spacer * 1.5),
-3: -$spacer,
-2: -($spacer * .5),
-1: -($spacer * .25),
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3),
6: ($spacer * 4.5),
7: ($spacer * 6),
8: ($spacer * 8),
9: ($spacer * 10)
), $spacers);
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge((
25: 25%,
50: 50%,
75: 75%,
100: 100%
), $sizes);
// Components
$shape-height-xl: 1.5 !default;
$shape-height-lg: 1.5 !default;
$shape-height-sm: 1.5 !default;
$border-width: .0625rem !default;
$border-color: $gray-200 !default;
$border-radius: .25rem !default;
$border-radius-xl: .35rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
$box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;
$component-active-border-color: theme-color("primary") !default;
$component-hover-color: $gray-300 !default;
$component-hover-bg: $gray-300 !default;
$component-hover-border-color: $gray-300 !default;
$caret-width: .3em !default;
$transition-base: all .15s ease !default;
$btn-transition: $transition-base !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
// Fonts
$font-family-base: 'Open Sans', sans-serif !default;
$font-family-alt: 'Open Sans', sans-serif !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-xl: ($font-size-base * 1.5);
$font-size-lg: ($font-size-base * 1.25);
$font-size-sm: ($font-size-base * .875);
$font-size-xs: ($font-size-base * .75);
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;
$font-weight-extra-bold: 700 !default;
$font-weight-base: $font-weight-normal !default;
$shape-height-base: 1.5 !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
$headings-margin-bottom: ($spacer / 2);
$headings-font-family: inherit !default;
$headings-font-weight: $font-weight-normal !default;
$headings-line-height: 1.5 !default;
$headings-color: $gray-800 !default;
$heading-letter-spacing: .025em !default;
$heading-font-size: .95rem !default;
$heading-text-transform: uppercase !default;
$heading-font-weight: $headings-font-weight !default;
$heading-title-letter-spacing: .025em !default;
$heading-title-font-size: 1.375rem !default;
$heading-title-font-weight: $font-weight-bold !default;
$heading-title-text-transform: uppercase !default;
$heading-section-letter-spacing: .025em !default;
$heading-section-font-size: 1.375rem !default;
$heading-section-font-weight: $font-weight-bold !default;
$heading-section-text-transform: uppercase !default;
$display1-size: 3.3rem !default;
$display2-size: 2.75rem !default;
$display3-size: 2.1875rem !default;
$display4-size: 1.6275rem !default;
$display1-weight: $font-weight-bold !default;
$display2-weight: $font-weight-bold !default;
$display3-weight: $font-weight-bold !default;
$display4-weight: $font-weight-bold !default;
$display-line-height: $headings-line-height !default;
$paragraph-font-size: 1rem !default;
$paragraph-font-weight: 300 !default;
$paragraph-line-height: 1.7 !default;
$lead-font-size: ($paragraph-font-size * 1.25);
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
$text-muted: $gray-600 !default;
$blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25);
$hr-border-color: rgba($black, .1);
$hr-border-width: $border-width !default;
$mark-padding: .2em !default;
$dt-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-bg: #fcf8e3 !default;
$hr-margin-y: $spacer * 2 !default;
// Icons
$icon-size: 3rem !default;
$icon-size-xl: 5rem !default;
$icon-size-lg: 4rem !default;
$icon-size-sm: 2rem !default;
$icon-size-xs: 1.25rem !default;
// Tables
$table-cell-padding: 1rem !default;
$table-cell-padding-sm: .3rem !default;
$table-bg: transparent !default;
$table-accent-bg: rgba($black, .05);
$table-hover-bg: rgba($black, .075);
$table-active-bg: $table-hover-bg !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-300 !default;
$table-head-bg: $gray-200 !default;
$table-head-color: $gray-700 !default;
$table-dark-bg: $gray-900 !default;
$table-dark-accent-bg: rgba($white, .05);
$table-dark-hover-bg: rgba($white, .075);
$table-dark-border-color: lighten($gray-900, 7.5%);
$table-dark-color: $body-bg !default;
// Buttons + Forms
$input-btn-padding-y: .625rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-line-height: $shape-height-base !default;
$input-btn-focus-width: 0 !default;
$input-btn-focus-color: rgba($component-active-bg, 1);
//$input-btn-focus-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
$input-btn-focus-box-shadow: none !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-line-height-sm: $shape-height-sm !default;
$input-btn-padding-y-lg: .875rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-line-height-lg: $shape-height-lg !default;
$input-btn-border-width: 1px !default;
$input-btn-font-size-sm: .75rem !default;
$input-btn-font-size: .875rem !default;
$input-btn-font-size-lg: .875rem !default;
// Buttons
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x + 0.5 !default;
$btn-line-height: $input-btn-line-height !default;
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-line-height-sm: $input-btn-line-height-sm !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-line-height-lg: $input-btn-line-height-lg !default;
$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: 600 !default;
$btn-text-transform: uppercase !default;
$btn-letter-spacing: .025em !default;
$btn-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
$btn-focus-box-shadow: $btn-hover-box-shadow !default;
$btn-focus-width: $input-btn-focus-width !default;
$btn-active-box-shadow: none !default;
// Forms
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-line-height-sm: $input-btn-line-height-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-line-height-lg: $input-btn-line-height-lg !default;
$input-border-radius: $border-radius !default;
$input-border-radius-xl: $border-radius-xl !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-bg: $white !default;
$input-disabled-bg: $gray-200 !default;
$input-muted-bg: #EDF0F5 !default;
$input-alternative-box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
$input-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
$input-color: $gray-600 !default;
$input-border-color: #cad1d7 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default;
$input-focus-bg: $white !default;
$input-focus-border-color: rgba(50,151,211,.25);
$input-focus-color: $input-color !default;
$input-focus-width: 0 !default;
$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default;
$input-placeholder-color: $gray-500 !default;
$input-focus-placeholder-color: $gray-500 !default;
$input-height-border: $input-border-width * 2 !default;
$input-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
// Input groups
$input-group-addon-color: $input-placeholder-color !default;
$input-group-addon-bg: $input-bg !default;
$input-group-addon-border-color: $input-border-color !default;
$input-group-addon-focus-color: $input-focus-color !default;
$input-group-addon-focus-bg: $input-focus-bg !default;
$input-group-addon-focus-border-color: $input-focus-border-color !default;
// Custom forms
$custom-control-gutter: 1.75rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-indicator-size: 1.25rem !default;
$custom-control-indicator-bg: $input-bg !default;
$custom-control-indicator-border-width: 1px !default;
$custom-control-indicator-border-color: $input-border-color !default;
$custom-control-indicator-box-shadow: none !default;
$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default;
$custom-control-indicator-hover-color: $component-hover-color !default;
$custom-control-indicator-hover-bg: $component-hover-bg !default;
$custom-control-indicator-hover-border-color: $component-hover-border-color !default;
$custom-control-indicator-active-color: $component-active-color !default;
$custom-control-indicator-active-bg: $component-active-bg !default;
$custom-control-indicator-active-border-color: $component-active-border-color !default;
$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default;
$custom-control-indicator-checked-color: $component-active-color !default;
$custom-control-indicator-checked-bg: $component-active-bg !default;
$custom-control-indicator-checked-border-color: $component-active-border-color !default;
$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default;
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5);
$custom-control-indicator-disabled-bg: $gray-200 !default;
$custom-control-label-disabled-color: $gray-600 !default;
$custom-checkbox-indicator-border-radius: $border-radius-sm !default;
//$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-toggle-slider-bg: #ddd !default;
$custom-toggle-checked-bg: theme-color("primary") !default;
// Form validation
$form-feedback-valid-bg: lighten($success, 15%);
$form-feedback-valid-color: theme-color("success") !default;
$form-feedback-invalid-bg: lighten($warning, 15%);
$form-feedback-invalid-color: theme-color("warning") !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $input-border-radius !default;
$btn-border-radius-xl: $input-border-radius-xl !default;
$btn-border-radius-lg: $input-border-radius-lg !default;
$btn-border-radius-sm: $input-border-radius !default;
// No UI Slider
$noui-target-bg: #eceeef !default;
$noui-target-thickness: 5px !default;
$noui-target-border-radius: 5px !default;
$noui-target-border-color: 0 !default;
$noui-target-box-shadow: inset 0 1px 2px rgba(90,97,105,.1);
$noui-slider-connect-bg: $primary !default;
$noui-slider-connect-disabled-bg: #b2b2b2 !default;
$noui-handle-width: 15px !default;
$noui-handle-bg: theme-color("primary") !default;
$noui-handle-border: 0 !default;
$noui-handle-border-radius: 100% !default;
$noui-origin-border-radius: 2px !default;
// Dropdown
$dropdown-bg: $white !default;
$dropdown-border-width: 0 !default;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius-lg !default;
$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
// Navs
$nav-link-padding-y: .25rem !default;
$nav-link-padding-x: .75rem !default;
$nav-link-color: $gray-700 !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-pills-padding-y: .75rem !default;
$nav-pills-padding-x: 1rem !default;
$nav-pills-space-x: 1rem !default;
$nav-pills-bg: $white;
$nav-pills-border-width: 1px !default;
$nav-pills-border-color: theme-color("primary") !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-color: theme-color("primary") !default;
$nav-pills-link-hover-color: darken(theme-color("primary"), 5%);
$nav-pills-link-active-color: color-yiq(theme-color("primary"));
$nav-pills-link-active-bg: theme-color("primary") !default;
$nav-pills-box-shadow: $btn-box-shadow !default;
// Navbar
$navbar-transition: all .15s linear !default;
$navbar-padding-y: 1rem !default;
$navbar-padding-x: 1rem !default;
$navbar-nav-link-padding-x: 1rem !default;
$navbar-nav-link-padding-y: 1rem !default;
$navbar-nav-link-font-family: $font-family-alt !default;
$navbar-nav-link-font-size: .9rem !default;
$navbar-nav-link-font-weight: 400 !default;
$navbar-nav-link-text-transform: normal !default;
$navbar-nav-link-letter-spacing: 0 !default;
$navbar-nav-link-border-radius: $border-radius !default;
$navbar-dark-bg: transparent !default;
$navbar-dark-hover-bg: rgba(255, 255, 255, .1);
$navbar-dark-active-bg: rgba(255, 255, 255, .1);
$navbar-dark-color: rgba($white, .95);
$navbar-dark-hover-color: rgba($white, .65);
$navbar-dark-active-color: rgba($white, .65);
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-border-color: transparent !default;
$navbar-light-bg: transparent !default;
$navbar-light-hover-bg: rgba(0, 0, 0, .1);
$navbar-light-active-bg: rgba(0, 0, 0, .1);
$navbar-light-border-color: #f3f3f3;
$navbar-light-color: rgba($black, .5);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
//$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border-color: transparent !default;
// Alerts
$alert-padding-y: 1rem !default;
$alert-padding-x: 1.5rem !default;
$alert-border-radius: $border-radius !default;
$alert-bg-level: -2 !default;
$alert-border-level: -2 !default;
$alert-color-level: 0 !default;
// List group
$list-group-bg: $white !default;
$list-group-border-color: $border-color !default; //rgba($black, .125);
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: 1rem !default;
$list-group-item-padding-x: 1rem !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-600 !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $list-group-action-color !default;
$list-group-action-active-bg: $gray-200 !default;
// Close
$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: $font-weight-bold !default;
$close-bg: transparent !default;
$close-hover-bg: transparent !default;
$close-color: rgba(0, 0, 0, .6);
$close-hover-color: rgba(0, 0, 0, .9);
$close-text-shadow: none !default;
// Popovers
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-max-width: 276px !default;
$popover-border-width: 1px !default;
$popover-border-color: rgba($black, .05);
$popover-border-radius: $border-radius-lg !default;
$popover-box-shadow: 0px .5rem 2rem 0px rgba($black, .2);
$popover-header-bg: $popover-bg !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .75rem !default;
$popover-header-padding-x: .75rem !default;
$popover-body-color: $body-color !default;
$popover-body-padding-y: $popover-header-padding-y !default;
$popover-body-padding-x: $popover-header-padding-x !default;
$popover-arrow-width: 1.5rem !default;
$popover-arrow-height: .75rem !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: transparent !default;
// Badges
$badge-font-size: 66% !default;
$badge-font-weight: $font-weight-bold !default;
$badge-padding-y: .35rem !default;
$badge-padding-x: .375rem !default;
$badge-border-radius: $border-radius !default;
$badge-text-transfom: uppercase;
$badge-pill-padding-x: .875em !default;
$badge-pill-border-radius: 10rem !default;
$badge-circle-size: 2rem;
// Pagination
// $pagination-padding-y: .5rem !default;
// $pagination-padding-x: .75rem !default;
// $pagination-padding-y-sm: .25rem !default;
// $pagination-padding-x-sm: .5rem !default;
// $pagination-padding-y-lg: .75rem !default;
// $pagination-padding-x-lg: 1.5rem !default;
// $pagination-line-height: 1.25 !default;
$pagination-color: $gray-600 !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-color: $gray-300 !default;
//$pagination-focus-box-shadow: $btn-hover-box-shadow !default;
$pagination-hover-color: $gray-600 !default;
$pagination-hover-bg: $gray-300 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-active-box-shadow: $btn-hover-box-shadow !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
// Cards
$card-spacer-y: 1.25rem !default;
$card-spacer-x: 1.5rem !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .05);
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
$card-cap-bg: $gray-100 !default;
$card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;
//$card-group-margin: ($grid-gutter-width / 2);
//$card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default;
$card-columns-gap: 1.25rem !default;
$card-columns-margin: $card-spacer-y !default;
// Tooltips
$tooltip-font-size: $font-size-sm !default;
// Modals
$modal-inner-padding: 1.5rem !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 380px !default;
$modal-title-line-height: 1.1;
//$modal-title-line-height: $shape-height-base !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: 1px !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-box-shadow-xs: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .16 !default;
$modal-header-border-color: $gray-200 !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding: 1.25rem !default;
// Datepicker
$datepicker-border-radius: $card-border-radius !default;
$datepicker-dropdown-padding: 20px 22px !default;
$datepicker-cell-transition: $transition-base !default;
$datepicker-cell-hover-background: lighten($gray-400, 55%);
$datepicker-cell-border-radius: 50% !default;
$datepicker-cell-width: 36px !default;
$datepicker-cell-height: 36px !default;
$datepicker-disabled-cell-color: $gray-300 !default;
$datepicker-disabled-old-new-color: $gray-500 !default;
$datepicker-header-cell-border-radius: $border-radius !default;
$datepicker-active-color: $white !default;
$datepicker-active-background: theme-color("primary") !default;
$datepicker-active-box-shadow: none !default;
$datepicker-range-background: theme-color("primary") !default;
$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%);
$datepicker-range-color: $white !default;
$datepicker-range-highlighted-bg: $gray-200 !default;
$datepicker-dropdown-border: lighten($gray-400, 40%);
$datepicker-dropdown-bg: $white !default;
$datepicker-highlighted-bg: $datepicker-active-background !default;
// Footer
$footer-link-font-size: .85rem !default;
$footer-bg: theme-color("secondary") !default;
$footer-color: $gray-600 !default;
$footer-link-color: $gray-600 !default;
$footer-link-hover-color: $gray-700 !default;
$footer-heading-color: $gray-600 !default;
$footer-heading-font-size: $font-size-sm !default;

7
assets/scss/argon-design-system/vendors.scss Normal file
View File

@@ -0,0 +1,7 @@
@import "vendor/datetimepicker";
@import "vendor/_bootstrap-datepicker";
@import "vendor/nouislider";
@import "vendor/headroom";

51
assets/scss/bootstrap/_alert.scss Normal file
View File

@@ -0,0 +1,51 @@
//
// Base styles
//
.alert {
position: relative;
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $alert-margin-bottom;
border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius);
}
// Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: $close-font-size + $alert-padding-x * 2;
// Adjust close link position
.close {
position: absolute;
top: 0;
right: 0;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
}
}

54
assets/scss/bootstrap/_badge.scss Normal file
View File

@@ -0,0 +1,54 @@
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
@include font-size($badge-font-size);
font-weight: $badge-font-weight;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius($badge-border-radius);
@include transition($badge-transition);
@at-root a#{&} {
@include hover-focus {
text-decoration: none;
}
}
// Empty badges collapse automatically
&:empty {
display: none;
}
}
// Quick fix for badges in buttons
.btn .badge {
position: relative;
top: -1px;
}
// Pill badges
//
// Make them extra rounded with a modifier to replace v3's badges.
.badge-pill {
padding-right: $badge-pill-padding-x;
padding-left: $badge-pill-padding-x;
@include border-radius($badge-pill-border-radius);
}
// Colors
//
// Contextual variations (linked badges get darker on :hover).
@each $color, $value in $theme-colors {
.badge-#{$color} {
@include badge-variant($value);
}
}

41
assets/scss/bootstrap/_breadcrumb.scss Normal file
View File

@@ -0,0 +1,41 @@
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($breadcrumb-border-radius);
}
.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding;
&::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: $breadcrumb-divider;
}
}
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
text-decoration: underline;
}
// stylelint-disable-next-line no-duplicate-selectors
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active {
color: $breadcrumb-active-color;
}
}

163
assets/scss/bootstrap/_button-group.scss Normal file
View File

@@ -0,0 +1,163 @@
// stylelint-disable selector-no-qualifying-type
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
flex: 1 1 auto;
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
@include hover {
z-index: 1;
}
&:focus,
&:active,
&.active {
z-index: 1;
}
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.input-group {
width: auto;
}
}
.btn-group {
// Prevent double borders when buttons are next to each other
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-left: -$btn-border-width;
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
}
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
}
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
//
// Split button dropdowns
//
.dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
&::after,
.dropup &::after,
.dropright &::after {
margin-left: 0;
}
.dropleft &::before {
margin-right: 0;
}
}
.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
}
.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
}
// The clickable button for toggling the menu
// Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle {
@include box-shadow($btn-active-box-shadow);
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@include box-shadow(none);
}
}
//
// Vertical button groups
//
.btn-group-vertical {
flex-direction: column;
align-items: flex-start;
justify-content: center;
> .btn,
> .btn-group {
width: 100%;
}
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: -$btn-border-width;
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-bottom-radius(0);
}
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-top-radius(0);
}
}
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
.btn-group-toggle {
> .btn,
> .btn-group > .btn {
margin-bottom: 0; // Override default `<label>` value
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
}
}

137
assets/scss/bootstrap/_buttons.scss Normal file
View File

@@ -0,0 +1,137 @@
// stylelint-disable selector-no-qualifying-type
//
// Base styles
//
.btn {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition);
@include hover {
color: $body-color;
text-decoration: none;
}
&:focus,
&.focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
opacity: $btn-disabled-opacity;
@include box-shadow(none);
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active {
@include box-shadow($btn-active-box-shadow);
&:focus {
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
}
// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset:disabled a.btn {
pointer-events: none;
}
//
// Alternate buttons
//
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}
//
// Link buttons
//
// Make a button look and behave like a link
.btn-link {
font-weight: $font-weight-normal;
color: $link-color;
text-decoration: $link-decoration;
@include hover {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
box-shadow: none;
}
&:disabled,
&.disabled {
color: $btn-link-disabled-color;
pointer-events: none;
}
// No need for an active state here
}
//
// Button Sizes
//
.btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}
.btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}
//
// Block button
//
.btn-block {
display: block;
width: 100%;
// Vertically space out multiple block buttons
+ .btn-block {
margin-top: $btn-block-spacing-y;
}
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}

289
assets/scss/bootstrap/_card.scss Normal file
View File

@@ -0,0 +1,289 @@
//
// Base styles
//
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
word-wrap: break-word;
background-color: $card-bg;
background-clip: border-box;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
> hr {
margin-right: 0;
margin-left: 0;
}
> .list-group:first-child {
.list-group-item:first-child {
@include border-top-radius($card-border-radius);
}
}
> .list-group:last-child {
.list-group-item:last-child {
@include border-bottom-radius($card-border-radius);
}
}
}
.card-body {
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
padding: $card-spacer-x;
color: $card-color;
}
.card-title {
margin-bottom: $card-spacer-y;
}
.card-subtitle {
margin-top: -$card-spacer-y / 2;
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link {
@include hover {
text-decoration: none;
}
+ .card-link {
margin-left: $card-spacer-x;
}
}
//
// Optional textual caps
//
.card-header {
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}
+ .list-group {
.list-group-item:first-child {
border-top: 0;
}
}
}
.card-footer {
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
&:last-child {
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
}
}
//
// Header navs
//
.card-header-tabs {
margin-right: -$card-spacer-x / 2;
margin-bottom: -$card-spacer-y;
margin-left: -$card-spacer-x / 2;
border-bottom: 0;
}
.card-header-pills {
margin-right: -$card-spacer-x / 2;
margin-left: -$card-spacer-x / 2;
}
// Card image
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
}
.card-img {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-radius($card-inner-border-radius);
}
// Card image caps
.card-img-top {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-top-radius($card-inner-border-radius);
}
.card-img-bottom {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-bottom-radius($card-inner-border-radius);
}
// Card deck
.card-deck {
display: flex;
flex-direction: column;
.card {
margin-bottom: $card-deck-margin;
}
@include media-breakpoint-up(sm) {
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;
.card {
display: flex;
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
flex-direction: column;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
}
}
}
//
// Card groups
//
.card-group {
display: flex;
flex-direction: column;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
margin-bottom: $card-group-margin;
}
@include media-breakpoint-up(sm) {
flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-bottom: 0;
+ .card {
margin-left: 0;
border-left: 0;
}
// Handle rounded corners
@if $enable-rounded {
&:not(:last-child) {
@include border-right-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-right-radius: 0;
}
}
&:not(:first-child) {
@include border-left-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-left-radius: 0;
}
}
}
}
}
}
//
// Columns
//
.card-columns {
.card {
margin-bottom: $card-columns-margin;
}
@include media-breakpoint-up(sm) {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
orphans: 1;
widows: 1;
.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
}
}
}
//
// Accordion
//
.accordion {
> .card {
overflow: hidden;
&:not(:first-of-type) {
.card-header:first-child {
@include border-radius(0);
}
&:not(:last-of-type) {
border-bottom: 0;
@include border-radius(0);
}
}
&:first-of-type {
border-bottom: 0;
@include border-bottom-radius(0);
}
&:last-of-type {
@include border-top-radius(0);
}
.card-header {
margin-bottom: -$card-border-width;
}
}
}

197
assets/scss/bootstrap/_carousel.scss Normal file
View File

@@ -0,0 +1,197 @@
// Notes on the classes:
//
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
// we're preventing all actions instead
// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
// the active slide is heading.
// 3. .active.carousel-item is the current slide.
// 4. .active.carousel-item-left and .active.carousel-item-right is the current
// slide in its in-transition state. Only one of these occurs at a time.
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
// is the upcoming slide in transition.
.carousel {
position: relative;
}
.carousel.pointer-event {
touch-action: pan-y;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
@include clearfix();
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
backface-visibility: hidden;
@include transition($carousel-transition);
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
transform: translateX(-100%);
}
//
// Alternate transitions
//
.carousel-fade {
.carousel-item {
opacity: 0;
transition-property: opacity;
transform: none;
}
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
z-index: 1;
opacity: 1;
}
.active.carousel-item-left,
.active.carousel-item-right {
z-index: 0;
opacity: 0;
@include transition(0s $carousel-transition-duration opacity);
}
}
//
// Left/right controls for nav
//
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
// Use flex for alignment (1-3)
display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
color: $carousel-control-color;
text-align: center;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
// Hover/focus state
@include hover-focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
opacity: $carousel-control-hover-opacity;
}
}
.carousel-control-prev {
left: 0;
@if $enable-gradients {
background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
}
}
.carousel-control-next {
right: 0;
@if $enable-gradients {
background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
}
}
// Icons for within
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
background: no-repeat 50% / 100% 100%;
}
.carousel-control-prev-icon {
background-image: $carousel-control-prev-icon-bg;
}
.carousel-control-next-icon {
background-image: $carousel-control-next-icon-bg;
}
// Optional indicator pips
//
// Add an ordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 15;
display: flex;
justify-content: center;
padding-left: 0; // override <ol> default
// Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width;
margin-left: $carousel-control-width;
list-style: none;
li {
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
// Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: .5;
@include transition($carousel-indicator-transition);
}
.active {
opacity: 1;
}
}
// Optional captions
//
//
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) / 2;
bottom: 20px;
left: (100% - $carousel-caption-width) / 2;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: $carousel-caption-color;
text-align: center;
}

41
assets/scss/bootstrap/_close.scss Normal file
View File

@@ -0,0 +1,41 @@
.close {
float: right;
@include font-size($close-font-size);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .5;
// Override <a>'s hover style
@include hover {
color: $close-color;
text-decoration: none;
}
&:not(:disabled):not(.disabled) {
@include hover-focus {
opacity: .75;
}
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable-next-line selector-no-qualifying-type
button.close {
padding: 0;
background-color: transparent;
border: 0;
appearance: none;
}
// Future-proof disabling of clicks on `<a>` elements
// stylelint-disable-next-line selector-no-qualifying-type
a.close.disabled {
pointer-events: none;
}

48
assets/scss/bootstrap/_code.scss Normal file
View File

@@ -0,0 +1,48 @@
// Inline code
code {
@include font-size($code-font-size);
color: $code-color;
word-break: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
color: inherit;
}
}
// User input typically entered via keyboard
kbd {
padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
@include box-shadow($kbd-box-shadow);
kbd {
padding: 0;
@include font-size(100%);
font-weight: $nested-kbd-font-weight;
@include box-shadow(none);
}
}
// Blocks of code
pre {
display: block;
@include font-size($code-font-size);
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
@include font-size(inherit);
color: inherit;
word-break: normal;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}

507
assets/scss/bootstrap/_custom-forms.scss Normal file
View File

@@ -0,0 +1,507 @@
// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// https://useiconic.com/open
// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.
.custom-control {
position: relative;
display: block;
min-height: $font-size-base * $line-height-base;
padding-left: $custom-control-gutter + $custom-control-indicator-size;
}
.custom-control-inline {
display: inline-flex;
margin-right: $custom-control-spacer-x;
}
.custom-control-input {
position: absolute;
z-index: -1; // Put the input behind the label so it doesn't overlay text
opacity: 0;
&:checked ~ .custom-control-label::before {
color: $custom-control-indicator-checked-color;
border-color: $custom-control-indicator-checked-border-color;
@include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-control-indicator-checked-box-shadow);
}
&:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
}
&:focus:not(:checked) ~ .custom-control-label::before {
border-color: $custom-control-indicator-focus-border-color;
}
&:not(:disabled):active ~ .custom-control-label::before {
color: $custom-control-indicator-active-color;
background-color: $custom-control-indicator-active-bg;
border-color: $custom-control-indicator-active-border-color;
@include box-shadow($custom-control-indicator-active-box-shadow);
}
&:disabled {
~ .custom-control-label {
color: $custom-control-label-disabled-color;
&::before {
background-color: $custom-control-indicator-disabled-bg;
}
}
}
}
// Custom control indicators
//
// Build the custom controls out of pseudo-elements.
.custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: top;
// Background-color and (when enabled) gradient
&::before {
position: absolute;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
content: "";
background-color: $custom-control-indicator-bg;
border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Foreground (icon)
&::after {
position: absolute;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
content: "";
background: no-repeat 50% / #{$custom-control-indicator-bg-size};
}
}
// Checkboxes
//
// Tweak just a few things for checkboxes.
.custom-checkbox {
.custom-control-label::before {
@include border-radius($custom-checkbox-indicator-border-radius);
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-image: $custom-checkbox-indicator-icon-checked;
}
}
.custom-control-input:indeterminate ~ .custom-control-label {
&::before {
border-color: $custom-checkbox-indicator-indeterminate-border-color;
@include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
}
&::after {
background-image: $custom-checkbox-indicator-icon-indeterminate;
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
background-color: $custom-control-indicator-checked-disabled-bg;
}
&:indeterminate ~ .custom-control-label::before {
background-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
// Radios
//
// Tweak just a few things for radios.
.custom-radio {
.custom-control-label::before {
// stylelint-disable-next-line property-blacklist
border-radius: $custom-radio-indicator-border-radius;
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-image: $custom-radio-indicator-icon-checked;
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
background-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
// switches
//
// Tweak a few things for switches
.custom-switch {
padding-left: $custom-switch-width + $custom-control-gutter;
.custom-control-label {
&::before {
left: -($custom-switch-width + $custom-control-gutter);
width: $custom-switch-width;
pointer-events: all;
// stylelint-disable-next-line property-blacklist
border-radius: $custom-switch-indicator-border-radius;
}
&::after {
top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2});
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
background-color: $custom-control-indicator-border-color;
// stylelint-disable-next-line property-blacklist
border-radius: $custom-switch-indicator-border-radius;
@include transition(transform .15s ease-in-out, $custom-forms-transition);
}
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-color: $custom-control-indicator-bg;
transform: translateX($custom-switch-width - $custom-control-indicator-size);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
background-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
//
.custom-select {
display: inline-block;
width: 100%;
height: $custom-select-height;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
font-family: $custom-select-font-family;
@include font-size($custom-select-font-size);
font-weight: $custom-select-font-weight;
line-height: $custom-select-line-height;
color: $custom-select-color;
vertical-align: middle;
background: $custom-select-background;
background-color: $custom-select-bg;
border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius, 0);
@include box-shadow($custom-select-box-shadow);
appearance: none;
&:focus {
border-color: $custom-select-focus-border-color;
outline: 0;
@if $enable-shadows {
box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
} @else {
box-shadow: $custom-select-focus-box-shadow;
}
&::-ms-value {
// For visual consistency with other platforms/browsers,
// suppress the default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
&[multiple],
&[size]:not([size="1"]) {
height: auto;
padding-right: $custom-select-padding-x;
background-image: none;
}
&:disabled {
color: $custom-select-disabled-color;
background-color: $custom-select-disabled-bg;
}
// Hides the default caret in IE11
&::-ms-expand {
display: none;
}
}
.custom-select-sm {
height: $custom-select-height-sm;
padding-top: $custom-select-padding-y-sm;
padding-bottom: $custom-select-padding-y-sm;
padding-left: $custom-select-padding-x-sm;
@include font-size($custom-select-font-size-sm);
}
.custom-select-lg {
height: $custom-select-height-lg;
padding-top: $custom-select-padding-y-lg;
padding-bottom: $custom-select-padding-y-lg;
padding-left: $custom-select-padding-x-lg;
@include font-size($custom-select-font-size-lg);
}
// File
//
// Custom file input.
.custom-file {
position: relative;
display: inline-block;
width: 100%;
height: $custom-file-height;
margin-bottom: 0;
}
.custom-file-input {
position: relative;
z-index: 2;
width: 100%;
height: $custom-file-height;
margin: 0;
opacity: 0;
&:focus ~ .custom-file-label {
border-color: $custom-file-focus-border-color;
box-shadow: $custom-file-focus-box-shadow;
}
&:disabled ~ .custom-file-label {
background-color: $custom-file-disabled-bg;
}
@each $lang, $value in $custom-file-text {
&:lang(#{$lang}) ~ .custom-file-label::after {
content: $value;
}
}
~ .custom-file-label[data-browse]::after {
content: attr(data-browse);
}
}
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
color: $custom-file-color;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: $custom-file-height-inner;
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
content: "Browse";
@include gradient-bg($custom-file-button-bg);
border-left: inherit;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
}
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.
.custom-range {
width: 100%;
height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
&:focus {
outline: none;
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
&::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
}
&::-moz-focus-outer {
border: 0;
}
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-webkit-slider-runnable-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent; // Why?
cursor: $custom-range-track-cursor;
background-color: $custom-range-track-bg;
border-color: transparent;
@include border-radius($custom-range-track-border-radius);
@include box-shadow($custom-range-track-box-shadow);
}
&::-moz-range-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-moz-range-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent;
cursor: $custom-range-track-cursor;
background-color: $custom-range-track-bg;
border-color: transparent; // Firefox specific?
@include border-radius($custom-range-track-border-radius);
@include box-shadow($custom-range-track-box-shadow);
}
&::-ms-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: 0; // Edge specific
margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-ms-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent;
cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
border-width: $custom-range-thumb-height / 2;
@include box-shadow($custom-range-track-box-shadow);
}
&::-ms-fill-lower {
background-color: $custom-range-track-bg;
@include border-radius($custom-range-track-border-radius);
}
&::-ms-fill-upper {
margin-right: 15px; // arbitrary?
background-color: $custom-range-track-bg;
@include border-radius($custom-range-track-border-radius);
}
&:disabled {
&::-webkit-slider-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
&::-webkit-slider-runnable-track {
cursor: default;
}
&::-moz-range-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
&::-moz-range-track {
cursor: default;
}
&::-ms-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
}
}
.custom-control-label::before,
.custom-file-label,
.custom-select {
@include transition($custom-forms-transition);
}

191
assets/scss/bootstrap/_dropdown.scss Normal file
View File

@@ -0,0 +1,191 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropright,
.dropdown,
.dropleft {
position: relative;
}
.dropdown-toggle {
white-space: nowrap;
// Generate the caret automatically
@include caret;
}
// The dropdown menu
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: $dropdown-min-width;
padding: $dropdown-padding-y 0;
margin: $dropdown-spacer 0 0; // override default ul
@include font-size($dropdown-font-size);
color: $dropdown-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: $dropdown-bg;
background-clip: padding-box;
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow);
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-left {
right: auto;
left: 0;
}
.dropdown-menu#{$infix}-right {
right: 0;
left: auto;
}
}
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
.dropup {
.dropdown-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(up);
}
}
.dropright {
.dropdown-menu {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(right);
&::after {
vertical-align: 0;
}
}
}
.dropleft {
.dropdown-menu {
top: 0;
right: 100%;
left: auto;
margin-top: 0;
margin-right: $dropdown-spacer;
}
.dropdown-toggle {
@include caret(left);
&::before {
vertical-align: 0;
}
}
}
// When enabled Popper.js, reset basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors
.dropdown-menu {
&[x-placement^="top"],
&[x-placement^="right"],
&[x-placement^="bottom"],
&[x-placement^="left"] {
right: auto;
bottom: auto;
}
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
@include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y);
}
// Links, buttons, and more within the dropdown menu
//
// `<button>`-specific styles are denoted with `// For <button>s`
.dropdown-item {
display: block;
width: 100%; // For `<button>`s
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
clear: both;
font-weight: $font-weight-normal;
color: $dropdown-link-color;
text-align: inherit; // For `<button>`s
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
// Prevent dropdown overflow if there's no padding
// See https://github.com/twbs/bootstrap/pull/27703
@if $dropdown-padding-y == 0 {
&:first-child {
@include border-top-radius($dropdown-inner-border-radius);
}
&:last-child {
@include border-bottom-radius($dropdown-inner-border-radius);
}
}
@include hover-focus {
color: $dropdown-link-hover-color;
text-decoration: none;
@include gradient-bg($dropdown-link-hover-bg);
}
&.active,
&:active {
color: $dropdown-link-active-color;
text-decoration: none;
@include gradient-bg($dropdown-link-active-bg);
}
&.disabled,
&:disabled {
color: $dropdown-link-disabled-color;
pointer-events: none;
background-color: transparent;
// Remove CSS gradients if they're enabled
@if $enable-gradients {
background-image: none;
}
}
}
.dropdown-menu.show {
display: block;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: $dropdown-padding-y $dropdown-item-padding-x;
margin-bottom: 0; // for use with heading elements
@include font-size($font-size-sm);
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
// Dropdown text
.dropdown-item-text {
display: block;
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
color: $dropdown-link-color;
}

330
assets/scss/bootstrap/_forms.scss Normal file
View File

@@ -0,0 +1,330 @@
// stylelint-disable selector-no-qualifying-type
//
// Textual form controls
//
.form-control {
display: block;
width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@include font-size($input-font-size);
font-weight: $input-font-weight;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
&::placeholder {
color: $input-placeholder-color;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&:disabled,
&[readonly] {
background-color: $input-disabled-bg;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
}
select.form-control {
&:focus::-ms-value {
// Suppress the nested default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
// match the appearance of the native widget.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range {
display: block;
width: 100%;
}
//
// Labels
//
// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label {
padding-top: calc(#{$input-padding-y} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
margin-bottom: 0; // Override the `<label>/<legend>` default
@include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height;
}
.col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
}
.col-form-label-sm {
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
}
// Readonly controls as plain text
//
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)
.form-control-plaintext {
display: block;
width: 100%;
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
line-height: $input-line-height;
color: $input-plaintext-color;
background-color: transparent;
border: solid transparent;
border-width: $input-border-width 0;
&.form-control-sm,
&.form-control-lg {
padding-right: 0;
padding-left: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// Repeated in `_input_group.scss` to avoid Sass extend issues.
.form-control-sm {
height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
.form-control-lg {
height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
// stylelint-disable-next-line no-duplicate-selectors
select.form-control {
&[size],
&[multiple] {
height: auto;
}
}
textarea.form-control {
height: auto;
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: $form-group-margin-bottom;
}
.form-text {
display: block;
margin-top: $form-text-margin-top;
}
// Form grid
//
// Special replacement for our grid system's `.row` for tighter form layouts.
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -$form-grid-gutter-width / 2;
margin-left: -$form-grid-gutter-width / 2;
> .col,
> [class*="col-"] {
padding-right: $form-grid-gutter-width / 2;
padding-left: $form-grid-gutter-width / 2;
}
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.form-check {
position: relative;
display: block;
padding-left: $form-check-input-gutter;
}
.form-check-input {
position: absolute;
margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter;
&:disabled ~ .form-check-label {
color: $text-muted;
}
}
.form-check-label {
margin-bottom: 0; // Override default `<label>` bottom margin
}
.form-check-inline {
display: inline-flex;
align-items: center;
padding-left: 0; // Override base .form-check
margin-right: $form-check-inline-margin-x;
// Undo .form-check-input defaults and add some `margin-right`.
.form-check-input {
position: static;
margin-top: 0;
margin-right: $form-check-inline-input-margin-x;
margin-left: 0;
}
}
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
// Because we use flex, the initial sizing of checkboxes is collapsed and
// doesn't occupy the full-width (which is what we want for xs grid tier),
// so we force that here.
.form-check {
width: 100%;
}
// Kick in the inline
@include media-breakpoint-up(sm) {
label {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
// Inline-block all the things for "inline"
.form-group {
display: flex;
flex: 0 0 auto;
flex-flow: row wrap;
align-items: center;
margin-bottom: 0;
}
// Allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Make static controls behave like regular ones
.form-control-plaintext {
display: inline-block;
}
.input-group,
.custom-select {
width: auto;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.form-check {
display: flex;
align-items: center;
justify-content: center;
width: auto;
padding-left: 0;
}
.form-check-input {
position: relative;
flex-shrink: 0;
margin-top: 0;
margin-right: $form-check-input-margin-x;
margin-left: 0;
}
.custom-control {
align-items: center;
justify-content: center;
}
.custom-control-label {
margin-bottom: 0;
}
}
}

86
assets/scss/bootstrap/_functions.scss Normal file
View File

@@ -0,0 +1,86 @@
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null or unit($num) == "%" {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $dark;
} @else {
@return $light;
}
}
// Retrieve color Sass maps
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, $black, $white);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}

52
assets/scss/bootstrap/_grid.scss Normal file
View File

@@ -0,0 +1,52 @@
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes {
.container {
@include make-container();
@include make-container-max-widths();
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but with 100% width for
// fluid, full width layouts.
@if $enable-grid-classes {
.container-fluid {
@include make-container();
}
}
// Row
//
// Rows contain and clear the floats of your columns.
@if $enable-grid-classes {
.row {
@include make-row();
}
// Remove the negative margin from default .row, then the horizontal padding
// from all immediate children columns (to prevent runaway style inheritance).
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
}
// Columns
//
// Common styles for small and large grid columns
@if $enable-grid-classes {
@include make-grid-columns();
}

42
assets/scss/bootstrap/_images.scss Normal file
View File

@@ -0,0 +1,42 @@
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
@include img-fluid;
}
// Image thumbnails
.img-thumbnail {
padding: $thumbnail-padding;
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
@include border-radius($thumbnail-border-radius);
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid;
}
//
// Figures
//
.figure {
// Ensures the caption's text aligns with the image.
display: inline-block;
}
.figure-img {
margin-bottom: $spacer / 2;
line-height: 1;
}
.figure-caption {
@include font-size($figure-caption-font-size);
color: $figure-caption-color;
}

193
assets/scss/bootstrap/_input-group.scss Normal file
View File

@@ -0,0 +1,193 @@
// stylelint-disable selector-no-qualifying-type
//
// Base styles
//
.input-group {
position: relative;
display: flex;
flex-wrap: wrap; // For form validation feedback
align-items: stretch;
width: 100%;
> .form-control,
> .form-control-plaintext,
> .custom-select,
> .custom-file {
position: relative; // For focus state's z-index
flex: 1 1 auto;
// Add width 1% and flex-basis auto to ensure that button will not wrap out
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
width: 1%;
margin-bottom: 0;
+ .form-control,
+ .custom-select,
+ .custom-file {
margin-left: -$input-border-width;
}
}
// Bring the "active" form control to the top of surrounding elements
> .form-control:focus,
> .custom-select:focus,
> .custom-file .custom-file-input:focus ~ .custom-file-label {
z-index: 3;
}
// Bring the custom file input above the label
> .custom-file .custom-file-input:focus {
z-index: 4;
}
> .form-control,
> .custom-select {
&:not(:last-child) { @include border-right-radius(0); }
&:not(:first-child) { @include border-left-radius(0); }
}
// Custom file inputs have more complex markup, thus requiring different
// border-radius overrides.
> .custom-file {
display: flex;
align-items: center;
&:not(:last-child) .custom-file-label,
&:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
}
}
// Prepend and append
//
// While it requires one extra layer of HTML for each, dedicated prepend and
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
// 3) support HTML5 form validation.
.input-group-prepend,
.input-group-append {
display: flex;
// Ensure buttons are always above inputs for more visually pleasing borders.
// This isn't needed for `.input-group-text` since it shares the same border-color
// as our inputs.
.btn {
position: relative;
z-index: 2;
&:focus {
z-index: 3;
}
}
.btn + .btn,
.btn + .input-group-text,
.input-group-text + .input-group-text,
.input-group-text + .btn {
margin-left: -$input-border-width;
}
}
.input-group-prepend { margin-right: -$input-border-width; }
.input-group-append { margin-left: -$input-border-width; }
// Textual addons
//
// Serves as a catch-all element for any text or radio/checkbox input you wish
// to prepend or append to an input.
.input-group-text {
display: flex;
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
@include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius);
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Sizing
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
height: $input-height-lg;
}
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
height: $input-height-sm;
}
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}
// Prepend and append rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
@include border-right-radius(0);
}
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
@include border-left-radius(0);
}

17
assets/scss/bootstrap/_jumbotron.scss Normal file
View File

@@ -0,0 +1,17 @@
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding;
color: $jumbotron-color;
background-color: $jumbotron-bg;
@include border-radius($border-radius-lg);
@include media-breakpoint-up(sm) {
padding: ($jumbotron-padding * 2) $jumbotron-padding;
}
}
.jumbotron-fluid {
padding-right: 0;
padding-left: 0;
@include border-radius(0);
}

149
assets/scss/bootstrap/_list-group.scss Normal file
View File

@@ -0,0 +1,149 @@
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
display: flex;
flex-direction: column;
// No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol
margin-bottom: 0;
}
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: $list-group-action-color;
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
@include hover-focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: $list-group-action-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
&:active {
color: $list-group-action-active-color;
background-color: $list-group-action-active-bg;
}
}
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width;
color: $list-group-color;
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
&:first-child {
@include border-top-radius($list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
@include border-bottom-radius($list-group-border-radius);
}
&.disabled,
&:disabled {
color: $list-group-disabled-color;
pointer-events: none;
background-color: $list-group-disabled-bg;
}
// Include both here for `<a>`s and `<button>`s
&.active {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border-color;
}
}
// Horizontal
//
// Change the layout of list group items from vertical (default) to horizontal.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.list-group-horizontal#{$infix} {
flex-direction: row;
.list-group-item {
margin-right: -$list-group-border-width;
margin-bottom: 0;
&:first-child {
@include border-left-radius($list-group-border-radius);
@include border-top-right-radius(0);
}
&:last-child {
margin-right: 0;
@include border-right-radius($list-group-border-radius);
@include border-bottom-left-radius(0);
}
}
}
}
}
// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most
// useful within other components (e.g., cards).
.list-group-flush {
.list-group-item {
border-right: 0;
border-left: 0;
@include border-radius(0);
&:last-child {
margin-bottom: -$list-group-border-width;
}
}
&:first-child {
.list-group-item:first-child {
border-top: 0;
}
}
&:last-child {
.list-group-item:last-child {
margin-bottom: 0;
border-bottom: 0;
}
}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $color, $value in $theme-colors {
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
}

8
assets/scss/bootstrap/_media.scss Normal file
View File

@@ -0,0 +1,8 @@
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}

47
assets/scss/bootstrap/_mixins.scss Normal file
View File

@@ -0,0 +1,47 @@
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
@import "vendor/rfs";
// Deprecate
@import "mixins/deprecate";
// Utilities
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/image";
@import "mixins/badge";
@import "mixins/resize";
@import "mixins/screen-reader";
@import "mixins/size";
@import "mixins/reset-text";
@import "mixins/text-emphasis";
@import "mixins/text-hide";
@import "mixins/text-truncate";
@import "mixins/visibility";
// // Components
@import "mixins/alert";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/list-group";
@import "mixins/nav-divider";
@import "mixins/forms";
@import "mixins/table-row";
// // Skins
@import "mixins/background-variant";
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";
// // Layout
@import "mixins/clearfix";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "mixins/float";

229
assets/scss/bootstrap/_modal.scss Normal file
View File

@@ -0,0 +1,229 @@
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and stuff
.modal-open {
// Kill the scroll on the body
overflow: hidden;
.modal {
overflow-x: hidden;
overflow-y: auto;
}
}
// Container that the modal scrolls within
.modal {
position: fixed;
top: 0;
left: 0;
z-index: $zindex-modal;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
// See also https://github.com/twbs/bootstrap/issues/17695
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
width: auto;
margin: $modal-dialog-margin;
// allow clicks to pass through for custom click handling to close modal
pointer-events: none;
// When fading in the modal, animate it to slide down
.modal.fade & {
@include transition($modal-transition);
transform: $modal-fade-transform;
}
.modal.show & {
transform: $modal-show-transform;
}
}
.modal-dialog-scrollable {
display: flex; // IE10/11
max-height: calc(100% - #{$modal-dialog-margin * 2});
.modal-content {
max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
overflow: hidden;
}
.modal-header,
.modal-footer {
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
}
}
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - #{$modal-dialog-margin * 2});
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before {
display: block; // IE10
height: calc(100vh - #{$modal-dialog-margin * 2});
content: "";
}
// Ensure `.modal-body` shows scrollbar (IE10/11)
&.modal-dialog-scrollable {
flex-direction: column;
justify-content: center;
height: 100%;
.modal-content {
max-height: none;
}
&::before {
content: none;
}
}
}
// Actual modal
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog
color: $modal-content-color;
pointer-events: auto;
background-color: $modal-content-bg;
background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($modal-content-border-radius);
@include box-shadow($modal-content-box-shadow-xs);
// Remove focus outline from opened modal
outline: 0;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: $zindex-modal-backdrop;
width: 100vw;
height: 100vh;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade { opacity: 0; }
&.show { opacity: $modal-backdrop-opacity; }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
display: flex;
align-items: flex-start; // so the close btn always stays on the upper right corner
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-border-radius);
.close {
padding: $modal-header-padding;
// auto on the left force icon to the right even when there is no .modal-title
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
}
}
// Title text within header
.modal-title {
margin-bottom: 0;
line-height: $modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
// Enable `flex-grow: 1` so that the body take up as much space as possible
// when should there be a fixed height on `.modal-dialog`.
flex: 1 1 auto;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
display: flex;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-border-radius);
// Easily place margin between footer elements
> :not(:first-child) { margin-left: .25rem; }
> :not(:last-child) { margin-right: .25rem; }
}
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
// Scale up the modal
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
.modal-dialog {
max-width: $modal-md;
margin: $modal-dialog-margin-y-sm-up auto;
}
.modal-dialog-scrollable {
max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
.modal-content {
max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
}
}
.modal-dialog-centered {
min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
&::before {
height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
}
}
.modal-content {
@include box-shadow($modal-content-box-shadow-sm-up);
}
.modal-sm { max-width: $modal-sm; }
}
@include media-breakpoint-up(lg) {
.modal-lg,
.modal-xl {
max-width: $modal-lg;
}
}
@include media-breakpoint-up(xl) {
.modal-xl { max-width: $modal-xl; }
}

120
assets/scss/bootstrap/_nav.scss Normal file
View File

@@ -0,0 +1,120 @@
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s or `<ul>`s.
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
@include hover-focus {
text-decoration: none;
}
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color;
pointer-events: none;
cursor: default;
}
}
//
// Tabs
//
.nav-tabs {
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
.nav-item {
margin-bottom: -$nav-tabs-border-width;
}
.nav-link {
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
@include hover-focus {
border-color: $nav-tabs-link-hover-border-color;
}
&.disabled {
color: $nav-link-disabled-color;
background-color: transparent;
border-color: transparent;
}
}
.nav-link.active,
.nav-item.show .nav-link {
color: $nav-tabs-link-active-color;
background-color: $nav-tabs-link-active-bg;
border-color: $nav-tabs-link-active-border-color;
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -$nav-tabs-border-width;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
}
//
// Pills
//
.nav-pills {
.nav-link {
@include border-radius($nav-pills-border-radius);
}
.nav-link.active,
.show > .nav-link {
color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg;
}
}
//
// Justified variants
//
.nav-fill {
.nav-item {
flex: 1 1 auto;
text-align: center;
}
}
.nav-justified {
.nav-item {
flex-basis: 0;
flex-grow: 1;
text-align: center;
}
}
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}

294
assets/scss/bootstrap/_navbar.scss Normal file
View File

@@ -0,0 +1,294 @@
// Contents
//
// Navbar
// Navbar brand
// Navbar nav
// Navbar text
// Navbar divider
// Responsive navbar
// Navbar position
// Navbar themes
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
display: flex;
flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
justify-content: space-between; // space out brand from logo
padding: $navbar-padding-y $navbar-padding-x;
// Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly.
> .container,
> .container-fluid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
}
// Navbar brand
//
// Used for brand, project, or site names.
.navbar-brand {
display: inline-block;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
@include font-size($navbar-brand-font-size);
line-height: inherit;
white-space: nowrap;
@include hover-focus {
text-decoration: none;
}
}
// Navbar nav
//
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
.navbar-nav {
display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
padding-left: 0;
margin-bottom: 0;
list-style: none;
.nav-link:not(.btn) {
padding-right: 0;
padding-left: 0;
}
.dropdown-menu {
position: static;
float: none;
}
}
// Navbar text
//
//
.navbar-text {
display: inline-block;
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
}
// Responsive navbar
//
// Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin.
// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
// For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities.
align-items: center;
}
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
@include font-size($navbar-toggler-font-size);
line-height: 1;
background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius);
@include hover-focus {
text-decoration: none;
}
}
// Keep as a separate element so folks can easily override it with another icon
// or image file as needed.
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
> .container,
> .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
@include media-breakpoint-up($next) {
flex-flow: row nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
}
}
// For nesting containers, have to redeclare for alignment purposes
> .container,
> .container-fluid {
flex-wrap: nowrap;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
// Changes flex-bases to auto because of an IE10 bug
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
}
}
}
}
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
// Dark links against a light background
.navbar-light {
.navbar-brand {
color: $navbar-light-brand-color;
@include hover-focus {
color: $navbar-light-brand-hover-color;
}
}
.navbar-nav {
.nav-link {
color: $navbar-light-color;
@include hover-focus {
color: $navbar-light-hover-color;
}
&.disabled {
color: $navbar-light-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-light-active-color;
}
}
.navbar-toggler {
color: $navbar-light-color;
border-color: $navbar-light-toggler-border-color;
}
.navbar-toggler-icon {
background-image: $navbar-light-toggler-icon-bg;
}
.navbar-text {
color: $navbar-light-color;
a {
color: $navbar-light-active-color;
@include hover-focus {
color: $navbar-light-active-color;
}
}
}
}
// White links against a dark background
.navbar-dark {
.navbar-brand {
color: $navbar-dark-brand-color;
@include hover-focus {
color: $navbar-dark-brand-hover-color;
}
}
.navbar-nav {
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-dark-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
}
.navbar-toggler {
color: $navbar-dark-color;
border-color: $navbar-dark-toggler-border-color;
}
.navbar-toggler-icon {
background-image: $navbar-dark-toggler-icon-bg;
}
.navbar-text {
color: $navbar-dark-color;
a {
color: $navbar-dark-active-color;
@include hover-focus {
color: $navbar-dark-active-color;
}
}
}
}

73
assets/scss/bootstrap/_pagination.scss Normal file
View File

@@ -0,0 +1,73 @@
.pagination {
display: flex;
@include list-unstyled();
@include border-radius();
}
.page-link {
position: relative;
display: block;
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -$pagination-border-width;
line-height: $pagination-line-height;
color: $pagination-color;
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;
&:hover {
z-index: 2;
color: $pagination-hover-color;
text-decoration: none;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border-color;
}
&:focus {
z-index: 2;
outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow;
}
}
.page-item {
&:first-child {
.page-link {
margin-left: 0;
@include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
}
&.active .page-link {
z-index: 1;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
}
&.disabled .page-link {
color: $pagination-disabled-color;
pointer-events: none;
// Opinionated: remove the "hand" cursor set previously for .page-link
cursor: auto;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color;
}
}
//
// Sizing
//
.pagination-lg {
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
}
.pagination-sm {
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
}

171
assets/scss/bootstrap/_popover.scss Normal file
View File

@@ -0,0 +1,171 @@
.popover {
position: absolute;
top: 0;
left: 0;
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
@include font-size($popover-font-size);
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: $popover-bg;
background-clip: padding-box;
border: $popover-border-width solid $popover-border-color;
@include border-radius($popover-border-radius);
@include box-shadow($popover-box-shadow);
.arrow {
position: absolute;
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
margin: 0 $border-radius-lg;
&::before,
&::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}
}
}
.bs-popover-top {
margin-bottom: $popover-arrow-height;
> .arrow {
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
&::before {
bottom: 0;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
border-top-color: $popover-arrow-outer-color;
}
&::after {
bottom: $popover-border-width;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
border-top-color: $popover-arrow-color;
}
}
}
.bs-popover-right {
margin-left: $popover-arrow-height;
> .arrow {
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
left: 0;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-right-color: $popover-arrow-outer-color;
}
&::after {
left: $popover-border-width;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-right-color: $popover-arrow-color;
}
}
}
.bs-popover-bottom {
margin-top: $popover-arrow-height;
> .arrow {
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
&::before {
top: 0;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
top: $popover-border-width;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-bottom-color: $popover-arrow-color;
}
}
// This will remove the popover-header's border just below the arrow
.popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width / 2;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
}
.bs-popover-left {
margin-right: $popover-arrow-height;
> .arrow {
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
right: 0;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color;
}
&::after {
right: $popover-border-width;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-left-color: $popover-arrow-color;
}
}
}
.bs-popover-auto {
&[x-placement^="top"] {
@extend .bs-popover-top;
}
&[x-placement^="right"] {
@extend .bs-popover-right;
}
&[x-placement^="bottom"] {
@extend .bs-popover-bottom;
}
&[x-placement^="left"] {
@extend .bs-popover-left;
}
}
// Offset the popover to account for the popover arrow
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
margin-bottom: 0; // Reset the default from Reboot
@include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
@include border-top-radius($offset-border-width);
&:empty {
display: none;
}
}
.popover-body {
padding: $popover-body-padding-y $popover-body-padding-x;
color: $popover-body-color;
}

141
assets/scss/bootstrap/_print.scss Normal file
View File

@@ -0,0 +1,141 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request:
// https://www.phpied.com/delay-loading-your-print-css/
// ==========================================================================
@if $enable-print-styles {
@media print {
*,
*::before,
*::after {
// Bootstrap specific; comment out `color` and `background`
//color: $black !important; // Black prints faster
text-shadow: none !important;
//background: transparent !important;
box-shadow: none !important;
}
a {
&:not(.btn) {
text-decoration: underline;
}
}
// Bootstrap specific; comment the following selector out
//a[href]::after {
// content: " (" attr(href) ")";
//}
abbr[title]::after {
content: " (" attr(title) ")";
}
// Bootstrap specific; comment the following selector out
//
// Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol
//
//a[href^="#"]::after,
//a[href^="javascript:"]::after {
// content: "";
//}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
page-break-inside: avoid;
}
//
// Printing Tables:
// http://css-discuss.incutio.com/wiki/Printing_Tables
//
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap specific changes start
// Specify a size and min-width to make printing closer across browsers.
// We don't set margin here because it breaks `size` in Chrome. We also
// don't use `!important` on `size` as it breaks in Chrome.
@page {
size: $print-page-size;
}
body {
min-width: $print-body-min-width !important;
}
.container {
min-width: $print-body-min-width !important;
}
// Bootstrap components
.navbar {
display: none;
}
.badge {
border: $border-width solid $black;
}
.table {
border-collapse: collapse !important;
td,
th {
background-color: $white !important;
}
}
.table-bordered {
th,
td {
border: 1px solid $gray-300 !important;
}
}
.table-dark {
color: inherit;
th,
td,
thead th,
tbody + tbody {
border-color: $table-border-color;
}
}
.table .thead-dark th {
color: inherit;
border-color: $table-border-color;
}
// Bootstrap specific changes end
}
}

43
assets/scss/bootstrap/_progress.scss Normal file
View File

@@ -0,0 +1,43 @@
// Disable animation if transitions are disabled
@if $enable-transitions {
@keyframes progress-bar-stripes {
from { background-position: $progress-height 0; }
to { background-position: 0 0; }
}
}
.progress {
display: flex;
height: $progress-height;
overflow: hidden; // force rounded corners by cropping it
@include font-size($progress-font-size);
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
color: $progress-bar-color;
text-align: center;
white-space: nowrap;
background-color: $progress-bar-bg;
@include transition($progress-bar-transition);
}
.progress-bar-striped {
@include gradient-striped();
background-size: $progress-height $progress-height;
}
@if $enable-transitions {
.progress-bar-animated {
animation: progress-bar-stripes $progress-bar-animation-timing;
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}

483
assets/scss/bootstrap/_reboot.scss Normal file
View File

@@ -0,0 +1,483 @@
// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
// styles targeting irrelevant browsers while applying new styles.
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// Document
//
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
// 2. Change the default font family in all browsers.
// 3. Correct the line height in all browsers.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 5. Change the default tap highlight to be completely transparent in iOS.
*,
*::before,
*::after {
box-sizing: border-box; // 1
}
html {
font-family: sans-serif; // 2
line-height: 1.15; // 3
-webkit-text-size-adjust: 100%; // 4
-webkit-tap-highlight-color: rgba($black, 0); // 5
}
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
// TODO: remove in v5
// stylelint-disable-next-line selector-list-comma-newline-after
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use
// the `inherit` value on things like `<th>` elements.
body {
margin: 0; // 1
font-family: $font-family-base;
@include font-size($font-size-base);
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: left; // 3
background-color: $body-bg; // 2
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
outline: 0 !important;
}
// Content grouping
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
hr {
box-sizing: content-box; // 1
height: 0; // 1
overflow: visible; // 2
}
//
// Typography
//
// Remove top margins from headings
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
// stylelint-disable-next-line selector-list-comma-newline-after
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: $headings-margin-bottom;
}
// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
}
// Abbreviations
//
// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Remove the bottom border in Firefox 39-.
// 5. Prevent the text-decoration to be skipped.
abbr[title],
abbr[data-original-title] { // 1
text-decoration: underline; // 2
text-decoration: underline dotted; // 2
cursor: help; // 3
border-bottom: 0; // 4
text-decoration-skip-ink: none; // 5
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: $dt-font-weight;
}
dd {
margin-bottom: .5rem;
margin-left: 0; // Undo browser default
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
}
small {
@include font-size(80%); // Add the correct font size in all browsers
}
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
//
sub,
sup {
position: relative;
@include font-size(75%);
line-height: 0;
vertical-align: baseline;
}
sub { bottom: -.25em; }
sup { top: -.5em; }
//
// Links
//
a {
color: $link-color;
text-decoration: $link-decoration;
background-color: transparent; // Remove the gray background on active links in IE 10.
@include hover {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
}
// And undo these styles for placeholder links/named anchors (without href)
// which have not been made explicitly keyboard-focusable (without tabindex).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
@include hover-focus {
color: inherit;
text-decoration: none;
}
&:focus {
outline: 0;
}
}
//
// Code
//
pre,
code,
kbd,
samp {
font-family: $font-family-monospace;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
pre {
// Remove browser default top margin
margin-top: 0;
// Reset browser default of `1em` to use `rem`s
margin-bottom: 1rem;
// Don't allow content to break outside
overflow: auto;
}
//
// Figures
//
figure {
// Apply a consistent margin strategy (matches our type styles).
margin: 0 0 1rem;
}
//
// Images and content
//
img {
vertical-align: middle;
border-style: none; // Remove the border on images inside links in IE 10-.
}
svg {
// Workaround for the SVG overflow bug in IE10/11 is still required.
// See https://github.com/twbs/bootstrap/issues/26878
overflow: hidden;
vertical-align: middle;
}
//
// Tables
//
table {
border-collapse: collapse; // Prevent double borders
}
caption {
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
color: $table-caption-color;
text-align: left;
caption-side: bottom;
}
th {
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
// closest parent with a set `text-align`.
text-align: inherit;
}
//
// Forms
//
label {
// Allow labels to use `margin` for spacing.
display: inline-block;
margin-bottom: $label-margin-bottom;
}
// Remove the default `border-radius` that macOS Chrome adds.
//
// Details at https://github.com/twbs/bootstrap/issues/24093
button {
// stylelint-disable-next-line property-blacklist
border-radius: 0;
}
// Work around a Firefox/IE bug where the transparent `button` background
// results in a loss of the default `button` focus styles.
//
// Credit: https://github.com/suitcss/base/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0; // Remove the margin in Firefox and Safari
font-family: inherit;
@include font-size(inherit);
line-height: inherit;
}
button,
input {
overflow: visible; // Show the overflow in Edge
}
button,
select {
text-transform: none; // Remove the inheritance of text transform in Firefox
}
// Remove the inheritance of word-wrap in Safari.
//
// Details at https://github.com/twbs/bootstrap/issues/24990
select {
word-wrap: normal;
}
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
button,
[type="button"], // 1
[type="reset"],
[type="submit"] {
-webkit-appearance: button; // 2
}
// Opinionated: add "hand" cursor to non-disabled button elements.
@if $enable-pointer-cursor-for-buttons {
button,
[type="button"],
[type="reset"],
[type="submit"] {
&:not(:disabled) {
cursor: pointer;
}
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
padding: 0; // 2. Remove the padding in IE 10-
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically
// centered within the input.
// See https://bugs.webkit.org/show_bug.cgi?id=139848
// and https://github.com/twbs/bootstrap/issues/11266
-webkit-appearance: listbox;
}
textarea {
overflow: auto; // Remove the default vertical scrollbar in IE.
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: vertical;
}
fieldset {
// Browsers set a default `min-width: min-content;` on fieldsets,
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
// So we reset that to ensure fieldsets behave more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
min-width: 0;
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0;
margin: 0;
border: 0;
}
// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
legend {
display: block;
width: 100%;
max-width: 100%; // 1
padding: 0;
margin-bottom: .5rem;
@include font-size(1.5rem);
line-height: inherit;
color: inherit; // 2
white-space: normal; // 1
}
progress {
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
outline-offset: -2px; // 2. Correct the outline style in Safari.
-webkit-appearance: none;
}
//
// Remove the inner padding in Chrome and Safari on macOS.
//
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//
::-webkit-file-upload-button {
font: inherit; // 2
-webkit-appearance: button; // 1
}
//
// Correct element displays
//
output {
display: inline-block;
}
summary {
display: list-item; // Add the correct display in all browsers
cursor: pointer;
}
template {
display: none; // Add the correct display in IE
}
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
// Needed for proper display in IE 10-.
[hidden] {
display: none !important;
}

19
assets/scss/bootstrap/_root.scss Normal file
View File

@@ -0,0 +1,19 @@
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
--#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$color}: #{$value};
}
@each $bp, $value in $grid-breakpoints {
--breakpoint-#{$bp}: #{$value};
}
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)};
}

55
assets/scss/bootstrap/_spinners.scss Normal file
View File

@@ -0,0 +1,55 @@
//
// Rotating border
//
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
.spinner-border {
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
border: $spinner-border-width solid currentColor;
border-right-color: transparent;
// stylelint-disable-next-line property-blacklist
border-radius: 50%;
animation: spinner-border .75s linear infinite;
}
.spinner-border-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
border-width: $spinner-border-width-sm;
}
//
// Growing circle
//
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
}
}
.spinner-grow {
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
background-color: currentColor;
// stylelint-disable-next-line property-blacklist
border-radius: 50%;
opacity: 0;
animation: spinner-grow .75s linear infinite;
}
.spinner-grow-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
}

185
assets/scss/bootstrap/_tables.scss Normal file
View File

@@ -0,0 +1,185 @@
//
// Basic Bootstrap table
//
.table {
width: 100%;
margin-bottom: $spacer;
color: $table-color;
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
th,
td {
padding: $table-cell-padding;
vertical-align: top;
border-top: $table-border-width solid $table-border-color;
}
thead th {
vertical-align: bottom;
border-bottom: (2 * $table-border-width) solid $table-border-color;
}
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
}
}
//
// Condensed table w/ half padding
//
.table-sm {
th,
td {
padding: $table-cell-padding-sm;
}
}
// Border versions
//
// Add or remove borders all around the table and between all the columns.
.table-bordered {
border: $table-border-width solid $table-border-color;
th,
td {
border: $table-border-width solid $table-border-color;
}
thead {
th,
td {
border-bottom-width: 2 * $table-border-width;
}
}
}
.table-borderless {
th,
td,
thead th,
tbody + tbody {
border: 0;
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-accent-bg;
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody tr {
@include hover {
color: $table-hover-color;
background-color: $table-hover-bg;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
@each $color, $value in $theme-colors {
@include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
}
@include table-row-variant(active, $table-active-bg);
// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.
// stylelint-disable-next-line no-duplicate-selectors
.table {
.thead-dark {
th {
color: $table-dark-color;
background-color: $table-dark-bg;
border-color: $table-dark-border-color;
}
}
.thead-light {
th {
color: $table-head-color;
background-color: $table-head-bg;
border-color: $table-border-color;
}
}
}
.table-dark {
color: $table-dark-color;
background-color: $table-dark-bg;
th,
td,
thead th {
border-color: $table-dark-border-color;
}
&.table-bordered {
border: 0;
}
&.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-dark-accent-bg;
}
}
&.table-hover {
tbody tr {
@include hover {
color: $table-dark-hover-color;
background-color: $table-dark-hover-bg;
}
}
}
}
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
.table-responsive {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
// Prevent double border on horizontal scroll due to use of `display: block;`
> .table-bordered {
border: 0;
}
}
}
}
}

44
assets/scss/bootstrap/_toasts.scss Normal file
View File

@@ -0,0 +1,44 @@
.toast {
max-width: $toast-max-width;
overflow: hidden; // cheap rounded corners on nested items
@include font-size($toast-font-size);
color: $toast-color;
background-color: $toast-background-color;
background-clip: padding-box;
border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow;
backdrop-filter: blur(10px);
opacity: 0;
@include border-radius($toast-border-radius);
&:not(:last-child) {
margin-bottom: $toast-padding-x;
}
&.showing {
opacity: 1;
}
&.show {
display: block;
opacity: 1;
}
&.hide {
display: none;
}
}
.toast-header {
display: flex;
align-items: center;
padding: $toast-padding-y $toast-padding-x;
color: $toast-header-color;
background-color: $toast-header-background-color;
background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color;
}
.toast-body {
padding: $toast-padding-x; // apply to both vertical and horizontal
}

115
assets/scss/bootstrap/_tooltip.scss Normal file
View File

@@ -0,0 +1,115 @@
// Base class
.tooltip {
position: absolute;
z-index: $zindex-tooltip;
display: block;
margin: $tooltip-margin;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
@include font-size($tooltip-font-size);
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
&.show { opacity: $tooltip-opacity; }
.arrow {
position: absolute;
display: block;
width: $tooltip-arrow-width;
height: $tooltip-arrow-height;
&::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
}
}
}
.bs-tooltip-top {
padding: $tooltip-arrow-height 0;
.arrow {
bottom: 0;
&::before {
top: 0;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-top-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-right {
padding: 0 $tooltip-arrow-height;
.arrow {
left: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
&::before {
right: 0;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-right-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-bottom {
padding: $tooltip-arrow-height 0;
.arrow {
top: 0;
&::before {
bottom: 0;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-left {
padding: 0 $tooltip-arrow-height;
.arrow {
right: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
&::before {
left: 0;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-auto {
&[x-placement^="top"] {
@extend .bs-tooltip-top;
}
&[x-placement^="right"] {
@extend .bs-tooltip-right;
}
&[x-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
&[x-placement^="left"] {
@extend .bs-tooltip-left;
}
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: $tooltip-max-width;
padding: $tooltip-padding-y $tooltip-padding-x;
color: $tooltip-color;
text-align: center;
background-color: $tooltip-bg;
@include border-radius($tooltip-border-radius);
}

20
assets/scss/bootstrap/_transitions.scss Normal file
View File

@@ -0,0 +1,20 @@
.fade {
@include transition($transition-fade);
&:not(.show) {
opacity: 0;
}
}
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}

125
assets/scss/bootstrap/_type.scss Normal file
View File

@@ -0,0 +1,125 @@
// stylelint-disable declaration-no-important, selector-list-comma-newline-after
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
}
h1, .h1 { @include font-size($h1-font-size); }
h2, .h2 { @include font-size($h2-font-size); }
h3, .h3 { @include font-size($h3-font-size); }
h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-font-size); }
h6, .h6 { @include font-size($h6-font-size); }
.lead {
@include font-size($lead-font-size);
font-weight: $lead-font-weight;
}
// Type display classes
.display-1 {
@include font-size($display1-size);
font-weight: $display1-weight;
line-height: $display-line-height;
}
.display-2 {
@include font-size($display2-size);
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3 {
@include font-size($display3-size);
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4 {
@include font-size($display4-size);
font-weight: $display4-weight;
line-height: $display-line-height;
}
//
// Horizontal rules
//
hr {
margin-top: $hr-margin-y;
margin-bottom: $hr-margin-y;
border: 0;
border-top: $hr-border-width solid $hr-border-color;
}
//
// Emphasis
//
small,
.small {
@include font-size($small-font-size);
font-weight: $font-weight-normal;
}
mark,
.mark {
padding: $mark-padding;
background-color: $mark-bg;
}
//
// Lists
//
.list-unstyled {
@include list-unstyled;
}
// Inline turns list items into inline-block
.list-inline {
@include list-unstyled;
}
.list-inline-item {
display: inline-block;
&:not(:last-child) {
margin-right: $list-inline-padding;
}
}
//
// Misc
//
// Builds on `abbr`
.initialism {
@include font-size(90%);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $spacer;
@include font-size($blockquote-font-size);
}
.blockquote-footer {
display: block;
@include font-size($blockquote-small-font-size);
color: $blockquote-small-color;
&::before {
content: "\2014\00A0"; // em dash, nbsp
}
}

17
assets/scss/bootstrap/_utilities.scss Normal file
View File

@@ -0,0 +1,17 @@
@import "utilities/align";
@import "utilities/background";
@import "utilities/borders";
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/embed";
@import "utilities/flex";
@import "utilities/float";
@import "utilities/overflow";
@import "utilities/position";
@import "utilities/screenreaders";
@import "utilities/shadows";
@import "utilities/sizing";
@import "utilities/stretched-link";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";

1123
assets/scss/bootstrap/_variables.scss Normal file
View File

File diff suppressed because it is too large Load Diff

29
assets/scss/bootstrap/bootstrap-grid.scss vendored Normal file
View File

@@ -0,0 +1,29 @@
/*!
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
@import "functions";
@import "variables";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "grid";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/spacing";

Some files were not shown because too many files have changed in this diff Show More