first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,156 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Alert component
|
||||
*
|
||||
* Overrides for alert bootstrap component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Dismissible alerts
|
||||
.alert-dismissible {
|
||||
|
||||
// Adjust close link color
|
||||
.close {
|
||||
@include hover-focus {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate styles
|
||||
//
|
||||
|
||||
// Custom background color
|
||||
.alert[class*=bg-]:not(.bg-transparent):not(.bg-white):not(.bg-light) {
|
||||
.alert-link {
|
||||
color: inherit;
|
||||
border-bottom-color: rgba($white, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded alert
|
||||
.alert-rounded {
|
||||
padding-left: ($alert-padding-x * 1.5);
|
||||
padding-right: ($alert-padding-x * 1.5);
|
||||
@include border-radius($border-radius-round);
|
||||
|
||||
// Close button
|
||||
&.alert-dismissible {
|
||||
.close {
|
||||
@include border-right-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styled alerts
|
||||
.alert {
|
||||
|
||||
// Icon variations
|
||||
&[class*=alert-styled-] {
|
||||
|
||||
// Icon base
|
||||
&:after {
|
||||
content: $icon-alert-styled-base;
|
||||
font-family: $icon-font-family;
|
||||
color: $white;
|
||||
width: (($alert-padding-y * 2) + $icon-font-size);
|
||||
left: -(($alert-padding-y * 2) + $icon-font-size);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
font-size: $icon-font-size;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Danger icon
|
||||
&.alert-danger:after,
|
||||
&[class*=bg-danger]:after {
|
||||
content: $icon-alert-styled-danger;
|
||||
}
|
||||
|
||||
// Success icon
|
||||
&.alert-success:after,
|
||||
&[class*=bg-success]:after {
|
||||
content: $icon-alert-styled-success;
|
||||
}
|
||||
|
||||
// Warning icon
|
||||
&.alert-warning:after,
|
||||
&[class*=bg-warning]:after {
|
||||
content: $icon-alert-styled-warning;
|
||||
}
|
||||
|
||||
// Info icon
|
||||
&.alert-info:after,
|
||||
&[class*=bg-info]:after {
|
||||
content: $icon-alert-styled-info;
|
||||
}
|
||||
}
|
||||
|
||||
// Styled alert with left icon
|
||||
&.alert-styled-left {
|
||||
border-left-width: (($alert-padding-y * 2) + $icon-font-size);
|
||||
|
||||
// With custom bg
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light) {
|
||||
border-left-color: rgba($black, 0.15)!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Styled alert with right icon
|
||||
&.alert-styled-right {
|
||||
border-right-width: (($alert-padding-y * 2) + $icon-font-size);
|
||||
|
||||
// Change icon position
|
||||
&:after {
|
||||
left: auto;
|
||||
right: -(($alert-padding-y * 2) + $icon-font-size);
|
||||
}
|
||||
|
||||
// With custom bg
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light) {
|
||||
border-right-color: rgba($black, 0.15)!important;
|
||||
}
|
||||
}
|
||||
|
||||
// With custom icon
|
||||
&.alert-styled-custom {
|
||||
&:after {
|
||||
content: $icon-alert-styled-custom; // Change icon code for custom alert
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alert arrow
|
||||
.alert {
|
||||
|
||||
// Left arrow
|
||||
&:not(.ui-pnotify)[class*=alert-arrow-]:before,
|
||||
&.ui-pnotify[class*=alert-arrow-] > .brighttheme:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
border-left: $alert-arrow-size solid;
|
||||
border-top: $alert-arrow-size solid transparent;
|
||||
border-bottom: $alert-arrow-size solid transparent;
|
||||
border-left-color: inherit;
|
||||
margin-top: -$alert-arrow-size;
|
||||
}
|
||||
|
||||
// Right arrow
|
||||
&:not(.ui-pnotify).alert-arrow-right:before,
|
||||
&.ui-pnotify.alert-arrow-right > .brighttheme:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
border-left: 0;
|
||||
border-right: $alert-arrow-size solid;
|
||||
border-right-color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Badge component
|
||||
*
|
||||
* Overrides for badge bootstrap component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Base
|
||||
.badge {
|
||||
|
||||
// Direction arrow in badge dropdowns
|
||||
&.dropdown-toggle {
|
||||
&:after {
|
||||
font-size: 85%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
// Light color
|
||||
&-light {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Linked badge
|
||||
a.badge {
|
||||
|
||||
// Custom bg color
|
||||
&[class*=bg-]:not(.bg-transparent):not(.bg-white):not(.bg-light) {
|
||||
&:hover,
|
||||
&:focus,
|
||||
.show > &.dropdown-toggle {
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Quick fix for badges in buttons
|
||||
.btn .badge {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternative styles
|
||||
//
|
||||
|
||||
// Flat (outline) badge
|
||||
.badge-flat {
|
||||
background-color: transparent;
|
||||
border: $badge-flat-border-width solid transparent;
|
||||
padding: calc(#{$badge-padding-y} - #{$badge-flat-border-width}) calc(#{$badge-padding-x} - #{$badge-flat-border-width});
|
||||
|
||||
// Remove background color and shadow on hover
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
background-color: transparent;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Pill badge
|
||||
&.badge-pill {
|
||||
padding-left: calc(#{$badge-pill-padding-x} - #{$badge-flat-border-width});
|
||||
padding-right: calc(#{$badge-pill-padding-x} - #{$badge-flat-border-width});
|
||||
}
|
||||
}
|
||||
|
||||
// Striped badge
|
||||
.badge-striped {
|
||||
padding: $badge-striped-padding-y $badge-striped-padding-x;
|
||||
position: relative;
|
||||
|
||||
// Stripe
|
||||
&:before {
|
||||
content: '';
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Left alignment
|
||||
&-left {
|
||||
padding-left: calc(#{$badge-padding-x} + #{$badge-striped-border-width});
|
||||
@include border-left-radius(0);
|
||||
|
||||
// Stripe
|
||||
&:before {
|
||||
left: 0;
|
||||
border-left: $badge-striped-border-width solid;
|
||||
border-left-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&-right {
|
||||
padding-right: calc(#{$badge-padding-x} + #{$badge-striped-border-width});
|
||||
@include border-right-radius(0);
|
||||
|
||||
// Stripe
|
||||
&:before {
|
||||
right: 0;
|
||||
border-right: $badge-striped-border-width solid;
|
||||
border-right-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Badge with icon
|
||||
.badge-icon {
|
||||
padding: $badge-padding-x;
|
||||
line-height: 1;
|
||||
|
||||
// Remove top edge from icon
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Floating badge
|
||||
.badge-float {
|
||||
position: absolute;
|
||||
right: $badge-float-margin;
|
||||
top: $badge-float-margin;
|
||||
}
|
||||
|
||||
// Badge mark
|
||||
.badge-mark {
|
||||
padding: 0;
|
||||
border: $badge-mark-border-width solid;
|
||||
@include size($badge-mark-size);
|
||||
@include border-radius($border-radius-round);
|
||||
|
||||
// Override default behaviour if it's empty
|
||||
&:empty {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Breadcrumb component
|
||||
*
|
||||
* Overrides for breadcrumb bootstrap component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Base
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Breadcrumb item
|
||||
.breadcrumb-item {
|
||||
padding: $breadcrumb-padding-y 0;
|
||||
color: inherit;
|
||||
|
||||
// Icons
|
||||
i {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Linked items
|
||||
a.breadcrumb-item {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus,
|
||||
.show > & {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent breadcrumb
|
||||
.page-header-content {
|
||||
|
||||
// Breadcrumb
|
||||
> .breadcrumb {
|
||||
padding-top: 0;
|
||||
padding-bottom: ($breadcrumb-padding-y * 2);
|
||||
|
||||
&:first-child {
|
||||
padding-bottom: 0;
|
||||
padding-top: ($breadcrumb-padding-y * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Divider styles
|
||||
//
|
||||
|
||||
// Dash
|
||||
.breadcrumb-dash > .breadcrumb-item + .breadcrumb-item:before {
|
||||
content: '\2013\00a0';
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.breadcrumb-arrow > .breadcrumb-item + .breadcrumb-item:before {
|
||||
@if $direction == "LTR" {
|
||||
content: '\2192\00a0';
|
||||
}
|
||||
@else {
|
||||
content: '\2190\00a0';
|
||||
}
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.breadcrumb-arrows > .breadcrumb-item + .breadcrumb-item:before {
|
||||
content: '\00bb\00a0';
|
||||
}
|
||||
|
||||
// Caret
|
||||
.breadcrumb-caret > .breadcrumb-item + .breadcrumb-item:before {
|
||||
content: '\203A\00a0';
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Breadcrumb line
|
||||
//
|
||||
|
||||
// Base
|
||||
.breadcrumb-line {
|
||||
position: relative;
|
||||
padding-left: $breadcrumb-line-padding-x;
|
||||
padding-right: $breadcrumb-line-padding-x;
|
||||
border-top: $breadcrumb-line-border-width solid transparent;
|
||||
border-bottom: $breadcrumb-line-border-width solid transparent;
|
||||
|
||||
// Inside page header (all levels)
|
||||
&:not(.breadcrumb-line-component):first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
// After page header content
|
||||
&:last-child {
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Remove bottom margin if inside colored header
|
||||
.page-header-light &,
|
||||
.page-header-dark & {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light line
|
||||
.breadcrumb-line-light {
|
||||
background-color: $breadcrumb-line-light-bg;
|
||||
border-color: $breadcrumb-line-light-border-color;
|
||||
color: $body-color;
|
||||
|
||||
// Remove bottom border in light header
|
||||
&:not(.breadcrumb-line-component):last-child {
|
||||
.page-header-light & {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove borders in dark header
|
||||
.page-header-dark &:not(.breadcrumb-line-component) {
|
||||
border-top-width: 0;
|
||||
|
||||
// Remove bottom border if before title
|
||||
&:first-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Borders in line component
|
||||
&.breadcrumb-line-component {
|
||||
border-color: $breadcrumb-line-light-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark line
|
||||
.breadcrumb-line-dark {
|
||||
background-color: $breadcrumb-line-dark-bg;
|
||||
border-color: transparent;
|
||||
color: $white;
|
||||
|
||||
// Remove bottom border in dark header
|
||||
&:not(.breadcrumb-line-component):last-child {
|
||||
.page-header-dark & {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.breadcrumb-item {
|
||||
&.active {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// In dark page header
|
||||
.page-header-dark & {
|
||||
border-color: $breadcrumb-line-dark-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// As a component
|
||||
.breadcrumb-line-component {
|
||||
border: $breadcrumb-line-border-width solid transparent;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Inside page header
|
||||
.page-header & {
|
||||
margin-left: $page-header-padding-x;
|
||||
margin-right: $page-header-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Breadrumb elements
|
||||
//
|
||||
|
||||
// Base
|
||||
.breadcrumb-elements-item {
|
||||
padding: $breadcrumb-padding-y 0;
|
||||
|
||||
// Spacing between items
|
||||
+ .breadcrumb-elements-item {
|
||||
margin-left: map-get($spacers, 3);
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
a.breadcrumb-elements-item {
|
||||
@extend a.breadcrumb-item;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Layout specific additions
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// # Layout 5
|
||||
//
|
||||
|
||||
@if $layout == 'layout_5' {
|
||||
|
||||
// Breadcrumb line has extra horizontal spacing that
|
||||
// matches page content spacing
|
||||
.breadcrumb-line:not(.breadcrumb-line-component) {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: ($page-container-padding-x / 2) + ($content-container-padding-x * 2);
|
||||
padding-right: ($page-container-padding-x / 2) + ($content-container-padding-x * 2);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: $page-container-padding-x + ($content-container-padding-x * 2);
|
||||
padding-right: $page-container-padding-x + ($content-container-padding-x * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Button group component
|
||||
*
|
||||
* Overrides for button group bootstrap component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Make sure custom border widths work correctly
|
||||
.btn-group {
|
||||
|
||||
// Double border width
|
||||
> .btn.border-2:not(:first-child) {
|
||||
margin-left: -($btn-border-width * 2);
|
||||
}
|
||||
|
||||
// Tripple border width
|
||||
> .btn.border-3:not(:first-child) {
|
||||
margin-left: -($btn-border-width * 3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Justified button group
|
||||
.btn-group-justified {
|
||||
display: flex;
|
||||
|
||||
// Stretch the buttons
|
||||
.btn,
|
||||
.btn-group {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,271 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Button component
|
||||
*
|
||||
* Overrides for button bootstrap component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Button base
|
||||
.btn {
|
||||
position: relative;
|
||||
|
||||
// Button states
|
||||
&:not(.bg-transparent):not([class*=btn-outline]):not(.btn-light):not(.btn-link):not([class*=alpha-]):not(.fab-menu-btn) {
|
||||
|
||||
// States
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.show > &.dropdown-toggle {
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
|
||||
// Disabled button
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Light button overrides
|
||||
.btn-light {
|
||||
color: $btn-light-color;
|
||||
background-color: $btn-light-bg;
|
||||
border-color: $btn-light-border-color;
|
||||
|
||||
// States
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $btn-light-hover-color;
|
||||
background-color: $btn-light-hover-bg;
|
||||
border-color: $btn-light-hover-border-color;
|
||||
}
|
||||
|
||||
// Disabled button
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $btn-light-bg;
|
||||
border-color: $btn-light-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate buttons
|
||||
//
|
||||
|
||||
// Custom outline buttons
|
||||
.btn-outline {
|
||||
&:not(:hover):not(:active):not(.active):not([aria-expanded=true]),
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: transparent!important;
|
||||
}
|
||||
|
||||
// Hover/focus states
|
||||
&:not(.disabled):not(:disabled):not([class*=alpha-]) {
|
||||
&:hover,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
|
||||
// White button
|
||||
&.bg-white:not(.disabled):not(:disabled) {
|
||||
&:hover,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $body-color!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link buttons
|
||||
.btn-link {
|
||||
|
||||
// Opened dropdown
|
||||
.show > &.dropdown-toggle {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Button with icon only
|
||||
.btn-icon {
|
||||
padding-left: $btn-padding-y + (($line-height-computed - $icon-font-size) / 2);
|
||||
padding-right: $btn-padding-y + (($line-height-computed - $icon-font-size) / 2);
|
||||
|
||||
// Checkbox and radio
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.btn-sm {
|
||||
padding-left: $btn-padding-y-sm + (($line-height-computed - $icon-font-size) / 2);
|
||||
padding-right: $btn-padding-y-sm + (($line-height-computed - $icon-font-size) / 2);
|
||||
}
|
||||
&.btn-lg {
|
||||
padding-left: $btn-padding-y-lg + (($line-height-computed - $icon-font-size) / 2);
|
||||
padding-right: $btn-padding-y-lg + (($line-height-computed - $icon-font-size) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Float button
|
||||
.btn-float {
|
||||
padding: $btn-float-padding;
|
||||
@include border-radius($btn-border-radius);
|
||||
|
||||
// Transparent button
|
||||
&.btn-link {
|
||||
padding: ($btn-float-padding / 1.25);
|
||||
}
|
||||
|
||||
// Icon
|
||||
i {
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Text
|
||||
> span {
|
||||
display: block;
|
||||
padding-top: ($spacer / 2);
|
||||
margin-bottom: -($font-size-base / 2);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons with strong border
|
||||
.btn {
|
||||
&.border-2 {
|
||||
padding-top: ($btn-padding-y - rem-calc($border-width));
|
||||
padding-bottom: ($btn-padding-y - rem-calc($border-width));
|
||||
|
||||
// Sizes
|
||||
&.btn-lg {
|
||||
padding-top: ($btn-padding-y-lg - rem-calc($border-width));
|
||||
padding-bottom: ($btn-padding-y-lg - rem-calc($border-width));
|
||||
}
|
||||
&.btn-sm {
|
||||
padding-top: ($btn-padding-y-sm - rem-calc($border-width));
|
||||
padding-bottom: ($btn-padding-y-sm - rem-calc($border-width));
|
||||
}
|
||||
|
||||
// Icon button
|
||||
&.btn-icon {
|
||||
padding-left: $btn-padding-y + (($line-height-computed - $icon-font-size) / 2) - rem-calc($border-width);
|
||||
padding-right: $btn-padding-y + (($line-height-computed - $icon-font-size) / 2) - rem-calc($border-width);
|
||||
|
||||
// Sizes
|
||||
&.btn-lg {
|
||||
padding-left: $btn-padding-y-lg + (($line-height-computed - $icon-font-size) / 2) - rem-calc($border-width);
|
||||
padding-right: $btn-padding-y-lg + (($line-height-computed - $icon-font-size) / 2) - rem-calc($border-width);
|
||||
}
|
||||
&.btn-sm {
|
||||
padding-left: $btn-padding-y-sm + (($line-height-computed - $icon-font-size) / 2) - rem-calc($border-width);
|
||||
padding-right: $btn-padding-y-sm + (($line-height-computed - $icon-font-size) / 2) - rem-calc($border-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Float button
|
||||
&.btn-float {
|
||||
padding: ($btn-float-padding - rem-calc($border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labeled buttons
|
||||
//
|
||||
|
||||
// Base
|
||||
.btn-labeled {
|
||||
|
||||
// Icon
|
||||
> b {
|
||||
position: absolute;
|
||||
top: -$btn-border-width;
|
||||
background-color: rgba($black, 0.15);
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding: ($line-height-computed - $icon-font-size + $btn-padding-y - rem-calc($btn-border-width));
|
||||
|
||||
// Center icon vertically
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded icon
|
||||
&.rounded-round {
|
||||
> b {
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.btn-lg > b {
|
||||
padding: ($line-height-computed - $icon-font-size + $btn-padding-y-lg - rem-calc($btn-border-width));
|
||||
}
|
||||
&.btn-sm > b {
|
||||
padding: ($line-height-computed - $icon-font-size + $btn-padding-y-sm - rem-calc($btn-border-width));
|
||||
}
|
||||
}
|
||||
|
||||
// Left icon
|
||||
.btn-labeled-left {
|
||||
padding-left: ((($line-height-computed - $icon-font-size + $btn-padding-y - rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x;
|
||||
|
||||
// Icon
|
||||
> b {
|
||||
left: -$btn-border-width;
|
||||
@include border-left-radius($btn-border-radius);
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.btn-lg {
|
||||
padding-left: ((($line-height-computed-lg - $icon-font-size + $btn-padding-y-lg - rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x-lg;
|
||||
|
||||
> b {
|
||||
@include border-left-radius($btn-border-radius-lg);
|
||||
}
|
||||
}
|
||||
&.btn-sm {
|
||||
padding-left: ((($line-height-computed - $icon-font-size + $btn-padding-y-sm - rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x-sm;
|
||||
|
||||
> b {
|
||||
@include border-left-radius($btn-border-radius-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right icon
|
||||
.btn-labeled-right {
|
||||
padding-right: ((($line-height-computed - $icon-font-size + $btn-padding-y - rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x;
|
||||
|
||||
// Icon
|
||||
> b {
|
||||
right: -$btn-border-width;
|
||||
@include border-right-radius($btn-border-radius);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Card component
|
||||
*
|
||||
* Overrides for card bootstrap component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
// Card base
|
||||
.card {
|
||||
margin-bottom: $spacer;
|
||||
@include box-shadow($card-box-shadow);
|
||||
|
||||
// Full screen mode
|
||||
&.fixed-top {
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Card body
|
||||
.card-body:not(.card) {
|
||||
+ .card-body:not(.card) {
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Card title
|
||||
.card-title {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Card header
|
||||
.card-header {
|
||||
|
||||
// Title
|
||||
.card-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Inside dark card
|
||||
.card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) & {
|
||||
border-bottom-color: rgba($white, 0.1);
|
||||
}
|
||||
|
||||
// If header has no bottom border,
|
||||
// make vertical spacing bigger
|
||||
&:not([class*=bg-]):not([class*=alpha-]) {
|
||||
background-color: transparent;
|
||||
padding-top: $card-spacer-x;
|
||||
padding-bottom: $card-spacer-x;
|
||||
border-bottom-width: 0;
|
||||
|
||||
// Remove top padding from card body
|
||||
+ .card-body,
|
||||
+ * > .card-body:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card footer
|
||||
.card-footer {
|
||||
|
||||
// Add top borders if comes last
|
||||
&:first-child,
|
||||
.card-header + &,
|
||||
.card-header + * > &:first-child {
|
||||
border-top: 0;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
// Add border if not last
|
||||
&.border-bottom-1 {
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Header navs
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Image controls
|
||||
//
|
||||
|
||||
// Card image
|
||||
.card-img {
|
||||
|
||||
// Inside card body
|
||||
.card-body & {
|
||||
@include border-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Img actions
|
||||
.card-img-actions {
|
||||
position: relative;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
.card-img-actions-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Img actions overlay
|
||||
.card-img-actions-overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba($black, 0.75);
|
||||
color: $white;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card actions
|
||||
//
|
||||
|
||||
// Link base
|
||||
[data-action] {
|
||||
cursor: pointer;
|
||||
|
||||
// Icons base
|
||||
&:after {
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
min-width: $icon-font-size;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Collapse icon
|
||||
[data-action="collapse"]:after {
|
||||
content: $icon-card-action-collapse;
|
||||
}
|
||||
|
||||
// Reload icon
|
||||
[data-action="reload"]:after {
|
||||
content: $icon-card-action-reload;
|
||||
}
|
||||
|
||||
// Remove icon
|
||||
[data-action="remove"]:after {
|
||||
content: $icon-card-action-remove;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
// Move icon
|
||||
[data-action="move"] {
|
||||
cursor: default;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-card-action-move;
|
||||
}
|
||||
}
|
||||
|
||||
// Fullscreen
|
||||
[data-action="fullscreen"] {
|
||||
&:after {
|
||||
content: $icon-card-action-full-base;
|
||||
}
|
||||
|
||||
// Change icon when in fullscreen mode
|
||||
&[data-fullscreen="active"]:after {
|
||||
content: $icon-card-action-full-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Open modal icon
|
||||
[data-action="modal"]:after {
|
||||
content: $icon-card-action-modal;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Collapsable panels (aka, accordion)
|
||||
//
|
||||
|
||||
.card-group-control {
|
||||
.card-title > a {
|
||||
display: inline-block;
|
||||
|
||||
// Collapsible icon
|
||||
&:before {
|
||||
content: $icon-card-expand;
|
||||
font-family: $icon-font-family;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
font-size: $icon-font-size;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Change icon if collapsed
|
||||
&.collapsed:before {
|
||||
content: $icon-card-collapse;
|
||||
}
|
||||
}
|
||||
|
||||
// Left control position
|
||||
&-left {
|
||||
.card-title > a {
|
||||
padding-left: ($icon-font-size + $element-spacer-x);
|
||||
|
||||
// Icon alignment
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right control position
|
||||
&-right {
|
||||
.card-title > a {
|
||||
padding-right: ($icon-font-size + $element-spacer-x);
|
||||
|
||||
// Re-align the icon
|
||||
&:before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Close button
|
||||
*
|
||||
* Overrides of default close button styles
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Base
|
||||
.close {
|
||||
opacity: .75;
|
||||
@include transition(color ease-in-out $component-transition-timer, opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover and focus states
|
||||
@include hover-focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Hover and focus states
|
||||
&:not(:disabled):not(.disabled) {
|
||||
@include hover-focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Code blocks
|
||||
*
|
||||
* Overrides of default code block styles
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
background-color: $code-bg;
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
/*rtl:ignore*/
|
||||
text-align: left;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Custom form inputs
|
||||
*
|
||||
* Custom checkboxes, radios, selects and file inputs
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Checkboxes and radios
|
||||
//
|
||||
|
||||
// Container
|
||||
.custom-control {
|
||||
margin-bottom: $form-check-margin-y;
|
||||
|
||||
// Last item doesn't have spacing
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline list
|
||||
.custom-control-inline {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Last item doesn't have spacing
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Input
|
||||
.custom-control-input {
|
||||
|
||||
// Active state
|
||||
&:active ~ .custom-control-label::before {
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:disabled {
|
||||
~ .custom-control-label {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom control indicators
|
||||
.custom-control-label {
|
||||
cursor: pointer;
|
||||
|
||||
// Background
|
||||
&::before {
|
||||
top: (($line-height-computed - $custom-control-indicator-size) / 2);
|
||||
}
|
||||
|
||||
// Foreground (icon)
|
||||
&::after {
|
||||
top: (($line-height-computed - $custom-control-indicator-size) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Right input alignment
|
||||
.custom-control-right {
|
||||
padding-left: 0;
|
||||
padding-right: ($custom-control-gutter + $custom-control-indicator-size);
|
||||
|
||||
// Input
|
||||
.custom-control-input {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Label
|
||||
.custom-control-label {
|
||||
&:before,
|
||||
&:after {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Select
|
||||
//
|
||||
|
||||
.custom-select {
|
||||
cursor: pointer;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
@include box-shadow($hover-shadow-lighter);
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// File
|
||||
//
|
||||
|
||||
.custom-file-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Dropdown menu component
|
||||
*
|
||||
* Overrides for dropdown menu bootstrap component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
// Dropdown menu item
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
@include transition(background-color ease-in-out $component-transition-timer, color ease-in-out $component-transition-timer);
|
||||
|
||||
// Add spacing between items
|
||||
& + &,
|
||||
.dropdown-submenu + &,
|
||||
& + .dropdown-submenu {
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
}
|
||||
|
||||
// Due to default solution, this needs to be duplicated
|
||||
// as :active is different from .active in the template
|
||||
&:active {
|
||||
color: $dropdown-link-hover-color;
|
||||
@include gradient-bg($dropdown-link-hover-bg);
|
||||
}
|
||||
&.active {
|
||||
color: $dropdown-link-active-color;
|
||||
@include gradient-bg($dropdown-link-active-bg);
|
||||
|
||||
// Calculate color shades for badges
|
||||
// depending on active item color
|
||||
@if (lightness($dropdown-link-active-bg) < 75) {
|
||||
|
||||
// All badges except badge mark
|
||||
.badge:not(.badge-mark) {
|
||||
background-color: $white!important;
|
||||
color: $body-color!important;
|
||||
}
|
||||
|
||||
// Badge mark with custom bg
|
||||
.badge-mark[class*=bg-] {
|
||||
background-color: $white!important;
|
||||
border-color: $white!important;
|
||||
}
|
||||
|
||||
// Badge mark with custom border
|
||||
.badge-mark[class*=border-] {
|
||||
border-color: $white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
background-color: transparent;
|
||||
cursor: $cursor-disabled;
|
||||
|
||||
// Mute badges and images
|
||||
> .badge,
|
||||
> img {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active submenu indicator
|
||||
.dropdown-item-open {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
color: $dropdown-link-hover-color;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: ($dropdown-padding-y / 2);
|
||||
margin-bottom: ($dropdown-padding-y / 2);
|
||||
line-height: $line-height-sm;
|
||||
|
||||
// Highlighted header
|
||||
&-highlight {
|
||||
margin-top: 0;
|
||||
background-color: $dropdown-header-bg;
|
||||
|
||||
// Add top spacing
|
||||
.dropdown-item + &,
|
||||
& + .dropdown-item {
|
||||
margin-top: $dropdown-padding-y;
|
||||
}
|
||||
|
||||
// ... but remove from the first one
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icons, badges and images
|
||||
.dropdown-item,
|
||||
.dropdown-header {
|
||||
|
||||
// Icons and images
|
||||
> i,
|
||||
> img {
|
||||
margin-right: $dropdown-icon-spacer-x;
|
||||
}
|
||||
|
||||
// Icon
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Image thumbs
|
||||
> img {
|
||||
max-height: $line-height-computed;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes and radios
|
||||
.dropdown-item {
|
||||
&.form-check {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Label
|
||||
.form-check-label {
|
||||
flex: 1;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&.form-check-right {
|
||||
.form-check-label {
|
||||
padding-left: $dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollable dropdown
|
||||
.dropdown-scrollable {
|
||||
max-height: $dropdown-scrollable-max-height;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Dropdown submenu
|
||||
//
|
||||
|
||||
.dropdown-menu {
|
||||
> .dropdown-submenu {
|
||||
position: relative;
|
||||
|
||||
// Link
|
||||
> .dropdown-item {
|
||||
padding-right: ($dropdown-item-padding-x + ($icon-font-size * 1.5));
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-menu-sub-arrow-ltr;
|
||||
}
|
||||
@else {
|
||||
content: $icon-menu-sub-arrow-rtl;
|
||||
}
|
||||
font-family: $icon-font-family;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
right: $dropdown-item-padding-x;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Hover and open states
|
||||
&.show,
|
||||
&:hover {
|
||||
> .dropdown-item {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
color: $dropdown-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Display submenu on hover
|
||||
&:hover > .dropdown-item:not(.dropdown-toggle) ~ .dropdown-menu,
|
||||
&:focus > .dropdown-item:not(.dropdown-toggle) ~ .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Hide submenu if parent is disabled
|
||||
&.disabled {
|
||||
> .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .dropdown-item {
|
||||
background-color: transparent;
|
||||
color: $dropdown-link-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Submenu position
|
||||
> .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -($dropdown-padding-y + rem-calc($dropdown-border-width));
|
||||
}
|
||||
|
||||
// Left submenu position
|
||||
&.dropdown-submenu-left > .dropdown-menu {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
// Make submenu levels stacked on mobile
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
// Change arrow icon direction
|
||||
.dropdown-toggle:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
}
|
||||
|
||||
// Make them stacked
|
||||
&,
|
||||
&.dropdown-submenu-left {
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
margin: 0!important;
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Third level
|
||||
> .dropdown-menu > .dropdown-item,
|
||||
> .dropdown-menu > .dropdown-submenu > .dropdown-item {
|
||||
padding-left: ($dropdown-item-padding-x * 2);
|
||||
}
|
||||
|
||||
// Third level
|
||||
> .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-item,
|
||||
> .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-item {
|
||||
padding-left: ($dropdown-item-padding-x * 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reverse in dropdown and bottom navbars
|
||||
.dropup > .dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: -($dropdown-padding-y + rem-calc($dropdown-border-width));
|
||||
}
|
||||
|
||||
// Spacing between submenus
|
||||
.dropdown-submenu + .dropdown-submenu {
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Additional alignment
|
||||
//
|
||||
|
||||
// RTL alignment
|
||||
@if $direction == 'RTL' {
|
||||
|
||||
// Base alignment
|
||||
.dropdown-menu {
|
||||
.context-toggle &,
|
||||
.navbar-nav > .nav-item:not([class*=mega-menu]) > &,
|
||||
.nav-item:not([class*=mega-menu]) .navbar-nav-link ~ & {
|
||||
/*rtl:ignore*/
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Reverse
|
||||
.dropdown-menu-right {
|
||||
.context-toggle &,
|
||||
.navbar-nav > .nav-item:not([class*=mega-menu]) > &,
|
||||
.nav-item:not([class*=mega-menu]) .navbar-nav-link ~ & {
|
||||
/*rtl:begin:ignore*/
|
||||
right: auto;
|
||||
left: 0;
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Drop right
|
||||
.dropright {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Drop left
|
||||
.dropleft {
|
||||
.dropdown-toggle {
|
||||
&::before {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove left arrow in submenu
|
||||
.dropdown-submenu .dropdown-toggle::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.dropdown-menu-lg {
|
||||
.dropdown-item {
|
||||
padding-top: $input-btn-padding-y-lg;
|
||||
padding-bottom: $input-btn-padding-y-lg;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-btn-line-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.dropdown-menu-sm {
|
||||
.dropdown-item {
|
||||
padding-top: $input-btn-padding-y-sm;
|
||||
padding-bottom: $input-btn-padding-y-sm;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-btn-line-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Solid color dropdown menu
|
||||
//
|
||||
|
||||
.dropdown-menu[class*=bg-]:not(.bg-white):not(.bg-light) {
|
||||
|
||||
// Links and labels
|
||||
> .dropdown-item,
|
||||
> .dropdown-submenu > .dropdown-item {
|
||||
color: $white;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $dropdown-dark-hover-bg;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
background-color: $dropdown-dark-active-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
background-color: transparent;
|
||||
color: $dropdown-dark-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Background color for submenu link states
|
||||
> .dropdown-submenu {
|
||||
&.show,
|
||||
&:hover {
|
||||
> .dropdown-item {
|
||||
background-color: $dropdown-dark-hover-bg;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove bg color in disabled links
|
||||
&.disabled {
|
||||
> .dropdown-item {
|
||||
background-color: transparent;
|
||||
color: $dropdown-dark-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown header
|
||||
> .dropdown-header {
|
||||
color: $dropdown-dark-header-color;
|
||||
|
||||
&-highlight {
|
||||
background-color: $dropdown-dark-header-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Divider
|
||||
> .dropdown-divider {
|
||||
border-top-color: $dropdown-dark-divider-bg;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Form styles
|
||||
*
|
||||
* Basic form styles and overrides of default Bootstrap styles
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
// Legend
|
||||
legend {
|
||||
padding-top: ($spacer / 2);
|
||||
padding-bottom: ($spacer / 2);
|
||||
margin-bottom: $spacer;
|
||||
border-bottom: $input-border-width solid $input-border-color;
|
||||
font-size: $font-size-base;
|
||||
|
||||
// Remove top padding in first items
|
||||
fieldset:first-child & {
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple select
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: 200px;
|
||||
padding: $input-padding-x;
|
||||
|
||||
// Option
|
||||
option {
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
+ option {
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Textual form controls
|
||||
.form-control {
|
||||
background-clip: border-box;
|
||||
|
||||
// Disabled state
|
||||
&:disabled {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
|
||||
// Input with custom color
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light):not(.bg-transparent) {
|
||||
|
||||
// Disabled state
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: $input-dark-disabled-bg;
|
||||
color: $input-dark-disabled-color;
|
||||
border-color: $input-dark-disabled-border-color;
|
||||
}
|
||||
|
||||
// Placeholder color
|
||||
&::placeholder {
|
||||
color: $input-placeholder-light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form groups
|
||||
.form-group {
|
||||
|
||||
// Remove bottom margin from the last group
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Add top margin on certain breakpoints
|
||||
@include media-breakpoint-down(sm) {
|
||||
[class*="col-md-"]:not([class*=col-form-label]) + [class*="col-md-"] {
|
||||
margin-top: $form-group-margin-bottom;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
[class*="col-lg-"]:not([class*=col-form-label]) + [class*="col-lg-"] {
|
||||
margin-top: $form-group-margin-bottom;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
[class*="col-xl-"]:not([class*=col-form-label]) + [class*="col-xl-"] {
|
||||
margin-top: $form-group-margin-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove top padding in labels on certain breakpoints
|
||||
// to match vertical form spacings
|
||||
[class*=col-form-label] {
|
||||
@include media-breakpoint-down(sm) {
|
||||
&[class*="col-md-"] {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
&[class*="col-lg-"] {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
&[class*="col-xl-"] {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Checkboxes and radios
|
||||
//
|
||||
|
||||
// Container
|
||||
.form-check {
|
||||
|
||||
// Exclude dropdown items
|
||||
&:not(.form-check-inline) {
|
||||
margin-bottom: $form-check-margin-y;
|
||||
|
||||
// Last item doesn't have spacing
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// In horizontal form group
|
||||
.form-group.row &:not(.dropdown-item) {
|
||||
margin-top: ($input-padding-y + rem-calc($input-border-width));
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
color: $form-check-disabled-color;
|
||||
|
||||
.form-check-label {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input
|
||||
.form-check-input {
|
||||
&:disabled ~ .form-check-label {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
.form-check-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Inline list
|
||||
.form-check-inline {
|
||||
|
||||
// Label
|
||||
.form-check-label {
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// Undo .form-check-input defaults and add some `margin-right`.
|
||||
.form-check-input {
|
||||
margin-top: $form-check-input-margin-y;
|
||||
}
|
||||
|
||||
// Last item
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Make sure input is not affected by top/left spacings
|
||||
input {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
// Right position
|
||||
.form-check-right {
|
||||
padding-left: 0;
|
||||
padding-right: $form-check-input-gutter;
|
||||
|
||||
// Reverse input direction
|
||||
.form-check-input,
|
||||
input {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Inline list
|
||||
&.form-check-inline {
|
||||
padding: 0;
|
||||
|
||||
// Input
|
||||
.form-check-input {
|
||||
margin-right: 0;
|
||||
margin-left: $form-check-inline-input-margin-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Form control feedback states
|
||||
//
|
||||
|
||||
// Default left icon position
|
||||
.form-group-feedback {
|
||||
position: relative;
|
||||
|
||||
// Left alignment
|
||||
&-left {
|
||||
|
||||
// Stick icon to the left
|
||||
.form-control-feedback {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Ensure icons don't overlap text
|
||||
.form-control {
|
||||
padding-left: $input-padding-x + $input-btn-padding-x + $icon-font-size;
|
||||
|
||||
// Sizes
|
||||
&-lg {
|
||||
padding-left: $input-padding-x-lg + $input-btn-padding-x-lg + $icon-font-size;
|
||||
}
|
||||
&-sm {
|
||||
padding-left: $input-padding-x-sm + $input-btn-padding-x-sm + $icon-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&-right {
|
||||
|
||||
// Stick icon to the right
|
||||
.form-control-feedback {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Ensure icons don't overlap text
|
||||
.form-control {
|
||||
padding-right: $input-padding-x + $input-btn-padding-x + $icon-font-size;
|
||||
|
||||
// Sizes
|
||||
&-lg {
|
||||
padding-right: $input-padding-x-lg + $input-btn-padding-x-lg + $icon-font-size;
|
||||
}
|
||||
&-sm {
|
||||
padding-right: $input-padding-x-sm + $input-btn-padding-x-sm + $icon-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Feedback icon
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
color: $input-color;
|
||||
padding-left: $input-padding-x;
|
||||
padding-right: $input-padding-x;
|
||||
line-height: $input-height;
|
||||
min-width: $icon-font-size;
|
||||
|
||||
// Large size
|
||||
&-lg {
|
||||
padding-left: $input-padding-x-lg;
|
||||
padding-right: $input-padding-x-lg;
|
||||
line-height: $input-height-lg;
|
||||
}
|
||||
|
||||
// Small size
|
||||
&-sm {
|
||||
padding-left: $input-padding-x-sm;
|
||||
padding-right: $input-padding-x-sm;
|
||||
line-height: $input-height-sm;
|
||||
}
|
||||
|
||||
// Change color if comes after colored input
|
||||
input[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) + & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Input group component
|
||||
*
|
||||
* Overrides for input group component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base styles
|
||||
.input-group {
|
||||
|
||||
// Form group feedback
|
||||
.form-group-feedback {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
z-index: 4;
|
||||
|
||||
// Border radius fixes
|
||||
&:not(:last-child) {
|
||||
.form-control {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
.form-control {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure icon is always on top
|
||||
+ .form-control-feedback,
|
||||
.form-control-feedback + & {
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
// Textual addons
|
||||
.input-group-text {
|
||||
|
||||
// Icon
|
||||
i {
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # List group component
|
||||
*
|
||||
* Overrides for list group component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
.list-group {
|
||||
background-color: $card-bg;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
padding: $list-group-padding-y 0;
|
||||
background-clip: padding-box;
|
||||
@include border-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
// Individual list items
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Top border
|
||||
&:first-child {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
// Bottom border
|
||||
&:last-child {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
|
||||
// Calculate color shades for badges
|
||||
// depending on active item color
|
||||
@if (lightness($list-group-active-bg) < 75) {
|
||||
|
||||
// All badges except badge mark
|
||||
.badge:not(.badge-mark) {
|
||||
background-color: $white!important;
|
||||
color: $body-color!important;
|
||||
}
|
||||
|
||||
// Badge mark with custom bg
|
||||
.badge-mark[class*=bg-] {
|
||||
background-color: $white!important;
|
||||
border-color: $white!important;
|
||||
}
|
||||
|
||||
// Badge mark with custom border
|
||||
.badge-mark[class*=border-] {
|
||||
border-color: $white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.list-group-horizontal#{$infix} {
|
||||
border: 0;
|
||||
|
||||
.list-group-item-action {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flush list items
|
||||
.list-group-flush {
|
||||
border: 0;
|
||||
@include border-radius(0);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
// List group divider
|
||||
.list-group-divider {
|
||||
padding: 0;
|
||||
margin: $list-group-padding-y 0;
|
||||
border-top-width: $list-group-border-width;
|
||||
}
|
||||
|
||||
// Bordered list
|
||||
.list-group-bordered {
|
||||
padding: 0;
|
||||
|
||||
// Item
|
||||
.list-group-item {
|
||||
border-top-width: $list-group-border-width;
|
||||
border-bottom-width: $list-group-border-width;
|
||||
margin-bottom: -$list-group-border-width;
|
||||
|
||||
// Round top corners
|
||||
&:first-child {
|
||||
border-top-width: 0;
|
||||
@include border-top-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
// Round bottom corners
|
||||
&:last-child {
|
||||
@include border-bottom-radius($list-group-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Custom bg color
|
||||
&[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) {
|
||||
.list-group-item {
|
||||
border-top-color: $navigation-dark-bordered-border-color;
|
||||
border-bottom-color: $navigation-dark-bordered-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark badkgrounds
|
||||
.list-group[class*=bg-]:not(.bg-light):not(.bg-transparent):not(.bg-white) {
|
||||
@include border-radius($list-group-border-radius);
|
||||
|
||||
// Links
|
||||
.list-group-item-action {
|
||||
&:not(.active):not(.disabled) {
|
||||
color: rgba($white, 0.9);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $dropdown-dark-hover-bg;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Item
|
||||
.list-group-item {
|
||||
color: $white;
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
background-color: $dropdown-dark-active-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-dark-disabled-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Divider
|
||||
.list-group-divider {
|
||||
border-top-color: $dropdown-dark-divider-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Contextual variants
|
||||
@each $color, $value in $theme-colors-light {
|
||||
@include list-group-item-variant($color, $value, theme-color-level($color, 6));
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Media object component
|
||||
*
|
||||
* Overrides for media object component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
.media {
|
||||
margin-top: $spacer;
|
||||
|
||||
// Remove vertical spacing in certain cases
|
||||
&.card-body,
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Media list
|
||||
.media-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Media title inside .media-body
|
||||
.media-title {
|
||||
margin-bottom: $media-title-margin-bottom;
|
||||
}
|
||||
|
||||
// Image preview
|
||||
.img-preview {
|
||||
max-height: $img-preview-max-height;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Styling variations
|
||||
//
|
||||
|
||||
// Bordered list
|
||||
.media-list-bordered {
|
||||
.media {
|
||||
margin-top: 0;
|
||||
padding: $media-padding-y $media-padding-x;
|
||||
border-top: $media-border-width solid $media-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Linked list
|
||||
.media-list-linked {
|
||||
|
||||
// Item container
|
||||
.media {
|
||||
padding: $media-padding-y $media-padding-x;
|
||||
}
|
||||
|
||||
// Inside media list
|
||||
li.media {
|
||||
margin-top: 0;
|
||||
border-top: $media-border-width solid $media-border-color;
|
||||
border-bottom: $media-border-width solid $media-border-color;
|
||||
}
|
||||
|
||||
// Inside borderedmedia list
|
||||
&.media-list-bordered li.media {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Link
|
||||
a.media {
|
||||
color: inherit;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
background-color: $media-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Mixins
|
||||
*
|
||||
* Import Bootstrap mixins with overrides
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Utilities
|
||||
@import "mixins/badge";
|
||||
|
||||
// Components
|
||||
@import "mixins/forms";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/caret";
|
||||
|
||||
// Skins
|
||||
@import "mixins/background-variant";
|
||||
@@ -0,0 +1,59 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Modal component
|
||||
*
|
||||
* Overrides for modal dialog component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Modal header
|
||||
.modal-header {
|
||||
position: relative;
|
||||
@include border-top-radius($border-radius-lg - rem-calc($modal-header-border-width));
|
||||
|
||||
// Close button
|
||||
.close {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// If header has '.bg-*' class,
|
||||
// remove bottom padding and border
|
||||
&:not([class*=bg-]) {
|
||||
padding-bottom: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
|
||||
// If footer has '.bg-*' class,
|
||||
// remove top padding and border
|
||||
&:not([class*=bg-]) {
|
||||
padding-top: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
// Add top border if footer comes after table
|
||||
[class*=table-responsive] + &,
|
||||
.table + & {
|
||||
border-top-width: $modal-footer-border-width;
|
||||
border-top-color: $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
||||
// Mini size
|
||||
.modal-xs {
|
||||
max-width: $modal-xs-width;
|
||||
}
|
||||
|
||||
// Full width size
|
||||
.modal-full {
|
||||
max-width: $modal-full-width;
|
||||
margin-left: ((100% - $modal-full-width) / 2);
|
||||
margin-right: ((100% - $modal-full-width) / 2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,498 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Nav components
|
||||
*
|
||||
* Overrides for nav components
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base styles
|
||||
// -------------------------
|
||||
|
||||
// Links
|
||||
.nav-link {
|
||||
position: relative;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabs
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.nav-tabs {
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
color: $nav-tabs-link-color;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $nav-tabs-link-hover-color;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// When dropdown is opened
|
||||
.nav-item.show .nav-link:not(.active) {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Apply border color for border helper
|
||||
&.border-top-1 {
|
||||
border-top-color: $nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive tabs - add this class to parent container
|
||||
// to make tabs nav inline, add scrollbar and prevent wrapping
|
||||
.nav-tabs-responsive {
|
||||
overflow-x: auto;
|
||||
box-shadow: 0 (-$nav-tabs-border-width) 0 $nav-tabs-border-color inset;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternative styles
|
||||
//
|
||||
|
||||
// Commmon
|
||||
.nav-tabs-highlight,
|
||||
.nav-tabs-top,
|
||||
.nav-tabs-bottom {
|
||||
.nav-link {
|
||||
position: relative;
|
||||
|
||||
// Highlight
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include transition(background-color ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Top highlight
|
||||
.nav-tabs-highlight {
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
border-top-color: transparent;
|
||||
@include border-top-radius(0);
|
||||
|
||||
// Top highlight line
|
||||
&:before {
|
||||
height: $nav-tabs-highlight-link-border-width;
|
||||
top: -($nav-tabs-border-width);
|
||||
left: -($nav-tabs-border-width);
|
||||
right: -($nav-tabs-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.nav-link.active {
|
||||
&:before {
|
||||
background-color: $nav-tabs-highlight-link-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs with top border
|
||||
.nav-tabs-top {
|
||||
|
||||
// Item
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
border-width: 0;
|
||||
@include border-top-radius(0);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
&:before {
|
||||
background-color: $nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom highlight line
|
||||
&:before {
|
||||
height: $nav-tabs-top-link-border-width;
|
||||
}
|
||||
|
||||
// Remove highlight in disabled items
|
||||
&.disabled {
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When dropdown is opened
|
||||
.nav-item.show .nav-link:not(.active) {
|
||||
&:before {
|
||||
background-color: $nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.nav-link.active {
|
||||
&:before {
|
||||
background-color: $nav-tabs-top-link-border-color;
|
||||
}
|
||||
}
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Make sure dropdown comes after bottom border
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Border helper adjustment
|
||||
&.border-top-1 {
|
||||
.nav-item {
|
||||
margin-top: -($nav-tabs-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs with bottom border
|
||||
.nav-tabs-bottom {
|
||||
|
||||
// Item
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
border-width: 0;
|
||||
|
||||
// Bottom highlight line
|
||||
&:before {
|
||||
height: $nav-tabs-bottom-link-border-width;
|
||||
top: auto;
|
||||
bottom: -($nav-tabs-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.nav-link.active {
|
||||
&:before {
|
||||
background-color: $nav-tabs-bottom-link-border-color;
|
||||
}
|
||||
}
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Make sure dropdown comes after bottom border
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs with darker background color
|
||||
.nav-tabs-solid {
|
||||
background-color: $nav-tabs-solid-bg;
|
||||
border: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
|
||||
// Item
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// When dropdown is opened
|
||||
.nav-item.show .nav-link {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Active state
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link.active {
|
||||
color: $nav-tabs-solid-active-color;
|
||||
background-color: $nav-tabs-solid-active-bg;
|
||||
}
|
||||
|
||||
// Custom background color
|
||||
&[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) {
|
||||
.nav-link {
|
||||
color: rgba($white, 0.9);
|
||||
|
||||
@include hover-focus {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item.show .nav-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link.active {
|
||||
color: $white;
|
||||
background-color: rgba($black, 0.1);
|
||||
}
|
||||
|
||||
+ .tab-content[class*=bg-] {
|
||||
border-top-color: rgba($white, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical tabs
|
||||
.nav-tabs-vertical {
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
justify-content: flex-start;
|
||||
|
||||
// Override border colors
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.disabled {
|
||||
border-color: transparent $nav-tabs-border-color transparent transparent;
|
||||
}
|
||||
|
||||
// Highlight
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -$nav-tabs-border-width;
|
||||
bottom: -$nav-tabs-border-width;
|
||||
left: -$nav-tabs-border-width;
|
||||
width: $nav-tabs-highlight-link-border-width;
|
||||
@include transition(background-color ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
|
||||
// When dropdown is opened
|
||||
.nav-item.show .nav-link:not(.active) {
|
||||
border-right-color: $nav-tabs-border-color;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&-right {
|
||||
.nav-link {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.disabled {
|
||||
border-color: transparent transparent transparent $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
// Reverse highlight line alignment
|
||||
&:before {
|
||||
left: auto;
|
||||
right: -$nav-tabs-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Opened dropdown - toggle link
|
||||
.nav-item.show .nav-link:not(.active) {
|
||||
border-right-color: transparent;
|
||||
border-left-color: $nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.nav-link.active {
|
||||
&:before {
|
||||
background-color: $nav-tabs-highlight-link-border-color;
|
||||
}
|
||||
}
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
background-color: transparent;
|
||||
border-color: $nav-tabs-border-color transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Pills
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.nav-pills {
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
color: $nav-pills-link-color;
|
||||
|
||||
// Hover state
|
||||
&:not(.active) {
|
||||
@include hover-focus {
|
||||
color: $nav-pills-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
// - change badge color according to active link bg
|
||||
&.active {
|
||||
@if (lightness($nav-pills-link-active-bg) < 75) {
|
||||
.badge:not(.bg-transparent):not(.bg-light):not(.bg-white) {
|
||||
background-color: $white;
|
||||
color: $nav-pills-link-hover-color;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
@include plain-hover-focus {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link with opened dropdown
|
||||
.nav-item.show .nav-link:not(.active) {
|
||||
color: $nav-pills-link-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Stick text to the left in stacked pills
|
||||
&.flex-column {
|
||||
.nav-link {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternative styles
|
||||
//
|
||||
|
||||
// Bordered pills
|
||||
.nav-pills-bordered {
|
||||
|
||||
// Item
|
||||
.nav-item + .nav-item {
|
||||
margin-left: ($spacer / 2);
|
||||
}
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
border: $nav-pills-bordered-border-width solid $nav-pills-bordered-border-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
.nav-link:not(.active):hover,
|
||||
.nav-link:not(.active):focus,
|
||||
.nav-item.show .nav-link:not(.active) {
|
||||
background-color: $nav-pills-bordered-link-hover-color;
|
||||
}
|
||||
|
||||
// Active state
|
||||
.nav-link.active {
|
||||
border-color: $nav-pills-link-active-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.nav-link.disabled {
|
||||
@include plain-hover-focus {
|
||||
background-color: $nav-pills-bordered-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked pills layout
|
||||
&.flex-column {
|
||||
.nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
margin-top: ($spacer / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pills toolbar
|
||||
.nav-pills-toolbar {
|
||||
|
||||
// Item
|
||||
.nav-item + .nav-item {
|
||||
margin-left: -($nav-pills-bordered-border-width);
|
||||
}
|
||||
|
||||
// Link
|
||||
.nav-link {
|
||||
border-radius: 0;
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Add rounded corners
|
||||
.nav-item {
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked pills layout
|
||||
&.flex-column {
|
||||
.nav-item {
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
@include border-left-radius(0);
|
||||
@include border-top-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
@include border-right-radius(0);
|
||||
@include border-bottom-radius($border-radius);
|
||||
}
|
||||
}
|
||||
+ .nav-item {
|
||||
margin-left: 0;
|
||||
margin-top: -($nav-pills-bordered-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,936 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Navbar component
|
||||
*
|
||||
* Overrides for navbar component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base styles
|
||||
// ------------------------------
|
||||
|
||||
// Base class
|
||||
.navbar {
|
||||
border-top: $navbar-border-width solid transparent;
|
||||
border-bottom: $navbar-border-width solid transparent;
|
||||
align-items: stretch;
|
||||
|
||||
// If navbar is at the bottom of the page, remove bottom borders
|
||||
.page-content ~ &:not(.navbar-component):last-of-type,
|
||||
.content ~ &:not(.navbar-component):last-of-type {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar as a stand alone component
|
||||
.navbar-component {
|
||||
border: $navbar-border-width solid transparent;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Inside page header
|
||||
.page-header & {
|
||||
margin-left: $page-header-padding-x;
|
||||
margin-right: $page-header-padding-x;
|
||||
}
|
||||
|
||||
// Default navbar
|
||||
&.navbar-dark {
|
||||
border-color: $navbar-dark-border-color;
|
||||
}
|
||||
|
||||
// Default navbar
|
||||
&.navbar-light {
|
||||
border-color: $navbar-light-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Default navbar components
|
||||
//
|
||||
|
||||
// Navbar brand
|
||||
.navbar-brand {
|
||||
|
||||
// Logo image
|
||||
img {
|
||||
height: $navbar-brand-image-size;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar text
|
||||
.navbar-text {
|
||||
padding-top: $navbar-link-padding-y;
|
||||
padding-bottom: $navbar-link-padding-y;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Navbar nav
|
||||
//
|
||||
|
||||
// Base
|
||||
.navbar-nav {
|
||||
|
||||
// Tricky one - by default Bootstrap doesn't support navs within navs (mega menu, tags in dropdowns etc).
|
||||
// We need to override default behaviour and use our own solution
|
||||
.nav-link {
|
||||
padding-left: $nav-link-padding-x;
|
||||
padding-right: $nav-link-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar nav links (our solution)
|
||||
.navbar-nav-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: $navbar-link-padding-y $navbar-link-padding-x;
|
||||
outline: 0;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
cursor: $cursor-disabled;
|
||||
|
||||
// Badges and images
|
||||
.badge,
|
||||
img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// Badges
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
// Badge mark
|
||||
&-mark {
|
||||
top: $navbar-link-padding-y / 2;
|
||||
right: $navbar-link-padding-x / 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation with bottom highlight
|
||||
.navbar-nav-highlight & {
|
||||
|
||||
// Highlight
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
width: $navbar-link-highlight-size;
|
||||
}
|
||||
|
||||
// Highlight color
|
||||
.navbar-light &.active:before {
|
||||
background-color: $navbar-light-link-highlight-color;
|
||||
}
|
||||
.navbar-dark &.active:before {
|
||||
background-color: $navbar-dark-link-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Responsive navbar
|
||||
//
|
||||
|
||||
// Collapsible container
|
||||
.navbar-collapse {
|
||||
margin-left: -$navbar-padding-x;
|
||||
margin-right: -$navbar-padding-x;
|
||||
padding-left: $navbar-padding-x;
|
||||
padding-right: $navbar-padding-x;
|
||||
}
|
||||
|
||||
// Button for toggling the navbar when in its collapsed state
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
line-height: $line-height-base;
|
||||
cursor: pointer;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Add spacing between buttons
|
||||
& + & {
|
||||
margin-left: $navbar-padding-x;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// In dark navbar
|
||||
.navbar-dark & {
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// In light navbar
|
||||
.navbar-light & {
|
||||
color: $navbar-light-color;
|
||||
|
||||
// Hover and expanded states
|
||||
&:hover,
|
||||
&:focus,
|
||||
&[aria-expanded=true] {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
|
||||
// Add top spacing to the first nav item
|
||||
.navbar-nav:first-child > .nav-item:first-child {
|
||||
margin-top: ($navbar-padding-x / 2);
|
||||
}
|
||||
|
||||
// Add bottom spacing to the last nav item
|
||||
.navbar-nav:last-child > .nav-item:not(.show):last-child {
|
||||
margin-bottom: ($navbar-padding-x / 2);
|
||||
}
|
||||
|
||||
// Navbar nav link has 100% width
|
||||
.navbar-nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: -$navbar-padding-x;
|
||||
margin-right: -$navbar-padding-x;
|
||||
padding-left: $navbar-padding-x;
|
||||
padding-right: $navbar-padding-x;
|
||||
|
||||
// Display badge on the right side
|
||||
.badge {
|
||||
&:not(.position-static) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
// Display direction arrow on the right
|
||||
&.dropdown-toggle:not(.caret-0) {
|
||||
padding-right: ($navbar-padding-x * 2);
|
||||
|
||||
// Stick icon
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $navbar-padding-x;
|
||||
margin: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add top borders for better visual separation
|
||||
&.navbar-dark .navbar-collapse {
|
||||
border-top: $navbar-dark-collapse-border-width solid $navbar-dark-collapse-border-color;
|
||||
}
|
||||
&.navbar-light .navbar-collapse {
|
||||
border-top: $navbar-light-collapse-border-width solid $navbar-light-collapse-border-color;
|
||||
}
|
||||
|
||||
// Add vertical spacing to dropdowns
|
||||
.navbar-nav > .nav-item {
|
||||
> .dropdown-menu {
|
||||
margin-top: $navbar-padding-x;
|
||||
margin-bottom: $navbar-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Override dropdown submanus
|
||||
.dropdown-submenu {
|
||||
|
||||
// Change arrow icon direction
|
||||
.dropdown-toggle:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
}
|
||||
|
||||
// Make them stacked
|
||||
&,
|
||||
&.dropdown-submenu-left {
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Third level
|
||||
> .dropdown-menu > .dropdown-item,
|
||||
> .dropdown-menu > .dropdown-submenu > .dropdown-item {
|
||||
padding-left: ($dropdown-item-padding-x * 2);
|
||||
}
|
||||
|
||||
// Fourth level
|
||||
> .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-item,
|
||||
> .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-item {
|
||||
padding-left: ($dropdown-item-padding-x * 3);
|
||||
}
|
||||
}
|
||||
|
||||
// Make long lists scrollable if navbar is fixed
|
||||
&.fixed-top .navbar-collapse,
|
||||
&.fixed-bottom .navbar-collapse {
|
||||
max-height: 440px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
|
||||
// Logo
|
||||
.navbar-brand {
|
||||
min-width: $sidebar-base-width - $navbar-padding-x;
|
||||
}
|
||||
|
||||
// Highlight
|
||||
.navbar-nav-link {
|
||||
&:before {
|
||||
top: auto;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: $navbar-link-highlight-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Navbar themes
|
||||
//
|
||||
|
||||
// Dark links against a white background
|
||||
.navbar-light {
|
||||
color: $navbar-light-color;
|
||||
background-color: $navbar-light-bg;
|
||||
border-bottom-color: $navbar-light-border-color;
|
||||
|
||||
// After page header content
|
||||
.page-header-content + &,
|
||||
.content + &,
|
||||
.page-content + &,
|
||||
.fixed-bottom > &:first-child {
|
||||
border-top-color: $navbar-light-border-color;
|
||||
}
|
||||
|
||||
// Navbar nav
|
||||
// Again, override default BS styles since they affect
|
||||
// other navs (tabs, menus, navs, pills etc)
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $nav-link-color;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $nav-link-hover-color;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $nav-link-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar nav link
|
||||
.navbar-nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $navbar-light-hover-color;
|
||||
background-color: $navbar-light-hover-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
color: $navbar-light-disabled-color;
|
||||
background-color: $navbar-light-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.show > .navbar-nav-link,
|
||||
.active > .navbar-nav-link,
|
||||
.navbar-nav-link.show,
|
||||
.navbar-nav-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
background-color: $navbar-light-link-active-bg;
|
||||
}
|
||||
|
||||
// Text
|
||||
.navbar-text {
|
||||
a {
|
||||
color: $link-color;
|
||||
|
||||
// Make sure links have correct colors
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// White links against a dark background
|
||||
.navbar-dark {
|
||||
color: $navbar-dark-color;
|
||||
background-color: $navbar-dark-bg;
|
||||
border-bottom-color: $navbar-dark-border-color;
|
||||
|
||||
|
||||
// After page header content
|
||||
.page-header-content + &,
|
||||
.content + &,
|
||||
.page-content + &,
|
||||
.fixed-bottom > &:first-child {
|
||||
border-top-color: $navbar-dark-border-color;
|
||||
}
|
||||
|
||||
// Navbar nav
|
||||
// Again, override default BS styles since they affect
|
||||
// other navs (tabs, menus, navs, pills etc)
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $nav-link-color;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $nav-link-hover-color;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $nav-link-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar nav link
|
||||
.navbar-nav-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
background-color: $navbar-dark-hover-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color;
|
||||
background-color: $navbar-dark-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.show > .navbar-nav-link,
|
||||
.active > .navbar-nav-link,
|
||||
.navbar-nav-link.show,
|
||||
.navbar-nav-link.active {
|
||||
color: $navbar-dark-active-color;
|
||||
background-color: $navbar-dark-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Extra navbar components
|
||||
// ------------------------------
|
||||
|
||||
// Tabs and pills
|
||||
.navbar-nav {
|
||||
|
||||
// Tabs
|
||||
.nav-tabs {
|
||||
|
||||
// Links
|
||||
.nav-link {
|
||||
color: $nav-tabs-link-color;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $nav-tabs-link-hover-color;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $nav-tabs-link-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Sadly this needs to be duplicated to override
|
||||
// default BS behaviour
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
color: $nav-pills-link-color;
|
||||
|
||||
// Hover state
|
||||
&:not(.active) {
|
||||
@include hover-focus {
|
||||
color: $nav-pills-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate color shades for badges
|
||||
// depending on active item color
|
||||
&.active {
|
||||
@if (lightness($nav-pills-link-active-bg) < 75) {
|
||||
|
||||
// All badges except badge mark
|
||||
.badge:not(.badge-mark) {
|
||||
background-color: $white!important;
|
||||
color: $body-color!important;
|
||||
}
|
||||
|
||||
// Badge mark with custom bg
|
||||
.badge-mark[class*=bg-] {
|
||||
background-color: $white!important;
|
||||
border-color: $white!important;
|
||||
}
|
||||
|
||||
// Badge mark with custom border
|
||||
.badge-mark[class*=border-] {
|
||||
border-color: $white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colrs in active state
|
||||
&.active,
|
||||
.show:not(.navbar-collapse) > & {
|
||||
color: $nav-pills-link-active-color;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
@include hover-focus {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button dropdown
|
||||
.navbar {
|
||||
.btn-group {
|
||||
.dropdown-menu-right {
|
||||
/*rtl:begin:ignore*/
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User dropdown
|
||||
.dropdown-user {
|
||||
.navbar-nav-link {
|
||||
|
||||
// Re-define vertical padding
|
||||
&,
|
||||
> span {
|
||||
padding-top: ($navbar-link-padding-y / 2);
|
||||
padding-bottom: ($navbar-link-padding-y / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flag image in language selector
|
||||
.img-flag {
|
||||
height: $font-size-lg;
|
||||
margin-top: ($line-height-computed - $font-size-lg) / 2;
|
||||
vertical-align: top;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Mega menu
|
||||
//
|
||||
|
||||
// Left and right alignment
|
||||
.mega-menu {
|
||||
|
||||
// Left alignment
|
||||
&-left {
|
||||
> .dropdown-menu {
|
||||
/*rtl:ignore*/
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&-right {
|
||||
> .dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Full width
|
||||
.mega-menu-full {
|
||||
> .dropdown-menu {
|
||||
left: $navbar-padding-x;
|
||||
right: $navbar-padding-x;
|
||||
|
||||
// In navbar component
|
||||
.navbar-component & {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu header
|
||||
.dropdown-content-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: $dropdown-content-body-padding-x;
|
||||
padding-right: $dropdown-content-body-padding-x;
|
||||
@include border-top-radius($dropdown-border-radius - rem-calc($dropdown-border-width));
|
||||
|
||||
// If header has no background classes
|
||||
&:not([class*=bg-]) {
|
||||
padding-top: $dropdown-content-body-padding-y;
|
||||
padding-bottom: $dropdown-content-body-padding-y;
|
||||
}
|
||||
|
||||
// If header has background classes
|
||||
&[class*=bg-] {
|
||||
padding-top: $dropdown-content-header-padding-y;
|
||||
padding-bottom: $dropdown-content-header-padding-y;
|
||||
}
|
||||
|
||||
// Add top border if used with the table
|
||||
+ .table-responsive,
|
||||
+ .table {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu container
|
||||
.dropdown-content {
|
||||
&:not(ul) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu body
|
||||
.dropdown-content-body {
|
||||
padding: $dropdown-content-body-padding-y $dropdown-content-body-padding-x;
|
||||
|
||||
// Remove top padding if header has no background
|
||||
.dropdown-content-header:not([class*=bg-]) + & {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu footer
|
||||
.dropdown-content-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $dropdown-content-footer-padding-y $dropdown-content-body-padding-x;
|
||||
border-top: $dropdown-content-footer-border-width solid $dropdown-content-footer-border-color;
|
||||
@include border-bottom-radius($dropdown-border-radius - rem-calc($dropdown-border-width));
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Fixed navbar setup
|
||||
// -------------------------
|
||||
|
||||
// Top placement
|
||||
.navbar {
|
||||
&-top {
|
||||
padding-top: $nav-link-height + rem-calc($navbar-border-width * 2);
|
||||
}
|
||||
&-lg-top {
|
||||
padding-top: $nav-link-height-lg + rem-calc($navbar-border-width * 2);
|
||||
}
|
||||
&-sm-top {
|
||||
padding-top: $nav-link-height-sm + rem-calc($navbar-border-width * 2);
|
||||
}
|
||||
&-lg-md-top {
|
||||
padding-top: ($nav-link-height-lg + rem-calc($navbar-border-width * 2)) + ($nav-link-height + rem-calc($navbar-border-width * 2));
|
||||
}
|
||||
&-md-md-top {
|
||||
padding-top: ($nav-link-height + rem-calc($navbar-border-width * 2)) * 2;
|
||||
}
|
||||
&-sm-md-top {
|
||||
padding-top: ($nav-link-height-sm + rem-calc($navbar-border-width * 2)) + ($nav-link-height + rem-calc($navbar-border-width * 2));
|
||||
}
|
||||
&-lg-sm-top {
|
||||
padding-top: ($nav-link-height-lg + rem-calc($navbar-border-width * 2)) + ($nav-link-height-sm + rem-calc($navbar-border-width * 2));
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom placement
|
||||
.navbar {
|
||||
&-bottom {
|
||||
padding-bottom: $nav-link-height + rem-calc($navbar-border-width * 2);
|
||||
}
|
||||
&-lg-md-bottom {
|
||||
padding-bottom: ($nav-link-height-lg + rem-calc($navbar-border-width * 2)) + ($nav-link-height + rem-calc($navbar-border-width * 2));
|
||||
}
|
||||
&-md-md-bottom {
|
||||
padding-bottom: ($nav-link-height + rem-calc($navbar-border-width * 2)) * 2;
|
||||
}
|
||||
&-sm-md-bottom {
|
||||
padding-bottom: ($nav-link-height-sm + rem-calc($navbar-border-width * 2)) + ($nav-link-height + rem-calc($navbar-border-width * 2));
|
||||
}
|
||||
&-lg-sm-bottom {
|
||||
padding-bottom: ($nav-link-height-lg + rem-calc($navbar-border-width * 2)) + ($nav-link-height-sm + rem-calc($navbar-border-width * 2));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Optional sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.navbar-lg {
|
||||
|
||||
// Brand
|
||||
.navbar-brand {
|
||||
padding-top: $navbar-brand-padding-y-lg;
|
||||
padding-bottom: $navbar-brand-padding-y-lg;
|
||||
}
|
||||
|
||||
// Nav links
|
||||
.navbar-nav-link {
|
||||
padding: $navbar-link-padding-y-lg $navbar-link-padding-x-lg;
|
||||
|
||||
// Badge
|
||||
.badge-mark {
|
||||
top: $navbar-link-padding-y-lg / 2;
|
||||
right: $navbar-link-padding-x-lg / 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
.navbar-text {
|
||||
padding-top: $navbar-link-padding-y-lg;
|
||||
padding-bottom: $navbar-link-padding-y-lg;
|
||||
}
|
||||
|
||||
// User dropdown
|
||||
.dropdown-user {
|
||||
> .navbar-nav-link {
|
||||
|
||||
// Set vertical padding
|
||||
&,
|
||||
> span {
|
||||
padding-top: ($navbar-link-padding-y-lg / 2);
|
||||
padding-bottom: ($navbar-link-padding-y-lg / 2);
|
||||
}
|
||||
|
||||
// User image
|
||||
> img {
|
||||
max-height: ($font-size-base * $line-height-base) + ($navbar-link-padding-y-lg / 2) + ($navbar-link-padding-y-lg / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.navbar-sm {
|
||||
|
||||
// Brand
|
||||
.navbar-brand {
|
||||
padding-top: $navbar-brand-padding-y-sm;
|
||||
padding-bottom: $navbar-brand-padding-y-sm;
|
||||
}
|
||||
|
||||
// Items
|
||||
.navbar-nav-link {
|
||||
padding: $navbar-link-padding-y-sm $navbar-link-padding-x-sm;
|
||||
|
||||
// Badge
|
||||
.badge-mark {
|
||||
top: $navbar-link-padding-y-sm / 2;
|
||||
right: $navbar-link-padding-x-sm / 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
.navbar-text {
|
||||
padding-top: $navbar-link-padding-y-sm;
|
||||
padding-bottom: $navbar-link-padding-y-sm;
|
||||
}
|
||||
|
||||
// User dropdown
|
||||
.dropdown-user {
|
||||
> .navbar-nav-link {
|
||||
|
||||
// Set vertical padding
|
||||
&,
|
||||
> span {
|
||||
padding-top: ($navbar-link-padding-y-sm / 2);
|
||||
padding-bottom: ($navbar-link-padding-y-sm / 2);
|
||||
}
|
||||
|
||||
// User image
|
||||
> img {
|
||||
max-height: ($font-size-base * $line-height-base) + ($navbar-link-padding-y-sm / 2) + ($navbar-link-padding-y-sm / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Misc
|
||||
// ------------------------------
|
||||
|
||||
// Navbar header - allows to use custom background colors
|
||||
// in logo section. Uses negative margins.
|
||||
.navbar-header {
|
||||
margin-top: -($navbar-border-width);
|
||||
margin-bottom: -($navbar-border-width);
|
||||
margin-left: -($navbar-padding-x);
|
||||
margin-right: $navbar-padding-x;
|
||||
border-top: $navbar-border-width solid transparent;
|
||||
border-bottom: $navbar-border-width solid transparent;
|
||||
|
||||
// Dark header
|
||||
&.navbar-dark {
|
||||
border-bottom-color: $navbar-dark-border-color;
|
||||
}
|
||||
|
||||
// Light header
|
||||
&.navbar-light {
|
||||
border-bottom-color: $navbar-light-border-color;
|
||||
}
|
||||
|
||||
// Logo
|
||||
.navbar-brand {
|
||||
margin-left: $navbar-padding-x;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Logo that appears only when sidebar is collapsed
|
||||
.navbar-brand-xs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// When sidebar is collapsed
|
||||
.sidebar-xs & {
|
||||
|
||||
// Hide original logo
|
||||
.navbar-brand-md {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show icon logo
|
||||
.navbar-brand-xs {
|
||||
display: inline-block;
|
||||
min-width: $sidebar-mini-width;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for static navbar to appear on top of sidebar
|
||||
.navbar-static {
|
||||
z-index: ($sidebar-zindex-main + 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Layout specific additions
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// # Layout 5
|
||||
//
|
||||
|
||||
@if $layout == 'layout_5' {
|
||||
|
||||
// Navbars have extra horizontal spacing that
|
||||
// match page content spacing
|
||||
.navbar:not(.navbar-component) {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: ($page-container-padding-x / 2) + ($content-container-padding-x * 2);
|
||||
padding-right: ($page-container-padding-x / 2) + ($content-container-padding-x * 2);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: $page-container-padding-x + ($content-container-padding-x * 2);
|
||||
padding-right: $page-container-padding-x + ($content-container-padding-x * 2);
|
||||
}
|
||||
|
||||
// Same for full width mega menu
|
||||
.mega-menu-full {
|
||||
.dropdown-menu {
|
||||
@include media-breakpoint-up(md) {
|
||||
left: ($page-container-padding-x / 2) + ($content-container-padding-x * 2);
|
||||
right: ($page-container-padding-x / 2) + ($content-container-padding-x * 2);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
left: $page-container-padding-x + ($content-container-padding-x * 2);
|
||||
right: $page-container-padding-x + ($content-container-padding-x * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Boxed layout
|
||||
> .container {
|
||||
.mega-menu-full .dropdown-menu {
|
||||
left: ($content-container-padding-x * 2);
|
||||
right: ($content-container-padding-x * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pagination component
|
||||
*
|
||||
* Overrides for pagination component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
// Container
|
||||
.pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Link
|
||||
.page-link {
|
||||
text-align: center;
|
||||
min-width: ($font-size-base * $line-height-base) + rem-calc($pagination-border-width * 2) + ($pagination-padding-y * 2);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.pagination-lg {
|
||||
.page-link {
|
||||
min-width: ($font-size-lg * $line-height-lg) + rem-calc($pagination-border-width * 2) + ($pagination-padding-y-lg * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-sm {
|
||||
.page-link {
|
||||
min-width: ($font-size-sm * $line-height-sm) + rem-calc($pagination-border-width * 2) + ($pagination-padding-y-sm * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional styles
|
||||
//
|
||||
|
||||
// Rounded style
|
||||
.pagination-rounded {
|
||||
.page-item {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
@include border-left-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-right-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flat style
|
||||
.pagination-flat {
|
||||
|
||||
// Item
|
||||
.page-item {
|
||||
|
||||
// Active state
|
||||
&.active .page-link {
|
||||
background-color: $pagination-active-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled .page-link {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
.page-link {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
margin-left: $pagination-flat-spacing;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
background-color: $pagination-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded
|
||||
&.pagination-rounded {
|
||||
.page-link {
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Separated style
|
||||
.pagination-separated {
|
||||
|
||||
// Link
|
||||
.page-link {
|
||||
margin-left: $pagination-separated-spacing;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Rounded
|
||||
&.pagination-rounded {
|
||||
.page-link {
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pager style
|
||||
.pagination-pager {
|
||||
|
||||
// Item
|
||||
.page-item {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Link
|
||||
.page-link {
|
||||
margin-left: $spacer;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Rounded
|
||||
&.pagination-rounded {
|
||||
.page-link {
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
|
||||
// Linked style
|
||||
&-linked {
|
||||
|
||||
// Item
|
||||
.page-item {
|
||||
&.disabled .page-link {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
.page-link {
|
||||
color: $link-color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
@include hover-focus {
|
||||
color: $pagination-active-color;
|
||||
background-color: $pagination-active-bg;
|
||||
border-color: $pagination-active-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&:not(.pagination-rounded).pagination-lg {
|
||||
.page-link {
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
}
|
||||
&:not(.pagination-rounded).pagination-sm {
|
||||
.page-link {
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Popover component
|
||||
*
|
||||
* Overrides for popover component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Popover header
|
||||
.popover-header {
|
||||
font-weight: $font-weight-semibold;
|
||||
padding-bottom: 0;
|
||||
border-bottom-width: 0;
|
||||
|
||||
// Custom background
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light) {
|
||||
padding-top: ($popover-header-padding-y / 1.25);
|
||||
padding-bottom: ($popover-header-padding-y / 1.25);
|
||||
border-bottom-width: $popover-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional styles
|
||||
//
|
||||
|
||||
// Top placement
|
||||
.bs-popover-top {
|
||||
|
||||
// Custom colors
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light),
|
||||
&[class*=border-] {
|
||||
.arrow {
|
||||
&,
|
||||
&:after,
|
||||
&:before {
|
||||
border-top-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right placement
|
||||
.bs-popover-right {
|
||||
|
||||
// Custom colors
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light),
|
||||
&[class*=border-] {
|
||||
.arrow {
|
||||
&,
|
||||
&:after,
|
||||
&:before {
|
||||
border-right-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom placement
|
||||
.bs-popover-bottom {
|
||||
|
||||
// Custom colors
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light),
|
||||
&[class*=border-] {
|
||||
.arrow {
|
||||
&,
|
||||
&:after,
|
||||
&:before {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left placement
|
||||
.bs-popover-left {
|
||||
|
||||
// Custom colors
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light),
|
||||
&[class*=border-] {
|
||||
.arrow {
|
||||
&,
|
||||
&:after,
|
||||
&:before {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Progress bar component
|
||||
*
|
||||
* Overrides for progress bar component
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
// Container
|
||||
.progress {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Bar
|
||||
.progress-bar {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Enhanced bars
|
||||
//
|
||||
|
||||
.progress {
|
||||
|
||||
// Progress bar back text
|
||||
.progressbar-back-text,
|
||||
.progressbar-front-text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $progress-font-size;
|
||||
}
|
||||
|
||||
// Center the text
|
||||
.progressbar-back-text {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
// Vertical orientation
|
||||
&.vertical {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
|
||||
// Add horizontal spacing
|
||||
& + & {
|
||||
margin-left: $element-spacer-x;
|
||||
}
|
||||
|
||||
// Progress bar adjustment
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
@include transition(height 0.6s ease);
|
||||
}
|
||||
|
||||
// Bottom direction
|
||||
&.bottom {
|
||||
|
||||
// Progress bar back text
|
||||
.progressbar-back-text,
|
||||
.progressbar-front-text {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Bar itself
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Reboot
|
||||
*
|
||||
* Normalization of HTML elements - overrides of default Bootstrap styles
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Document
|
||||
//
|
||||
|
||||
// Body
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
dt {
|
||||
margin-bottom: map-get($spacers, 1);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: $spacer;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
pre {
|
||||
tab-size: 4;
|
||||
border: $border-width solid $pre-border-color;
|
||||
padding: $pre-padding-y $pre-padding-x;
|
||||
margin-bottom: 0;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Images and content
|
||||
//
|
||||
|
||||
// SVG alignment
|
||||
svg {
|
||||
display: block;
|
||||
|
||||
// Inline
|
||||
.svg-inline & {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Centered object
|
||||
.svg-center & {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inputs
|
||||
//
|
||||
|
||||
// File input type
|
||||
input[type="file"] {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,370 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Table styling
|
||||
*
|
||||
* Override and extend default Bootstrap styles.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base styles
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
th {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// Header cells
|
||||
thead th {
|
||||
vertical-align: middle;
|
||||
border-bottom: $table-border-width solid $table-head-border-color;
|
||||
}
|
||||
|
||||
// Footer cells
|
||||
tfoot th {
|
||||
border-top-color: $table-head-border-color;
|
||||
}
|
||||
|
||||
// Remove top border from thead by default
|
||||
caption + thead,
|
||||
colgroup + thead,
|
||||
thead:first-child {
|
||||
tr:first-child {
|
||||
th,
|
||||
td {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animate background color in cells and rows
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
@include transition(background-color ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
|
||||
// Dark styles
|
||||
.table-dark {
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-color: $table-dark-head-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive tables
|
||||
.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) {
|
||||
> .table-bordered {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional styles
|
||||
//
|
||||
|
||||
// Scrollable table
|
||||
.table-scrollable {
|
||||
max-height: $table-scrollable-max-height;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Columned table
|
||||
.table-columned {
|
||||
tbody,
|
||||
tfoot {
|
||||
td,
|
||||
th {
|
||||
border: 0;
|
||||
border-left: $table-border-width solid $table-border-color;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-left: $table-border-width solid $table-border-color;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Borderless table
|
||||
.table-borderless {
|
||||
td,
|
||||
th {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional table cell sizes
|
||||
//
|
||||
|
||||
// Extra large
|
||||
.table-xl {
|
||||
th,
|
||||
td {
|
||||
padding: $table-cell-padding-xl;
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
.table-lg {
|
||||
th,
|
||||
td {
|
||||
padding: $table-cell-padding-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.table-xs {
|
||||
th,
|
||||
td {
|
||||
padding: $table-cell-padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Table borders
|
||||
//
|
||||
|
||||
// Solid border
|
||||
.table-border-solid {
|
||||
thead & {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: ($table-border-width * 2);
|
||||
}
|
||||
}
|
||||
|
||||
tbody &,
|
||||
tfoot & {
|
||||
td,
|
||||
th {
|
||||
border-top-width: ($table-border-width * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Double border
|
||||
.table-border-double {
|
||||
thead & {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: ($table-border-width * 3);
|
||||
border-bottom-style: double;
|
||||
}
|
||||
|
||||
.table-bordered &:first-child {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: ($table-border-width * 3);
|
||||
border-bottom-style: double;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody &,
|
||||
tfoot & {
|
||||
td,
|
||||
th {
|
||||
border-top-width: ($table-border-width * 3);
|
||||
border-top-style: double;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dashed border
|
||||
.table-border-dashed {
|
||||
td,
|
||||
th {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom header bottom border color
|
||||
.table {
|
||||
thead {
|
||||
tr[class*=border-bottom-] {
|
||||
th,
|
||||
td {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom body and footer bottom border color
|
||||
tbody,
|
||||
tfoot {
|
||||
tr[class*=border-top-] {
|
||||
th,
|
||||
td {
|
||||
border-top-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Table inside card
|
||||
//
|
||||
|
||||
// Remove top border from the table
|
||||
.card {
|
||||
> .table:first-child,
|
||||
> [class*=table-responsive]:first-child > .table:first-child {
|
||||
caption + thead,
|
||||
colgroup + thead,
|
||||
thead:first-child {
|
||||
tr:first-child {
|
||||
th,
|
||||
td {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If table is displayed in nested card
|
||||
.card {
|
||||
&.card-table {
|
||||
border-width: $table-border-width;
|
||||
border-color: $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Immediate child
|
||||
.card {
|
||||
|
||||
// Make sure caption has the same spacing
|
||||
> .table,
|
||||
> [class*=table-responsive] > .table {
|
||||
caption {
|
||||
padding-left: $card-spacer-x;
|
||||
padding-right: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Add border top radius for first table
|
||||
> .table:first-child,
|
||||
> [class*=table-responsive]:first-child > .table:first-child {
|
||||
@include border-top-radius($card-inner-border-radius);
|
||||
|
||||
thead:first-child,
|
||||
tbody:first-child {
|
||||
tr:first-child {
|
||||
border-top-left-radius: $card-inner-border-radius;
|
||||
border-top-right-radius: $card-inner-border-radius;
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-top-left-radius: $card-inner-border-radius;
|
||||
}
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-top-right-radius: $card-inner-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Add border bottom radius for last table
|
||||
> .table:last-child,
|
||||
> [class*=table-responsive]:last-child > .table:last-child {
|
||||
@include border-bottom-radius($card-inner-border-radius);
|
||||
|
||||
tbody:last-child,
|
||||
tfoot:last-child {
|
||||
tr:last-child {
|
||||
border-bottom-left-radius: $card-inner-border-radius;
|
||||
border-bottom-right-radius: $card-inner-border-radius;
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-bottom-left-radius: $card-inner-border-radius;
|
||||
}
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-bottom-right-radius: $card-inner-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove unnecessary borders
|
||||
> .table-bordered,
|
||||
> [class*=table-responsive] > .table-bordered {
|
||||
border: 0;
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot {
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add top border in certain cases
|
||||
.card-header:not([class*=bg-]) + .table,
|
||||
.card-header:not([class*=bg-]) + div[class*=table-responsive],
|
||||
.card-body + .table,
|
||||
.card-body + div[class*=table-responsive],
|
||||
.table + .card-body,
|
||||
div[class*=table-responsive] + .card-body,
|
||||
.navbar-light + div[class*=table-responsive],
|
||||
.navbar-light + .table {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
// Remove top border if table doesn't have thead
|
||||
.table tbody:first-child tr:first-child th,
|
||||
div[class*=table-responsive] > .table tbody:first-child tr:first-child th,
|
||||
.table tbody:first-child tr:first-child td,
|
||||
div[class*=table-responsive] > .table tbody:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// If table comes after card footer
|
||||
.card-footer {
|
||||
+ [class*=table-responsive],
|
||||
+ .table {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Tooltip component
|
||||
*
|
||||
* Override and extend default tooltip styles.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Header
|
||||
.toast-header {
|
||||
background-clip: border-box;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Tooltip component
|
||||
*
|
||||
* Override and extend default tooltip styles.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Custom styles
|
||||
//
|
||||
|
||||
// Top placement
|
||||
.bs-tooltip-top {
|
||||
.arrow[class*=border-]:before {
|
||||
border-top-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Right placement
|
||||
.bs-tooltip-right {
|
||||
.arrow[class*=border-]:before {
|
||||
border-right-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom placement
|
||||
.bs-tooltip-bottom {
|
||||
.arrow[class*=border-]:before {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Left placement
|
||||
.bs-tooltip-left {
|
||||
.arrow[class*=border-]:before {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,383 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Text styling
|
||||
*
|
||||
* Override and extend default Bootstrap styles.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Headings
|
||||
//
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Lists
|
||||
//
|
||||
|
||||
// Custom list class
|
||||
.list {
|
||||
|
||||
// Add vertical spacing to the list items
|
||||
> li {
|
||||
&,
|
||||
.list > li {
|
||||
margin-top: map-get($spacers, 1);
|
||||
}
|
||||
|
||||
// Remove top margin from the first list item
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Extended list
|
||||
&-extended {
|
||||
> li {
|
||||
&,
|
||||
.list > li {
|
||||
margin-top: ($spacer / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List item styling
|
||||
ul {
|
||||
&.list-square {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
&.list-circle {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Inline condensed
|
||||
.list-inline-condensed {
|
||||
.list-inline-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: ($list-inline-padding / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inline dotted
|
||||
.list-inline-dotted {
|
||||
.list-inline-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: ($list-inline-padding / 2);
|
||||
|
||||
// Dot
|
||||
&:after {
|
||||
content: $icon-list-dot;
|
||||
font-family: $icon-font-family;
|
||||
font-size: ($icon-font-size / 2);
|
||||
width: ($icon-font-size / 2.5);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-left: ($list-inline-padding / 2) + (($icon-font-size / 2.5) / 2);
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Condensed dotted
|
||||
&.list-inline-condensed {
|
||||
.list-inline-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: ($list-inline-padding / 3);
|
||||
|
||||
&:after {
|
||||
margin-left: ($list-inline-padding / 3) + (($icon-font-size / 4) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// List with icons
|
||||
//
|
||||
|
||||
// Base
|
||||
.list-icons {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
// Spacing between items
|
||||
> *:not(:last-child) {
|
||||
margin-right: $list-icons-spacer;
|
||||
}
|
||||
|
||||
// Extended size
|
||||
&-extended {
|
||||
> *:not(:last-child) {
|
||||
margin-right: $list-icons-spacer * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List icons item
|
||||
.list-icons-item {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Linked list icons item
|
||||
a.list-icons-item {
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Color
|
||||
&:not([class*=text-]) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Hover/open states
|
||||
&:hover,
|
||||
&:focus,
|
||||
.show > & {
|
||||
outline: 0;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text styling
|
||||
//
|
||||
|
||||
// Additional font weights
|
||||
.font-weight-black {
|
||||
font-weight: $font-weight-black;
|
||||
}
|
||||
.font-weight-semibold {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
.font-weight-thin {
|
||||
font-weight: $font-weight-thin;
|
||||
}
|
||||
|
||||
// White text color
|
||||
.text-white {
|
||||
color: $white;
|
||||
}
|
||||
a.text-white {
|
||||
&:not(.btn) {
|
||||
@include transition(color ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: rgba($white, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
// Default text color
|
||||
.text-default {
|
||||
color: $body-color;
|
||||
}
|
||||
a.text-default {
|
||||
&:not(.btn) {
|
||||
@include transition(color ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: rgba($body-color, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Blockquotes
|
||||
//
|
||||
|
||||
// Bordered style
|
||||
.blockquote-bordered {
|
||||
border-left: $blockquote-border-width solid $blockquote-border-color;
|
||||
|
||||
// Reverse border
|
||||
&-reverse {
|
||||
border-left: 0;
|
||||
border-right: $blockquote-border-width solid $blockquote-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.blockquote-footer {
|
||||
font-size: $font-size-base;
|
||||
|
||||
// Add more horizontal spacing
|
||||
&::before {
|
||||
content: "\2014 \00A0 \00A0 \00A0";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Feed list
|
||||
//
|
||||
|
||||
// Feed item
|
||||
.list-feed-item {
|
||||
position: relative;
|
||||
padding-bottom: $list-feed-item-padding-y;
|
||||
padding-left: $list-feed-item-padding-x;
|
||||
|
||||
// Circle
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: $list-feed-circle-position;
|
||||
background-color: $card-bg;
|
||||
display: inline-block;
|
||||
border: $list-feed-circle-border-width solid $list-feed-circle-border-color;
|
||||
z-index: 3;
|
||||
@include size($list-feed-circle-radius);
|
||||
@include border-radius($border-radius-circle);
|
||||
}
|
||||
|
||||
// Line
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: $list-feed-circle-position;
|
||||
left: ($list-feed-circle-radius / 2) - (rem-calc($list-feed-circle-border-width) / 2);
|
||||
bottom: -($list-feed-circle-position + rem-calc($list-feed-circle-border-width));
|
||||
width: 0;
|
||||
border-left: ($list-feed-circle-border-width / 2) solid $list-feed-circle-border-color;
|
||||
border-right: ($list-feed-circle-border-width / 2) solid $list-feed-circle-border-color;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// First item
|
||||
&:first-child {
|
||||
&:after {
|
||||
top: $list-feed-circle-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Last item
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Setup color inheritance
|
||||
&[class*=border-] {
|
||||
&:before,
|
||||
&:after {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Filled symbols
|
||||
.list-feed-solid {
|
||||
.list-feed-item:before {
|
||||
content: '';
|
||||
border-width: ($list-feed-circle-radius / 2);
|
||||
@include size(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Square
|
||||
.list-feed-square {
|
||||
.list-feed-item:before {
|
||||
content: '';
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Rhombus
|
||||
.list-feed-rhombus {
|
||||
.list-feed-item:before {
|
||||
content: '';
|
||||
transform: rotate(45deg);
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Time stamp
|
||||
.list-feed-time {
|
||||
.list-feed-item {
|
||||
margin-left: (($list-feed-item-padding-x * 2) - ($list-feed-circle-radius / 2));
|
||||
|
||||
.feed-time {
|
||||
position: absolute;
|
||||
left: -(($list-feed-item-padding-x * 2) - ($list-feed-circle-radius / 2));
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
// Content text divider
|
||||
.content-divider {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// Text container
|
||||
> span {
|
||||
background-color: $body-bg;
|
||||
display: inline-block;
|
||||
|
||||
// Change bg color if inside other containers
|
||||
.card &,
|
||||
.tab-content-bordered & {
|
||||
background-color: $card-bg;
|
||||
}
|
||||
.modal & {
|
||||
background-color: $modal-content-bg;
|
||||
}
|
||||
|
||||
// Add line
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: $content-divider-height;
|
||||
background-color: $content-divider-color;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large circle icon
|
||||
.letter-icon {
|
||||
width: $icon-font-size;
|
||||
height: $line-height-computed;
|
||||
display: block;
|
||||
|
||||
// Sizes
|
||||
.btn-lg & {
|
||||
height: $line-height-computed-lg;
|
||||
}
|
||||
.btn-sm & {
|
||||
height: $line-height-computed-sm;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Utilities
|
||||
*
|
||||
* Import Bootstrap utilities with overrides
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
@import "utilities/background";
|
||||
@@ -0,0 +1,21 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Background mixin
|
||||
*
|
||||
* Override and extend default background mixin.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Contextual backgrounds
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient
|
||||
@mixin bg-gradient-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Badge mixin
|
||||
*
|
||||
* Override and extend default badge mixin.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
@mixin badge-variant($bg) {
|
||||
color: color-yiq($bg);
|
||||
background-color: $bg;
|
||||
|
||||
@at-root a#{&} {
|
||||
@include hover-focus {
|
||||
color: color-yiq($bg);
|
||||
text-decoration: none;
|
||||
|
||||
&:not(.badge-light) {
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Buttons mixin
|
||||
*
|
||||
* Override and extend default buttons mixin.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Button variants
|
||||
//
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
// Primary buttons
|
||||
@mixin button-variant($background, $border, $hover-background: $background, $hover-border: $border, $active-background: $background, $active-border: $border) {
|
||||
color: color-yiq($background);
|
||||
@include gradient-bg($background);
|
||||
|
||||
@include hover {
|
||||
color: color-yiq($hover-background);
|
||||
@include gradient-bg($hover-background);
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
@if $enable-gradients {
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline button
|
||||
@mixin button-outline-variant($color, $color-hover: #fff) {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $color;
|
||||
|
||||
@include hover {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
@include border-radius($border-radius, 0);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Caret mixin
|
||||
*
|
||||
* Override and extend default cared mixin.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
@mixin caret-down {
|
||||
content: $icon-caret-down;
|
||||
}
|
||||
|
||||
@mixin caret-up {
|
||||
content: $icon-caret-up;
|
||||
}
|
||||
|
||||
@mixin caret-right {
|
||||
content: $icon-caret-right;
|
||||
}
|
||||
|
||||
@mixin caret-left {
|
||||
content: $icon-caret-left;
|
||||
}
|
||||
|
||||
@mixin caret($caret-direction: down) {
|
||||
@if $enable-caret {
|
||||
&::after {
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
vertical-align: $caret-vertical-align;
|
||||
font-size: $caret-font-size;
|
||||
margin-left: $caret-spacing;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
@if $caret-direction == down {
|
||||
@include caret-down;
|
||||
} @else if $caret-direction == up {
|
||||
@include caret-up;
|
||||
} @else if $caret-direction == right {
|
||||
@include caret-right;
|
||||
}
|
||||
}
|
||||
|
||||
@if $caret-direction == left {
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
font-size: $caret-font-size;
|
||||
margin-right: ($element-spacer-x * .75);
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
@include caret-left;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Forms mixin
|
||||
*
|
||||
* Override and extend default forms mixin.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Form control focus state
|
||||
@mixin form-control-focus() {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
@if $enable-shadows {
|
||||
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
||||
} @else {
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.border-1):not(.border-2):not(.border-3):focus {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Background utility
|
||||
*
|
||||
* Override and extend default background utility.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Text color in dark containers
|
||||
[class*=bg-]:not(.bg-transparent):not(.bg-light):not(.bg-white):not(.btn-outline):not(body) {
|
||||
color: $white;
|
||||
}
|
||||
Reference in New Issue
Block a user