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 {
|
||||
display: block !important;
|
||||
height: 185px;
|
||||
height: 205px;
|
||||
overflow: hidden;
|
||||
transition: 200ms ease-in-out all;
|
||||
}
|
||||
|
@ -334,6 +334,34 @@ ul#calendarlistcontainer {
|
|||
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 */
|
||||
#spacer {
|
||||
height: 44px;
|
||||
|
|
|
@ -42,18 +42,20 @@
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
#datepicker table {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#datepicker {
|
||||
table {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
|
||||
#datepicker table td button {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
td button {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
#datepicker thead {
|
||||
display: none;
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#datepicker td button {
|
||||
|
@ -75,12 +77,13 @@
|
|||
|
||||
#datepicker table tbody button {
|
||||
margin: 0;
|
||||
padding: 6px 9px;
|
||||
padding: 8px 9px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
min-width: 34px;
|
||||
}
|
||||
|
||||
#datepicker table tbody tr td button {
|
||||
|
@ -92,7 +95,7 @@
|
|||
}
|
||||
|
||||
#datepicker table tbody button.active {
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-pill);
|
||||
background-color: $color-primary;
|
||||
color: $color-primary-text;
|
||||
font-weight: bold;
|
||||
|
@ -117,7 +120,7 @@
|
|||
#app-navigation .datepicker-heading,
|
||||
#app-navigation .togglebuttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
margin: 0 5px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
@ -134,6 +137,25 @@
|
|||
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 .togglebuttons .button:hover,
|
||||
#app-navigation .datepicker-heading .button.active,
|
||||
|
@ -145,29 +167,17 @@
|
|||
#app-navigation .togglebuttons .icon-view-previous {
|
||||
margin-right: -1px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#app-navigation .datepicker-heading .button.middle,
|
||||
#app-navigation .togglebuttons .button.middle {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
flex-grow: 2;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
#app-navigation .datepicker-heading .icon-view-next,
|
||||
#app-navigation .togglebuttons .icon-view-next {
|
||||
margin-left: -1px;
|
||||
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-next {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
#app-navigation .datepicker-heading .button.middle {
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
|
|
|
@ -3,8 +3,8 @@
|
|||
"rules": {
|
||||
"indentation": "tab",
|
||||
"number-leading-zero": "never",
|
||||
"no-descending-specificity": false,
|
||||
"no-duplicate-selectors": false,
|
||||
"no-descending-specificity": null,
|
||||
"no-duplicate-selectors": null,
|
||||
"comment-empty-line-before": ["always", {
|
||||
"except": ["first-nested"]
|
||||
}]
|
||||
|
|
Loading…
Reference in New Issue