first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,56 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Dragula - drag and drop library
|
||||
*
|
||||
* Styles for Dragula Drag and drop plugin
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-dragula {
|
||||
|
||||
// Base
|
||||
.gu-mirror {
|
||||
position: fixed !important;
|
||||
margin: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
// Remove bottom margin from the second last item in dropdown menu
|
||||
.gu-unselectable.dropdown-menu li:nth-last-child(2) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Remove borders from toolbar pills
|
||||
.nav-pills-toolbar > li.gu-mirror:not(.active) > a {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Hide element
|
||||
.gu-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Disable selection
|
||||
.gu-unselectable {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Mute draggable element
|
||||
.gu-transit {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// Draggable handle
|
||||
.dragula-handle {
|
||||
color: $gray-600;
|
||||
cursor: pointer;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Header elements
|
||||
*
|
||||
* Display default and custom components in page header, card header and breadcrumbs
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-header-elements {
|
||||
|
||||
// Base
|
||||
.header-elements {
|
||||
|
||||
// Inside card header
|
||||
.card-header & {
|
||||
padding-top: $card-spacer-y;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inside page header
|
||||
//
|
||||
|
||||
// Base
|
||||
.page-header-content & {
|
||||
margin-left: -($page-header-padding-x);
|
||||
margin-right: -($page-header-padding-x);
|
||||
padding: $header-elements-padding-y $header-elements-padding-x;
|
||||
border-top: $page-header-elements-border-width solid darken($body-bg, 15%);
|
||||
border-bottom: $page-header-elements-border-width solid darken($body-bg, 15%);
|
||||
background-color: darken($body-bg, 2.5%);
|
||||
}
|
||||
|
||||
// Light page header
|
||||
.page-header-light & {
|
||||
background-color: $page-header-light-elements-bg;
|
||||
border-color: $page-header-light-elements-border-color;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Dark page header
|
||||
.page-header-dark & {
|
||||
background-color: $page-header-dark-elements-bg;
|
||||
border-color: $page-header-dark-elements-border-color;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inside breadcrumb line
|
||||
//
|
||||
|
||||
// Base
|
||||
.breadcrumb-line & {
|
||||
margin-left: -($breadcrumb-line-padding-x);
|
||||
margin-right: -($breadcrumb-line-padding-x);
|
||||
padding: 0 $breadcrumb-line-padding-x;
|
||||
border-top: $breadcrumb-line-elements-border-width solid transparent;
|
||||
}
|
||||
|
||||
// Light breadcrumb line
|
||||
.breadcrumb-line-light & {
|
||||
background-color: $breadcrumb-line-light-elements-bg;
|
||||
border-color: $breadcrumb-line-light-elements-border-color;
|
||||
}
|
||||
|
||||
// Dark breadcrumb line
|
||||
.breadcrumb-line-dark & {
|
||||
background-color: $breadcrumb-line-dark-elements-bg;
|
||||
border-color: $breadcrumb-line-dark-elements-border-color;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
// Remove bottom margin from last form group
|
||||
.form-group {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile toggler
|
||||
.header-elements-toggle,
|
||||
.footer-elements-toggle {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Generate styles for multiple breakpoints
|
||||
//
|
||||
// Classes: .header-elements-inline and .header-elements-[breakpoint]-inline
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.header-elements#{$infix}-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
// Header elements container
|
||||
.header-elements {
|
||||
display: flex!important;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Tabs inside card header
|
||||
.card-header-tabs {
|
||||
.nav-link {
|
||||
padding-top: $card-spacer-y + rem-calc($card-border-width);
|
||||
padding-bottom: $card-spacer-y + rem-calc($card-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Headroom
|
||||
*
|
||||
* Styles for headroom.min.js - hides BS navbar component on page scroll
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-headroom {
|
||||
|
||||
// Base
|
||||
.headroom {
|
||||
transition: transform ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Positions
|
||||
//
|
||||
|
||||
// Top
|
||||
.navbar-slide-top {
|
||||
|
||||
// Hidden
|
||||
&.headroom--pinned {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
// Visible
|
||||
&.headroom--unpinned {
|
||||
transform: translateY(-100%);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom
|
||||
.navbar-slide-bottom {
|
||||
|
||||
// Hidden
|
||||
&.headroom--pinned {
|
||||
transform: translateY(100%);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
// Visible
|
||||
&.headroom--unpinned {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Perfect Scrollbar
|
||||
*
|
||||
* Styles for perfect_scrollbar.min.js - custom scrollbar extension
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-scrollbar {
|
||||
|
||||
// Container
|
||||
.ps {
|
||||
overflow: hidden !important;
|
||||
overflow-anchor: none;
|
||||
-ms-overflow-style: none;
|
||||
touch-action: auto;
|
||||
-ms-touch-action: auto;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Scrollbar rail styles
|
||||
//
|
||||
|
||||
// Base
|
||||
.ps__rail-y,
|
||||
.ps__rail-x {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
@include transition(opacity $component-transition-timer linear);
|
||||
}
|
||||
.ps__rail-x {
|
||||
bottom: 0;
|
||||
}
|
||||
.ps__rail-y {
|
||||
/*rtl:ignore*/
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
.ps:hover > .ps__rail-x,
|
||||
.ps:hover > .ps__rail-y,
|
||||
.ps--focus > .ps__rail-x,
|
||||
.ps--focus > .ps__rail-y,
|
||||
.ps--scrolling-x > .ps__rail-x,
|
||||
.ps--scrolling-y > .ps__rail-y {
|
||||
opacity: $ps-opacity;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Scrollbar thumb styles
|
||||
//
|
||||
|
||||
// Base
|
||||
.ps__thumb-y,
|
||||
.ps__thumb-x {
|
||||
background-color: $ps-bg;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
.ps__thumb-y {
|
||||
width: $ps-size;
|
||||
right: $ps-gap;
|
||||
}
|
||||
.ps__thumb-x {
|
||||
height: $ps-size;
|
||||
bottom: $ps-gap;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// MS supports
|
||||
//
|
||||
|
||||
@supports (-ms-overflow-style: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,258 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Prism
|
||||
*
|
||||
* Styles for prism.min.js - lightweight, extensible syntax highlighter
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-prism {
|
||||
|
||||
// Base
|
||||
code,
|
||||
pre {
|
||||
&[class*="language-"] {
|
||||
text-shadow: 0 1px #fff;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
background-color: transparent;
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
|
||||
@media print {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Token colors
|
||||
.token {
|
||||
&.comment,
|
||||
&.prolog,
|
||||
&.doctype,
|
||||
&.cdata,
|
||||
&.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.property,
|
||||
&.tag,
|
||||
&.boolean,
|
||||
&.number,
|
||||
&.constant,
|
||||
&.symbol {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
&.selector,
|
||||
&.attr-name,
|
||||
&.string,
|
||||
&.builtin {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.entity,
|
||||
&.url,
|
||||
.language-css &.string,
|
||||
.style &.string,
|
||||
&.variable {
|
||||
color: #a67f59;
|
||||
background: hsla(0,0%,100%,.5);
|
||||
}
|
||||
|
||||
&.atrule,
|
||||
&.attr-value,
|
||||
&.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
&.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
&.regex,
|
||||
&.important {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
&.important {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
// Namespace opacity
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Line highlight
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 1.25rem;
|
||||
background: rgba(#678bdc, 0.12);
|
||||
pointer-events: none;
|
||||
white-space: pre;
|
||||
line-height: inherit;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
/*rtl:ignore*/
|
||||
left: 10px;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
&[data-end]:after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Line numbers
|
||||
.line-numbers {
|
||||
.line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
width: 36px; // works for line-numbers below 1000 lines
|
||||
letter-spacing: -1px;
|
||||
/*rtl:begin:ignore*/
|
||||
left: -50px;
|
||||
border-right: 1px solid #999;
|
||||
/*rtl:end:ignore*/
|
||||
user-select: none;
|
||||
|
||||
> span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
|
||||
&:before {
|
||||
content: counter(linenumber);
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
/*rtl:begin:ignore*/
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
pre.line-numbers {
|
||||
position: relative;
|
||||
/*rtl:ignore*/
|
||||
padding-left: 50px;
|
||||
counter-reset: linenumber;
|
||||
|
||||
> code {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Code blocks
|
||||
//
|
||||
|
||||
pre {
|
||||
&[class*="language-"] {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
background-color: #fdfdfd;
|
||||
background-image: -webkit-linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-image: -moz-linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-image: -ms-linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-image: -o-linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-image: linear-gradient(transparent 50%, rgba($color-primary-700, 0.025) 50%);
|
||||
background-size: 3em 3em;
|
||||
background-origin: content-box;
|
||||
/*rtl:begin:ignore*/
|
||||
border-left-width: 0;
|
||||
box-shadow: 3px 0 0 0 $color-primary-500 inset;
|
||||
@include border-left-radius(0);
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
|
||||
&[data-line] {
|
||||
position: relative;
|
||||
/*rtl:ignore*/
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Toolbar
|
||||
//
|
||||
|
||||
pre.code-toolbar {
|
||||
position: relative;
|
||||
|
||||
> .toolbar {
|
||||
background-color: #f8f8f8;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
text-shadow: none;
|
||||
color: $body-color;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
/*rtl:begin:ignore*/
|
||||
border-left: $border-width solid $border-color;
|
||||
right: 0;
|
||||
border-radius: 0 0 0 $border-radius;
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
// Items
|
||||
span,
|
||||
.toolbar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
overflow: visible;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Basic styles
|
||||
a,
|
||||
button,
|
||||
span {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $font-size-xs;
|
||||
outline: 0;
|
||||
|
||||
@include hover-focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Slinky
|
||||
*
|
||||
* Styles for slinky.min.js - animated multi level navigation
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-slinky {
|
||||
|
||||
// Base
|
||||
.slinky-menu {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform: translateZ(0);
|
||||
|
||||
// Child level
|
||||
> ul {
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
position: relative;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
// All levels
|
||||
ul {
|
||||
width: 100%;
|
||||
|
||||
// Active list
|
||||
&.active {
|
||||
max-height: $dropdown-scrollable-max-height;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Submenus
|
||||
li {
|
||||
|
||||
// Add spacing between items
|
||||
+ li:not(.dropdown-item):not(.dropdown-divider) {
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
}
|
||||
|
||||
// Children lists
|
||||
ul {
|
||||
display: none;
|
||||
/*rtl:ignore*/
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Header link
|
||||
.header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
color: $link-color;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
|
||||
// Title
|
||||
.title {
|
||||
flex: 1;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
padding-left: $dropdown-item-padding-x + $dropdown-icon-spacer-x + $icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Directions
|
||||
//
|
||||
|
||||
// Icons base
|
||||
.next,
|
||||
.back {
|
||||
&:after,
|
||||
&:before {
|
||||
font-family: $icon-font-family;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
opacity: 0.75;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Next
|
||||
.next {
|
||||
padding-right: (($dropdown-item-padding-x * 2) + ($icon-font-size / 2));
|
||||
|
||||
// Arrow
|
||||
&:after {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-menu-sub-arrow-ltr;
|
||||
}
|
||||
@else {
|
||||
content: $icon-menu-sub-arrow-rtl;
|
||||
}
|
||||
right: $dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous
|
||||
.back {
|
||||
position: absolute;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
color: inherit;
|
||||
@include size(100%);
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-menu-slinky-back-ltr;
|
||||
}
|
||||
@else {
|
||||
content: $icon-menu-slinky-back-rtl;
|
||||
}
|
||||
left: $dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Sticky kit
|
||||
*
|
||||
* Styles for sticky.min.js - extension that makes elements sticky
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-sticky {
|
||||
|
||||
// Apply correct z-index to sticked element
|
||||
.is_stuck {
|
||||
z-index: $zindex-fixed !important;
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
.navbar.is_stuck {
|
||||
margin-top: $nav-link-height + rem-calc($navbar-border-width * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user