diff options
Diffstat (limited to 'plugins/CoreHome/angularjs/period-selector/period-selector.directive.less')
-rw-r--r-- | plugins/CoreHome/angularjs/period-selector/period-selector.directive.less | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less index e44e0e0f2c..2cf453fd5b 100644 --- a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less +++ b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less @@ -1,10 +1,91 @@ [piwik-period-selector] { display: inline-block; + &.compare-dropdown-open { + label[for=comparePeriodEndDate] { + visibility: hidden; + } + + #comparePeriodEndDate .input-field { + position: static; // needed when dropdown is open, since dropdown content is position: absolute, and this is position: relative, which causes it to show up in the background of the dropdown + } + } + // overrides theme CSS that always hides .loadingPiwik. since we use an ng-if to make // sure it's only shown when we're actually loading a new page, it's not necessary to // forcefully hide it. .loadingPiwik { display: inline-block !important; } + + .compare-checkbox { + margin-bottom: 20px; + } + + .compare-date-range { + padding-top: 20px; + } + + #comparePeriodToDropdown { + height: 30px; + display: inline-block; + width: 60%; + transform: scale(.8); + margin-left: -5%; + margin-right: -5%; + + .form-group { + margin: 0; + } + + .input-field { + margin-top: 0; + } + + .select-dropdown { + margin-bottom: 0; + } + + .dropdown-content { + overflow-y: visible; + } + } + + div#comparePeriodStartDate, div#comparePeriodEndDate { + display: inline-block; + width: calc(~"50% - 20px"); + + .form-group { + margin: 0; + } + + .input-field { + margin-top: 0; + padding: 0; + } + + .select-dropdown { + margin-bottom: 0; + } + } + + .compare-dates-separator { + height: 1px; + margin-left: 8px; + margin-right: 8px; + background-color: @color-silver-l14; + width: 16px; + display: inline-block; + vertical-align: top; + margin-top: 30px; + } + + label[for=comparePeriodTo] { + transform: scale(.9); + } + + .apply-button-container { + text-align: right; + } + } |