Fix datepicker alignment
With lots of flex love Also make middle "week" button round Fix stylelint warnings Fix arrow positions Fix JCB feedback Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
15a896063a
commit
0dc08e9c64
|
@ -325,7 +325,7 @@ ul#calendarlistcontainer {
|
||||||
|
|
||||||
#datepicker-ng-show-container {
|
#datepicker-ng-show-container {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
height: 185px;
|
height: 205px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: 200ms ease-in-out all;
|
transition: 200ms ease-in-out all;
|
||||||
}
|
}
|
||||||
|
@ -334,6 +334,34 @@ ul#calendarlistcontainer {
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.uib-daypicker {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
table {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
tr.uib-weeks {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
td.uib-day {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Spacing */
|
/* Spacing */
|
||||||
#spacer {
|
#spacer {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
|
|
@ -42,18 +42,20 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
#datepicker table {
|
#datepicker {
|
||||||
display: inline-block;
|
table {
|
||||||
margin-left: 5px;
|
display: inline-block;
|
||||||
}
|
margin-left: 5px;
|
||||||
|
|
||||||
#datepicker table td button {
|
td button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#datepicker thead {
|
thead {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#datepicker td button {
|
#datepicker td button {
|
||||||
|
@ -75,12 +77,13 @@
|
||||||
|
|
||||||
#datepicker table tbody button {
|
#datepicker table tbody button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 6px 9px;
|
padding: 8px 9px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
|
min-width: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#datepicker table tbody tr td button {
|
#datepicker table tbody tr td button {
|
||||||
|
@ -92,7 +95,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#datepicker table tbody button.active {
|
#datepicker table tbody button.active {
|
||||||
border-radius: 50%;
|
border-radius: var(--border-radius-pill);
|
||||||
background-color: $color-primary;
|
background-color: $color-primary;
|
||||||
color: $color-primary-text;
|
color: $color-primary-text;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -117,7 +120,7 @@
|
||||||
#app-navigation .datepicker-heading,
|
#app-navigation .datepicker-heading,
|
||||||
#app-navigation .togglebuttons {
|
#app-navigation .togglebuttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-between;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
width: calc(100% - 10px);
|
width: calc(100% - 10px);
|
||||||
}
|
}
|
||||||
|
@ -134,6 +137,25 @@
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#app-navigation .togglebuttons .button {
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&.first {
|
||||||
|
margin-right: -1px;
|
||||||
|
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.middle {
|
||||||
|
margin: auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.last {
|
||||||
|
margin-left: -1px;
|
||||||
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .button:hover,
|
#app-navigation .datepicker-heading .button:hover,
|
||||||
#app-navigation .togglebuttons .button:hover,
|
#app-navigation .togglebuttons .button:hover,
|
||||||
#app-navigation .datepicker-heading .button.active,
|
#app-navigation .datepicker-heading .button.active,
|
||||||
|
@ -145,29 +167,17 @@
|
||||||
#app-navigation .togglebuttons .icon-view-previous {
|
#app-navigation .togglebuttons .icon-view-previous {
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
border-radius: 3px 0 0 3px;
|
border-radius: 3px 0 0 3px;
|
||||||
flex-grow: 1;
|
flex-grow: 0;
|
||||||
}
|
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .button.middle,
|
|
||||||
#app-navigation .togglebuttons .button.middle {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
flex-grow: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .icon-view-next,
|
#app-navigation .datepicker-heading .icon-view-next,
|
||||||
#app-navigation .togglebuttons .icon-view-next {
|
#app-navigation .togglebuttons .icon-view-next {
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
flex-grow: 1;
|
flex-grow: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .icon-view-previous,
|
#app-navigation .datepicker-heading .icon-view-previous,
|
||||||
#app-navigation .datepicker-heading .icon-view-next {
|
#app-navigation .datepicker-heading .icon-view-next {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .button.middle {
|
|
||||||
width: calc(100% - 70px);
|
|
||||||
}
|
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
"rules": {
|
"rules": {
|
||||||
"indentation": "tab",
|
"indentation": "tab",
|
||||||
"number-leading-zero": "never",
|
"number-leading-zero": "never",
|
||||||
"no-descending-specificity": false,
|
"no-descending-specificity": null,
|
||||||
"no-duplicate-selectors": false,
|
"no-duplicate-selectors": null,
|
||||||
"comment-empty-line-before": ["always", {
|
"comment-empty-line-before": ["always", {
|
||||||
"except": ["first-nested"]
|
"except": ["first-nested"]
|
||||||
}]
|
}]
|
||||||
|
|
Loading…
Reference in New Issue