init
This commit is contained in:
Loïc Guibert
@@ -0,0 +1,5 @@
|
||||
@import "buttons";
|
||||
@import "colorpicker";
|
||||
@import "datetimepicker";
|
||||
@import "finderjs";
|
||||
@import "toggle-switch";
|
||||
@@ -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,91 @@
|
||||
%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%;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: .6;
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin button-color($color, $text:$white, $lighter:null) {
|
||||
color: rgba(red($text), green($text), blue($text), opacity($text) - 0.15);
|
||||
|
||||
border-radius: $border-radius;
|
||||
background: $color;
|
||||
|
||||
@if ($lighter == null) {
|
||||
$lighter: lightness($color) > 50;
|
||||
}
|
||||
|
||||
@if ($lighter) {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: shade($color,15%);
|
||||
color: $text;
|
||||
}
|
||||
&.dropdown-toggle {
|
||||
border-left: 1px solid lighten($color, 5%);
|
||||
}
|
||||
} @else {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: tint($color,15%);
|
||||
color: $text;
|
||||
}
|
||||
&.dropdown-toggle {
|
||||
border-left: 1px solid darken($color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-color-border($color, $text:$white, $lighter:null) {
|
||||
color: $text;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid $color;
|
||||
|
||||
@if ($lighter == null) {
|
||||
$lighter: lightness($color) > 50;
|
||||
}
|
||||
|
||||
@if ($lighter) {
|
||||
&:hover {
|
||||
border-color: shade($color,15%);
|
||||
color: $text;
|
||||
}
|
||||
&.dropdown-toggle {
|
||||
border-left: 1px solid lighten($color, 5%);
|
||||
}
|
||||
} @else {
|
||||
&:hover {
|
||||
border-color: 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,161 @@
|
||||
.fjs-container {
|
||||
display: flex;
|
||||
font-size: .9em;
|
||||
min-height: 400px;
|
||||
overflow: auto;
|
||||
overflow-x: scroll;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fjs-col {
|
||||
border-right: solid 1px lightgray;
|
||||
max-height: 600px;
|
||||
min-height: inherit;
|
||||
min-width: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.fjs-item a {
|
||||
color: black;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fjs-item a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fjs-item a span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fjs-item a span i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
//.fjs-active a {
|
||||
// background-color: #DEDEDE;
|
||||
//}
|
||||
//
|
||||
//.fjs-col:nth-last-child(2) .fjs-active a,
|
||||
//.fjs-col:last-child .fjs-active a {
|
||||
// background-color: dodgerblue;
|
||||
// color: white;
|
||||
//}
|
||||
|
||||
.info-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fjs-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fjs-item-content {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fa-caret-right {
|
||||
//color: gray;
|
||||
padding: 0 0 0 .5em;
|
||||
}
|
||||
|
||||
.fjs-col:nth-last-child(2) .fjs-active a .fa-caret-right,
|
||||
.fjs-col:last-child .fjs-active a .fa-caret-right {
|
||||
//color: white;
|
||||
}
|
||||
|
||||
.leaf-col {
|
||||
align-items: center;
|
||||
border-right: 0;
|
||||
display: flex;
|
||||
flex: 2;
|
||||
justify-content: center;
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
|
||||
.leaf-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.leaf-row .fa {
|
||||
//color: #A7A7A7;
|
||||
font-size: 4em;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.leaf-row .fa-refresh {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.leaf-col .meta {
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
.leaf-col .meta strong {
|
||||
//color: #C1C1C1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.leaf-col .meta:first-of-type {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.fjs-path-bar {
|
||||
font-size: 0.9em;
|
||||
padding: .25rem .5rem;
|
||||
//background: #f6f6f6;
|
||||
//border-bottom: 1px solid #eee;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
[data-breadcrumb-node] {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa-chevron-right {
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
|
||||
[data-parents-field-name] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fjs-container, .fjs-path-bar {
|
||||
.fa-folder {
|
||||
color: #90E4FF;
|
||||
}
|
||||
|
||||
.fa-file-o {
|
||||
color: #A7A7A7;
|
||||
}
|
||||
|
||||
.fa-external-link {
|
||||
color: #629EFF;
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
@@ -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,18 @@
|
||||
@mixin native-scrollbars($bar, $track) {
|
||||
& {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $bar $track;
|
||||
}
|
||||
|
||||
/* Works on Chrome/Edge/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $track;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $bar;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user