first commit
This commit is contained in:
dev-chiefworks
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user