104 lines
2.3 KiB
Plaintext
104 lines
2.3 KiB
Plaintext
|
/*!
|
|||
|
|
* Classic picker styling for pickadate.js
|
|||
|
|
* Demo: http://amsul.github.io/pickadate.js
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@import "_variables.less";
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Note: the root picker element should *NOT* be styled more than what’s here.
|
|||
|
|
*/
|
|||
|
|
.picker {
|
|||
|
|
|
|||
|
|
// Make it full-width so that it doesn’t collapse.
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* The holder is the base of the picker.
|
|||
|
|
*/
|
|||
|
|
.picker__holder {
|
|||
|
|
|
|||
|
|
// The base stylings.
|
|||
|
|
position: absolute;
|
|||
|
|
background: @bg-white;
|
|||
|
|
|
|||
|
|
// Add a light border - except top & bottom to let it collapse.
|
|||
|
|
border: 1px solid lighten( @border-grey, 20% );
|
|||
|
|
border-top-width: 0;
|
|||
|
|
border-bottom-width: 0;
|
|||
|
|
|
|||
|
|
// Round the bottom corners.
|
|||
|
|
border-radius: 0 0 @picker-border-radius @picker-border-radius;
|
|||
|
|
|
|||
|
|
// Let’s not go 100% + 2px.
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
// Specify the min & max widths.
|
|||
|
|
min-width: @classic-min-width;
|
|||
|
|
max-width: @classic-max-width;
|
|||
|
|
|
|||
|
|
// Hide everything to begin with.
|
|||
|
|
max-height: 0;
|
|||
|
|
.opacity( 0 );
|
|||
|
|
|
|||
|
|
// Tilt the picker.
|
|||
|
|
transform: translateY( -1em ) perspective( 600px ) rotateX( 10deg );
|
|||
|
|
|
|||
|
|
// Everything should be smoothly animated – the height & border should wait till the rest is done.
|
|||
|
|
transition: transform @speed-animate-in ease-out,
|
|||
|
|
opacity @speed-animate-in ease-out,
|
|||
|
|
max-height 0s @speed-animate-in,
|
|||
|
|
border-width 0s @speed-animate-in;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* The frame and wrap work together to ensure that
|
|||
|
|
* clicks within the picker don’t reach the holder.
|
|||
|
|
*/
|
|||
|
|
.picker__frame {
|
|||
|
|
padding: 1px;
|
|||
|
|
}
|
|||
|
|
.picker__wrap {
|
|||
|
|
margin: -1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* When the picker opens...
|
|||
|
|
*/
|
|||
|
|
.picker--opened {
|
|||
|
|
|
|||
|
|
.picker__holder {
|
|||
|
|
|
|||
|
|
// Reveal the content.
|
|||
|
|
max-height: @classic-max-height;
|
|||
|
|
.opacity( 1 );
|
|||
|
|
|
|||
|
|
// Expand the top & bottom borders.
|
|||
|
|
border-top-width: 1px;
|
|||
|
|
border-bottom-width: 1px;
|
|||
|
|
|
|||
|
|
// Straighten the picker.
|
|||
|
|
transform: translateY( 0 ) perspective( 600px ) rotateX( 0 );
|
|||
|
|
|
|||
|
|
// Everything should be smoothly animated – except the height & border.
|
|||
|
|
transition: transform @speed-animate-in ease-out,
|
|||
|
|
opacity @speed-animate-in ease-out,
|
|||
|
|
max-height 0s,
|
|||
|
|
border-width 0s;
|
|||
|
|
|
|||
|
|
// Add a light shadow.
|
|||
|
|
box-shadow: @classic-box-shadow;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|