amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-10-05 20:10:33 +00:00
Code Issues Projects Releases Wiki Activity

(js,css) Adapt time picker to latest md changes

Browse Source
This commit is contained in:
Francis Lachapelle
2016-09-07 16:12:39 -04:00
parent 67258fe337
commit 2040706432
3 changed files with 383 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/datepicker/datePicker.scss
-5
View File
@@ -7,11 +7,6 @@
width: auto;
}
.md-datepicker-input-container {
// Gain some space
margin-left: 0;
}
.sg-datepicker-readonly-input-container {
border-bottom: 0;
}
UI/WebServerResources/scss/components/timepicker/timepicker.scss
+13 -23
View File
@@ -113,10 +113,10 @@ sg-timepicker {
@extend .md-datepicker-input-container;
// From datePicker-theme.scss
border-bottom-color: $colorGrey300; // {{background-300}}
border-bottom-color: $colorGrey300; // {{foreground-4}}
&.sg-timepicker-focused {
border-bottom-color: sg-color($sogoBlue, 500); // {{primary-500}}
border-bottom-color: sg-color($sogoBlue, 900); // {{primary-color}}
border-bottom-width: 2px;
}
@@ -136,6 +136,10 @@ sg-timepicker {
// From datePicker-theme.css
border-color: rgb(224,224,224);
&.md-pane-open {
transform: scale(1);
}
}
// Portion of the floating panel that sits, invisibly, on top of the input.
@@ -143,8 +147,10 @@ sg-timepicker {
@extend .md-datepicker-input-mask;
}
// From datepicker-theme.scss
.sg-timepicker-input-mask-opaque {
@extend .md-datepicker-input-mask-opaque;
box-shadow: 0 0 0 9999px rgb(238,238,238)
// @extend .md-datepicker-input-mask-opaque;
}
// The time portion of the floating pane (vs. the input mask).
@@ -159,7 +165,7 @@ sg-timepicker {
opacity: 1;
}
sg-time:focus {
sg-time-pane:focus {
outline: none;
}
}
@@ -202,28 +208,12 @@ sg-timepicker[disabled] {
overflow: hidden;
.sg-timepicker-input-container {
// The negative bottom margin prevents the content around the datepicker
// from jumping when it gets opened.
margin-bottom: -$md-datepicker-border-bottom-gap;
// From datePicker-theme.scss
background: $colorGrey200; //'{{background-hue-1}}';
}
.md-icon-button + .sg-timepicker-input-container {
@include rtl-prop(margin-left, margin-right, $md-datepicker-button-gap, auto);
}
.sg-timepicker-input,
label:not(.md-no-float):not(._md-container-ignore) {
margin-bottom: -$md-datepicker-border-bottom-gap;
}
// This needs some extra specificity in order to override
// the focused/invalid border colors.
input.sg-timepicker-input {
@include rtl-prop(margin-left, margin-right, 24px, auto);
height: $md-datepicker-input-mask-height;
.sg-timepicker-input-container,
input.md-input {
border-bottom-color: transparent;
}
@@ -234,7 +224,7 @@ sg-timepicker[disabled] {
}
.sg-timepicker-icon {
color: sg-color($sogoBlue, 500); //'{{primary-500}}';
color: sg-color($sogoBlue, 900); //'{{primary-color}}';
}
}