iflrandevu/assets/css/themes/regent/_bootswatch.scss

349 lines
4.8 KiB
SCSS
Raw Normal View History

// Regent 5.1.3
// Bootswatch
// Variables
// Mixins
// Navbar
.navbar {
font-size: $font-size-sm;
font-weight: 500;
.navbar-brand,
.nav-link {
&:hover {
text-decoration: underline;
text-decoration-thickness: max(3px, .1875rem, .12em);
}
&:focus {
text-decoration: none;
background-color: $yellow;
}
}
&.bg-primary {
.navbar-brand,
.nav-link {
&:focus {
color: $primary;
}
}
}
&.bg-dark {
.navbar-brand,
.nav-link {
&:focus {
color: $black;
}
}
}
.btn {
box-shadow: none;
&:active {
top: 0;
}
&:focus:not(:active):not(:hover) {
box-shadow: none;
}
}
}
// Buttons
.btn {
position: relative;
border: 3px solid transparent;
box-shadow: 0 2px 0 $black;
&:active {
top: 2px;
}
&:focus {
border-color: $yellow;
outline: 3px solid transparent;
box-shadow: inset 0 0 0 1px $yellow;
}
&:focus,
&:active:focus {
box-shadow: none;
}
&:focus:not(:active):not(:hover) {
color: $black;
background-color: $yellow;
border-color: $yellow;
box-shadow: 0 2px 0 $black;
}
&-secondary {
box-shadow: 0 2px 0 #929191;
}
&-link {
text-decoration: none;
}
&-outline-secondary {
color: $black;
}
}
// Typography
a {
&:hover {
text-decoration-thickness: max(3px, .1875rem, .12em);
}
&:active {
color: $black;
}
&:visited {
color: $purple;
}
}
.blockquote {
padding: 15px;
border-left: 10px solid $gray-400;
.text-end > & {
border-right: 10px solid $gray-400;
border-left: none;
}
.text-center > & {
border: none;
}
&-footer {
padding: 0 15px 15px;
border-left: 10px solid $gray-400;
.text-end > & {
border-right: 10px solid $gray-400;
border-left: none;
}
.text-center > & {
border: none;
}
}
}
// Tables
.table {
> :not(caption) > * > th,
> :not(caption) > * > td {
padding-left: 0;
}
caption {
font-size: $h2-font-size;
}
}
// Forms
label {
margin-bottom: 5px;
}
input[type="file"] {
padding: 9px 13px;
margin-left: -3px;
overflow: auto;
border: none;
&::file-selector-button {
appearance: auto;
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
border: 1px solid #767676;
border-radius: 5px;
}
}
.form-check:not(.form-switch) {
margin-bottom: 10px;
margin-left: 15px;
.form-check-input {
width: 44px;
height: 44px;
margin-left: -44px;
background-size: 44px;
border: 2px solid $black;
&:focus {
border: 3px solid $black;
outline: 3px solid $yellow;
}
}
.form-check-label {
padding: 10px 15px 9px;
margin-bottom: 0;
}
}
.form-switch {
.form-check-input {
width: 44px;
border: 2px solid $black;
&:focus {
border: 3px solid $black;
outline: 3px solid $yellow;
}
}
}
.input-group {
.btn {
box-shadow: none;
&:active {
top: 0;
}
&:focus:not(:active):not(:hover) {
box-shadow: none;
}
}
}
.form-control,
.form-select {
&:focus {
border-color: $black;
outline: 3px solid $yellow;
box-shadow: inset 0 0 0 2px;
}
}
.form-control {
&.is-valid,
&.is-invalid {
&:focus {
border-color: $black;
box-shadow: inset 0 0 0 2px;
}
}
}
.form-group {
margin-bottom: 30px;
}
// Navs
.nav-tabs {
margin-bottom: 0;
.nav-item {
padding: .5rem .25rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
.nav-link {
position: relative;
bottom: -1rem;
text-decoration: underline;
background-color: $gray-100;
border-bottom: 1px solid transparent;
&:hover {
text-decoration-thickness: max(3px, .1875rem, .12em);
border-bottom-color: transparent;
}
&:focus {
background-color: $yellow;
}
&.active {
bottom: -.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
text-decoration: none;
border-bottom-color: $white;
&:focus {
text-decoration: underline;
text-decoration-thickness: max(3px, .1875rem, .12em);
border-bottom-color: $yellow;
}
}
&.disabled {
background-color: $gray-100;
}
}
}
.tab-content {
padding: 30px 20px;
border: 1px solid $border-color;
border-top: none;
}
// Indicators
.breadcrumb {
&-item {
+ .breadcrumb-item {
position: relative;
margin-left: 20px;
&::before {
position: absolute;
top: 6px;
bottom: 0;
left: -12.3px;
width: 9px;
height: 9px;
border: 1px solid $gray-700;
border-width: 1px 1px 0 0;
transform: rotate(45deg);
}
}
}
a {
color: $black;
}
}
.badge {
&.bg-secondary,
&.bg-light {
color: $gray-800;
}
}
// Containers