Archive: Namaste PHP AMQP framework v1.0 (2017-2020)
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
This commit is contained in:
337
html/scss/pro/picker/_default-date.scss
Executable file
337
html/scss/pro/picker/_default-date.scss
Executable file
@@ -0,0 +1,337 @@
|
||||
/* ==========================================================================
|
||||
$BASE-DATE-PICKER
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* The picker box.
|
||||
*/
|
||||
|
||||
.picker__box {
|
||||
padding: 0;
|
||||
border-radius: $datepicker-box-padding;
|
||||
overflow: hidden;
|
||||
/**
|
||||
* The header containing the month and year stuff.
|
||||
*/
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-bottom: $datepicker-header-mb;
|
||||
select {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.picker__date-display {
|
||||
text-align: center;
|
||||
background-color: $datepicker-date-bg;
|
||||
@extend .white-text;
|
||||
padding-bottom: $datepicker-date-display-pb;
|
||||
font-weight: $datepicker-date-display-font-weight;
|
||||
margin-bottom: $datepicker-date-display-mb;
|
||||
.picker__weekday-display {
|
||||
background-color: $datepicker-weekday-bg;
|
||||
padding: $datepicker-weekday-display-padding;
|
||||
font-weight: $datepicker-weekday-display-font-weight;
|
||||
letter-spacing: $datepicker-weekday-display-letter-spacing;
|
||||
font-size: $datepicker-weekday-display-font-size;
|
||||
margin-bottom: $datepicker-weekday-display-mb;
|
||||
}
|
||||
.picker__month-display {
|
||||
text-transform: uppercase;
|
||||
font-size: $datepicker-month-display-font-size;
|
||||
}
|
||||
.picker__day-display {
|
||||
font-size: $datepicker-day-display-font-size;
|
||||
font-weight: $datepicker-day-display-font-weight;
|
||||
}
|
||||
.picker__year-display {
|
||||
font-size: $datepicker-year-display-font-size;
|
||||
color: $datepicker-year;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The month and year labels.
|
||||
*/
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
display: inline-block;
|
||||
margin-left: $datepicker-year-ml;
|
||||
margin-right: $datepicker-year-mr;
|
||||
}
|
||||
/**
|
||||
* The month and year selectors.
|
||||
*/
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
height: $datepicker-select-month-height;
|
||||
padding: 0;
|
||||
margin-left: $datepicker-select-month-ml;
|
||||
margin-right: $datepicker-select-month-mr;
|
||||
display: inline-block;
|
||||
&:focus {
|
||||
border-color: $datepicker-focus;
|
||||
}
|
||||
}
|
||||
.picker__select--year {
|
||||
width: $datepicker-select-year;
|
||||
}
|
||||
// Modified
|
||||
.picker__select--month.browser-default {
|
||||
display: inline;
|
||||
@extend .white;
|
||||
width: $datepicker-select-month-browser-width;
|
||||
}
|
||||
.picker__select--year.browser-default {
|
||||
display: inline;
|
||||
@extend .white;
|
||||
width: $datepicker-select-year-browser-width;
|
||||
}
|
||||
/**
|
||||
* The month navigation buttons.
|
||||
*/
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: $datepicker-nav-prev-next-py $datepicker-nav-prev-next-px;
|
||||
width: $datepicker-nav-prev-next-width;
|
||||
height: $datepicker-nav-prev-next-height;
|
||||
box-sizing: content-box;
|
||||
bottom: 0;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $black-base;
|
||||
background: $datepicker-selected-outfocus;
|
||||
}
|
||||
&:before {
|
||||
content: " ";
|
||||
border-top: $datepicker-nav-prev-next-bt solid transparent;
|
||||
border-bottom: $datepicker-nav-prev-next-bb solid transparent;
|
||||
border-right: $datepicker-nav-prev-next-br solid $datepicker-nav-prev-next-br-color;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.picker__nav--prev {
|
||||
left: $datepicker-nav-prev-left;
|
||||
padding-right: $datepicker-nav-prev-pr;
|
||||
}
|
||||
.picker__nav--next {
|
||||
right: $datepicker-nav-next-right;
|
||||
padding-left: $datepicker-nav-next-pf;
|
||||
&:before {
|
||||
border-right: 0;
|
||||
border-left: $datepicker-nav-next-border-left solid $datepicker-nav-prev-next-br-color;
|
||||
}
|
||||
}
|
||||
.picker__nav--disabled,
|
||||
.picker__nav--disabled:hover,
|
||||
.picker__nav--disabled:before,
|
||||
.picker__nav--disabled:before:hover {
|
||||
cursor: default;
|
||||
background: none;
|
||||
border-right-color: $grey-lighten-4;
|
||||
border-left-color: $grey-lighten-4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* The calendar table of dates
|
||||
*/
|
||||
.picker__table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
font-size: $datepicker-table-font-size;
|
||||
width: $datepicker-table-width;
|
||||
margin-top: $datepicker-table-mt;
|
||||
margin-bottom: $datepicker-table-mb;
|
||||
th, td {
|
||||
text-align: center;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/**
|
||||
* The weekday labels
|
||||
*/
|
||||
.picker__weekday {
|
||||
width: $datepicker-table-weekday-width;
|
||||
font-size: $datepicker-table-weekday-font-size;
|
||||
padding-bottom: $datepicker-table-weekday-padding-bottom;
|
||||
color: $datepicker-color-mdb;
|
||||
font-weight:$datepicker-table-weekday-font-weight;
|
||||
/* Increase the spacing a tad */
|
||||
@media (min-height: $pickerweekday-padb-breakpoint) {
|
||||
padding-bottom: $datepicker-table-weekday-padding-bottom;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The days on the calendar
|
||||
*/
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
letter-spacing: $datepicker-table-day-today-letter-spacing;
|
||||
padding: $datepicker-table-day-today-py 0;
|
||||
font-weight: $datepicker-table-day-today-font-weight;
|
||||
border: $datepicker-table-day-today-border solid transparent;
|
||||
}
|
||||
.picker__day.picker__day--today {
|
||||
color: $datepicker-selected;
|
||||
}
|
||||
.picker__day--disabled{
|
||||
&:before {
|
||||
border-top-color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
.picker__day--infocus{
|
||||
color: $datepicker-table-day-infocus-color;
|
||||
letter-spacing: $datepicker-table-day-infocus-letter-spacing;
|
||||
padding: $datepicker-table-day-infocus-py 0;
|
||||
font-weight: $datepicker-table-day-infocus-font-weight;
|
||||
border: $datepicker-table-day-infocus-color transparent;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $black;
|
||||
font-weight: $datepicker-table-day-infocus-hover-font-weight;
|
||||
}
|
||||
}
|
||||
.picker__day--outfocus {
|
||||
display: none;
|
||||
padding: $datepicker-table-day-outfocus-py 0;
|
||||
@extend .white-text;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $datepicker-table-day-outfocus-hover-color;
|
||||
font-weight: $datepicker-table-day-outfocus-hover-font-weight;
|
||||
}
|
||||
}
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused {
|
||||
// Circle background
|
||||
border-radius: $datepicker-table-day-selected-hover-border-radius;
|
||||
transform: $datepicker-table-day-selected-hover-transform;
|
||||
background-color: $datepicker-selected;
|
||||
&.picker__day--outfocus {
|
||||
background-color: $datepicker-selected-outfocus;
|
||||
}
|
||||
@extend .white-text;
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
.picker__day--disabled,
|
||||
.picker__day--disabled:hover,
|
||||
.picker--focused {
|
||||
background: $grey-lighten-4;
|
||||
border-color: $grey-lighten-4;
|
||||
color: $datepicker-table-day-outfocus-hover-color;
|
||||
cursor: default;
|
||||
}
|
||||
.picker__day--highlighted.picker__day--disabled,
|
||||
.picker__day--highlighted.picker__day--disabled:hover {
|
||||
background: $datepicker-table-day-higlighted-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* The footer containing the "today", "clear", and "close" buttons.
|
||||
*/
|
||||
.picker__footer {
|
||||
text-align: right;
|
||||
padding: $datepicker-footer-py $datepicker-footer-px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.picker__button--today,
|
||||
.picker__button--clear,
|
||||
.picker__button--close {
|
||||
border: $datepicker-footer-today-clear-button-border solid $white;
|
||||
background: $white;
|
||||
font-size: $datepicker-footer-today-clear-button-font-size;
|
||||
padding: $datepicker-footer-today-clear-button-padding;
|
||||
font-weight: $datepicker-footer-today-clear-button-font-weight;
|
||||
width: $datepicker-footer-today-clear-button-width;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $black;
|
||||
background: $datepicker-footer-today-clear-button-hover-color;
|
||||
border-bottom-color: $datepicker-footer-today-clear-button-hover-color;
|
||||
}
|
||||
&:focus {
|
||||
background: $datepicker-footer-today-clear-button-hover-color;
|
||||
border-color: $datepicker-focus;
|
||||
outline: none;
|
||||
}
|
||||
&:before {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.picker__button--today,
|
||||
.picker__button--clear{
|
||||
&:before {
|
||||
content: " ";
|
||||
margin-right: $datepicker-footer-today-clear-button-before-mr;
|
||||
}
|
||||
}
|
||||
.picker__button--today{
|
||||
&:before {
|
||||
top: $datepicker-footer-today-button-before-top;
|
||||
width: 0;
|
||||
border-top: $datepicker-footer-today-button-before-bt solid $datepicker-footer-today-button-before-bt-color;
|
||||
border-left: $datepicker-footer-today-button-before-bl solid transparent;
|
||||
}
|
||||
}
|
||||
.picker__button--clear{
|
||||
&:before {
|
||||
top: $datepicker-footer-clear-button-before-top;
|
||||
width: $datepicker-footer-clear-button-before-width;
|
||||
border-top: $datepicker-footer-clear-button-before-bl solid $datepicker-footer-clear-button-before-bt-color;
|
||||
}
|
||||
}
|
||||
.picker__button--close{
|
||||
&:before {
|
||||
content: "\D7";
|
||||
top: $datepicker-footer-close-button-before-top;
|
||||
vertical-align: top;
|
||||
font-size: $datepicker-footer-close-button-before-font-size;
|
||||
margin-right: $datepicker-footer-close-button-before-mr;
|
||||
color: $datepicker-footer-close-button-before-color;
|
||||
}
|
||||
}
|
||||
.picker__button--today[disabled],
|
||||
.picker__button--today[disabled]:hover {
|
||||
background: $grey-lighten-4;
|
||||
border-color: $grey-lighten-4;
|
||||
color: $datepicker-table-day-outfocus-hover-color;
|
||||
cursor: default;
|
||||
}
|
||||
.picker__button--today[disabled]:before {
|
||||
border-top-color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CUSTOM MATERIALIZE STYLES
|
||||
========================================================================== */
|
||||
|
||||
.picker__calendar-container {
|
||||
padding: $datepicker-calender-padding;
|
||||
thead {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
422
html/scss/pro/picker/_default-time.scss
Executable file
422
html/scss/pro/picker/_default-time.scss
Executable file
@@ -0,0 +1,422 @@
|
||||
/* ==========================================================================
|
||||
$BASE-TIME-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The list of times.
|
||||
*/
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: $timepicker-pickerlist-padding;
|
||||
margin: 0;
|
||||
}
|
||||
/**
|
||||
* The times on the clock.
|
||||
*/
|
||||
.picker__list-item {
|
||||
border-bottom: $timepicker-pickerlistitem-border-bottom solid $timepicker-pickerlistitem-border-color;
|
||||
border-top: $timepicker-pickerlistitem-border-top solid $timepicker-pickerlistitem-border-color;
|
||||
margin-bottom: $timepicker-pickerlistitem-mb;
|
||||
position: relative;
|
||||
@extend .white;
|
||||
padding: $timepicker-pickerlistitem-padding;
|
||||
@media (min-height: $timepicker-pickerlistitem-breakpoint) {
|
||||
padding: $timepicker-pickerlistitem-media-padding;
|
||||
}
|
||||
/* Hovered time */
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
@extend .black;
|
||||
background: $timepicker-pickerlistitem-hover-bg;
|
||||
border-color: $timepicker-pickerlistitem-hover-border-color;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* Highlighted and hovered/focused time */
|
||||
.picker__list-item--highlighted {
|
||||
border-color: $timepicker-pickerlistitem-highlighted-border-color;
|
||||
z-index: 10;
|
||||
}
|
||||
.picker__list-item--highlighted:hover,
|
||||
.picker--focused .picker__list-item--highlighted {
|
||||
cursor: pointer;
|
||||
color: $black;
|
||||
background: $timepicker-pickerlistitem-highlighted-hover-bg;
|
||||
}
|
||||
/* Selected and hovered/focused time */
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
background: $timepicker-pickerlistitem-selected-hover-bg;
|
||||
@extend .white-text;
|
||||
z-index: 10;
|
||||
}
|
||||
/* Disabled time */
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
background: $grey-lighten-4;
|
||||
border-color: $grey-lighten-4;
|
||||
color: $timepicker-pickerlistitem-disabled-hover-color;
|
||||
cursor: default;
|
||||
border-color: $timepicker-pickerlistitem-disabled-hover-color;
|
||||
z-index: auto;
|
||||
}
|
||||
/**
|
||||
* The clear button
|
||||
*/
|
||||
.picker--time {
|
||||
.picker__button--clear {
|
||||
display: block;
|
||||
width: $timepicker-pickertime-button-clear-width;
|
||||
margin: $timepicker-pickertime-button-clear-mt auto 0;
|
||||
padding: $timepicker-pickertime-button-clear-padding;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-weight: $timepicker-pickertime-button-clear-font-weight;
|
||||
font-size: $timepicker-pickertime-button-clear-font-size;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: $timepicker-color-mdb;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $black;
|
||||
background: $timepicker-pickertime-button-clear-hover-bg;
|
||||
border-color: $timepicker-pickertime-button-clear-hover-border-color;
|
||||
cursor: pointer;
|
||||
@extend .white-text;
|
||||
outline: none;
|
||||
&:before {
|
||||
@extend .white-text;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
top: $timepicker-pickertime-button-clear-before-top;
|
||||
color: $timepicker-color-mdb;
|
||||
font-size: $timepicker-pickertime-button-clear-before-font-size;
|
||||
font-weight: $timepicker-pickertime-button-clear-before-font-weight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
$DEFAULT-TIME-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The frame the bounds the time picker.
|
||||
*/
|
||||
.picker--time .picker__frame {
|
||||
min-width: $timepicker-pickertime-frame-min-width;
|
||||
max-width: $timepicker-pickertime-frame-max-width;
|
||||
}
|
||||
/**
|
||||
* The picker box.
|
||||
*/
|
||||
.picker--time .picker__box {
|
||||
font-size: $timepicker-pickerbox-font-size;
|
||||
background: $timepicker-pickerbox-bg;
|
||||
padding: 0;
|
||||
@media (min-height: $timepicker-pickerbox-breakpoint) {
|
||||
margin-bottom: $timepicker-pickerbox-breakpoint-mb;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*!
|
||||
* ClockPicker v0.0.7 for jQuery (http://weareoutman.github.io/clockpicker/)
|
||||
* Copyright 2014 Wang Shenwei.
|
||||
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
|
||||
*
|
||||
* Further modified
|
||||
* Copyright 2015 Ching Yaw Hao.
|
||||
*
|
||||
* Bootstrap v3.1.1 (http://getbootstrap.com)
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
.picker__date-display {
|
||||
text-align: center;
|
||||
background-color: $datepicker-date-bg;
|
||||
@extend .white-text;
|
||||
padding-bottom: $timepicker-pickerdate-display-pb;
|
||||
font-weight: $timepicker-pickerdate-display-font-weight;
|
||||
margin-bottom: $timepicker-pickerdate-display-mb;
|
||||
|
||||
.clockpicker-display {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: $timepicker-clockpicker-display-height;
|
||||
font-size: $timepicker-clockpicker-display-font-size;
|
||||
padding: $timepicker-clockpicker-display-padding;
|
||||
padding-bottom: 0px;
|
||||
color: $timepicker-clockpicker-display-color;
|
||||
.clockpicker-display-column {
|
||||
float: left;
|
||||
.clockpicker-span-hours.text-primary, .clockpicker-span-minutes.text-primary, #click-am.text-primary, #click-pm.text-primary {
|
||||
animation-name: $timepicker-clockpicker-display-animate-name;
|
||||
@extend .white-text;
|
||||
}
|
||||
#click-am, #click-pm {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.clockpicker-display-am-pm {
|
||||
padding-left: $timepicker-clockpicker-display-am-pm-pl;
|
||||
vertical-align: bottom;
|
||||
height: $timepicker-clockpicker-display-am-pm-height;
|
||||
.clockpicker-span-am-pm {
|
||||
display: inline-block;
|
||||
font-size: $timepicker-clockpicker-span-am-pm-font-size;
|
||||
line-height: $timepicker-clockpicker-span-am-pm-line-height;
|
||||
color: $timepicker-clockpicker-span-am-pm-color;
|
||||
}
|
||||
}
|
||||
.clockpicker-span-hours, .clockpicker-span-minutes {
|
||||
animation-duration: $timepicker-clockpicker-span-hours-animation-duration;
|
||||
animation-fill-mode: both;
|
||||
transition: $timepicker-clockpicker-span-hours-transition;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clockpicker-display {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: $timepicker-clockpicker-display-height;
|
||||
font-size: $timepicker-clockpicker-display-font-size;
|
||||
padding: $timepicker-clockpicker-display-padding;
|
||||
padding-bottom: 0px;
|
||||
color: $timepicker-clockpicker-display-color;
|
||||
.clockpicker-display-column {
|
||||
float: left;
|
||||
.clockpicker-span-hours.text-primary, .clockpicker-span-minutes.text-primary, #click-am.text-primary, #click-pm.text-primary {
|
||||
animation-name: $timepicker-clockpicker-display-animate-name;
|
||||
@extend .white-text;
|
||||
}
|
||||
#click-am, #click-pm {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.clockpicker-display-am-pm {
|
||||
padding-left: $timepicker-clockpicker-display-am-pm-pl;
|
||||
vertical-align: bottom;
|
||||
height: $timepicker-clockpicker-display-am-pm-height;
|
||||
.clockpicker-span-am-pm {
|
||||
display: inline-block;
|
||||
font-size: $timepicker-clockpicker-span-am-pm-font-size;
|
||||
line-height: $timepicker-clockpicker-span-am-pm-line-height;
|
||||
color: $timepicker-clockpicker-span-am-pm-color;
|
||||
}
|
||||
}
|
||||
.clockpicker-span-hours, .clockpicker-span-minutes {
|
||||
animation-duration: $timepicker-clockpicker-span-hours-animation-duration;
|
||||
animation-fill-mode: both;
|
||||
cursor: pointer;
|
||||
@include transition-main($timepicker-clockpicker-span-hours-transition);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes (pulse){
|
||||
from {
|
||||
transform: $timepicker-keyframes-transform-pulse;
|
||||
}
|
||||
50% {
|
||||
transform: $timepicker-keyframes-transform-pulse-middle;
|
||||
}
|
||||
to {
|
||||
transform: $timepicker-keyframes-transform-pulse;
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-moving {
|
||||
cursor: move;
|
||||
}
|
||||
.clockpicker-plate {
|
||||
background-color: $grey-lighten-3;
|
||||
border-radius: $timepicker-clockpicker-plate-border-radius;
|
||||
width: $timepicker-clockpicker-plate-width;
|
||||
height: $timepicker-clockpicker-plate-height;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin-top: $timepicker-clockpicker-plate-margin-top;
|
||||
/* Disable text selection highlighting. Thanks to Hermanya */
|
||||
user-select: none;
|
||||
.clockpicker-canvas,
|
||||
.clockpicker-dial {
|
||||
width: $timepicker-clockpicker-canvas-width;
|
||||
height: $timepicker-clockpicker-canvas-height;
|
||||
position: absolute;
|
||||
left: $timepicker-clockpicker-canvas-left;
|
||||
top: $timepicker-clockpicker-canvas-top;
|
||||
}
|
||||
.clockpicker-dial {
|
||||
@include transition-main($timepicker-clockpicker-dial-transition-transform, $timepicker-clockpicker-dial-transition-opacity);
|
||||
.clockpicker-tick {
|
||||
border-radius: $timepicker-clockpicker-dial-tick-border-radius;
|
||||
color: $timepicker-color-mdb;
|
||||
line-height: $timepicker-clockpicker-dial-tick-line-height;
|
||||
text-align: center;
|
||||
width: $timepicker-clockpicker-dial-tick-width;
|
||||
height: $timepicker-clockpicker-dial-tick-height;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
transition: $timepicker-clockpicker-dial-tick-transition;
|
||||
background-color: $timepicker-clockpicker-dial-tick-hover-bg;
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: $timepicker-clockpicker-dial-tick-hover-bg-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clockpicker-minutes {
|
||||
visibility: hidden;
|
||||
}
|
||||
.clockpicker-dial-out {
|
||||
opacity: 0;
|
||||
}
|
||||
.clockpicker-hours.clockpicker-dial-out {
|
||||
@include transform($timepicker-clockpicker-dial-out-transform);
|
||||
}
|
||||
.clockpicker-minutes.clockpicker-dial-out {
|
||||
@include transform($timepicker-clockpicker-dial-out-transform-minutes);
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-canvas {
|
||||
@include transition-main($timepicker-clockpicker-canvas-transition);
|
||||
line {
|
||||
stroke: $timepicker-clockpicker-canvas-stroke;
|
||||
stroke-width: $timepicker-clockpicker-canvas-stroke-width;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-out {
|
||||
opacity: $timepicker-clockpicker-canvas-out-opacity;
|
||||
}
|
||||
.clockpicker-canvas-bearing {
|
||||
stroke: none;
|
||||
fill: $timepicker-clockpicker-canvas-bearing-fill;
|
||||
}
|
||||
.clockpicker-canvas-fg {
|
||||
stroke: none;
|
||||
fill: $timepicker-clockpicker-canvas-fg-fill;
|
||||
&.active {
|
||||
fill: $timepicker-clockpicker-canvas-fg-active-fill;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
stroke: none;
|
||||
fill: $timepicker-clockpicker-canvas-bg-fill;
|
||||
}
|
||||
.clockpicker-canvas-bg-trans {
|
||||
fill: $timepicker-clockpicker-canvas-bg-trans-fill;
|
||||
}
|
||||
|
||||
.clockpicker-am-pm-block{
|
||||
margin-top: $timepicker-clockpicker-am-pm-block-mt;
|
||||
width: 100%;
|
||||
height: $timepicker-clockpicker-am-pm-block-height;
|
||||
.clockpicker-button.am-button {
|
||||
height: $timepicker-clockpicker-button-am-button-height;
|
||||
width: $timepicker-clockpicker-button-am-button-width;
|
||||
float: left;
|
||||
border: 0;
|
||||
}
|
||||
.clockpicker-button.pm-button {
|
||||
height: $timepicker-clockpicker-button-pm-button-height;
|
||||
width: $timepicker-clockpicker-button-pm-button-width;
|
||||
float: right;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-floating.btn-flat {
|
||||
color: $white-base;
|
||||
padding: 0;
|
||||
background: $primary-color;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $timepicker-clockpicker-btn-floating-focus-bg !important;
|
||||
}
|
||||
&.active {
|
||||
background-color: $timepicker-clockpicker-btn-floating-active-bg !important;
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
}
|
||||
|
||||
.picker__footer {
|
||||
.clockpicker-button {
|
||||
margin: auto;
|
||||
margin-top: $timepicker-clockpicker-footer-button-mt;
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
&:active {
|
||||
background-color: $timepicker-clockpicker-footer-button-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.darktheme {
|
||||
.picker__box {
|
||||
background-color: $grey-darken-4;
|
||||
.picker__date-display {
|
||||
background-color: transparent;
|
||||
.clockpicker-display {
|
||||
@extend .white-text;
|
||||
.clockpicker-span-am-pm {
|
||||
@extend .white-text;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.picker__calendar-container{
|
||||
.clockpicker-plate {
|
||||
background-color: transparent;
|
||||
.clockpicker-tick {
|
||||
@extend .white-text;
|
||||
background-color: $timepicker-darktheme-clockpicker-plate-bg;
|
||||
&.active, &:hover {
|
||||
background-color: $timepicker-darktheme-clockpicker-plate-active-bg;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas line {
|
||||
stroke: $timepicker-darktheme-clockpicker-canvas-line-stroke;
|
||||
}
|
||||
.clockpicker-canvas-bearing {
|
||||
fill: $white-base;
|
||||
}
|
||||
.clockpicker-canvas-fg {
|
||||
fill: $timepicker-darktheme-clockpicker-canvas-fg-fill;
|
||||
&.active {
|
||||
fill: $timepicker-darktheme-clockpicker-canvas-active-fg-fill;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
fill: $timepicker-darktheme-clockpicker-canvas-bg-fill;
|
||||
}
|
||||
.clockpicker-canvas-bg-trans {
|
||||
fill: $timepicker-darktheme-clockpicker-canvas-bg-trans-fill;
|
||||
}
|
||||
}
|
||||
}
|
||||
.picker__footer{
|
||||
button {
|
||||
@extend .white-text;
|
||||
}
|
||||
.clockpicker-button:active {
|
||||
background-color: $timepicker-darktheme-clockpicker-button-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
147
html/scss/pro/picker/_default.scss
Executable file
147
html/scss/pro/picker/_default.scss
Executable file
@@ -0,0 +1,147 @@
|
||||
/* ==========================================================================
|
||||
$BASE-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
/**
|
||||
* The picker input element.
|
||||
*/
|
||||
.picker__input {
|
||||
cursor: default;
|
||||
}
|
||||
/**
|
||||
* When the picker is opened, the input element is "activated".
|
||||
*/
|
||||
.picker__input.picker__input--active {
|
||||
border-color: $pickerinput-active-border-color;
|
||||
}
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
.picker {
|
||||
font-size: $picker-font-size;
|
||||
text-align: center;
|
||||
line-height: $picker-font-line-height;
|
||||
color: $black;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
user-select: none;
|
||||
/**
|
||||
* The holder is the only "scrollable" top-level container element. The holder should overlay the entire screen.
|
||||
*/
|
||||
.picker__holder {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-scrolling: touch;
|
||||
position: fixed;
|
||||
@include transition-main($picker-holder-transition-bg, $picker-holder-transition-top);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
/*!
|
||||
* Default mobile-first, responsive styling for pickadate.js
|
||||
* Demo: http://amsul.github.io/pickadate.js
|
||||
*/
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
/**
|
||||
* Make the holder and frame fullscreen.
|
||||
*/
|
||||
.picker__holder,
|
||||
.picker__frame {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
}
|
||||
/**
|
||||
* The frame that bounds the box contents of the picker.
|
||||
*/
|
||||
.picker__frame {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
min-width: $picker-frame-min-width;
|
||||
max-width: $picker-frame-max-width;
|
||||
// picker width
|
||||
width: $picker-frame-width;
|
||||
max-height: $picker-frame-max-height;
|
||||
filter: $picker-frame-filter;
|
||||
opacity: 0;
|
||||
@include transition-main($picker-frame-transition);
|
||||
@media (min-height: $pickerframe-wrap-box-breakpoint) {
|
||||
overflow: visible;
|
||||
top: auto;
|
||||
bottom: $picker-frame-media-bottom;
|
||||
max-height: $picker-frame-media-max-height;
|
||||
}
|
||||
@media (min-height: $pickerframe-mb-breakpoint) {
|
||||
margin-bottom: $picker-frame-media-mb;
|
||||
}
|
||||
/**
|
||||
* The wrapper sets the stage to vertically align the box contents.
|
||||
*/
|
||||
.picker__wrap {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@media (min-height: $pickerframe-wrap-box-breakpoint) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* The box contains all the picker contents.
|
||||
*/
|
||||
.picker__box {
|
||||
background: $white;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
@media (min-height: $pickerframe-wrap-box-breakpoint) {
|
||||
display: block;
|
||||
border: $picker-box-border solid $picker-box-border-color;
|
||||
border-top-color: $picker-box-border-top-color;
|
||||
border-bottom-width: 0;
|
||||
border-radius: $picker-box-border-radius;
|
||||
box-shadow: $picker-box-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* When the picker opens...
|
||||
*/
|
||||
.picker--opened {
|
||||
.picker__holder {
|
||||
top: 0;
|
||||
background: transparent;
|
||||
zoom: $picker-opened-holder-zoom;
|
||||
background: $picker-opened-holder-bg;
|
||||
@include transition-main($picker-opened-holder-transition);
|
||||
}
|
||||
.picker__frame {
|
||||
top: 0;
|
||||
filter: $picker-opened-frame-filter;
|
||||
opacity: $picker-opened-frame-opacity;
|
||||
@media (min-height: $pickerframe-pos-breakpoint) {
|
||||
top: $picker-opened-frame-media-top;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* For `large` screens, transform into an inline picker.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
CUSTOM MATERIALIZE STYLES
|
||||
========================================================================== */
|
||||
|
||||
.datepicker.picker__input.picker__input--active,
|
||||
.timepicker.picker__input.picker__input--active {
|
||||
border-bottom: $picker-custom-materialize-styles;
|
||||
}
|
||||
Reference in New Issue
Block a user