first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,148 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Demo styles
|
||||
*
|
||||
* Styles used for demostration purposes only
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-demo {
|
||||
|
||||
|
||||
// jQuery UI
|
||||
// ------------------------------
|
||||
|
||||
.jqueryui-demo-element {
|
||||
background-color: $gray-100;
|
||||
border: ($border-width * 2) dashed $border-color;
|
||||
color: $color-grey-500;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
@include size(90px);
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Selectable
|
||||
.selectable-demo-list {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
|
||||
> .ui-sortable-handle,
|
||||
> .ui-selectee {
|
||||
background-color: $btn-light-bg;
|
||||
border: $btn-border-width solid $btn-light-border-color;
|
||||
|
||||
&.ui-selecting,
|
||||
&.ui-selected {
|
||||
background-color: $color-blue-500!important;
|
||||
border-color: $color-blue-700!important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
> .ui-sortable-helper:first-child + li {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Selectable
|
||||
.selectable-demo-connected {
|
||||
& + & {
|
||||
margin-top: $spacer;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-top: 0;
|
||||
margin-left: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Droppable
|
||||
.droppable-demo-target {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background-color: $color-primary-50;
|
||||
border-color: $color-primary-500;
|
||||
color: $color-primary-800;
|
||||
z-index: 9;
|
||||
}
|
||||
.droppable-demo-drop {
|
||||
background-color: $color-success-50;
|
||||
border-color: $color-success-500;
|
||||
color: $color-success-800;
|
||||
}
|
||||
|
||||
|
||||
// Color palette
|
||||
// ------------------------------
|
||||
|
||||
.demo-color {
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
@include border-top-radius($border-radius);
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0.375rem;
|
||||
background-color: rgba($black, 0.2);
|
||||
font-size: $font-size-sm;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Icons showcase
|
||||
// ------------------------------
|
||||
|
||||
.glyphs {
|
||||
> div > div {
|
||||
padding: 0.5rem 1rem;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
background-color: $color-dark-500;
|
||||
color: $white;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
.text-muted {
|
||||
color: rgba($white, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Velocity animations box
|
||||
// ------------------------------
|
||||
|
||||
.demo-velocity-box {
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: $spacer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid $gray-500;
|
||||
text-align: center;
|
||||
background-color: $gray-100;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 0 0 0 theme-color("primary");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,360 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Alpaca forms
|
||||
*
|
||||
* Styles for alpaca.min.js - the easiest way to generate interactive HTML5 forms for web applications
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-alpaca {
|
||||
|
||||
// Added to outer field elements to hide them
|
||||
.alpaca-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Helper text
|
||||
.alpaca-field {
|
||||
.help-block,
|
||||
.alpaca-field-text-max-length-indicator {
|
||||
color: $gray-600;
|
||||
margin-top: $form-text-margin-top;
|
||||
margin-bottom: $form-text-margin-top;
|
||||
}
|
||||
}
|
||||
|
||||
// If input has error
|
||||
.has-error {
|
||||
|
||||
// Override text color if menu has error
|
||||
.multiselect-container > .active .form-check {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Change background color in active items
|
||||
.btn-group.show .multiselect.btn,
|
||||
.multiselect.btn-light:active {
|
||||
color: theme-color('danger');
|
||||
border-color: theme-color('danger');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Disabled fields
|
||||
.alpaca-disabled {
|
||||
.form-check label,
|
||||
.form-check .switchery {
|
||||
cursor: $cursor-disabled;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Added to fields that have run through validation and are invalid
|
||||
.alpaca-invalid {
|
||||
|
||||
// Text
|
||||
.alpaca-control-label,
|
||||
.alpaca-message {
|
||||
color: theme-color('danger');
|
||||
}
|
||||
|
||||
// Input
|
||||
.form-control {
|
||||
color: theme-color('danger');
|
||||
|
||||
// Border color
|
||||
@include plain-hover-focus {
|
||||
border-color: theme-color('danger');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// General purpose HTML clear
|
||||
.alpaca-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
.alpaca-float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Icons
|
||||
//
|
||||
|
||||
// Override glyphicon icons
|
||||
.alpaca-field {
|
||||
.glyphicon {
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
vertical-align: middle;
|
||||
margin-top: ($font-size-base - $icon-font-size) / 2;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
|
||||
// Info icon
|
||||
.glyphicon-info-sign {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Error icon
|
||||
.glyphicon-exclamation-sign:before {
|
||||
content: $icon-validation-error;
|
||||
}
|
||||
}
|
||||
|
||||
// Required asterisk
|
||||
.alpaca-icon-required {
|
||||
font-family: $font-family-base;
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: $element-spacer-x;
|
||||
|
||||
// Required sign
|
||||
&:before {
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Editor fields
|
||||
//
|
||||
|
||||
.alpaca-controlfield-editor {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
|
||||
// Element
|
||||
.control-field-editor-el {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Ace editor
|
||||
//
|
||||
|
||||
.ace_editor {
|
||||
border: $border-width solid rgb(204, 204, 204);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// CKEditor
|
||||
//
|
||||
|
||||
.alpaca-field-ckeditor.alpaca-invalid > .cke {
|
||||
border-color: $color-warning-800;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Option tree
|
||||
//
|
||||
|
||||
.alpaca-field-optiontree {
|
||||
|
||||
// Add left spacing to input field
|
||||
.optiontree + .form-control {
|
||||
margin-left: $element-spacer-x;
|
||||
}
|
||||
|
||||
// Horizontal layout
|
||||
&.optiontree-horizontal {
|
||||
|
||||
// Tree
|
||||
.optiontree {
|
||||
display: inline-block;
|
||||
|
||||
// Selector
|
||||
.optiontree-selector {
|
||||
display: inline-block;
|
||||
margin-top: map-get($spacers, 1);
|
||||
margin-bottom: map-get($spacers, 1);
|
||||
|
||||
// Hide empty container
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Extra horizontal spacing
|
||||
+ .optiontree-selector {
|
||||
margin-left: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input
|
||||
input {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Label
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Multiselect
|
||||
//
|
||||
|
||||
// If error
|
||||
.has-error .multiselect {
|
||||
border-color: theme-color('danger');
|
||||
color: theme-color('danger');
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
.alpaca-container-label:not(legend) {
|
||||
margin-top: $spacer;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Toolbar
|
||||
//
|
||||
|
||||
// Base
|
||||
.alpaca-array-toolbar {
|
||||
margin-bottom: ($spacer / 2);
|
||||
}
|
||||
|
||||
// Action bar
|
||||
.alpaca-array-actionbar {
|
||||
overflow: hidden;
|
||||
|
||||
// Top
|
||||
&.alpaca-array-actionbar-top {
|
||||
padding-bottom: ($spacer / 2);
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&.alpaca-array-actionbar-bottom {
|
||||
padding-top: ($spacer / 2);
|
||||
}
|
||||
|
||||
// Stretch
|
||||
&,
|
||||
&.btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Field objects
|
||||
.alpaca-field-object,
|
||||
.alpaca-field-array {
|
||||
|
||||
// Remove border
|
||||
.alpaca-top,
|
||||
.alpaca-top .alpaca-container {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.alpaca-container {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Containers
|
||||
//
|
||||
|
||||
// Add top spacing
|
||||
.alpaca-control-buttons-container {
|
||||
margin-top: ($spacer / 2);
|
||||
}
|
||||
|
||||
// Remove border from field object
|
||||
.alpaca-container-item > .alpaca-container > .alpaca-field-object {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Buttons container in form
|
||||
.alpaca-form-buttons-container {
|
||||
margin-top: $spacer;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Remove horizontal spacing from form group
|
||||
.alpaca-container > .form-group {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Hidden field
|
||||
.alpaca-field-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// First item
|
||||
.alpaca-container-item:not(:first-child) {
|
||||
margin-top: ($spacer / 2);
|
||||
}
|
||||
|
||||
// Last item
|
||||
.alpaca-container .alpaca-container-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Select
|
||||
.alpaca-field-select .btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fields
|
||||
//
|
||||
|
||||
.alpaca-field {
|
||||
|
||||
// Upload field
|
||||
&.alpaca-field-upload {
|
||||
|
||||
// Active zone
|
||||
.fileupload-active-zone {
|
||||
margin-top: ($spacer * 2);
|
||||
margin-bottom: ($spacer * 2);
|
||||
}
|
||||
|
||||
// Download
|
||||
.template-download td.error,
|
||||
.template-upload td.error {
|
||||
color: $color-warning-800;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
// Address
|
||||
&.alpaca-field-address .alpaca-field-address-mapcanvas {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
// Image
|
||||
&.alpaca-field-image .alpaca-image-display {
|
||||
margin-top: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,263 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap switches
|
||||
*
|
||||
* Styles for switch.min.js - checkbox/radio toggle switches
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-bootstrap-switch {
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.bootstrap-switch {
|
||||
display: inline-block;
|
||||
border: $switch-border-width solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
/*rtl:begin:ignore*/
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
/*rtl:end:ignore*/
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Container
|
||||
.bootstrap-switch-container {
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Set base styles
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
}
|
||||
|
||||
// Original input
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs
|
||||
.form-check-switch {
|
||||
padding: 0;
|
||||
|
||||
// In horizontal forms
|
||||
.form-group.row & {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Left position
|
||||
.form-check-switch-left {
|
||||
.bootstrap-switch {
|
||||
margin-right: $form-check-inline-input-margin-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Right position
|
||||
.form-check-switch-right {
|
||||
.bootstrap-switch {
|
||||
margin-left: $form-check-inline-input-margin-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Remove outline on focus
|
||||
.bootstrap-switch-focused {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Disabled
|
||||
.bootstrap-switch-disabled {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
cursor: $cursor-disabled;
|
||||
opacity: $checkbox-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// Readonly
|
||||
.bootstrap-switch-readonly,
|
||||
.bootstrap-switch-indeterminate {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
cursor: default !important;
|
||||
opacity: $checkbox-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
// Set animation
|
||||
.bootstrap-switch-animate .bootstrap-switch-container {
|
||||
@include transition(margin $component-transition-timer);
|
||||
}
|
||||
|
||||
// Set border radiuses
|
||||
/*rtl:begin:ignore*/
|
||||
.bootstrap-switch-inverse {
|
||||
.bootstrap-switch-handle-on {
|
||||
@include border-left-radius(0);
|
||||
@include border-right-radius(calc(#{$border-radius} - #{$switch-border-width}));
|
||||
}
|
||||
.bootstrap-switch-handle-off {
|
||||
@include border-right-radius(0);
|
||||
@include border-left-radius(calc(#{$border-radius} - #{$switch-border-width}));
|
||||
}
|
||||
}
|
||||
.bootstrap-switch-on,
|
||||
.bootstrap-switch-inverse.bootstrap-switch-off {
|
||||
.bootstrap-switch-label {
|
||||
@include border-right-radius(calc(#{$border-radius} - #{$switch-border-width}));
|
||||
}
|
||||
}
|
||||
.bootstrap-switch-off,
|
||||
.bootstrap-switch-inverse.bootstrap-switch-on {
|
||||
.bootstrap-switch-label {
|
||||
@include border-left-radius(calc(#{$border-radius} - #{$switch-border-width}));
|
||||
}
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
|
||||
|
||||
// Elements
|
||||
// ------------------------------
|
||||
|
||||
// Handles
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Contextual alternatives
|
||||
.bootstrap-switch-default {
|
||||
color: $body-color;
|
||||
background-color: $switch-bg-default;
|
||||
}
|
||||
.bootstrap-switch-primary {
|
||||
color: $white;
|
||||
background-color: theme-color("primary");
|
||||
}
|
||||
.bootstrap-switch-danger {
|
||||
color: $white;
|
||||
background-color: theme-color("danger");
|
||||
}
|
||||
.bootstrap-switch-success {
|
||||
color: $white;
|
||||
background-color: theme-color("success");
|
||||
}
|
||||
.bootstrap-switch-warning {
|
||||
color: $white;
|
||||
background-color: theme-color("warning");
|
||||
}
|
||||
.bootstrap-switch-info {
|
||||
color: $white;
|
||||
background-color: theme-color("info");
|
||||
}
|
||||
|
||||
// Set border radius
|
||||
/*rtl:begin:ignore*/
|
||||
.bootstrap-switch-handle-on {
|
||||
@include border-left-radius(calc(#{$border-radius} - #{$switch-border-width}));
|
||||
}
|
||||
.bootstrap-switch-handle-off {
|
||||
@include border-right-radius(calc(#{$border-radius} - #{$switch-border-width}));
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
// Label
|
||||
.bootstrap-switch-label {
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
background-color: $switch-handle-bg;
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 $switch-border-width $switch-handle-border-color inset;
|
||||
@include transition(background-color ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover and active states
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $switch-handle-hover-bg;
|
||||
}
|
||||
|
||||
// Add vertical lines
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $switch-handle-width;
|
||||
height: $switch-handle-height;
|
||||
margin-top: -($switch-handle-height / 2);
|
||||
margin-left: -($switch-handle-width / 2);
|
||||
display: inline-block;
|
||||
border-left: $switch-border-width solid $switch-handle-border-color;
|
||||
border-right: $switch-border-width solid $switch-handle-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.bootstrap-switch-large {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.bootstrap-switch-small {
|
||||
.bootstrap-switch-handle-on,
|
||||
.bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-label {
|
||||
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Checkbox specials
|
||||
//
|
||||
|
||||
// Right alignment
|
||||
.form-check-right .bootstrap-switch {
|
||||
margin-right: 0;
|
||||
margin-left: $form-check-inline-input-margin-x;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap Duallistbox
|
||||
*
|
||||
* Styles for listbox.js - A responsive dual listbox widget optimized for Bootstrap
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-dual-listbox {
|
||||
|
||||
// Base
|
||||
.bootstrap-duallistbox-container {
|
||||
|
||||
// Add bottom spacing to the first box
|
||||
.box1 {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
// Select
|
||||
select.form-control {
|
||||
padding: $input-btn-padding-y;
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
option {
|
||||
display: block;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Move option on select
|
||||
&.moveonselect {
|
||||
|
||||
// Hide "Move single" button
|
||||
.move,
|
||||
.remove {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Add border to the next buttons
|
||||
.btn-group {
|
||||
|
||||
// Visible buttons
|
||||
.moveall,
|
||||
.removeall {
|
||||
width: 100%;
|
||||
@include border-top-radius($btn-border-radius);
|
||||
}
|
||||
|
||||
// Spacing between buttons
|
||||
.btn + .btn {
|
||||
border-left-width: $btn-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
|
||||
// Main buttons
|
||||
.buttons {
|
||||
width: 100%;
|
||||
margin-bottom: -($btn-border-width);
|
||||
}
|
||||
|
||||
// Clear buttons
|
||||
.clear1,
|
||||
.clear2 {
|
||||
display: none;
|
||||
margin-top: $spacer;
|
||||
|
||||
// Reset styles
|
||||
@include plain-hover-focus {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: $link-color;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.box1.filtered .clear1,
|
||||
.box2.filtered .clear2 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Control buttons
|
||||
.move,
|
||||
.remove,
|
||||
.moveall,
|
||||
.removeall {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
// Button group
|
||||
.btn-group .btn {
|
||||
margin: 0;
|
||||
@include border-bottom-radius(0);
|
||||
|
||||
// Borders
|
||||
& + .btn {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
float: none;
|
||||
text-align: center;
|
||||
|
||||
// Reduce spacing between icons
|
||||
+ i {
|
||||
margin-left: -($icon-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Elements
|
||||
//
|
||||
|
||||
// Filter
|
||||
.filter {
|
||||
margin-bottom: $spacer;
|
||||
position: relative;
|
||||
|
||||
&.placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom info
|
||||
.info-container {
|
||||
.info {
|
||||
display: inline-block;
|
||||
margin-top: $spacer;
|
||||
|
||||
.badge {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inside sidebar
|
||||
//
|
||||
|
||||
.sidebar & {
|
||||
text-align: center;
|
||||
|
||||
.box1,
|
||||
.box2 {
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
padding-bottom: map-get($spacers, 1);
|
||||
|
||||
&:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
font-size: $icon-font-size;
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
margin: ($spacer / 2) 0;
|
||||
opacity: 0.5;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Responsive stuff
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.box1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar & {
|
||||
.box1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Floating labels
|
||||
*
|
||||
* Styles for custom Floating Labels extensions
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-floating-labels {
|
||||
|
||||
// Base
|
||||
.form-group-float-label {
|
||||
position: relative;
|
||||
top: $input-padding-y;
|
||||
opacity: 0;
|
||||
|
||||
// Display label
|
||||
&.is-visible {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Label animation
|
||||
&.animate {
|
||||
@include transition(all linear $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,329 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap multiselect
|
||||
*
|
||||
* Styles for multiselect.js - custom multiple select plugin
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-multiselect {
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Wrapper
|
||||
.multiselect-native-select {
|
||||
position: relative;
|
||||
|
||||
// Hide original select
|
||||
select {
|
||||
border: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
height: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 0 !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Main button
|
||||
.multiselect {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: $input-padding-x;
|
||||
padding-right: ($input-padding-x + ($icon-font-size * 1.5));
|
||||
text-transform: $multiselect-text-transform;
|
||||
@include text-truncate();
|
||||
|
||||
// Caret
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-padding-x;
|
||||
margin-top: -($caret-font-size / 2);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Allow font weight variations
|
||||
&:not([class*=font-weight-]) {
|
||||
font-weight: $multiselect-font-weight;
|
||||
}
|
||||
|
||||
// Default button overrides
|
||||
&.btn-light {
|
||||
background-color: $input-bg;
|
||||
border-color: $input-border-color;
|
||||
|
||||
// States
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
.btn-group.show & {
|
||||
background-color: $input-bg;
|
||||
box-shadow: $hover-shadow-lighter;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
background-color: $input-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Make it as an input instead of button
|
||||
//
|
||||
|
||||
// Large
|
||||
&.btn-lg {
|
||||
padding-left: $input-padding-x-lg;
|
||||
padding-right: ($input-padding-x-lg + ($icon-font-size * 1.5));
|
||||
|
||||
// Caret spacer
|
||||
&:after {
|
||||
right: $input-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
&.btn-sm {
|
||||
padding-left: $input-padding-x-sm;
|
||||
padding-right: ($input-padding-x-sm + ($icon-font-size * 1.5));
|
||||
|
||||
// Caret spacer
|
||||
&:after {
|
||||
right: $input-padding-x-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Container
|
||||
.multiselect-container {
|
||||
max-height: $multiselect-max-height;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Item
|
||||
.multiselect-item {
|
||||
|
||||
// Hide original inputs
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
border: 0;
|
||||
background: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $dropdown-item-padding-x;
|
||||
margin-top: -($checkbox-size / 2);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
@include size($checkbox-size);
|
||||
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox and radio have some common styles
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
~ .form-check-control-indicator {
|
||||
position: absolute;
|
||||
left: $dropdown-item-padding-x;
|
||||
top: 50%;
|
||||
margin-top: -($checkbox-size / 2);
|
||||
border: $checkbox-border-width solid $checkbox-border-color;
|
||||
@include size($checkbox-size);
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox indicator
|
||||
input[type=checkbox] {
|
||||
~ .form-check-control-indicator {
|
||||
color: $checkbox-color;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include transition(border-color ease-in-out $component-transition-timer, color ease-in-out $component-transition-timer);
|
||||
|
||||
// Use icon
|
||||
&:after {
|
||||
content: $icon-checkbox-tick;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
position: absolute;
|
||||
top: ($checkbox-size - $icon-font-size - ($checkbox-border-width * 2)) / 2;
|
||||
left: ($checkbox-size - $icon-font-size - ($checkbox-border-width * 2)) / 2;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
@include ll-font-smoothing();
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Radio indicator
|
||||
input[type=radio] {
|
||||
~ .form-check-control-indicator {
|
||||
border-radius: $border-radius-round;
|
||||
@include transition(border-color ease-in-out $component-transition-timer);
|
||||
|
||||
// Use circle
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: (($checkbox-size / 2) - $checkbox-border-width - (($checkbox-size / 2) / 2));
|
||||
left: (($checkbox-size / 2) - $checkbox-border-width - (($checkbox-size / 2) / 2));
|
||||
border: (($checkbox-size / 2) / 2) solid;
|
||||
border-color: inherit;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: $border-radius-round;
|
||||
opacity: 0;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checked state
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
&:checked ~ .form-check-control-indicator {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active state depends on active state of dropdown item colors
|
||||
&.active:not(.disabled) {
|
||||
@if (lightness($dropdown-link-active-bg) < 75) {
|
||||
input[type=checkbox] ~ .form-check-control-indicator {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
}
|
||||
input[type=radio] ~ .form-check-control-indicator {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
input[type=checkbox] ~ .form-check-control-indicator {
|
||||
border-color: $checkbox-color;
|
||||
color: $checkbox-color;
|
||||
}
|
||||
input[type=radio] ~ .form-check-control-indicator {
|
||||
border-color: $checkbox-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
.form-check-control-indicator {
|
||||
opacity: $checkbox-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// In dark dropdowns
|
||||
.dropdown-menu[class*=bg-] & {
|
||||
.form-check-control-indicator {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Item group
|
||||
.multiselect-group {
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-top: $dropdown-padding-y;
|
||||
margin-bottom: $dropdown-padding-y;
|
||||
|
||||
// First shouldn't have top spacing
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Remove bottom spacing from label
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Select All option
|
||||
.multiselect-all {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// Clickable optgroup
|
||||
.multiselect-group-clickable {
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter
|
||||
.multiselect-filter {
|
||||
position: relative;
|
||||
padding: ($dropdown-item-padding-x - $dropdown-padding-y) $dropdown-item-padding-x;
|
||||
margin-bottom: ($dropdown-item-padding-x - $dropdown-padding-y);
|
||||
|
||||
// Center icon vertically
|
||||
.input-group > i {
|
||||
font-size: $font-size-base;
|
||||
position: absolute;
|
||||
left: ($input-padding-x + rem-calc($input-border-width));
|
||||
top: 50%;
|
||||
margin-top: -($font-size-base / 2);
|
||||
opacity: 0.5;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
// Input horizontal padding
|
||||
.form-control {
|
||||
padding-left: (($input-padding-x * 2) + $font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Misc
|
||||
// ------------------------------
|
||||
|
||||
// Inside input group
|
||||
.input-group {
|
||||
.multiselect-native-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
|
||||
// Remove rounded corners from the first item
|
||||
&:not(:first-child) {
|
||||
.multiselect {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove rounded corners from the last item
|
||||
&:not(:last-child) {
|
||||
.multiselect {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Passy
|
||||
*
|
||||
* Styles for passy.min.js - password length checker and password generator
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-passy {
|
||||
|
||||
// Absolute positioned badge
|
||||
.badge-indicator-absolute {
|
||||
position: relative;
|
||||
|
||||
// Floaring badge
|
||||
.password-indicator-badge-absolute {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -($line-height-computed / 2);
|
||||
right: $input-padding-x;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,777 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Select2 selects
|
||||
*
|
||||
* Styles for select2.js - custom select plugin
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-select2 {
|
||||
|
||||
|
||||
// Select base
|
||||
// ------------------------------
|
||||
|
||||
.select2-container {
|
||||
outline: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
// Single select
|
||||
// ------------------------------
|
||||
|
||||
.select2-selection--single {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
display: block;
|
||||
padding: $input-padding-y 0;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
position: relative;
|
||||
border: $input-border-width solid transparent;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
@include border-radius($input-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Darken on hover
|
||||
&:hover,
|
||||
&:focus,
|
||||
.select2-container--open & {
|
||||
box-shadow: $hover-shadow-lighter;
|
||||
}
|
||||
|
||||
// Allow custom background color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $input-bg;
|
||||
|
||||
// Allow custom border color
|
||||
&:not([class*=border-]) {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply darker hover color
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-transparent):not(.bg-light) {
|
||||
&:hover,
|
||||
&:focus,
|
||||
.select2-container--open & {
|
||||
box-shadow: $hover-shadow-darker;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.select2-selection__placeholder {
|
||||
color: $white;
|
||||
|
||||
// In disabled mode
|
||||
.select2-container--disabled & {
|
||||
color: rgba($white, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Result text
|
||||
.select2-selection__rendered {
|
||||
display: block;
|
||||
padding-left: $input-padding-x;
|
||||
padding-right: ($input-padding-x + ($icon-font-size * 1.5));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear selection button
|
||||
.select2-selection__clear {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
margin-top: (($line-height-computed - $icon-font-size) / 2);
|
||||
margin-left: $element-spacer-x;
|
||||
opacity: 0.75;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Add hover state effect
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Cross icon
|
||||
&:after {
|
||||
content: $icon-action-cross-sm;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
font-size: $icon-font-size;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.select2-selection__placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
// Dropdown arrow
|
||||
.select2-selection__arrow {
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-padding-x;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hide default arrow
|
||||
b {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled menu
|
||||
.select2-container--disabled & {
|
||||
cursor: $cursor-disabled;
|
||||
box-shadow: none;
|
||||
|
||||
// Disabled state for container
|
||||
&:not([class*=bg-]) {
|
||||
color: $input-disabled-color;
|
||||
background-color: $input-disabled-bg;
|
||||
}
|
||||
|
||||
// Disabled state for custom colored container
|
||||
&[class*=bg-] {
|
||||
opacity: $select2-custom-disabled-opacity;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Hide clear button
|
||||
.select2-selection__clear {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Multiple select
|
||||
// ------------------------------
|
||||
|
||||
.select2-selection--multiple {
|
||||
display: block;
|
||||
border: $input-border-width solid transparent;
|
||||
cursor: text;
|
||||
outline: 0;
|
||||
user-select: none;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
// Allow custom background color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $input-bg;
|
||||
|
||||
// Allow custom border color
|
||||
&:not([class*=border-]) {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Result text
|
||||
.select2-selection__rendered {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 $select2-pills-spacer $select2-pills-spacer $select2-pills-spacer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.select2-selection__placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
// Disabled multiselect
|
||||
.select2-container--disabled & {
|
||||
|
||||
// Disabled state for container
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $input-disabled-bg;
|
||||
}
|
||||
|
||||
// Disabled state for custom colored container
|
||||
&[class*=bg-] {
|
||||
opacity: $select2-custom-disabled-opacity;
|
||||
box-shadow: none;
|
||||
|
||||
.select2-selection__choice {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply disabled cursor for all elements
|
||||
&,
|
||||
.select2-selection__choice,
|
||||
.select2-search__field {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Choices
|
||||
.select2-selection__choice {
|
||||
background-color: $select2-pills-bg;
|
||||
color: $select2-pills-color;
|
||||
cursor: default;
|
||||
float: left;
|
||||
margin-right: $select2-pills-spacer;
|
||||
margin-top: $select2-pills-spacer;
|
||||
padding: ($input-padding-y - $select2-pills-spacer) $input-btn-padding-x;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
@include border-radius($select2-pills-border-radius);
|
||||
@include transition(color ease-in-out $component-transition-timer, background-color ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $select2-pills-hover-bg;
|
||||
color: $select2-pills-hover-color;
|
||||
}
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
|
||||
// Remover
|
||||
.select2-selection__choice__remove {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: $font-size-lg;
|
||||
margin-top: (($line-height-computed - $font-size-lg) / 2);
|
||||
line-height: 1;
|
||||
margin-left: $element-spacer-x;
|
||||
opacity: 0.75;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Highlight on hover
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable choice
|
||||
.select2-container--disabled & {
|
||||
opacity: $select2-disabled-opacity;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $select2-pills-bg;
|
||||
color: $select2-pills-color;
|
||||
}
|
||||
|
||||
// Hide remover
|
||||
.select2-selection__choice__remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
.select2-search--inline {
|
||||
float: left;
|
||||
|
||||
// Search field
|
||||
.select2-search__field {
|
||||
font-size: 100%;
|
||||
margin-top: $select2-pills-spacer;
|
||||
padding: ($input-padding-y - $select2-pills-spacer) 0;
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
outline: 0;
|
||||
color: inherit;
|
||||
margin-left: ($select2-pills-spacer * 2);
|
||||
-webkit-appearance: textfield;
|
||||
|
||||
// Cancel button
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove left spacing if no pills
|
||||
&:first-child .select2-search__field {
|
||||
margin-left: 0;
|
||||
padding-left: $input-padding-x - $select2-pills-spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Select results
|
||||
// ------------------------------
|
||||
|
||||
// Dropdown
|
||||
.select2-dropdown {
|
||||
background-color: $dropdown-bg;
|
||||
color: $dropdown-link-color;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
/*rtl:ignore*/
|
||||
left: -100000px;
|
||||
width: 100%;
|
||||
z-index: $zindex-tooltip;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
|
||||
// Results container
|
||||
.select2-results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Options list
|
||||
.select2-results__options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// Add scrollbar to first level list
|
||||
.select2-results > & {
|
||||
padding-bottom: $dropdown-padding-y;
|
||||
max-height: $select2-max-height;
|
||||
overflow-y: auto;
|
||||
|
||||
// Add top spacing if search is hidden
|
||||
.select2-search--hide + & {
|
||||
padding-top: $dropdown-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
// First one
|
||||
.select2-results:first-child > & {
|
||||
padding-top: $dropdown-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
// Option
|
||||
.select2-results__option {
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Add 1px gap between options
|
||||
& + & {
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
}
|
||||
|
||||
// Icons
|
||||
i {
|
||||
margin-right: $element-spacer-x;
|
||||
|
||||
// Do not display empty icon
|
||||
&.icon-undefined {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Option group
|
||||
&[role=group] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Highlighted option (hover state)
|
||||
&.select2-results__option--highlighted {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
color: $dropdown-link-hover-color;
|
||||
}
|
||||
|
||||
// Disabled option
|
||||
&[aria-disabled=true] {
|
||||
color: $dropdown-link-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
|
||||
// In colored menu
|
||||
.select2-dropdown[class*=bg-] & {
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// Selected option
|
||||
&[aria-selected=true] {
|
||||
color: $dropdown-link-active-color;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
|
||||
// Add double horizontal spacing for nested options
|
||||
.select2-results__options--nested > & {
|
||||
padding-left: ($dropdown-item-padding-x * 2);
|
||||
padding-right: ($dropdown-item-padding-x * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Option group title
|
||||
.select2-results__group {
|
||||
display: block;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
cursor: default;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-top: $dropdown-padding-y;
|
||||
margin-bottom: $dropdown-padding-y;
|
||||
|
||||
// Remove top spacing from the first group title
|
||||
.select2-results__option:first-child > & {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Messages
|
||||
//
|
||||
|
||||
// Results
|
||||
.select2-results__message {
|
||||
color: $select2-light-results-color;
|
||||
cursor: default;
|
||||
|
||||
// Mute if in colored dropdown
|
||||
.select2-dropdown[class*=bg-] & {
|
||||
color: $select2-dark-results-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading
|
||||
.select2-results__option.loading-results {
|
||||
padding-top: 0;
|
||||
|
||||
// Add extra top spacing
|
||||
+ .select2-results__option {
|
||||
margin-top: $dropdown-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
// Load more for infinite scroll
|
||||
.select2-results__option--load-more {
|
||||
text-align: center;
|
||||
margin-top: $dropdown-padding-y;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Opened dropdown
|
||||
//
|
||||
|
||||
.select2-container--open {
|
||||
|
||||
// Dropdown
|
||||
.select2-dropdown {
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// If opened above
|
||||
.select2-dropdown--above {
|
||||
border-bottom: 0;
|
||||
@include border-bottom-radius(0);
|
||||
|
||||
// Add border for colored menu
|
||||
&[class*=bg-] {
|
||||
border-bottom: $dropdown-border-width solid rgba($white, 0.2);
|
||||
}
|
||||
}
|
||||
&.select2-container--above {
|
||||
.select2-selection--single,
|
||||
.select2-selection--multiple {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// If opened below
|
||||
.select2-dropdown--below {
|
||||
border-top: none;
|
||||
@include border-top-radius(0);
|
||||
|
||||
// Add border for colored menu
|
||||
&[class*=bg-] {
|
||||
border-top: $dropdown-border-width solid rgba($white, 0.2);
|
||||
}
|
||||
}
|
||||
&.select2-container--below {
|
||||
.select2-selection--single,
|
||||
.select2-selection--multiple {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Search inside dropdown
|
||||
//
|
||||
|
||||
.select2-search--dropdown {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: $dropdown-item-padding-x;
|
||||
|
||||
// Add search icon
|
||||
&:after {
|
||||
content: $icon-search-magnifier;
|
||||
font-family: $icon-font-family;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: ($dropdown-item-padding-x + $input-padding-x);
|
||||
color: inherit;
|
||||
display: block;
|
||||
font-size: $font-size-base;
|
||||
margin-top: -($font-size-base / 2);
|
||||
line-height: 1;
|
||||
opacity: 0.6;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Remove top spacing from the results message
|
||||
+ .select2-results .select2-results__message:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Search field
|
||||
.select2-search__field {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
padding-left: ($input-padding-x * 2) + $font-size-base;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
// Cancel button
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden search field
|
||||
&.select2-search--hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional sizing
|
||||
// ------------------------------
|
||||
|
||||
// Large
|
||||
.select-lg {
|
||||
|
||||
// Single
|
||||
&.select2-selection--single {
|
||||
padding: $input-padding-y-lg 0;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-line-height-lg;
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding-left: $input-padding-x-lg;
|
||||
padding-right: ($input-padding-x-lg + ($icon-font-size * 1.5));
|
||||
}
|
||||
|
||||
.select2-selection__arrow:after {
|
||||
right: $input-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple
|
||||
&.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
padding: ($input-padding-y-lg - $select2-pills-spacer) $input-btn-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-line-height-lg;
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: ($input-padding-y-lg - $select2-pills-spacer) 0;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-line-height-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.select-sm {
|
||||
|
||||
// Single
|
||||
&.select2-selection--single {
|
||||
padding: $input-padding-y-sm 0;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-line-height-sm;
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding-left: $input-padding-x-sm;
|
||||
padding-right: ($input-padding-x + ($icon-font-size * 1.5));
|
||||
}
|
||||
|
||||
.select2-selection__arrow:after {
|
||||
right: $input-padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple
|
||||
&.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
padding: ($input-padding-y-sm - $select2-pills-spacer) $input-btn-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-line-height-sm;
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: ($input-padding-y-sm - $select2-pills-spacer) 0;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-line-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom colors
|
||||
// ------------------------------
|
||||
|
||||
// Multiple selection choices
|
||||
.select2-selection--multiple[class*=bg-] {
|
||||
.select2-selection__choice {
|
||||
background-color: $dropdown-dark-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown menu
|
||||
.select2-dropdown[class*=bg-] {
|
||||
|
||||
// Search field
|
||||
.select2-search--dropdown .select2-search__field {
|
||||
background-color: $dropdown-dark-active-bg;
|
||||
border-color: transparent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Selected item
|
||||
.select2-results__option[aria-selected=true] {
|
||||
background-color: $dropdown-dark-active-bg;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Hovered item
|
||||
.select2-results__option--highlighted {
|
||||
background-color: $dropdown-dark-hover-bg;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Misc
|
||||
// ------------------------------
|
||||
|
||||
// Mask
|
||||
.select2-close-mask {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
z-index: 99;
|
||||
background-color: $white;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Accessible
|
||||
.select2-hidden-accessible {
|
||||
border: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: fixed !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Loading remote data example demo
|
||||
// ------------------------------
|
||||
|
||||
// Results
|
||||
.select2-result-repository {
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
}
|
||||
|
||||
// Avatar
|
||||
.select2-result-repository__avatar {
|
||||
float: left;
|
||||
width: 60px;
|
||||
margin-right: 0.9375rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
|
||||
// Meta
|
||||
.select2-result-repository__meta {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
// Title
|
||||
.select2-result-repository__title {
|
||||
font-weight: 500;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
// Data
|
||||
.select2-result-repository__forks,
|
||||
.select2-result-repository__stargazers,
|
||||
.select2-result-repository__watchers {
|
||||
display: inline-block;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Description
|
||||
.select2-result-repository__description {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Add spacing for data
|
||||
.select2-result-repository__forks,
|
||||
.select2-result-repository__stargazers {
|
||||
margin-right: 0.9375rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Switchery
|
||||
*
|
||||
* Styles for switchery.min.js - toggle switches
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-switchery {
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.switchery {
|
||||
background-color: $switchery-bg;
|
||||
border: $switchery-border-width solid $switchery-border-color;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
width: ($switchery-size * 2);
|
||||
height: $switchery-size;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
@include border-radius($border-radius-round);
|
||||
|
||||
// Container
|
||||
.form-check-switchery & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-top: (($line-height-computed - $switchery-size) / 2) - rem-calc($switchery-border-width);
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.form-check-switchery.disabled & {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
|
||||
// Handle
|
||||
> small {
|
||||
background-color: $switchery-handle-bg;
|
||||
width: $switchery-size;
|
||||
height: $switchery-size;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
box-shadow: $switchery-handle-box-shadow;
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Options
|
||||
// ------------------------------
|
||||
|
||||
// Left position
|
||||
.form-check-switchery:not(.dropdown-item) {
|
||||
padding-left: (($switchery-size * 2) + $switchery-margin-x + rem-calc($switchery-border-width * 2));
|
||||
}
|
||||
|
||||
// Right position
|
||||
.form-check-switchery:not(.dropdown-item) {
|
||||
&.form-check-right {
|
||||
padding-left: 0;
|
||||
padding-right: (($switchery-size * 2) + $switchery-margin-x + rem-calc($switchery-border-width * 2));
|
||||
|
||||
// Swap sides
|
||||
.switchery {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Double side switch
|
||||
//
|
||||
|
||||
.form-check-switchery-double {
|
||||
|
||||
// If has labels
|
||||
&.form-check-switchery {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.switchery {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
.form-check-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Switch
|
||||
.switchery {
|
||||
position: relative;
|
||||
margin-left: $switchery-margin-x;
|
||||
margin-right: $switchery-margin-x;
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
input {
|
||||
margin-left: $switchery-margin-x;
|
||||
margin-right: $switchery-margin-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inside dropdown menu
|
||||
//
|
||||
|
||||
.dropdown-item {
|
||||
|
||||
// Override default styles
|
||||
&.form-check-switchery {
|
||||
|
||||
// Label
|
||||
.form-check-label {
|
||||
padding-left: ($dropdown-item-padding-x + ($switchery-size * 2) + $dropdown-icon-spacer-x + rem-calc($switchery-border-width * 2));
|
||||
}
|
||||
|
||||
// Container
|
||||
.switchery {
|
||||
top: 50%;
|
||||
left: $dropdown-item-padding-x;
|
||||
margin-top: -(($switchery-size / 2) + rem-calc($switchery-border-width));
|
||||
}
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&.form-check-right {
|
||||
|
||||
// Specifically in switchery container
|
||||
&.form-check-switchery {
|
||||
|
||||
// Reverse label padding
|
||||
.form-check-label {
|
||||
padding-right: ($dropdown-item-padding-x + ($switchery-size * 2) + $dropdown-icon-spacer-x + rem-calc($switchery-border-width * 2));
|
||||
}
|
||||
|
||||
// Reverse switchery
|
||||
.switchery {
|
||||
left: auto;
|
||||
right: $dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap tags input
|
||||
*
|
||||
* Styles for tagsinput.js - tags input for Bootstrap
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-tags-input {
|
||||
|
||||
// Base
|
||||
.bootstrap-tagsinput {
|
||||
background-color: $input-bg;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
display: inline-block;
|
||||
padding: 0 0 $tags-spacer 0;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
@include border-radius($tag-border-radius);
|
||||
|
||||
// Input field
|
||||
input {
|
||||
direction: ltr;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-color: transparent;
|
||||
padding: ($input-padding-y - $tags-spacer) $input-padding-x;
|
||||
margin-top: $tags-spacer;
|
||||
margin-left: $tags-spacer;
|
||||
width: auto !important;
|
||||
max-width: 50%;
|
||||
min-width: 4rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Inside input group
|
||||
.input-group & {
|
||||
width: 1%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
// Twitter typeahead adaptation
|
||||
.twitter-typeahead {
|
||||
width: auto;
|
||||
}
|
||||
.tt-dropdown-menu {
|
||||
margin-top: ($tags-spacer + $dropdown-spacer);
|
||||
min-width: $dropdown-min-width;
|
||||
}
|
||||
|
||||
// Tag
|
||||
.tag {
|
||||
margin: $tags-spacer 0 0 $tags-spacer;
|
||||
padding: ($input-btn-padding-y - $tags-spacer) $input-btn-padding-x;
|
||||
padding-right: ($input-btn-padding-x + ($icon-font-size * 1.5));
|
||||
float: left;
|
||||
position: relative;
|
||||
@include border-radius($tag-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Skip tokens with custom background color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $tags-bg;
|
||||
color: $tags-color;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $tags-hover-bg;
|
||||
color: $tags-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove button
|
||||
[data-role="remove"] {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-btn-padding-x;
|
||||
line-height: 1;
|
||||
margin-top: -($font-size-xs / 2);
|
||||
opacity: 0.7;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-action-cross;
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $font-size-xs;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Tokenfield for Bootstrap
|
||||
*
|
||||
* Styles for tokenfield.js - Advanced tagging/tokenizing plugin for Bootstrap
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-tokenfield {
|
||||
|
||||
// Base
|
||||
.tokenfield {
|
||||
height: auto;
|
||||
@include clearfix;
|
||||
|
||||
// Remove default .form-control styling
|
||||
&.form-control:not(input) {
|
||||
padding: 0 0 $tags-spacer 0;
|
||||
}
|
||||
|
||||
// Token
|
||||
.token {
|
||||
margin: $tags-spacer 0 0 $tags-spacer;
|
||||
cursor: default;
|
||||
float: left;
|
||||
position: relative;
|
||||
@include border-radius($tag-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Skip tokens with custom background color
|
||||
&:not([class*=bg-]) {
|
||||
background-color: $tags-bg;
|
||||
color: $tags-color;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $tags-hover-bg;
|
||||
color: $tags-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Tag text
|
||||
.token-label {
|
||||
display: block;
|
||||
max-width: none!important;
|
||||
padding: ($input-btn-padding-y - $tags-spacer) $input-btn-padding-x;
|
||||
padding-right: ($input-btn-padding-x + ($icon-font-size * 1.5));
|
||||
}
|
||||
|
||||
// Close button
|
||||
> .close {
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
color: inherit;
|
||||
right: $input-btn-padding-x;
|
||||
line-height: 1;
|
||||
margin-top: -($font-size-xs / 2);
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-action-cross;
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $font-size-xs;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hover action
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Input field
|
||||
//
|
||||
|
||||
// Make typeahead input auto width
|
||||
.twitter-typeahead {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Input field
|
||||
.token-input {
|
||||
direction: ltr;
|
||||
background: none;
|
||||
width: 5.625rem!important;
|
||||
max-width: 50%;
|
||||
min-width: 4rem;
|
||||
padding: ($input-padding-y - $tags-spacer) $input-padding-x;
|
||||
margin-top: $tags-spacer;
|
||||
margin-left: $tags-spacer;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Readonly
|
||||
&.readonly .token {
|
||||
.token-label {
|
||||
padding-right: $input-btn-padding-x;
|
||||
}
|
||||
|
||||
// Hide close button in readonly
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
cursor: $cursor-disabled;
|
||||
|
||||
// Token style
|
||||
.token {
|
||||
|
||||
// Mute tokens
|
||||
&,
|
||||
.close {
|
||||
opacity: $tag-disabled-opacity;
|
||||
}
|
||||
|
||||
// Revert default background on hover
|
||||
@include hover-focus {
|
||||
background-color: $tags-bg;
|
||||
color: $tags-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Add disabled cursor
|
||||
&,
|
||||
.token-input,
|
||||
.token,
|
||||
.token .close {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.input-group-lg,
|
||||
.tokenfield.form-control-lg {
|
||||
|
||||
// Right spacing for close button
|
||||
.token > .token-label,
|
||||
.token > span {
|
||||
padding: ($input-btn-padding-y-lg - $tags-spacer) $input-btn-padding-x-lg;
|
||||
padding-right: ($input-btn-padding-x-lg + ($font-size-xs * 1.5));
|
||||
}
|
||||
|
||||
// Input
|
||||
.token-input {
|
||||
padding: ($input-padding-y-lg - $tags-spacer) $input-padding-x-lg;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.token > .close {
|
||||
right: $input-btn-padding-x-lg;
|
||||
}
|
||||
|
||||
// Readonly
|
||||
&.readonly .token > .token-label {
|
||||
padding-right: $input-btn-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.input-group-sm,
|
||||
.tokenfield.form-control-sm {
|
||||
|
||||
// Tags
|
||||
.token > .token-label,
|
||||
.token > span {
|
||||
padding: ($input-btn-padding-y-sm - $tags-spacer) $input-btn-padding-x-sm;
|
||||
padding-right: ($input-btn-padding-x-sm + ($font-size-xs * 1.5));
|
||||
}
|
||||
|
||||
// Input
|
||||
.token-input {
|
||||
padding: ($input-padding-y-sm - $tags-spacer) $input-padding-x-sm;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.token > .close {
|
||||
right: $input-btn-padding-x-sm;
|
||||
}
|
||||
|
||||
// Readonly
|
||||
&.readonly .token > .token-label {
|
||||
padding-right: $input-btn-padding-x-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Touchspin spinners
|
||||
*
|
||||
* Styles for touchspin.min.js - spinner form control library
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-touchspin {
|
||||
|
||||
// Base
|
||||
.bootstrap-touchspin {
|
||||
|
||||
// Vertical buttons
|
||||
.input-group-btn-vertical {
|
||||
white-space: nowrap;
|
||||
|
||||
// Button
|
||||
> .btn {
|
||||
width: ($icon-font-size / 2) + ($input-btn-padding-x * 2) - rem-calc($input-border-width * 2);
|
||||
margin-left: -($input-border-width);
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
// Icon
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -($icon-font-size / 2);
|
||||
margin-top: -($icon-font-size / 2);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Arrow up
|
||||
.bootstrap-touchspin-up {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
// Arrow down
|
||||
.bootstrap-touchspin-down {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
@include border-right-radius($input-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
&.input-group-lg .input-group-btn-vertical {
|
||||
> .btn {
|
||||
width: ($icon-font-size / 2) + ($input-btn-padding-x-lg * 2) - rem-calc($input-border-width * 2);
|
||||
}
|
||||
.bootstrap-touchspin-down {
|
||||
@include border-right-radius($input-border-radius-lg);
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
&.input-group-sm .input-group-btn-vertical {
|
||||
> .btn {
|
||||
width: ($icon-font-size / 2) + ($input-btn-padding-x-sm * 2) - rem-calc($input-border-width * 2);
|
||||
}
|
||||
.bootstrap-touchspin-down {
|
||||
@include border-right-radius($input-border-radius-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for rounded corners
|
||||
.input-group {
|
||||
.input-group-prepend.d-none:first-child + .form-control {
|
||||
@include border-left-radius($input-border-radius);
|
||||
}
|
||||
&-lg {
|
||||
.input-group-prepend.d-none:first-child + .form-control {
|
||||
@include border-left-radius($input-border-radius-lg);
|
||||
}
|
||||
}
|
||||
&-sm {
|
||||
.input-group-prepend.d-none:first-child + .form-control {
|
||||
@include border-left-radius($input-border-radius-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Twiter Typeahead
|
||||
*
|
||||
* Styles for typeahead.bundle.min.js - input suggestion engine
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-typeahead {
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Make input full width
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Input field hint
|
||||
.tt-hint {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
|
||||
// Menu
|
||||
// ------------------------------
|
||||
|
||||
// Dropdown menu
|
||||
.tt-menu {
|
||||
width: 100%;
|
||||
margin-top: $dropdown-spacer;
|
||||
min-width: $dropdown-min-width;
|
||||
padding: $dropdown-padding-y 0;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
max-height: $typeahead-max-height;
|
||||
overflow-y: auto;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// Custom height
|
||||
.typeahead-scrollable & {
|
||||
max-height: $typeahead-max-height-scrollable;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu item
|
||||
.tt-suggestion {
|
||||
color: $dropdown-link-color;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
cursor: pointer;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state bg color
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.tt-cursor {
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Heading
|
||||
.tt-heading {
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
display: block;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-top: $dropdown-padding-y;
|
||||
margin-bottom: $dropdown-padding-y;
|
||||
|
||||
// Remove top margin in the first heading
|
||||
.tt-dataset-group:first-child &:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Add padding for empty message
|
||||
.typeahead-template .empty-message {
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,498 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Uniform.js
|
||||
*
|
||||
* Styles for uniform.min.js - form components styling
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-uniform {
|
||||
|
||||
|
||||
// Checkbox and radio
|
||||
// ------------------------------
|
||||
|
||||
// Checkbox and radio have some common styles
|
||||
.uniform-checker,
|
||||
.uniform-choice {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
|
||||
// Set general size
|
||||
&,
|
||||
span,
|
||||
input {
|
||||
@include size($checkbox-size);
|
||||
}
|
||||
|
||||
// Input setup
|
||||
span {
|
||||
border: $checkbox-border-width solid $checkbox-border-color;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
// Checked style
|
||||
&.checked {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
border: 0;
|
||||
background: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -($checkbox-border-width);
|
||||
left: -($checkbox-border-width);
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
|
||||
// Make sure hidden input doesn't overlap the custom element
|
||||
.form-check.form-check-inline & {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alignment
|
||||
//
|
||||
|
||||
// Left alignment
|
||||
.form-check & {
|
||||
position: absolute;
|
||||
top: (($line-height-computed - $checkbox-size) / 2);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
.form-check-right & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Left inline
|
||||
.form-check-inline & {
|
||||
position: static;
|
||||
margin-right: $form-check-inline-input-margin-x;
|
||||
margin-top: ($line-height-computed - $checkbox-size) / 2;
|
||||
}
|
||||
|
||||
// Right inline
|
||||
.form-check-inline.form-check-right & {
|
||||
margin-right: 0;
|
||||
margin-left: $form-check-inline-input-margin-x;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
opacity: $checkbox-disabled-opacity;
|
||||
|
||||
// Cursor
|
||||
&,
|
||||
input {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
.uniform-checker {
|
||||
|
||||
// Checkbox setup
|
||||
span {
|
||||
color: $checkbox-color;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include transition(border-color ease-in-out $component-transition-timer, color ease-in-out $component-transition-timer);
|
||||
|
||||
// Checkmark icon
|
||||
&:after {
|
||||
content: $icon-checkbox-tick;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
position: absolute;
|
||||
top: ($checkbox-size - $icon-font-size - ($checkbox-border-width * 2)) / 2;
|
||||
left: ($checkbox-size - $icon-font-size - ($checkbox-border-width * 2)) / 2;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
@include ll-font-smoothing();
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// For dark backgrounds, add .uniform-checker-light class to
|
||||
// checkbox container to make it white
|
||||
.form-check-light & {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom colors
|
||||
&[class*=border-] {
|
||||
span {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Radio
|
||||
.uniform-choice {
|
||||
border-radius: $border-radius-round;
|
||||
|
||||
// Radio setup
|
||||
span {
|
||||
border-radius: $border-radius-round;
|
||||
@include transition(border-color ease-in-out $component-transition-timer);
|
||||
|
||||
// Add colored circle
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: (($checkbox-size / 2) - $checkbox-border-width - (($checkbox-size / 2) / 2));
|
||||
left: (($checkbox-size / 2) - $checkbox-border-width - (($checkbox-size / 2) / 2));
|
||||
border: (($checkbox-size / 2) / 2) solid;
|
||||
border-color: inherit;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: $border-radius-round;
|
||||
opacity: 0;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// For dark backgrounds, add .uniform-checker-light class to
|
||||
// checkbox container to make it white
|
||||
.form-check-light & {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom colors
|
||||
&[class*=border-] {
|
||||
span {
|
||||
border-color: inherit;
|
||||
|
||||
&:after {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for dropdown active state
|
||||
.dropdown-menu:not([class*=bg-]) {
|
||||
.dropdown-item.active:not(.disabled) {
|
||||
@if (lightness($dropdown-link-active-bg) < 75) {
|
||||
.uniform-checker {
|
||||
span {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
|
||||
}
|
||||
}
|
||||
.uniform-choice {
|
||||
span {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inside dropdown item
|
||||
.dropdown-item {
|
||||
&.form-check {
|
||||
|
||||
// Label
|
||||
.form-check-label {
|
||||
padding-left: ($dropdown-item-padding-x + $dropdown-icon-spacer-x + $checkbox-size);
|
||||
}
|
||||
|
||||
// Checkbox and radio
|
||||
.uniform-checker,
|
||||
.uniform-choice {
|
||||
margin-top: ($dropdown-item-padding-y + (($line-height-computed - $checkbox-size) / 2));
|
||||
left: $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&.form-check-right {
|
||||
|
||||
// Reverse label padding
|
||||
.form-check-label {
|
||||
padding-right: ($dropdown-item-padding-x + $dropdown-icon-spacer-x + $checkbox-size);
|
||||
}
|
||||
|
||||
// Reverse checkbox/radio alignment
|
||||
.uniform-checker,
|
||||
.uniform-choice {
|
||||
left: auto;
|
||||
right: $dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inside dark dropdown
|
||||
.dropdown-menu[class*=bg-]:not(.bg-white):not(.bg-transparent):not(.bg-light) {
|
||||
.uniform-checker {
|
||||
span {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
|
||||
}
|
||||
}
|
||||
.uniform-choice {
|
||||
span {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// File uploader
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.uniform-uploader {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
// File name text
|
||||
.filename {
|
||||
color: $text-muted;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
flex: 1;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
border-right: 0;
|
||||
background-color: $input-bg;
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
@include border-left-radius($input-border-radius);
|
||||
}
|
||||
|
||||
// Action button
|
||||
.action {
|
||||
z-index: 1;
|
||||
@include border-radius(0);
|
||||
@include border-right-radius($input-border-radius);
|
||||
}
|
||||
|
||||
// Hide file input
|
||||
input[type=file] {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-height: $input-height;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
.filename {
|
||||
background-color: $input-disabled-bg;
|
||||
}
|
||||
|
||||
// Cursor
|
||||
.filename,
|
||||
input[type=file] {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.form-control-styled-lg {
|
||||
|
||||
// File input size
|
||||
input[type=file] {
|
||||
min-height: $input-height-lg;
|
||||
}
|
||||
|
||||
// File name text
|
||||
.filename {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-line-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.form-control-styled-sm {
|
||||
|
||||
// File input size
|
||||
input[type=file] {
|
||||
min-height: $input-height-sm;
|
||||
}
|
||||
|
||||
// File name text
|
||||
.filename {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-line-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Select
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.uniform-select {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-btn-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
@include box-shadow($hover-shadow-lighter);
|
||||
}
|
||||
|
||||
// Custom colors
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light):not(.bg-transparent) {
|
||||
color: $white;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
@include box-shadow($hover-shadow-darker);
|
||||
}
|
||||
}
|
||||
|
||||
// Select replacement
|
||||
span {
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-right: ($input-padding-x + $icon-font-size);
|
||||
width: 100%;
|
||||
@include text-truncate();
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: $icon-font-size;
|
||||
margin-top: (($icon-font-size - $line-height-computed) / 2);
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Hide default select
|
||||
select {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: $input-height;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
&:not([class*=bg-]) {
|
||||
color: $input-disabled-color;
|
||||
background-color: $input-disabled-bg;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
@include box-shadow(none !important);
|
||||
}
|
||||
|
||||
// Cursor
|
||||
select {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
|
||||
// Fade out if select has custom color
|
||||
&[class*=bg-]:not(.bg-white):not(.bg-light):not(.bg-transparent) {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.form-control-styled-lg {
|
||||
|
||||
// File input size
|
||||
select:not([size]):not([multiple]) {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
|
||||
// File name text
|
||||
.uniform-select {
|
||||
height: $input-height-lg;
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-line-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.form-control-styled-sm {
|
||||
|
||||
// File input size
|
||||
select:not([size]):not([multiple]) {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
|
||||
// File name text
|
||||
.uniform-select {
|
||||
height: $input-height-sm;
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-line-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Form Validation
|
||||
*
|
||||
* Styles for validate.min.js - jQuery plugin for simple clientside form validation
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-validation {
|
||||
|
||||
// Error label
|
||||
.validation-invalid-label,
|
||||
.validation-valid-label {
|
||||
margin-top: $form-text-margin-top;
|
||||
margin-bottom: $form-text-margin-top;
|
||||
display: block;
|
||||
color: theme-color("danger");
|
||||
position: relative;
|
||||
padding-left: ($icon-font-size + $element-spacer-x);
|
||||
}
|
||||
|
||||
// Success label
|
||||
.validation-valid-label {
|
||||
color: theme-color("success");
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
// Icon container
|
||||
.validation-invalid-label,
|
||||
.validation-valid-label {
|
||||
&:before {
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
position: absolute;
|
||||
top: (($line-height-computed - $icon-font-size) / 2);
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hide if empty
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Error icon
|
||||
.validation-invalid-label:before {
|
||||
content: $icon-validation-error;
|
||||
}
|
||||
|
||||
// Valid icon
|
||||
.validation-valid-label:before {
|
||||
content: $icon-validation-success;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Steps wizard
|
||||
*
|
||||
* Styles for steps.min.js - An all-in-one wizard plugin that is extremely flexible, compact and feature-rich
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-wizard {
|
||||
|
||||
// Base
|
||||
.wizard {
|
||||
width: 100%;
|
||||
|
||||
// Title
|
||||
> .steps .current-info,
|
||||
> .content > .title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Wizard content
|
||||
> .content {
|
||||
position: relative;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
|
||||
> .body {
|
||||
padding: 0 $card-spacer-x;
|
||||
}
|
||||
|
||||
> iframe {
|
||||
border: 0;
|
||||
@include size(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Steps list
|
||||
.wizard {
|
||||
|
||||
// Steps
|
||||
> .steps {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
// Wizard nav
|
||||
> ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
// Wizard nav item
|
||||
> li {
|
||||
display: table-cell;
|
||||
width: auto;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
// Link
|
||||
a {
|
||||
position: relative;
|
||||
padding-top: ($wizard-step-number-size + ($spacer / 2));
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
display: block;
|
||||
outline: 0;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
// Steps indicator line
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: ($wizard-step-number-size + $spacer) - ($wizard-step-number-size / 2) - rem-calc($wizard-step-line-size / 2);
|
||||
width: 50%;
|
||||
height: $wizard-step-line-size;
|
||||
background-color: $wizard-step-number-active-bg;
|
||||
z-index: 9;
|
||||
}
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
&:first-child:before,
|
||||
&:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Current step
|
||||
&.current {
|
||||
&:after,
|
||||
~ li:before,
|
||||
~ li:after {
|
||||
background-color: $wizard-step-line-color;
|
||||
}
|
||||
|
||||
// Link
|
||||
> a {
|
||||
color: $body-color;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Icon container
|
||||
.number {
|
||||
font-size: 0;
|
||||
border-color: $wizard-step-number-active-bg;
|
||||
background-color: $wizard-step-number-active-color;
|
||||
color: $wizard-step-number-active-bg;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-wizard-step-current;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
font-size: $icon-font-size;
|
||||
@include ll-font-smoothing();
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
a {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Completed step
|
||||
&.done {
|
||||
|
||||
// Link
|
||||
a {
|
||||
@include plain-hover-focus {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon container
|
||||
.number {
|
||||
font-size: 0;
|
||||
background-color: $wizard-step-number-active-bg;
|
||||
border-color: $wizard-step-number-active-bg;
|
||||
color: $wizard-step-number-active-color;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-wizard-step-complete;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
font-size: $icon-font-size;
|
||||
@include ll-font-smoothing();
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
&.error {
|
||||
.number {
|
||||
border-color: $wizard-step-number-error-bg;
|
||||
color: $wizard-step-number-error-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add top border if wizard comes after transparent card header
|
||||
.card > .card-header:not([class*=bg-]) > & {
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
// Media queries
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Nav item
|
||||
> li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
> a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child:before,
|
||||
&:last-child:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
background-color: $wizard-step-number-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
// Nav item
|
||||
> li {
|
||||
width: 100%;
|
||||
|
||||
&.current:after {
|
||||
background-color: $wizard-step-number-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Numbers and icons
|
||||
.number {
|
||||
background-color: $wizard-step-number-bg;
|
||||
color: $wizard-step-number-color;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -($wizard-step-number-size / 2);
|
||||
border: $wizard-step-line-size solid $wizard-step-line-color;
|
||||
font-size: $font-size-lg;
|
||||
z-index: 10;
|
||||
line-height: ($wizard-step-number-size - rem-calc($wizard-step-line-size * 2));
|
||||
text-align: center;
|
||||
@include size($wizard-step-number-size);
|
||||
@include border-radius($border-radius-circle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Steps pagination
|
||||
.wizard {
|
||||
|
||||
// Container
|
||||
> .actions {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding: $card-spacer-x;
|
||||
padding-top: 0;
|
||||
|
||||
// Paging list
|
||||
> ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@include clearfix;
|
||||
|
||||
// Paging item
|
||||
> li {
|
||||
display: inline-block;
|
||||
|
||||
// Add horizontal spacing
|
||||
& + li {
|
||||
margin-left: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Ace code editor
|
||||
*
|
||||
* Styles Ace - an embeddable code editor written in JavaScript
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-ace {
|
||||
|
||||
// Base
|
||||
.ace_editor {
|
||||
height: $ace-height;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,642 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Summernote editor
|
||||
*
|
||||
* Styles for summernote.min.js - super simple WYSIWYG Editor for Bootstrap framework
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-summernote {
|
||||
|
||||
|
||||
// Summernote uses its own icons
|
||||
// ----------------------------------------
|
||||
|
||||
// Load font
|
||||
@font-face {
|
||||
font-family: 'summernote';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url("#{$summernote-font-path}/summernote.eot?0d0d5fac99cc8774d89eb08b1a8323c4");
|
||||
src: url("#{$summernote-font-path}/summernote.eot?#iefix") format("embedded-opentype"),
|
||||
url("#{$summernote-font-path}/summernote.woff?0d0d5fac99cc8774d89eb08b1a8323c4") format("woff"),
|
||||
url("#{$summernote-font-path}/summernote.ttf?0d0d5fac99cc8774d89eb08b1a8323c4") format("truetype");
|
||||
}
|
||||
|
||||
// Icon styles
|
||||
[class^="note-icon-"]:before,
|
||||
[class*=" note-icon-"]:before {
|
||||
display: inline-block;
|
||||
font-family: 'summernote';
|
||||
font-style: normal;
|
||||
font-size: inherit;
|
||||
text-decoration: inherit;
|
||||
vertical-align: middle;
|
||||
line-height: normal;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Icons
|
||||
.note-icon-align-center:before{content:"\f101";}
|
||||
.note-icon-align-indent:before{content:"\f102";}
|
||||
.note-icon-align-justify:before{content:"\f103";}
|
||||
.note-icon-align-left:before{content:"\f104";}
|
||||
.note-icon-align-outdent:before{content:"\f105";}
|
||||
.note-icon-align-right:before{content:"\f106";}
|
||||
.note-icon-align:before{content:"\f107";}
|
||||
.note-icon-arrow-circle-down:before{content:"\f108";}
|
||||
.note-icon-arrow-circle-left:before{content:"\f109";}
|
||||
.note-icon-arrow-circle-right:before{content:"\f10a";}
|
||||
.note-icon-arrow-circle-up:before{content:"\f10b";}
|
||||
.note-icon-arrows-alt:before{content:"\f10c";}
|
||||
.note-icon-arrows-h:before{content:"\f10d";}
|
||||
.note-icon-arrows-v:before{content:"\f10e";}
|
||||
.note-icon-bold:before{content:"\f10f";}
|
||||
.note-icon-caret:before{content:"\f110";}
|
||||
.note-icon-chain-broken:before{content:"\f111";}
|
||||
.note-icon-circle:before{content:"\f112";}
|
||||
.note-icon-close:before{content:"\f113";}
|
||||
.note-icon-code:before{content:"\f114";}
|
||||
.note-icon-col-after:before{content:"\f115";}
|
||||
.note-icon-col-before:before{content:"\f116";}
|
||||
.note-icon-col-remove:before{content:"\f117";}
|
||||
.note-icon-eraser:before{content:"\f118";}
|
||||
.note-icon-font:before{content:"\f119";}
|
||||
.note-icon-frame:before{content:"\f11a";}
|
||||
.note-icon-italic:before{content:"\f11b";}
|
||||
.note-icon-link:before{content:"\f11c";}
|
||||
.note-icon-magic:before{content:"\f11d";}
|
||||
.note-icon-menu-check:before{content:"\f11e";}
|
||||
.note-icon-minus:before{content:"\f11f";}
|
||||
.note-icon-orderedlist:before{content:"\f120";}
|
||||
.note-icon-pencil:before{content:"\f121";}
|
||||
.note-icon-picture:before{content:"\f122";}
|
||||
.note-icon-question:before{content:"\f123";}
|
||||
.note-icon-redo:before{content:"\f124";}
|
||||
.note-icon-row-above:before{content:"\f125";}
|
||||
.note-icon-row-below:before{content:"\f126";}
|
||||
.note-icon-row-remove:before{content:"\f127";}
|
||||
.note-icon-special-character:before{content:"\f128";}
|
||||
.note-icon-square:before{content:"\f129";}
|
||||
.note-icon-strikethrough:before{content:"\f12a";}
|
||||
.note-icon-subscript:before{content:"\f12b";}
|
||||
.note-icon-summernote:before{content:"\f12c";}
|
||||
.note-icon-superscript:before{content:"\f12d";}
|
||||
.note-icon-table:before{content:"\f12e";}
|
||||
.note-icon-text-height:before{content:"\f12f";}
|
||||
.note-icon-trash:before{content:"\f130";}
|
||||
.note-icon-underline:before{content:"\f131";}
|
||||
.note-icon-undo:before{content:"\f132";}
|
||||
.note-icon-unorderedlist:before{content:"\f133";}
|
||||
.note-icon-video:before{content:"\f134";}
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Editor
|
||||
.note-editor {
|
||||
position: relative;
|
||||
|
||||
// Drop container
|
||||
.note-dropzone {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
color: theme-color("primary");
|
||||
background-color: $card-bg;
|
||||
pointer-events: none;
|
||||
border: ($summernote-border-width * 2) dashed theme-color("primary");
|
||||
opacity: .95;
|
||||
|
||||
// Hover state
|
||||
&.hover {
|
||||
color: theme-color("primary");
|
||||
border: ($summernote-border-width * 2) dashed theme-color("primary");
|
||||
}
|
||||
|
||||
// Messages
|
||||
.note-dropzone-message {
|
||||
display: table-cell;
|
||||
font-size: $h5-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.card & {
|
||||
border-color: $summernote-border-color;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&.dragover .note-dropzone {
|
||||
display: table;
|
||||
}
|
||||
|
||||
// Remove bottom margin from last rows
|
||||
.note-form-group {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.note-group-image-url {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal title
|
||||
.modal-title {
|
||||
font-size: $h5-font-size;
|
||||
}
|
||||
|
||||
// Style dropdown menu
|
||||
.dropdown-style {
|
||||
pre {
|
||||
background-color: $dropdown-bg;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Add .summernote-borderless class to original container
|
||||
// to remove all styles related to .card
|
||||
.summernote-borderless ~ & {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Air mode
|
||||
.note-air-editor {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Some fix for FF
|
||||
@-moz-document url-prefix() {
|
||||
.note-image-input {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
.note-placeholder {
|
||||
position: absolute;
|
||||
display: none;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
.note-toolbar:not([class*=bg-]):not([class*=alpha-]) {
|
||||
background-color: $card-cap-bg;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Menus
|
||||
.dropdown-fontname,
|
||||
.dropdown-style {
|
||||
max-height: 20rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Remove margin from paragraphs in menus
|
||||
.dropdown-style {
|
||||
a > p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Editor
|
||||
//
|
||||
|
||||
// Editing area
|
||||
.note-editing-area {
|
||||
position: relative;
|
||||
|
||||
// Editable container
|
||||
.note-editable {
|
||||
outline: 0;
|
||||
|
||||
sup {
|
||||
vertical-align: super;
|
||||
}
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
// Images
|
||||
img {
|
||||
&.note-float-left {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
&.note-float-right {
|
||||
margin-left: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Frame
|
||||
.note-frame {
|
||||
|
||||
// Code view
|
||||
&.codeview {
|
||||
.note-editing-area {
|
||||
.note-editable {
|
||||
display: none;
|
||||
}
|
||||
.note-codable {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Editing area
|
||||
.note-editing-area {
|
||||
overflow: hidden;
|
||||
|
||||
// Edit view
|
||||
.note-editable {
|
||||
padding: $card-spacer-x;
|
||||
overflow: auto;
|
||||
color: $body-color;
|
||||
background-color: $card-bg;
|
||||
min-height: $summernote-min-height;
|
||||
|
||||
&[contenteditable="false"] {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
// Code view
|
||||
.note-codable {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: $card-spacer-x;
|
||||
margin-bottom: 0;
|
||||
font-family: $font-family-monospace;
|
||||
color: $white;
|
||||
background-color: $gray-900;
|
||||
border: 0;
|
||||
resize: none;
|
||||
@include box-shadow(none);
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Fullscreen mode
|
||||
&.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-tooltip + 10;
|
||||
width: 100%!important;
|
||||
border: 0;
|
||||
@include border-radius(0);
|
||||
|
||||
// Hide resize bar
|
||||
.note-resizebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.note-placeholder {
|
||||
position: absolute;
|
||||
display: none;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Status bar
|
||||
.note-statusbar {
|
||||
background-color: $card-cap-bg;
|
||||
|
||||
// Resize handle
|
||||
.note-resizebar {
|
||||
width: 100%;
|
||||
padding: ($summernote-resizer-height * 2) 0;
|
||||
cursor: ns-resize;
|
||||
border-top: $summernote-border-width solid $summernote-border-color;
|
||||
|
||||
// Icon bar
|
||||
.note-icon-bar {
|
||||
width: $summernote-resizer-width;
|
||||
margin: $summernote-resizer-height auto;
|
||||
border-top: $summernote-resizer-height solid $summernote-resizer-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Popover
|
||||
//
|
||||
|
||||
// Base
|
||||
.note-popover {
|
||||
|
||||
// Override default popover styles
|
||||
&.popover {
|
||||
display: none;
|
||||
max-width: none;
|
||||
|
||||
// Links
|
||||
.popover-content a {
|
||||
display: inline-block;
|
||||
max-width: $popover-max-width;
|
||||
vertical-align: middle;
|
||||
@include text-truncate();
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.arrow {
|
||||
left: $card-spacer-x !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.popover-content {
|
||||
display: inline-flex;
|
||||
padding: $popover-body-padding-y 0 0 $popover-body-padding-y;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> span {
|
||||
margin-right: $popover-body-padding-x;
|
||||
margin-bottom: $popover-body-padding-x;
|
||||
}
|
||||
|
||||
> .btn-group {
|
||||
margin-right: $popover-body-padding-x;
|
||||
margin-bottom: $popover-body-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove margins from headings
|
||||
.note-style {
|
||||
h1, h2, h3, h4, h5, h6, blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hint
|
||||
.note-hint-popover {
|
||||
min-width: $dropdown-min-width;
|
||||
padding: $dropdown-padding-y 0;
|
||||
|
||||
.popover-content {
|
||||
max-height: 10rem;
|
||||
overflow: auto;
|
||||
|
||||
.note-hint-group {
|
||||
.note-hint-item {
|
||||
display: block!important;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
color: $dropdown-link-color;
|
||||
clear: both;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
color: $dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toolbar
|
||||
.card-header.note-toolbar {
|
||||
|
||||
// Closest button group
|
||||
> .btn-group {
|
||||
margin-top: $card-spacer-y;
|
||||
margin-right: $card-spacer-y;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
|
||||
// Links
|
||||
&.note-check a {
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.checked {
|
||||
color: $dropdown-link-active-color;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color palette
|
||||
.note-color-palette {
|
||||
line-height: 1;
|
||||
|
||||
div {
|
||||
.note-color-btn {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid $dropdown-bg;
|
||||
@include size(1.25rem);
|
||||
|
||||
@include hover {
|
||||
border-color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All button groups
|
||||
.note-popover,
|
||||
.note-toolbar {
|
||||
.btn-group {
|
||||
.note-table {
|
||||
min-width: 0;
|
||||
padding: $dropdown-padding-y;
|
||||
|
||||
// Table cell picker
|
||||
.note-dimension-picker {
|
||||
font-size: 1.125rem;
|
||||
|
||||
.note-dimension-picker-mousecatcher {
|
||||
position: absolute!important;
|
||||
z-index: 3;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.note-dimension-picker-unhighlighted {
|
||||
position: relative!important;
|
||||
z-index: 1;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat;
|
||||
}
|
||||
|
||||
.note-dimension-picker-highlighted {
|
||||
position: absolute!important;
|
||||
z-index: 2;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat;
|
||||
}
|
||||
}
|
||||
|
||||
// Selected cells callback label
|
||||
.note-dimension-display {
|
||||
text-align: center;
|
||||
margin-top: $dropdown-padding-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colors
|
||||
.note-color {
|
||||
|
||||
// Row
|
||||
.note-color-row {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
|
||||
// Make sure 2 palettes fit in 1 row
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Color palette
|
||||
.note-palette {
|
||||
display: inline-block;
|
||||
width: (1.25rem * 8);
|
||||
margin: $btn-padding-y $btn-padding-x;
|
||||
|
||||
// Title
|
||||
.note-palette-title {
|
||||
margin-bottom: ($spacer / 2);
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// Reset
|
||||
.note-color-reset {
|
||||
width: 100%;
|
||||
padding: $btn-padding-y-sm $btn-padding-x-sm;
|
||||
margin-bottom: $btn-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
.note-para {
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
padding: $dropdown-item-padding-y;
|
||||
white-space: nowrap;
|
||||
|
||||
> div:first-child {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Image resize handle
|
||||
.note-handle {
|
||||
position: relative;
|
||||
|
||||
// Selection
|
||||
.note-control-selection {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: $border-width solid $gray-900;
|
||||
z-index: 10;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Background
|
||||
.note-control-selection-bg {
|
||||
background-color: $gray-900;
|
||||
opacity: 0.3;
|
||||
@include size(100%);
|
||||
}
|
||||
|
||||
// Control handle
|
||||
.note-control-handle,
|
||||
.note-control-holder,
|
||||
.note-control-sizing {
|
||||
border: $border-width solid $gray-900;
|
||||
@include size(0.5rem);
|
||||
}
|
||||
.note-control-sizing {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
// Control direction
|
||||
.note-control-nw {
|
||||
top: rem-calc(-0.3125rem);
|
||||
left: rem-calc(-0.3125rem);
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.note-control-ne {
|
||||
top: rem-calc(-0.3125rem);
|
||||
right: rem-calc(-0.3125rem);
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.note-control-sw {
|
||||
bottom: rem-calc(-0.3125rem);
|
||||
left: rem-calc(-0.3125rem);
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
.note-control-se {
|
||||
right: rem-calc(-0.3125rem);
|
||||
bottom: rem-calc(-0.3125rem);
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
// Selection info
|
||||
.note-control-selection-info {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0.3125rem;
|
||||
margin: 0.3125rem;
|
||||
color: $white;
|
||||
background-color: $gray-900;
|
||||
opacity: 0.7;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,578 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Trumbowyg editor
|
||||
*
|
||||
* Styles for trumbowyg.min.js - a lightweight WYSIWYG editor
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-trumbowyg {
|
||||
|
||||
|
||||
//
|
||||
// Base
|
||||
//
|
||||
|
||||
// Icons
|
||||
#trumbowyg-icons {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
svg {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Container
|
||||
.trumbowyg-box {
|
||||
position: relative;
|
||||
border: $trumbowyg-border-width solid $trumbowyg-border-color;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// SVG icons
|
||||
svg {
|
||||
fill: $trumbowyg-toolbar-color;
|
||||
display: block;
|
||||
margin: (($line-height-computed - $icon-font-size) / 2) 0;
|
||||
@include size($icon-font-size);
|
||||
}
|
||||
|
||||
// Fullscreen mode
|
||||
&.trumbowyg-fullscreen {
|
||||
background: $card-bg;
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Content area
|
||||
//
|
||||
|
||||
// Editor
|
||||
.trumbowyg-editor {
|
||||
position: relative;
|
||||
|
||||
// Placeholder
|
||||
&[contenteditable=true]:empty:not(:focus)::before {
|
||||
content: attr(placeholder);
|
||||
color: $gray-600;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Common styles
|
||||
.trumbowyg-editor,
|
||||
.trumbowyg-textarea {
|
||||
position: relative;
|
||||
padding: $card-spacer-x;
|
||||
min-height: $trumbowyg-min-height;
|
||||
background-color: $card-bg;
|
||||
width: 100%;
|
||||
border-style: none;
|
||||
resize: none;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
|
||||
// Autogrow on Enter press
|
||||
&.trumbowyg-autogrow-on-enter {
|
||||
@include transition(height ease-in-out ($component-transition-timer * 2));
|
||||
}
|
||||
}
|
||||
|
||||
// Blur
|
||||
.trumbowyg-box-blur {
|
||||
.trumbowyg-editor {
|
||||
img,
|
||||
hr {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Textarea
|
||||
.trumbowyg-textarea {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
.trumbowyg-box {
|
||||
|
||||
// Visible
|
||||
&.trumbowyg-editor-visible {
|
||||
|
||||
// Hide textarea
|
||||
.trumbowyg-textarea {
|
||||
height: 1px !important;
|
||||
width: 25%;
|
||||
min-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: none;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden
|
||||
&.trumbowyg-editor-hidden {
|
||||
|
||||
// Show textarea
|
||||
.trumbowyg-textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// And hide editor
|
||||
.trumbowyg-editor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.trumbowyg-disabled {
|
||||
.trumbowyg-textarea {
|
||||
opacity: 0.8;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Toolbar
|
||||
//
|
||||
|
||||
.trumbowyg-button-pane {
|
||||
width: 100%;
|
||||
background-color: $trumbowyg-toolbar-bg;
|
||||
border-bottom: $trumbowyg-toolbar-border-width solid $trumbowyg-toolbar-border-color;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
backface-visibility: hidden;
|
||||
z-index: 11;
|
||||
@include border-top-radius($border-radius);
|
||||
|
||||
// Button group
|
||||
.trumbowyg-button-group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
// Fullscreen button
|
||||
.trumbowyg-fullscreen-button {
|
||||
svg {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Divider
|
||||
&:not(:empty) + .trumbowyg-button-group {
|
||||
padding-left: $trumbowyg-toolbar-divider-width;
|
||||
|
||||
// Line
|
||||
&:before {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
width: $trumbowyg-toolbar-divider-width;
|
||||
background-color: lighten($trumbowyg-toolbar-border-color, 5%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Add rounded corner to first and last buttons
|
||||
.trumbowyg-box:not(.trumbowyg-fullscreen) &:first-child button {
|
||||
@include border-radius($border-radius - rem-calc($card-border-width) 0 0 0);
|
||||
}
|
||||
.trumbowyg-box:not(.trumbowyg-fullscreen) &:last-child button {
|
||||
@include border-radius(0 $border-radius - rem-calc($card-border-width) 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: $btn-padding-x;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
vertical-align: middle;
|
||||
@include transition(background-color ease-in-out $component-transition-timer, opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Text button
|
||||
&.trumbowyg-textual-button {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Hover and active states
|
||||
&:not(.trumbowyg-disable):hover,
|
||||
&:not(.trumbowyg-disable):focus,
|
||||
&.trumbowyg-active {
|
||||
background-color: $trumbowyg-toolbar-hover-bg;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.trumbowyg-disable,
|
||||
.trumbowyg-disabled & {
|
||||
|
||||
// Button
|
||||
button:not(.trumbowyg-not-disable) {
|
||||
&:not(.trumbowyg-active),
|
||||
&:not(.trumbowyg-viewHTML-button) {
|
||||
opacity: 0.2;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown toggles
|
||||
.trumbowyg-open-dropdown {
|
||||
padding-right: ($btn-padding-x * 2);
|
||||
|
||||
// Caret
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $btn-padding-x;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin-top: -($caret-width / 2);
|
||||
border: $caret-width solid transparent;
|
||||
border-top-color: $trumbowyg-toolbar-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Right aligned
|
||||
.trumbowyg-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Toolbar dropdowns
|
||||
//
|
||||
|
||||
.trumbowyg-dropdown {
|
||||
min-width: $dropdown-min-width;
|
||||
padding: $dropdown-padding-y 0;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
border-top: 0;
|
||||
margin-top: $trumbowyg-toolbar-border-width;
|
||||
margin-left: -($dropdown-border-width);
|
||||
z-index: $zindex-dropdown;
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
@include border-bottom-radius($border-radius);
|
||||
|
||||
// Dropdown item
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
color: $dropdown-link-color;
|
||||
white-space: nowrap;
|
||||
background: none;
|
||||
border: 0;
|
||||
text-align: inherit;
|
||||
cursor: pointer;
|
||||
@include transition(background-color ease-in-out $component-transition-timer, color ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Icon
|
||||
svg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: $dropdown-item-padding-x;
|
||||
margin-top: (($font-size-base - $icon-font-size) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Modal box
|
||||
//
|
||||
|
||||
// Container
|
||||
.trumbowyg-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 33rem;
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
// Box
|
||||
.trumbowyg-modal-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 30rem;
|
||||
width: calc(100% - 3rem);
|
||||
background-color: $modal-content-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
z-index: 1;
|
||||
backface-visibility: hidden;
|
||||
@include border-bottom-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// Title
|
||||
.trumbowyg-modal-title {
|
||||
font-size: $h6-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: $modal-header-padding;
|
||||
padding-bottom: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Progress
|
||||
.trumbowyg-progress {
|
||||
width: 100%;
|
||||
height: 0.1875rem;
|
||||
position: absolute;
|
||||
top: $trumbowyg-toolbar-height;
|
||||
|
||||
.trumbowyg-progress-bar {
|
||||
background-color: $color-success-500;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
@include transition(width linear $component-transition-timer);
|
||||
}
|
||||
}
|
||||
|
||||
// Form elements
|
||||
form {
|
||||
padding: $modal-inner-padding;
|
||||
text-align: right;
|
||||
|
||||
// Form rows
|
||||
> label {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: $form-group-margin-bottom;
|
||||
|
||||
// Text
|
||||
.trumbowyg-input-infos {
|
||||
display: block;
|
||||
text-align: left;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding-top: $input-padding-y + rem-calc($input-border-width);
|
||||
padding-bottom: $input-padding-y + rem-calc($input-border-width);
|
||||
line-height: $input-btn-line-height;
|
||||
|
||||
&.trumbowyg-msg-error {
|
||||
color: theme-color('danger');
|
||||
margin-left: 30%;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs
|
||||
input {
|
||||
|
||||
// Remove outline
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Text and file
|
||||
&:not([type=checkbox]):not([type=radio]) {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-btn-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
float: right;
|
||||
width: 70%;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
&[type=checkbox] {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
&.trumbowyg-input-error {
|
||||
input,
|
||||
textarea {
|
||||
border-color: theme-color('danger');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Error message
|
||||
.error {
|
||||
display: block;
|
||||
color: theme-color('danger');
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.trumbowyg-modal-button {
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
background-color: theme-color("dark");
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-left: $element-spacer-x;
|
||||
border: $btn-border-width solid transparent;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
// Submit button
|
||||
&.trumbowyg-modal-submit {
|
||||
background-color: $color-success-400;
|
||||
|
||||
@include hover-focus {
|
||||
outline: 0;
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset button
|
||||
&.trumbowyg-modal-reset {
|
||||
color: $btn-light-color;
|
||||
background-color: $btn-light-bg;
|
||||
border-color: $btn-light-border-color;
|
||||
|
||||
@include hover-focus {
|
||||
outline: 0;
|
||||
color: $btn-light-hover-color;
|
||||
background-color: $btn-light-hover-bg;
|
||||
border-color: $btn-light-hover-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog overlay
|
||||
.trumbowyg-overlay {
|
||||
position: absolute;
|
||||
background-color: rgba($white, $modal-backdrop-opacity);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
display: none;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fullscreen mode
|
||||
//
|
||||
|
||||
// Disable scrollbar in body
|
||||
body.trumbowyg-body-fullscreen {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Base
|
||||
.trumbowyg-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 99999;
|
||||
|
||||
// Remove borders
|
||||
&.trumbowyg-box,
|
||||
.trumbowyg-editor {
|
||||
border: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
// Elements height
|
||||
.trumbowyg-editor,
|
||||
.trumbowyg-textarea {
|
||||
height: calc(100% - #{$trumbowyg-toolbar-height}) !important;
|
||||
overflow: auto;
|
||||
}
|
||||
.trumbowyg-overlay {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
// Active fullscreen button state
|
||||
.trumbowyg-button-group .trumbowyg-fullscreen-button svg {
|
||||
color: $gray-900;
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
.trumbowyg-dropdown-foreColor,
|
||||
.trumbowyg-dropdown-backColor {
|
||||
padding: $dropdown-padding-y;
|
||||
width: (12 * 1.25rem); // 12 items per row
|
||||
|
||||
// Hide icons
|
||||
svg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Button
|
||||
button {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
text-indent: -9999px;
|
||||
border: 1px solid $white;
|
||||
padding: 0;
|
||||
@include size(1.25rem);
|
||||
@include transition(transform ease-in-out $component-transition-timer);
|
||||
|
||||
@include hover-focus {
|
||||
transform: scale(1.25);
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,331 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Dropzone file uploader
|
||||
*
|
||||
* Styles for dropzone.min.js - open source library that provides drag’n’drop file uploads with image previews
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-dropzone {
|
||||
|
||||
// Base
|
||||
.dropzone {
|
||||
position: relative;
|
||||
border: $dropzone-border-width $dropzone-border-style $card-border-color;
|
||||
min-height: $dropzone-min-height;
|
||||
background-color: $card-bg;
|
||||
padding: $dropzone-spacer;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// If inside panel, give it grey background
|
||||
.card & {
|
||||
background-color: $dropzone-bg;
|
||||
border-color: $dropzone-border-color;
|
||||
}
|
||||
|
||||
// Message
|
||||
.dz-message {
|
||||
opacity: 1;
|
||||
}
|
||||
&.dz-started .dz-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Drag hover border and bg color
|
||||
&.dz-drag-hover {
|
||||
border-color: $dropzone-drag-border-color;
|
||||
background-color: $dropzone-drag-bg;
|
||||
color: $dropzone-drag-color;
|
||||
}
|
||||
|
||||
// Inside sidebar
|
||||
.sidebar & {
|
||||
text-align: center;
|
||||
|
||||
// Message
|
||||
.dz-default.dz-message {
|
||||
&:before {
|
||||
font-size: ($icon-font-size * 4);
|
||||
width: ($icon-font-size * 4);
|
||||
height: ($icon-font-size * 4);
|
||||
margin-left: -($icon-font-size * 2);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// Message text
|
||||
span {
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Messages
|
||||
//
|
||||
|
||||
.dropzone {
|
||||
|
||||
// Default styles
|
||||
.dz-default {
|
||||
&.dz-message {
|
||||
height: $dropzone-min-height;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
content: $icon-uploader-placeholder;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $dropzone-placeholder-icon-size;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: ($dropzone-min-height / 2) - $dropzone-placeholder-icon-size;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
line-height: 1;
|
||||
z-index: 2;
|
||||
color: $dropzone-placeholder-icon-color;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Text label
|
||||
> span {
|
||||
font-size: $h5-font-size;
|
||||
color: $dropzone-placeholder-text-color;
|
||||
display: block;
|
||||
margin-top: ($dropzone-min-height / 2) + $spacer;
|
||||
|
||||
// Subtext
|
||||
span {
|
||||
display: block;
|
||||
color: lighten($dropzone-placeholder-text-color, 15%);
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// On files drag
|
||||
&.dz-drag-hover .dz-message {
|
||||
opacity: 0.75;
|
||||
}
|
||||
&.dz-started .dz-message {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Preview
|
||||
//
|
||||
|
||||
.dropzone,
|
||||
.dropzone-previews {
|
||||
.dz-preview {
|
||||
background-color: $card-bg;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: $dropzone-preview-spacer;
|
||||
min-width: $dropzone-preview-width;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
padding: $dropzone-preview-spacer;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($card-box-shadow);
|
||||
|
||||
// Hide thumbnail in file preview
|
||||
&.dz-file-preview [data-dz-thumbnail] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Details
|
||||
.dz-details {
|
||||
position: relative;
|
||||
|
||||
// File name
|
||||
.dz-filename {
|
||||
overflow: hidden;
|
||||
margin-top: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
// Image
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Size
|
||||
.dz-size {
|
||||
margin-top: map-get($spacers, 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
.dz-details img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Marks
|
||||
.dz-error-mark,
|
||||
.dz-success-mark {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: ($dropzone-preview-spacer / 2);
|
||||
background-color: $card-bg;
|
||||
border-left: $card-border-width solid $card-border-color;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
@include border-radius(0 0 0 $card-border-radius);
|
||||
|
||||
// Icon base
|
||||
&:after {
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hide default things
|
||||
span,
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dz-error-mark {
|
||||
color: theme-color('danger');
|
||||
|
||||
&:after {
|
||||
content: $icon-validation-error;
|
||||
}
|
||||
}
|
||||
.dz-success-mark {
|
||||
color: theme-color('success');
|
||||
|
||||
&:after {
|
||||
content: $icon-validation-success;
|
||||
}
|
||||
}
|
||||
|
||||
// Error and success marks
|
||||
&.dz-error .dz-error-mark,
|
||||
&.dz-success .dz-success-mark {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Uploading progress
|
||||
.dz-progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: ($dropzone-preview-spacer / 2);
|
||||
display: none;
|
||||
|
||||
// Upload progress
|
||||
.dz-upload {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: theme-color('success');
|
||||
@include transition(width ease-in-out $component-transition-timer);
|
||||
@include border-bottom-radius($card-border-radius - rem-calc($card-border-width));
|
||||
}
|
||||
}
|
||||
&.dz-processing .dz-progress {
|
||||
display: block;
|
||||
}
|
||||
&.dz-success {
|
||||
.dz-progress {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
|
||||
// Error message
|
||||
.dz-error-message {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba($card-bg, 0.9);
|
||||
margin: $dropzone-preview-spacer;
|
||||
padding: $dropzone-preview-spacer;
|
||||
color: theme-color('danger');
|
||||
max-width: 100%;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
}
|
||||
&.dz-error {
|
||||
@include hover {
|
||||
.dz-error-message {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dz-progress .dz-upload {
|
||||
background: theme-color('danger');
|
||||
}
|
||||
}
|
||||
|
||||
// Image preview
|
||||
&.dz-image-preview:hover {
|
||||
.dz-details img {
|
||||
display: block;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
// Image thumb
|
||||
.dz-image {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove button
|
||||
a.dz-remove {
|
||||
background-color: $btn-light-bg;
|
||||
border: $btn-border-width solid $btn-light-border-color;
|
||||
display: block;
|
||||
padding: $btn-padding-y-sm $btn-padding-x-sm;
|
||||
text-align: center;
|
||||
color: $btn-light-color;
|
||||
margin-top: map-get($spacers, 2);
|
||||
cursor: pointer;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
color: $btn-light-hover-color;
|
||||
background-color: $btn-light-hover-bg;
|
||||
border-color: $btn-light-hover-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,553 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Bootstrap file input
|
||||
*
|
||||
* Styles for fileinput.min.js - an enhanced HTML 5 file input for Bootstrap
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-fileinput {
|
||||
|
||||
|
||||
// File input styling
|
||||
// ------------------------------
|
||||
|
||||
// Browse button
|
||||
.btn-file {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Hide original input
|
||||
input[type=file] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
text-align: right;
|
||||
opacity: 0;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Caption name
|
||||
.file-caption-name {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
font-family: $font-family-sans-serif;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
outline: 0;
|
||||
pointer-events: none;
|
||||
|
||||
// Display empty caption text as a placeholder
|
||||
.file-input-new &,
|
||||
.file-input-ajax-new & {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Error message
|
||||
.file-error-message {
|
||||
position: relative;
|
||||
background-color: $color-danger-50;
|
||||
color: $color-danger-800;
|
||||
text-align: center;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin: $fileinput-preview-spacer;
|
||||
margin-top: 0;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Top spacing correction if inside drop zone
|
||||
.file-drop-zone & {
|
||||
margin-top: $input-padding-y;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.close {
|
||||
color: $color-danger-800;
|
||||
}
|
||||
|
||||
// List of errors
|
||||
pre {
|
||||
background-color: $card-bg;
|
||||
margin-top: $input-padding-y;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// List
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled caption
|
||||
.file-caption-disabled {
|
||||
background-color: $input-disabled-bg;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Preview
|
||||
//
|
||||
|
||||
// Preview modal
|
||||
.file-preview-detail-modal {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// File preview container
|
||||
.file-preview {
|
||||
border: $border-width solid $border-color;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Close button
|
||||
.close {
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: $fileinput-preview-spacer;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: 0.75;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnails
|
||||
.file-preview-thumbnails {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
// Center thumbs on mobile
|
||||
@include media-breakpoint-down(sm) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnail frame
|
||||
.file-preview-frame {
|
||||
margin: $fileinput-preview-spacer;
|
||||
margin-right: 0;
|
||||
border: $fileinput-preview-frame-border-width solid $fileinput-preview-frame-border-color;
|
||||
background-color: $fileinput-preview-frame-bg;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Thumb
|
||||
.kv-file-content {
|
||||
position: relative;
|
||||
height: $fileinput-preview-thumb-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnail image
|
||||
.file-preview-image {
|
||||
@include border-top-radius($border-radius - rem-calc($border-width));
|
||||
}
|
||||
|
||||
// Thumbnail footer
|
||||
.file-thumbnail-footer {
|
||||
position: relative;
|
||||
background-color: $fileinput-preview-footer-bg;
|
||||
border-top: $border-width solid $border-color;
|
||||
}
|
||||
|
||||
// Preview text
|
||||
.file-preview-text {
|
||||
color: $link-color;
|
||||
border: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Other files preview
|
||||
.file-preview-other {
|
||||
width: $fileinput-preview-thumb-width;
|
||||
|
||||
// Override for preview icon, use Icomoon instead
|
||||
&:after {
|
||||
content: $icon-uploader-placeholder;
|
||||
font-family: $icon-font-family;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: ($icon-font-size * 4);
|
||||
transform: translate(-50%, -50%);
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Status
|
||||
.file-preview-status {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: $fileinput-preview-footer-bg;
|
||||
border-top: $border-width solid $border-color;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-sm;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
z-index: $zindex-tooltip;
|
||||
@include border-bottom-radius($border-radius);
|
||||
|
||||
// Collapse if empty
|
||||
&:empty {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Loading indicator
|
||||
//
|
||||
|
||||
// Give it minimum height
|
||||
.file-thumb-loading {
|
||||
min-height: ($icon-font-size * 2) + ($spacer * 2) + (($input-padding-y * 2) + $line-height-computed);
|
||||
}
|
||||
|
||||
// Loading icon
|
||||
.file-thumb-loading,
|
||||
.file-uploading {
|
||||
|
||||
// Background
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: $color-slate-900;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: $zindex-tooltip - 1;
|
||||
margin-top: -((($icon-font-size * 2) + (($input-padding-y * 2) + $line-height-computed)) / 2);
|
||||
margin-left: -($icon-font-size);
|
||||
@include size($icon-font-size * 2);
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Icon itself
|
||||
&:after {
|
||||
content: $icon-loading-spinner;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
color: $white;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -(($icon-font-size + (($input-padding-y * 2) + $line-height-computed)) / 2);
|
||||
margin-left: -($icon-font-size / 2);
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
z-index: $zindex-tooltip;
|
||||
animation: rotation 1s linear infinite;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Indicator
|
||||
.file-upload-indicator {
|
||||
cursor: default;
|
||||
float: left;
|
||||
padding: map-get($spacers, 2);
|
||||
line-height: 1;
|
||||
|
||||
// Icon
|
||||
i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Default elements visibility
|
||||
//
|
||||
|
||||
// Standard upload
|
||||
.file-input-new {
|
||||
.file-preview,
|
||||
.close,
|
||||
.glyphicon-file,
|
||||
.fileinput-remove-button,
|
||||
.fileinput-upload-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Ajax upload
|
||||
.file-input-ajax-new {
|
||||
.fileinput-remove-button,
|
||||
.fileinput-upload-button,
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Other
|
||||
.kv-hidden,
|
||||
.file-caption-icon,
|
||||
.file-zoom-dialog .modal-header:before,
|
||||
.file-zoom-dialog .modal-header:after,
|
||||
.hide-content .kv-file-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// AJAX upload styling
|
||||
// ------------------------------
|
||||
|
||||
// Buttons position
|
||||
.file-footer-buttons {
|
||||
float: right;
|
||||
|
||||
// Button base
|
||||
button {
|
||||
padding: map-get($spacers, 2);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
outline: 0;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Make icon centered vertically
|
||||
i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Caption
|
||||
.file-footer-caption {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
padding: $fileinput-preview-thumb-caption-spacer;
|
||||
background-color: $card-bg;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Size information
|
||||
.file-size-info {
|
||||
samp {
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Dropzone
|
||||
//
|
||||
|
||||
// Base
|
||||
.file-drop-zone {
|
||||
border: $border-width dashed $border-color;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin: $fileinput-preview-spacer;
|
||||
padding: $fileinput-preview-spacer;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Text title
|
||||
.file-drop-zone-title {
|
||||
font-size: $h4-font-size;
|
||||
font-weight: $font-weight-light;
|
||||
padding: 5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
.kv-upload-progress {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Progress
|
||||
//
|
||||
|
||||
// Thumbnail progress
|
||||
.file-thumb-progress {
|
||||
position: absolute;
|
||||
top: -$fileinput-preview-progress-height;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
// Progress bars
|
||||
.progress,
|
||||
.progress-bar {
|
||||
height: $fileinput-preview-progress-height;
|
||||
border-radius: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// IE 10 fix
|
||||
.btn-file ::-ms-browse {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fullscreen modal
|
||||
//
|
||||
|
||||
.file-zoom-fullscreen {
|
||||
|
||||
// Base
|
||||
.modal-dialog {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Content
|
||||
.modal-content {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
// Body
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Zoom
|
||||
//
|
||||
|
||||
// Dialog
|
||||
.file-zoom-dialog {
|
||||
|
||||
// Navigate buttons
|
||||
.btn-navigate {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
color: $white;
|
||||
opacity: 0.7;
|
||||
transform: translateY(-50%);
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
display: block;
|
||||
font-size: ($icon-font-size * 2);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):focus {
|
||||
outline: none;
|
||||
box-shadow: none!important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&[disabled] {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
// Left button
|
||||
.btn-prev {
|
||||
left: -(($icon-font-size * 2) + $grid-gutter-width);
|
||||
}
|
||||
|
||||
// Right button
|
||||
.btn-next {
|
||||
right: -(($icon-font-size * 2) + $grid-gutter-width);
|
||||
}
|
||||
|
||||
// Floating buttons
|
||||
.floating-buttons {
|
||||
position: absolute;
|
||||
top: $modal-header-padding;
|
||||
right: $modal-header-padding;
|
||||
background-color: $modal-content-bg;
|
||||
}
|
||||
|
||||
// Title
|
||||
.kv-zoom-title {
|
||||
color: $text-muted;
|
||||
margin-left: map-get($spacers, 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.file-zoom-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Drag
|
||||
//
|
||||
|
||||
.file-drag-handle {
|
||||
cursor: move;
|
||||
float: left;
|
||||
line-height: 1;
|
||||
opacity: 0.6;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Center icon vertically
|
||||
i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Plupload multiple file uploader
|
||||
*
|
||||
* Styles for plupload.min.js - multi runtime single and multiple file uploader
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-plupload {
|
||||
|
||||
|
||||
// Layout
|
||||
// ------------------------------
|
||||
|
||||
// Wrapper
|
||||
.plupload_wrapper {
|
||||
background-color: $plupload-bg;
|
||||
border: $plupload-border-width $plupload-border-style $plupload-border-color;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Common icon styles
|
||||
.plupload_header:after,
|
||||
.plupload_filelist:empty:before,
|
||||
.plupload_filelist li.plupload_droptext:before,
|
||||
.plupload_file_action:after,
|
||||
.plupload_delete a:after,
|
||||
.plupload_failed a:after,
|
||||
.plupload_done a:after {
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Header (hidden by default)
|
||||
.plupload_header {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: $plupload-header-bg;
|
||||
color: $plupload-header-color;
|
||||
margin: -($plupload-border-width) -($plupload-border-width) 0 -($plupload-border-width);
|
||||
@include border-top-radius($border-radius);
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-uploader-placeholder;
|
||||
font-size: ($icon-font-size * 2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $card-spacer-x;
|
||||
margin-top: -($icon-font-size);
|
||||
}
|
||||
}
|
||||
.plupload_header_content {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
padding-left: (($card-spacer-x * 2) + ($icon-font-size * 2));
|
||||
}
|
||||
.plupload_header_title {
|
||||
font-size: $h6-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
.plupload_header_text {
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
|
||||
// Helpers
|
||||
.plupload_clear,
|
||||
.plupload_clearer {
|
||||
clear: both;
|
||||
}
|
||||
.plupload_clearer,
|
||||
.plupload_progress_bar {
|
||||
display: block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
||||
// Buttons
|
||||
// ------------------------------
|
||||
|
||||
// Buttons base
|
||||
.plupload_button {
|
||||
display: inline-block;
|
||||
border: $btn-border-width solid transparent;
|
||||
font-weight: $btn-font-weight;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
// Button spacer
|
||||
&:not(:last-child) {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Add files button
|
||||
.plupload_add {
|
||||
color: $btn-light-color;
|
||||
background-color: $btn-light-bg;
|
||||
border-color: $btn-light-border-color;
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
color: $btn-light-hover-color;
|
||||
background-color: $btn-light-hover-bg;
|
||||
border-color: $btn-light-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Start upload button
|
||||
.plupload_start {
|
||||
color: $plupload-btn-start-color;
|
||||
background-color: $plupload-btn-start-bg;
|
||||
border-color: $plupload-btn-start-border-color;
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
color: $plupload-btn-start-color;
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
// Disabled button
|
||||
a.plupload_disabled {
|
||||
cursor: default;
|
||||
opacity: $btn-disabled-opacity;
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// File list
|
||||
// ------------------------------
|
||||
|
||||
// Itself
|
||||
.plupload_filelist {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
// Scrollable area
|
||||
.plupload_scroll & {
|
||||
height: $plupload-max-height;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// List item
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $dropdown-item-padding-y $card-spacer-x;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// File info
|
||||
.plupload_file_name {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Ordering
|
||||
.plupload_file_action {
|
||||
order: 12;
|
||||
}
|
||||
.plupload_file_status {
|
||||
order: 11;
|
||||
}
|
||||
.plupload_file_size {
|
||||
order: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// Add background icon with text
|
||||
&:empty,
|
||||
li.plupload_droptext {
|
||||
background-color: transparent;
|
||||
font-size: 0;
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
content: $icon-uploader-placeholder;
|
||||
font-size: ($icon-font-size * 5);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -($spacer);
|
||||
z-index: 2;
|
||||
color: $plupload-placeholder-icon-color;
|
||||
text-indent: 0;
|
||||
font-weight: normal;
|
||||
transform: translate(-50%, -50%);
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Text label
|
||||
&:after {
|
||||
content: 'Drag files to upload';
|
||||
font-size: $h5-font-size;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: ($icon-font-size * 2.5) + $spacer;
|
||||
color: $plupload-placeholder-text-color;
|
||||
text-indent: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
&:empty:after {
|
||||
content: 'Add files to upload';
|
||||
}
|
||||
|
||||
// On small screens
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding: ($spacer / 2) 0;
|
||||
|
||||
// File size
|
||||
li {
|
||||
.plupload_file_size {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
.plupload_filelist_header {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
|
||||
// File info
|
||||
.plupload_file_name,
|
||||
.plupload_file_size,
|
||||
.plupload_file_status,
|
||||
.plupload_file_action {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// Hide on small screen
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.plupload_filelist_footer {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
|
||||
// File info
|
||||
.plupload_file_size,
|
||||
.plupload_file_status,
|
||||
.plupload_upload_status {
|
||||
padding: $btn-padding-y 0;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// On small screen
|
||||
@include media-breakpoint-down(sm) {
|
||||
text-align: center;
|
||||
|
||||
// Hide all file info
|
||||
.plupload_file_action,
|
||||
.plupload_file_status,
|
||||
.plupload_file_size {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Center progress bar
|
||||
.plupload_progress {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header and footer
|
||||
.plupload_filelist_header,
|
||||
.plupload_filelist_footer {
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// File name
|
||||
.plupload_file_name {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// File info
|
||||
.plupload_file_action {
|
||||
order: 12;
|
||||
}
|
||||
.plupload_file_status {
|
||||
order: 11;
|
||||
}
|
||||
.plupload_file_size {
|
||||
order: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Indicators
|
||||
// ------------------------------
|
||||
|
||||
// File action indicator
|
||||
.plupload_file_action {
|
||||
margin-left: map-get($spacers, 4);
|
||||
line-height: 1;
|
||||
font-size: 0;
|
||||
text-align: right;
|
||||
|
||||
// Hide all children by default
|
||||
* {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Add icon to the header and footer
|
||||
&:after {
|
||||
content: $icon-uploader-placeholder-actions;
|
||||
}
|
||||
|
||||
// Remove icons in the file list
|
||||
.plupload_filelist &:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Delete button
|
||||
.plupload_delete & {
|
||||
> a {
|
||||
color: $body-color;
|
||||
line-height: 1;
|
||||
opacity: 0.5;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Uploading indicator
|
||||
.plupload_uploading {
|
||||
background-color: $color-success-50;
|
||||
}
|
||||
|
||||
// Delete button
|
||||
.plupload_delete a:after {
|
||||
content: $icon-action-cross-sm;
|
||||
}
|
||||
|
||||
// Failed indicator
|
||||
.plupload_failed a {
|
||||
color: theme-color('danger');
|
||||
cursor: default;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-validation-error;
|
||||
}
|
||||
}
|
||||
|
||||
// Done indicator
|
||||
.plupload_done {
|
||||
color: $gray-600;
|
||||
|
||||
// Link
|
||||
a {
|
||||
color: theme-color('success');
|
||||
cursor: default;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-validation-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress indicators
|
||||
.plupload_progress,
|
||||
.plupload_upload_status {
|
||||
display: none;
|
||||
}
|
||||
.plupload_progress_container {
|
||||
background-color: rgba($black, 0.1);
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
.plupload_progress_bar {
|
||||
width: 0;
|
||||
height: 0.25rem;
|
||||
background: theme-color('success');
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// File info
|
||||
.plupload_file_size,
|
||||
.plupload_file_status,
|
||||
.plupload_progress {
|
||||
width: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # jQuery UI Interactions
|
||||
*
|
||||
* Separate styles for jQuery UI library. Component's interactions
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-jqueryui {
|
||||
|
||||
|
||||
// Misc
|
||||
// -------------------------
|
||||
|
||||
// Handles
|
||||
.ui-draggable-handle,
|
||||
.ui-sortable-handle {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
|
||||
// Sortable
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.ui-sortable {
|
||||
.ui-state-disabled {
|
||||
color: $text-muted;
|
||||
cursor: $cursor-disabled;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.sortable-placeholder {
|
||||
position: relative;
|
||||
|
||||
// Background
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: rgba($white, 0.8);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: $border-width dashed rgba($black, 0.2);
|
||||
@include size(100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card placeholder
|
||||
//
|
||||
|
||||
// Card
|
||||
.card {
|
||||
|
||||
// Placeholder below card
|
||||
+ .sortable-placeholder {
|
||||
margin-bottom: $spacer;
|
||||
|
||||
.sidebar & {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder above card
|
||||
.sortable-placeholder + & {
|
||||
margin-top: $spacer;
|
||||
|
||||
.sidebar & {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card group
|
||||
.card-group {
|
||||
> .sortable-placeholder:before {
|
||||
@include border-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sidebar placeholder
|
||||
//
|
||||
|
||||
// Base
|
||||
.sidebar {
|
||||
|
||||
// Remove horizontal borders
|
||||
.sortable-placeholder:before {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
// Dark sidebar
|
||||
&-dark {
|
||||
|
||||
// Remove horizontal borders
|
||||
.sortable-placeholder:before {
|
||||
background-color: rgba($black, 0.5);
|
||||
}
|
||||
|
||||
// Sidebar category as a helper
|
||||
.card:not([class*=bg-]):not(.fixed-top) {
|
||||
&.ui-sortable-helper {
|
||||
background-color: rgba($black, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light sidebar
|
||||
&-light {
|
||||
|
||||
// Remove horizontal borders
|
||||
.sortable-placeholder:before {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
// Sidebar category as a helper
|
||||
.card:not([class*=bg-]):not(.fixed-top) {
|
||||
&.ui-sortable-helper {
|
||||
background-color: $card-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Table placeholder
|
||||
//
|
||||
|
||||
.table {
|
||||
|
||||
// Helper
|
||||
.ui-sortable-helper {
|
||||
width: 100%;
|
||||
background-color: $table-bg;
|
||||
display: table;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.sortable-placeholder {
|
||||
margin: 0;
|
||||
|
||||
// Remove placeholder border
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Enadle absolute positioning
|
||||
&.ui-sortable {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Resizable
|
||||
// -------------------------
|
||||
|
||||
// Handle
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: 0;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
|
||||
// Icon
|
||||
&.ui-icon {
|
||||
display: inline-block;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0.375rem 0.375rem;
|
||||
border-color: transparent transparent $body-color transparent;
|
||||
}
|
||||
|
||||
// Hide if disabled
|
||||
.ui-resizable-disabled &,
|
||||
.ui-resizable-autohide & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle positions
|
||||
.ui-resizable-n {
|
||||
cursor: n-resize;
|
||||
height: 0.4375rem;
|
||||
width: 100%;
|
||||
top: -0.3125rem;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-s {
|
||||
cursor: s-resize;
|
||||
height: 0.4375rem;
|
||||
width: 100%;
|
||||
bottom: -0.3125rem;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-e {
|
||||
cursor: e-resize;
|
||||
width: 0.4375rem;
|
||||
right: -0.3125rem;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 0.4375rem;
|
||||
left: -0.3125rem;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
right: 0.0625rem;
|
||||
bottom: 0.0625rem;
|
||||
}
|
||||
.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
left: -0.3125rem;
|
||||
bottom: -0.3125rem;
|
||||
}
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
left: -0.3125rem;
|
||||
top: -0.3125rem;
|
||||
}
|
||||
.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
right: -0.3125rem;
|
||||
top: -0.3125rem;
|
||||
}
|
||||
|
||||
|
||||
// Selectable
|
||||
// -------------------------
|
||||
|
||||
// Disable default behaviour
|
||||
.ui-selectable {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
// Selectable helper
|
||||
.ui-selectable-helper {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border: $border-width dashed $body-color;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,450 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Floating action buttons
|
||||
*
|
||||
* Styles for fab.min.js - material design floating action button with menu
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-fab {
|
||||
|
||||
// Base
|
||||
.fab-menu {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
z-index: ($zindex-fixed - 1);
|
||||
transform: scale(0.85);
|
||||
|
||||
// Inside page header
|
||||
.page-header > & {
|
||||
position: absolute;
|
||||
bottom: -($fab-main-btn-size / 2);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Positions
|
||||
//
|
||||
|
||||
// Absolute
|
||||
.fab-menu-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Fixed
|
||||
.fab-menu-fixed {
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button placements
|
||||
//
|
||||
|
||||
// Top placement
|
||||
.fab-menu-top-left,
|
||||
.fab-menu-top-right, {
|
||||
|
||||
// Top spacing
|
||||
.content-wrapper > & {
|
||||
top: -($fab-main-btn-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom placement
|
||||
.fab-menu-bottom-left,
|
||||
.fab-menu-bottom-right {
|
||||
bottom: $spacer;
|
||||
transition: bottom ease-in-out $component-transition-timer;
|
||||
|
||||
// Keep space for footer
|
||||
&.reached-bottom {
|
||||
bottom: $nav-link-height + rem-calc($navbar-border-width * 2) + ($spacer * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Right placement
|
||||
.fab-menu-top-right,
|
||||
.fab-menu-bottom-right {
|
||||
right: $fab-gutter-x;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inner menu
|
||||
//
|
||||
|
||||
.fab-menu-inner {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// Menu items
|
||||
> li {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: $fab-btn-gap;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding-top: $fab-inner-btn-spacing;
|
||||
margin-top: -($fab-inner-btn-spacing);
|
||||
|
||||
// Remove border from buttons
|
||||
.btn {
|
||||
border-width: 0;
|
||||
box-shadow: $shadow-depth1;
|
||||
|
||||
// States shadow
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active {
|
||||
box-shadow: $shadow-depth2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Make buttons smaller than main one
|
||||
.btn-float {
|
||||
padding: 0;
|
||||
width: $fab-inner-btn-size;
|
||||
height: $fab-inner-btn-size;
|
||||
|
||||
// Icon spacing
|
||||
> i {
|
||||
margin: ($btn-float-padding - $fab-btn-gap);
|
||||
}
|
||||
}
|
||||
|
||||
// Keep shadow for opened dropdown toggle
|
||||
.show > .btn-float.dropdown-toggle {
|
||||
box-shadow: $shadow-depth2;
|
||||
}
|
||||
|
||||
// Left and right menus
|
||||
.dropleft,
|
||||
.dropright {
|
||||
.btn:before,
|
||||
.btn:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Badges and badge marks
|
||||
//
|
||||
|
||||
// Base
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: ($fab-inner-btn-spacing - ($fab-badge-spacer-y * 2));
|
||||
right: -($fab-badge-spacer-x);
|
||||
}
|
||||
|
||||
// Badge marks
|
||||
.badge-mark {
|
||||
top: ($fab-inner-btn-spacing - $fab-badge-spacer-y + ($badge-mark-size / 2));
|
||||
right: -($fab-badge-spacer-x - ($badge-mark-size / 2));
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Change appearance in bottom position
|
||||
//
|
||||
|
||||
.fab-menu-bottom-left &,
|
||||
.fab-menu-bottom-right & {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
padding-bottom: $fab-inner-btn-spacing;
|
||||
margin-bottom: -($fab-inner-btn-spacing);
|
||||
|
||||
// Badges
|
||||
.badge {
|
||||
top: -($fab-badge-spacer-y * 2);
|
||||
}
|
||||
|
||||
// Badge marks
|
||||
.badge-mark {
|
||||
top: ($fab-badge-spacer-y - ($badge-mark-size / 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Main button
|
||||
//
|
||||
|
||||
// Base
|
||||
.fab-menu-btn {
|
||||
z-index: ($zindex-fixed + 1);
|
||||
border-width: 0;
|
||||
box-shadow: $shadow-depth1;
|
||||
|
||||
// Float button overrides
|
||||
&.btn-float {
|
||||
padding: ($fab-main-btn-size / 2);
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
margin-left: -($icon-font-size / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Button shadow
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:not(:disabled):not(.disabled):active:focus,
|
||||
.fab-menu[data-fab-toggle="hover"]:hover &,
|
||||
.fab-menu[data-fab-state="open"] & {
|
||||
box-shadow: $shadow-depth2;
|
||||
}
|
||||
|
||||
// Show shadow in disabled state
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
box-shadow: $shadow-depth1;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation
|
||||
.fab-icon-close,
|
||||
.fab-icon-open {
|
||||
transform: rotate(360deg);
|
||||
transition: all ease-in-out ($component-transition-timer * 2);
|
||||
|
||||
// Reverse rotation if active
|
||||
.fab-menu[data-fab-toggle="hover"]:hover &,
|
||||
.fab-menu[data-fab-state="open"] & {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Open icon
|
||||
.fab-icon-open {
|
||||
.fab-menu[data-fab-toggle="hover"]:hover &,
|
||||
.fab-menu[data-fab-state="open"] & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Close icon
|
||||
.fab-icon-close {
|
||||
opacity: 0;
|
||||
|
||||
// Display if active
|
||||
.fab-menu[data-fab-toggle="hover"]:hover &,
|
||||
.fab-menu[data-fab-state="open"] & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inner menu animation
|
||||
//
|
||||
|
||||
// Base
|
||||
.fab-menu {
|
||||
|
||||
// Hide items
|
||||
.fab-menu-inner > li {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all ease-in-out ($component-transition-timer * 2);
|
||||
|
||||
// Items number
|
||||
&:nth-child(1) {
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
// Show items
|
||||
&[data-fab-toggle="hover"]:hover,
|
||||
&[data-fab-state="open"] {
|
||||
.fab-menu-inner > li {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Top position
|
||||
.fab-menu-top,
|
||||
.fab-menu-top-left,
|
||||
.fab-menu-top-right {
|
||||
&[data-fab-toggle="hover"]:hover,
|
||||
&[data-fab-state="open"] {
|
||||
.fab-menu-inner > li {
|
||||
&:nth-child(1) {
|
||||
top: ($fab-inner-btn-size + $fab-inner-btn-spacing) + ($fab-btn-gap * 2);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: (($fab-inner-btn-size + $fab-inner-btn-spacing) * 2) + ($fab-btn-gap * 2);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
top: (($fab-inner-btn-size + $fab-inner-btn-spacing) * 3) + ($fab-btn-gap * 2);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
top: (($fab-inner-btn-size + $fab-inner-btn-spacing) * 4) + ($fab-btn-gap * 2);
|
||||
}
|
||||
&:nth-child(5) {
|
||||
top: (($fab-inner-btn-size + $fab-inner-btn-spacing) * 5) + ($fab-btn-gap * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom position
|
||||
.fab-menu-bottom,
|
||||
.fab-menu-bottom-left,
|
||||
.fab-menu-bottom-right {
|
||||
&[data-fab-toggle="hover"]:hover,
|
||||
&[data-fab-state="open"] {
|
||||
.fab-menu-inner > li {
|
||||
&:nth-child(1) {
|
||||
top: -($fab-inner-btn-size + $fab-inner-btn-spacing) + ($fab-btn-gap * 2);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: -(($fab-inner-btn-size + $fab-inner-btn-spacing) * 2) + ($fab-btn-gap * 2);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
top: -(($fab-inner-btn-size + $fab-inner-btn-spacing) * 3) + ($fab-btn-gap * 2);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
top: -(($fab-inner-btn-size + $fab-inner-btn-spacing) * 4) + ($fab-btn-gap * 2);
|
||||
}
|
||||
&:nth-child(5) {
|
||||
top: -(($fab-inner-btn-size + $fab-inner-btn-spacing) * 5) + ($fab-btn-gap * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Item labels
|
||||
//
|
||||
|
||||
.fab-menu-inner div[data-fab-label] {
|
||||
|
||||
// Base
|
||||
&:after {
|
||||
content: attr(data-fab-label);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -($tooltip-padding-y);
|
||||
right: ($fab-btn-gap + $fab-inner-btn-size + $fab-gutter-x);
|
||||
color: $tooltip-color;
|
||||
background-color: $tooltip-bg;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
box-shadow: $shadow-depth1;
|
||||
transition: all ease-in-out ($component-transition-timer * 2);
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Reposition them in bottom position
|
||||
.fab-menu-bottom-left &,
|
||||
.fab-menu-bottom-right & {
|
||||
margin-top: -($tooltip-padding-y + $fab-inner-btn-spacing);
|
||||
}
|
||||
}
|
||||
|
||||
// Placement
|
||||
.fab-menu-top-left &:after,
|
||||
.fab-menu-bottom-left &:after,
|
||||
&.fab-label-right:after {
|
||||
right: auto;
|
||||
left: ($fab-btn-gap + $fab-inner-btn-size + $fab-gutter-x);
|
||||
}
|
||||
|
||||
// Display labels
|
||||
.fab-menu[data-fab-toggle="hover"] &:hover:after,
|
||||
.fab-menu[data-fab-state="open"] &:hover:after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Light label
|
||||
&.fab-label-light:after {
|
||||
background-color: $fab-label-light-bg;
|
||||
color: $fab-label-light-color;
|
||||
}
|
||||
|
||||
// Always visible
|
||||
&.fab-label-visible:after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Layout specific additions
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// # Layout 5
|
||||
//
|
||||
|
||||
@if $layout == 'layout_5' {
|
||||
|
||||
// Left placement
|
||||
.fab-menu-top-left,
|
||||
.fab-menu-bottom-left {
|
||||
left: $fab-gutter-x;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
left: ((($page-container-padding-x / 2) - $fab-main-btn-size) / 2) + $content-container-padding-x;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
left: (($page-container-padding-x - $fab-main-btn-size) / 2) + $content-container-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Right placement
|
||||
.fab-menu-top-right,
|
||||
.fab-menu-bottom-right {
|
||||
@include media-breakpoint-up(md) {
|
||||
right: ((($page-container-padding-x / 2) - $fab-main-btn-size) / 2) + $content-container-padding-x;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
right: (($page-container-padding-x - $fab-main-btn-size) / 2) + $content-container-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,342 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fancybox lightbox
|
||||
*
|
||||
* Styles for fancybox.min.js - Mac-style "lightbox" plugin
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-fancybox {
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.fancybox-wrap,
|
||||
.fancybox-skin,
|
||||
.fancybox-outer,
|
||||
.fancybox-inner,
|
||||
.fancybox-image,
|
||||
.fancybox-wrap iframe,
|
||||
.fancybox-wrap object,
|
||||
.fancybox-nav,
|
||||
.fancybox-nav span,
|
||||
.fancybox-tmp {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
.fancybox-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
z-index: 8020;
|
||||
}
|
||||
|
||||
// Skin
|
||||
.fancybox-skin {
|
||||
position: relative;
|
||||
background-color: $modal-content-bg;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Opened lightbox
|
||||
.fancybox-opened {
|
||||
z-index: 8030;
|
||||
|
||||
.fancybox-skin {
|
||||
@include box-shadow($modal-content-box-shadow-xs);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Content
|
||||
// ------------------------------
|
||||
|
||||
// Image containers
|
||||
.fancybox-outer,
|
||||
.fancybox-inner {
|
||||
position: relative;
|
||||
}
|
||||
.fancybox-inner {
|
||||
overflow: hidden;
|
||||
|
||||
.fancybox-type-iframe & {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
.fancybox-image,
|
||||
.fancybox-iframe {
|
||||
display: block;
|
||||
@include size(100%);
|
||||
}
|
||||
.fancybox-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
// Loading indicator
|
||||
#fancybox-loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 8060;
|
||||
color: $white;
|
||||
opacity: 0.8;
|
||||
|
||||
// Icon container
|
||||
div {
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-loading-spinner;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
margin-left: -($icon-font-size / 2);
|
||||
display: block;
|
||||
line-height: 1;
|
||||
animation: rotation 1s ease infinite;
|
||||
@include ll-font-smoothing();
|
||||
@include size($icon-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close button
|
||||
.fancybox-close {
|
||||
position: absolute;
|
||||
right: $fancybox-nav-spacer-x;
|
||||
top: $fancybox-nav-spacer-y;
|
||||
padding: $fancybox-nav-padding;
|
||||
z-index: 8061;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
color: $fancybox-nav-color;
|
||||
background-color: $fancybox-nav-bg;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $fancybox-nav-hover-bg;
|
||||
color: $fancybox-nav-hover-color;
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-action-cross;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
display: block;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
.fancybox-error {
|
||||
color: theme-color("danger");
|
||||
font-weight: $font-weight-semibold;
|
||||
margin: 0;
|
||||
padding: $modal-inner-padding;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Title
|
||||
//
|
||||
|
||||
// Helper
|
||||
.fancybox-title {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 8050;
|
||||
|
||||
.fancybox-opened & {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrappers
|
||||
.fancybox-title-float-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
margin-bottom: -(($fancybox-caption-padding-y * 2) + $line-height-computed);
|
||||
z-index: 8050;
|
||||
text-align: center;
|
||||
@include border-bottom-radius($border-radius);
|
||||
|
||||
.child {
|
||||
display: inline-block;
|
||||
margin-right: -100%;
|
||||
padding: $fancybox-caption-padding-y $fancybox-caption-padding-x;
|
||||
background-color: $fancybox-caption-bg;
|
||||
color: $fancybox-caption-color;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.fancybox-title-outside-wrap {
|
||||
text-align: center;
|
||||
margin-top: ($spacer / 2);
|
||||
color: $fancybox-caption-color;
|
||||
}
|
||||
.fancybox-title-inside-wrap {
|
||||
padding: $fancybox-caption-padding-y $fancybox-caption-padding-x;
|
||||
}
|
||||
.fancybox-title-over-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $fancybox-caption-color;
|
||||
padding: $fancybox-caption-padding-y $fancybox-caption-padding-x;
|
||||
background-color: $fancybox-caption-bg;
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.fancybox-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
z-index: 8040;
|
||||
|
||||
// Icons
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(($icon-font-size / 2) + $fancybox-nav-padding);
|
||||
cursor: pointer;
|
||||
padding: $fancybox-nav-padding;
|
||||
color: $fancybox-nav-color;
|
||||
background-color: $fancybox-nav-bg;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
min-width: ($icon-font-size + ($fancybox-nav-padding * 2));
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 8040;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Arrow icons
|
||||
&:after {
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $fancybox-nav-hover-bg;
|
||||
color: $fancybox-nav-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Show on hover
|
||||
&:hover span {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous button
|
||||
.fancybox-prev {
|
||||
left: 0;
|
||||
|
||||
// Nav container
|
||||
span {
|
||||
left: $fancybox-nav-spacer-x;
|
||||
|
||||
// Arrow
|
||||
&:after {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-nav-prev;
|
||||
}
|
||||
@else {
|
||||
content: $icon-nav-next;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
.fancybox-next {
|
||||
right: 0;
|
||||
|
||||
// Nav container
|
||||
span {
|
||||
right: $fancybox-nav-spacer-x;
|
||||
|
||||
// Arrow
|
||||
&:after {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-nav-next;
|
||||
}
|
||||
@else {
|
||||
content: $icon-nav-prev;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Overlays
|
||||
// ------------------------------
|
||||
|
||||
// Helper
|
||||
.fancybox-lock {
|
||||
overflow: visible !important;
|
||||
width: auto;
|
||||
|
||||
.fancybox-overlay {
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
.fancybox-lock-test {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
// Overlays
|
||||
.fancybox-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
z-index: 8010;
|
||||
background-color: rgba($black, 0.8);
|
||||
}
|
||||
.fancybox-overlay-fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,516 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fancytree
|
||||
*
|
||||
* Styles for fancytree_all.min.js - tree plugin for jQuery
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-fancytree {
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.fancytree-container {
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
||||
// Remove outline on focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// List
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: $icon-font-size;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.ui-fancytree-disabled & {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.ui-fancytree-disabled {
|
||||
.fancytree-container,
|
||||
.fancytree-title,
|
||||
.fancytree-expander {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
|
||||
.fancytree-treefocus .fancytree-selected .fancytree-title {
|
||||
background-color: $fancytree-node-selected-bg;
|
||||
color: $fancytree-node-selected-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Give icons common base
|
||||
.fancytree-expander:after,
|
||||
.fancytree-icon:after,
|
||||
.fancytree-checkbox:after,
|
||||
.fancytree-drag-helper-img:after,
|
||||
.fancytree-drop-before:after,
|
||||
.fancytree-drop-after:after,
|
||||
.fancytree-loading .fancytree-expander:after,
|
||||
.fancytree-statusnode-wait .fancytree-icon:after {
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
vertical-align: top;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Common icon definitions
|
||||
//
|
||||
|
||||
// Base
|
||||
.fancytree-icon,
|
||||
.fancytree-custom-icon,
|
||||
.fancytree-expander {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: $fancytree-node-padding-x;
|
||||
margin-top: ($line-height-computed + ($fancytree-node-padding-y * 2) - $icon-font-size) / 2;
|
||||
@include size($icon-font-size);
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
.fancytree-checkbox {
|
||||
vertical-align: top;
|
||||
margin-top: ($line-height-computed + ($fancytree-node-padding-y * 2) - $checkbox-size) / 2;
|
||||
margin-left: $fancytree-node-padding-x;
|
||||
}
|
||||
|
||||
// Used by 'icon' node option
|
||||
img.fancytree-icon {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Expander icon
|
||||
//
|
||||
// Prefix: fancytree-exp-
|
||||
// 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
// 2nd character (optional): 'd': lazy (Delayed)
|
||||
// 3rd character (optional): 'l': Last sibling
|
||||
// ----------------------------------------
|
||||
|
||||
// Icons
|
||||
.fancytree-expander {
|
||||
cursor: pointer;
|
||||
|
||||
.fancytree-exp-c &:after {
|
||||
content: $icon-indicator-collapse;
|
||||
}
|
||||
.fancytree-exp-cl &:after {
|
||||
content: $icon-indicator-collapse;
|
||||
}
|
||||
.fancytree-exp-cd &:after,
|
||||
.fancytree-exp-cdl &:after {
|
||||
content: $icon-indicator-collapse;
|
||||
}
|
||||
.fancytree-exp-e &:after,
|
||||
.fancytree-exp-ed &:after {
|
||||
content: $icon-indicator-expand;
|
||||
}
|
||||
.fancytree-exp-el &:after,
|
||||
.fancytree-exp-edl &:after {
|
||||
content: $icon-indicator-expand;
|
||||
}
|
||||
}
|
||||
|
||||
// Status node icons
|
||||
.fancytree-statusnode-error .fancytree-icon:after {
|
||||
content: $icon-validation-error;
|
||||
}
|
||||
|
||||
// Loading icon
|
||||
.fancytree-loading .fancytree-expander,
|
||||
.fancytree-statusnode-wait .fancytree-icon {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
@include size($icon-font-size);
|
||||
|
||||
&:after {
|
||||
content: $icon-checkbox-tick;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// # Node type icon
|
||||
//
|
||||
// Prefix: fancytree-ico-
|
||||
// 1st character: 'e': expanded, 'c': collapsed,
|
||||
// 2nd character (optional): 'f': folder
|
||||
// ----------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Documents
|
||||
//
|
||||
|
||||
// Icons
|
||||
.fancytree-ico-c,
|
||||
.fancytree-ico-e {
|
||||
.fancytree-icon:after {
|
||||
content: $icon-fancytree-file;
|
||||
}
|
||||
}
|
||||
|
||||
// With children
|
||||
.fancytree-has-children {
|
||||
&.fancytree-ico-c .fancytree-icon:after {
|
||||
content: $icon-fancytree-sub-collapse;
|
||||
}
|
||||
|
||||
&.fancytree-ico-e .fancytree-icon:after {
|
||||
content: $icon-fancytree-sub-expand;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Folders
|
||||
//
|
||||
|
||||
// Icons
|
||||
.fancytree-ico-cf,
|
||||
.fancytree-ico-ef {
|
||||
.fancytree-icon:after {
|
||||
content: $icon-fancytree-folder;
|
||||
}
|
||||
}
|
||||
|
||||
// With children
|
||||
.fancytree-has-children {
|
||||
&.fancytree-ico-cf .fancytree-icon:after {
|
||||
content: $icon-fancytree-folder-collapse;
|
||||
}
|
||||
|
||||
&.fancytree-ico-ef .fancytree-icon:after {
|
||||
content: $icon-fancytree-folder-expand;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Checkbox icon
|
||||
//
|
||||
|
||||
.fancytree-checkbox {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
border: $checkbox-border-width solid $checkbox-color;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@include border-radius($border-radius-sm);
|
||||
|
||||
// Checker base
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Grey square in hierarchical select
|
||||
.fancytree-partsel &:after,
|
||||
.fancytree-radio .fancytree-selected &:after {
|
||||
content: "";
|
||||
top: (($checkbox-size / 2) - $checkbox-border-width - (($checkbox-size / 2) / 2));
|
||||
left: (($checkbox-size / 2) - $checkbox-border-width - (($checkbox-size / 2) / 2));
|
||||
border: (($checkbox-size / 2) / 2) solid;
|
||||
border-color: inherit;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Add icons
|
||||
.fancytree-selected &:after {
|
||||
content: $icon-checkbox-tick;
|
||||
border: 0;
|
||||
top: ($checkbox-size - $icon-font-size - ($checkbox-border-width * 2)) / 2;
|
||||
left: ($checkbox-size - $icon-font-size - ($checkbox-border-width * 2)) / 2;
|
||||
}
|
||||
|
||||
// Radio (single select imitation)
|
||||
.fancytree-radio &,
|
||||
.fancytree-radio &:after {
|
||||
@include border-radius($border-radius-circle);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Other styles
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// Drag'n'drop support
|
||||
//
|
||||
|
||||
// Helper
|
||||
.fancytree-drag-helper {
|
||||
.fancytree-title {
|
||||
padding-right: ($fancytree-node-padding-x * 2) + $icon-font-size;
|
||||
border: $card-border-width solid $border-color;
|
||||
background-color: $white;
|
||||
opacity: 0.8;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Drag helper image
|
||||
.fancytree-drag-helper-img {
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
right: $fancytree-node-padding-x;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// If accept
|
||||
.fancytree-drop-accept &:after {
|
||||
content: $icon-validation-success;
|
||||
color: $color-success-500;
|
||||
}
|
||||
|
||||
// If reject
|
||||
.fancytree-drop-reject &:after {
|
||||
content: $icon-validation-error;
|
||||
color: $color-danger-500;
|
||||
}
|
||||
}
|
||||
|
||||
// Marker icon
|
||||
#fancytree-drop-marker {
|
||||
&.fancytree-drop-before,
|
||||
&.fancytree-drop-after {
|
||||
width: 15rem;
|
||||
border-top: $border-width solid $gray-600;
|
||||
position: absolute !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Source node while dragging
|
||||
.fancytree-drag-source {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// Target node while dragging cursor is over it
|
||||
.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: theme-color("primary") !important;
|
||||
color: $white !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Styles specific to this skin
|
||||
//
|
||||
|
||||
// Node
|
||||
.fancytree-node {
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
// Title
|
||||
.fancytree-title {
|
||||
border: 0;
|
||||
padding: $fancytree-node-padding-y $fancytree-node-padding-x;
|
||||
margin-left: $element-spacer-x;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Editable node input
|
||||
> input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Selected title
|
||||
.fancytree-selected &,
|
||||
.fancytree-active & {
|
||||
background-color: $fancytree-node-selected-bg;
|
||||
color: $fancytree-node-selected-color;
|
||||
}
|
||||
|
||||
// Title when focused
|
||||
.fancytree-treefocus .fancytree-selected & {
|
||||
background-color: $fancytree-node-active-bg;
|
||||
color: $fancytree-node-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Inside dark sidebar
|
||||
.sidebar:not(.sidebar-light) {
|
||||
.fancytree-selected .fancytree-title,
|
||||
.fancytree-active .fancytree-title {
|
||||
background-color: rgba($white, 0.2);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.fancytree-treefocus .fancytree-selected .fancytree-title {
|
||||
background-color: $white;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Table extension
|
||||
//
|
||||
|
||||
.fancytree-ext-table {
|
||||
|
||||
// Node
|
||||
.fancytree-node {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Title
|
||||
.fancytree-title {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Container
|
||||
&.fancytree-container {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// Icons
|
||||
.fancytree-expander,
|
||||
.fancytree-icon,
|
||||
.fancytree-custom-icon {
|
||||
margin-top: (($icon-font-size - $font-size-base) / 2);
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
.fancytree-checkbox {
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Additional checkboxes
|
||||
.uniform-checker {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Rows
|
||||
tbody tr {
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Checkbox cell
|
||||
td:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Title
|
||||
.fancytree-title {
|
||||
background-color: transparent;
|
||||
color: inherit !important;
|
||||
padding: 0;
|
||||
@include transition(none);
|
||||
}
|
||||
|
||||
// Focused items
|
||||
&.fancytree-focused,
|
||||
&.fancytree-active {
|
||||
background-color: $table-accent-bg;
|
||||
}
|
||||
|
||||
// Selected items
|
||||
&.fancytree-selected {
|
||||
background-color: $fancytree-node-active-bg;
|
||||
color: $fancytree-node-active-color;
|
||||
|
||||
// Checkbox
|
||||
.fancytree-checkbox,
|
||||
.uniform-checker span {
|
||||
color: $fancytree-node-active-color;
|
||||
border-color: $fancytree-node-active-color;
|
||||
}
|
||||
|
||||
// Title bg override
|
||||
.fancytree-title {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Focused and selected
|
||||
.fancytree-treefocus &.fancytree-selected {
|
||||
.fancytree-title {
|
||||
@include transition(color ease-in-out $component-transition-timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Child Counter extension
|
||||
//
|
||||
|
||||
.fancytree-ext-childcounter .fancytree-childcounter {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: $fancytree-node-padding-y;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Helpers
|
||||
//
|
||||
|
||||
// Hide original elements
|
||||
.fancytree-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Indeterminate state
|
||||
.fancytree-helper-indeterminate-cb {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.fancytree-helper-disabled {
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
// Spinner
|
||||
.fancytree-helper-spin {
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,392 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Image cropper
|
||||
*
|
||||
* Styles for cropper.min.js - a simple jQuery image cropping plugin
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-image-cropper {
|
||||
|
||||
|
||||
//
|
||||
// Demo
|
||||
//
|
||||
|
||||
// Grey demo container
|
||||
.image-cropper-container {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
|
||||
}
|
||||
|
||||
// Demo previews
|
||||
.eg-preview {
|
||||
|
||||
// Preview container
|
||||
.preview {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
// Large
|
||||
.preview-lg {
|
||||
@include size(150px);
|
||||
}
|
||||
|
||||
// Base
|
||||
.preview-md {
|
||||
@include size(120px);
|
||||
}
|
||||
|
||||
// Small
|
||||
.preview-sm {
|
||||
@include size(90px);
|
||||
}
|
||||
|
||||
// Mini
|
||||
.preview-xs {
|
||||
@include size(60px);
|
||||
}
|
||||
|
||||
// Micro
|
||||
.preview-xxs {
|
||||
@include size(40px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Core
|
||||
//
|
||||
|
||||
// Main container
|
||||
.cropper-container {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr !important;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
touch-action: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
|
||||
// Image
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0 !important;
|
||||
max-width: none !important;
|
||||
height: 100%;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
image-orientation: 0deg !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
.cropper-wrap-box,
|
||||
.cropper-canvas,
|
||||
.cropper-drag-box,
|
||||
.cropper-crop-box,
|
||||
.cropper-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Wrap box
|
||||
.cropper-wrap-box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Drag box
|
||||
.cropper-drag-box {
|
||||
background-color: $white;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Modal
|
||||
.cropper-modal {
|
||||
background-color: $modal-backdrop-bg;
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
|
||||
// View box
|
||||
.cropper-view-box {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@include size(100%);
|
||||
}
|
||||
|
||||
// Dashed cropper
|
||||
.cropper-dashed {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border: 0 dashed $cropper-grid-color;
|
||||
opacity: 0.5;
|
||||
|
||||
// Horizontal
|
||||
&.dashed-h {
|
||||
top: 33.33333%;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 33.33333%;
|
||||
border-top-width: $cropper-grid-size;
|
||||
border-bottom-width: $cropper-grid-size;
|
||||
}
|
||||
|
||||
// Vertical
|
||||
&.dashed-v {
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 33.33333%;
|
||||
width: 33.33333%;
|
||||
height: 100%;
|
||||
border-right-width: $cropper-grid-size;
|
||||
border-left-width: $cropper-grid-size;
|
||||
}
|
||||
}
|
||||
|
||||
// Center cropper
|
||||
.cropper-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
/*rtl:ignore*/
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0.75;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
// Lines
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: $cropper-grid-color;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: -(($cropper-grid-center-size - $cropper-grid-size) / 2);
|
||||
width: $cropper-grid-center-size;
|
||||
height: $cropper-grid-size;
|
||||
}
|
||||
&:after {
|
||||
top: -(($cropper-grid-center-size - $cropper-grid-size) / 2);
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
width: $cropper-grid-size;
|
||||
height: $cropper-grid-center-size;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Cropper area
|
||||
//
|
||||
|
||||
// Common
|
||||
.cropper-face,
|
||||
.cropper-line,
|
||||
.cropper-point {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
// Main area
|
||||
.cropper-face {
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
// Lines
|
||||
.cropper-line {
|
||||
background-color: $cropper-resizer-color;
|
||||
|
||||
// Right
|
||||
&.line-e {
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
right: -($cropper-resizer-size / 2);
|
||||
width: $cropper-resizer-size;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
// Top
|
||||
&.line-n {
|
||||
top: -($cropper-resizer-size / 2);
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
height: $cropper-resizer-size;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
// Left
|
||||
&.line-w {
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: -($cropper-resizer-size / 2);
|
||||
width: $cropper-resizer-size;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&.line-s {
|
||||
bottom: -($cropper-resizer-size / 2);
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
height: $cropper-resizer-size;
|
||||
cursor: s-resize;
|
||||
}
|
||||
}
|
||||
|
||||
// Points
|
||||
.cropper-point {
|
||||
background-color: $cropper-resizer-color;
|
||||
opacity: 0.75;
|
||||
@include size($cropper-resizer-size);
|
||||
|
||||
&.point-e {
|
||||
top: 50%;
|
||||
/*rtl:ignore*/
|
||||
right: -($cropper-resizer-size / 2);
|
||||
margin-top: -($cropper-resizer-size / 2);
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
&.point-n {
|
||||
top: -($cropper-resizer-size / 2);
|
||||
/*rtl:ignore*/
|
||||
left: 50%;
|
||||
margin-left: -($cropper-resizer-size / 2);
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
&.point-w {
|
||||
top: 50%;
|
||||
/*rtl:ignore*/
|
||||
left: -($cropper-resizer-size / 2);
|
||||
margin-top: -($cropper-resizer-size / 2);
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
&.point-s {
|
||||
bottom: -($cropper-resizer-size / 2);
|
||||
/*rtl:ignore*/
|
||||
left: 50%;
|
||||
margin-left: -($cropper-resizer-size / 2);
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
&.point-ne {
|
||||
top: -($cropper-resizer-size / 2);
|
||||
/*rtl:ignore*/
|
||||
right: -($cropper-resizer-size / 2);
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
&.point-nw {
|
||||
top: -($cropper-resizer-size / 2);
|
||||
/*rtl:ignore*/
|
||||
left: -($cropper-resizer-size / 2);
|
||||
cursor: nw-resize;
|
||||
}
|
||||
|
||||
&.point-sw {
|
||||
bottom: -($cropper-resizer-size / 2);
|
||||
/*rtl:ignore*/
|
||||
left: -($cropper-resizer-size / 2);
|
||||
cursor: sw-resize;
|
||||
}
|
||||
|
||||
&.point-se {
|
||||
/*rtl:ignore*/
|
||||
right: -($cropper-resizer-size / 2);
|
||||
bottom: -($cropper-resizer-size / 2);
|
||||
cursor: se-resize;
|
||||
opacity: 1;
|
||||
@include size($cropper-resizer-size);
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
/*rtl:ignore*/
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
display: block;
|
||||
background-color: $cropper-resizer-color;
|
||||
opacity: 0;
|
||||
@include size(200%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
// Background
|
||||
.cropper-bg {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
|
||||
}
|
||||
|
||||
// Invisible elements
|
||||
.cropper-invisible {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Hidden elements
|
||||
.cropper-hide {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.cropper-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Disabled elements
|
||||
.cropper-disabled {
|
||||
.cropper-drag-box,
|
||||
.cropper-face,
|
||||
.cropper-line,
|
||||
.cropper-point {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Cursors
|
||||
//
|
||||
|
||||
// Move
|
||||
.cropper-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
// Crop
|
||||
.cropper-crop {
|
||||
cursor: crosshair;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Ladda progress buttons
|
||||
*
|
||||
* Styles for ladda.min.js - buttons with built-in loading indicators
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-ladda {
|
||||
|
||||
// Common styles
|
||||
.btn-ladda {
|
||||
&,
|
||||
.ladda-spinner,
|
||||
.ladda-label {
|
||||
@include transition(all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s);
|
||||
}
|
||||
|
||||
// Spinner
|
||||
.ladda-spinner {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Label
|
||||
.ladda-label {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
.ladda-progress {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba($black, 0.2);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
@include transition(all linear 0.3s);
|
||||
}
|
||||
&[data-loading] .ladda-progress{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Zoom animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Common
|
||||
&[data-style=zoom-in],
|
||||
&[data-style=zoom-out] {
|
||||
overflow: hidden;
|
||||
|
||||
&,
|
||||
.ladda-spinner,
|
||||
.ladda-label {
|
||||
@include transition(0.3s ease all);
|
||||
}
|
||||
|
||||
// Label
|
||||
.ladda-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Spinner
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
// Loading
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom in
|
||||
&[data-style=zoom-in] {
|
||||
.ladda-spinner {
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
transform: scale(2.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom out
|
||||
&[data-style=zoom-out] {
|
||||
.ladda-spinner {
|
||||
transform: scale(2.5);
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Expand animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Left
|
||||
&[data-style=expand-left] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-left: 35px;
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
&[data-style=expand-right] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-right: 35px;
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Up
|
||||
&[data-style=expand-up] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
top: -16px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
padding-top: 40px;
|
||||
|
||||
.ladda-spinner {
|
||||
top: 12px;
|
||||
margin-top: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Down
|
||||
&[data-style=expand-down] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
top: 44px;
|
||||
left: 50%;
|
||||
}
|
||||
&[data-loading] {
|
||||
padding-bottom: 40px;
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Slide animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
|
||||
// Left
|
||||
&[data-style=slide-left] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
left: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
right: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
&[data-style=slide-right] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
right: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
right: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Up
|
||||
&[data-style=slide-up] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
top: -16px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 16px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Down
|
||||
&[data-style=slide-down] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-label {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: -100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
top: 16px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
top: 16px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fade animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
&[data-style=fade] {
|
||||
overflow: hidden;
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
.ladda-label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Radius animation
|
||||
//
|
||||
|
||||
.btn-ladda {
|
||||
&[data-style=radius] {
|
||||
overflow: hidden;
|
||||
|
||||
@include transition(all ease-in-out 0.5s);
|
||||
|
||||
.ladda-spinner {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&[data-loading] {
|
||||
@include border-radius($border-radius-round);
|
||||
|
||||
.ladda-label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ladda-spinner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # jGrowl notifications
|
||||
*
|
||||
* Styles for jgrowl.min.js - an unobtrusive notification system for web applications
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-jgrowl {
|
||||
|
||||
// Base
|
||||
.jGrowl {
|
||||
z-index: $zindex-tooltip;
|
||||
position: absolute;
|
||||
|
||||
// Document popups have fixed position
|
||||
body > & {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Positions
|
||||
//
|
||||
|
||||
// Top
|
||||
&.top-left {
|
||||
left: $notification-gutter-x;
|
||||
top: $notification-gutter-y;
|
||||
}
|
||||
&.top-center {
|
||||
left: 50%;
|
||||
top: $notification-gutter-y;
|
||||
margin-left: -($notification-width / 2);
|
||||
}
|
||||
&.top-right {
|
||||
right: $notification-gutter-x;
|
||||
top: $notification-gutter-y;
|
||||
}
|
||||
|
||||
// Center
|
||||
&.center {
|
||||
top: 40%;
|
||||
width: $notification-width;
|
||||
left: 50%;
|
||||
margin-left: -($notification-width / 2);
|
||||
margin-top: -($alert-padding-x + ($line-height-computed / 2));
|
||||
|
||||
// Center the content
|
||||
.jGrowl-notification,
|
||||
.jGrowl-closer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&.bottom-left {
|
||||
left: $notification-gutter-x;
|
||||
bottom: $notification-gutter-y;
|
||||
}
|
||||
&.bottom-center {
|
||||
left: 50%;
|
||||
bottom: $notification-gutter-y;
|
||||
margin-left: -($notification-width / 2);
|
||||
}
|
||||
&.bottom-right {
|
||||
right: $notification-gutter-x;
|
||||
bottom: $notification-gutter-y;
|
||||
}
|
||||
|
||||
// Hide on print
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Notification styles
|
||||
.jGrowl-notification {
|
||||
margin-bottom: ($notification-gutter-y / 2);
|
||||
width: $notification-width;
|
||||
text-align: left;
|
||||
display: none;
|
||||
@include box-shadow($notification-box-shadow);
|
||||
|
||||
// Header
|
||||
.jGrowl-header {
|
||||
font-size: $h6-font-size;
|
||||
margin-bottom: map-get($spacers, 1);
|
||||
|
||||
// Remove spacing if no header
|
||||
&:empty {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Close button
|
||||
.jGrowl-close {
|
||||
font-weight: $close-font-weight;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: $close-font-size;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
float: right;
|
||||
color: inherit;
|
||||
outline: 0;
|
||||
margin-left: $element-spacer-x;
|
||||
opacity: 0.75;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// "Close all" closer
|
||||
.jGrowl-closer {
|
||||
padding: map-get($spacers, 1) 0;
|
||||
cursor: pointer;
|
||||
margin-top: map-get($spacers, 1);
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
width: $notification-width;
|
||||
border: $border-width solid $border-color;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,372 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Noty notifications
|
||||
*
|
||||
* Styles for noty.min.js - A dependency-free notification library
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-noty {
|
||||
|
||||
// Base
|
||||
.noty_bar {
|
||||
position: relative;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transform: translate(0, 0) scale(1.0, 1.0);
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
@include box-shadow($notification-box-shadow);
|
||||
}
|
||||
|
||||
// Body
|
||||
.noty_body {
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
|
||||
// Increase right padding if alert has close button
|
||||
.noty_close_with_button & {
|
||||
padding-right: ($alert-padding-x * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons area
|
||||
.noty_buttons {
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
padding-top: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Positioning mixin
|
||||
.noty_layout_mixin {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: $zindex-modal;
|
||||
transform: translateZ(0) scale(1.0, 1.0);
|
||||
filter: blur(0);
|
||||
backface-visibility: hidden;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Top position
|
||||
//
|
||||
|
||||
// Full width
|
||||
#noty_layout__top {
|
||||
@extend .noty_layout_mixin;
|
||||
top: 0;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
|
||||
// Add more spacing to the first notification
|
||||
.noty_bar:first-child {
|
||||
margin-top: $notification-gutter-y;
|
||||
}
|
||||
}
|
||||
|
||||
// Left
|
||||
#noty_layout__topLeft {
|
||||
@extend .noty_layout_mixin;
|
||||
top: $notification-gutter-y;
|
||||
left: $notification-gutter-x;
|
||||
width: $notification-width;
|
||||
}
|
||||
|
||||
// Center
|
||||
#noty_layout__topCenter {
|
||||
@extend .noty_layout_mixin;
|
||||
top: 5%;
|
||||
left: 50%;
|
||||
width: $notification-width;
|
||||
transform: translate(-50%) translateZ(0) scale(1.0, 1.0);
|
||||
}
|
||||
|
||||
// Right
|
||||
#noty_layout__topRight {
|
||||
@extend .noty_layout_mixin;
|
||||
top: $notification-gutter-y;
|
||||
right: $notification-gutter-x;
|
||||
width: $notification-width;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Middle position
|
||||
//
|
||||
|
||||
// Center
|
||||
#noty_layout__center {
|
||||
@extend .noty_layout_mixin;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $notification-width;
|
||||
transform: translate(-50%, -50%) translateZ(0) scale(1.0, 1.0);
|
||||
}
|
||||
|
||||
// Left
|
||||
#noty_layout__centerLeft {
|
||||
@extend .noty_layout_mixin;
|
||||
top: 50%;
|
||||
left: $notification-gutter-x;
|
||||
width: $notification-width;
|
||||
transform: translate(0, -50%) translateZ(0) scale(1.0, 1.0);
|
||||
}
|
||||
|
||||
// Right
|
||||
#noty_layout__centerRight {
|
||||
@extend .noty_layout_mixin;
|
||||
top: 50%;
|
||||
right: $notification-gutter-x;
|
||||
width: $notification-width;
|
||||
transform: translate(0, -50%) translateZ(0) scale(1, 1);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Bottom position
|
||||
//
|
||||
|
||||
// Full width
|
||||
#noty_layout__bottom {
|
||||
@extend .noty_layout_mixin;
|
||||
bottom: 0;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
|
||||
// Add more spacing to the last notification
|
||||
.noty_bar:last-child {
|
||||
margin-bottom: $notification-gutter-y;
|
||||
}
|
||||
}
|
||||
|
||||
// Left
|
||||
#noty_layout__bottomLeft {
|
||||
@extend .noty_layout_mixin;
|
||||
bottom: $notification-gutter-y;
|
||||
left: $notification-gutter-x;
|
||||
width: $notification-width;
|
||||
}
|
||||
|
||||
// Center
|
||||
#noty_layout__bottomCenter {
|
||||
@extend .noty_layout_mixin;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
width: $notification-width;
|
||||
transform: translate(calc(-50% - #{$alert-border-width})) translateZ(0) scale(1.0, 1.0);
|
||||
}
|
||||
|
||||
// Right
|
||||
#noty_layout__bottomRight {
|
||||
@extend .noty_layout_mixin;
|
||||
bottom: $notification-gutter-y;
|
||||
right: $notification-gutter-x;
|
||||
width: $notification-width;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Progress bar
|
||||
//
|
||||
|
||||
.noty_progressbar {
|
||||
display: none;
|
||||
|
||||
// Show only if notification has timeout
|
||||
.noty_has_timeout.noty_has_progressbar & {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: $noty-progress-height;
|
||||
width: 100%;
|
||||
background-color: $noty-progress-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animation effects
|
||||
//
|
||||
|
||||
// Open
|
||||
.noty_effects_open {
|
||||
opacity: 0;
|
||||
transform: translate(50%);
|
||||
animation: noty_anim_in .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
// Close
|
||||
.noty_effects_close {
|
||||
animation: noty_anim_out .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
// Height
|
||||
.noty_fix_effects_height {
|
||||
animation: noty_anim_height 75ms ease-out;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Close button
|
||||
//
|
||||
|
||||
// On notification click
|
||||
.noty_close_with_click {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Button
|
||||
.noty_close_button {
|
||||
position: absolute;
|
||||
top: $alert-padding-y;
|
||||
right: $alert-padding-x;
|
||||
background-color: transparent;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
@include transition(opacity ease-in-out $component-transition-timer);
|
||||
|
||||
// Animate on hover
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Modal
|
||||
//
|
||||
|
||||
.noty_modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $modal-backdrop-bg;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
opacity: $modal-backdrop-opacity;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
// Open
|
||||
&.noty_modal_open {
|
||||
opacity: 0;
|
||||
animation: noty_modal_in .3s ease-out;
|
||||
}
|
||||
|
||||
// Close
|
||||
&.noty_modal_close {
|
||||
animation: noty_modal_out .3s ease-out;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animations
|
||||
//
|
||||
|
||||
@keyframes noty_modal_in {
|
||||
100% {
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
}
|
||||
@keyframes noty_modal_out {
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes noty_anim_in {
|
||||
100% {
|
||||
transform: translate(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes noty_anim_out {
|
||||
100% {
|
||||
transform: translate(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes noty_anim_height {
|
||||
100% {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Default limitless theme
|
||||
//
|
||||
|
||||
.noty_theme__limitless {
|
||||
|
||||
// Base
|
||||
&.noty_bar {
|
||||
margin: $noty-spacer-y 0;
|
||||
position: relative;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
}
|
||||
|
||||
// Alert type
|
||||
&.noty_type__alert {
|
||||
background-color: $notification-alert-bg;
|
||||
color: $notification-alert-color;
|
||||
border-color: $notification-alert-border-color;
|
||||
}
|
||||
|
||||
// Warning type
|
||||
&.noty_type__warning {
|
||||
background-color: $notification-warning-bg;
|
||||
color: $notification-warning-color;
|
||||
border-color: $notification-warning-border-color;
|
||||
}
|
||||
|
||||
// Error type
|
||||
&.noty_type__error {
|
||||
background-color: $notification-error-bg;
|
||||
color: $notification-error-color;
|
||||
border-color: $notification-error-border-color;
|
||||
}
|
||||
|
||||
// Info type
|
||||
&.noty_type__info {
|
||||
background-color: $notification-info-bg;
|
||||
color: $notification-info-color;
|
||||
border-color: $notification-info-border-color;
|
||||
}
|
||||
|
||||
// Success type
|
||||
&.noty_type__success {
|
||||
background-color: $notification-success-bg;
|
||||
color: $notification-success-color;
|
||||
border-color: $notification-success-border-color;
|
||||
}
|
||||
|
||||
// Confirmation type
|
||||
&.noty_type__confirm {
|
||||
background-color: $modal-content-bg;
|
||||
border-color: $modal-content-border-color;
|
||||
@include box-shadow($modal-content-box-shadow-xs);
|
||||
|
||||
// Use bigger vertical padding
|
||||
.noty_body {
|
||||
padding: $alert-padding-x;
|
||||
}
|
||||
|
||||
// Override top padding for close button to match new vertical padding
|
||||
.noty_close_button {
|
||||
top: $alert-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,486 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # PNotify notifications
|
||||
*
|
||||
* Styles for pnotify.min.js - a flexible JavaScript notification plugin
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-pnotify {
|
||||
|
||||
// Base
|
||||
.ui-pnotify {
|
||||
top: $notification-gutter-y;
|
||||
right: $notification-gutter-x;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
z-index: 2;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($notification-box-shadow);
|
||||
|
||||
// Related to window
|
||||
body > & {
|
||||
position: fixed;
|
||||
z-index: $zindex-tooltip;
|
||||
}
|
||||
|
||||
// Rounded alerts
|
||||
&.alert-rounded > .ui-pnotify-container {
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
|
||||
// Solid color alerts
|
||||
&[class*=bg-] > .ui-pnotify-container {
|
||||
background-color: inherit;
|
||||
border-color: transparent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Custom text and light background colors
|
||||
&[class*=text-] > .ui-pnotify-container,
|
||||
&[class*=alpha-] > .ui-pnotify-container {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Stack positions
|
||||
//
|
||||
|
||||
// Alternate stack initial positioning
|
||||
&.stack-top-left,
|
||||
&.stack-bottom-left {
|
||||
left: $notification-gutter-x;
|
||||
right: auto;
|
||||
}
|
||||
&.stack-bottom-right,
|
||||
&.stack-bottom-left {
|
||||
bottom: $notification-gutter-y;
|
||||
top: auto;
|
||||
}
|
||||
&.stack-modal {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: -($notification-width / 2);
|
||||
}
|
||||
|
||||
// Custom stack positions
|
||||
&.stack-custom-right {
|
||||
top: auto;
|
||||
left: auto;
|
||||
bottom: 15rem;
|
||||
right: 15rem;
|
||||
}
|
||||
&.stack-custom-left {
|
||||
top: 15rem;
|
||||
left: 15rem;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
&.stack-custom-top {
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
&.stack-custom-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animations
|
||||
//
|
||||
|
||||
// Display notification
|
||||
&.ui-pnotify-in {
|
||||
display: block!important;
|
||||
}
|
||||
|
||||
// Move notification
|
||||
&.ui-pnotify-move {
|
||||
transition: left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
|
||||
}
|
||||
|
||||
// Slow fading
|
||||
&.ui-pnotify-fade-slow {
|
||||
opacity: 0;
|
||||
transition: opacity linear 0.6s;
|
||||
|
||||
&.ui-pnotify.ui-pnotify-move {
|
||||
transition: opacity .6s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Normal fading
|
||||
&.ui-pnotify-fade-normal {
|
||||
opacity: 0;
|
||||
transition: opacity linear 0.4s;
|
||||
|
||||
&.ui-pnotify.ui-pnotify-move {
|
||||
transition: opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Fast fading
|
||||
&.ui-pnotify-fade-fast {
|
||||
transition: opacity .2s linear;
|
||||
opacity: 0;
|
||||
|
||||
&.ui-pnotify.ui-pnotify-move {
|
||||
transition: opacity .2s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Fading
|
||||
&.ui-pnotify-fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Notification layout
|
||||
//
|
||||
|
||||
// Container
|
||||
.ui-pnotify-container {
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
@include border-radius($border-radius);
|
||||
@include clearfix;
|
||||
|
||||
// Roundless notifications
|
||||
&.ui-pnotify-sharp {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
.ui-pnotify-title {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: map-get($spacers, 1);
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
|
||||
// Text
|
||||
.ui-pnotify-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Notification icon
|
||||
.ui-pnotify-icon {
|
||||
display: block;
|
||||
float: left;
|
||||
line-height: 1;
|
||||
|
||||
> [class^=icon-] {
|
||||
margin-top: ($line-height-computed - $icon-font-size);
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Control buttons
|
||||
.ui-pnotify-closer,
|
||||
.ui-pnotify-sticker {
|
||||
float: right;
|
||||
margin-left: $element-spacer-x;
|
||||
margin-top: ($line-height-computed - $icon-font-size);
|
||||
line-height: 1;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Utility classes
|
||||
//
|
||||
|
||||
// Overlay
|
||||
.ui-pnotify-modal-overlay {
|
||||
background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@include size(100%);
|
||||
|
||||
body > & {
|
||||
position: fixed;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Notification theme
|
||||
//
|
||||
|
||||
.brighttheme {
|
||||
border: $alert-border-width solid;
|
||||
|
||||
// Custom color
|
||||
.ui-pnotify[class*=bg-] > & {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Contextual alternatives
|
||||
//
|
||||
|
||||
.brighttheme-notice {
|
||||
background-color: $color-orange-50;
|
||||
border-color: $color-orange-500;
|
||||
color: $color-warning-900;
|
||||
}
|
||||
.brighttheme-info {
|
||||
background-color: $color-blue-50;
|
||||
border-color: $color-blue-500;
|
||||
color: $color-blue-900;
|
||||
}
|
||||
.brighttheme-success {
|
||||
background-color: $color-success-50;
|
||||
border-color: $color-success-500;
|
||||
color: $color-success-900;
|
||||
}
|
||||
.brighttheme-error {
|
||||
background-color: $color-danger-50;
|
||||
border-color: $color-danger-500;
|
||||
color: $color-danger-900;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Notification controls
|
||||
//
|
||||
|
||||
// Base
|
||||
.brighttheme-icon-closer,
|
||||
.brighttheme-icon-sticker {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
@include size($font-size-sm);
|
||||
|
||||
// Icons
|
||||
&:after {
|
||||
content: '';
|
||||
font-family: $icon-font-family;
|
||||
font-size: $font-size-sm;
|
||||
display: block;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Closer icon
|
||||
.brighttheme-icon-closer:after {
|
||||
content: $icon-action-cross;
|
||||
}
|
||||
|
||||
// Sticker icon
|
||||
.brighttheme-icon-sticker:after {
|
||||
content: $icon-notification-sticker;
|
||||
}
|
||||
|
||||
// Sticked icon
|
||||
.brighttheme-icon-sticker.brighttheme-icon-stuck:after {
|
||||
content: $icon-notification-stuck;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Custom alert styles
|
||||
//
|
||||
|
||||
// Styled alert
|
||||
.ui-pnotify[class*=alert-styled-] {
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Left position
|
||||
.ui-pnotify.alert-styled-left {
|
||||
|
||||
// Border
|
||||
.brighttheme {
|
||||
border-left-width: (($alert-padding-y * 2) + $icon-font-size);
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Right position
|
||||
.ui-pnotify.alert-styled-right {
|
||||
|
||||
// Border
|
||||
.brighttheme {
|
||||
border-right-width: (($alert-padding-y * 2) + $icon-font-size);
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Action bar
|
||||
//
|
||||
|
||||
.brighttheme {
|
||||
.ui-pnotify-action-bar {
|
||||
textarea,
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
margin-bottom: $form-group-margin-bottom!important;
|
||||
color: $input-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
outline: 0;
|
||||
|
||||
// In colored background
|
||||
.ui-pnotify[class*=bg-] & {
|
||||
border-color: transparent;
|
||||
color: $white;
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-placeholder-light-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Notification history
|
||||
//
|
||||
|
||||
// Container
|
||||
.ui-pnotify-history-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $notification-gutter-x;
|
||||
border-top: none;
|
||||
padding: 0;
|
||||
z-index: $zindex-tooltip;
|
||||
@include border-top-radius(0);
|
||||
|
||||
// Fixed container
|
||||
&.ui-pnotify-history-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
// Header
|
||||
.ui-pnotify-history-header {
|
||||
text-align: center;
|
||||
margin-bottom: map-get($spacers, 1);
|
||||
}
|
||||
|
||||
// Button
|
||||
button {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Pulldown
|
||||
.ui-pnotify-history-pulldown {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Mobile view setup
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
// On mobile
|
||||
.ui-pnotify-mobile-able {
|
||||
|
||||
// Notification
|
||||
&.ui-pnotify {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: auto !important;
|
||||
font-smoothing: antialiased;
|
||||
|
||||
// Shadow
|
||||
.ui-pnotify-shadow {
|
||||
border-bottom-width: ($alert-border-width * 5);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate stack initial positioning
|
||||
//
|
||||
|
||||
&.stack-top-left,
|
||||
&.stack-bottom-left {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
&.stack-bottom-right,
|
||||
&.stack-bottom-left {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
|
||||
// Shadow
|
||||
.ui-pnotify-shadow,
|
||||
.ui-pnotify-shadow {
|
||||
border-top-width: ($alert-border-width * 5);
|
||||
border-bottom-width: $alert-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Utility classes
|
||||
//
|
||||
|
||||
// Fade out
|
||||
&.ui-pnotify-nonblock-fade {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
// Hide
|
||||
&.ui-pnotify-nonblock-hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Container
|
||||
.ui-pnotify-container {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,733 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Sweet Alerts component
|
||||
*
|
||||
* Styles for sweet_alert.min.js - notification library
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-sweetalert {
|
||||
|
||||
|
||||
//
|
||||
// Styles applied to <body>
|
||||
//
|
||||
|
||||
.swal2-shown {
|
||||
|
||||
// Disable scrolling when notification is shown
|
||||
&:not(.swal2-no-backdrop) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
// Fix fox iOS
|
||||
&.swal2-iosfix {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Disabled backdrop
|
||||
&.swal2-no-backdrop {
|
||||
.swal2-shown {
|
||||
background-color: transparent;
|
||||
box-shadow: $modal-content-box-shadow-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Container
|
||||
//
|
||||
|
||||
.swal2-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
z-index: $zindex-tooltip;
|
||||
|
||||
|
||||
//
|
||||
// Positioning
|
||||
//
|
||||
|
||||
// Top
|
||||
&.swal2-top {
|
||||
align-items: flex-start;
|
||||
|
||||
// Modal spacing
|
||||
.swal2-modal {
|
||||
margin-top: $notification-gutter-y;
|
||||
}
|
||||
}
|
||||
&.swal2-top-left {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Modal spacing
|
||||
.swal2-modal {
|
||||
margin-top: $notification-gutter-y;
|
||||
margin-left: $notification-gutter-x;
|
||||
}
|
||||
}
|
||||
&.swal2-top-right {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
|
||||
// Modal spacing
|
||||
.swal2-modal {
|
||||
margin-top: $notification-gutter-y;
|
||||
margin-right: $notification-gutter-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Center
|
||||
&.swal2-center {
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
}
|
||||
&.swal2-center-left {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Modal spacing
|
||||
.swal2-modal {
|
||||
margin-left: $notification-gutter-x;
|
||||
}
|
||||
}
|
||||
&.swal2-center-right {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
// Modal spacing
|
||||
.swal2-modal {
|
||||
margin-right: $notification-gutter-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&.swal2-bottom {
|
||||
align-items: flex-end;
|
||||
|
||||
// Modal spacing
|
||||
.swal2-modal {
|
||||
margin-bottom: $notification-gutter-y;
|
||||
}
|
||||
}
|
||||
&.swal2-bottom-left {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Modal spacing
|
||||
.swal2-modal {
|
||||
margin-bottom: $notification-gutter-y;
|
||||
margin-left: $notification-gutter-x;
|
||||
}
|
||||
}
|
||||
&.swal2-bottom-right {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
|
||||
// Modal spacing
|
||||
.swal2-modal {
|
||||
margin-bottom: $notification-gutter-y;
|
||||
margin-right: $notification-gutter-x;
|
||||
}
|
||||
}
|
||||
|
||||
// IE hacks
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.swal2-modal {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog animation
|
||||
&.swal2-fade {
|
||||
@include transition(background-color .15s);
|
||||
}
|
||||
|
||||
// Overlay
|
||||
body:not(.swal2-no-backdrop) &.swal2-shown {
|
||||
background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Stretching
|
||||
//
|
||||
|
||||
// Fullscreen
|
||||
.swal2-grow-fullscreen {
|
||||
.swal2-modal {
|
||||
display: flex !important;
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
justify-content: center;
|
||||
margin: $notification-gutter-y $notification-gutter-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Full width
|
||||
.swal2-grow-row {
|
||||
.swal2-modal {
|
||||
display: flex !important;
|
||||
flex: 1;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
margin-left: $notification-gutter-x;
|
||||
margin-right: $notification-gutter-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Full height
|
||||
.swal2-grow-column {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
// Left position (use 'center-left')
|
||||
&.swal2-center-left {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// Right position (use 'center-right')
|
||||
&.swal2-center-right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
// Nodal
|
||||
.swal2-modal {
|
||||
display: flex !important;
|
||||
flex: 1;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
margin-top: $notification-gutter-y;
|
||||
margin-bottom: $notification-gutter-y;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Popup
|
||||
//
|
||||
|
||||
// Base
|
||||
.swal2-popup {
|
||||
flex-direction: column;
|
||||
background-color: $modal-content-bg;
|
||||
text-align: center;
|
||||
display: none;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
padding: $swal-padding;
|
||||
width: $swal-width;
|
||||
margin-left: $swal-margin-x;
|
||||
margin-right: $swal-margin-x;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow($modal-content-box-shadow-xs);
|
||||
|
||||
// Remove outline
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Hide overflow when notification is loading
|
||||
&.swal2-loading {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
// No horizontal spacing on desktop
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
.swal2-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Title
|
||||
.swal2-title {
|
||||
font-size: $h5-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
line-height: $headings-line-height;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
margin-top: map-get($spacers, 1);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Content
|
||||
.swal2-content {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
|
||||
// Container
|
||||
.swal2-actions {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: $spacer;
|
||||
|
||||
// Add horizontal spacing to buttons
|
||||
> button + button {
|
||||
margin-left: ($spacer / 2);
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:not(.swal2-loading) .swal2-styled[disabled] {
|
||||
cursor: no-drop;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading spinner
|
||||
.swal2-loading {
|
||||
.swal2-confirm {
|
||||
&:before {
|
||||
content: $icon-loading-spinner;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
font-size: $icon-font-size;
|
||||
align-self: center;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
margin-right: $element-spacer-x;
|
||||
animation: rotation 1s linear infinite;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close button
|
||||
.swal2-close {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
@include size(1.5rem);
|
||||
@include transition(opacity ease-in-out .15s);
|
||||
|
||||
// Hover/focus states
|
||||
@include hover-focus {
|
||||
opacity: 1;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
// Main types
|
||||
.swal2-input,
|
||||
.swal2-file,
|
||||
.swal2-textarea,
|
||||
.swal2-select,
|
||||
.swal2-radio,
|
||||
.swal2-checkbox {
|
||||
display: none;
|
||||
margin: $spacer auto 0 auto;
|
||||
}
|
||||
|
||||
// Custom types
|
||||
.swal2-popup {
|
||||
.select2-container,
|
||||
.btn-group,
|
||||
.uniform-uploader {
|
||||
margin: $spacer auto 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
.swal2-checkbox {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
// Spacing between input and text
|
||||
> span:not(.switchery) {
|
||||
margin-left: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Radio
|
||||
.swal2-radio {
|
||||
justify-content: center;
|
||||
|
||||
label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
// Add spacing to labels
|
||||
+ label {
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
// Add spacing to text
|
||||
input,
|
||||
.uniform-choice {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Range
|
||||
.swal2-range {
|
||||
margin-top: $spacer;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// Range input
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Range output
|
||||
output {
|
||||
font-size: $h6-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-top: ($spacer / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Input error
|
||||
.swal2-inputerror {
|
||||
@include plain-hover-focus {
|
||||
border-color: $form-feedback-invalid-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Validation error message
|
||||
.swal2-validation-message {
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
margin-top: $form-text-margin-top;
|
||||
margin-bottom: $form-text-margin-top;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0!important;
|
||||
color: theme-color("danger");
|
||||
position: relative;
|
||||
padding-left: ($icon-font-size + $element-spacer-x);
|
||||
|
||||
// Add icon
|
||||
&:before {
|
||||
content: $icon-validation-error;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
position: absolute;
|
||||
top: (($line-height-computed - $icon-font-size) / 2);
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Images and icons
|
||||
//
|
||||
|
||||
// Image
|
||||
.swal2-image {
|
||||
margin: ($spacer / 2) auto;
|
||||
@include img-fluid();
|
||||
}
|
||||
|
||||
// Icons
|
||||
.swal2-icon {
|
||||
border: $swal2-icon-border-width solid transparent;
|
||||
margin: ($spacer / 2) auto $spacer auto;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
@include size($swal2-icon-size);
|
||||
@include border-radius($border-radius-circle);
|
||||
|
||||
// Success
|
||||
&.swal2-success {
|
||||
border-color: $swal2-success-border-color;
|
||||
|
||||
// Checkmark
|
||||
[class^='swal2-success-line'][class$='tip'] {
|
||||
height: ($swal2-icon-size / 2);
|
||||
width: ($swal2-icon-size / 4);
|
||||
/*rtl:ignore*/
|
||||
border-right: $swal2-icon-border-width solid $swal2-success-color;
|
||||
border-top: $swal2-icon-border-width solid $swal2-success-color;
|
||||
position: absolute;
|
||||
/*rtl:ignore*/
|
||||
left: ($swal2-icon-size / 4);
|
||||
top: ($swal2-icon-size / 2) + ($swal2-icon-border-width / 2);
|
||||
opacity: 1;
|
||||
animation: animate-checkmark ease 0.75s;
|
||||
/*rtl:begin:ignore*/
|
||||
transform: scaleX(-1) rotate(135deg);
|
||||
transform-origin: left top;
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
&.swal2-error {
|
||||
border-color: $swal2-error-border-color;
|
||||
|
||||
// Base
|
||||
.swal2-x-mark {
|
||||
position: relative;
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// Lines
|
||||
[class^='swal2-x-mark-line'] {
|
||||
position: absolute;
|
||||
height: $swal2-icon-border-width;
|
||||
width: ($swal2-icon-size - ($swal2-icon-spacer * 2));
|
||||
background-color: $swal2-error-color;
|
||||
display: block;
|
||||
top: ($swal2-icon-size - $swal2-icon-border-width) / 2;
|
||||
|
||||
// Left line
|
||||
&[class$='left'] {
|
||||
transform: rotate(45deg);
|
||||
left: $swal2-icon-spacer;
|
||||
}
|
||||
|
||||
// Right line
|
||||
&[class$='right'] {
|
||||
transform: rotate(-45deg);
|
||||
right: $swal2-icon-spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Warning
|
||||
&.swal2-warning {
|
||||
color: $swal2-warning-color;
|
||||
border-color: $swal2-warning-border-color;
|
||||
font-size: ($swal2-icon-size - $swal2-icon-spacer);
|
||||
line-height: $swal2-icon-size;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Info
|
||||
&.swal2-info {
|
||||
color: $swal2-info-color;
|
||||
border-color: $swal2-info-color;
|
||||
font-size: ($swal2-icon-size - $swal2-icon-spacer);
|
||||
line-height: $swal2-icon-size;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Question
|
||||
&.swal2-question {
|
||||
color: $swal2-question-color;
|
||||
border-color: $swal2-question-border-color;
|
||||
font-size: ($swal2-icon-size - $swal2-icon-spacer);
|
||||
line-height: calc(#{$swal2-icon-size} + #{$swal2-icon-border-width});
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Progress steps
|
||||
//
|
||||
|
||||
// Base
|
||||
.swal2-progresssteps {
|
||||
font-weight: $font-weight-semibold;
|
||||
margin: 0 0 $spacer;
|
||||
padding: 0;
|
||||
|
||||
// Steps
|
||||
li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// Steps
|
||||
.swal2-progresscircle {
|
||||
color: $swal2-step-complete-color;
|
||||
text-align: center;
|
||||
margin-left: ($spacer / 2);
|
||||
margin-right: ($spacer / 2);
|
||||
|
||||
// Active step
|
||||
&.swal2-activeprogressstep {
|
||||
color: $color-primary-500;
|
||||
|
||||
// Active step color
|
||||
~ .swal2-progresscircle {
|
||||
color: $swal2-step-inactive-color;
|
||||
}
|
||||
|
||||
// Active step line color
|
||||
~ .swal2-progressline {
|
||||
background-color: $swal2-step-line-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Line
|
||||
.swal2-progressline {
|
||||
background-color: $swal2-step-active-color;
|
||||
height: rem-calc(1);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animations
|
||||
//
|
||||
|
||||
// github.com/limonte/sweetalert2/issues/268
|
||||
[class^='swal2'] {
|
||||
-webkit-tap-highlight-color: rgba($black, 0);
|
||||
}
|
||||
|
||||
// Show notification
|
||||
.swal2-show {
|
||||
animation: show-notification 0.15s;
|
||||
|
||||
// Disable animation
|
||||
&.swal2-noanimation {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide notification
|
||||
.swal2-hide {
|
||||
animation: hide-notification 0.15s forwards;
|
||||
|
||||
// Disable animation
|
||||
&.swal2-noanimation {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Circle
|
||||
.swal2-animate-success-icon,
|
||||
.swal2-animate-error-icon,
|
||||
.swal2-warning,
|
||||
.swal2-info,
|
||||
.swal2-question {
|
||||
animation: animate-circle 0.5s;
|
||||
}
|
||||
|
||||
// Error cross
|
||||
.swal2-animate-x-mark {
|
||||
animation: animate-x-mark 0.5s;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animation keyframes
|
||||
//
|
||||
|
||||
// Show notification
|
||||
@keyframes show-notification {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide notification
|
||||
@keyframes hide-notification {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkmark
|
||||
@keyframes animate-checkmark {
|
||||
0% {
|
||||
height: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
30% {
|
||||
height: 0;
|
||||
width: ($swal2-icon-size / 4);
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
height: ($swal2-icon-size / 2);
|
||||
width: ($swal2-icon-size / 4);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
height: ($swal2-icon-size / 2);
|
||||
width: ($swal2-icon-size / 4);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Circle
|
||||
@keyframes animate-circle {
|
||||
0% {
|
||||
color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
25% {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Error cross
|
||||
@keyframes animate-x-mark {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Anytime picker
|
||||
*
|
||||
* jQuery datepicker/timepicker and a Date/String parse/format utility
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-anytime {
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.AnyTime-pkr {
|
||||
text-align: center;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.AnyTime-date {
|
||||
float: left;
|
||||
|
||||
& + .AnyTime-time {
|
||||
margin-left: 3.125rem;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown container
|
||||
.AnyTime-win {
|
||||
padding: $datepicker-padding;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
display: inline-block;
|
||||
z-index: $zindex-tooltip;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
|
||||
// Clock
|
||||
.AnyTime-cloak {
|
||||
position: absolute;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Title
|
||||
.AnyTime-hdr {
|
||||
font-size: $datepicker-title-font-size;
|
||||
margin: $datepicker-padding;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.AnyTime-x-btn {
|
||||
display: none;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
opacity: 0.6;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-action-cross;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
.AnyTime-lbl {
|
||||
font-size: $font-size-base;
|
||||
margin-bottom: ($spacer / 2);
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-top: $spacer;
|
||||
|
||||
&:first-child {
|
||||
margin-top: $dropdown-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Highlight item colors
|
||||
// ------------------------------
|
||||
|
||||
// Years
|
||||
.AnyTime-yrs {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $anytime-year-btn-bg;
|
||||
color: $anytime-year-btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $anytime-month-btn-bg;
|
||||
color: $anytime-month-btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time
|
||||
.AnyTime-time {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $anytime-time-btn-bg;
|
||||
color: $anytime-time-btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.AnyTime-dom-table,
|
||||
.AnyTime-body-yr-selector {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $datepicker-item-active-bg;
|
||||
color: $datepicker-item-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Periods
|
||||
// ------------------------------
|
||||
|
||||
// Years
|
||||
.AnyTime-yrs-past-btn,
|
||||
.AnyTime-yrs-ahead-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
.AnyTime-yr-prior-btn,
|
||||
.AnyTime-yr-cur-btn,
|
||||
.AnyTime-yr-next-btn {
|
||||
display: inline-block;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
|
||||
// Date calendar
|
||||
// ------------------------------
|
||||
|
||||
// Table
|
||||
.AnyTime-dom-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Week days
|
||||
.AnyTime-pkr th.AnyTime-dow {
|
||||
color: $datepicker-item-weekday-color;
|
||||
padding: $datepicker-item-padding;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.AnyTime-mon-btn {
|
||||
float: left;
|
||||
width: (100% / 6); // 6 months per row
|
||||
}
|
||||
.AnyTime-mon7-btn {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
// Make elements inline
|
||||
.AnyTime-time,
|
||||
.AnyTime-hrs-am,
|
||||
.AnyTime-hrs-pm,
|
||||
.AnyTime-mins-tens,
|
||||
.AnyTime-mins-ones,
|
||||
.AnyTime-secs-tens,
|
||||
.AnyTime-secs-ones,
|
||||
.AnyTime-hrs,
|
||||
.AnyTime-mins,
|
||||
.AnyTime-secs,
|
||||
.AnyTime-offs {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Button
|
||||
.AnyTime-btn {
|
||||
padding: $datepicker-item-padding;
|
||||
cursor: pointer;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.ui-state-disabled {
|
||||
cursor: $cursor-disabled;
|
||||
color: $datepicker-item-disabled-color;
|
||||
background-color: $datepicker-item-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Time
|
||||
// ------------------------------
|
||||
|
||||
// Time buttons
|
||||
.AnyTime-hr-btn,
|
||||
.AnyTime-min-ten-btn,
|
||||
.AnyTime-min-one-btn,
|
||||
.AnyTime-sec-ten-btn,
|
||||
.AnyTime-sec-one-btn {
|
||||
min-width: 2.5rem;
|
||||
}
|
||||
|
||||
.AnyTime-hrs-pm,
|
||||
.AnyTime-mins-ones,
|
||||
.AnyTime-secs-ones {
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
.AnyTime-mins-tens,
|
||||
.AnyTime-secs-tens {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
// Off buttons
|
||||
.AnyTime-off-cur-btn {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.AnyTime-off-select-btn {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.AnyTime-off-selector {
|
||||
margin: 0.625rem;
|
||||
position: absolute;
|
||||
}
|
||||
.AnyTime-body-off-selector {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
white-space: nowrap
|
||||
}
|
||||
.AnyTime-off-off-btn {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
// Year and era
|
||||
// ------------------------------
|
||||
|
||||
// Year selector
|
||||
.AnyTime-yr-selector {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
}
|
||||
.AnyTime-body-yr-selector {
|
||||
margin: 0;
|
||||
}
|
||||
.AnyTime-yr-mil,
|
||||
.AnyTime-yr-cent,
|
||||
.AnyTime-yr-dec,
|
||||
.AnyTime-yr-yr,
|
||||
.AnyTime-yr-era {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
// Media queries
|
||||
@include media-breakpoint-down(xs) {
|
||||
.AnyTime-pkr .AnyTime-date {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.AnyTime-mon-btn {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.AnyTime-date + .AnyTime-time {
|
||||
margin-left: 0;
|
||||
margin-top: $spacer;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,489 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Daterange picker
|
||||
*
|
||||
* Date range picker component for Bootstrap
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-daterange {
|
||||
|
||||
// Core
|
||||
.daterangepicker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: $dropdown-spacer;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
z-index: $zindex-tooltip;
|
||||
|
||||
// Override default dropdown styles
|
||||
&.dropdown-menu {
|
||||
max-width: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
// Dropup
|
||||
&.dropup {
|
||||
margin-top: -($dropdown-padding-y);
|
||||
}
|
||||
|
||||
// Align containers
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Display calendars on left side
|
||||
&.opensleft {
|
||||
.calendars {
|
||||
/*rtl:ignore*/
|
||||
float: left;
|
||||
}
|
||||
.calendar {
|
||||
/*rtl:ignore*/
|
||||
margin-right: $datepicker-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// Display calendars on right side
|
||||
&.opensright {
|
||||
.calendars {
|
||||
/*rtl:ignore*/
|
||||
float: right;
|
||||
}
|
||||
.calendar {
|
||||
/*rtl:ignore*/
|
||||
margin-left: $datepicker-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// And remove floats in single picker
|
||||
&.single {
|
||||
.calendar {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Hide range menu
|
||||
.ranges {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Display calendars
|
||||
&.show-calendar .calendar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.calendar {
|
||||
display: none;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
margin: ($datepicker-padding / 2) 0;
|
||||
padding: $datepicker-padding;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Table
|
||||
.daterangepicker {
|
||||
|
||||
// Table defaults
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
// Week days
|
||||
&.week {
|
||||
font-size: 80%;
|
||||
color: $datepicker-item-weekday-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
th {
|
||||
color: $datepicker-item-weekday-color;
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Arrow buttons
|
||||
&.prev,
|
||||
&.next {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Available dates
|
||||
&.available {
|
||||
@include hover-focus {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table content cells
|
||||
td {
|
||||
|
||||
// Available days
|
||||
&.available {
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Inactive days
|
||||
&.off,
|
||||
&.disabled {
|
||||
color: $datepicker-item-focusout-color;
|
||||
}
|
||||
|
||||
// Disabled days
|
||||
&.disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
|
||||
// Highlight dates in range
|
||||
&.in-range {
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
// Active date
|
||||
&.active {
|
||||
@include plain-hover-focus {
|
||||
color: $datepicker-item-active-color;
|
||||
background-color: $datepicker-item-active-bg;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override default condensed styles
|
||||
.table-condensed {
|
||||
tr > th,
|
||||
tr > td {
|
||||
padding: $datepicker-item-padding;
|
||||
min-width: (($datepicker-item-padding * 2) + $line-height-computed);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// Add extra top padding to day names
|
||||
thead tr:last-child th {
|
||||
padding-top: $datepicker-padding;
|
||||
}
|
||||
|
||||
// Month heading
|
||||
.month {
|
||||
font-size: $datepicker-title-font-size;
|
||||
color: $body-color;
|
||||
padding-top: ($datepicker-padding / 2);
|
||||
padding-bottom: ($datepicker-padding / 2);
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Elements
|
||||
.daterangepicker {
|
||||
|
||||
// Selects
|
||||
select {
|
||||
display: inline-block;
|
||||
|
||||
&.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
&.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.hourselect,
|
||||
&.minuteselect,
|
||||
&.secondselect,
|
||||
&.ampmselect {
|
||||
width: 3.75rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
.daterangepicker_input {
|
||||
position: relative;
|
||||
|
||||
// Calendar icons
|
||||
i {
|
||||
position: absolute;
|
||||
right: $input-padding-x-sm;
|
||||
top: auto;
|
||||
bottom: ((($input-line-height * $input-font-size) + ($input-padding-y * 2) + rem-calc($input-border-width * 2) - $icon-font-size) / 2);
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
// Add right padding for inputs
|
||||
input {
|
||||
padding-left: $input-padding-x-sm;
|
||||
padding-right: ($input-padding-x-sm + $icon-font-size + $input-padding-y);
|
||||
}
|
||||
}
|
||||
|
||||
// Time picker
|
||||
.calendar-time {
|
||||
text-align: center;
|
||||
margin: $input-padding-y 0;
|
||||
|
||||
// Disabled state
|
||||
select.disabled {
|
||||
color: $gray-600;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ranges dropdown
|
||||
.ranges {
|
||||
background-color: $dropdown-bg;
|
||||
position: relative;
|
||||
margin-top: ($datepicker-padding / 2);
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// List with links
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: $dropdown-padding-y 0;
|
||||
|
||||
// Add top border
|
||||
& + .daterangepicker-inputs {
|
||||
border-top: $border-width solid $dropdown-divider-bg;
|
||||
}
|
||||
|
||||
// List item
|
||||
li {
|
||||
color: $dropdown-link-color;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
cursor: pointer;
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Hover bg color
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active item color
|
||||
&.active {
|
||||
color: $datepicker-item-active-color;
|
||||
background-color: $datepicker-item-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
.daterangepicker-inputs {
|
||||
padding: $datepicker-padding;
|
||||
padding-top: ($datepicker-padding + ($dropdown-padding-y / 2));
|
||||
|
||||
// Inputs container
|
||||
.daterangepicker_input {
|
||||
|
||||
// Add top margin to the second field
|
||||
& + .daterangepicker_input {
|
||||
margin-top: ($datepicker-padding + ($dropdown-padding-y / 2));
|
||||
}
|
||||
|
||||
// Text label
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: map-get($spacers, 2);
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Add top divider
|
||||
& + .range_inputs {
|
||||
border-top: $dropdown-border-width solid $dropdown-divider-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons area
|
||||
.range_inputs {
|
||||
padding: $datepicker-padding;
|
||||
|
||||
// Buttons
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-top: $datepicker-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// If ranges menu has list items
|
||||
ul + .daterangepicker-inputs {
|
||||
padding-left: $dropdown-item-padding-x;
|
||||
padding-right: $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Setup mobile view
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-top: ($datepicker-padding / 2);
|
||||
margin-bottom: ($datepicker-padding / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Custom ranges layout
|
||||
//
|
||||
|
||||
// Container
|
||||
.daterange-custom {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Layout
|
||||
.daterange-custom-display {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
position: relative;
|
||||
padding-left: ($icon-font-size * 1.5);
|
||||
height: (1.75rem * $line-height-base);
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $icon-font-size;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Date number
|
||||
> i {
|
||||
display: block;
|
||||
font-size: 1.875rem;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
}
|
||||
|
||||
// Date details
|
||||
b {
|
||||
margin-left: 0.5rem;
|
||||
font-weight: $font-weight-normal;
|
||||
text-align: center;
|
||||
|
||||
// Month/year
|
||||
> i {
|
||||
font-size: $font-size-xs;
|
||||
display: block;
|
||||
line-height: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Line divider
|
||||
em {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Setup mobile view
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
// Layout
|
||||
.opensleft,
|
||||
.opensright {
|
||||
left: 0!important;
|
||||
right: 0;
|
||||
|
||||
// Stack calendars container
|
||||
.calendars {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Stack elements
|
||||
.daterangepicker.opensleft,
|
||||
.daterangepicker.opensright {
|
||||
.ranges,
|
||||
.calendar,
|
||||
.calendars {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Elements
|
||||
.daterangepicker {
|
||||
width: 100%;
|
||||
padding-left: $grid-gutter-width;
|
||||
padding-right: $grid-gutter-width;
|
||||
|
||||
// Remove side margin from calendars
|
||||
.calendar {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Make ranges full width
|
||||
.ranges {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,601 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Spectrum color picker
|
||||
*
|
||||
* Flexible and powerful jQuery colorpicker library
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-spectrum {
|
||||
|
||||
|
||||
// Base styles
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.sp-sat,
|
||||
.sp-val,
|
||||
.sp-top-inner,
|
||||
.sp-color,
|
||||
.sp-hue,
|
||||
.sp-clear-enabled .sp-clear,
|
||||
.sp-preview-inner,
|
||||
.sp-alpha-inner,
|
||||
.sp-thumb-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Hide containers by default
|
||||
.sp-container.sp-input-disabled .sp-input-container,
|
||||
.sp-container.sp-buttons-disabled .sp-button-container,
|
||||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container,
|
||||
.sp-palette-only .sp-picker-container,
|
||||
.sp-palette-disabled .sp-palette-container,
|
||||
.sp-initial-disabled .sp-initial {
|
||||
display: none;
|
||||
}
|
||||
.sp-hidden {
|
||||
display: none!important;
|
||||
}
|
||||
.sp-cf {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Elements
|
||||
.sp-preview,
|
||||
.sp-alpha,
|
||||
.sp-thumb-el {
|
||||
position: relative;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
// Previews
|
||||
.sp-preview-inner,
|
||||
.sp-alpha-inner,
|
||||
.sp-thumb-inner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Picker and palette containers
|
||||
.sp-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
z-index: $zindex-dropdown;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// Flat picker
|
||||
&.sp-flat {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
@include box-shadow($card-box-shadow);
|
||||
}
|
||||
}
|
||||
.sp-picker-container,
|
||||
.sp-palette-container {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
padding: $spectrum-padding;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.sp-picker-container {
|
||||
width: $spectrum-width;
|
||||
}
|
||||
|
||||
// Disable user selection
|
||||
.sp-container,
|
||||
.sp-replacer,
|
||||
.sp-preview,
|
||||
.sp-dragger,
|
||||
.sp-slider,
|
||||
.sp-alpha,
|
||||
.sp-clear,
|
||||
.sp-alpha-handle,
|
||||
.sp-container.sp-dragging .sp-input,
|
||||
.sp-container button {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
// Picker elements
|
||||
// ------------------------------
|
||||
|
||||
// Colors and hue areas
|
||||
.sp-top {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.sp-color {
|
||||
right: 20%;
|
||||
}
|
||||
.sp-hue {
|
||||
left: 85%;
|
||||
height: 100%;
|
||||
}
|
||||
.sp-clear-enabled .sp-hue {
|
||||
top: 2.5rem;
|
||||
height: 75%;
|
||||
}
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
|
||||
// Alpha
|
||||
.sp-alpha-enabled {
|
||||
.sp-top {
|
||||
margin-bottom: 1.625rem;
|
||||
}
|
||||
|
||||
.sp-alpha {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.sp-alpha-handle {
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
bottom: -0.25rem;
|
||||
width: 0.3125rem;
|
||||
/*rtl:ignore*/
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
border: 1px solid $gray-500;
|
||||
background-color: $white;
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
.sp-alpha {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 0.375rem;
|
||||
}
|
||||
|
||||
// Clear
|
||||
.sp-clear {
|
||||
display: none;
|
||||
}
|
||||
.sp-clear-display {
|
||||
cursor: pointer;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-picker-color-clear;
|
||||
display: block;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1.875rem;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hide icon in previews
|
||||
.sp-preview &:after,
|
||||
.sp-initial &:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
left: 85%;
|
||||
height: 1.875rem;
|
||||
text-align: center;
|
||||
color: $gray-600;
|
||||
box-shadow: 0 0 0 1px $gray-400 inset;
|
||||
}
|
||||
|
||||
// Input
|
||||
.sp-input-container {
|
||||
margin-top: 0.625rem;
|
||||
|
||||
.sp-initial-disabled & {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sp-input {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
width: 100%;
|
||||
background-color: $input-bg;
|
||||
outline: 0;
|
||||
color: $input-color;
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
|
||||
// Initial
|
||||
.sp-initial {
|
||||
margin-top: 0.625rem;
|
||||
|
||||
span {
|
||||
width: 50%;
|
||||
height: 1.563rem;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
.sp-thumb-inner {
|
||||
height: 1.563rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dragger and slider
|
||||
.sp-dragger {
|
||||
border: 1px solid $white;
|
||||
background-color: $gray-900;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
border-radius: $border-radius-circle;
|
||||
@include size(0.375rem);
|
||||
}
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
height: 0.25rem;
|
||||
left: -0.125rem;
|
||||
right: -0.125rem;
|
||||
border: 1px solid $gray-500;
|
||||
background-color: $white;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
|
||||
// Color preview
|
||||
// ------------------------------
|
||||
|
||||
// Replacer (the little preview div that shows up instead of the <input>)
|
||||
.sp-replacer {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 0.3125rem;
|
||||
display: inline-block;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
background-color: $gray-100;
|
||||
color: $gray-600;
|
||||
vertical-align: middle;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// States
|
||||
&:not([class*=bg-]):hover,
|
||||
&:not([class*=bg-]).sp-active {
|
||||
background-color: $gray-200;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
// Custom color replacer
|
||||
&[class*=bg-] {
|
||||
@include plain-hover-focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.sp-replacer {
|
||||
&.sp-disabled {
|
||||
cursor: default;
|
||||
opacity: 0.8;
|
||||
|
||||
@include hover-focus {
|
||||
background-color: $gray-100;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color preview
|
||||
.sp-preview {
|
||||
position: relative;
|
||||
width: 1.625rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.3125rem;
|
||||
float: left;
|
||||
z-index: 0;
|
||||
|
||||
&,
|
||||
.sp-preview-inner {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
.sp-preview-inner,
|
||||
.sp-clear-display {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.05);
|
||||
}
|
||||
|
||||
.sp-replacer[class*=bg-] & {
|
||||
.sp-preview-inner {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.sp-dd {
|
||||
float: left;
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
margin: 0.25rem;
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
display: block;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Gradients
|
||||
// ------------------------------
|
||||
|
||||
// Gradients for hue, saturation and value instead of images. Not pretty... but it works
|
||||
/*rtl:begin:ignore*/
|
||||
.sp-sat {
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
box-shadow: 0 0 0 1px $gray-500 inset;
|
||||
}
|
||||
.sp-val {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
}
|
||||
.sp-hue {
|
||||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
|
||||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
|
||||
//
|
||||
// IE filters do not support multiple color stops.
|
||||
// Generate 6 divs, line them up, and do two color gradients for each.
|
||||
// Yes, really.
|
||||
//
|
||||
|
||||
/*rtl:begin:ignore*/
|
||||
.sp-1 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||
}
|
||||
.sp-2 {
|
||||
height: 16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||
}
|
||||
.sp-3 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||
}
|
||||
.sp-4 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||
}
|
||||
.sp-5 {
|
||||
height: 16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||
}
|
||||
.sp-6 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
|
||||
// Color palettes
|
||||
// ------------------------------
|
||||
|
||||
// Basic styles
|
||||
.sp-palette {
|
||||
max-width: $spectrum-max-width;
|
||||
}
|
||||
|
||||
// Palette thumbs
|
||||
.sp-thumb-el {
|
||||
position: relative;
|
||||
|
||||
.sp-palette & {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Add 1px inner semi-transparent border
|
||||
.sp-thumb-inner {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.1) inset;
|
||||
|
||||
@include hover {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.25) inset;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-palette & {
|
||||
@include size(1rem);
|
||||
|
||||
+ .sp-thumb-el {
|
||||
margin-left: 0.3125rem;
|
||||
}
|
||||
|
||||
&.sp-thumb-active {
|
||||
box-shadow: 0 0 0 2px rgba($black, 0.1) inset;
|
||||
|
||||
.sp-thumb-inner {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.25) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adding checkmark to the active thumb
|
||||
.sp-palette {
|
||||
.sp-thumb-active {
|
||||
&.sp-thumb-dark,
|
||||
&.sp-thumb-light {
|
||||
.sp-thumb-inner {
|
||||
&:after {
|
||||
content: $icon-checkbox-tick;
|
||||
display: block;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
color: $white;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sp-thumb-light .sp-thumb-inner:after {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnail row
|
||||
.sp-palette-row {
|
||||
font-size: 0;
|
||||
|
||||
& + .sp-palette-row {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Picker buttons
|
||||
// ------------------------------
|
||||
|
||||
// Button base
|
||||
.sp-cancel,
|
||||
.sp-choose,
|
||||
.sp-palette-toggle {
|
||||
border: 0;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
float: left;
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@include border-radius($btn-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Button containers
|
||||
.sp-palette-button-container,
|
||||
.sp-button-container {
|
||||
margin-top: ($spacer / 2);
|
||||
text-align: center;
|
||||
|
||||
// In colored container
|
||||
.sp-container[class*=bg-] & {
|
||||
a,
|
||||
button {
|
||||
background-color: rgba($black, 0.25);
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
@include hover-focus {
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button states
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
border: $btn-border-width solid transparent;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $btn-light-hover-color;
|
||||
background-color: $btn-light-hover-bg;
|
||||
border-color: $btn-light-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Choose button
|
||||
.sp-choose {
|
||||
border: $btn-border-width solid transparent;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Cancel and palette toggle buttons
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
color: $btn-light-color;
|
||||
margin-right: 0.3125rem;
|
||||
background-color: $btn-light-bg;
|
||||
margin-right: 4%;
|
||||
border-color: $btn-light-border-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $btn-light-color;
|
||||
}
|
||||
}
|
||||
.sp-palette-toggle {
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Choose button
|
||||
.sp-choose {
|
||||
color: $spectrum-choose-btn-color;
|
||||
background-color: $spectrum-choose-btn-bg;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Picker base
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-pickadate {
|
||||
|
||||
// Picker base
|
||||
.picker {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: -($dropdown-border-width);
|
||||
z-index: $zindex-tooltip;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Input element
|
||||
.picker__input {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// The base of the picker
|
||||
.picker__holder {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
min-width: $pickadate-min-width;
|
||||
max-width: $pickadate-max-width;
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@include border-bottom-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// When the picker opens
|
||||
.picker--opened & {
|
||||
max-height: $pickadate-max-height;
|
||||
border-top-width: $dropdown-border-width;
|
||||
border-bottom-width: $dropdown-border-width;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Date picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-pickadate {
|
||||
|
||||
|
||||
//
|
||||
// Base
|
||||
//
|
||||
|
||||
// Picker box
|
||||
.picker__box {
|
||||
padding: $datepicker-padding;
|
||||
}
|
||||
|
||||
// Header
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: $datepicker-title-font-size;
|
||||
line-height: 1;
|
||||
padding-top: $datepicker-padding;
|
||||
padding-bottom: $datepicker-padding;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Selectors
|
||||
//
|
||||
|
||||
// Month and year labels
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
font-weight: $font-weight-semibold;
|
||||
display: inline-block;
|
||||
margin-left: map-get($spacers, 1);
|
||||
margin-right: map-get($spacers, 1);
|
||||
}
|
||||
.picker__year {
|
||||
color: $datepicker-item-year-color;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Month and year selectors
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
background-clip: padding-box;
|
||||
margin-left: map-get($spacers, 1);
|
||||
margin-right: map-get($spacers, 1);
|
||||
outline: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Navigation
|
||||
//
|
||||
|
||||
// Navigation buttons
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: ($icon-font-size / 2);
|
||||
top: 50%;
|
||||
margin-top: -($icon-font-size);
|
||||
line-height: 1;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Prev and next nav
|
||||
&:before {
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $icon-font-size;
|
||||
width: $icon-font-size;
|
||||
text-align: center;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
cursor: pointer;
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous button
|
||||
.picker__nav--prev {
|
||||
left: 0;
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-nav-prev;
|
||||
}
|
||||
@else {
|
||||
content: $icon-nav-next;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
.picker__nav--next {
|
||||
right: 0;
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-nav-next;
|
||||
}
|
||||
@else {
|
||||
content: $icon-nav-prev;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.picker__nav--disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:before,
|
||||
&:before:hover {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
// Calendar table of dates
|
||||
.picker__table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
font-size: inherit;
|
||||
width: 100%;
|
||||
margin-bottom: $datepicker-padding;
|
||||
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Weekday labels
|
||||
.picker__weekday {
|
||||
width: 14.285714286%;
|
||||
text-align: center;
|
||||
padding-bottom: ($datepicker-padding / 2);
|
||||
padding-top: $datepicker-padding;
|
||||
color: $datepicker-item-weekday-color;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
// Days on the calendar
|
||||
.picker__day {
|
||||
padding: $datepicker-item-padding;
|
||||
min-width: (($datepicker-item-padding * 2) + $line-height-computed);
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.125rem;
|
||||
right: 0.125rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 0.375rem solid $datepicker-item-active-bg;
|
||||
border-left: 0.375rem solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Date focus
|
||||
.picker__day--outfocus {
|
||||
color: $datepicker-item-focusout-color;
|
||||
}
|
||||
.picker__day--infocus,
|
||||
.picker__day--outfocus {
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
cursor: pointer;
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Highlighted date
|
||||
.picker__day--highlighted:before {
|
||||
border-top-color: $datepicker-item-active-color;
|
||||
}
|
||||
.picker__day--highlighted,
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
color: $datepicker-item-active-color;
|
||||
background-color: $datepicker-item-active-bg;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused .picker__day--selected {
|
||||
background-color: $datepicker-item-active-bg;
|
||||
color: $datepicker-item-active-color;
|
||||
}
|
||||
|
||||
// Disabled date
|
||||
.picker__day--disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $datepicker-item-disabled-bg;
|
||||
color: $gray-600;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top-color: $datepicker-item-disabled-color;
|
||||
}
|
||||
|
||||
.picker__day--highlighted & {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $datepicker-item-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
// Contains the "today" and "clear" buttons
|
||||
.picker__footer {
|
||||
text-align: center;
|
||||
|
||||
// Footer buttons
|
||||
button {
|
||||
border: 0;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
font-weight: $font-weight-semibold;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
@include border-radius($btn-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
outline: 0;
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
|
||||
// Indicator
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:disabled {
|
||||
@include plain-hover-focus {
|
||||
background-color: transparent;
|
||||
color: $gray-600;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.picker__button--today:before {
|
||||
content: '';
|
||||
margin-right: $element-spacer-x;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -0.0625rem;
|
||||
width: 0;
|
||||
border-top: 0.375rem solid $color-primary-500;
|
||||
border-left: 0.375rem solid transparent;
|
||||
}
|
||||
.picker__button--close:before {
|
||||
content: '\D7';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: $element-spacer-x;
|
||||
top: 0.0625rem;
|
||||
line-height: 1;
|
||||
font-size: $icon-font-size;
|
||||
}
|
||||
.picker__button--clear:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -0.1875rem;
|
||||
width: 0.5rem;
|
||||
margin-right: $element-spacer-x;
|
||||
border-top: 0.125rem solid $color-danger-500;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Time picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-pickadate {
|
||||
|
||||
// Container size
|
||||
.picker--time {
|
||||
min-width: $pickatime-min-width;
|
||||
max-width: $pickatime-max-width;
|
||||
}
|
||||
|
||||
// Remove padding from picker box
|
||||
.picker--time .picker__box {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// List of items
|
||||
//
|
||||
|
||||
// Items list
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: $dropdown-padding-y 0;
|
||||
margin: 0;
|
||||
max-height: $pickatime-max-height;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// The times on the clock.
|
||||
.picker__list-item {
|
||||
position: relative;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
cursor: pointer;
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// The clear button
|
||||
.picker--time .picker__button--clear {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
background-color: $gray-100;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-top: $border-width solid $dropdown-divider-bg;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: -($dropdown-padding-y);
|
||||
margin-top: $dropdown-padding-y;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hocer state
|
||||
@include hover-focus {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Highlighted and hovered/focused time
|
||||
.picker__list-item--highlighted {
|
||||
z-index: 10;
|
||||
}
|
||||
.picker__list-item--highlighted,
|
||||
.picker__list-item--highlighted:hover,
|
||||
.picker--focused .picker__list-item--highlighted {
|
||||
cursor: pointer;
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Selected and hovered/focused time
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
color: $dropdown-link-active-color;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Disabled time
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
background-color: transparent;
|
||||
cursor: $cursor-disabled;
|
||||
z-index: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # ION Range Slider
|
||||
*
|
||||
* Styles for ion_rangeslider.min.js - range slider plugin
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-ion {
|
||||
|
||||
// Base
|
||||
.irs {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + ($slider-height * 4);
|
||||
user-select: none;
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
// Hide original input
|
||||
.irs-hidden-input {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
outline: none !important;
|
||||
z-index: -9999 !important;
|
||||
background: none !important;
|
||||
border-style: solid !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Background line
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-line {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: $slider-height;
|
||||
top: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + ($slider-height * 2);
|
||||
background-color: $slider-bg;
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
|
||||
// It consists of 3 parts
|
||||
.irs-line-left,
|
||||
.irs-line-mid,
|
||||
.irs-line-right {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Left
|
||||
.irs-line-left {
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
// Middle
|
||||
.irs-line-mid {
|
||||
/*rtl:ignore*/
|
||||
left: 9%;
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
// And right
|
||||
.irs-line-right {
|
||||
/*rtl:ignore*/
|
||||
right: 0;
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Colored bar
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-bar {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + ($slider-height * 2);
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: $slider-height;
|
||||
background-color: $slider-connect-bg;
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
|
||||
// Edge
|
||||
.irs-bar-edge {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + ($slider-height * 2);
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
height: 0.75rem;
|
||||
width: 0.5625rem;
|
||||
}
|
||||
|
||||
// Shadow for highlighting disabled range
|
||||
.irs-shadow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + ($slider-height * 2);
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: $slider-height;
|
||||
background-color: $body-color;
|
||||
opacity: 0.25;
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Handles
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-handle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: $slider-handle-bg;
|
||||
border: $slider-handle-border-width solid $slider-handle-border-color;
|
||||
cursor: pointer;
|
||||
top: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + $slider-height;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
@include size($slider-height * 3);
|
||||
@include border-radius($border-radius-round);
|
||||
|
||||
// Small circle
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -($slider-height / 2);
|
||||
margin-left: -($slider-height / 2);
|
||||
background-color: $slider-handle-inner-bg;
|
||||
@include size($slider-height);
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
|
||||
// Animate handle
|
||||
&,
|
||||
&:after {
|
||||
@include transition(background-color ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $slider-handle-hover-bg;
|
||||
|
||||
// Mute circle
|
||||
&:after {
|
||||
background-color: $slider-handle-inner-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// The last one is on top of the first one
|
||||
&.type_last {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Tooltips
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-min,
|
||||
.irs-max,
|
||||
.irs-from,
|
||||
.irs-to,
|
||||
.irs-single {
|
||||
position: absolute;
|
||||
display: block;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Minimum and maximum labels
|
||||
.irs-min,
|
||||
.irs-max {
|
||||
color: $slider-pips-color;
|
||||
font-size: $slider-pips-font-size;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: $tooltip-padding-y;
|
||||
background-color: $slider-bg;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
.irs-min {
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
}
|
||||
.irs-max {
|
||||
/*rtl:ignore*/
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Handle tooltips
|
||||
.irs-from,
|
||||
.irs-to,
|
||||
.irs-single {
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
color: $tooltip-color;
|
||||
font-size: $slider-pips-font-size;
|
||||
line-height: 1;
|
||||
padding: $tooltip-padding-y;
|
||||
top: 0;
|
||||
background-color: $tooltip-bg;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Tooltip arrow
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: -($tooltip-arrow-height * 2);
|
||||
left: 50%;
|
||||
margin-left: -($tooltip-arrow-height);
|
||||
overflow: hidden;
|
||||
border: $tooltip-arrow-height solid transparent;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
@include size(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// The grid
|
||||
//
|
||||
|
||||
// Base
|
||||
.irs-grid {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: ($slider-pips-font-size + $slider-pips-spacer-y);
|
||||
}
|
||||
|
||||
// If slider has grid
|
||||
.irs-with-grid {
|
||||
height: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + ($slider-height * 7) + $slider-pips-spacer-y;
|
||||
|
||||
// Display grid
|
||||
.irs-grid {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Marker
|
||||
.irs-grid-pol {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
width: $slider-pips-marker-width;
|
||||
height: ($slider-pips-marker-height * 2);
|
||||
background-color: $slider-pips-color;
|
||||
|
||||
// Sub marker
|
||||
&.small {
|
||||
height: $slider-pips-marker-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Text label
|
||||
.irs-grid-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: $slider-pips-font-size;
|
||||
color: $slider-pips-color;
|
||||
line-height: 1;
|
||||
padding: 0 $slider-pips-marker-height;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Disabled state
|
||||
//
|
||||
|
||||
// Disabled mask
|
||||
.irs-disable-mask {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: -1%;
|
||||
width: 102%;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
background: transparent;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Mute slider if disabled
|
||||
.irs-disabled {
|
||||
opacity: $slider-disabled-opacity;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,555 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # NoUI slider
|
||||
*
|
||||
* Styles for nouislider.min.js - range slider plugin
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-noui {
|
||||
|
||||
|
||||
// Functional styling
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.noUi-target {
|
||||
position: relative;
|
||||
background-color: $slider-bg;
|
||||
@include border-radius($border-radius-round);
|
||||
@include box-shadow($slider-box-shadow);
|
||||
|
||||
// Disable user select
|
||||
&,
|
||||
& * {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Base
|
||||
.noUi-base,
|
||||
.noUi-connects {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@include size(100%);
|
||||
}
|
||||
|
||||
// Wrapper for all connect elements
|
||||
.noUi-connects {
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
@include border-radius($border-radius-round);
|
||||
}
|
||||
|
||||
// Main wrappers
|
||||
.noUi-connect,
|
||||
.noUi-origin {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
/*rtl:begin:ignore*/
|
||||
left: 0;
|
||||
transform-origin: 0 0;
|
||||
/*rtl:end:ignore*/
|
||||
@include size(100%);
|
||||
}
|
||||
|
||||
// Inherit cursor
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
|
||||
// Connector
|
||||
.noUi-connect {
|
||||
background-color: $slider-connect-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
[disabled] {
|
||||
|
||||
// Background
|
||||
.noUi-target {
|
||||
opacity: $slider-disabled-opacity;
|
||||
}
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Orientations
|
||||
//
|
||||
|
||||
// Horizontal orientation
|
||||
.noUi-horizontal {
|
||||
height: $slider-height;
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
top: -($slider-height * 1.5) + ($slider-height / 2);
|
||||
right: -($slider-height * 1.5);
|
||||
}
|
||||
|
||||
// Give origins 0 height so they don't interfere with clicking the connect elements
|
||||
.noUi-origin {
|
||||
height: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// If has pips
|
||||
&.has-pips {
|
||||
margin-bottom: ($slider-pips-spacer-y + $line-height-computed);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical orientation
|
||||
.noUi-vertical {
|
||||
display: inline-block;
|
||||
width: $slider-height;
|
||||
height: $slider-vertical-height;
|
||||
|
||||
// Spacing between sliders
|
||||
& + & {
|
||||
margin-left: ($spacer * 1.5);
|
||||
}
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
top: -($slider-height * 1.5);
|
||||
/*rtl:ignore*/
|
||||
left: -($slider-height * 1.5) + ($slider-height / 2);
|
||||
}
|
||||
|
||||
// Give origins 0 width so they don't interfere with clicking the connect elements
|
||||
.noUi-origin {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
// If has pips
|
||||
&.has-pips {
|
||||
margin-right: ($slider-pips-spacer-y + $line-height-computed);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Handles and cursors
|
||||
//
|
||||
|
||||
// Draggable
|
||||
.noUi-draggable {
|
||||
cursor: w-resize;
|
||||
|
||||
// Vertical
|
||||
.noUi-vertical & {
|
||||
cursor: n-resize;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
background-color: $slider-handle-bg;
|
||||
cursor: pointer;
|
||||
top: -($slider-height);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border: $slider-handle-border-width solid $slider-handle-border-color;
|
||||
outline: 0;
|
||||
@include size($slider-height * 3);
|
||||
@include border-radius($border-radius-circle);
|
||||
|
||||
// Animate handle
|
||||
&,
|
||||
&:after {
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// This class is applied to the lower origin when its values is > 50%
|
||||
.noUi-stacking & {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Inner circle
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -($slider-height / 2);
|
||||
margin-left: -($slider-height / 2);
|
||||
background-color: $slider-handle-inner-bg;
|
||||
@include size($slider-height);
|
||||
@include border-radius($border-radius-circle);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $slider-handle-hover-bg;
|
||||
|
||||
// Mute circle
|
||||
&:after {
|
||||
background-color: $slider-handle-inner-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// White handle
|
||||
.noui-slider-white .noUi-handle:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tap state
|
||||
//
|
||||
|
||||
.noUi-state-tap {
|
||||
.noUi-connect,
|
||||
.noUi-origin {
|
||||
@include transition(transform $component-transition-timer);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// Large
|
||||
.noui-slider-lg {
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
top: -($slider-height-lg);
|
||||
@include size($slider-height-lg * 3);
|
||||
|
||||
// Inner circle
|
||||
&:after {
|
||||
margin-top: -($slider-height-lg / 2);
|
||||
margin-left: -($slider-height-lg / 2);
|
||||
@include size($slider-height-lg);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
&.noUi-horizontal {
|
||||
height: $slider-height-lg;
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
right: -($slider-height-lg * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical
|
||||
&.noUi-vertical {
|
||||
width: $slider-height-lg;
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
top: -($slider-height-lg * 1.5);
|
||||
right: -($slider-height-lg * 1.5) + ($slider-height-lg / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.noui-slider-sm {
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
top: -($slider-height-sm);
|
||||
@include size($slider-height-sm * 3);
|
||||
|
||||
// Inner circle
|
||||
&:after {
|
||||
margin-top: -($slider-height-sm / 2);
|
||||
margin-left: -($slider-height-sm / 2);
|
||||
@include size($slider-height-sm);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
&.noUi-horizontal {
|
||||
height: $slider-height-sm;
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
top: -($slider-height-sm * 1.5) + ($slider-height-sm / 2);
|
||||
right: -($slider-height-sm * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical
|
||||
&.noUi-vertical {
|
||||
width: $slider-height-sm;
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
top: -($slider-height-sm * 1.5);
|
||||
right: -($slider-height-sm * 1.5) + ($slider-height-sm / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Solid slider handle
|
||||
//
|
||||
|
||||
.noui-slider-solid {
|
||||
|
||||
// Handle
|
||||
.noUi-handle {
|
||||
|
||||
// Inner circle
|
||||
&:after {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
// Change circle opacity on hover
|
||||
@include hover-focus {
|
||||
&:after {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle colors
|
||||
&.noui-slider-primary .noUi-handle {
|
||||
background-color: theme-color("primary");
|
||||
border-color: theme-color("primary");
|
||||
}
|
||||
|
||||
&.noui-slider-danger .noUi-handle {
|
||||
background-color: theme-color("danger");
|
||||
border-color: theme-color("danger");
|
||||
}
|
||||
|
||||
&.noui-slider-success .noUi-handle {
|
||||
background-color: theme-color("success");
|
||||
border-color: theme-color("success");
|
||||
}
|
||||
|
||||
&.noui-slider-warning .noUi-handle {
|
||||
background-color: theme-color("warning");
|
||||
border-color: theme-color("warning");
|
||||
}
|
||||
|
||||
&.noui-slider-info .noUi-handle {
|
||||
background-color: theme-color("info");
|
||||
border-color: theme-color("info");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Contextual colors
|
||||
//
|
||||
|
||||
// Primary
|
||||
.noui-slider-primary {
|
||||
.noUi-connect {
|
||||
background-color: theme-color("primary");
|
||||
}
|
||||
}
|
||||
|
||||
// Danger
|
||||
.noui-slider-danger {
|
||||
.noUi-connect {
|
||||
background-color: theme-color("danger");
|
||||
}
|
||||
}
|
||||
|
||||
// Success
|
||||
.noui-slider-success {
|
||||
.noUi-connect {
|
||||
background-color: theme-color("success");
|
||||
}
|
||||
}
|
||||
|
||||
// Warning
|
||||
.noui-slider-warning {
|
||||
.noUi-connect {
|
||||
background-color: theme-color("warning");
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.noui-slider-info {
|
||||
.noUi-connect {
|
||||
background-color: theme-color("info");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tooltip
|
||||
//
|
||||
|
||||
.noUi-tooltip {
|
||||
position: absolute;
|
||||
background-color: $tooltip-bg;
|
||||
color: $tooltip-color;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
bottom: $tooltip-arrow-height;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Arrow
|
||||
&:after {
|
||||
content: '';
|
||||
border: $tooltip-arrow-height solid transparent;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -($tooltip-arrow-height * 2);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
@include size(0);
|
||||
}
|
||||
|
||||
// Show tooltip on hover
|
||||
.noUi-handle:hover & {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pips
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.noUi-pips {
|
||||
position: absolute;
|
||||
color: $slider-pips-color;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Values base
|
||||
//
|
||||
|
||||
// Default
|
||||
.noUi-value {
|
||||
width: 2.5rem;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: $slider-pips-font-size;
|
||||
line-height: $slider-pips-line-height;
|
||||
}
|
||||
|
||||
// Sub
|
||||
.noUi-value-sub {
|
||||
color: lighten($slider-pips-color, 20%);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Markings base
|
||||
//
|
||||
|
||||
.noUi-marker {
|
||||
position: absolute;
|
||||
background-color: $slider-pips-color;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Horizontal layout
|
||||
//
|
||||
|
||||
// Pips
|
||||
.noUi-pips-horizontal {
|
||||
padding-top: ($slider-pips-spacer-y / 1.5);
|
||||
height: ($line-height-computed + $slider-pips-spacer-y);
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Values
|
||||
.noUi-value-horizontal {
|
||||
margin-left: -(1.25rem);
|
||||
padding-top: $slider-pips-spacer-y;
|
||||
|
||||
&.noUi-value-sub {
|
||||
padding-top: ($slider-pips-spacer-y / 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Markers
|
||||
.noUi-marker-horizontal {
|
||||
|
||||
// Default marker
|
||||
&.noUi-marker {
|
||||
width: $slider-pips-marker-width;
|
||||
height: $slider-pips-marker-height;
|
||||
}
|
||||
|
||||
// Sub marker
|
||||
&.noUi-marker-sub {
|
||||
height: ($slider-pips-marker-height * 2);
|
||||
}
|
||||
|
||||
// Large marker
|
||||
&.noUi-marker-large {
|
||||
height: ($slider-pips-marker-height * 3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Vertical layout
|
||||
//
|
||||
|
||||
// Pips
|
||||
.noUi-pips-vertical {
|
||||
padding-left: ($slider-pips-spacer-y / 1.5);
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
// Values
|
||||
.noUi-value-vertical {
|
||||
margin-top: -($line-height-computed / 2);
|
||||
padding-left: ($slider-pips-spacer-y / 2);
|
||||
|
||||
.noUi-rtl & {
|
||||
margin-top: 0;
|
||||
margin-bottom: -($line-height-computed / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Markers
|
||||
.noUi-marker-vertical {
|
||||
|
||||
// Default marker
|
||||
&.noUi-marker {
|
||||
width: $slider-pips-marker-height;
|
||||
height: $slider-pips-marker-width;
|
||||
}
|
||||
|
||||
// Sub marker
|
||||
&.noUi-marker-sub {
|
||||
width: ($slider-pips-marker-height * 2);
|
||||
}
|
||||
|
||||
// Large marker
|
||||
&.noUi-marker-large {
|
||||
width: ($slider-pips-marker-height * 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # jQuery UI slider pips
|
||||
*
|
||||
* Styles for jQuery UI slider pips extension
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-jqueryui-pips {
|
||||
|
||||
|
||||
// Pips
|
||||
// -------------------------
|
||||
|
||||
.ui-slider-pips {
|
||||
|
||||
|
||||
// Horizontal
|
||||
// ------------------------------
|
||||
|
||||
// Increase bottom margin to fit the pips
|
||||
&.ui-slider-horizontal {
|
||||
margin-bottom: ($slider-height + $slider-pips-spacer-y + $slider-pips-font-size);
|
||||
margin-left: map-get($spacers, 2);
|
||||
margin-right: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
// Default hide the labels and pips that arnt visible
|
||||
.ui-slider-label,
|
||||
.ui-slider-pip-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Now we show any labels that we've set to show in the options
|
||||
.ui-slider-pip-label .ui-slider-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Pip and label wrapper
|
||||
.ui-slider-pip {
|
||||
height: $slider-pips-font-size;
|
||||
line-height: 1;
|
||||
font-size: $slider-pips-font-size;
|
||||
width: 1.25rem;
|
||||
margin-left: -$slider-pips-font-size;
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
top: $slider-pips-spacer-y;
|
||||
left: $slider-pips-spacer-y;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Little pip/line position & size
|
||||
.ui-slider-line {
|
||||
background-color: $slider-pips-color;
|
||||
width: $slider-pips-marker-width;
|
||||
height: $slider-pips-marker-height;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
// Text label postion & size
|
||||
.ui-slider-label {
|
||||
position: absolute;
|
||||
top: ($slider-pips-spacer-y / 1.5);
|
||||
left: 50%;
|
||||
width: 1.25rem;
|
||||
margin-left: -(1.25rem / 2);
|
||||
white-space: nowrap;
|
||||
color: $slider-pips-color;
|
||||
}
|
||||
|
||||
|
||||
// Vertical
|
||||
// ------------------------------
|
||||
|
||||
// Vertical slider needs right-margin, not bottom
|
||||
&.ui-slider-vertical {
|
||||
margin-left: ($slider-pips-marker-width + $slider-pips-spacer-y + $slider-pips-font-size);
|
||||
margin-right: ($slider-pips-marker-width + $slider-pips-spacer-y + $slider-pips-font-size);
|
||||
|
||||
// Align vertical pips left and to right of the slider
|
||||
.ui-slider-pip {
|
||||
text-align: left;
|
||||
top: auto;
|
||||
left: $slider-pips-spacer-y;
|
||||
margin-left: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Vertical line/pip should be horizontal instead
|
||||
.ui-slider-line {
|
||||
width: $slider-pips-marker-height;
|
||||
height: $slider-pips-marker-width;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Text label
|
||||
.ui-slider-label {
|
||||
top: 50%;
|
||||
margin-left: 0;
|
||||
margin-top: -($slider-pips-font-size / 2);
|
||||
left: ($slider-pips-spacer-y / 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tooltips
|
||||
// -------------------------
|
||||
|
||||
.ui-slider-float {
|
||||
|
||||
// Remove the godawful looking focus outline on handle and float
|
||||
.ui-slider-handle:focus {
|
||||
&,
|
||||
.ui-slider-tip,
|
||||
.ui-slider-tip-label {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Style tooltips on handles and on labels
|
||||
.ui-slider-tip,
|
||||
.ui-slider-tip-label {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
top: -(($slider-height * 3) + ($tooltip-padding-y * 2) + $tooltip-padding-y + $slider-height);
|
||||
display: block;
|
||||
left: 50%;
|
||||
background-color: $tooltip-bg;
|
||||
text-align: center;
|
||||
font-size: $tooltip-font-size;
|
||||
color: $tooltip-color;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
opacity: 0;
|
||||
transform: translateX(-50%);
|
||||
@include border-radius($tooltip-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer $component-transition-delay);
|
||||
}
|
||||
|
||||
// Show the tooltip on hover or focus
|
||||
.ui-slider-handle:hover .ui-slider-tip,
|
||||
.ui-slider-handle:focus .ui-slider-tip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
|
||||
// Transition delay
|
||||
@if $enable-transitions {
|
||||
transition-delay: $component-transition-delay;
|
||||
}
|
||||
}
|
||||
|
||||
// Give the tooltip a css triangle arrow
|
||||
.ui-slider-tip:after,
|
||||
.ui-slider-pip .ui-slider-tip-label:after {
|
||||
content: '';
|
||||
border: $tooltip-arrow-height solid transparent;
|
||||
border-top-color: $tooltip-bg;
|
||||
position: absolute;
|
||||
bottom: -($tooltip-arrow-height * 2);
|
||||
left: 50%;
|
||||
margin-left: -($tooltip-arrow-height);
|
||||
@include size(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Footable
|
||||
*
|
||||
* jQuery plugin that aims to make HTML tables on smaller devices look awesome.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-footable {
|
||||
|
||||
// Base
|
||||
.footable {
|
||||
width: 100%;
|
||||
|
||||
// Remove user select
|
||||
> thead > tr > th {
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Setup table styles
|
||||
&.breakpoint {
|
||||
> tbody {
|
||||
> tr {
|
||||
&.footable-detail-show > td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Remove background color from details row
|
||||
&.footable-row-detail:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Add pointer
|
||||
&:hover:not(.footable-row-detail) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Cell with details
|
||||
> .footable-cell-detail {
|
||||
background-color: $gray-100;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// Add expand icon
|
||||
.footable-toggle:before {
|
||||
content: $icon-table-row-expand;
|
||||
display: inline-block;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: (($font-size-base - $icon-font-size) / 2);
|
||||
line-height: 1;
|
||||
padding-right: $element-spacer-x;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Add collapse icon
|
||||
&.footable-detail-show .footable-toggle:before {
|
||||
content: $icon-table-row-collapse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Row styling
|
||||
//
|
||||
|
||||
// Inner wrapper
|
||||
.footable-row-detail-inner {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Row details
|
||||
.footable-row-detail-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
// Grouped details
|
||||
.footable-row-detail-group {
|
||||
display: block;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Name
|
||||
.footable-row-detail-name {
|
||||
display: table-cell;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding-right: ($card-spacer-x * 2);
|
||||
}
|
||||
|
||||
// Value
|
||||
.footable-row-detail-value {
|
||||
display: table-cell;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
+131
@@ -0,0 +1,131 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Autofill extension
|
||||
*
|
||||
* Spreadsheets such as Excel and Google Docs have a very handy data duplication
|
||||
* option of an auto fill tool
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-autofill {
|
||||
|
||||
// Handle
|
||||
.dt-autofill-handle {
|
||||
position: absolute;
|
||||
z-index: 102;
|
||||
border: $table-border-width solid theme-color("primary");
|
||||
background-color: theme-color("primary");
|
||||
@include size(0.5rem);
|
||||
}
|
||||
|
||||
// Select frame
|
||||
.dt-autofill-select {
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
background-color: theme-color("primary");
|
||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 0.3125rem, rgba($white, 0.75) 0.3125rem, rgba($white, 0.75) 0.625rem);
|
||||
|
||||
// Vertical lines
|
||||
&.top,
|
||||
&.bottom {
|
||||
height: $table-border-width;
|
||||
}
|
||||
|
||||
// Horizontal lines
|
||||
&.left,
|
||||
&.right {
|
||||
width: $table-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Confirmation dialog
|
||||
.dt-autofill-list {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 31.25rem;
|
||||
margin-left: -15.63rem;
|
||||
background-color: $modal-content-bg;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
z-index: $zindex-modal;
|
||||
padding: $dropdown-padding-y 0;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// List
|
||||
ul {
|
||||
display: table;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
// List items
|
||||
li {
|
||||
display: table-row;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Highlight row on hover
|
||||
@include hover {
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text label
|
||||
.dt-autofill-question {
|
||||
display: table-cell;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
|
||||
// Text label input
|
||||
input[type=number] {
|
||||
padding: 0.375rem;
|
||||
width: 1.875rem;
|
||||
margin: -0.125rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Confirm button
|
||||
.dt-autofill-button {
|
||||
display: table-cell;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
text-align: right;
|
||||
|
||||
// Button itself
|
||||
.btn {
|
||||
padding: 0.1875rem;
|
||||
background-color: theme-color("primary");
|
||||
color: $white;
|
||||
font-size: 0;
|
||||
|
||||
// Checkmark icon
|
||||
&:after {
|
||||
content: $icon-table-button-confirm;
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $icon-font-size;
|
||||
width: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Mute button on hover
|
||||
@include hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.dt-autofill-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $modal-backdrop-bg;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
opacity: $modal-backdrop-opacity;
|
||||
@include size(100%);
|
||||
}
|
||||
}
|
||||
+192
@@ -0,0 +1,192 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Buttons extension
|
||||
*
|
||||
* The Buttons extension for DataTables provides a common set of options, API
|
||||
* methods and styling to display buttons that will interact with a DataTable
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-buttons {
|
||||
|
||||
// Full width buttons
|
||||
.dt-buttons-full {
|
||||
|
||||
// Container
|
||||
.dt-buttons {
|
||||
float: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
border-bottom: $table-border-width solid $table-border-color;
|
||||
padding-top: $dt-spacer-y;
|
||||
padding-bottom: ($dt-spacer-y / 2);
|
||||
background-color: $table-accent-bg;
|
||||
|
||||
// Button
|
||||
> .btn {
|
||||
margin-bottom: ($dt-spacer-y / 2);
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons. Default alignment is right
|
||||
.dt-buttons {
|
||||
position: relative;
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 $dt-spacer-y $dt-spacer-x;
|
||||
|
||||
// Left display option
|
||||
.dt-buttons-left & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Default buttons
|
||||
> .btn {
|
||||
border-radius: 0;
|
||||
|
||||
// First button
|
||||
&:first-child {
|
||||
@include border-left-radius($btn-border-radius);
|
||||
}
|
||||
|
||||
// Last button
|
||||
&:last-of-type {
|
||||
@include border-right-radius($btn-border-radius);
|
||||
}
|
||||
|
||||
// Add 1px spacing between buttons
|
||||
& + .btn {
|
||||
margin-left: -($btn-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@include media-breakpoint-down(sm) {
|
||||
float: none;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
.btn {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.dt-button-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $modal-backdrop-bg;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
|
||||
// Button collection
|
||||
.dt-button-collection {
|
||||
position: absolute;
|
||||
background-color: $dropdown-bg;
|
||||
display: block;
|
||||
z-index: $zindex-modal;
|
||||
padding: $dropdown-padding-y 0;
|
||||
overflow: hidden;
|
||||
min-width: $dropdown-min-width;
|
||||
column-gap: 0.125rem;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// Force collection dropdown to be right aligned
|
||||
&:not(.fixed) {
|
||||
top: 100%!important;
|
||||
left: auto!important;
|
||||
right: 0!important;
|
||||
}
|
||||
|
||||
// Inner buttons
|
||||
> .dt-button {
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
color: $dropdown-link-color;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
display: block;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Add 1px top spacing between buttons
|
||||
+ .dt-button {
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active {
|
||||
color: $dropdown-link-active-color;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed centered layout
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -($dt-button-collection-2col-width / 4);
|
||||
padding-left: $dropdown-padding-y;
|
||||
padding-right: $dropdown-padding-y;
|
||||
|
||||
// Two columns
|
||||
&.two-column {
|
||||
margin-left: -($dt-button-collection-2col-width / 2);
|
||||
}
|
||||
|
||||
// Three columns
|
||||
&.three-column {
|
||||
margin-left: -($dt-button-collection-3col-width / 2);
|
||||
}
|
||||
|
||||
// Four columns
|
||||
&.four-column {
|
||||
margin-left: -($dt-button-collection-4col-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Inner content
|
||||
> * {
|
||||
-webkit-column-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
// Two columns
|
||||
&.two-column {
|
||||
width: $dt-button-collection-2col-width;
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
// Three columns
|
||||
&.three-column {
|
||||
width: $dt-button-collection-3col-width;
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
// Four columns
|
||||
&.four-column {
|
||||
width: $dt-button-collection-4col-width;
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Columns reorder
|
||||
*
|
||||
* Easily modify the column order of a table through drop-and-drag of column headers
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-colreorder {
|
||||
|
||||
// Highlight cloned header
|
||||
.DTCR_clonedTable {
|
||||
background-color: rgba($white, 0.8);
|
||||
z-index: 202;
|
||||
cursor: move;
|
||||
|
||||
// Mute background and add border
|
||||
th,
|
||||
td {
|
||||
border: $table-border-width solid $table-border-color!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Add colored pointer
|
||||
.DTCR_pointer {
|
||||
width: $table-border-width;
|
||||
background-color: theme-color("primary");
|
||||
z-index: 201;
|
||||
}
|
||||
}
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fixed columns
|
||||
*
|
||||
* Extension that "freezes" in place the left most columns in a scrolling DataTable
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-fixed-columns {
|
||||
|
||||
// Prevent text from wrapping
|
||||
.DTFC_ScrollWrapper {
|
||||
thead th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Block out what is behind the fixed column's header and footer
|
||||
.DTFC_Cloned {
|
||||
background-color: $card-bg;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// In left column
|
||||
.DTFC_LeftWrapper {
|
||||
.DTFC_LeftHeadWrapper,
|
||||
.DTFC_LeftBodyWrapper,
|
||||
.DTFC_LeftFootWrapper {
|
||||
border-right: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// In right column
|
||||
.DTFC_RightWrapper {
|
||||
.DTFC_RightHeadWrapper,
|
||||
.DTFC_RightBodyWrapper,
|
||||
.DTFC_RightFootWrapper {
|
||||
border-left: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove dublicated header arrows and borders
|
||||
.DTFC_LeftBodyWrapper,
|
||||
.DTFC_RightBodyWrapper {
|
||||
.DTFC_Cloned {
|
||||
thead th {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
tbody > tr:first-child {
|
||||
> td,
|
||||
> th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Block out the gap above the scrollbar on the right
|
||||
.DTFC_Blocker {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Fixed Header extension
|
||||
*
|
||||
* This extension lets your users quickly determine what each column refers to
|
||||
* rather than needing to scroll back to the top of the table.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-fixed-header {
|
||||
|
||||
// Headers
|
||||
.fixedHeader-floating,
|
||||
.fixedHeader-locked {
|
||||
background-color: $card-bg;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Floating header
|
||||
.fixedHeader-floating {
|
||||
position: fixed;
|
||||
|
||||
// Remove top border if multiple tables
|
||||
.fixedHeader-floating + &,
|
||||
.fixedHeader-locked + & {
|
||||
border-top: 0!important;
|
||||
}
|
||||
|
||||
// Hide on mobile
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Locked header
|
||||
.fixedHeader-locked {
|
||||
position: absolute;
|
||||
|
||||
// Hide on mobile
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide headers on print
|
||||
@media print {
|
||||
table.fixedHeader-floating {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Key Table extension
|
||||
*
|
||||
* KeyTable provides Excel like cell navigation on any table. Events (focus, blur,
|
||||
* action etc) can be assigned to individual cells, columns, rows or all cells.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-keytable {
|
||||
|
||||
// Focus colors
|
||||
.dataTable {
|
||||
th,
|
||||
td {
|
||||
|
||||
// Default
|
||||
&.focus {
|
||||
outline: ($table-border-width * 2) solid $color-primary-500;
|
||||
outline-offset: -($table-border-width);
|
||||
}
|
||||
|
||||
// Success
|
||||
&.focus-success {
|
||||
background-color: $color-success-50;
|
||||
outline-color: $color-success-500;
|
||||
}
|
||||
|
||||
// Info
|
||||
&.focus-info {
|
||||
background-color: $color-primary-50;
|
||||
outline-color: $color-primary-500;
|
||||
}
|
||||
|
||||
// Warning
|
||||
&.focus-warning {
|
||||
background-color: $color-warning-50;
|
||||
outline-color: $color-warning-500;
|
||||
}
|
||||
|
||||
// Danger
|
||||
&.focus-danger {
|
||||
background-color: $color-danger-50;
|
||||
outline-color: $color-danger-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Responsive extension
|
||||
*
|
||||
* Optimise the table's layout for different screen sizes through the dynamic
|
||||
* insertion and removal of columns from the table
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-responsive {
|
||||
|
||||
// Inline details row
|
||||
.dtr-inline {
|
||||
&.collapsed tbody {
|
||||
tr {
|
||||
td,
|
||||
th {
|
||||
&:before {
|
||||
margin-right: $element-spacer-x;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
||||
&.dataTables_empty:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Column details row
|
||||
.dtr-column {
|
||||
tbody {
|
||||
td,
|
||||
th {
|
||||
&.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Expand/collapse icons
|
||||
//
|
||||
|
||||
.dtr-inline.collapsed tbody tr td:first-child:before,
|
||||
.dtr-inline.collapsed tbody tr th:first-child:before,
|
||||
.dtr-column tbody tr td.control:before,
|
||||
.dtr-column tbody tr th.control:before {
|
||||
content: $icon-table-row-expand;
|
||||
font-family: $icon-font-family;
|
||||
display: inline-block;
|
||||
font-size: $icon-font-size;
|
||||
width: $icon-font-size;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: (($font-size-base - $icon-font-size) / 2);
|
||||
vertical-align: middle;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
|
||||
.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before,
|
||||
.dataTable.dtr-column tbody tr.parent td.control:before,
|
||||
.dataTable.dtr-column tbody tr.parent th.control:before {
|
||||
content: $icon-table-row-collapse;
|
||||
}
|
||||
.dtr-inline.collapsed tbody tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Child rows with details
|
||||
//
|
||||
|
||||
.dataTable {
|
||||
tr {
|
||||
|
||||
// Child row
|
||||
&.child {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dtr-title {
|
||||
display: table-cell;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding-right: ($card-spacer-x * 2);
|
||||
}
|
||||
|
||||
.dtr-data {
|
||||
display: table-cell;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Child cell
|
||||
td.child {
|
||||
white-space: normal;
|
||||
position: relative;
|
||||
|
||||
> ul {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Row Reorder extension
|
||||
*
|
||||
* RowReorder adds the ability for rows in a DataTable to be reordered through
|
||||
* user interaction with the table.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-row-reorder {
|
||||
|
||||
// The movable row
|
||||
.dt-rowReorder-float {
|
||||
position: absolute!important;
|
||||
table-layout: static;
|
||||
outline: $table-border-width dashed $color-grey-500;
|
||||
outline-offset: -($table-border-width);
|
||||
background-color: $card-bg;
|
||||
z-index: $zindex-fixed;
|
||||
cursor: move;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
// The target row
|
||||
.dt-rowReorder-moving {
|
||||
outline: $table-border-width solid $color-grey-500;
|
||||
outline-offset: -($table-border-width);
|
||||
}
|
||||
|
||||
// Hide overflow from <body> tag when moving
|
||||
.dt-rowReorder-noOverflow {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Reorder cell
|
||||
.dataTable td.reorder {
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Datatables Scroller
|
||||
*
|
||||
* Drawing the rows required for the current display only, for fast operation
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-scroller {
|
||||
|
||||
// Base
|
||||
.DTS {
|
||||
|
||||
// Prevent word wrap
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading text
|
||||
.DTS_Loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 12.5rem;
|
||||
height: 1.25rem;
|
||||
margin-top: -($spacer);
|
||||
margin-left: -6.25rem;
|
||||
z-index: 1;
|
||||
|
||||
border: $table-border-width solid $table-border-color;
|
||||
padding: 1.25rem 0;
|
||||
text-align: center;
|
||||
background-color: rgba($white, 0.5);
|
||||
}
|
||||
|
||||
// Scroller areas
|
||||
.dataTables_scrollHead,
|
||||
.dataTables_scrollFoot {
|
||||
background-color: $white;
|
||||
}
|
||||
.dataTables_scrollBody {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Select extension
|
||||
*
|
||||
* Adds item selection capabilities to a DataTable
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable-select {
|
||||
|
||||
// Highlight selected row
|
||||
.dataTable {
|
||||
tbody > tr {
|
||||
&.selected,
|
||||
> .selected {
|
||||
background-color: $dt-ext-select-active-row-bg;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Item select
|
||||
.dataTables_wrapper {
|
||||
.select-info,
|
||||
.select-item {
|
||||
margin-left: $element-spacer-x;
|
||||
|
||||
// On mobile
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
.dataTable tbody {
|
||||
|
||||
// Chackbox base
|
||||
.select-checkbox {
|
||||
position: relative;
|
||||
|
||||
// Checkbox icon base
|
||||
&:before,
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: $checkbox-color;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Box
|
||||
&:before {
|
||||
content: '';
|
||||
background-color: $card-bg;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
margin-top: -($checkbox-size / 2);
|
||||
margin-left: -($checkbox-size / 2);
|
||||
border: $checkbox-border-width solid $checkbox-color;
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
}
|
||||
|
||||
// Checkmark icon
|
||||
.selected .select-checkbox {
|
||||
&:after {
|
||||
content: $icon-checkbox-tick;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
margin-top: -(($checkbox-size - ($checkbox-border-width * 2)) / 2);
|
||||
margin-left: -(($checkbox-size - ($checkbox-border-width * 2)) / 2);
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,593 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Datatables library
|
||||
*
|
||||
* Add advanced interaction controls to any HTML table
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-datatable {
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Table container
|
||||
.dataTable {
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
|
||||
// Header
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
outline: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Add hand cursor to sortable cells
|
||||
.sorting_asc,
|
||||
.sorting_desc,
|
||||
.sorting {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Add right space to avoid text overlap over arrow
|
||||
.sorting,
|
||||
.sorting_asc,
|
||||
.sorting_desc,
|
||||
.sorting_asc_disabled,
|
||||
.sorting_desc_disabled {
|
||||
padding-right: ($dt-spacer-x * 2);
|
||||
}
|
||||
|
||||
|
||||
// Add sorting icon base
|
||||
.sorting:before,
|
||||
.sorting:after,
|
||||
.sorting_asc:after,
|
||||
.sorting_desc:after,
|
||||
.sorting_asc_disabled:after,
|
||||
.sorting_desc_disabled:after {
|
||||
content: '';
|
||||
font-family: $icon-font-family;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $dt-spacer-x;
|
||||
font-size: $font-size-sm;
|
||||
margin-top: -($font-size-sm / 2);
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Icons
|
||||
.sorting {
|
||||
&:before {
|
||||
content: $icon-table-sorting-down;
|
||||
margin-top: -0.125rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:after {
|
||||
content: $icon-table-sorting-up;
|
||||
margin-top: -($font-size-sm - 0.125rem);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.sorting_asc:after {
|
||||
content: $icon-table-sorting-up;
|
||||
opacity: 1;
|
||||
}
|
||||
.sorting_desc:after {
|
||||
content: $icon-table-sorting-down;
|
||||
opacity: 1;
|
||||
}
|
||||
.sorting_asc_disabled:after {
|
||||
content: $icon-table-sorting-up;
|
||||
opacity: 0.25;
|
||||
}
|
||||
.sorting_desc_disabled:after {
|
||||
content: $icon-table-sorting-down;
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
tbody {
|
||||
|
||||
// Remove top border from thead by default
|
||||
+ thead,
|
||||
+ tfoot + thead {
|
||||
> tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight rows and columns
|
||||
th,
|
||||
td {
|
||||
outline: 0;
|
||||
|
||||
// Active cell
|
||||
&.active {
|
||||
background-color: $table-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Center text in empty table
|
||||
.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Collapse borders in bordered table
|
||||
&.table-bordered {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
.dataTables_wrapper {
|
||||
position: relative;
|
||||
flex: none;
|
||||
@include clearfix();
|
||||
|
||||
// Remove top border from bordered table
|
||||
.table-bordered {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// Add top border if card body comes after wrapper
|
||||
+ .card-body {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Processing indicator
|
||||
.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: -50%;
|
||||
margin-top: -25px;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
|
||||
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
|
||||
// Header and footer
|
||||
// ------------------------------
|
||||
|
||||
// Common
|
||||
.datatable-header,
|
||||
.datatable-footer {
|
||||
padding: $dt-spacer-y $dt-spacer-x 0 $dt-spacer-x;
|
||||
@include clearfix();
|
||||
|
||||
// Remove left margin from the first item
|
||||
> div:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Remove horizontal spacing if inside card body
|
||||
.card-body & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Highlight header of footer with .*-accent class
|
||||
&-accent {
|
||||
background-color: $table-accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
.datatable-header {
|
||||
border-bottom: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
// Footer
|
||||
.datatable-footer {
|
||||
border-top: $table-border-width solid $table-head-border-color;
|
||||
}
|
||||
|
||||
|
||||
// Controls
|
||||
// ------------------------------
|
||||
|
||||
// Length menu
|
||||
.dataTables_length {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
margin: 0 0 $dt-spacer-y $dt-spacer-x;
|
||||
|
||||
// Text label
|
||||
> label {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Text, excluding select2 container
|
||||
> span:first-child {
|
||||
float: left;
|
||||
margin: $dt-controls-label-spacer-y $dt-controls-label-spacer-x;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply default .form-control styles to select
|
||||
select {
|
||||
height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Left display option
|
||||
.length-left & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Adjust Select2 menu
|
||||
.select2-container {
|
||||
width: auto;
|
||||
}
|
||||
.select2-choice {
|
||||
min-width: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter
|
||||
.dataTables_filter {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 0 $dt-spacer-y $dt-spacer-x;
|
||||
|
||||
// Text label
|
||||
> label {
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
|
||||
// Add search icon
|
||||
&:after {
|
||||
content: $icon-search-magnifier;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $font-size-sm;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-padding-x;
|
||||
margin-top: -($font-size-sm / 2);
|
||||
line-height: 1;
|
||||
opacity: 0.5;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Text spacing
|
||||
> span {
|
||||
float: left;
|
||||
margin: $dt-controls-label-spacer-y $dt-controls-label-spacer-x;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter input
|
||||
input {
|
||||
outline: 0;
|
||||
width: $dt-filter-width;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
padding-right: ($input-padding-x + ($font-size-sm * 1.5));
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
// Placeholder color
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Right display option
|
||||
.filter-right & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.dataTables_info {
|
||||
float: left;
|
||||
padding: $input-padding-y 0;
|
||||
margin-bottom: $dt-spacer-y;
|
||||
|
||||
// Right alignment
|
||||
.info-right & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination common styles
|
||||
.dataTables_paginate {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin: 0 0 $dt-spacer-y $dt-spacer-x;
|
||||
|
||||
// Button
|
||||
.paginate_button {
|
||||
display: inline-block;
|
||||
padding: $btn-padding-y;
|
||||
min-width: ($font-size-base * $line-height-base) + rem-calc($pagination-border-width * 2) + ($pagination-padding-y * 2);
|
||||
margin-left: 0.125rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: $pagination-color;
|
||||
outline: 0;
|
||||
border: $btn-border-width solid transparent;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// First item
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
background-color: $pagination-hover-bg;
|
||||
}
|
||||
|
||||
// Current active state
|
||||
&.current {
|
||||
@include plain-hover-focus {
|
||||
color: $dt-pagination-active-color;
|
||||
background-color: $dt-pagination-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
@include plain-hover-focus {
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $pagination-disabled-bg;
|
||||
color: $pagination-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Simple paginate
|
||||
&.paging_simple .paginate_button {
|
||||
padding-left: $btn-padding-x;
|
||||
padding-right: $btn-padding-x;
|
||||
|
||||
// Hover state
|
||||
&:not(.disabled) {
|
||||
@include hover-focus {
|
||||
color: $dt-pagination-active-color;
|
||||
background-color: $dt-pagination-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left display option
|
||||
.paginate-left & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Simple pagination style
|
||||
.paging_simple {
|
||||
.paginate_button {
|
||||
@include hover-focus {
|
||||
color: $pagination-active-color;
|
||||
background-color: $pagination-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Scrollable table
|
||||
// ------------------------------
|
||||
|
||||
.dataTables_scroll {
|
||||
clear: both;
|
||||
|
||||
// Scrolling header
|
||||
.dataTables_scrollHead {
|
||||
table {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Scrolling body
|
||||
.dataTables_scrollBody {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
table {
|
||||
border-bottom: 0;
|
||||
|
||||
thead th[class*=sorting] {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr:first-child > td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
|
||||
> .dataTables_sizing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table inside cards
|
||||
// ------------------------------
|
||||
|
||||
// Inside card body
|
||||
.card-body {
|
||||
+ .dataTables_wrapper,
|
||||
+ * > .dataTables_wrapper {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
> .dataTables_wrapper {
|
||||
.datatable-footer {
|
||||
border-top: 0;
|
||||
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.dataTables_info,
|
||||
.dataTables_paginate {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If card header doesn't have bottom border
|
||||
.card-header:not([class*=bg-]) + .dataTables_wrapper {
|
||||
> .datatable-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Bordered table inside card
|
||||
.card > .dataTables_wrapper .table-bordered {
|
||||
border: 0;
|
||||
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> td,
|
||||
> th {
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr:last-child {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive style additions
|
||||
// ------------------------------
|
||||
|
||||
// Simple responsive setup
|
||||
.datatable-scroll-lg,
|
||||
.datatable-scroll,
|
||||
.datatable-scroll-sm {
|
||||
min-height: .01%;
|
||||
}
|
||||
|
||||
// Scroller
|
||||
.datatable-scroll-wrap {
|
||||
width: 100%;
|
||||
min-height: .01%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.datatable-scroll-sm {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.datatable-scroll {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
.datatable-scroll-lg {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Common media queries
|
||||
@include media-breakpoint-down(sm) {
|
||||
.dataTables_info,
|
||||
.dataTables_paginate,
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.DTTT_container,
|
||||
.ColVis {
|
||||
float: none!important;
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
.dataTables_info,
|
||||
.dataTables_paginate {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.datatable-header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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