-
-
Notifications
You must be signed in to change notification settings - Fork 184
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f12cd8c
commit df8fdb1
Showing
6 changed files
with
1,199 additions
and
401 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,292 @@ | ||
$dp_background: #fff; | ||
$dp_border: 1px solid #aaa; | ||
$dp_border_radius: 4px; | ||
$dp_box_shadow: 0px 0px 10px #ccc; | ||
$dp_color: #222; | ||
$dp_font_size: 13px; | ||
$dp_font_family: Tahoma, Arial, Helvetica, sans-serif; | ||
$dp_padding_width_horizontal: 5px; | ||
$dp_padding_width_vertical: 5px; | ||
|
||
$dp_cell_border_radius: 4px; | ||
$dp_cell_hover_background: #dedede; | ||
$dp_cell_min_width: 25px; | ||
$dp_cell_padding: 5px; | ||
|
||
$dp_header_hover_background: $dp_cell_hover_background; | ||
$dp_header_padding: 5px; | ||
|
||
$dp_weekday_color: $dp_color; | ||
$dp_weekday_disabled_color: lighten($dp_weekday_color, 60%); | ||
|
||
$dp_weekend_color: $dp_color; | ||
$dp_weekend_disabled_color: $dp_weekday_disabled_color; | ||
|
||
$dp_not_in_month_color: #666; | ||
$dp_not_in_month_disabled_color: $dp_weekday_disabled_color; | ||
|
||
$dp_current_date_color: #3a87ad; | ||
$dp_current_date_disabled_color: lighten($dp_current_date_color, 35%); | ||
|
||
$dp_selected_date_background: #337ab7; | ||
$dp_selected_date_color: #fff; | ||
|
||
$dp_heading_color: $dp_color; | ||
|
||
$dp_time_control_color: $dp_weekday_color; | ||
|
||
$dp_time_color: $dp_weekday_color; | ||
//$dp_time_separator_color: $dp_cell_border; | ||
|
||
.Zebra_DatePicker { | ||
background: $dp_background; | ||
@if variable-exists(dp_border) { border: $dp_border; } | ||
@if variable-exists(dp_border_radius) { border-radius: $dp_border_radius; } | ||
@if variable-exists(dp_box_shadow) { box-shadow: $dp_box_shadow; } | ||
color: $dp_color; | ||
font: $dp_font_size $dp_font_family; | ||
padding: $dp_padding_width_vertical $dp_padding_width_horizontal; | ||
position: absolute; | ||
display: table; | ||
*width: 255px; // for IE6 & 7 | ||
z-index: 1200; | ||
|
||
& *, | ||
& *:after, | ||
& *:before { | ||
box-sizing: content-box !important; | ||
} | ||
|
||
& * { | ||
padding: 0; | ||
} | ||
|
||
table { | ||
border-collapse: collapse; | ||
@if variable-exists(dp_border_radius) { border-radius: $dp_border_radius; } | ||
border-spacing: 0; | ||
width: 100%; | ||
} | ||
|
||
th, td { | ||
@if variable-exists(dp_cell_border_radius) { border-radius: $dp_cell_border_radius; } | ||
@if variable-exists(dp_cell_padding) { padding: $dp_cell_padding; } | ||
cursor: pointer; | ||
text-align: center; | ||
min-width: $dp_cell_min_width; | ||
width: $dp_cell_min_width; | ||
} | ||
|
||
.dp_body { | ||
@if variable-exists(dp_cell_border) { | ||
th, td { | ||
border: $dp_cell_border; | ||
&:first-child { | ||
border-left: none; | ||
} | ||
&:last-child { | ||
border-right: none; | ||
} | ||
} | ||
|
||
tr:first-child th, | ||
tr:first-child td { | ||
border-top: none; | ||
} | ||
|
||
tr:last-child th, | ||
tr:last-child td { | ||
border-bottom: none; | ||
} | ||
} | ||
|
||
td { | ||
@if variable-exists(dp_weekday_background) and $dp_weekday_background != $dp_background { background: $dp_weekday_background; } | ||
@if variable-exists(dp_weekday_color) and $dp_weekday_color != $dp_color { color: $dp_weekday_color; } | ||
} | ||
|
||
.dp_weekend { | ||
@if variable-exists(dp_weekend_background) and $dp_weekend_background != (if(variable_exists(dp_weekday_background), $dp_weekday_background, $dp_background)) { background: $dp_weekend_background; } | ||
@if variable-exists(dp_weekend_color) and $dp_weekend_color != (if(variable_exists(dp_weekday_color), $dp_weekday_color, $dp_color)) { color: $dp_weekend_color; } | ||
} | ||
|
||
.dp_not_in_month { | ||
@if variable-exists(dp_not_in_month_background) and $dp_not_in_month_background != (if(variable_exists(dp_weekday_background), $dp_weekday_background, $dp_background)) { background: $dp_not_in_month_background; } | ||
@if variable-exists(dp_not_in_month_color) and $dp_not_in_month_color != (if(variable_exists(dp_weekday_color), $dp_weekday_color, $dp_color)) { color: $dp_not_in_month_color; } | ||
} | ||
.dp_time_control { | ||
@if variable-exists(dp_time_control_background) and $dp_time_control_background != $dp_weekday_background { background: $dp_time_control_background; } | ||
@if variable-exists(dp_time_control_color) and $dp_time_control_color != $dp_weekday_color { background: $dp_time_control_color; } | ||
} | ||
|
||
.dp_time_controls_condensed { | ||
td { | ||
width: 25%; | ||
} | ||
} | ||
|
||
.dp_current { | ||
@if variable-exists(dp_current_date_background) and $dp_current_date_background != $dp_background { background: $dp_current_date_background; } | ||
@if variable-exists(dp_current_date_color) and $dp_current_date_color != $dp_color { color: $dp_current_date_color; } | ||
} | ||
|
||
.dp_selected { | ||
@if variable-exists(dp_selected_date_background) and $dp_selected_date_background != $dp_background { background: $dp_selected_date_background; } | ||
@if variable-exists(dp_selected_date_color) { color: $dp_selected_date_color; } | ||
} | ||
|
||
.dp_disabled { | ||
@if variable-exists(dp_weekday_disabled_background) and $dp_weekday_disabled_background != $dp_background { background: $dp_weekday_disabled_background; } | ||
@if variable-exists(dp_weekday_disabled_color) and $dp_weekday_disabled_color != $dp_color { color: $dp_weekday_disabled_color; } | ||
cursor: text; | ||
|
||
&.dp_not_in_month { | ||
@if variable-exists(dp_not_in_month_disabled_background) and $dp_not_in_month_disabled_background != (if(variable_exists(dp_weekday_disabled_background), $dp_weekday_disabled_background, $dp_background)) { background: $dp_not_in_month_disabled_background; } | ||
@if variable-exists(dp_not_in_month_disabled_color) and $dp_not_in_month_disabled_color != (if(variable_exists(dp_weekday_disabled_color), $dp_weekday_disabled_color, $dp_color)) { color: $dp_not_in_month_disabled_color; } | ||
} | ||
|
||
&.dp_weekend { | ||
@if variable-exists(dp_weekend_disabled_background) and $dp_weekend_disabled_background != (if(variable_exists(dp_weekday_disabled_background), $dp_weekday_disabled_background, $dp_background)) { background: $dp_weekend_disabled_background; } | ||
@if variable-exists(dp_weekend_disabled_color) and $dp_weekend_disabled_color != (if(variable_exists(dp_weekday_disabled_color), $dp_weekday_disabled_color, $dp_color)) { color: $dp_weekend_disabled_color; } | ||
} | ||
|
||
&.dp_current { | ||
@if variable-exists(dp_current_date_disabled_background) and $dp_current_date_disabled_background != (if(variable_exists(dp_weekday_disabled_background), $dp_weekday_disabled_background, $dp_background)) { background: $dp_current_date_disabled_background; } | ||
@if variable-exists(dp_current_date_disabled_color) and $dp_current_date_disabled_color != (if(variable_exists(dp_weekday_disabled_color), $dp_weekday_disabled_color, $dp_color)) { color: $dp_current_date_disabled_color; } | ||
} | ||
} | ||
|
||
.dp_hover { | ||
@if variable-exists(dp_cell_hover_color) { color: $dp_cell_hover_color; } | ||
@if variable-exists(dp_cell_hover_background) { background: $dp_cell_hover_background; } | ||
&.dp_time_control { | ||
@if variable-exists(dp_header_hover_background) and $dp_header_hover_background != $dp_background { background-color: $dp_header_hover_background; } | ||
@if variable-exists(dp_header_hover_color) and $dp_header_hover_color != $dp_color { color: $dp_header_hover_color; } | ||
} | ||
} | ||
} | ||
|
||
.dp_monthpicker, | ||
.dp_yearpicker, | ||
.dp_timepicker { | ||
td { | ||
width: 33.3333%; | ||
} | ||
} | ||
|
||
.dp_timepicker .dp_disabled { | ||
@if variable-exists(dp_time_background) and $dp_time_background != $dp_weekday_disabled_background { background: $dp_time_background; } | ||
border: none; | ||
color: if(variable-exists(dp_time_color), $dp_time_color, if(variable-exists(dp_weekday_color), $dp_weekday_color, $dp_color)); | ||
font-size: ceil($dp_font_size * 2); | ||
font-weight: bold; | ||
} | ||
|
||
.dp_time_separator { | ||
div { | ||
position: relative; | ||
&:after { | ||
content: ":"; | ||
color: if(variable-exists(dp_time_separator_color), $dp_time_separator_color, if(variable-exists(dp_weekday_color), $dp_weekday_color, $dp_color)); | ||
font-size: ceil($dp_font_size * 1.5); | ||
left: 100%; | ||
margin-left: 2px; | ||
margin-top: -$dp_font_size; | ||
position: absolute; | ||
top: 50%; | ||
z-index: 1; | ||
} | ||
} | ||
} | ||
|
||
.dp_header { | ||
@if variable-exists(dp_padding_width_vertical) { margin-bottom: $dp_padding_width_vertical; } | ||
|
||
// fix for Edge replacing ◀ and ▶ Unicode symbols with emojis | ||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11844964/ | ||
@supports (-ms-ime-align:auto) { | ||
font-family: 'Segoe UI Symbol', Tahoma, Arial, Helvetica, sans-serif; | ||
} | ||
} | ||
|
||
.dp_footer { | ||
@if variable-exists(dp_padding_width_vertical) { margin-top: $dp_padding_width_vertical; } | ||
.dp_icon { | ||
width: 50%; | ||
} | ||
} | ||
|
||
.dp_actions { | ||
td { | ||
@if variable-exists(dp_header_background) and $dp_header_background != $dp_background { background: $dp_header_background; } | ||
@if variable-exists(dp_border_radius) { border-radius: $dp_border_radius; } | ||
@if variable-exists(dp_header_color) and $dp_header_color != $dp_color { color: $dp_header_color; } | ||
@if variable-exists(dp_header_padding) and $dp_header_padding != $dp_cell_padding { padding: $dp_header_padding; } | ||
} | ||
|
||
.dp_caption { | ||
font-weight: bold; | ||
width: 100%; | ||
} | ||
|
||
.dp_previous, | ||
.dp_next { | ||
*padding: 0 10px; // for IE6 & 7 | ||
} | ||
|
||
.dp_hover { | ||
@if variable-exists(dp_header_hover_background) and $dp_header_hover_background != $dp_background { background-color: $dp_header_hover_background; } | ||
@if variable-exists(dp_header_hover_color) and $dp_header_hover_color != $dp_color { color: $dp_header_hover_color; } | ||
} | ||
} | ||
|
||
.dp_daypicker th { | ||
@if variable-exists(dp_heading_background) and $dp_heading_background != $dp_background { background: $dp_heading_background; } | ||
@if variable-exists(dp_heading_color) and $dp_heading_color != $dp_color { color: $dp_heading_color; } | ||
cursor: text; | ||
font-weight: bold; | ||
} | ||
|
||
&.dp_hidden { | ||
display: none; | ||
} | ||
|
||
.dp_icon { | ||
height: 16px; | ||
background-image: url('icons.png'); | ||
background-repeat: no-repeat; | ||
text-indent: -9999px; | ||
*text-indent: 0; // for IE6 & 7 | ||
|
||
&.dp_confirm { | ||
background-position: center -#{128 - $dp_header_padding}; | ||
} | ||
|
||
&.dp_view_toggler { | ||
background-position: center -#{96 - $dp_header_padding}; | ||
|
||
&.dp_calendar { | ||
background-position: center -#{64 - $dp_header_padding}; | ||
} | ||
} | ||
} | ||
} | ||
|
||
button.Zebra_DatePicker_Icon { | ||
background: url('icons.png') no-repeat center top; | ||
border: none; | ||
cursor: pointer; | ||
display: block; | ||
height: 16px; | ||
line-height: 0; | ||
padding: 0; | ||
position: absolute; | ||
text-indent: -9000px; | ||
width: 16px; | ||
|
||
&.Zebra_DatePicker_Icon_Disabled { | ||
background-position: center -32px; | ||
cursor: default; | ||
} | ||
} | ||
; |
Oops, something went wrong.