Skip to content
Snippets Groups Projects
Commit a13ba24b authored by qsm-odoo's avatar qsm-odoo
Browse files

[REF] web: change bootstrap datetimepicker source from less to scss

Note: the scss version of the lib file was not up to date, I manually
updated it to our current version (very small changes). The lib will
probably have to be changed with bootstrap 4 anyway.

Note 2: the file is left included in the common assets but it would
probably make more sense to put it both in backend and frontend instead.
parent 6096f245
No related branches found
No related tags found
No related merge requests found
/*!
* Datetimepicker for Bootstrap 3
* version : 4.17.42
* ! version : 4.17.42
* https://github.com/Eonasdan/bootstrap-datetimepicker/
*/
@bs-datetimepicker-timepicker-font-size: 1.2em;
@bs-datetimepicker-active-bg: @btn-primary-bg;
@bs-datetimepicker-active-color: @btn-primary-color;
@bs-datetimepicker-border-radius: @border-radius-base;
@bs-datetimepicker-btn-hover-bg: @gray-lighter;
@bs-datetimepicker-disabled-color: @gray-light;
@bs-datetimepicker-alternate-color: @gray-light;
@bs-datetimepicker-secondary-border-color: #ccc;
@bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2);
@bs-datetimepicker-primary-border-color: white;
@bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
$bs-datetimepicker-timepicker-font-size: 1.2em !default;
$bs-datetimepicker-active-bg: $btn-primary-bg !default;
$bs-datetimepicker-active-color: $btn-primary-color !default;
$bs-datetimepicker-border-radius: $border-radius-base !default;
$bs-datetimepicker-btn-hover-bg: $gray-lighter !default;
$bs-datetimepicker-disabled-color: $gray-light !default;
$bs-datetimepicker-alternate-color: $gray-light !default;
$bs-datetimepicker-secondary-border-color: #ccc !default;
$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
$bs-datetimepicker-primary-border-color: white !default;
$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;
.bootstrap-datetimepicker-widget {
list-style: none;
......@@ -24,15 +24,15 @@
width: 19em;
&.timepicker-sbs {
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
width: 38em;
}
@media (min-width: @screen-md-min) {
@media (min-width: $screen-md-min) {
width: 38em;
}
@media (min-width: @screen-lg-min) {
@media (min-width: $screen-lg-min) {
width: 38em;
}
}
......@@ -47,8 +47,8 @@
&:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid @bs-datetimepicker-secondary-border-color;
border-bottom-color: @bs-datetimepicker-secondary-border-color-rgba;
border-bottom: 7px solid $bs-datetimepicker-secondary-border-color;
border-bottom-color: $bs-datetimepicker-secondary-border-color-rgba;
top: -7px;
left: 7px;
}
......@@ -56,7 +56,7 @@
&:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @bs-datetimepicker-primary-border-color;
border-bottom: 6px solid $bs-datetimepicker-primary-border-color;
top: -6px;
left: 8px;
}
......@@ -66,8 +66,8 @@
&:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid @bs-datetimepicker-secondary-border-color;
border-top-color: @bs-datetimepicker-secondary-border-color-rgba;
border-top: 7px solid $bs-datetimepicker-secondary-border-color;
border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
bottom: -7px;
left: 6px;
}
......@@ -75,7 +75,7 @@
&:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid @bs-datetimepicker-primary-border-color;
border-top: 6px solid $bs-datetimepicker-primary-border-color;
bottom: -6px;
left: 7px;
}
......@@ -109,7 +109,7 @@
.timepicker-hour, .timepicker-minute, .timepicker-second {
width: 54px;
font-weight: bold;
font-size: @bs-datetimepicker-timepicker-font-size;
font-size: $bs-datetimepicker-timepicker-font-size;
margin: 0;
}
......@@ -118,47 +118,47 @@
}
.btn[data-action="incrementHours"]::after {
.sr-only();
@extend .sr-only;
content: "Increment Hours";
}
.btn[data-action="incrementMinutes"]::after {
.sr-only();
@extend .sr-only;
content: "Increment Minutes";
}
.btn[data-action="decrementHours"]::after {
.sr-only();
@extend .sr-only;
content: "Decrement Hours";
}
.btn[data-action="decrementMinutes"]::after {
.sr-only();
@extend .sr-only;
content: "Decrement Minutes";
}
.btn[data-action="showHours"]::after {
.sr-only();
@extend .sr-only;
content: "Show Hours";
}
.btn[data-action="showMinutes"]::after {
.sr-only();
@extend .sr-only;
content: "Show Minutes";
}
.btn[data-action="togglePeriod"]::after {
.sr-only();
@extend .sr-only;
content: "Toggle AM/PM";
}
.btn[data-action="clear"]::after {
.sr-only();
@extend .sr-only;
content: "Clear the picker";
}
.btn[data-action="today"]::after {
.sr-only();
@extend .sr-only;
content: "Set the date to today";
}
......@@ -166,7 +166,7 @@
text-align: center;
&::after {
.sr-only();
@extend .sr-only;
content: "Toggle Date and Time Screens";
}
......@@ -193,7 +193,7 @@
& td,
& th {
text-align: center;
border-radius: @bs-datetimepicker-border-radius;
border-radius: $bs-datetimepicker-border-radius;
}
& th {
......@@ -208,17 +208,17 @@
&.disabled,
&.disabled:hover {
background: none;
color: @bs-datetimepicker-disabled-color;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
&.prev::after {
.sr-only();
@extend .sr-only;
content: "Previous Month";
}
&.next::after {
.sr-only();
@extend .sr-only;
content: "Next Month";
}
}
......@@ -227,7 +227,7 @@
cursor: pointer;
&:hover {
background: @bs-datetimepicker-btn-hover-bg;
background: $bs-datetimepicker-btn-hover-bg;
}
}
......@@ -240,7 +240,7 @@
font-size: .8em;
height: 20px;
line-height: 20px;
color: @bs-datetimepicker-alternate-color;
color: $bs-datetimepicker-alternate-color;
}
&.day {
......@@ -253,13 +253,13 @@
&.hour:hover,
&.minute:hover,
&.second:hover {
background: @bs-datetimepicker-btn-hover-bg;
background: $bs-datetimepicker-btn-hover-bg;
cursor: pointer;
}
&.old,
&.new {
color: @bs-datetimepicker-alternate-color;
color: $bs-datetimepicker-alternate-color;
}
&.today {
......@@ -270,8 +270,8 @@
display: inline-block;
border: solid transparent;
border-width: 0 0 7px 7px;
border-bottom-color: @bs-datetimepicker-active-bg;
border-top-color: @bs-datetimepicker-secondary-border-color-rgba;
border-bottom-color: $bs-datetimepicker-active-bg;
border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
position: absolute;
bottom: 4px;
right: 4px;
......@@ -280,9 +280,9 @@
&.active,
&.active:hover {
background-color: @bs-datetimepicker-active-bg;
color: @bs-datetimepicker-active-color;
text-shadow: @bs-datetimepicker-text-shadow;
background-color: $bs-datetimepicker-active-bg;
color: $bs-datetimepicker-active-color;
text-shadow: $bs-datetimepicker-text-shadow;
}
&.active.today:before {
......@@ -292,7 +292,7 @@
&.disabled,
&.disabled:hover {
background: none;
color: @bs-datetimepicker-disabled-color;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
......@@ -303,26 +303,26 @@
line-height: 54px;
margin: 2px 1.5px;
cursor: pointer;
border-radius: @bs-datetimepicker-border-radius;
border-radius: $bs-datetimepicker-border-radius;
&:hover {
background: @bs-datetimepicker-btn-hover-bg;
background: $bs-datetimepicker-btn-hover-bg;
}
&.active {
background-color: @bs-datetimepicker-active-bg;
color: @bs-datetimepicker-active-color;
text-shadow: @bs-datetimepicker-text-shadow;
background-color: $bs-datetimepicker-active-bg;
color: $bs-datetimepicker-active-color;
text-shadow: $bs-datetimepicker-text-shadow;
}
&.old {
color: @bs-datetimepicker-alternate-color;
color: $bs-datetimepicker-alternate-color;
}
&.disabled,
&.disabled:hover {
background: none;
color: @bs-datetimepicker-disabled-color;
color: $bs-datetimepicker-disabled-color;
cursor: not-allowed;
}
}
......@@ -335,12 +335,12 @@
line-height: 27px;
}
}
&.wider {
width: 21em;
}
& .datepicker-decades .decade {
&.wider {
width: 21em;
}
& .datepicker-decades .decade {
line-height: 1.8em !important;
}
}
......
......@@ -16,7 +16,7 @@
<link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
<link rel="stylesheet" type="text/less" href="/web/static/lib/bootstrap-datetimepicker/src/less/_bootstrap-datetimepicker.less"/>
<link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap-datetimepicker/src/scss/_bootstrap-datetimepicker.scss"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/select2/select2.css"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/select2-bootstrap-css/select2-bootstrap.css"/>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment