Fix dark mode arrows
Replaces custom arrows with core ones, allowing them to be themed. Use flex to properly align buttons Closes #1042 Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
d3021e197c
commit
a77227919f
|
@ -117,6 +117,7 @@
|
||||||
#app-navigation .datepicker-heading,
|
#app-navigation .datepicker-heading,
|
||||||
#app-navigation .togglebuttons {
|
#app-navigation .togglebuttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
width: calc(100% - 10px);
|
width: calc(100% - 10px);
|
||||||
}
|
}
|
||||||
|
@ -140,10 +141,11 @@
|
||||||
z-index: 50; /* Force show border */
|
z-index: 50; /* Force show border */
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .button.first,
|
#app-navigation .datepicker-heading .icon-view-previous,
|
||||||
#app-navigation .togglebuttons .button.first {
|
#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;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .button.middle,
|
#app-navigation .datepicker-heading .button.middle,
|
||||||
|
@ -151,34 +153,21 @@
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
flex-grow: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .button.last,
|
#app-navigation .datepicker-heading .icon-view-next,
|
||||||
#app-navigation .togglebuttons .button.last {
|
#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;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .button.first,
|
#app-navigation .datepicker-heading .icon-view-previous,
|
||||||
#app-navigation .datepicker-heading .button.last {
|
#app-navigation .datepicker-heading .icon-view-next {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-navigation .datepicker-heading .button.middle {
|
#app-navigation .datepicker-heading .button.middle {
|
||||||
width: calc(100% - 70px);
|
width: calc(100% - 70px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Overrides */
|
|
||||||
|
|
||||||
.glyphicon-chevron-left {
|
|
||||||
background: url("../../img/leftarrow.svg") center center no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glyphicon-chevron-right {
|
|
||||||
background: url("../../img/rightarrow.svg") center center no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glyphicon {
|
|
||||||
display: block;
|
|
||||||
height: 15px;
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,13 +0,0 @@
|
||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="136.3 -90.4 106.9 197.4" style="enable-background:new 136.3 -90.4 106.9 197.4;" xml:space="preserve">
|
|
||||||
<style type="text/css">
|
|
||||||
.st0{fill:#010002;}
|
|
||||||
</style>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<polygon class="st0" points="237.9,107 136.3,8.3 237.9,-90.4 243.1,-85 147.1,8.3 243.1,101.6 "/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 448 B |
|
@ -1,13 +0,0 @@
|
||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="136.3 -90.4 106.9 197.4" style="enable-background:new 136.3 -90.4 106.9 197.4;" xml:space="preserve">
|
|
||||||
<style type="text/css">
|
|
||||||
.st0{fill:#010002;}
|
|
||||||
</style>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<polygon class="st0" points="141.5,-90.4 243.1,8.3 141.5,107 136.3,101.6 232.3,8.3 136.3,-85 "/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 448 B |
|
@ -23,15 +23,11 @@
|
||||||
*/
|
*/
|
||||||
?>
|
?>
|
||||||
<div class="datepicker-heading">
|
<div class="datepicker-heading">
|
||||||
<button type="button" class="button first" ng-click="prev()" aria-label="<?php p($l->t('Go back')) ?>">
|
<a href="#" class="icon-view-previous" ng-click="prev()" aria-label="<?php p($l->t('Go back')) ?>"></a>
|
||||||
<i class="glyphicon glyphicon-chevron-left"></i>
|
|
||||||
</button>
|
|
||||||
<button ng-cloak type="button" class="button middle" ng-click="toggle()">
|
<button ng-cloak type="button" class="button middle" ng-click="toggle()">
|
||||||
{{ dt | datepickerFilter:selectedView }}
|
{{ dt | datepickerFilter:selectedView }}
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="button last" ng-click="next()" aria-label="<?php p($l->t('Go forward')) ?>">
|
<a href="#" class="icon-view-next" ng-click="next()" aria-label="<?php p($l->t('Go forward')) ?>"></a>
|
||||||
<i class="glyphicon glyphicon-chevron-right"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="datepicker-ng-show-container" class="ng-hide" ng-show="visibility">
|
<div id="datepicker-ng-show-container" class="ng-hide" ng-show="visibility">
|
||||||
<div
|
<div
|
||||||
|
|
Loading…
Reference in New Issue