first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,312 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Anytime picker
|
||||
*
|
||||
* jQuery datepicker/timepicker and a Date/String parse/format utility
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-anytime {
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.AnyTime-pkr {
|
||||
text-align: center;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.AnyTime-date {
|
||||
float: left;
|
||||
|
||||
& + .AnyTime-time {
|
||||
margin-left: 3.125rem;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown container
|
||||
.AnyTime-win {
|
||||
padding: $datepicker-padding;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
display: inline-block;
|
||||
z-index: $zindex-tooltip;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
|
||||
// Clock
|
||||
.AnyTime-cloak {
|
||||
position: absolute;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Title
|
||||
.AnyTime-hdr {
|
||||
font-size: $datepicker-title-font-size;
|
||||
margin: $datepicker-padding;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.AnyTime-x-btn {
|
||||
display: none;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
opacity: 0.6;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-action-cross;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
.AnyTime-lbl {
|
||||
font-size: $font-size-base;
|
||||
margin-bottom: ($spacer / 2);
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-top: $spacer;
|
||||
|
||||
&:first-child {
|
||||
margin-top: $dropdown-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Highlight item colors
|
||||
// ------------------------------
|
||||
|
||||
// Years
|
||||
.AnyTime-yrs {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $anytime-year-btn-bg;
|
||||
color: $anytime-year-btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $anytime-month-btn-bg;
|
||||
color: $anytime-month-btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time
|
||||
.AnyTime-time {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $anytime-time-btn-bg;
|
||||
color: $anytime-time-btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.AnyTime-dom-table,
|
||||
.AnyTime-body-yr-selector {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $datepicker-item-active-bg;
|
||||
color: $datepicker-item-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Periods
|
||||
// ------------------------------
|
||||
|
||||
// Years
|
||||
.AnyTime-yrs-past-btn,
|
||||
.AnyTime-yrs-ahead-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
.AnyTime-yr-prior-btn,
|
||||
.AnyTime-yr-cur-btn,
|
||||
.AnyTime-yr-next-btn {
|
||||
display: inline-block;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
|
||||
// Date calendar
|
||||
// ------------------------------
|
||||
|
||||
// Table
|
||||
.AnyTime-dom-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Week days
|
||||
.AnyTime-pkr th.AnyTime-dow {
|
||||
color: $datepicker-item-weekday-color;
|
||||
padding: $datepicker-item-padding;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.AnyTime-mon-btn {
|
||||
float: left;
|
||||
width: (100% / 6); // 6 months per row
|
||||
}
|
||||
.AnyTime-mon7-btn {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
// Make elements inline
|
||||
.AnyTime-time,
|
||||
.AnyTime-hrs-am,
|
||||
.AnyTime-hrs-pm,
|
||||
.AnyTime-mins-tens,
|
||||
.AnyTime-mins-ones,
|
||||
.AnyTime-secs-tens,
|
||||
.AnyTime-secs-ones,
|
||||
.AnyTime-hrs,
|
||||
.AnyTime-mins,
|
||||
.AnyTime-secs,
|
||||
.AnyTime-offs {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Button
|
||||
.AnyTime-btn {
|
||||
padding: $datepicker-item-padding;
|
||||
cursor: pointer;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.ui-state-disabled {
|
||||
cursor: $cursor-disabled;
|
||||
color: $datepicker-item-disabled-color;
|
||||
background-color: $datepicker-item-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Time
|
||||
// ------------------------------
|
||||
|
||||
// Time buttons
|
||||
.AnyTime-hr-btn,
|
||||
.AnyTime-min-ten-btn,
|
||||
.AnyTime-min-one-btn,
|
||||
.AnyTime-sec-ten-btn,
|
||||
.AnyTime-sec-one-btn {
|
||||
min-width: 2.5rem;
|
||||
}
|
||||
|
||||
.AnyTime-hrs-pm,
|
||||
.AnyTime-mins-ones,
|
||||
.AnyTime-secs-ones {
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
.AnyTime-mins-tens,
|
||||
.AnyTime-secs-tens {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
// Off buttons
|
||||
.AnyTime-off-cur-btn {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.AnyTime-off-select-btn {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.AnyTime-off-selector {
|
||||
margin: 0.625rem;
|
||||
position: absolute;
|
||||
}
|
||||
.AnyTime-body-off-selector {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
white-space: nowrap
|
||||
}
|
||||
.AnyTime-off-off-btn {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
// Year and era
|
||||
// ------------------------------
|
||||
|
||||
// Year selector
|
||||
.AnyTime-yr-selector {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
}
|
||||
.AnyTime-body-yr-selector {
|
||||
margin: 0;
|
||||
}
|
||||
.AnyTime-yr-mil,
|
||||
.AnyTime-yr-cent,
|
||||
.AnyTime-yr-dec,
|
||||
.AnyTime-yr-yr,
|
||||
.AnyTime-yr-era {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
// Media queries
|
||||
@include media-breakpoint-down(xs) {
|
||||
.AnyTime-pkr .AnyTime-date {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.AnyTime-mon-btn {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.AnyTime-date + .AnyTime-time {
|
||||
margin-left: 0;
|
||||
margin-top: $spacer;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,489 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Daterange picker
|
||||
*
|
||||
* Date range picker component for Bootstrap
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-daterange {
|
||||
|
||||
// Core
|
||||
.daterangepicker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: $dropdown-spacer;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
z-index: $zindex-tooltip;
|
||||
|
||||
// Override default dropdown styles
|
||||
&.dropdown-menu {
|
||||
max-width: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
// Dropup
|
||||
&.dropup {
|
||||
margin-top: -($dropdown-padding-y);
|
||||
}
|
||||
|
||||
// Align containers
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Display calendars on left side
|
||||
&.opensleft {
|
||||
.calendars {
|
||||
/*rtl:ignore*/
|
||||
float: left;
|
||||
}
|
||||
.calendar {
|
||||
/*rtl:ignore*/
|
||||
margin-right: $datepicker-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// Display calendars on right side
|
||||
&.opensright {
|
||||
.calendars {
|
||||
/*rtl:ignore*/
|
||||
float: right;
|
||||
}
|
||||
.calendar {
|
||||
/*rtl:ignore*/
|
||||
margin-left: $datepicker-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// And remove floats in single picker
|
||||
&.single {
|
||||
.calendar {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Hide range menu
|
||||
.ranges {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Display calendars
|
||||
&.show-calendar .calendar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.calendar {
|
||||
display: none;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
margin: ($datepicker-padding / 2) 0;
|
||||
padding: $datepicker-padding;
|
||||
@include border-radius($dropdown-border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Table
|
||||
.daterangepicker {
|
||||
|
||||
// Table defaults
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
// Week days
|
||||
&.week {
|
||||
font-size: 80%;
|
||||
color: $datepicker-item-weekday-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
th {
|
||||
color: $datepicker-item-weekday-color;
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Arrow buttons
|
||||
&.prev,
|
||||
&.next {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Available dates
|
||||
&.available {
|
||||
@include hover-focus {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table content cells
|
||||
td {
|
||||
|
||||
// Available days
|
||||
&.available {
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Inactive days
|
||||
&.off,
|
||||
&.disabled {
|
||||
color: $datepicker-item-focusout-color;
|
||||
}
|
||||
|
||||
// Disabled days
|
||||
&.disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
|
||||
// Highlight dates in range
|
||||
&.in-range {
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
// Active date
|
||||
&.active {
|
||||
@include plain-hover-focus {
|
||||
color: $datepicker-item-active-color;
|
||||
background-color: $datepicker-item-active-bg;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override default condensed styles
|
||||
.table-condensed {
|
||||
tr > th,
|
||||
tr > td {
|
||||
padding: $datepicker-item-padding;
|
||||
min-width: (($datepicker-item-padding * 2) + $line-height-computed);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
}
|
||||
|
||||
// Add extra top padding to day names
|
||||
thead tr:last-child th {
|
||||
padding-top: $datepicker-padding;
|
||||
}
|
||||
|
||||
// Month heading
|
||||
.month {
|
||||
font-size: $datepicker-title-font-size;
|
||||
color: $body-color;
|
||||
padding-top: ($datepicker-padding / 2);
|
||||
padding-bottom: ($datepicker-padding / 2);
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Elements
|
||||
.daterangepicker {
|
||||
|
||||
// Selects
|
||||
select {
|
||||
display: inline-block;
|
||||
|
||||
&.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
&.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.hourselect,
|
||||
&.minuteselect,
|
||||
&.secondselect,
|
||||
&.ampmselect {
|
||||
width: 3.75rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
.daterangepicker_input {
|
||||
position: relative;
|
||||
|
||||
// Calendar icons
|
||||
i {
|
||||
position: absolute;
|
||||
right: $input-padding-x-sm;
|
||||
top: auto;
|
||||
bottom: ((($input-line-height * $input-font-size) + ($input-padding-y * 2) + rem-calc($input-border-width * 2) - $icon-font-size) / 2);
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
// Add right padding for inputs
|
||||
input {
|
||||
padding-left: $input-padding-x-sm;
|
||||
padding-right: ($input-padding-x-sm + $icon-font-size + $input-padding-y);
|
||||
}
|
||||
}
|
||||
|
||||
// Time picker
|
||||
.calendar-time {
|
||||
text-align: center;
|
||||
margin: $input-padding-y 0;
|
||||
|
||||
// Disabled state
|
||||
select.disabled {
|
||||
color: $gray-600;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ranges dropdown
|
||||
.ranges {
|
||||
background-color: $dropdown-bg;
|
||||
position: relative;
|
||||
margin-top: ($datepicker-padding / 2);
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// List with links
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: $dropdown-padding-y 0;
|
||||
|
||||
// Add top border
|
||||
& + .daterangepicker-inputs {
|
||||
border-top: $border-width solid $dropdown-divider-bg;
|
||||
}
|
||||
|
||||
// List item
|
||||
li {
|
||||
color: $dropdown-link-color;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
cursor: pointer;
|
||||
margin-top: $dropdown-item-spacer-y;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Hover bg color
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active item color
|
||||
&.active {
|
||||
color: $datepicker-item-active-color;
|
||||
background-color: $datepicker-item-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
.daterangepicker-inputs {
|
||||
padding: $datepicker-padding;
|
||||
padding-top: ($datepicker-padding + ($dropdown-padding-y / 2));
|
||||
|
||||
// Inputs container
|
||||
.daterangepicker_input {
|
||||
|
||||
// Add top margin to the second field
|
||||
& + .daterangepicker_input {
|
||||
margin-top: ($datepicker-padding + ($dropdown-padding-y / 2));
|
||||
}
|
||||
|
||||
// Text label
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: map-get($spacers, 2);
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Add top divider
|
||||
& + .range_inputs {
|
||||
border-top: $dropdown-border-width solid $dropdown-divider-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons area
|
||||
.range_inputs {
|
||||
padding: $datepicker-padding;
|
||||
|
||||
// Buttons
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-top: $datepicker-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// If ranges menu has list items
|
||||
ul + .daterangepicker-inputs {
|
||||
padding-left: $dropdown-item-padding-x;
|
||||
padding-right: $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Setup mobile view
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-top: ($datepicker-padding / 2);
|
||||
margin-bottom: ($datepicker-padding / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Custom ranges layout
|
||||
//
|
||||
|
||||
// Container
|
||||
.daterange-custom {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Layout
|
||||
.daterange-custom-display {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
position: relative;
|
||||
padding-left: ($icon-font-size * 1.5);
|
||||
height: (1.75rem * $line-height-base);
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $icon-font-size;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -($icon-font-size / 2);
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Date number
|
||||
> i {
|
||||
display: block;
|
||||
font-size: 1.875rem;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
}
|
||||
|
||||
// Date details
|
||||
b {
|
||||
margin-left: 0.5rem;
|
||||
font-weight: $font-weight-normal;
|
||||
text-align: center;
|
||||
|
||||
// Month/year
|
||||
> i {
|
||||
font-size: $font-size-xs;
|
||||
display: block;
|
||||
line-height: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Line divider
|
||||
em {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Setup mobile view
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
// Layout
|
||||
.opensleft,
|
||||
.opensright {
|
||||
left: 0!important;
|
||||
right: 0;
|
||||
|
||||
// Stack calendars container
|
||||
.calendars {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Stack elements
|
||||
.daterangepicker.opensleft,
|
||||
.daterangepicker.opensright {
|
||||
.ranges,
|
||||
.calendar,
|
||||
.calendars {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Elements
|
||||
.daterangepicker {
|
||||
width: 100%;
|
||||
padding-left: $grid-gutter-width;
|
||||
padding-right: $grid-gutter-width;
|
||||
|
||||
// Remove side margin from calendars
|
||||
.calendar {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Make ranges full width
|
||||
.ranges {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,601 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Spectrum color picker
|
||||
*
|
||||
* Flexible and powerful jQuery colorpicker library
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-spectrum {
|
||||
|
||||
|
||||
// Base styles
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.sp-sat,
|
||||
.sp-val,
|
||||
.sp-top-inner,
|
||||
.sp-color,
|
||||
.sp-hue,
|
||||
.sp-clear-enabled .sp-clear,
|
||||
.sp-preview-inner,
|
||||
.sp-alpha-inner,
|
||||
.sp-thumb-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Hide containers by default
|
||||
.sp-container.sp-input-disabled .sp-input-container,
|
||||
.sp-container.sp-buttons-disabled .sp-button-container,
|
||||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container,
|
||||
.sp-palette-only .sp-picker-container,
|
||||
.sp-palette-disabled .sp-palette-container,
|
||||
.sp-initial-disabled .sp-initial {
|
||||
display: none;
|
||||
}
|
||||
.sp-hidden {
|
||||
display: none!important;
|
||||
}
|
||||
.sp-cf {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Elements
|
||||
.sp-preview,
|
||||
.sp-alpha,
|
||||
.sp-thumb-el {
|
||||
position: relative;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
// Previews
|
||||
.sp-preview-inner,
|
||||
.sp-alpha-inner,
|
||||
.sp-thumb-inner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Picker and palette containers
|
||||
.sp-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
z-index: $zindex-dropdown;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// Flat picker
|
||||
&.sp-flat {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
@include box-shadow($card-box-shadow);
|
||||
}
|
||||
}
|
||||
.sp-picker-container,
|
||||
.sp-palette-container {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
padding: $spectrum-padding;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.sp-picker-container {
|
||||
width: $spectrum-width;
|
||||
}
|
||||
|
||||
// Disable user selection
|
||||
.sp-container,
|
||||
.sp-replacer,
|
||||
.sp-preview,
|
||||
.sp-dragger,
|
||||
.sp-slider,
|
||||
.sp-alpha,
|
||||
.sp-clear,
|
||||
.sp-alpha-handle,
|
||||
.sp-container.sp-dragging .sp-input,
|
||||
.sp-container button {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
// Picker elements
|
||||
// ------------------------------
|
||||
|
||||
// Colors and hue areas
|
||||
.sp-top {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.sp-color {
|
||||
right: 20%;
|
||||
}
|
||||
.sp-hue {
|
||||
left: 85%;
|
||||
height: 100%;
|
||||
}
|
||||
.sp-clear-enabled .sp-hue {
|
||||
top: 2.5rem;
|
||||
height: 75%;
|
||||
}
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
|
||||
// Alpha
|
||||
.sp-alpha-enabled {
|
||||
.sp-top {
|
||||
margin-bottom: 1.625rem;
|
||||
}
|
||||
|
||||
.sp-alpha {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.sp-alpha-handle {
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
bottom: -0.25rem;
|
||||
width: 0.3125rem;
|
||||
/*rtl:ignore*/
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
border: 1px solid $gray-500;
|
||||
background-color: $white;
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
.sp-alpha {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 0.375rem;
|
||||
}
|
||||
|
||||
// Clear
|
||||
.sp-clear {
|
||||
display: none;
|
||||
}
|
||||
.sp-clear-display {
|
||||
cursor: pointer;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: $icon-picker-color-clear;
|
||||
display: block;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1.875rem;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hide icon in previews
|
||||
.sp-preview &:after,
|
||||
.sp-initial &:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
left: 85%;
|
||||
height: 1.875rem;
|
||||
text-align: center;
|
||||
color: $gray-600;
|
||||
box-shadow: 0 0 0 1px $gray-400 inset;
|
||||
}
|
||||
|
||||
// Input
|
||||
.sp-input-container {
|
||||
margin-top: 0.625rem;
|
||||
|
||||
.sp-initial-disabled & {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sp-input {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
width: 100%;
|
||||
background-color: $input-bg;
|
||||
outline: 0;
|
||||
color: $input-color;
|
||||
@include border-radius($input-border-radius);
|
||||
}
|
||||
|
||||
// Initial
|
||||
.sp-initial {
|
||||
margin-top: 0.625rem;
|
||||
|
||||
span {
|
||||
width: 50%;
|
||||
height: 1.563rem;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
.sp-thumb-inner {
|
||||
height: 1.563rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dragger and slider
|
||||
.sp-dragger {
|
||||
border: 1px solid $white;
|
||||
background-color: $gray-900;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
border-radius: $border-radius-circle;
|
||||
@include size(0.375rem);
|
||||
}
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
height: 0.25rem;
|
||||
left: -0.125rem;
|
||||
right: -0.125rem;
|
||||
border: 1px solid $gray-500;
|
||||
background-color: $white;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
|
||||
// Color preview
|
||||
// ------------------------------
|
||||
|
||||
// Replacer (the little preview div that shows up instead of the <input>)
|
||||
.sp-replacer {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 0.3125rem;
|
||||
display: inline-block;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
background-color: $gray-100;
|
||||
color: $gray-600;
|
||||
vertical-align: middle;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// States
|
||||
&:not([class*=bg-]):hover,
|
||||
&:not([class*=bg-]).sp-active {
|
||||
background-color: $gray-200;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
// Custom color replacer
|
||||
&[class*=bg-] {
|
||||
@include plain-hover-focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.sp-replacer {
|
||||
&.sp-disabled {
|
||||
cursor: default;
|
||||
opacity: 0.8;
|
||||
|
||||
@include hover-focus {
|
||||
background-color: $gray-100;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color preview
|
||||
.sp-preview {
|
||||
position: relative;
|
||||
width: 1.625rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.3125rem;
|
||||
float: left;
|
||||
z-index: 0;
|
||||
|
||||
&,
|
||||
.sp-preview-inner {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
.sp-preview-inner,
|
||||
.sp-clear-display {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.05);
|
||||
}
|
||||
|
||||
.sp-replacer[class*=bg-] & {
|
||||
.sp-preview-inner {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.sp-dd {
|
||||
float: left;
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
margin: 0.25rem;
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: $icon-menu-arrow-down;
|
||||
display: block;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Gradients
|
||||
// ------------------------------
|
||||
|
||||
// Gradients for hue, saturation and value instead of images. Not pretty... but it works
|
||||
/*rtl:begin:ignore*/
|
||||
.sp-sat {
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
box-shadow: 0 0 0 1px $gray-500 inset;
|
||||
}
|
||||
.sp-val {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
}
|
||||
.sp-hue {
|
||||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
|
||||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
|
||||
//
|
||||
// IE filters do not support multiple color stops.
|
||||
// Generate 6 divs, line them up, and do two color gradients for each.
|
||||
// Yes, really.
|
||||
//
|
||||
|
||||
/*rtl:begin:ignore*/
|
||||
.sp-1 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||
}
|
||||
.sp-2 {
|
||||
height: 16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||
}
|
||||
.sp-3 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||
}
|
||||
.sp-4 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||
}
|
||||
.sp-5 {
|
||||
height: 16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||
}
|
||||
.sp-6 {
|
||||
height: 17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
|
||||
// Color palettes
|
||||
// ------------------------------
|
||||
|
||||
// Basic styles
|
||||
.sp-palette {
|
||||
max-width: $spectrum-max-width;
|
||||
}
|
||||
|
||||
// Palette thumbs
|
||||
.sp-thumb-el {
|
||||
position: relative;
|
||||
|
||||
.sp-palette & {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Add 1px inner semi-transparent border
|
||||
.sp-thumb-inner {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.1) inset;
|
||||
|
||||
@include hover {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.25) inset;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-palette & {
|
||||
@include size(1rem);
|
||||
|
||||
+ .sp-thumb-el {
|
||||
margin-left: 0.3125rem;
|
||||
}
|
||||
|
||||
&.sp-thumb-active {
|
||||
box-shadow: 0 0 0 2px rgba($black, 0.1) inset;
|
||||
|
||||
.sp-thumb-inner {
|
||||
box-shadow: 0 0 0 1px rgba($black, 0.25) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adding checkmark to the active thumb
|
||||
.sp-palette {
|
||||
.sp-thumb-active {
|
||||
&.sp-thumb-dark,
|
||||
&.sp-thumb-light {
|
||||
.sp-thumb-inner {
|
||||
&:after {
|
||||
content: $icon-checkbox-tick;
|
||||
display: block;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $icon-font-size;
|
||||
line-height: 1;
|
||||
color: $white;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sp-thumb-light .sp-thumb-inner:after {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnail row
|
||||
.sp-palette-row {
|
||||
font-size: 0;
|
||||
|
||||
& + .sp-palette-row {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Picker buttons
|
||||
// ------------------------------
|
||||
|
||||
// Button base
|
||||
.sp-cancel,
|
||||
.sp-choose,
|
||||
.sp-palette-toggle {
|
||||
border: 0;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
float: left;
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@include border-radius($btn-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Button containers
|
||||
.sp-palette-button-container,
|
||||
.sp-button-container {
|
||||
margin-top: ($spacer / 2);
|
||||
text-align: center;
|
||||
|
||||
// In colored container
|
||||
.sp-container[class*=bg-] & {
|
||||
a,
|
||||
button {
|
||||
background-color: rgba($black, 0.25);
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
@include hover-focus {
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button states
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
border: $btn-border-width solid transparent;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $btn-light-hover-color;
|
||||
background-color: $btn-light-hover-bg;
|
||||
border-color: $btn-light-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Choose button
|
||||
.sp-choose {
|
||||
border: $btn-border-width solid transparent;
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
box-shadow: $btn-dark-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Cancel and palette toggle buttons
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
color: $btn-light-color;
|
||||
margin-right: 0.3125rem;
|
||||
background-color: $btn-light-bg;
|
||||
margin-right: 4%;
|
||||
border-color: $btn-light-border-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $btn-light-color;
|
||||
}
|
||||
}
|
||||
.sp-palette-toggle {
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Choose button
|
||||
.sp-choose {
|
||||
color: $spectrum-choose-btn-color;
|
||||
background-color: $spectrum-choose-btn-bg;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Picker base
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-pickadate {
|
||||
|
||||
// Picker base
|
||||
.picker {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: -($dropdown-border-width);
|
||||
z-index: $zindex-tooltip;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Input element
|
||||
.picker__input {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// The base of the picker
|
||||
.picker__holder {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
min-width: $pickadate-min-width;
|
||||
max-width: $pickadate-max-width;
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@include border-bottom-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
|
||||
// When the picker opens
|
||||
.picker--opened & {
|
||||
max-height: $pickadate-max-height;
|
||||
border-top-width: $dropdown-border-width;
|
||||
border-bottom-width: $dropdown-border-width;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Date picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-pickadate {
|
||||
|
||||
|
||||
//
|
||||
// Base
|
||||
//
|
||||
|
||||
// Picker box
|
||||
.picker__box {
|
||||
padding: $datepicker-padding;
|
||||
}
|
||||
|
||||
// Header
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: $datepicker-title-font-size;
|
||||
line-height: 1;
|
||||
padding-top: $datepicker-padding;
|
||||
padding-bottom: $datepicker-padding;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Selectors
|
||||
//
|
||||
|
||||
// Month and year labels
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
font-weight: $font-weight-semibold;
|
||||
display: inline-block;
|
||||
margin-left: map-get($spacers, 1);
|
||||
margin-right: map-get($spacers, 1);
|
||||
}
|
||||
.picker__year {
|
||||
color: $datepicker-item-year-color;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Month and year selectors
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
background-clip: padding-box;
|
||||
margin-left: map-get($spacers, 1);
|
||||
margin-right: map-get($spacers, 1);
|
||||
outline: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Navigation
|
||||
//
|
||||
|
||||
// Navigation buttons
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: ($icon-font-size / 2);
|
||||
top: 50%;
|
||||
margin-top: -($icon-font-size);
|
||||
line-height: 1;
|
||||
@include border-radius($border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Prev and next nav
|
||||
&:before {
|
||||
font-family: $icon-font-family;
|
||||
display: block;
|
||||
font-size: $icon-font-size;
|
||||
width: $icon-font-size;
|
||||
text-align: center;
|
||||
@include ll-font-smoothing();
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
cursor: pointer;
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous button
|
||||
.picker__nav--prev {
|
||||
left: 0;
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-nav-prev;
|
||||
}
|
||||
@else {
|
||||
content: $icon-nav-next;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
.picker__nav--next {
|
||||
right: 0;
|
||||
|
||||
// Icon
|
||||
&:before {
|
||||
@if $direction == 'LTR' {
|
||||
content: $icon-nav-next;
|
||||
}
|
||||
@else {
|
||||
content: $icon-nav-prev;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.picker__nav--disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:before,
|
||||
&:before:hover {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
// Calendar table of dates
|
||||
.picker__table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
font-size: inherit;
|
||||
width: 100%;
|
||||
margin-bottom: $datepicker-padding;
|
||||
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Weekday labels
|
||||
.picker__weekday {
|
||||
width: 14.285714286%;
|
||||
text-align: center;
|
||||
padding-bottom: ($datepicker-padding / 2);
|
||||
padding-top: $datepicker-padding;
|
||||
color: $datepicker-item-weekday-color;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
// Days on the calendar
|
||||
.picker__day {
|
||||
padding: $datepicker-item-padding;
|
||||
min-width: (($datepicker-item-padding * 2) + $line-height-computed);
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.125rem;
|
||||
right: 0.125rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 0.375rem solid $datepicker-item-active-bg;
|
||||
border-left: 0.375rem solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Date focus
|
||||
.picker__day--outfocus {
|
||||
color: $datepicker-item-focusout-color;
|
||||
}
|
||||
.picker__day--infocus,
|
||||
.picker__day--outfocus {
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover {
|
||||
cursor: pointer;
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Highlighted date
|
||||
.picker__day--highlighted:before {
|
||||
border-top-color: $datepicker-item-active-color;
|
||||
}
|
||||
.picker__day--highlighted,
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
color: $datepicker-item-active-color;
|
||||
background-color: $datepicker-item-active-bg;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused .picker__day--selected {
|
||||
background-color: $datepicker-item-active-bg;
|
||||
color: $datepicker-item-active-color;
|
||||
}
|
||||
|
||||
// Disabled date
|
||||
.picker__day--disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $datepicker-item-disabled-bg;
|
||||
color: $gray-600;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top-color: $datepicker-item-disabled-color;
|
||||
}
|
||||
|
||||
.picker__day--highlighted & {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $datepicker-item-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
// Contains the "today" and "clear" buttons
|
||||
.picker__footer {
|
||||
text-align: center;
|
||||
|
||||
// Footer buttons
|
||||
button {
|
||||
border: 0;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
font-weight: $font-weight-semibold;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
@include border-radius($btn-border-radius);
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
outline: 0;
|
||||
color: $datepicker-item-hover-color;
|
||||
background-color: $datepicker-item-hover-bg;
|
||||
}
|
||||
|
||||
// Indicator
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:disabled {
|
||||
@include plain-hover-focus {
|
||||
background-color: transparent;
|
||||
color: $gray-600;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.picker__button--today:before {
|
||||
content: '';
|
||||
margin-right: $element-spacer-x;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -0.0625rem;
|
||||
width: 0;
|
||||
border-top: 0.375rem solid $color-primary-500;
|
||||
border-left: 0.375rem solid transparent;
|
||||
}
|
||||
.picker__button--close:before {
|
||||
content: '\D7';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: $element-spacer-x;
|
||||
top: 0.0625rem;
|
||||
line-height: 1;
|
||||
font-size: $icon-font-size;
|
||||
}
|
||||
.picker__button--clear:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -0.1875rem;
|
||||
width: 0.5rem;
|
||||
margin-right: $element-spacer-x;
|
||||
border-top: 0.125rem solid $color-danger-500;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Time picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-pickadate {
|
||||
|
||||
// Container size
|
||||
.picker--time {
|
||||
min-width: $pickatime-min-width;
|
||||
max-width: $pickatime-max-width;
|
||||
}
|
||||
|
||||
// Remove padding from picker box
|
||||
.picker--time .picker__box {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// List of items
|
||||
//
|
||||
|
||||
// Items list
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: $dropdown-padding-y 0;
|
||||
margin: 0;
|
||||
max-height: $pickatime-max-height;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// The times on the clock.
|
||||
.picker__list-item {
|
||||
position: relative;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
cursor: pointer;
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// The clear button
|
||||
.picker--time .picker__button--clear {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
background-color: $gray-100;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-top: $border-width solid $dropdown-divider-bg;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: -($dropdown-padding-y);
|
||||
margin-top: $dropdown-padding-y;
|
||||
@include transition(all ease-in-out $component-transition-timer);
|
||||
|
||||
// Hocer state
|
||||
@include hover-focus {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// States
|
||||
//
|
||||
|
||||
// Highlighted and hovered/focused time
|
||||
.picker__list-item--highlighted {
|
||||
z-index: 10;
|
||||
}
|
||||
.picker__list-item--highlighted,
|
||||
.picker__list-item--highlighted:hover,
|
||||
.picker--focused .picker__list-item--highlighted {
|
||||
cursor: pointer;
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Selected and hovered/focused time
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
color: $dropdown-link-active-color;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Disabled time
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
background-color: transparent;
|
||||
cursor: $cursor-disabled;
|
||||
z-index: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user