[web] Migrate metrics module Pug files to Bootstrap 5 (2) (#26199)
* Reapply "[web] Migrate metrics module Pug files to Bootstrap 5 (#25745)" This reverts commit 0962383998f29313cc1fa33b98255a38896738a0. * Remove foot-scripts from metricsApp.pug * Fix loading-overlay position * Hide carets on print display * Fix Dropdown * Fix Tooltips GitOrigin-RevId: 754d9a004f7b476578ee20565203aef98b08bbf4
This commit is contained in:
Antoine Clausse
@@ -6,7 +6,7 @@ frontend/js/vendor
|
||||
modules/**/frontend/js/vendor
|
||||
public/js
|
||||
public/minjs
|
||||
frontend/stylesheets/components/nvd3.less
|
||||
frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss
|
||||
frontend/js/features/source-editor/lezer-latex/latex.mjs
|
||||
frontend/js/features/source-editor/lezer-latex/latex.terms.mjs
|
||||
frontend/js/features/source-editor/lezer-bibtex/bibtex.mjs
|
||||
|
||||
@@ -1,156 +0,0 @@
|
||||
.hub-header {
|
||||
h2 {
|
||||
display: inline-block;
|
||||
}
|
||||
a {
|
||||
color: @ol-dark-green;
|
||||
}
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
.dropdown {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.admin-item {
|
||||
position: relative;
|
||||
margin-bottom: 60px;
|
||||
.section-title {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.alert-danger {
|
||||
color: @ol-red;
|
||||
}
|
||||
}
|
||||
.hidden-chart-section {
|
||||
display: none;
|
||||
}
|
||||
.hub-circle {
|
||||
display: inline-block;
|
||||
background-color: @accent-color-secondary;
|
||||
border-radius: 50%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
text-align: center;
|
||||
//padding-top: 160px / 6.4;
|
||||
img {
|
||||
height: 160px - 160px / 3.2;
|
||||
}
|
||||
padding-top: 50px;
|
||||
color: white;
|
||||
}
|
||||
.hub-circle-number {
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
.hub-big-number {
|
||||
float: left;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
line-height: 40px;
|
||||
color: @accent-color-secondary;
|
||||
}
|
||||
.hub-big-number,
|
||||
.hub-number-label {
|
||||
display: block;
|
||||
}
|
||||
.hub-metric-link {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 0;
|
||||
a {
|
||||
color: @accent-color-secondary;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.custom-donut-container {
|
||||
svg {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
}
|
||||
.chart-center-text {
|
||||
font-family: @font-family-sans-serif;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
fill: @accent-color-secondary;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.nv-legend-text {
|
||||
font-family: @font-family-sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.chart-no-center-text {
|
||||
.chart-center-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.superscript {
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
|
||||
.admin-page {
|
||||
summary {
|
||||
// firefox does not show markers for block items
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
|
||||
.material-switch {
|
||||
input[type='checkbox'] {
|
||||
display: none;
|
||||
|
||||
&:checked + label::before {
|
||||
background: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:checked + label::after {
|
||||
background: inherit;
|
||||
left: 20px;
|
||||
}
|
||||
&:disabled + label {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
|
||||
&:before {
|
||||
background: rgb(0, 0, 0);
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
content: '';
|
||||
height: 16px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
opacity: 0.3;
|
||||
transition: all 0.2s ease-in-out;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
content: '';
|
||||
height: 24px;
|
||||
left: -4px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -141,4 +141,38 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hub-circle {
|
||||
display: inline-block;
|
||||
background-color: @green-70;
|
||||
border-radius: 50%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
color: white;
|
||||
}
|
||||
.hub-circle-number {
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
.custom-donut-container {
|
||||
svg {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
}
|
||||
.chart-center-text {
|
||||
font-family: @font-family-sans-serif;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
fill: @green-70;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.nv-legend-text {
|
||||
font-family: @font-family-sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
@import 'metrics/admin-hub';
|
||||
@import 'metrics/daterange-picker';
|
||||
@import 'metrics/institution-hub';
|
||||
@import 'metrics/metrics';
|
||||
@import 'metrics/nvd3';
|
||||
@import 'metrics/nvd3_override';
|
||||
@import 'metrics/publisher-hub';
|
||||
@import 'third-party-references';
|
||||
@import 'symbol-palette';
|
||||
@import 'writefull';
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
.hub-header {
|
||||
h2 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
margin-right: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-item {
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing-12);
|
||||
|
||||
.section-title {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: var(--content-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-chart-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hub-circle {
|
||||
display: inline-block;
|
||||
background-color: var(--green-70);
|
||||
border-radius: 50%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hub-circle-number {
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hub-big-number {
|
||||
float: left;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
line-height: 40px;
|
||||
color: var(--green-70);
|
||||
}
|
||||
|
||||
.hub-big-number,
|
||||
.hub-number-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hub-metric-link {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 0;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-donut-container {
|
||||
svg {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.chart-center-text {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
fill: var(--green-70);
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.nv-legend-text {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-no-center-text {
|
||||
.chart-center-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,617 @@
|
||||
// A stylesheet for use with Bootstrap 3.x
|
||||
// @author: Dan Grossman http://www.dangrossman.info/
|
||||
// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
|
||||
// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
|
||||
// @website: https://www.improvely.com/
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
|
||||
// VARIABLES
|
||||
|
||||
// Settings
|
||||
|
||||
// The class name to contain everything within.
|
||||
$arrow-size: 7px;
|
||||
|
||||
// Colors
|
||||
$daterangepicker-color: $green-50;
|
||||
$daterangepicker-bg-color: #fff;
|
||||
$daterangepicker-cell-color: $daterangepicker-color;
|
||||
$daterangepicker-cell-border-color: transparent;
|
||||
$daterangepicker-cell-bg-color: $daterangepicker-bg-color;
|
||||
$daterangepicker-cell-hover-color: $daterangepicker-color;
|
||||
$daterangepicker-cell-hover-border-color: $daterangepicker-cell-border-color;
|
||||
$daterangepicker-cell-hover-bg-color: #eee;
|
||||
$daterangepicker-in-range-color: #000;
|
||||
$daterangepicker-in-range-border-color: transparent;
|
||||
$daterangepicker-in-range-bg-color: #ebf4f8;
|
||||
$daterangepicker-active-color: #fff;
|
||||
$daterangepicker-active-bg-color: #138a07;
|
||||
$daterangepicker-active-border-color: transparent;
|
||||
$daterangepicker-unselected-color: #999;
|
||||
$daterangepicker-unselected-border-color: transparent;
|
||||
$daterangepicker-unselected-bg-color: #fff;
|
||||
|
||||
// daterangepicker
|
||||
$daterangepicker-width: 278px;
|
||||
$daterangepicker-padding: 4px;
|
||||
$daterangepicker-z-index: 3000;
|
||||
$daterangepicker-border-size: 1px;
|
||||
$daterangepicker-border-color: #ccc;
|
||||
$daterangepicker-border-radius: 4px;
|
||||
|
||||
// Calendar
|
||||
$daterangepicker-calendar-margin: $daterangepicker-padding;
|
||||
$daterangepicker-calendar-bg-color: $daterangepicker-bg-color;
|
||||
$daterangepicker-calendar-border-size: 1px;
|
||||
$daterangepicker-calendar-border-color: $daterangepicker-bg-color;
|
||||
$daterangepicker-calendar-border-radius: $daterangepicker-border-radius;
|
||||
|
||||
// Calendar Cells
|
||||
$daterangepicker-cell-size: 20px;
|
||||
$daterangepicker-cell-width: $daterangepicker-cell-size;
|
||||
$daterangepicker-cell-height: $daterangepicker-cell-size;
|
||||
$daterangepicker-cell-border-radius: $daterangepicker-calendar-border-radius;
|
||||
$daterangepicker-cell-border-size: 1px;
|
||||
|
||||
// Dropdowns
|
||||
$daterangepicker-dropdown-z-index: $daterangepicker-z-index + 1;
|
||||
|
||||
// Controls
|
||||
$daterangepicker-control-height: 30px;
|
||||
$daterangepicker-control-line-height: $daterangepicker-control-height;
|
||||
$daterangepicker-control-color: #555;
|
||||
$daterangepicker-control-border-size: 1px;
|
||||
$daterangepicker-control-border-color: #ccc;
|
||||
$daterangepicker-control-border-radius: 4px;
|
||||
$daterangepicker-control-active-border-size: 1px;
|
||||
$daterangepicker-control-active-border-color: $green-50;
|
||||
$daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius;
|
||||
$daterangepicker-control-disabled-color: #ccc;
|
||||
|
||||
// Ranges
|
||||
$daterangepicker-ranges-color: $green-50;
|
||||
$daterangepicker-ranges-bg-color: daterangepicker-ranges-color;
|
||||
$daterangepicker-ranges-border-size: 1px;
|
||||
$daterangepicker-ranges-border-color: $daterangepicker-ranges-bg-color;
|
||||
$daterangepicker-ranges-border-radius: $daterangepicker-border-radius;
|
||||
$daterangepicker-ranges-hover-color: #fff;
|
||||
$daterangepicker-ranges-hover-bg-color: $daterangepicker-ranges-color;
|
||||
$daterangepicker-ranges-hover-border-size: $daterangepicker-ranges-border-size;
|
||||
$daterangepicker-ranges-hover-border-color: $daterangepicker-ranges-hover-bg-color;
|
||||
$daterangepicker-ranges-hover-border-radius: $daterangepicker-border-radius;
|
||||
$daterangepicker-ranges-active-border-size: $daterangepicker-ranges-border-size;
|
||||
$daterangepicker-ranges-active-border-color: $daterangepicker-ranges-bg-color;
|
||||
$daterangepicker-ranges-active-border-radius: $daterangepicker-border-radius;
|
||||
|
||||
// STYLESHEETS
|
||||
.daterangepicker {
|
||||
position: absolute;
|
||||
color: $daterangepicker-color;
|
||||
background-color: $daterangepicker-bg-color;
|
||||
border-radius: $daterangepicker-border-radius;
|
||||
width: $daterangepicker-width;
|
||||
padding: $daterangepicker-padding;
|
||||
margin-top: $daterangepicker-border-size;
|
||||
|
||||
// TODO: Should these be parameterized??
|
||||
// top: 100px;
|
||||
// left: 20px;
|
||||
|
||||
$arrow-prefix-size: $arrow-size;
|
||||
$arrow-suffix-size: ($arrow-size - $daterangepicker-border-size);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
border-bottom-color: rgb(0 0 0 / 20%);
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -$arrow-prefix-size;
|
||||
border-right: $arrow-prefix-size solid transparent;
|
||||
border-left: $arrow-prefix-size solid transparent;
|
||||
border-bottom: $arrow-prefix-size solid $daterangepicker-border-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -$arrow-suffix-size;
|
||||
border-right: $arrow-suffix-size solid transparent;
|
||||
border-bottom: $arrow-suffix-size solid $daterangepicker-bg-color;
|
||||
border-left: $arrow-suffix-size solid transparent;
|
||||
}
|
||||
|
||||
&.opensleft {
|
||||
&::before {
|
||||
// TODO: Make this relative to prefix size.
|
||||
right: $arrow-prefix-size + 2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// TODO: Make this relative to suffix size.
|
||||
right: $arrow-suffix-size + 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.openscenter {
|
||||
&::before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.opensright {
|
||||
&::before {
|
||||
// TODO: Make this relative to prefix size.
|
||||
left: $arrow-prefix-size + 2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// TODO: Make this relative to suffix size.
|
||||
left: $arrow-suffix-size + 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropup {
|
||||
margin-top: -5px;
|
||||
|
||||
// NOTE: Note sure why these are special-cased.
|
||||
&::before {
|
||||
top: initial;
|
||||
bottom: -$arrow-prefix-size;
|
||||
border-bottom: initial;
|
||||
border-top: $arrow-prefix-size solid $daterangepicker-border-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: initial;
|
||||
bottom: -$arrow-suffix-size;
|
||||
border-bottom: initial;
|
||||
border-top: $arrow-suffix-size solid $daterangepicker-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu {
|
||||
max-width: none;
|
||||
z-index: $daterangepicker-dropdown-z-index;
|
||||
}
|
||||
|
||||
&.single {
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Calendars */
|
||||
&.show-calendar {
|
||||
.calendar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: none;
|
||||
max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2);
|
||||
margin: $daterangepicker-calendar-margin;
|
||||
|
||||
&.single {
|
||||
.calendar-table {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
// TODO: Should this actually be hard-coded?
|
||||
min-width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
border: $daterangepicker-calendar-border-size solid
|
||||
$daterangepicker-calendar-border-color;
|
||||
padding: $daterangepicker-calendar-margin;
|
||||
border-radius: $daterangepicker-calendar-border-radius;
|
||||
background-color: $daterangepicker-calendar-bg-color;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
text-align: center;
|
||||
width: $daterangepicker-cell-width;
|
||||
height: $daterangepicker-cell-height;
|
||||
border-radius: $daterangepicker-cell-border-radius;
|
||||
border: $daterangepicker-cell-border-size solid
|
||||
$daterangepicker-cell-border-color;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
&.available {
|
||||
&:hover {
|
||||
background-color: $daterangepicker-cell-hover-bg-color;
|
||||
border-color: $daterangepicker-cell-hover-border-color;
|
||||
color: $daterangepicker-cell-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.week {
|
||||
font-size: 80%;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
&.off {
|
||||
&,
|
||||
&.in-range,
|
||||
&.start-date,
|
||||
&.end-date {
|
||||
background-color: $daterangepicker-unselected-bg-color;
|
||||
border-color: $daterangepicker-unselected-border-color;
|
||||
color: $daterangepicker-unselected-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Date Range
|
||||
&.in-range {
|
||||
background-color: $daterangepicker-in-range-bg-color;
|
||||
border-color: $daterangepicker-in-range-border-color;
|
||||
color: $daterangepicker-in-range-color;
|
||||
|
||||
// TODO: Should this be static or should it be parameterized?
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.start-date {
|
||||
border-radius: $daterangepicker-cell-border-radius 0 0
|
||||
$daterangepicker-cell-border-radius;
|
||||
}
|
||||
|
||||
&.end-date {
|
||||
border-radius: 0 $daterangepicker-cell-border-radius
|
||||
$daterangepicker-cell-border-radius 0;
|
||||
}
|
||||
|
||||
&.start-date.end-date {
|
||||
border-radius: $daterangepicker-cell-border-radius;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $daterangepicker-active-bg-color;
|
||||
border-color: $daterangepicker-active-border-color;
|
||||
color: $daterangepicker-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
&.month {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled Controls
|
||||
td,
|
||||
option {
|
||||
&.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
&.monthselect,
|
||||
&.yearselect {
|
||||
font-size: 12px;
|
||||
padding: 1px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
&.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.hourselect,
|
||||
&.minuteselect,
|
||||
&.secondselect,
|
||||
&.ampmselect {
|
||||
width: 50px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Text Input Controls (above calendar)
|
||||
.input-mini {
|
||||
border: $daterangepicker-control-border-size solid
|
||||
$daterangepicker-control-border-color;
|
||||
border-radius: $daterangepicker-control-border-radius;
|
||||
color: $daterangepicker-control-color;
|
||||
height: $daterangepicker-control-line-height;
|
||||
line-height: $daterangepicker-control-height;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
|
||||
// TODO: Should these all be static, too??
|
||||
margin: 0 0 5px;
|
||||
padding: 0 6px 0 28px;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
border: $daterangepicker-control-active-border-size solid
|
||||
$daterangepicker-control-active-border-color;
|
||||
border-radius: $daterangepicker-control-active-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.daterangepicker_input {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
|
||||
// NOTE: These appear to be eyeballed to me...
|
||||
left: 8px;
|
||||
top: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
&.rtl {
|
||||
.input-mini {
|
||||
padding-right: 28px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.daterangepicker_input i {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Time Picker
|
||||
.calendar-time {
|
||||
text-align: center;
|
||||
margin: 5px auto;
|
||||
line-height: $daterangepicker-control-line-height;
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
|
||||
select {
|
||||
&.disabled {
|
||||
color: $daterangepicker-control-disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Predefined Ranges
|
||||
.ranges {
|
||||
font-size: 11px;
|
||||
float: none;
|
||||
margin: 4px;
|
||||
text-align: left;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 13px;
|
||||
background-color: $daterangepicker-ranges-bg-color;
|
||||
border: $daterangepicker-ranges-border-size solid
|
||||
$daterangepicker-ranges-border-color;
|
||||
border-radius: $daterangepicker-ranges-border-radius;
|
||||
color: $daterangepicker-ranges-color;
|
||||
padding: 3px 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $daterangepicker-ranges-hover-bg-color;
|
||||
color: $daterangepicker-ranges-hover-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $daterangepicker-ranges-hover-bg-color;
|
||||
border: $daterangepicker-ranges-hover-border-size solid
|
||||
$daterangepicker-ranges-hover-border-color;
|
||||
color: $daterangepicker-ranges-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Larger Screen Styling */
|
||||
@include media-breakpoint-up(sm) {
|
||||
.daterangepicker {
|
||||
.glyphicon {
|
||||
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
.glyphicon-chevron-left::before {
|
||||
content: '\f053';
|
||||
}
|
||||
|
||||
.glyphicon-chevron-right::before {
|
||||
content: '\f054';
|
||||
}
|
||||
|
||||
.glyphicon-calendar::before {
|
||||
content: '\f073';
|
||||
}
|
||||
|
||||
width: auto;
|
||||
|
||||
.ranges {
|
||||
ul {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
&.single {
|
||||
.ranges {
|
||||
ul {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar.left {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
&.ltr {
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.rtl {
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ltr {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
|
||||
.calendar {
|
||||
&.left {
|
||||
clear: left;
|
||||
margin-right: 0;
|
||||
|
||||
.calendar-table {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-left: 0;
|
||||
|
||||
.calendar-table {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left .daterangepicker_input {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
||||
.calendar {
|
||||
&.left {
|
||||
clear: right;
|
||||
margin-left: 0;
|
||||
|
||||
.calendar-table {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-right: 0;
|
||||
|
||||
.calendar-table {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ranges,
|
||||
.calendar {
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
/* force the calendar to display on one row */
|
||||
.show-calendar {
|
||||
min-width: 658px; /* width of all contained elements, IE/Edge fallback */
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
.ranges {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.ltr {
|
||||
.ranges {
|
||||
float: left;
|
||||
clear: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.rtl {
|
||||
.ranges {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
clear: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
+22
-6
@@ -1,38 +1,54 @@
|
||||
#institution-hub {
|
||||
.section_header {
|
||||
.section-header {
|
||||
.dropdown {
|
||||
margin-right: 10px;
|
||||
margin-right: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
#usage {
|
||||
.recent-activity {
|
||||
.overbox {
|
||||
font-size: 16px;
|
||||
@include body-base;
|
||||
}
|
||||
|
||||
.hub-big-number,
|
||||
.hub-number-label,
|
||||
.worked-on {
|
||||
display: block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.hub-big-number {
|
||||
padding-right: 10px;
|
||||
padding-right: var(--spacing-04);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hub-number-label,
|
||||
.worked-on {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.hub-number-label {
|
||||
&:nth-child(odd) {
|
||||
margin-top: 16px;
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
.worked-on {
|
||||
color: @text-small-color;
|
||||
color: var(--content-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overbox {
|
||||
margin: 0;
|
||||
padding: var(--spacing-10) var(--spacing-07);
|
||||
background: var(--white);
|
||||
border: 1px solid var(--content-disabled);
|
||||
|
||||
&.overbox-small {
|
||||
padding: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
}
|
||||
+33
-26
@@ -1,6 +1,6 @@
|
||||
#metrics {
|
||||
max-width: none;
|
||||
padding: 0 30px;
|
||||
padding: 0 var(--spacing-09);
|
||||
width: auto;
|
||||
|
||||
svg.nvd3-svg {
|
||||
@@ -9,17 +9,18 @@
|
||||
|
||||
.overbox {
|
||||
margin: 0;
|
||||
padding: 40px 20px;
|
||||
padding: var(--spacing-10) var(--spacing-07);
|
||||
background: #fff;
|
||||
border: 1px solid #dfdfdf;
|
||||
|
||||
.box {
|
||||
padding-bottom: 30px;
|
||||
padding-bottom: var(--spacing-09);
|
||||
overflow: hidden;
|
||||
margin-bottom: 40px;
|
||||
border-bottom: 1px solid rgb(216, 216, 216);
|
||||
margin-bottom: var(--spacing-10);
|
||||
border-bottom: 1px solid rgb(216 216 216);
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--spacing-07);
|
||||
|
||||
h4 {
|
||||
font-size: 19px;
|
||||
@@ -27,10 +28,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.overbox-small {
|
||||
padding: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.print-button {
|
||||
margin-right: 10px;
|
||||
margin-right: var(--spacing-04);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@@ -40,21 +45,18 @@
|
||||
}
|
||||
|
||||
.metric-col {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.metric-header-container {
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
position: relative;
|
||||
padding: var(--spacing-06);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
height: 250px;
|
||||
|
||||
text {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
&:not(:root) {
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -79,6 +81,10 @@
|
||||
|
||||
// BEGIN: Metrics header
|
||||
.metric-header-container {
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@@ -89,12 +95,14 @@
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// END: Metrics header
|
||||
|
||||
// BEGIN: Metrics footer
|
||||
.metric-footer-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// END: Metrics footer
|
||||
|
||||
// BEGIN: Metrics overlays
|
||||
@@ -107,7 +115,7 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 16px; /* 15px of .metric-col padding + 1px border */
|
||||
padding-top: 56px; /* Same as above + 30px for title + 10px overbox padding*/
|
||||
padding-top: 56px; /* Same as above + 30px for title + 10px overbox padding */
|
||||
}
|
||||
|
||||
.metric-overlay-loading {
|
||||
@@ -129,19 +137,20 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// END: Metrics overlays
|
||||
}
|
||||
|
||||
#metrics-header {
|
||||
@media (min-width: 1200px) {
|
||||
margin-bottom: 30px;
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-bottom: var(--spacing-09);
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section_header {
|
||||
.section-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -162,9 +171,11 @@
|
||||
|
||||
#dates-container {
|
||||
display: inline-block;
|
||||
|
||||
.daterangepicker {
|
||||
margin-right: 15px;
|
||||
margin-right: var(--spacing-06);
|
||||
}
|
||||
|
||||
#metrics-dates {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -172,14 +183,10 @@
|
||||
}
|
||||
|
||||
#metrics-footer {
|
||||
margin-top: 30px;
|
||||
margin-top: var(--spacing-09);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.print-loading {
|
||||
#metrics {
|
||||
.metric-col {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
body.print-loading #metrics .metric-col {
|
||||
opacity: 0.5;
|
||||
}
|
||||
+677
-691
File diff suppressed because it is too large
Load Diff
+1
-4
@@ -5,12 +5,9 @@
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
path.domain {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg.nvd3-iddle {
|
||||
&:extend(svg.nvd3-svg);
|
||||
}
|
||||
+27
-9
@@ -2,48 +2,66 @@
|
||||
.recent-activity {
|
||||
.hub-big-number {
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
padding-right: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
#templates-container {
|
||||
width: 100%;
|
||||
|
||||
tr {
|
||||
border: 1px solid @ol-blue-gray-0;
|
||||
border: 1px solid var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 15px;
|
||||
padding: var(--spacing-06);
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.title-cell {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hub-big-number {
|
||||
width: 60%;
|
||||
padding-right: 10px;
|
||||
padding-top: 10px;
|
||||
padding-right: var(--spacing-04);
|
||||
padding-top: var(--spacing-04);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hub-number-label,
|
||||
.since {
|
||||
width: 35%;
|
||||
float: right;
|
||||
@media screen and (max-width: 940px) {
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hub-long-big-number {
|
||||
padding-right: 40px;
|
||||
padding-right: var(--spacing-10);
|
||||
}
|
||||
|
||||
.created-on {
|
||||
color: @gray-light;
|
||||
@include body-sm;
|
||||
|
||||
color: var(--content-disabled);
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.overbox {
|
||||
margin: 0;
|
||||
padding: var(--spacing-10) var(--spacing-07);
|
||||
background: var(--white);
|
||||
border: 1px solid var(--content-disabled);
|
||||
}
|
||||
}
|
||||
@@ -91,3 +91,8 @@
|
||||
color: var(--yellow-50);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-page summary {
|
||||
// firefox does not show markers for block items
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-light-secondary;
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
.welcome-message-card-img {
|
||||
|
||||
@@ -1,656 +0,0 @@
|
||||
//
|
||||
// A stylesheet for use with Bootstrap 3.x
|
||||
// @author: Dan Grossman http://www.dangrossman.info/
|
||||
// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
|
||||
// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
|
||||
// @website: https://www.improvely.com/
|
||||
//
|
||||
|
||||
//
|
||||
// VARIABLES
|
||||
//
|
||||
|
||||
//
|
||||
// Settings
|
||||
|
||||
// The class name to contain everything within.
|
||||
@arrow-size: 7px;
|
||||
|
||||
//
|
||||
// Colors
|
||||
@daterangepicker-color: @brand-primary;
|
||||
@daterangepicker-bg-color: #fff;
|
||||
|
||||
@daterangepicker-cell-color: @daterangepicker-color;
|
||||
@daterangepicker-cell-border-color: transparent;
|
||||
@daterangepicker-cell-bg-color: @daterangepicker-bg-color;
|
||||
|
||||
@daterangepicker-cell-hover-color: @daterangepicker-color;
|
||||
@daterangepicker-cell-hover-border-color: @daterangepicker-cell-border-color;
|
||||
@daterangepicker-cell-hover-bg-color: #eee;
|
||||
|
||||
@daterangepicker-in-range-color: #000;
|
||||
@daterangepicker-in-range-border-color: transparent;
|
||||
@daterangepicker-in-range-bg-color: #ebf4f8;
|
||||
|
||||
@daterangepicker-active-color: #fff;
|
||||
@daterangepicker-active-bg-color: #138a07;
|
||||
@daterangepicker-active-border-color: transparent;
|
||||
|
||||
@daterangepicker-unselected-color: #999;
|
||||
@daterangepicker-unselected-border-color: transparent;
|
||||
@daterangepicker-unselected-bg-color: #fff;
|
||||
|
||||
//
|
||||
// daterangepicker
|
||||
@daterangepicker-width: 278px;
|
||||
@daterangepicker-padding: 4px;
|
||||
@daterangepicker-z-index: 3000;
|
||||
|
||||
@daterangepicker-border-size: 1px;
|
||||
@daterangepicker-border-color: #ccc;
|
||||
@daterangepicker-border-radius: 4px;
|
||||
|
||||
//
|
||||
// Calendar
|
||||
@daterangepicker-calendar-margin: @daterangepicker-padding;
|
||||
@daterangepicker-calendar-bg-color: @daterangepicker-bg-color;
|
||||
|
||||
@daterangepicker-calendar-border-size: 1px;
|
||||
@daterangepicker-calendar-border-color: @daterangepicker-bg-color;
|
||||
@daterangepicker-calendar-border-radius: @daterangepicker-border-radius;
|
||||
|
||||
//
|
||||
// Calendar Cells
|
||||
@daterangepicker-cell-size: 20px;
|
||||
@daterangepicker-cell-width: @daterangepicker-cell-size;
|
||||
@daterangepicker-cell-height: @daterangepicker-cell-size;
|
||||
|
||||
@daterangepicker-cell-border-radius: @daterangepicker-calendar-border-radius;
|
||||
@daterangepicker-cell-border-size: 1px;
|
||||
|
||||
//
|
||||
// Dropdowns
|
||||
@daterangepicker-dropdown-z-index: @daterangepicker-z-index + 1;
|
||||
|
||||
//
|
||||
// Controls
|
||||
@daterangepicker-control-height: 30px;
|
||||
@daterangepicker-control-line-height: @daterangepicker-control-height;
|
||||
@daterangepicker-control-color: #555;
|
||||
|
||||
@daterangepicker-control-border-size: 1px;
|
||||
@daterangepicker-control-border-color: #ccc;
|
||||
@daterangepicker-control-border-radius: 4px;
|
||||
|
||||
@daterangepicker-control-active-border-size: 1px;
|
||||
@daterangepicker-control-active-border-color: @brand-primary;
|
||||
@daterangepicker-control-active-border-radius: @daterangepicker-control-border-radius;
|
||||
|
||||
@daterangepicker-control-disabled-color: #ccc;
|
||||
|
||||
//
|
||||
// Ranges
|
||||
@daterangepicker-ranges-color: @brand-primary;
|
||||
@daterangepicker-ranges-bg-color: daterangepicker-ranges-color;
|
||||
|
||||
@daterangepicker-ranges-border-size: 1px;
|
||||
@daterangepicker-ranges-border-color: @daterangepicker-ranges-bg-color;
|
||||
@daterangepicker-ranges-border-radius: @daterangepicker-border-radius;
|
||||
|
||||
@daterangepicker-ranges-hover-color: #fff;
|
||||
@daterangepicker-ranges-hover-bg-color: @daterangepicker-ranges-color;
|
||||
@daterangepicker-ranges-hover-border-size: @daterangepicker-ranges-border-size;
|
||||
@daterangepicker-ranges-hover-border-color: @daterangepicker-ranges-hover-bg-color;
|
||||
@daterangepicker-ranges-hover-border-radius: @daterangepicker-border-radius;
|
||||
|
||||
@daterangepicker-ranges-active-border-size: @daterangepicker-ranges-border-size;
|
||||
@daterangepicker-ranges-active-border-color: @daterangepicker-ranges-bg-color;
|
||||
@daterangepicker-ranges-active-border-radius: @daterangepicker-border-radius;
|
||||
|
||||
//
|
||||
// STYLESHEETS
|
||||
//
|
||||
.daterangepicker {
|
||||
position: absolute;
|
||||
color: @daterangepicker-color;
|
||||
background-color: @daterangepicker-bg-color;
|
||||
border-radius: @daterangepicker-border-radius;
|
||||
width: @daterangepicker-width;
|
||||
padding: @daterangepicker-padding;
|
||||
margin-top: @daterangepicker-border-size;
|
||||
|
||||
// TODO: Should these be parameterized??
|
||||
// top: 100px;
|
||||
// left: 20px;
|
||||
|
||||
@arrow-prefix-size: @arrow-size;
|
||||
@arrow-suffix-size: (@arrow-size - @daterangepicker-border-size);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -@arrow-prefix-size;
|
||||
|
||||
border-right: @arrow-prefix-size solid transparent;
|
||||
border-left: @arrow-prefix-size solid transparent;
|
||||
border-bottom: @arrow-prefix-size solid @daterangepicker-border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: -@arrow-suffix-size;
|
||||
|
||||
border-right: @arrow-suffix-size solid transparent;
|
||||
border-bottom: @arrow-suffix-size solid @daterangepicker-bg-color;
|
||||
border-left: @arrow-suffix-size solid transparent;
|
||||
}
|
||||
|
||||
&.opensleft {
|
||||
&:before {
|
||||
// TODO: Make this relative to prefix size.
|
||||
right: @arrow-prefix-size + 2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
// TODO: Make this relative to suffix size.
|
||||
right: @arrow-suffix-size + 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.openscenter {
|
||||
&:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.opensright {
|
||||
&:before {
|
||||
// TODO: Make this relative to prefix size.
|
||||
left: @arrow-prefix-size + 2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
// TODO: Make this relative to suffix size.
|
||||
left: @arrow-suffix-size + 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropup {
|
||||
margin-top: -5px;
|
||||
|
||||
// NOTE: Note sure why these are special-cased.
|
||||
&:before {
|
||||
top: initial;
|
||||
bottom: -@arrow-prefix-size;
|
||||
border-bottom: initial;
|
||||
border-top: @arrow-prefix-size solid @daterangepicker-border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: initial;
|
||||
bottom: -@arrow-suffix-size;
|
||||
border-bottom: initial;
|
||||
border-top: @arrow-suffix-size solid @daterangepicker-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu {
|
||||
max-width: none;
|
||||
z-index: @daterangepicker-dropdown-z-index;
|
||||
}
|
||||
|
||||
&.single {
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Calendars */
|
||||
&.show-calendar {
|
||||
.calendar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: none;
|
||||
max-width: @daterangepicker-width - (@daterangepicker-calendar-margin * 2);
|
||||
margin: @daterangepicker-calendar-margin;
|
||||
|
||||
&.single {
|
||||
.calendar-table {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
// TODO: Should this actually be hard-coded?
|
||||
min-width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
border: @daterangepicker-calendar-border-size solid
|
||||
@daterangepicker-calendar-border-color;
|
||||
padding: @daterangepicker-calendar-margin;
|
||||
border-radius: @daterangepicker-calendar-border-radius;
|
||||
background-color: @daterangepicker-calendar-bg-color;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
text-align: center;
|
||||
width: @daterangepicker-cell-width;
|
||||
height: @daterangepicker-cell-height;
|
||||
border-radius: @daterangepicker-cell-border-radius;
|
||||
border: @daterangepicker-cell-border-size solid
|
||||
@daterangepicker-cell-border-color;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
&.available {
|
||||
&:hover {
|
||||
background-color: @daterangepicker-cell-hover-bg-color;
|
||||
border-color: @daterangepicker-cell-hover-border-color;
|
||||
color: @daterangepicker-cell-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.week {
|
||||
font-size: 80%;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
&.off {
|
||||
&,
|
||||
&.in-range,
|
||||
&.start-date,
|
||||
&.end-date {
|
||||
background-color: @daterangepicker-unselected-bg-color;
|
||||
border-color: @daterangepicker-unselected-border-color;
|
||||
color: @daterangepicker-unselected-color;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Date Range
|
||||
&.in-range {
|
||||
background-color: @daterangepicker-in-range-bg-color;
|
||||
border-color: @daterangepicker-in-range-border-color;
|
||||
color: @daterangepicker-in-range-color;
|
||||
|
||||
// TODO: Should this be static or should it be parameterized?
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.start-date {
|
||||
border-radius: @daterangepicker-cell-border-radius 0 0
|
||||
@daterangepicker-cell-border-radius;
|
||||
}
|
||||
|
||||
&.end-date {
|
||||
border-radius: 0 @daterangepicker-cell-border-radius
|
||||
@daterangepicker-cell-border-radius 0;
|
||||
}
|
||||
|
||||
&.start-date.end-date {
|
||||
border-radius: @daterangepicker-cell-border-radius;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @daterangepicker-active-bg-color;
|
||||
border-color: @daterangepicker-active-border-color;
|
||||
color: @daterangepicker-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
&.month {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Disabled Controls
|
||||
//
|
||||
td,
|
||||
option {
|
||||
&.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
&.monthselect,
|
||||
&.yearselect {
|
||||
font-size: 12px;
|
||||
padding: 1px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.monthselect {
|
||||
margin-right: 2%;
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
&.yearselect {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.hourselect,
|
||||
&.minuteselect,
|
||||
&.secondselect,
|
||||
&.ampmselect {
|
||||
width: 50px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Text Input Controls (above calendar)
|
||||
//
|
||||
.input-mini {
|
||||
border: @daterangepicker-control-border-size solid
|
||||
@daterangepicker-control-border-color;
|
||||
border-radius: @daterangepicker-control-border-radius;
|
||||
color: @daterangepicker-control-color;
|
||||
height: @daterangepicker-control-line-height;
|
||||
line-height: @daterangepicker-control-height;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
|
||||
// TODO: Should these all be static, too??
|
||||
margin: 0 0 5px 0;
|
||||
padding: 0 6px 0 28px;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
border: @daterangepicker-control-active-border-size solid
|
||||
@daterangepicker-control-active-border-color;
|
||||
border-radius: @daterangepicker-control-active-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.daterangepicker_input {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
|
||||
// NOTE: These appear to be eyeballed to me...
|
||||
left: 8px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
&.rtl {
|
||||
.input-mini {
|
||||
padding-right: 28px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.daterangepicker_input i {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Time Picker
|
||||
//
|
||||
.calendar-time {
|
||||
text-align: center;
|
||||
margin: 5px auto;
|
||||
line-height: @daterangepicker-control-line-height;
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
|
||||
select {
|
||||
&.disabled {
|
||||
color: @daterangepicker-control-disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Predefined Ranges
|
||||
//
|
||||
|
||||
.ranges {
|
||||
font-size: 11px;
|
||||
float: none;
|
||||
margin: 4px;
|
||||
text-align: left;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 13px;
|
||||
background-color: @daterangepicker-ranges-bg-color;
|
||||
border: @daterangepicker-ranges-border-size solid
|
||||
@daterangepicker-ranges-border-color;
|
||||
border-radius: @daterangepicker-ranges-border-radius;
|
||||
color: @daterangepicker-ranges-color;
|
||||
padding: 3px 12px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: @daterangepicker-ranges-hover-bg-color;
|
||||
color: @daterangepicker-ranges-hover-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: @daterangepicker-ranges-hover-bg-color;
|
||||
border: @daterangepicker-ranges-hover-border-size solid
|
||||
@daterangepicker-ranges-hover-border-color;
|
||||
color: @daterangepicker-ranges-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Larger Screen Styling */
|
||||
@media (min-width: 564px) {
|
||||
.daterangepicker {
|
||||
.glyphicon {
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
.glyphicon-chevron-left:before {
|
||||
content: '\f053';
|
||||
}
|
||||
.glyphicon-chevron-right:before {
|
||||
content: '\f054';
|
||||
}
|
||||
.glyphicon-calendar:before {
|
||||
content: '\f073';
|
||||
}
|
||||
|
||||
width: auto;
|
||||
|
||||
.ranges {
|
||||
ul {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
&.single {
|
||||
.ranges {
|
||||
ul {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar.left {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
&.ltr {
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
&.rtl {
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ltr {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
.calendar {
|
||||
&.left {
|
||||
clear: left;
|
||||
margin-right: 0;
|
||||
|
||||
.calendar-table {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-left: 0;
|
||||
|
||||
.calendar-table {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left .daterangepicker_input {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.calendar.left .calendar-table {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.ranges,
|
||||
.calendar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
&.rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
.calendar {
|
||||
&.left {
|
||||
clear: right;
|
||||
margin-left: 0;
|
||||
|
||||
.calendar-table {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-right: 0;
|
||||
|
||||
.calendar-table {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left .daterangepicker_input {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.calendar.left .calendar-table {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.ranges,
|
||||
.calendar {
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 730px) {
|
||||
/* force the calendar to display on one row */
|
||||
&.show-calendar {
|
||||
min-width: 658px; /* width of all contained elements, IE/Edge fallback */
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
.ranges {
|
||||
width: auto;
|
||||
}
|
||||
&.ltr {
|
||||
.ranges {
|
||||
float: left;
|
||||
clear: none !important;
|
||||
}
|
||||
}
|
||||
&.rtl {
|
||||
.ranges {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
clear: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -61,8 +61,6 @@
|
||||
@import 'components/hover.less';
|
||||
@import 'components/ui-select.less';
|
||||
@import 'components/input-suggestions.less';
|
||||
@import 'components/nvd3.less';
|
||||
@import 'components/nvd3_override.less';
|
||||
@import 'components/infinite-scroll.less';
|
||||
@import 'components/expand-collapse.less';
|
||||
@import 'components/beta-badges.less';
|
||||
@@ -82,7 +80,6 @@
|
||||
@import 'components/modals.less';
|
||||
@import 'components/tooltip.less';
|
||||
@import 'components/popovers.less';
|
||||
@import 'components/daterange-picker';
|
||||
@import 'components/lists.less';
|
||||
@import 'components/overbox.less';
|
||||
@import 'components/embed-responsive.less';
|
||||
@@ -118,7 +115,6 @@
|
||||
@import 'app/invite.less';
|
||||
@import 'app/error-pages.less';
|
||||
@import 'app/editor/history-v2.less';
|
||||
@import 'app/metrics.less';
|
||||
@import 'app/open-in-overleaf.less';
|
||||
@import 'app/primary-email-check';
|
||||
@import 'app/grammarly';
|
||||
@@ -126,9 +122,6 @@
|
||||
@import 'app/ol-chat.less';
|
||||
@import 'app/templates-v2.less';
|
||||
@import 'app/login-register.less';
|
||||
@import 'app/institution-hub.less';
|
||||
@import 'app/publisher-hub.less';
|
||||
@import 'app/admin-hub.less';
|
||||
@import 'app/import.less';
|
||||
@import 'app/website-redesign.less';
|
||||
@import 'app/add-secondary-email-prompt.less';
|
||||
|
||||
Reference in New Issue
Block a user