Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
/**
* @package PickMeUp
* @author Nazar Mokrynskyi <nazar@mokrynskyi.com>
* @author Stefan Petre <www.eyecon.ro>
* @copyright Copyright (c) 2013-2016, Nazar Mokrynskyi
* @copyright Copyright (c) 2008-2009, Stefan Petre
* @license MIT License, see license.txt
*/
$__border-radius = 0
$__border-color = #e0e0e0;
$__background = white
$__color = black
$__background-hover = $viol-hover // my variable
$__color-hover = white
$__nav-color = $__color
$__nav-color-hover = $__color-hover
$__not-in-month = $placeholder-text-color // my variable
$__not-in-month-hover = #999999
$__disabled = lighten($placeholder-text-color, 50%) // my variable
$__selected = white
$__selected-background = $viol-hover // my variable
$__not-in-month-selected-background = #17384d
$__day-of-week = $__not-in-month-hover
$__today-background = $__not-in-month-selected-background
$__today-color = $__color-hover
.pickmeup
background: $__background
border-radius: $__border-radius
border: solid 1px $__border-color
-moz-box-sizing: content-box
box-sizing: content-box
display: inline-block
position: absolute
z-index: 6000
touch-action: manipulation
*
-moz-box-sizing: border-box
box-sizing: border-box
&.pmu-flat
position: relative
&.pmu-hidden
display: none
.pmu-instance
display: inline-block
height: 16.8em
padding: .5em
text-align: center
width: 15em
.pmu-button
color: $__color
cursor: pointer
outline: none
text-decoration: none
.pmu-today
background: $__today-background
color: $__today-color
border-radius: 1em
.pmu-button:hover
background: $__background-hover
color: $__color-hover
border-radius: 1em
.pmu-not-in-month
color: $__not-in-month
.pmu-disabled,
.pmu-disabled:hover
color: $__disabled
cursor: default
.pmu-selected
background: $__selected-background
color: $__selected
border-radius: 1em
.pmu-not-in-month.pmu-selected
background: $__not-in-month-selected-background
nav
color: $__nav-color
display: -ms-flexbox
display: -webkit-flex
display: flex
line-height: 2em
*:first-child :hover
color: $__nav-color-hover
.pmu-prev,
.pmu-next
display: none
height: 2em
width: 1em
.pmu-month
width: 14em
.pmu-years,
.pmu-months
*
display: inline-block
line-height: 3.6em
width: 3.5em
.pmu-day-of-week
color: $__day-of-week
cursor: default
.pmu-day-of-week,
.pmu-days
*
display: inline-block
line-height: 2em
width: 2em
.pmu-day-of-week *
line-height: 1.8em
.pmu-instance:first-child .pmu-prev,
.pmu-instance:last-child .pmu-next
display: block
.pmu-instance:first-child,
.pmu-instance:last-child
.pmu-month
width: 13em
.pmu-instance:first-child:last-child .pmu-month
width: 12em
&:not(.pmu-view-days) .pmu-days,
&:not(.pmu-view-days) .pmu-day-of-week,
&:not(.pmu-view-months) .pmu-months,
&:not(.pmu-view-years) .pmu-years
display: none
.choose-date
position: relative
&__datepickerbox
position: absolute
top: 45px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment