add plugins

This commit is contained in:
2019-10-13 21:45:30 +02:00
parent 4eac59dd5f
commit f28cc01e82
1860 changed files with 225261 additions and 2 deletions
@@ -0,0 +1,5 @@
@import "buttons";
@import "toggle-switch";
@import "datetimepicker";
@import "scrollbars";
@import "colorpicker";
@@ -0,0 +1,120 @@
// Add percentage of white to a color
@function tint($color, $percent) {
@return mix(white, $color, $percent);
}
// Add percentage of black to a color
@function shade($color, $percent) {
@return mix(black, $color, $percent);
}
@function _linear-positions-parser($pos) {
$type: type-of(nth($pos, 1));
$spec: null;
$degree: null;
$side: null;
$corner: null;
$length: length($pos);
// Parse Side and corner positions
@if ($length > 1) {
@if nth($pos, 1) == "to" { // Newer syntax
$side: nth($pos, 2);
@if $length == 2 { // eg. to top
// Swap for backwards compatability
$degree: _position-flipper(nth($pos, 2));
}
@else if $length == 3 { // eg. to top left
$corner: nth($pos, 3);
}
}
@else if $length == 2 { // Older syntax ("top left")
$side: _position-flipper(nth($pos, 1));
$corner: _position-flipper(nth($pos, 2));
}
@if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
$spec: to $side $corner;
}
@else if $length == 1 {
// Swap for backwards compatability
@if $type == string {
$degree: $pos;
$spec: to _position-flipper($pos);
}
@else {
$degree: -270 - $pos; //rotate the gradient opposite from spec
$spec: $pos;
}
}
$degree: unquote($degree + ",");
$spec: unquote($spec + ",");
@return $degree $spec;
}
@function _position-flipper($pos) {
@return if($pos == left, right, null)
if($pos == right, left, null)
if($pos == top, bottom, null)
if($pos == bottom, top, null);
}
@mixin placeholder {
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@each $placeholder in $placeholders {
&:#{$placeholder}-placeholder {
@content;
}
}
}
@mixin linear-gradient($pos, $G1, $G2: null,
$G3: null, $G4: null,
$G5: null, $G6: null,
$G7: null, $G8: null,
$G9: null, $G10: null,
$fallback: null) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
$pos-spec: null;
$pos-degree: null;
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: null;
}
@if $pos {
$positions: _linear-positions-parser($pos);
$pos-degree: nth($positions, 1);
$pos-spec: nth($positions, 2);
}
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}
@@ -0,0 +1,57 @@
%button {
display: inline-block;
padding: 0.5rem 1rem;
font-weight: 400;
cursor: pointer;
vertical-align: middle;
outline: none;
&:active {
margin: 1px 0 -1px 0;
}
i {
//margin-right: 5px;
}
&.button-small {
padding: 4px 8px;
font-size: 95%;
}
&.button-x-small {
padding: 2px 5px;
font-size: 90%;
}
}
@mixin button-color($color, $text:$white, $lighter:null) {
color: rgba($text, 0.85);
border-radius: $border-radius;
background: $color;
@if ($lighter == null) {
$lighter: lightness($color) > 50;
}
@if ($lighter) {
&:hover {
background: shade($color,15%);
color: $text;
}
&.dropdown-toggle {
border-left: 1px solid lighten($color, 5%);
}
} @else {
&:hover {
background: tint($color,15%);
color: $text;
}
&.dropdown-toggle {
border-left: 1px solid darken($color, 5%);
}
}
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,466 @@
.datetime-picker-wrapper {
position: relative;
input {
padding-right: 2.5rem;
}
.field-icons {
position: absolute;
top: 0;
right: 10px;
bottom: 0;
line-height: 2.5rem;
}
}
.collapse {
display: none;
&.in {
display: block;
}
tr &.in {
display: table-row;
}
tbody &.in {
display: table-row-group;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
@include transition(height .35s ease, visibility .35s ease);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
/* Bootstrap variables styling */
.bootstrap-datetimepicker-widget {
&.dropdown-menu {
position: absolute;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.collapse {
display: none;
visibility: hidden;
&.in {
display: block;
visibility: visible;
}
}
.datepicker-years .picker-switch {
cursor: default !important;
background: inherit !important;
}
.table-condensed > thead > tr > th {
padding: 5px;
}
table {
display: table;
thead {
display: table-header-group;
}
tbody {
display: table-row-group;
}
tr {
display: table-row;
&:hover {
background: inherit;
}
th, td {
border: 0;
display: table-cell;
&:first-child {
padding-left: inherit;
}
&:last-child {
padding-right: inherit;
}
}
}
}
}
/*!
* Datetimepicker for Bootstrap 3
* ! version : 4.7.14
* https://github.com/Eonasdan/bootstrap-datetimepicker/
*/
$bs-datetimepicker-timepicker-font-size: 1.2em !default;
$bs-datetimepicker-active-bg: white !default;
$bs-datetimepicker-active-color: blue !default;
$bs-datetimepicker-border-radius: 3px !default;
$bs-datetimepicker-btn-hover-bg: #ddd !default;
$bs-datetimepicker-disabled-color: #ccc !default;
$bs-datetimepicker-alternate-color: #ccc !default;
$bs-datetimepicker-secondary-border-color: #ccc !default;
$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
$bs-datetimepicker-primary-border-color: white !default;
$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;
.bootstrap-datetimepicker-widget {
list-style: none;
&.dropdown-menu {
margin: 2px 0;
padding: 4px;
width: 19em;
&.timepicker-sbs {
@media (min-width: 768px) {
width: 38em;
}
@media (min-width: 992px) {
width: 38em;
}
@media (min-width: 1200px) {
width: 38em;
}
}
&:before, &:after {
content: '';
display: inline-block;
position: absolute;
}
&.bottom {
&:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid $bs-datetimepicker-secondary-border-color;
border-bottom-color: $bs-datetimepicker-secondary-border-color-rgba;
top: -7px;
left: 7px;
}
&:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid $bs-datetimepicker-primary-border-color;
top: -6px;
left: 8px;
}
}
&.top {
&:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid $bs-datetimepicker-secondary-border-color;
border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
bottom: -7px;
left: 6px;
}
&:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid $bs-datetimepicker-primary-border-color;
bottom: -6px;
left: 7px;
}
}
&.pull-right {
&:before {
left: auto;
right: 6px;
}
&:after {
left: auto;
right: 7px;
}
}
}
.list-unstyled {
margin: 0;
}
a[data-action] {
padding: 6px 0;
}
a[data-action]:active {
box-shadow: none;
}
.timepicker-hour, .timepicker-minute, .timepicker-second {
width: 54px;
font-weight: bold;
font-size: $bs-datetimepicker-timepicker-font-size;
margin: 0;
}
button[data-action] {
padding: 6px;
}
.btn[data-action="incrementHours"]::after {
@extend .sr-only;
content: "Increment Hours";
}
.btn[data-action="incrementMinutes"]::after {
@extend .sr-only;
content: "Increment Minutes";
}
.btn[data-action="decrementHours"]::after {
@extend .sr-only;
content: "Decrement Hours";
}
.btn[data-action="decrementMinutes"]::after {
@extend .sr-only;
content: "Decrement Minutes";
}
.btn[data-action="showHours"]::after {
@extend .sr-only;
content: "Show Hours";
}
.btn[data-action="showMinutes"]::after {
@extend .sr-only;
content: "Show Minutes";
}
.btn[data-action="togglePeriod"]::after {
@extend .sr-only;
content: "Toggle AM/PM";
}
.btn[data-action="clear"]::after {
@extend .sr-only;
content: "Clear the picker";
}
.btn[data-action="today"]::after {
@extend .sr-only;
content: "Set the date to today";
}
.picker-switch {
text-align: center;
&::after {
@extend .sr-only;
content: "Toggle Date and Time Screens";
}
td {
padding: 0;
margin: 0;
height: auto;
width: auto;
line-height: inherit;
span {
line-height: 2.5;
height: 2.5em;
width: 100%;
}
}
}
table {
width: 100%;
margin: 0;
& td,
& th {
text-align: center;
border-radius: $bs-datetimepicker-border-radius;
}
& th {
height: 29px;
line-height: 29px;
width: 29px;
&.picker-switch {
width: 145px;
}
&.disabled,
&.disabled:hover {
background: none;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
&.prev::after {
@extend .sr-only;
content: "Previous Month";
}
&.next::after {
@extend .sr-only;
content: "Next Month";
}
}
& thead tr:first-child th {
cursor: pointer;
&:hover {
background: $bs-datetimepicker-btn-hover-bg;
}
}
& td {
height: 54px;
line-height: 54px;
width: 54px;
&.cw {
font-size: .8em;
height: 20px;
line-height: 20px;
color: $bs-datetimepicker-alternate-color;
}
&.day {
height: 29px;
line-height: 29px;
width: 29px;
}
&.day:hover,
&.hour:hover,
&.minute:hover,
&.second:hover {
background: $bs-datetimepicker-btn-hover-bg;
cursor: pointer;
}
&.old,
&.new {
color: $bs-datetimepicker-alternate-color;
}
&.today {
position: relative;
&:before {
content: '';
display: inline-block;
border: 0 0 7px 7px solid transparent;
border-bottom-color: $bs-datetimepicker-active-bg;
border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
position: absolute;
bottom: 4px;
right: 4px;
}
}
&.active,
&.active:hover {
background-color: $bs-datetimepicker-active-bg;
color: $bs-datetimepicker-active-color;
text-shadow: $bs-datetimepicker-text-shadow;
}
&.active.today:before {
border-bottom-color: #fff;
}
&.disabled,
&.disabled:hover {
background: none;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
span {
display: inline-block;
width: 54px;
height: 54px;
line-height: 54px;
margin: 2px 1.5px;
cursor: pointer;
border-radius: $bs-datetimepicker-border-radius;
&:hover {
background: $bs-datetimepicker-btn-hover-bg;
}
&.active {
background-color: $bs-datetimepicker-active-bg;
color: $bs-datetimepicker-active-color;
text-shadow: $bs-datetimepicker-text-shadow;
}
&.old {
color: $bs-datetimepicker-alternate-color;
}
&.disabled,
&.disabled:hover {
background: none;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
}
}
}
&.usetwentyfour {
td.hour {
height: 27px;
line-height: 27px;
}
}
}
.input-group.date {
& .input-group-addon {
cursor: pointer;
}
}
@@ -0,0 +1,87 @@
$ir_slider_width: 230px;
$ir_slider_height: 20px;
$ir_counter_width: 60px;
$ir_margin: 10px 0;
input[type=range].rangefield {
display: inline-block;
vertical-align: middle;
-webkit-appearance: none;
margin: $ir_margin;
width: $ir_slider_width;
background: none;
&:focus {
outline: none;
}
&::-webkit-slider-runnable-track {
width: $ir_slider_width;
height: $ir_slider_height;
cursor: pointer;
animate: 0.2s;
border-radius: 25px;
}
&::-webkit-slider-thumb {
height: 24px;
width: 35px;
border-radius: 6px;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3px;
}
&::-moz-focus-outer {
border: 0;
}
&::-moz-range-track {
width: $ir_slider_width;
height: $ir_slider_height;
cursor: pointer;
animate: 0.2s;
border-radius: 25px;
}
&::-moz-range-progress {
height: $ir_slider_height;
border-radius: 25px;
}
&::-moz-range-thumb {
height: 24px;
width: 35px;
border-radius: 6px;
cursor: pointer;
}
&::-ms-track {
width: $ir_slider_width;
height: $ir_slider_height;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
&::-ms-fill-lower, input[type=range]::-ms-fill-upper {
border-radius: 50px;
}
&::-ms-thumb {
height: 24px;
width: 35px;
border-radius: 6px;
cursor: pointer;
}
& ~ input[type=number].rangefield {
background: none;
display: inline-block;
width: $ir_counter_width;
text-align: right;
border: 0;
line-height: 16px;
vertical-align: middle;
padding: 0 0 0 5px;
}
}
span.range-append {
display: inline-block;
line-height: 20px;
vertical-align: middle;
margin-left: -3px;
}
@@ -0,0 +1,98 @@
/**
* gemini-scrollbar
* @version 1.3.2
* @link http://noeldelgado.github.io/gemini-scrollbar/
* @license MIT
*/
/* disable selection while dragging */
.gm-scrollbar-disable-selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* fallback for native floating scrollbars */
.gm-prevented {
-webkit-overflow-scrolling: touch;
}
.gm-prevented .gm-scrollbar {
display: none;
}
/* actual gemini-scrollbar styles */
.gm-scrollbar-container {
position: relative;
overflow: hidden!important;
width: 100%;
height: 100%;
}
.gm-scrollbar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 2;
border-radius: 3px;
}
.gm-scrollbar.-vertical {
width: 6px;
top: 2px;
}
.gm-scrollbar.-horizontal {
height: 6px;
left: 2px;
}
.gm-scrollbar .thumb {
position: relative;
display: block;
width: 0;
height: 0;
cursor: pointer;
border-radius: inherit;
}
.gm-scrollbar.-vertical .thumb {
width: 100%;
}
.gm-scrollbar.-horizontal .thumb {
height: 100%;
}
.gm-scrollbar-container .gm-scroll-view {
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
/* @option: autoshow */
.gm-scrollbar-container.gm-autoshow .gm-scrollbar {
opacity: 0;
transition: opacity 120ms ease-out;
}
.gm-scrollbar-container.gm-autoshow:hover .gm-scrollbar,
.gm-scrollbar-container.gm-autoshow:focus .gm-scrollbar {
opacity: 1;
transition: opacity 340ms ease-out;
}
.gm-resize-trigger {
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
pointer-events: none;
z-index: -1;
visibility: hidden;
}
@@ -0,0 +1,20 @@
.switch-toggle {
display: inline-block;
display: inline-flex;
overflow: hidden;
border-radius: $form-border-radius;
line-height: 35px;
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
display: inline-block;
cursor: pointer;
padding: 0 15px;
white-space: nowrap;
}
}