first commit
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Anytime picker
|
||||
*
|
||||
* jQuery datepicker/timepicker and a Date/String parse/format utility
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.AnyTime-pkr {
|
||||
text-align: center;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.AnyTime-date {
|
||||
float: left;
|
||||
|
||||
& + .AnyTime-time {
|
||||
margin-left: 50px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown container
|
||||
.AnyTime-win {
|
||||
padding: (@list-spacing * 2);
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
display: inline-block;
|
||||
border-radius: @border-radius-base;
|
||||
z-index: 10;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
}
|
||||
|
||||
// Clock
|
||||
.AnyTime-cloak {
|
||||
position: absolute;
|
||||
.opacity(0.7);
|
||||
}
|
||||
|
||||
// Title
|
||||
.AnyTime-hdr {
|
||||
font-size: @font-size-h6;
|
||||
margin: @content-padding-base @content-padding-small;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.AnyTime-x-btn {
|
||||
display: none;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
border-radius: @border-radius-small;
|
||||
.opacity(0.6);
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ed6b';
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
.AnyTime-lbl {
|
||||
font-size: @font-size-base;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
margin-top: 25px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Highlight item colors
|
||||
// ------------------------------
|
||||
|
||||
// Empty buttons in the table
|
||||
.AnyTime-dom-btn-empty,
|
||||
.AnyTime-min-ten-btn-empty,
|
||||
.AnyTime-min-one-btn-empty,
|
||||
.AnyTime-sec-ten-btn-empty,
|
||||
.AnyTime-sec-one-btn-empty {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #fff;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Years
|
||||
.AnyTime-yrs {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @brand-danger;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time
|
||||
.AnyTime-time {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @color-slate-500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.AnyTime-dom-table,
|
||||
.AnyTime-body-yr-selector {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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: 50px;
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
// Date calendar
|
||||
// ------------------------------
|
||||
|
||||
// Table
|
||||
.AnyTime-dom-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Week days
|
||||
.AnyTime-pkr th.AnyTime-dow {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
padding: @padding-base-vertical;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.AnyTime-mon-btn {
|
||||
float: left;
|
||||
}
|
||||
.AnyTime-mon7-btn {
|
||||
clear: left;
|
||||
}
|
||||
.AnyTime-dom-btn:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// 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: @padding-base-vertical @padding-base-horizontal;
|
||||
cursor: pointer;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-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: 40px;
|
||||
}
|
||||
|
||||
.AnyTime-hrs-pm,
|
||||
.AnyTime-mins-ones,
|
||||
.AnyTime-secs-ones {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.AnyTime-mins-tens,
|
||||
.AnyTime-secs-tens {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
// 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: 10px;
|
||||
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%;
|
||||
}
|
||||
|
||||
// Era button
|
||||
.AnyTime-era-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
// Media queries
|
||||
@media (max-width: @screen-sm) {
|
||||
.AnyTime-pkr .AnyTime-date {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.AnyTime-mon-btn {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.AnyTime-date + .AnyTime-time {
|
||||
margin-left: 0;
|
||||
margin-top: 25px;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Datepicker for Bootstrap
|
||||
*
|
||||
* Styles for bootstrap datepicker. Comes as a part of datepaginator.js plugin
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.datepicker {
|
||||
> div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
&.datepicker-dropdown {
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: (@list-spacing * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Datepicker table
|
||||
// ------------------------------
|
||||
|
||||
.datepicker {
|
||||
|
||||
// Main table
|
||||
table {
|
||||
margin: 0;
|
||||
|
||||
// Table items
|
||||
tr td {
|
||||
&.day:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.old,
|
||||
&.new {
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// Today
|
||||
&.today {
|
||||
&,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Date range
|
||||
&.range {
|
||||
&,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.today {
|
||||
&,
|
||||
&.disabled,
|
||||
&.active {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active date
|
||||
&.active,
|
||||
span.active {
|
||||
&,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Year and month selection
|
||||
span {
|
||||
display: block;
|
||||
width: 31%;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
float: left;
|
||||
margin: 1%;
|
||||
cursor: pointer;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.old,
|
||||
&.new {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Switch
|
||||
th.datepicker-switch {
|
||||
font-size: @font-size-h6;
|
||||
font-weight: 400;
|
||||
}
|
||||
thead tr:first-child th,
|
||||
tfoot tr th {
|
||||
cursor: pointer;
|
||||
padding-top: @content-padding-base;
|
||||
padding-bottom: @content-padding-base;
|
||||
line-height: 1;
|
||||
}
|
||||
.cw {
|
||||
width: 16px;
|
||||
padding: 0 2px 0 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
thead tr:first-child th.cw {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Table styles
|
||||
.table-condensed {
|
||||
td,
|
||||
th {
|
||||
text-align: center;
|
||||
padding: @content-padding-small;
|
||||
border-radius: @border-radius-base;
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Days of the week
|
||||
th.dow {
|
||||
padding-top: (@list-spacing * 2);
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// If table is striped
|
||||
.table-striped & table tr {
|
||||
th,
|
||||
td {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Date paginator
|
||||
*
|
||||
* A jQuery plugin which adds date selection to the Bootstrap pagination component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.datepaginator {
|
||||
height: 72px;
|
||||
text-align: center;
|
||||
}
|
||||
.datepaginator-sm {
|
||||
height: 68px;
|
||||
}
|
||||
.datepaginator-lg {
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
|
||||
// Pagination styling
|
||||
// ------------------------------
|
||||
|
||||
.datepaginator {
|
||||
.pagination {
|
||||
white-space: nowrap;
|
||||
|
||||
// List items
|
||||
> li {
|
||||
display: inline-block;
|
||||
|
||||
// All links
|
||||
> a {
|
||||
min-width: auto;
|
||||
text-align: center;
|
||||
border-radius: @border-radius-base;
|
||||
margin-left: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Square corners
|
||||
.dp-nav-square-edges {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Day off
|
||||
.dp-off {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
// No select
|
||||
.dp-no-select {
|
||||
color: #ccc;
|
||||
background-color: #fafafa;
|
||||
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
#dp-calendar {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
// Nav arrows
|
||||
> .dp-nav {
|
||||
height: 72px;
|
||||
padding: 29px 0;
|
||||
width: 38px;
|
||||
line-height: 1;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
> a.dp-nav-sm {
|
||||
height: 68px;
|
||||
padding: 27px 0;
|
||||
}
|
||||
> a.dp-nav-lg {
|
||||
height: 76px;
|
||||
padding: 31px 0;
|
||||
}
|
||||
|
||||
// Items
|
||||
> a.dp-item {
|
||||
height: 72px;
|
||||
padding: 15px 0;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
> a.dp-item-sm {
|
||||
height: 68px;
|
||||
padding: 13px 0;
|
||||
}
|
||||
> a.dp-item-lg {
|
||||
height: 76px;
|
||||
padding: 17px 0;
|
||||
}
|
||||
|
||||
// Dates highlight
|
||||
> .dp-today {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
> .dp-selected {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,511 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Daterange picker
|
||||
*
|
||||
* Date range picker component for Bootstrap
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.daterangepicker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: 5px;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
|
||||
// Override default dropdown styles
|
||||
&.dropdown-menu {
|
||||
max-width: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
z-index: @zindex-dropdown;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Dropup
|
||||
&.dropup {
|
||||
margin-top: -(@list-spacing);
|
||||
}
|
||||
|
||||
// Align containers
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Display calendars on left side
|
||||
&.opensleft {
|
||||
.calendars {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Display calendars on right side
|
||||
&.opensright {
|
||||
.calendars {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// 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: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
margin: @list-spacing;
|
||||
padding: (@list-spacing * 2);
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table
|
||||
// ------------------------------
|
||||
|
||||
.daterangepicker {
|
||||
|
||||
// Table defaults
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
&.week {
|
||||
font-size: 80%;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
th {
|
||||
color: @text-muted;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-small;
|
||||
|
||||
// Icons
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Arrow buttons
|
||||
&.prev,
|
||||
&.next {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Available dates
|
||||
&.available {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table content cells
|
||||
td {
|
||||
|
||||
// Available days
|
||||
&.available {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Inactive days
|
||||
&.off,
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
// Disabled days
|
||||
&.disabled {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
// Highlight dates in range
|
||||
&.in-range {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active date
|
||||
&.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override default condensed styles
|
||||
.table-condensed {
|
||||
tr > th,
|
||||
tr > td {
|
||||
padding: @padding-xs-horizontal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Add extra top padding to day names
|
||||
thead tr:last-child th {
|
||||
padding-top: (@list-spacing * 2);
|
||||
}
|
||||
|
||||
// Month heading
|
||||
.month {
|
||||
font-size: @font-size-h6;
|
||||
line-height: 1;
|
||||
color: @text-color;
|
||||
padding-top: @content-padding-base;
|
||||
padding-bottom: @content-padding-base;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Elements
|
||||
// ------------------------------
|
||||
|
||||
.daterangepicker {
|
||||
|
||||
// Selects
|
||||
select {
|
||||
display: inline-block;
|
||||
|
||||
&.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
&.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.hourselect,
|
||||
&.minuteselect,
|
||||
&.secondselect,
|
||||
&.ampmselect {
|
||||
width: 60px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
.daterangepicker_input {
|
||||
position: relative;
|
||||
|
||||
// Calendar icons
|
||||
i {
|
||||
position: absolute;
|
||||
right: @padding-small-horizontal;
|
||||
top: auto;
|
||||
bottom: ((@input-height-base - @icon-font-size) / 2);
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
// Add right padding for inputs
|
||||
input {
|
||||
padding-left: @padding-small-horizontal;
|
||||
padding-right: (@padding-small-horizontal + @icon-font-size + @padding-base-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// Time picker
|
||||
.calendar-time {
|
||||
text-align: center;
|
||||
margin: @padding-base-horizontal 0;
|
||||
|
||||
// Disabled state
|
||||
select.disabled {
|
||||
color: #ccc;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Ranges dropdown
|
||||
// ------------------------------
|
||||
|
||||
.ranges {
|
||||
background-color: @dropdown-bg;
|
||||
position: relative;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
width: 200px;
|
||||
margin-top: @list-spacing;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
// Remove left margin if on right side
|
||||
.opensright & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Remove left margin if on left side
|
||||
.opensleft & {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// List with links
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: @list-spacing 0;
|
||||
|
||||
// Add top border
|
||||
& + .daterangepicker-inputs {
|
||||
border-top: 1px solid @dropdown-divider-bg;
|
||||
}
|
||||
|
||||
// List item
|
||||
li {
|
||||
color: @text-color;
|
||||
padding: (@padding-base-vertical + 1) @padding-base-horizontal;
|
||||
cursor: pointer;
|
||||
margin-top: 1px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Hover bg color
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Active item color
|
||||
&.active {
|
||||
color: @dropdown-link-active-color;
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
.daterangepicker-inputs {
|
||||
padding: @padding-base-horizontal;
|
||||
padding-top: @padding-base-horizontal + @list-spacing; // we need to match menu vertical spacing
|
||||
|
||||
// Inputs container
|
||||
.daterangepicker_input {
|
||||
|
||||
// Add top margin to the second field
|
||||
& + .daterangepicker_input {
|
||||
margin-top: @padding-base-horizontal + @list-spacing;;
|
||||
}
|
||||
|
||||
// Text label
|
||||
> span {
|
||||
display: block;
|
||||
font-size: @font-size-small;
|
||||
margin-bottom: @padding-base-vertical;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Add top divider
|
||||
& + .range_inputs {
|
||||
border-top: 1px solid @dropdown-divider-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons area
|
||||
.range_inputs {
|
||||
padding: @padding-base-horizontal;
|
||||
|
||||
// Buttons
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-top: @padding-base-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Setup mobile view
|
||||
@media (min-width: @screen-sm) {
|
||||
margin: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom ranges layout
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.daterange-custom {
|
||||
cursor: pointer;
|
||||
|
||||
// Clearing floats
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Labels and badges
|
||||
.label,
|
||||
.badge {
|
||||
margin: 4px 0 0 @element-horizontal-spacing;
|
||||
vertical-align: top;
|
||||
}
|
||||
.label-icon {
|
||||
margin-top: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Layout
|
||||
.daterange-custom-display {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: (@icon-font-size + 5);
|
||||
line-height: 1;
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: '\e9c9';
|
||||
font-family: 'icomoon';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.transition(all ease-in-out 0.2s);
|
||||
|
||||
// Rotate if open/closed
|
||||
.daterange-custom.is-opened & {
|
||||
.rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Date number
|
||||
> i {
|
||||
display: inline-block;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: @heading-letter-spacing;
|
||||
}
|
||||
|
||||
// Date details
|
||||
b {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
font-weight: 400;
|
||||
|
||||
// Month/year
|
||||
> i {
|
||||
font-size: @font-size-mini;
|
||||
display: block;
|
||||
line-height: @font-size-small;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// Line divider
|
||||
em {
|
||||
line-height: 30px;
|
||||
vertical-align: top;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Setup mobile view
|
||||
// ------------------------------
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
|
||||
// Layout
|
||||
.opensleft,
|
||||
.opensright {
|
||||
left: 0!important;
|
||||
right: 0;
|
||||
|
||||
// Stack calendars container
|
||||
.calendars {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Stack elements
|
||||
.daterangepicker& {
|
||||
.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,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Picker base
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Jul 5, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Picker base
|
||||
.picker {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
z-index: 990;
|
||||
.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: 1px solid @dropdown-border;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
max-width: 290px;
|
||||
max-height: 0;
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
// When the picker opens
|
||||
.picker--opened & {
|
||||
max-height: 480px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Date picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Picker box
|
||||
.picker__box {
|
||||
padding: (@list-spacing * 2);
|
||||
}
|
||||
|
||||
// Header
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: @font-size-h6;
|
||||
line-height: 1;
|
||||
padding-top: @content-padding-base;
|
||||
padding-bottom: @content-padding-base;
|
||||
}
|
||||
|
||||
|
||||
// Selectors
|
||||
// ------------------------------
|
||||
|
||||
// Month and year labels
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.picker__year {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
// Month and year selectors
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
border-color: @input-border;
|
||||
height: @input-height-mini;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-small;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
outline: 0;
|
||||
}
|
||||
.picker__select--month {
|
||||
width: 35%;
|
||||
}
|
||||
.picker__select--year {
|
||||
width: 22.5%;
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
// ------------------------------
|
||||
|
||||
// Navigation buttons
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: (@icon-font-size / 2);
|
||||
top: 50%;
|
||||
margin-top: -(@icon-font-size);
|
||||
border-radius: @border-radius-small;
|
||||
line-height: 1;
|
||||
|
||||
&:before {
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
font-size: @icon-font-size;
|
||||
width: @icon-font-size;
|
||||
text-align: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous button
|
||||
.picker__nav--prev {
|
||||
left: 0;
|
||||
|
||||
&:before {
|
||||
content: '\e9c8';
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
.picker__nav--next {
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
content: '\e9cb'
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.picker__nav--disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:before,
|
||||
&:before:hover {
|
||||
cursor: default;
|
||||
background: none;
|
||||
border-right-color: #f5f5f5;
|
||||
border-left-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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: (@list-spacing * 2);
|
||||
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Weekday labels
|
||||
.picker__weekday {
|
||||
width: 14.285714286%;
|
||||
font-size: @font-size-small;
|
||||
text-align: center;
|
||||
padding-bottom: @content-padding-small;
|
||||
padding-top: (@list-spacing * 2);
|
||||
color: @text-muted;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Days on the calendar
|
||||
.picker__day {
|
||||
padding: @padding-base-vertical;
|
||||
}
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid @color-teal-400;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// States
|
||||
// ------------------------------
|
||||
|
||||
// Date focus
|
||||
.picker__day--outfocus {
|
||||
color: #ccc;
|
||||
}
|
||||
.picker__day--infocus:hover,
|
||||
.picker__day--outfocus:hover {
|
||||
cursor: pointer;
|
||||
color: @text-color;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Highlighted date
|
||||
.picker__day--highlighted:before {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.picker__day--highlighted,
|
||||
.picker__day--selected {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.picker__day--highlighted,
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused .picker__day--selected {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Disabled date
|
||||
.picker__day--disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background: #fafafa;
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top-color: #999;
|
||||
}
|
||||
|
||||
.picker__day--highlighted & {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Footer
|
||||
// ------------------------------
|
||||
|
||||
// Contains the "today" and "clear" buttons
|
||||
.picker__footer {
|
||||
text-align: center;
|
||||
|
||||
// Footer buttons
|
||||
button {
|
||||
border: 0;
|
||||
background: #fff;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
border-radius: @border-radius-base;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.picker__button--today:before {
|
||||
content: '';
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -1px;
|
||||
width: 0;
|
||||
border-top: 6px solid @brand-primary;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
.picker__button--close:before {
|
||||
content: '\D7';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
top: 1px;
|
||||
line-height: 1;
|
||||
font-size: @icon-font-size;
|
||||
}
|
||||
.picker__button--clear:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
width: 8px;
|
||||
margin-right: 5px;
|
||||
border-top: 2px solid @brand-danger;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Time picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Container size
|
||||
.picker--time {
|
||||
min-width: 256px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
// Remove padding from picker box
|
||||
.picker--time .picker__box {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// List of items
|
||||
// ------------------------------
|
||||
|
||||
// Items list
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: @list-spacing 0;
|
||||
margin: 0;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// The times on the clock.
|
||||
.picker__list-item {
|
||||
position: relative;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// The clear button
|
||||
.picker--time .picker__button--clear {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
background-color: @btn-default-bg;
|
||||
margin-top: 1px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
text-align: center;
|
||||
margin-bottom: -(@list-spacing);
|
||||
margin-top: @list-spacing;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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: #fff;
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
|
||||
// Selected and hovered/focused time
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Disabled time
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
background-color: #fafafa;
|
||||
color: @text-muted;
|
||||
cursor: @cursor-disabled;
|
||||
z-index: auto;
|
||||
}
|
||||
@@ -0,0 +1,634 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Spectrum color picker
|
||||
*
|
||||
* Flexible and powerful jQuery colorpicker library
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// 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 {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
z-index: @zindex-dropdown;
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
overflow: hidden;
|
||||
.box-sizing(content-box);
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
&.sp-flat {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
white-space: nowrap
|
||||
}
|
||||
}
|
||||
.sp-picker-container,
|
||||
.sp-palette-container {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding-bottom: 300px;
|
||||
margin-bottom: -290px;
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.sp-picker-container {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
// 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: 40px;
|
||||
height: 75%;
|
||||
}
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
|
||||
// Alpha
|
||||
.sp-alpha-enabled {
|
||||
.sp-top {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.sp-alpha {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.sp-alpha-handle {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
bottom: -4px;
|
||||
width: 5px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
border: 1px solid @gray-light;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.sp-alpha {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
// Clear
|
||||
.sp-clear {
|
||||
display: none;
|
||||
}
|
||||
.sp-clear-display {
|
||||
cursor: pointer;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\ee6e';
|
||||
display: block;
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
// Hide icon in previews
|
||||
.sp-preview &:after,
|
||||
.sp-initial &:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
left: 85%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
.box-shadow(0 0 0 1px #ddd inset);
|
||||
}
|
||||
|
||||
// Input
|
||||
.sp-input-container {
|
||||
margin-top: 10px;
|
||||
|
||||
.sp-initial-disabled & {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sp-input {
|
||||
border: 1px solid @input-border;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
width: 100%;
|
||||
background-color: @input-bg;
|
||||
border-radius: @input-border-radius;
|
||||
outline: 0;
|
||||
color: @input-color;
|
||||
}
|
||||
|
||||
// Initial
|
||||
.sp-initial {
|
||||
margin-top: 10px;
|
||||
|
||||
span {
|
||||
width: 50%;
|
||||
height: 25px;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
.sp-thumb-inner {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dragger and slider
|
||||
.sp-dragger {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border: 1px solid #fff;
|
||||
background-color: #333;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
height: 4px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
border: 1px solid @gray-light;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Color preview
|
||||
// ------------------------------
|
||||
|
||||
// Replacer (the little preview div that shows up instead of the <input>)
|
||||
.sp-replacer {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid @input-border;
|
||||
background-color: #fafafa;
|
||||
vertical-align: middle;
|
||||
border-radius: @input-border-radius;
|
||||
|
||||
// States
|
||||
&:hover,
|
||||
&.sp-active {
|
||||
border-color: darken(@input-border, 10%);
|
||||
color: @text-color;
|
||||
|
||||
.sp-dd {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom color replacer
|
||||
&[class*=bg-] {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.sp-dd {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.sp-active .sp-dd {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.sp-replacer {
|
||||
&.sp-disabled {
|
||||
cursor: default;
|
||||
.opacity(0.8);
|
||||
|
||||
&:not([class*=bg-]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @input-border;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-dd,
|
||||
&[class*=bg-] .sp-dd {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color preview
|
||||
.sp-preview {
|
||||
position: relative;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
float: left;
|
||||
z-index: 0;
|
||||
|
||||
.sp-preview-inner,
|
||||
.sp-clear-display {
|
||||
.box-shadow(0 0 0 1px fade(#000, 5%));
|
||||
}
|
||||
|
||||
.sp-replacer[class*=bg-] & {
|
||||
.sp-preview-inner {
|
||||
.box-shadow(0 0 0 1px fade(#000, 50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.sp-dd {
|
||||
float: left;
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
margin: 3px 1px;
|
||||
color: @gray-light;
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: '\e9c5';
|
||||
display: block;
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Gradients
|
||||
// ------------------------------
|
||||
|
||||
// Gradients for hue, saturation and value instead of images. Not pretty... but it works
|
||||
.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 #ccc 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%);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// IE filters do not support multiple color stops.
|
||||
// Generate 6 divs, line them up, and do two color gradients for each.
|
||||
// Yes, really.
|
||||
//
|
||||
|
||||
.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');
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Color palettes
|
||||
// ------------------------------
|
||||
|
||||
// Basic styles
|
||||
.sp-palette {
|
||||
max-width: 220px;
|
||||
}
|
||||
.sp-palette-container {
|
||||
.sp-palette-only & {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
border-right: 1px solid @dropdown-border;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 fade(#000, 10%) inset);
|
||||
|
||||
&:hover {
|
||||
.box-shadow(0 0 0 1px fade(#000, 25%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
.sp-palette & {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
+ .sp-thumb-el {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&.sp-thumb-active {
|
||||
.box-shadow(0 0 0 2px fade(#000, 10%) inset);
|
||||
|
||||
.sp-thumb-inner {
|
||||
.box-shadow(0 0 0 1px fade(#000, 25%) inset);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adding checkmark to the active thumb
|
||||
.sp-palette {
|
||||
.sp-thumb-active {
|
||||
&.sp-thumb-dark,
|
||||
&.sp-thumb-light {
|
||||
.sp-thumb-inner {
|
||||
&:after {
|
||||
content: '\e600';
|
||||
display: block;
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sp-thumb-light .sp-thumb-inner:after {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnail row
|
||||
.sp-palette-row {
|
||||
font-size: 0;
|
||||
|
||||
& + .sp-palette-row {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Picker buttons
|
||||
// ------------------------------
|
||||
|
||||
// Button base
|
||||
.sp-cancel,
|
||||
.sp-choose,
|
||||
.sp-palette-toggle {
|
||||
border: 0;
|
||||
border-radius: @border-radius-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
float: left;
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Button containers
|
||||
.sp-palette-button-container,
|
||||
.sp-button-container {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
// In colored container
|
||||
.sp-container[class*=bg-] & {
|
||||
a,
|
||||
button {
|
||||
background-color: fade(#000, 25%);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button states
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
border: 1px solid transparent;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 3%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
// Choose button
|
||||
.sp-choose {
|
||||
border: 1px solid transparent;
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Cancel and palette toggle buttons
|
||||
.sp-cancel,
|
||||
.sp-palette-toggle {
|
||||
color: @btn-default-color;
|
||||
margin-right: 5px;
|
||||
background-color: @btn-default-bg;
|
||||
margin-right: 4%;
|
||||
border-color: @btn-default-border;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @btn-default-color;
|
||||
}
|
||||
}
|
||||
.sp-palette-toggle {
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Choose button
|
||||
.sp-choose {
|
||||
color: #fff;
|
||||
background-color: @color-slate-500;
|
||||
}
|
||||
Reference in New Issue
Block a user