You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
8.8 KiB
334 lines
8.8 KiB
$ax5picker-z-index: 2000 !default;
|
|
$ax5picker-box-model: border-box !default;
|
|
$ax5picker-bg: #fff !default;
|
|
$ax5picker-inner-border: 1px solid !default;
|
|
$ax5picker-inner-border-color: #ddd !default;
|
|
|
|
$ax5picker-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.175) !default;
|
|
$ax5picker-border-radius: 5px !default;
|
|
|
|
$ax5picker-body-padding: 5px !default;
|
|
$ax5picker-heading-padding: 10px 15px !default;
|
|
$ax5picker-buttons-padding: 10px 0px 5px 0px !default;
|
|
|
|
$ax5picker-content-border: 0px solid !default;
|
|
$ax5picker-content-border-color: none !default;
|
|
$ax5picker-content-border-radius: 0px !default;
|
|
$ax5picker-content-padding: 0px !default;
|
|
|
|
$ax5picker-easing-time-open: 0.1s !default;
|
|
$ax5picker-easing-time-close: 0.1s !default;
|
|
$ax5picker-arrow-size: 10px !default;
|
|
$ax5picker-arrow-border-width: 1px !default;
|
|
|
|
//** Border color for elements within dialog
|
|
$ax5picker-default-text: #222 !default;
|
|
$ax5picker-default-border-color: #ddd !default;
|
|
$ax5picker-default-heading-bg: #f5f5f5 !default;
|
|
|
|
$ax5picker-primary-text: #fff !default;
|
|
$ax5picker-primary-border-color: $brand-primary !default;
|
|
$ax5picker-primary-heading-bg: $brand-primary !default;
|
|
|
|
$ax5picker-success-text: #3c763d !default;
|
|
$ax5picker-success-border-color: #dff0d8 !default;
|
|
$ax5picker-success-heading-bg: darken(adjust-hue(#dff0d8, -10), 5%) !default;
|
|
|
|
$ax5picker-info-text: #31708f !default;
|
|
$ax5picker-info-border-color: #d9edf7 !default;
|
|
$ax5picker-info-heading-bg: darken(adjust-hue(#d9edf7, -10), 5%) !default;
|
|
|
|
$ax5picker-warning-text: #8a6d3b !default;
|
|
$ax5picker-warning-border-color: #fcf8e3 !default;
|
|
$ax5picker-warning-heading-bg: darken(adjust-hue(#fcf8e3, -10), 5%) !default;
|
|
|
|
$ax5picker-danger-text: #a94442 !default;
|
|
$ax5picker-danger-border-color: #f2dede !default;
|
|
$ax5picker-danger-heading-bg: darken(adjust-hue(#f2dede, -10), 5%) !default;
|
|
|
|
@mixin ax-picker() {
|
|
box-sizing: border-box;
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
z-index: $ax5picker-z-index;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
//overflow: hidden;
|
|
}
|
|
|
|
@mixin picker-variant($text-color, $border-color, $heading-bg-color) {
|
|
|
|
@include ax-background($ax5picker-bg);
|
|
border: $ax5picker-inner-border;
|
|
border-color: $border-color;
|
|
border-radius: $ax5picker-border-radius;
|
|
box-shadow: $ax5picker-box-shadow;
|
|
|
|
.ax-picker-heading {
|
|
font-weight: 600;
|
|
padding: $ax5picker-heading-padding;
|
|
border-bottom: 1px solid transparent;
|
|
@include border-top-radius($ax5picker-border-radius - 1);
|
|
|
|
color: $text-color;
|
|
@include ax-background($heading-bg-color);
|
|
.badge {
|
|
font-size: 0.8em;
|
|
color: $heading-bg-color;
|
|
@include ax-background($text-color);
|
|
}
|
|
}
|
|
.ax-picker-body {
|
|
padding: $ax5picker-body-padding;
|
|
text-align: center;
|
|
.ax-picker-content {
|
|
min-width: 50px;
|
|
|
|
.ax-picker-content-box {
|
|
border: $ax5picker-content-border;
|
|
border-color: $ax5picker-content-border-color;
|
|
border-radius: $ax5picker-content-border-radius;
|
|
padding: $ax5picker-content-padding;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.ax-picker-buttons {
|
|
padding: $ax5picker-buttons-padding;
|
|
button {
|
|
&:not(:last-child) {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.direction-top {
|
|
.ax-picker-arrow {
|
|
@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, top);
|
|
}
|
|
}
|
|
&.direction-right {
|
|
.ax-picker-arrow {
|
|
@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, right);
|
|
}
|
|
}
|
|
&.direction-bottom {
|
|
.ax-picker-arrow {
|
|
@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, bottom);
|
|
}
|
|
}
|
|
&.direction-left {
|
|
.ax-picker-arrow {
|
|
@include picker-arrow($ax5picker-arrow-size, $ax5picker-arrow-border-width, $border-color, left);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@mixin picker-arrow($arrow-size, $arrow-border-width, $border-color, $arrow-direction) {
|
|
|
|
//
|
|
//@debug( nth($ax5picker-inner-border, 3) );
|
|
$arrow-bg: nth($ax5picker-bg, 1);
|
|
$arrow-border-color: $border-color;
|
|
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
@if ($arrow-direction == top) {
|
|
left: 50%;
|
|
top: 0px;
|
|
} @else if ($arrow-direction == right) {
|
|
right: 0px;
|
|
top: 50%;
|
|
} @else if ($arrow-direction == bottom) {
|
|
left: 50%;
|
|
bottom: 0px;
|
|
} @else if ($arrow-direction == left) {
|
|
left: 0px;
|
|
top: 50%;
|
|
}
|
|
|
|
&:before {
|
|
content: ' ';
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
@if ($arrow-direction == top) {
|
|
left: - ($arrow-size);
|
|
top: - ($arrow-size * 2);
|
|
border-left: $arrow-size solid transparent;
|
|
border-right: $arrow-size solid transparent;
|
|
border-bottom: ($arrow-size * 2) solid $arrow-border-color;
|
|
} @else if ($arrow-direction == right) {
|
|
right: - ($arrow-size * 2);
|
|
top: - ($arrow-size);
|
|
border-top: $arrow-size solid transparent;
|
|
border-bottom: $arrow-size solid transparent;
|
|
border-left: ($arrow-size * 2) solid $arrow-border-color;
|
|
} @else if ($arrow-direction == bottom) {
|
|
left: - ($arrow-size);
|
|
bottom: - ($arrow-size * 2);
|
|
border-left: $arrow-size solid transparent;
|
|
border-right: $arrow-size solid transparent;
|
|
border-top: ($arrow-size * 2) solid $arrow-border-color;
|
|
} @else if ($arrow-direction == left) {
|
|
left: - ($arrow-size * 2);
|
|
top: - ($arrow-size);
|
|
border-top: $arrow-size solid transparent;
|
|
border-bottom: $arrow-size solid transparent;
|
|
border-right: ($arrow-size * 2) solid $arrow-border-color;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: ' ';
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
@if ($arrow-direction == top) {
|
|
left: - ($arrow-size);
|
|
top: - ($arrow-size * 2) + ($arrow-border-width * 2);
|
|
border-left: ($arrow-size) solid transparent;
|
|
border-right: ($arrow-size) solid transparent;
|
|
border-bottom: ($arrow-size * 2) solid $arrow-bg;
|
|
} @else if ($arrow-direction == right) {
|
|
right: - ($arrow-size * 2) + ($arrow-border-width * 2);
|
|
top: - ($arrow-size);
|
|
border-top: ($arrow-size) solid transparent;
|
|
border-bottom: ($arrow-size) solid transparent;
|
|
border-left: ($arrow-size * 2) solid $arrow-bg;
|
|
} @else if ($arrow-direction == bottom) {
|
|
left: - ($arrow-size);
|
|
bottom: - ($arrow-size * 2) + ($arrow-border-width * 2);
|
|
border-left: ($arrow-size) solid transparent;
|
|
border-right: ($arrow-size) solid transparent;
|
|
border-top: ($arrow-size * 2) solid $arrow-bg;
|
|
} @else if ($arrow-direction == left) {
|
|
left: - ($arrow-size * 2) + ($arrow-border-width * 2);
|
|
top: - ($arrow-size);
|
|
border-top: ($arrow-size) solid transparent;
|
|
border-bottom: ($arrow-size) solid transparent;
|
|
border-right: ($arrow-size * 2) solid $arrow-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include keyframes(ax-picker) {
|
|
|
|
0% {
|
|
opacity: 0.0;
|
|
//@include transform(scale(0));
|
|
@include transform(translate(0, -10%));
|
|
}
|
|
|
|
100% {
|
|
opacity: 1.0;
|
|
//@include transform(scale(1));
|
|
@include transform(translate(0, 0));
|
|
}
|
|
}
|
|
|
|
@include keyframes(ax-picker-destroy) {
|
|
from {
|
|
//@include transform(scale(1));
|
|
opacity: 1.0;
|
|
@include transform(translate(0, 0));
|
|
}
|
|
to {
|
|
//@include transform(scale(0.95));
|
|
opacity: 0.0;
|
|
@include transform(translate(0, -10%));
|
|
}
|
|
}
|
|
|
|
// mixins --------------------------------------------- end
|
|
|
|
.ax5-ui-picker {
|
|
|
|
@include ax-picker();
|
|
|
|
@include perspective(1000px);
|
|
@include transform-style(preserve-3d);
|
|
|
|
@include animation(ax-picker $ax5picker-easing-time-open);
|
|
@include transform(translateZ(0));
|
|
@include transform-origin(center top);
|
|
/* flip type
|
|
@include backface-visibility(visible);
|
|
@include transform(translateY(0%) rotateX(0deg));
|
|
*/
|
|
|
|
@include picker-variant($ax5picker-default-text, $ax5picker-default-border-color, $ax5picker-default-heading-bg);
|
|
|
|
&.primary {
|
|
@include picker-variant($ax5picker-primary-text, $ax5picker-primary-border-color, $ax5picker-primary-heading-bg);
|
|
}
|
|
&.success {
|
|
@include picker-variant($ax5picker-success-text, $ax5picker-success-border-color, $ax5picker-success-heading-bg);
|
|
}
|
|
&.info {
|
|
@include picker-variant($ax5picker-info-text, $ax5picker-info-border-color, $ax5picker-info-heading-bg);
|
|
}
|
|
&.warning {
|
|
@include picker-variant($ax5picker-warning-text, $ax5picker-warning-border-color, $ax5picker-warning-heading-bg);
|
|
}
|
|
&.danger {
|
|
@include picker-variant($ax5picker-danger-text, $ax5picker-danger-border-color, $ax5picker-danger-heading-bg);
|
|
}
|
|
|
|
&.destroy {
|
|
@include animation(ax-picker-destroy $ax5picker-easing-time-close $ease-in-back forwards);
|
|
}
|
|
|
|
&.direction-top {
|
|
@include transform-origin(center top);
|
|
}
|
|
&.direction-right {
|
|
@include transform-origin(right center);
|
|
}
|
|
&.direction-bottom {
|
|
@include transform-origin(center bottom);
|
|
|
|
}
|
|
&.direction-left {
|
|
@include transform-origin(left center);
|
|
}
|
|
}
|
|
|
|
// picker handle
|
|
|
|
@mixin ax5picker-handle(){
|
|
&[data-ax5picker] {
|
|
.input-group-addon {
|
|
cursor: pointer;
|
|
|
|
&:not(:last-child) {
|
|
border-left: 0 none;
|
|
border-right: 0 none;
|
|
}
|
|
|
|
&.color-preview{
|
|
padding: 0;
|
|
}
|
|
[data-ax5picker-color="preview"]{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-group {
|
|
@include ax5picker-handle();
|
|
}
|
|
.form-group {
|
|
@include ax5picker-handle();
|
|
}
|