(css) Improve Calendar views
parent
24ad2493a4
commit
2c2c5241eb
|
@ -6,7 +6,7 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<md-toolbar class="daysView md-hue-1" md-scroll-shrink="true" var:sg-view="currentView">
|
||||
<md-toolbar class="daysView md-hue-1" var:sg-view="currentView">
|
||||
|
||||
<!-- Display today abreviation and date -->
|
||||
<div class="days dayLabels">
|
||||
|
@ -14,7 +14,7 @@
|
|||
<div var:class="dayClasses">
|
||||
<!-- Week view day header -->
|
||||
<var:if condition="isWeekView">
|
||||
<div class="sg-md-caption"><var:string value="labelForDay"/></div>
|
||||
<div class="sg-md-caption md-default-theme md-fg md-primary md-hue-1"><var:string value="labelForDay"/></div>
|
||||
<var:if condition="currentTableDay.isToday">
|
||||
<div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||
</var:if>
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
<div layout="row" layout-align="center center"
|
||||
class="md-flex md-default-theme md-fg md-hue-2">
|
||||
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
|
||||
<div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
|
||||
<div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
|
|
@ -59,6 +59,7 @@ $scrollbar_width: 16px;
|
|||
// The days labels appear in the toolbar
|
||||
md-toolbar {
|
||||
&.daysView, &.monthView {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
z-index: $z-index-toolbar - 1;
|
||||
.days {
|
||||
|
@ -124,8 +125,9 @@ $scrollbar_width: 16px;
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: $sg-font-size-2;
|
||||
padding: 2px;
|
||||
min-height: $sg-font-size-2 + 4px;
|
||||
padding: 4px;
|
||||
min-height: $sg-font-size-2 + 8px;
|
||||
text-align: right;
|
||||
//font-weight: $sg-font-light;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
@ -195,6 +197,7 @@ $scrollbar_width: 16px;
|
|||
|
||||
// Multicolumn day cell that contains the calendar name
|
||||
.multicolumnDay {
|
||||
color: $colorGrey900;
|
||||
font-size: $subhead-font-size-base;
|
||||
font-weight: $sg-font-light;
|
||||
overflow: hidden;
|
||||
|
@ -204,22 +207,28 @@ $scrollbar_width: 16px;
|
|||
}
|
||||
|
||||
.monthView {
|
||||
.dayLabels {
|
||||
// Cells of week days of all the same width
|
||||
flex: 1 1 0;
|
||||
text-align: center;
|
||||
}
|
||||
md-grid-tile {
|
||||
//border: 1px solid sg-color($sogoPaper, 300);
|
||||
border-right: 1px solid rgb(242, 242, 242);
|
||||
border-bottom: 1px solid rgb(242, 242, 242);
|
||||
// Border of month day cell
|
||||
border-right: 1px solid $colorGrey100;
|
||||
border-bottom: 1px solid $colorGrey100;
|
||||
overflow: auto;
|
||||
// Cells of another month
|
||||
&.dayOfAnotherMonth {
|
||||
background-color: rgb(250, 250, 250);
|
||||
//border-color: #ddd;
|
||||
background-color: $colorGrey50;
|
||||
.sg-calendar-tile-header,
|
||||
.sg-calendar-tile-header > span {
|
||||
color: rgb(221, 221, 221) !important; // Overwrite dynamic CSS theme
|
||||
color: $colorGrey300 !important;
|
||||
}
|
||||
}
|
||||
&.dayOfToday {
|
||||
.sg-calendar-tile-header {
|
||||
> span {
|
||||
// Circle today's date
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
|
|
Loading…
Reference in New Issue