sxlxc/overleaf-server-arm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Yu Cong
2025-04-24 13:11:28 +08:00
commit ff9c54d5e4
5960 changed files with 834111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
services/web/frontend/stylesheets/components/accordion.less Normal file
View File

@@ -0,0 +1,50 @@
.ol-accordions-container :last-child {
border: 0px !important;
}
.ol-accordions-container {
.custom-accordion-item {
width: 100%;
padding-top: var(--spacing-08);
padding-bottom: var(--spacing-09);
border-bottom: 1px solid var(--neutral-20);
.custom-accordion-header {
text-align: left;
width: 100%;
font-size: var(--font-size-04);
font-weight: 600;
line-height: var(--line-height-03);
color: var(--neutral-90);
background-color: unset;
border: unset;
display: flex;
justify-content: space-between;
padding: unset;
.custom-accordion-icon {
display: flex;
align-items: center;
transition: transform 0.35s ease;
margin-left: var(--spacing-08);
}
&:not(.collapsed) {
.custom-accordion-icon {
transform: rotate(180deg);
transition: transform 0.35s ease;
}
}
}
.custom-accordion-body {
background-color: unset;
text-align: left;
padding: unset;
padding-right: 2rem;
margin-top: var(--spacing-04);
font-size: var(--font-size-body-base);
line-height: var(--line-height-03);
}
}
}

118
services/web/frontend/stylesheets/components/alerts.less Executable file
View File

@@ -0,0 +1,118 @@
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
border-left: 3px solid transparent;
border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
p:last-child {
margin-bottom: 0;
}
}
// Dismissable alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable {
padding-right: (@alert-padding + 20);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.btn-alert-success {
.btn-alert-variant(@alert-success-bg);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-info-alt {
.alert-variant(@alert-info-alt-bg; @alert-info-alt-border; @alert-info-alt-text);
}
.btn-alert-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
.alert-btn(@btn-info-bg);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.btn-alert-warning {
.btn-alert-variant(@alert-warning-bg);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}
.btn-alert-danger {
.btn-alert-variant(@alert-danger-bg);
}
.alert-alt {
.alert-variant(@alert-alt-bg; @alert-alt-border; @alert-alt-text);
}
.btn-alert-alt {
.btn-alert-variant(@alert-alt-bg);
}
.alert {
a,
.btn-inline-link {
color: white;
text-decoration: underline;
background: none;
&:hover,
&:focus,
&:active {
background: none;
}
}
.btn:not(.btn-inline-link) {
text-decoration: none;
}
}

56
services/web/frontend/stylesheets/components/badge.less Normal file
View File

@@ -0,0 +1,56 @@
.badge-tag-bs3 {
@size: 24px;
@padding: 4px;
display: inline-flex;
align-items: center;
height: @size;
max-width: 100%;
min-height: @size;
white-space: nowrap;
color: @ol-blue-gray-6;
background-color: @neutral-20;
border-radius: 4px;
&:hover {
background-color: @neutral-30;
}
&-content-wrapper {
display: flex;
align-items: center;
overflow: hidden;
padding-left: @padding;
padding-right: @padding;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
&-prepend {
margin-right: 2px;
display: flex;
}
&-close {
.reset-button;
width: @size;
font-size: 20px;
height: @size;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0 @padding;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
color: inherit;
&:hover {
background-color: @neutral-40;
}
}
&-content {
.text-overflow();
}
}

67
services/web/frontend/stylesheets/components/beta-badges.less Normal file
View File

@@ -0,0 +1,67 @@
.info-badge,
.beta-badge,
.alpha-badge {
display: inline-block;
width: @line-height-computed * 0.75;
height: @line-height-computed * 0.75;
line-height: @font-size-small;
font-size: @line-height-computed * 0.75;
font-weight: normal;
text-align: center;
color: #fff;
&::before {
line-height: @font-size-small;
font-size: @font-size-small;
}
&:hover,
&:focus {
color: #fff;
text-decoration: none;
}
}
.info-badge {
background-color: @info-badge-bg;
border-radius: @line-height-computed * 0.75;
font-family: @font-family-serif;
font-style: italic;
&::before {
content: 'i';
}
}
.info-badge-fade-bg {
.info-badge;
background-color: rgba(0, 0, 0, 0.25);
}
.beta-badge {
background-color: @orange;
border-radius: @border-radius-base;
&::before {
content: 'β';
}
}
.alpha-badge {
background-color: @ol-green;
border-radius: @border-radius-base;
&::before {
content: 'α';
}
}
.labs-badge {
background-color: @orange;
border-radius: @border-radius-base;
padding: 2px;
color: white;
}
.split-test-badge-tooltip .tooltip-inner {
white-space: pre-wrap;
}

251
services/web/frontend/stylesheets/components/button-groups.less Executable file
View File

@@ -0,0 +1,251 @@
//
// Button groups
// --------------------------------------------------
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
}
}
.btn-group {
label {
&.btn.active {
background-color: @neutral-20;
}
&.btn[disabled] {
cursor: not-allowed;
background-color: @neutral-20;
border-color: @neutral-20;
opacity: 1;
color: @neutral-90;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
&:extend(.clearfix all);
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
margin-left: 5px;
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn {
&:extend(.btn-xs);
}
.btn-group-sm > .btn {
&:extend(.btn-sm);
}
.btn-group-lg > .btn {
&:extend(.btn-lg);
}
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
&.btn-secondary {
background-color: @btn-secondary-hover-bg-color;
}
&.btn-primary {
border-color: @btn-primary-hover-bg-color;
background-color: @btn-primary-hover-bg-color;
}
}
.btn-form-cross {
display: block;
}
// Reposition the caret
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large;
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
> .btn,
> .btn-group,
> .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
&:extend(.clearfix all);
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical
> .btn-group:last-child:not(:first-child)
> .btn:first-child {
.border-top-radius(0);
}
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}
}
// Checkbox and radio options
[data-toggle='buttons'] > .btn > input[type='radio'],
[data-toggle='buttons'] > .btn > input[type='checkbox'] {
display: none;
}
// button group as toolbar item
.btn-group.toolbar-item {
display: flex;
flex-wrap: nowrap;
}

293
services/web/frontend/stylesheets/components/buttons.less Executable file
View File

@@ -0,0 +1,293 @@
//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 0 solid transparent;
white-space: nowrap;
.button-size(
@padding-base-vertical; @padding-base-horizontal; @font-size-base;
@line-height-base; @btn-border-radius-base
);
.user-select(none);
&,
&:active,
&.active {
&:focus {
.tab-focus();
}
}
&:hover,
&:focus {
color: @btn-default-color;
text-decoration: none;
}
// &:active,
// &.active {
// }
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
cursor: not-allowed;
opacity: 1; //needed to override deprecated styling in individual classes
.box-shadow(none);
}
}
&.disabled.btn-info,
&.disabled.btn-default,
&[disabled].btn-info,
&[disabled].btn-default,
fieldset[disabled].btn-info,
fieldset[disabled].btn-default & {
// style only for deprecated classes
.opacity(0.65);
}
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-default-outline {
.button-outline-variant(@btn-default-bg);
}
.btn-primary {
.btn-borderless();
}
.btn-primary-on-primary-bg {
.button-variant(@white; @ol-dark-green; @ol-dark-green);
}
// Success appears as green
.btn-success {
.btn-primary;
}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.btn-borderless(@white, @red, @red-60);
}
// Danger Ghost and error appear as light red with no border
.btn-danger-ghost {
.btn-borderless(@red-50, @btn-danger-ghost-bg, @red-10);
}
// Info Ghost appear as info blue with no border
.btn-info-ghost {
.btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
}
// Background Ghost appear as neutral-90 (matching our text colour) with no border
// .btn-ghost is backported from bs5
.btn-bg-ghost,
.btn-ghost {
.btn-borderless(@neutral-90, @btn-info-ghost-bg, @neutral-10);
}
// Inline button to fit text, without link styling.
// TODO: generic class for other styles
.btn-info-ghost-inline {
.btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
padding: 0 !important;
font-size: inherit !important;
vertical-align: inherit;
}
// btn-secondary
.btn-secondary {
.btn-bordered();
}
.btn-secondary-info {
.btn-secondary;
}
// Buttons relating to premium features have a special background
.btn-premium {
.premium-background;
color: @white;
&:hover {
background: @blue-70;
}
}
.btn-premium-secondary {
.btn-bordered();
.button-variant(@blue-60, @white, @blue-60);
}
.reset-btns {
// reset all buttons back to their original colors
.btn-danger {
.btn-danger;
}
.btn-default {
.btn-default;
}
.btn-default-outline {
.btn-default-outline;
}
.btn-info {
.btn-info;
}
.btn-primary {
.btn-primary;
}
.btn-success {
.btn-success;
}
.btn-warning {
.btn-warning;
}
.btn-secondary {
.btn-secondary;
}
.btn-premium {
.btn-premium;
}
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
color: @link-color;
font-weight: normal;
cursor: pointer;
border-radius: 0;
&,
&:active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
.box-shadow(none);
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
}
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
background-color: transparent;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @btn-link-disabled-color;
text-decoration: none;
}
}
&.btn-danger {
color: @ol-red;
&:hover,
&:focus {
color: @ol-dark-red;
}
}
}
.btn-inline-link {
.btn-link();
padding: 0;
font-size: inherit;
vertical-align: inherit;
}
// Button Sizes
// --------------------------------------------------
.btn-xl {
.button-size(
@padding-large-vertical; @padding-large-horizontal; @font-size-h2;
@line-height-large; @btn-border-radius-large
);
}
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
.button-size(
@padding-large-vertical; @padding-large-horizontal; @font-size-large;
@line-height-large; @btn-border-radius-large
);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
.button-size(
@padding-small-vertical; @padding-small-horizontal; @font-size-small;
@line-height-small; @btn-border-radius-small
);
}
.btn-xs {
.button-size(
@padding-xs-vertical; @padding-xs-horizontal; @font-size-small;
@line-height-small; @btn-border-radius-small
);
}
// Block button
// --------------------------------------------------
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type='submit'],
input[type='reset'],
input[type='button'] {
&.btn-block {
width: 100%;
}
}
.login-btn {
.btn;
.btn-secondary;
position: relative;
padding-left: 20px;
padding-right: 0;
}
.login-btn-dynamic-text {
white-space: normal;
}

201
services/web/frontend/stylesheets/components/card.less Normal file
View File

@@ -0,0 +1,201 @@
.card {
background-color: white;
border-radius: @border-radius-base;
box-shadow: none;
padding: @line-height-computed;
.page-header {
margin: 0 0 1.5625rem;
h1,
h2,
h3 {
margin-top: 0;
}
}
> .container-fluid {
padding: 0;
}
.card-header {
border-bottom: 1px solid @gray-lighter;
padding-bottom: @line-height-computed;
margin-bottom: @line-height-computed;
h2 {
margin: 0;
}
}
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
&.card-drop-shadow {
box-shadow: @card-box-shadow;
background-color: white;
> hr {
margin-left: -@line-height-computed;
margin-right: -@line-height-computed;
}
}
}
.card-thin {
padding: @line-height-computed / 2;
}
.card-group {
.card {
margin: @line-height-computed -15px 0 -15px;
border-radius: 0;
&.card-highlighted {
// Make it taller and card like
margin-top: 0;
border-radius: @border-radius-base;
}
&.card-first {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
&.card-last {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
}
.card-border {
border: @border-width-base solid @border-color-base;
}
.card-content {
padding: @padding-md;
}
.card-gray {
&:extend(.card);
background-color: @card-gray-bg-color;
border-radius: @card-border-radius;
}
.card-gray-dark {
&:extend(.card);
background-color: @ol-blue-gray-1;
border-radius: @card-border-radius;
}
.website-redesign {
.card {
background-color: @card-gray-bg-color;
border-radius: 24px;
}
}
.card {
&.card-dark-green-bg {
background: var(--dark-jungle-green);
border-radius: 16px;
color: var(--green-10);
padding: var(--spacing-09);
a:not(.btn) {
color: var(--green-30);
&:hover {
color: var(--green-30);
}
}
}
&.card-purple-top-border {
background-color: white;
border-radius: 8px;
box-shadow:
0px 2px 4px 0px #1e253014,
0px 4px 12px 0px #1e25301f;
border-top: 8px solid var(--sapphire-blue);
padding: 32px 40px 32px 40px;
}
&.card-premium-border {
h2,
h3,
h4 {
color: var(--blue-60);
}
border-radius: 8px;
padding: var(--spacing-10);
border: 2px solid transparent;
background:
linear-gradient(white, white) padding-box,
linear-gradient(to right, var(--blue-40), #254c84, var(--blue-70))
border-box;
.btn {
width: 100%;
}
}
&.card-pattern {
border-radius: var(--border-radius-medium-new);
color: var(--white);
padding: var(--spacing-13);
text-align: center;
background-size: cover;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.4) 0%,
var(--dark-jungle-green) 25%,
var(--dark-jungle-green) 75%,
rgba(0, 0, 0, 0.4) 100%
),
url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
h2 {
.heading-lg();
}
p {
.body-lg();
}
h1,
h2,
h3,
h4,
h5,
p {
color: var(--white);
}
}
&.card-pattern-left-only {
border-radius: var(--border-radius-medium-new);
color: var(--white);
padding: var(--spacing-13);
background-size: cover;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.4) 0%,
var(--dark-jungle-green) 20%,
var(--dark-jungle-green) 100%
),
url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
h2 {
.heading-lg();
}
p {
.body-lg();
}
h1,
h2,
h3,
h4,
h5,
p {
color: var(--white);
}
}
}

32
services/web/frontend/stylesheets/components/close.less Executable file
View File

@@ -0,0 +1,32 @@
//
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: @close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
.opacity(0.4);
&:hover,
&:focus {
color: @close-color;
text-decoration: none;
cursor: pointer;
.opacity(0.5);
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button& {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
}

29
services/web/frontend/stylesheets/components/component-animations.less Executable file
View File

@@ -0,0 +1,29 @@
//
// Component animations
// --------------------------------------------------
// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.
.fade {
opacity: 0;
.transition(opacity 0.15s linear);
&.in {
opacity: 1;
}
}
.collapse {
display: none;
&.in {
display: block;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
.transition(height 0.35s ease);
}

3
services/web/frontend/stylesheets/components/container.less Normal file
View File

@@ -0,0 +1,3 @@
.container-custom-sm {
max-width: 400px;
}

656
services/web/frontend/stylesheets/components/daterange-picker.less Normal file
View File

@@ -0,0 +1,656 @@
//
// 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;
}
}
}

121
services/web/frontend/stylesheets/components/dev-toolbar.less Normal file
View File

@@ -0,0 +1,121 @@
.dev-toolbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
height: 40px;
background-color: @neutral-90;
padding: 5px 12px;
button.widget {
color: @neutral-10;
margin: 0 4px;
padding: 0 4px;
border: none;
text-decoration: none;
}
.collapse-button {
position: absolute;
padding: 0;
margin-top: -2px;
color: @neutral-50;
span {
font-size: 28px;
}
&:hover {
color: @neutral-30;
}
}
}
.dev-tool-bar-open-button {
position: fixed;
bottom: -2px;
left: 6px;
color: @neutral-50;
span {
font-size: 28px;
}
&:hover {
color: @neutral-30;
}
}
.dev-toolbar-tooltip {
a {
color: @blue-20;
&.btn {
color: @neutral-10;
}
}
&.tooltip.top {
margin-top: -10px;
opacity: 1;
}
.tooltip-inner {
padding: 2px 8px 8px 8px;
text-align: left;
min-width: 300px;
max-height: 800px;
overflow-y: auto;
}
.title {
margin-top: 4px;
}
.test-card {
text-align: left;
color: @neutral-10;
padding: 6px;
border: 2px solid @neutral-70;
background-color: @neutral-80;
border-radius: 4px;
margin-top: 8px;
&.override {
border-color: @blue-40;
}
.test-name {
font-family: monospace;
font-size: @font-size-extra-small;
font-weight: bold;
}
ul {
li.variant-row {
line-height: 24px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
.btn {
color: @white;
}
.material-symbols {
vertical-align: text-top;
font-weight: 400;
}
}
}
}
.actions {
margin-top: 8px;
text-align: right;
}
ul {
margin-bottom: 0;
}
}

4
services/web/frontend/stylesheets/components/divider.less Normal file
View File

@@ -0,0 +1,4 @@
// migrated to layout.scss
.horizontal-divider {
border-top: 1px solid @hr-border;
}

359
services/web/frontend/stylesheets/components/dropdowns.less Executable file
View File

@@ -0,0 +1,359 @@
//
// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: @caret-width-base solid;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
margin-top: -@caret-width-base / 2;
}
// The dropdown wrapper (div)
.dropdown {
position: relative;
}
.open button.dropdown-toggle.dropdown-toggle-no-background,
button.dropdown-toggle.dropdown-toggle-no-background {
background-color: transparent;
box-shadow: none;
border: 0;
&:hover,
&:active,
&:focus {
background-color: transparent;
box-shadow: none;
}
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: @font-size-base;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
background-clip: padding-box;
// Aligns the dropdown menu to right
//
// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-bg);
}
// Links and other items within the dropdown menu
> li > a,
div,
.dropdown-menu-button {
display: block;
padding: @dropdown-item-padding;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
&.subdued {
color: #7a7a7a;
}
.subdued {
color: #7a7a7a;
}
}
// button specific styles
.dropdown-menu-button {
border: none;
outline: none;
width: 100%;
}
.dropdown-header {
color: @dropdown-header-color;
}
}
// This removes positioning, display and z-index, which is used just to style the menu in situations where something
// else is managing that stuff (e.g. the spelling context menu in CodeMirror 6).
.dropdown-menu.dropdown-menu-unpositioned {
position: unset;
top: unset;
left: unset;
z-index: unset;
display: block;
float: unset;
}
// Hover/Focus state
.dropdown-menu > li > a,
.dropdown-menu .dropdown-menu-button {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
.subdued {
color: @dropdown-link-hover-color;
}
div {
color: @dropdown-link-hover-color;
}
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-active-bg;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: @dropdown-link-disabled-color;
div {
color: @dropdown-link-disabled-color;
}
}
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a {
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: not-allowed;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
left: 0;
right: auto;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: 12.5px 15px;
font-size: @font-size-small;
line-height: @line-height-base;
color: @dropdown-header-color;
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: (@zindex-dropdown - 10);
}
// Right aligned dropdowns
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
content: '';
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.dropdown-menu-right();
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
.dropdown-menu-left();
}
}
}
.layout-dropdown {
.dropdown-toggle {
// override style added by required bsStyle react-bootstrap prop
text-decoration: none !important;
}
.dropdown-menu > li {
svg {
line,
rect {
stroke: @dropdown-link-color;
}
path {
fill: @dropdown-link-color;
}
}
> a {
padding: 4px 10px;
}
> a:hover,
> a:focus {
svg {
line,
rect {
stroke: @dropdown-link-hover-color;
}
path {
fill: @dropdown-link-hover-color;
}
}
}
&.disabled {
.subdued {
color: @dropdown-link-disabled-color;
}
svg {
line,
rect {
stroke: @dropdown-link-disabled-color;
}
path {
fill: @dropdown-link-disabled-color;
}
}
> a:hover,
> a:focus {
.subdued {
color: @dropdown-link-disabled-color;
}
svg {
line,
rect {
stroke: @dropdown-link-disabled-color;
}
path {
fill: @dropdown-link-disabled-color;
}
}
}
}
}
.layout-menu-item {
display: flex;
align-items: center;
white-space: nowrap;
justify-content: space-between;
padding: 0;
.layout-menu-item-start {
display: flex;
align-items: center;
padding: 0;
> div {
padding: 0;
}
}
}
.layout-dropdown-list {
a {
i {
margin-right: @margin-xs;
}
}
}
}

26
services/web/frontend/stylesheets/components/embed-responsive.less Normal file
View File

@@ -0,0 +1,26 @@
.embed-responsive {
display: block;
height: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25% !important;
}
.embed-responsive-4by3 {
padding-bottom: 75% !important;
}

6
services/web/frontend/stylesheets/components/expand-collapse.less Normal file
View File

@@ -0,0 +1,6 @@
.expand-collapse-container {
overflow: hidden;
transition:
height 0.15s ease-in-out,
width 0.15s ease-in-out;
}

391
services/web/frontend/stylesheets/components/footer.less Normal file
View File

@@ -0,0 +1,391 @@
footer.site-footer {
background-color: @footer-bg-color;
border-top: 1px solid @gray-lighter;
font-size: 0.9rem;
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
line-height: @footer-height - 1; // Hack — in Chrome, using the full @footer-height would generate vertical scrolling
ul {
list-style: none;
margin: 0px;
li {
display: inline-block;
margin: 0 0.5em;
}
i {
font-size: 1.2rem;
}
}
li.lng-option {
text-align: left;
display: list-item;
img {
vertical-align: text-bottom;
}
a:hover,
a:focus {
color: @white;
}
}
a {
color: @footer-link-color;
&:hover,
&:focus {
color: @footer-link-hover-color;
}
}
}
.site-footer-content {
.container-fluid;
}
.sprite-icon-lang {
display: inline-block;
vertical-align: middle;
}
.fat-footer {
background: @ol-blue-gray-6;
color: @ol-blue-gray-1;
display: flex;
flex-direction: column;
.fat-footer-container {
margin: @margin-xxl auto;
}
a {
color: @ol-blue-gray-1;
}
.footer-brand-container {
flex: 1;
}
.fat-footer-sections {
display: grid;
column-gap: @margin-md;
padding: 0 @padding-md @padding-md;
}
.footer-brand {
display: block;
height: 37px; /* TODO: configurable? */
width: @navbar-brand-width;
background-image: @navbar-brand-image-url;
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
}
.footer-section-heading {
color: @neutral-20;
font-family: @font-family-serif;
font-size: @font-size-h3;
line-height: @headings-line-height;
margin-bottom: @margin-md;
margin-top: @margin-md;
}
.footer-section ul {
font-family: @font-family-sans-serif;
font-size: @font-size-base;
line-height: @line-height-small;
}
.footer-section li {
padding-bottom: @padding-sm;
}
#footer-brand {
grid-column: ~'1/-1';
margin-top: @margin-md;
}
.fat-footer-base {
color: @ol-blue-gray-2;
font-size: @font-size-small;
line-height: @line-height-base;
.fat-footer-base-meta a:not(.dropdown-toggle) {
color: inherit;
}
.language-picker .dropdown-menu {
.dropdown-header {
display: none; /* hiding rather than removing as still needed in the thin footer */
}
a {
color: @gray-dark;
&:hover {
color: white;
}
}
}
.fat-footer-social {
&.x-logo svg path {
fill: @ol-blue-gray-1;
}
&.facebook-logo svg,
&.linkedin-logo svg {
path.background {
fill: @ol-blue-gray-1;
}
}
&.facebook-logo svg {
path.text {
fill: transparent;
}
}
&.linkedin-logo svg {
path.text {
fill: @ol-blue-gray-6;
}
}
}
}
.fat-footer-base-item {
display: flex;
white-space: nowrap;
}
@media (max-width: @screen-xs-max) {
.fat-footer-sections {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, auto);
}
.fat-footer-base {
display: flex;
flex-direction: column;
align-items: center;
margin: @margin-md auto 0;
.fat-footer-base-section {
display: flex;
align-items: center;
}
.fat-footer-base-social {
order: 1;
}
.fat-footer-base-meta {
display: flex;
flex-direction: column-reverse;
align-items: center;
order: 2;
}
.fat-footer-base-item {
padding: @padding-xs;
margin: @margin-lg / 2;
}
.fat-footer-base-meta .fat-footer-base-item {
gap: @margin-lg;
}
.fat-footer-base-social .fat-footer-base-item {
gap: @margin-md;
}
.fat-footer-social {
font-size: @fat-footer-social-font-size;
}
.fat-footer-base-copyright {
order: 2;
}
}
}
@media (min-width: @screen-sm-min) {
.fat-footer-container {
width: (@screen-sm - (@padding-sm * 2));
}
#footer-brand {
grid-column: auto;
grid-row: ~'1/-1';
}
.fat-footer-sections {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, auto);
}
.footer-section:last-of-type {
grid-column: 4;
}
.footer-section ul {
line-height: 20px;
}
.fat-footer-base {
display: flex;
justify-content: space-between;
margin: @margin-md auto;
.fat-footer-base-section {
display: flex;
align-items: center;
}
.fat-footer-base-item {
padding: @padding-xs;
margin: @margin-xs;
}
.fat-footer-base-meta .fat-footer-base-item {
gap: @margin-md;
}
.fat-footer-social {
margin: 0 @margin-xs;
font-size: @fat-footer-social-font-size;
}
}
}
@media (min-width: @screen-md-min) {
.fat-footer-container {
width: (@screen-md - @padding-md);
}
.fat-footer-sections {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: @screen-lg-min) {
.fat-footer-container {
width: (@screen-lg - @padding-lg);
}
.fat-footer-sections {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
}
.footer-section:last-of-type {
grid-column: 6;
}
}
}
.cookie-banner {
padding: 10px 20px;
font-size: 0.9rem;
line-height: 1;
position: fixed;
bottom: 0px;
left: 0;
right: 0;
z-index: 100;
color: @text-color;
background: @ol-blue-gray-0;
box-shadow: 0px -5px 8px 0px #0000001a;
.cookie-banner-actions {
padding-top: 10px;
}
@media (min-width: @screen-sm-min) {
align-items: center;
display: flex;
flex-wrap: wrap;
.cookie-banner-content {
flex: 1;
}
.cookie-banner-actions {
flex-shrink: 0;
white-space: nowrap;
padding-top: 0;
}
}
}
.website-redesign-fat-footer {
.fat-footer-container {
@media (max-width: @screen-xs-max) {
margin: @margin-xxl 0px;
}
}
&.fat-footer {
background: @white;
color: @neutral-90;
a {
color: @neutral-90;
}
.footer-section-heading {
color: @neutral-90;
}
h2 {
font-weight: 400;
}
.fat-footer-base {
color: @neutral-90;
}
// This is duplication of fill colours in the SVGs themselves. This could be avoided by using :has() but that's not
// supported in older versions of browsers and these logos need to be correct.
.fat-footer-social {
&.x-logo svg path {
fill: #0f1419;
}
&.facebook-logo svg,
&.linkedin-logo svg {
path.text {
fill: #fff;
}
}
&.facebook-logo svg {
path.background {
fill: #0866ff;
}
}
&.linkedin-logo svg {
path.background {
fill: #0b66c3;
}
}
}
}
.footer-brand {
background-image: @navbar-brand-image-url-website-redesign;
}
@media (max-width: @screen-xs-max) {
.fat-footer-sections {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, auto);
}
}
}

501
services/web/frontend/stylesheets/components/forms.less Executable file
View File

@@ -0,0 +1,501 @@
//
// Forms
// --------------------------------------------------
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
fieldset {
padding: 0;
margin: 0;
border: 0;
// Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
min-width: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: inherit;
color: @legend-color;
border: 0;
border-bottom: 1px solid @legend-border-color;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
// also update .legend-as-label if changes are made to label
}
.legend-as-label {
// display a legend like a label
&:extend(label);
font-size: @font-size-base;
color: @text-color;
border: 0;
margin-bottom: 0;
line-height: @line-height-01;
}
// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type='search'] {
.box-sizing(border-box);
}
// Position radios and checkboxes better
input[type='radio'],
input[type='checkbox'] {
margin: 4px 0 0;
margin-top: 1px \9; /* IE8-9 */
line-height: normal;
}
// Set the height of file controls to match text inputs
input[type='file'] {
display: block;
}
// Make range inputs behave like textual form controls
input[type='range'] {
display: block;
width: 100%;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for file, radio, and checkbox
input[type='file']:focus,
input[type='radio']:focus,
input[type='checkbox']:focus {
.tab-focus();
}
// Adjust output element
output {
display: block;
padding-top: (@padding-base-vertical + 1);
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
}
// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]
.form-control {
display: block;
width: 100%;
height: @input-height-base;
padding: @padding-base-vertical @input-padding;
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
border: @input-border-size solid @input-border;
border-radius: @input-border-radius;
.transition(~'border-color ease-in-out .15s, box-shadow ease-in-out .15s');
// Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus();
// Placeholder
.placeholder();
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
border-color: @input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content
.placeholder(@neutral-40);
}
// Reset height for `textarea`s, and smaller border-radius
textarea& {
height: auto;
border-radius: @border-radius-base;
}
// Smaller border-radius for `select` inputs
select& {
border-radius: @border-radius-base;
}
}
// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
input[type='search'] {
-webkit-appearance: none;
}
// Special styles for iOS date input
//
// In Mobile Safari, date inputs require a pixel line-height that matches the
// given height of the input.
input[type='date'] {
line-height: @input-height-base;
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
@form-group-margin-bottom: 15px;
.form-group {
margin-bottom: @form-group-margin-bottom;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.radio,
.checkbox {
display: block;
min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
label {
display: inline;
font-weight: normal;
cursor: pointer;
}
}
.fake-disabled-checkbox {
opacity: 0.5;
}
.radio input[type='radio'],
.radio-inline input[type='radio'],
.checkbox input[type='checkbox'],
.checkbox-inline input[type='checkbox'] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
// Apply same disabled cursor tweak as for inputs
//
// Note: Neither radios nor checkboxes can be readonly.
input[type='radio'],
input[type='checkbox'],
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
.input-sm {
.input-size(
@input-height-small; @padding-small-vertical; @padding-small-horizontal;
@font-size-small; @line-height-small; @border-radius-small
);
}
.input-lg {
.input-size(
@input-height-large; @padding-large-vertical; @padding-large-horizontal;
@font-size-large; @line-height-large; @border-radius-large
);
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
.has-feedback {
// Enable absolute positioning
position: relative;
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
position: absolute;
top: (@line-height-computed + 5); // Height of the `label` and its margin
right: 0;
display: block;
width: @input-height-base;
height: @input-height-base;
line-height: @input-height-base;
text-align: center;
}
// Position the feedback inside the input element when there's no label
&.hidden-label .form-control-feedback {
margin-top: -(@line-height-computed + 5);
}
}
.has-feedback-left {
position: relative;
.form-control {
padding-left: @input-height-base;
}
.form-control-feedback-left {
position: absolute;
top: (@line-height-computed + 5); // Height of the `label` and its margin
left: 0;
display: block;
width: @input-height-base;
height: @input-height-base;
line-height: @input-height-base;
text-align: center;
}
}
// Feedback states
.has-success {
.form-control-validation(@brand-success);
}
.has-warning {
.form-control-validation(@brand-warning);
}
.has-error {
.form-control-validation(@brand-danger);
}
.form-control.ng-dirty.ng-invalid:not(:focus),
.form-control[data-ol-dirty]:invalid:not(:focus) {
border-color: @state-danger-text;
.box-shadow(
inset 0 1px 1px rgba(0, 0, 0, 0.075)
); // Redeclare so transitions work
&:focus {
border-color: darken(@state-danger-text, 10%);
@shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 6px lighten(@state-danger-text, 20%);
.box-shadow(@shadow);
}
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
}
// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
// Hide help blocks used as validation messages by default
&.invalid-only {
display: none;
.has-error & {
display: block;
}
}
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
// Kick in the inline
@media (min-width: @screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
.control-label {
margin-bottom: 0;
vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio,
.checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
vertical-align: middle;
}
.radio input[type='radio'],
.checkbox input[type='checkbox'] {
float: none;
margin-left: 0;
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
top: 0;
}
}
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal {
// Consistent vertical alignment of labels, radios, and checkboxes
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
.radio,
.checkbox {
min-height: (@line-height-computed + (@padding-base-vertical + 1));
}
// Make form groups behave like rows
.form-group {
.make-row();
}
.form-control-static {
padding-top: (@padding-base-vertical + 1);
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-sm-min) {
.control-label {
text-align: right;
}
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
top: 0;
right: (@grid-gutter-width / 2);
}
.has-feedback-left .form-control-feedback-left {
top: 0;
left: (@grid-gutter-width / 2);
}
}
.invalid-feedback {
display: flex;
align-items: baseline;
font-size: @font-size-small;
.text-emphasis-variant(@state-danger-text);
}

11
services/web/frontend/stylesheets/components/hover.less Normal file
View File

@@ -0,0 +1,11 @@
.hover-container {
.show-on-hover {
display: none;
}
&:hover {
.show-on-hover {
display: initial;
}
}
}

38
services/web/frontend/stylesheets/components/icons.less Normal file
View File

@@ -0,0 +1,38 @@
// Colors
.icon-accent {
color: @accent-color-secondary!important;
}
.icon-lg {
font-size: 32px !important;
width: 32px !important;
height: 32px !important;
}
.icon-md {
font-size: 24px !important;
width: 24px !important;
height: 24px !important;
}
.icon-sm {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
}
.icon-xs {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
}
.icon-round-background {
border-radius: 50%;
}
.icon-green-round-background {
.icon-round-background;
background: var(--green-30);
color: var(--dark-jungle-green);
}

17
services/web/frontend/stylesheets/components/images.less Normal file
View File

@@ -0,0 +1,17 @@
.circle-img {
border-radius: 50%;
float: left;
// float: right;
height: 100px;
overflow: hidden;
position: relative;
max-width: 100px;
img {
display: inline;
margin: 0 auto;
width: 100%;
}
}
.blockquote-with-img {
margin-left: 115px;
}

3
services/web/frontend/stylesheets/components/infinite-scroll.less Normal file
View File

@@ -0,0 +1,3 @@
.infinite-scroll {
overflow-y: auto;
}

165
services/web/frontend/stylesheets/components/input-groups.less Executable file
View File

@@ -0,0 +1,165 @@
//
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&[class*='col-'] {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
// Ensure that the input is always above the *appended* addon button for
// proper border colors.
position: relative;
z-index: 2;
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
margin-bottom: 0;
}
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
.input-lg();
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
.input-sm();
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Text input groups
// -------------------------
.input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base;
// Sizing
&.input-sm {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
&.input-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type='radio'],
input[type='checkbox'] {
margin-top: 0;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
// Negative margin to only have a 1px border between the two
&:first-child {
> .btn,
> .btn-group {
margin-right: -1px;
}
}
&:last-child {
> .btn,
> .btn-group {
margin-left: -1px;
}
}
}

14
services/web/frontend/stylesheets/components/input-suggestions.less Normal file
View File

@@ -0,0 +1,14 @@
.input-suggestions {
position: relative;
}
.input-suggestions-main {
position: absolute;
top: 0;
background-color: transparent;
}
.input-suggestions-shadow {
background-color: @input-bg !important;
color: lighten(@input-color, 25%);
}

56
services/web/frontend/stylesheets/components/input-switch.less Normal file
View File

@@ -0,0 +1,56 @@
.input-switch {
display: inline-block;
padding-left: 5px;
}
.input-switch-hidden-input {
display: none;
+ .input-switch-btn {
display: block;
width: 34px;
height: 20px;
position: relative;
outline: 0;
margin: 0;
font-weight: normal;
cursor: pointer;
user-select: none;
padding: 1px;
background-color: @rp-highlight-blue;
border-radius: 0.875em;
transition:
background 0.15s ease,
border-color 0.15s ease;
&::before {
content: '';
display: block;
width: 16px;
height: 16px;
position: relative;
left: 1px;
top: 1px;
background-color: #fff;
border-radius: 0.875em;
transition:
background-color 0.15s ease,
color 0.15s ease,
left 0.15s ease;
}
}
&:checked + .input-switch-btn {
background-color: @ol-green;
border-color: #fff;
&::before {
left: 15px;
top: 1px;
}
}
&:disabled + .input-switch-btn {
cursor: default;
opacity: 0.35;
}
}

23
services/web/frontend/stylesheets/components/interstitial.less Normal file
View File

@@ -0,0 +1,23 @@
.interstitial {
max-width: 400px;
padding: 24px;
margin: 0 auto;
background: @white;
display: flex;
flex-direction: column;
.logo {
width: 130px;
margin: 0 auto;
margin-bottom: 24px;
}
.btn {
width: 100%;
}
.interstitial-header {
margin-top: 0;
margin-bottom: 4px;
}
}

91
services/web/frontend/stylesheets/components/labels.less Executable file
View File

@@ -0,0 +1,91 @@
//
// Labels
// --------------------------------------------------
.label {
display: inline;
padding: 0.2em 0.6em 0.3em;
font-size: @labels-font-size;
font-weight: bold;
line-height: 1;
color: @label-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;
// Add hover effects, but only for links
&[href] {
&:hover,
&:focus {
color: @label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Empty labels collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for labels in buttons
.btn & {
position: relative;
top: -1px;
}
}
.label {
padding: 0.3em 0.6em;
display: inline-flex;
align-items: center;
max-width: 100%;
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
.label-variant(@label-default-bg);
}
.label-primary {
.label-variant(@label-primary-bg);
}
.label-success {
.label-variant(@label-success-bg);
}
.label-info {
.label-variant(@label-info-bg);
}
.label-warning {
.label-variant(@label-warning-bg);
}
.label-danger {
.label-variant(@label-danger-bg);
}
.label-text {
color: @ol-type-color;
font-size: 100%;
}
.label-premium {
background-color: @neutral-20;
background-image: url('../../../public/img/material-icons/star-gradient.svg');
background-repeat: no-repeat;
background-position: 2px 2px;
border-radius: 4px;
color: @neutral-90;
display: inline-block;
font-size: 12px;
font-family: @font-family-sans-serif;
margin-left: 10px;
padding: 4px 4px 4px 20px;
vertical-align: middle;
}

97
services/web/frontend/stylesheets/components/list-group.less Executable file
View File

@@ -0,0 +1,97 @@
//
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: @list-group-bg;
border: 1px solid @list-group-border;
// Round the first and last items
&:first-child {
.border-top-radius(@list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius);
}
// Align badges within list items
> .badge {
float: right;
}
> .badge + .badge {
margin-right: 5px;
}
}
// Linked list items
//
// Use anchor elements instead of `li`s or `div`s to create linked list items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item,
button.list-group-item {
color: @list-group-link-color;
.list-group-item-heading {
color: @list-group-link-heading-color;
}
// Hover state
&:hover,
&:focus {
color: @list-group-hover-color;
text-decoration: none;
background-color: @list-group-hover-bg;
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: @list-group-active-text-color;
}
}
}
// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}

27
services/web/frontend/stylesheets/components/lists.less Normal file
View File

@@ -0,0 +1,27 @@
.list-like-table {
border: 1px solid @hr-border;
border-radius: @border-radius-base;
list-style: none;
margin: 0;
padding: 0 @padding-sm;
li {
border-top: 1px solid @hr-border;
div {
display: table-cell;
float: none;
vertical-align: middle;
}
.row {
display: table;
margin: 0;
width: 100%;
}
&:first-child {
border-top: 0;
}
}
}
.list-style-check-green {
list-style-image: url('../../../public/img/fa-check-green.svg');
}

12
services/web/frontend/stylesheets/components/loading-spinner.less Normal file
View File

@@ -0,0 +1,12 @@
.full-size-loading-spinner-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
display: inline-flex;
align-items: center;
}

209
services/web/frontend/stylesheets/components/modals.less Executable file
View File

@@ -0,0 +1,209 @@
//
// Modals
// --------------------------------------------------
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and shit
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~'0.3s ease-out');
}
&.in .modal-dialog {
// prettier-ignore
.translate(0, 0);
}
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0, 0, 0, 0.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade {
.opacity(0);
}
&.in {
.opacity(@modal-backdrop-opacity);
}
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height);
}
// Close icon
.modal-header .close {
margin-top: -2px;
}
.modal-header {
h1,
h2,
h3,
h4,
h5 {
margin: 0;
font-family: @font-family-sans-serif;
font-weight: 700;
}
}
// Title text within header
.modal-title {
margin: 0;
line-height: @modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
padding: @modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
//margin-top: 15px;
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
background-color: @modal-footer-background-color;
border-radius: 0 0 @border-radius-large @border-radius-large;
&:extend(.clearfix
all); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
.modal-footer-left {
float: left;
}
}
// Scale up the modal
@media (min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}
// Modal sizes
.modal-sm {
width: @modal-sm;
}
}
@media (min-width: @screen-md-min) {
.modal-lg {
width: @modal-lg;
}
}
.website-redesign-modal {
.modal-title {
font-size: var(--font-size-05);
line-height: var(--line-height-04);
margin-bottom: var(--spacing-02);
}
.modal-subtitle {
font-size: var(--font-size-03);
line-height: var(--line-height-03);
margin: 0;
}
.modal-body,
.modal-footer {
padding: var(--spacing-06);
}
.modal-header {
border-bottom: 1px solid var(--neutral-20);
}
.modal-footer {
border-top: 1px solid var(--neutral-20);
background-color: transparent;
p:last-child {
margin-bottom: 0;
}
}
.close {
color: var(--neutral-90);
font-size: var(--font-size-05);
line-height: var(--line-height-02);
opacity: 1;
height: 36px;
width: 36px;
padding: var(--spacing-04);
&:hover {
background-color: var(--neutral-10);
border-radius: 50%;
}
}
}

788
services/web/frontend/stylesheets/components/navbar.less Executable file
View File

@@ -0,0 +1,788 @@
//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
border-bottom: 1px solid transparent;
// Prevent floats from breaking the navbar
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
height: 100vh;
&.in {
overflow-y: auto;
}
@media (min-width: @grid-float-breakpoint) {
width: auto;
border-top: 0;
box-shadow: none;
&.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
&.in {
overflow-y: visible;
}
// Undo the collapse side padding for navbars with containers to ensure
// alignment of right-aligned contents.
.navbar-fixed-top &,
.navbar-static-top &,
.navbar-fixed-bottom & {
padding-left: 0;
padding-right: 0;
}
}
}
.navbar-main {
z-index: @z-index-navbar;
.container-fluid > .navbar-collapse {
// High specificity needed to override Bootstrap's default.
margin: 10px 0 0;
@media (min-width: @grid-float-breakpoint) {
margin: 0;
}
}
.navbar-collapse {
// Use absolute positioning to build the hamburger menu.
position: absolute;
left: 0;
width: 100%;
margin: 0;
background-color: @navbar-default-bg;
border-bottom: solid 1px @navbar-default-border;
padding: 0;
@media (min-width: @grid-float-breakpoint) {
// Get back to regular layout mode as soon as the menu items are
// expanded (i.e. not contained within the hamburguer menu).
position: static;
background-color: transparent;
border-bottom: 0;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
}
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container,
.container-fluid {
> .navbar-header,
> .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
}
//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
z-index: @zindex-navbar;
border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
border-width: 1px 0 0;
}
// Brand/project name
.navbar-brand {
float: left;
//padding: @navbar-padding-vertical @navbar-padding-horizontal;
//font-size: @font-size-large;
line-height: @line-height-computed;
//height: @navbar-height;
&:hover,
&:focus {
text-decoration: none;
}
// @media (min-width: @grid-float-breakpoint) {
// .navbar > .container &,
// .navbar > .container-fluid & {
// margin-left: -@navbar-padding-horizontal;
// }
// }
}
.navbar-title {
font-size: 20px;
display: inline-block;
margin-top: 2px;
color: @navbar-title-color;
&:hover,
&:active,
&:focus {
color: @navbar-title-color-hover;
text-decoration: none;
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
position: relative;
float: right;
padding: 3px 10px 0px;
background-color: transparent;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 0;
border-radius: @border-radius-base;
.fa {
font-size: @navbar-height / 2;
}
// We remove the `outline` here, but later compensate by attaching `:hover`
// styles to `:focus`.
&:focus {
outline: none;
}
@media (min-width: @grid-float-breakpoint) {
display: none;
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: @line-height-computed;
}
@media (max-width: @grid-float-breakpoint-max) {
margin: (@navbar-padding-vertical / 2) 0;
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
> li > a,
> li > div.subdued,
> li > form > button,
.dropdown-header {
padding: 5px 15px 5px 25px;
}
> li > a,
> li > form > button {
line-height: @line-height-computed;
&:hover,
&:focus {
background-image: none;
}
}
> li > div.subdued {
line-height: @line-height-computed;
}
}
}
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
}
}
&.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) {
.navbar-left {
.pull-left();
}
.navbar-right {
.pull-right();
}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
@shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 1px 0 rgba(255, 255, 255, 0.1);
.box-shadow(@shadow);
// Mixin behavior for optimum display
.form-inline();
.form-group {
@media (max-width: @grid-float-breakpoint-max) {
margin-bottom: 5px;
}
}
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-bottom-radius(0);
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
.navbar-vertical-align(@input-height-base);
&.btn-sm {
.navbar-vertical-align(@input-height-small);
}
&.btn-xs {
.navbar-vertical-align(22);
}
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
.navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) {
float: left;
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
margin-right: 0;
}
}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;
padding: @navbar-default-padding;
position: absolute;
top: 0;
width: 100%;
height: @header-height;
.navbar-brand {
position: absolute;
top: 5px;
bottom: 5px;
width: @navbar-brand-width;
padding: 0;
background-image: @navbar-brand-image-url;
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
}
.navbar-text {
color: @navbar-default-color;
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
border: 2px solid transparent;
font-size: @navbar-btn-font-size;
font-weight: @navbar-btn-font-weight;
line-height: @navbar-btn-line-height;
background-color: @navbar-default-link-bg;
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-btn-border-radius;
padding: @navbar-btn-padding;
}
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg;
border: 2px solid @navbar-default-link-hover-color;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
> li.subdued > a {
border: 0;
color: @navbar-subdued-color;
margin-left: 0;
background-color: transparent;
&:hover,
&:focus {
color: @navbar-subdued-hover-color;
background-color: @navbar-subdued-hover-bg;
}
&:focus {
.tab-focus();
}
@media (min-width: @grid-float-breakpoint) {
padding: @navbar-subdued-padding;
}
}
> li.primary > a {
.btn-borderless();
}
> li.secondary > a {
.btn-bordered();
border-width: @border-radius-small;
}
@media (min-width: @grid-float-breakpoint) {
> li > a {
border-color: @navbar-default-link-border-color;
margin-left: 1rem;
}
}
}
.navbar-toggle {
&.collapsed {
border-color: @navbar-default-toggle-border-color;
color: @navbar-default-link-color;
transition: 0.2s ease-out;
}
&:not(.collapsed) {
background-color: @navbar-default-toggle-hover-bg;
border-color: @navbar-default-toggle-hover-bg;
color: #fff;
transition: 0.2s ease-in;
}
}
.navbar-collapse,
.navbar-form {
border-color: @navbar-default-border;
}
.navbar-collapse.in {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
}
// Dropdown menu items
.navbar-nav {
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
}
}
> .open.subdued > a {
&,
&:hover,
&:focus {
color: @navbar-subdued-hover-color;
background-color: @navbar-subdued-hover-bg;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
background-color: lighten(@navbar-default-bg, 10%);
> li > div.subdued {
color: mix(@navbar-default-link-color, @navbar-default-bg);
}
> li > a,
> li > form > button {
// padding: 12px 12px 13px 30px;
color: @navbar-default-link-color;
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a,
> .active > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a,
> .disabled > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover {
color: @navbar-default-link-hover-color;
}
}
@media (min-width: @grid-float-breakpoint) {
padding: @navbar-default-padding-v 0;
}
}
// Accessibility
.skip-to-content {
color: @navbar-default-link-color;
background-color: @navbar-default-link-bg;
border: 2px solid transparent;
border-radius: @navbar-btn-border-radius;
font-size: @navbar-btn-font-size;
font-weight: @navbar-btn-font-weight;
left: @navbar-brand-width + @padding-lg;
line-height: @navbar-btn-line-height;
padding: @navbar-btn-padding;
position: absolute;
top: -200px;
z-index: @zindex-navbar + 1;
&:focus {
background-color: @navbar-default-link-hover-bg;
border: 2px solid @navbar-default-link-hover-color;
color: @white;
text-decoration: none;
top: @navbar-default-padding-v;
}
}
.website-redesign-navbar {
&.navbar-default {
background-color: @navbar-default-bg-website-redesign;
.navbar-brand {
background-image: @navbar-brand-image-url-website-redesign;
}
.navbar-text {
color: @navbar-default-color-website-redesign;
}
// There is this -15px margin hack that is needed on the original
// This causes inconsistency with the website redesign navbar,
// so reset it to 0 for now
@media (min-width: @grid-float-breakpoint) {
.navbar-right:last-child {
margin-right: 0;
}
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color-website-redesign;
// border: 2px solid transparent;
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-btn-border-radius;
padding: @navbar-btn-padding;
}
}
> li.subdued > a {
color: @navbar-subdued-color-website-redesign;
&:hover,
&:focus {
color: @navbar-subdued-hover-color-website-redesign;
background-color: @navbar-subdued-hover-bg-website-redesign;
}
&:focus {
.tab-focus();
}
@media (min-width: @grid-float-breakpoint) {
padding: @navbar-subdued-padding;
}
}
> li.primary > a {
.btn-borderless(@white, @green-50, @green-60);
}
> li.secondary > a {
.btn-bordered();
border-width: @border-radius-small;
border-color: transparent;
@media (min-width: @grid-float-breakpoint) {
border-color: @btn-bordered-border-color;
}
}
}
.navbar-toggle {
&.collapsed {
border-color: @navbar-default-toggle-border-color-website-redesign;
color: @navbar-default-link-color-website-redesign;
transition: 0.2s ease-out;
}
&:not(.collapsed) {
background-color: @navbar-default-toggle-hover-bg-website-redesign;
border-color: @navbar-default-toggle-hover-bg-website-redesign;
color: #fff;
transition: 0.2s ease-in;
}
}
.navbar-collapse {
// Use absolute positioning to build the hamburger menu.
background-color: @navbar-default-bg-website-redesign;
border-bottom: solid 1px @navbar-default-border;
}
// Dropdown menu items
.navbar-nav {
.dropdown-menu-button,
.dropdown-menu > li > a {
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg-website-redesign;
}
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @btn-secondary-hover-bg-color; // force secondary button style
color: @navbar-default-link-active-color-website-redesign;
}
}
> .open.subdued > a {
&,
&:hover,
&:focus {
color: @navbar-subdued-hover-color-website-redesign;
background-color: @navbar-subdued-hover-bg-website-redesign;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
background-color: darken(@navbar-default-bg-website-redesign, 5%);
> li > div.subdued {
color: mix(
@navbar-default-link-color-website-redesign,
@navbar-default-bg-website-redesign
);
}
> li > a,
> li > form > button {
// padding: 12px 12px 13px 30px;
color: @navbar-default-link-color-website-redesign;
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg-website-redesign;
}
}
> .active > a,
> .active > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color-website-redesign;
background-color: @navbar-default-link-active-bg-website-redesign;
}
}
> .disabled > a,
> .disabled > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color-website-redesign;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
}
}

7
services/web/frontend/stylesheets/components/navs-ol.less Normal file
View File

@@ -0,0 +1,7 @@
.nav-pills {
> li {
> button {
border-radius: @btn-border-radius-base;
}
}
}

251
services/web/frontend/stylesheets/components/navs.less Executable file
View File

@@ -0,0 +1,251 @@
//
// Navs
// --------------------------------------------------
// Base class
// --------------------------------------------------
.nav {
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
&:extend(.clearfix all);
> li {
position: relative;
display: block;
> a {
position: relative;
display: block;
padding: @nav-link-padding;
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
color: white;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @nav-disabled-link-color;
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
}
}
}
// Open dropdowns
.open > a {
&,
&:hover,
&:focus {
background-color: @nav-link-hover-bg;
border-color: @link-color;
}
}
// Nav dividers (deprecated with v3.0.1)
//
// This should have been removed in v3 with the dropping of `.nav-list`, but
// we missed it. We don't currently support this anywhere, but in the interest
// of maintaining backward compatibility in case you use it, it's deprecated.
.nav-divider {
.nav-divider();
}
// Prevent IE8 from misplacing imgs
//
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}
// Tabs
// -------------------------
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid @nav-tabs-border-color;
> li {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
// Actual tabs (as links)
> a {
margin-right: 2px;
line-height: @line-height-base;
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
cursor: pointer;
border-color: @nav-tabs-link-hover-border-color
@nav-tabs-link-hover-border-color @nav-tabs-border-color;
}
}
// Active state, and its :hover to override normal :hover
&.active > a {
&,
&:hover,
&:focus {
color: @nav-tabs-active-link-hover-color;
background-color: @nav-tabs-active-link-hover-bg;
border: 1px solid @nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
.nav-justified();
.nav-tabs-justified();
}
}
// Pills
// -------------------------
.nav-pills {
> li {
float: left;
// Links rendered as pills
> button {
border-radius: @nav-pills-border-radius;
border: 2px solid @nav-pills-link-color;
color: @nav-pills-link-color;
padding: 8px 13px;
&:hover,
&:focus {
background-color: @nav-pills-link-hover-bg;
border: 2px solid @nav-pills-link-hover-bg;
}
}
+ li {
margin-left: 2px;
}
// Active state
&.active > button {
&,
&:hover,
&:focus {
color: @nav-pills-active-link-hover-color;
border: 2px solid @nav-pills-active-link-hover-bg;
background-color: @nav-pills-active-link-hover-bg;
}
}
}
}
// Stacked pills
.nav-stacked {
> li {
float: none;
+ li {
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
}
}
// Nav variations
// --------------------------------------------------
// Justified nav links
// -------------------------
.nav-justified {
width: 100%;
> li {
float: none;
> a {
text-align: center;
margin-bottom: 5px;
}
}
> .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: @screen-sm-min) {
> li {
display: table-cell;
width: 1%;
> a {
margin-bottom: 0;
}
}
}
}
// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-justified {
border-bottom: 0;
> li > a {
// Override margin from .nav-tabs
margin-right: 0;
border-radius: @border-radius-base;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border: 1px solid @nav-tabs-justified-link-border-color;
}
@media (min-width: @screen-sm-min) {
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
border-radius: @border-radius-base @border-radius-base 0 0;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}
}
// Tabbable tabs
// -------------------------
// Hide tabbable panes to start, show them when `.active`
.tab-content {
background-color: @nav-tabs-active-link-hover-bg;
border: 1px solid @nav-tabs-border-color;
border-top: none;
padding: @line-height-computed / 2;
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}
// Dropdowns
// -------------------------
// Specific dropdowns
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
}

246
services/web/frontend/stylesheets/components/notifications.less Normal file
View File

@@ -0,0 +1,246 @@
.notification-body {
// will be deprecated once notifications moved to use .notification (see below)
flex-grow: 1;
width: 90%;
@media (min-width: @screen-sm-min) {
width: auto;
}
}
.notification-action {
// will be deprecated once notifications moved to use .notification (see below)
margin-top: (@line-height-computed / 2); // match paragraph padding
order: 1;
@media (min-width: @screen-sm-min) {
margin-top: 0;
order: 0;
padding-left: @padding-sm;
}
}
.notification-close {
// will be deprecated once notifications moved to use .notification (see below)
padding-left: @padding-sm;
text-align: right;
width: 10%;
button {
aspect-ratio: 1;
border-radius: 50%;
display: flex;
float: right;
padding: 5.5px;
cursor: pointer;
background: transparent;
border: 0;
&:hover,
&:focus {
background-color: rgba(@neutral-90, 0.08);
color: @text-color;
}
}
@media (min-width: @screen-sm-min) {
width: auto;
}
}
.notification {
border-radius: @border-radius-base-new;
color: @content-primary;
display: flex;
padding: 0 16px 0 16px; // vertical padding added by elements within notification
width: 100%;
a:not(.btn) {
text-decoration: underline;
}
p {
margin-bottom: 4px;
}
.notification-icon {
flex-grow: 0;
padding: 18px 16px 0 0;
}
.notification-content-and-cta {
// shared container to align cta with text on smaller screens
display: flex;
flex-grow: 1;
flex-wrap: wrap;
p:last-child {
margin-bottom: 0;
}
}
.notification-content {
flex-grow: 1;
padding: 16px 0 16px 0;
width: 100%;
}
.notification-cta {
padding-bottom: 16px;
a {
font-weight: 700;
}
a,
button {
white-space: nowrap;
}
}
.notification-disclaimer {
color: @neutral-60;
font-size: @font-size-small;
padding-bottom: 16px;
}
.notification-close-btn {
height: 56px;
align-items: center;
display: flex;
}
.notification-close-btn {
padding: 0 0 0 16px;
button {
aspect-ratio: 1;
border-radius: 50%;
display: flex;
float: right;
padding: 5.5px;
cursor: pointer;
background: transparent;
border: 0;
&:hover,
&:focus {
background-color: rgba(@neutral-90, 0.08);
color: @text-color;
}
}
}
&.notification-type-info {
background-color: @blue-10;
border: 1px solid @blue-20;
.notification-icon {
color: @blue-50;
}
}
&.notification-type-success {
background-color: @green-10;
border: 1px solid @green-20;
.notification-icon {
color: @green-50;
}
}
&.notification-type-warning {
background-color: @yellow-10;
border: 1px solid @yellow-20;
.notification-icon {
color: @yellow-40;
}
}
&.notification-type-error {
background-color: @red-10;
border: 1px solid @red-20;
.notification-icon {
color: @red-50;
}
}
&.notification-type-offer {
background-color: @white;
border: 1px solid @neutral-20;
.notification-icon {
color: @neutral-50;
}
}
@media (min-width: @screen-sm-min) {
&:not(.notification-cta-below-content) {
.notification-content-and-cta {
flex-wrap: nowrap;
}
.notification-content {
width: auto;
}
.notification-cta {
height: 56px;
padding-left: 16px;
padding-bottom: 0;
align-items: center;
display: flex;
}
}
}
}
.notification-with-scroll-margin {
scroll-margin: 16px;
}
.notification-list {
.notification {
margin-bottom: @margin-md;
}
}
// Reconfirmation notification
.reconfirm-notification {
display: flex;
width: 100%;
.fa-warning {
margin-right: @margin-sm;
}
.btn-reconfirm {
float: right;
margin-left: @margin-sm;
text-transform: capitalize;
}
}
.group-invitation-cancel-subscription-notification-buttons {
display: flex;
align-items: center;
}
// Settings page
.affiliations-table {
.reconfirm-notification {
margin: 0px auto @margin-sm auto !important;
padding: @padding-md;
}
.reconfirm-row {
td {
border: 0;
.alert {
border: 0;
padding: 0;
}
:not(.alert) {
.reconfirm-notification {
background-color: @ol-blue-gray-0;
border-radius: @border-radius-base;
.fa-warning {
color: @brand-warning;
}
}
}
}
}
}

691
services/web/frontend/stylesheets/components/nvd3.less Executable file
View File

@@ -0,0 +1,691 @@
/* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */
.nvd3 .nv-axis {
pointer-events: none;
opacity: 1;
}
.nvd3 .nv-axis path {
fill: none;
stroke: #000;
stroke-opacity: 0.75;
shape-rendering: crispEdges;
}
.nvd3 .nv-axis path.domain {
stroke-opacity: 0.75;
}
.nvd3 .nv-axis.nv-x path.domain {
stroke-opacity: 0;
}
.nvd3 .nv-axis line {
fill: none;
stroke: #e5e5e5;
shape-rendering: crispEdges;
}
.nvd3 .nv-axis .zero line,
/*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
stroke-opacity: 0.75;
}
.nvd3 .nv-axis .nv-axisMaxMin text {
font-weight: bold;
}
.nvd3 .x .nv-axis .nv-axisMaxMin text,
.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
text-anchor: middle;
}
.nvd3 .nv-axis.nv-disabled {
opacity: 0;
}
.nvd3 .nv-bars rect {
fill-opacity: 0.75;
transition: fill-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear;
}
.nvd3 .nv-bars rect.hover {
fill-opacity: 1;
}
.nvd3 .nv-bars .hover rect {
fill: lightblue;
}
.nvd3 .nv-bars text {
fill: rgba(0, 0, 0, 0);
}
.nvd3 .nv-bars .hover text {
fill: rgba(0, 0, 0, 1);
}
.nvd3 .nv-multibar .nv-groups rect,
.nvd3 .nv-multibarHorizontal .nv-groups rect,
.nvd3 .nv-discretebar .nv-groups rect {
stroke-opacity: 0;
transition: fill-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear;
}
.nvd3 .nv-multibar .nv-groups rect:hover,
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
.nvd3 .nv-discretebar .nv-groups rect:hover {
fill-opacity: 1;
}
.nvd3 .nv-discretebar .nv-groups text,
.nvd3 .nv-multibarHorizontal .nv-groups text {
font-weight: bold;
fill: rgba(0, 0, 0, 1);
stroke: rgba(0, 0, 0, 0);
}
/* boxplot CSS */
.nvd3 .nv-boxplot circle {
fill-opacity: 0.5;
}
.nvd3 .nv-boxplot circle:hover {
fill-opacity: 1;
}
.nvd3 .nv-boxplot rect:hover {
fill-opacity: 1;
}
.nvd3 line.nv-boxplot-median {
stroke: black;
}
.nv-boxplot-tick:hover {
stroke-width: 2.5px;
}
/* bullet */
.nvd3.nv-bullet {
font: 10px sans-serif;
}
.nvd3.nv-bullet .nv-measure {
fill-opacity: 0.8;
}
.nvd3.nv-bullet .nv-measure:hover {
fill-opacity: 1;
}
.nvd3.nv-bullet .nv-marker {
stroke: #000;
stroke-width: 2px;
}
.nvd3.nv-bullet .nv-markerTriangle {
stroke: #000;
fill: #fff;
stroke-width: 1.5px;
}
.nvd3.nv-bullet .nv-markerLine {
stroke: #000;
stroke-width: 1.5px;
}
.nvd3.nv-bullet .nv-tick line {
stroke: #666;
stroke-width: 0.5px;
}
.nvd3.nv-bullet .nv-range.nv-s0 {
fill: #eee;
}
.nvd3.nv-bullet .nv-range.nv-s1 {
fill: #ddd;
}
.nvd3.nv-bullet .nv-range.nv-s2 {
fill: #ccc;
}
.nvd3.nv-bullet .nv-title {
font-size: 14px;
font-weight: bold;
}
.nvd3.nv-bullet .nv-subtitle {
fill: #999;
}
.nvd3.nv-bullet .nv-range {
fill: #bababa;
fill-opacity: 0.4;
}
.nvd3.nv-bullet .nv-range:hover {
fill-opacity: 0.7;
}
.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
stroke-width: 1px;
}
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
stroke-width: 2px;
}
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
stroke: #2ca02c;
fill: #2ca02c;
}
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
stroke: #d62728;
fill: #d62728;
}
.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
}
.nvd3.nv-candlestickBar .nv-ticks line {
stroke: #333;
}
.nv-force-node {
stroke: #fff;
stroke-width: 1.5px;
}
.nv-force-link {
stroke: #999;
stroke-opacity: 0.6;
}
.nv-force-node text {
stroke-width: 0px;
}
.nvd3 .nv-legend .nv-disabled rect {
/*fill-opacity: 0;*/
}
.nvd3 .nv-check-box .nv-box {
fill-opacity: 0;
stroke-width: 2;
}
.nvd3 .nv-check-box .nv-check {
fill-opacity: 0;
stroke-width: 4;
}
.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
fill-opacity: 0;
stroke-opacity: 0;
}
.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
opacity: 0;
}
/* line plus bar */
.nvd3.nv-linePlusBar .nv-bar rect {
fill-opacity: 0.75;
}
.nvd3.nv-linePlusBar .nv-bar rect:hover {
fill-opacity: 1;
}
.nvd3 .nv-groups path.nv-line {
fill: none;
}
.nvd3 .nv-groups path.nv-area {
stroke: none;
}
.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
fill-opacity: 0;
stroke-opacity: 0;
}
.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
fill-opacity: 0.5 !important;
stroke-opacity: 0.5 !important;
}
.with-transitions .nvd3 .nv-groups .nv-point {
transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
}
.nvd3.nv-scatter .nv-groups .nv-point.hover,
.nvd3 .nv-groups .nv-point.hover {
stroke-width: 7px;
fill-opacity: 0.95 !important;
stroke-opacity: 0.95 !important;
}
.nvd3 .nv-point-paths path {
stroke: #aaa;
stroke-opacity: 0;
fill: #eee;
fill-opacity: 0;
}
.nvd3 .nv-indexLine {
cursor: ew-resize;
}
/********************
* SVG CSS
*/
/********************
Default CSS for an svg element nvd3 used
*/
svg.nvd3-svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
display: block;
width: 100%;
height: 100%;
}
/********************
Box shadow and border radius styling
*/
.nvtooltip.with-3d-shadow,
.with-3d-shadow .nvtooltip {
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.nvd3 text {
font: normal 12px Arial;
}
.nvd3 .title {
font: bold 14px Arial;
}
.nvd3 .nv-background {
fill: white;
fill-opacity: 0;
}
.nvd3.nv-noData {
font-size: 18px;
font-weight: bold;
}
/**********
* Brush
*/
.nv-brush .extent {
fill-opacity: 0.125;
shape-rendering: crispEdges;
}
.nv-brush .resize path {
fill: #eee;
stroke: #666;
}
/**********
* Legend
*/
.nvd3 .nv-legend .nv-series {
cursor: pointer;
}
.nvd3 .nv-legend .nv-disabled circle {
fill-opacity: 0;
}
/* focus */
.nvd3 .nv-brush .extent {
fill-opacity: 0 !important;
}
.nvd3 .nv-brushBackground rect {
stroke: #000;
stroke-width: 0.4;
fill: #fff;
fill-opacity: 0.7;
}
/**********
* Print
*/
@media print {
.nvd3 text {
stroke-width: 0;
fill-opacity: 1;
}
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
stroke-width: 1px;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
stroke-width: 2px;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
stroke: #2ca02c;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
stroke: #d62728;
}
.nvd3 .background path {
fill: none;
stroke: #eee;
stroke-opacity: 0.4;
shape-rendering: crispEdges;
}
.nvd3 .foreground path {
fill: none;
stroke-opacity: 0.7;
}
.nvd3 .nv-parallelCoordinates-brush .extent {
fill: #fff;
fill-opacity: 0.6;
stroke: gray;
shape-rendering: crispEdges;
}
.nvd3 .nv-parallelCoordinates .hover {
fill-opacity: 1;
stroke-width: 3px;
}
.nvd3 .missingValuesline line {
fill: none;
stroke: black;
stroke-width: 1;
stroke-opacity: 1;
stroke-dasharray: 5, 5;
}
.nvd3.nv-pie path {
stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-width 250ms linear,
stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear,
stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear,
stroke-opacity 250ms linear;
}
.nvd3.nv-pie .nv-pie-title {
font-size: 24px;
fill: rgba(19, 196, 249, 0.59);
}
.nvd3.nv-pie .nv-slice text {
stroke: #000;
stroke-width: 0;
}
.nvd3.nv-pie path {
stroke: #fff;
stroke-width: 1px;
stroke-opacity: 1;
}
.nvd3.nv-pie path {
fill-opacity: 0.7;
}
.nvd3.nv-pie .hover path {
fill-opacity: 1;
}
.nvd3.nv-pie .nv-label {
pointer-events: none;
}
.nvd3.nv-pie .nv-label rect {
fill-opacity: 0;
stroke-opacity: 0;
}
/* scatter */
.nvd3 .nv-groups .nv-point.hover {
stroke-width: 20px;
stroke-opacity: 0.5;
}
.nvd3 .nv-scatter .nv-point.hover {
fill-opacity: 1;
}
.nv-noninteractive {
pointer-events: none;
}
.nv-distx,
.nv-disty {
pointer-events: none;
}
/* sparkline */
.nvd3.nv-sparkline path {
fill: none;
}
.nvd3.nv-sparklineplus g.nv-hoverValue {
pointer-events: none;
}
.nvd3.nv-sparklineplus .nv-hoverValue line {
stroke: #333;
stroke-width: 1.5px;
}
.nvd3.nv-sparklineplus,
.nvd3.nv-sparklineplus g {
pointer-events: all;
}
.nvd3 .nv-hoverArea {
fill-opacity: 0;
stroke-opacity: 0;
}
.nvd3.nv-sparklineplus .nv-xValue,
.nvd3.nv-sparklineplus .nv-yValue {
stroke-width: 0;
font-size: 0.9em;
font-weight: normal;
}
.nvd3.nv-sparklineplus .nv-yValue {
stroke: #f66;
}
.nvd3.nv-sparklineplus .nv-maxValue {
stroke: #2ca02c;
fill: #2ca02c;
}
.nvd3.nv-sparklineplus .nv-minValue {
stroke: #d62728;
fill: #d62728;
}
.nvd3.nv-sparklineplus .nv-currentValue {
font-weight: bold;
font-size: 1.1em;
}
/* stacked area */
.nvd3.nv-stackedarea path.nv-area {
fill-opacity: 0.7;
stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
}
.nvd3.nv-stackedarea path.nv-area.hover {
fill-opacity: 0.9;
}
.nvd3.nv-stackedarea .nv-groups .nv-point {
stroke-opacity: 0;
fill-opacity: 0;
}
.nvtooltip {
position: absolute;
background-color: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
padding: 1px;
border: 1px solid rgba(0, 0, 0, 0.2);
z-index: 10000;
display: block;
font-family: Arial;
font-size: 13px;
text-align: left;
pointer-events: none;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.nvtooltip {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 4px;
}
/*Give tooltips that old fade in transition by
putting a "with-transitions" class on the container div.
*/
.nvtooltip.with-transitions,
.with-transitions .nvtooltip {
transition: opacity 50ms linear;
-moz-transition: opacity 50ms linear;
-webkit-transition: opacity 50ms linear;
transition-delay: 200ms;
-moz-transition-delay: 200ms;
-webkit-transition-delay: 200ms;
}
.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
padding: 8px;
}
.nvtooltip h3 {
margin: 0;
padding: 4px 14px;
line-height: 18px;
font-weight: normal;
background-color: rgba(247, 247, 247, 0.75);
color: rgba(0, 0, 0, 1);
text-align: center;
border-bottom: 1px solid #ebebeb;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.nvtooltip p {
margin: 0;
padding: 5px 14px;
text-align: center;
}
.nvtooltip span {
display: inline-block;
margin: 2px 0;
}
.nvtooltip table {
margin: 6px;
border-spacing: 0;
}
.nvtooltip table td {
padding: 2px 9px 2px 0;
vertical-align: middle;
}
.nvtooltip table td.key {
font-weight: normal;
}
.nvtooltip table td.key.total {
font-weight: bold;
}
.nvtooltip table td.value {
text-align: right;
font-weight: bold;
}
.nvtooltip table td.percent {
color: darkgray;
}
.nvtooltip table tr.highlight td {
padding: 1px 9px 1px 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-style: solid;
border-top-width: 1px;
}
.nvtooltip table td.legend-color-guide div {
width: 8px;
height: 8px;
vertical-align: middle;
}
.nvtooltip table td.legend-color-guide div {
width: 12px;
height: 12px;
border: 1px solid #999;
}
.nvtooltip .footer {
padding: 3px;
text-align: center;
}
.nvtooltip-pending-removal {
pointer-events: none;
display: none;
}
/****
Interactive Layer
*/
.nvd3 .nv-interactiveGuideLine {
pointer-events: none;
}
.nvd3 line.nv-guideline {
stroke: #ccc;
}

16
services/web/frontend/stylesheets/components/nvd3_override.less Normal file
View File

@@ -0,0 +1,16 @@
.nvd3 {
.nv-axis {
.tick {
line {
opacity: 0;
}
}
path.domain {
opacity: 0;
}
}
}
svg.nvd3-iddle {
&:extend(svg.nvd3-svg);
}

11
services/web/frontend/stylesheets/components/overbox.less Normal file
View File

@@ -0,0 +1,11 @@
/* overbox: white box with shadow borders */
.overbox {
margin: 0;
padding: 40px 20px;
background: @white;
border: 1px solid @gray-light;
&.overbox-small {
padding: 10px;
}
}

106
services/web/frontend/stylesheets/components/pagination.less Executable file
View File

@@ -0,0 +1,106 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
display: inline-block;
padding-left: 0;
margin: @line-height-computed 0;
border-radius: @border-radius-base;
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> button,
> span {
position: relative;
float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base;
text-decoration: none;
color: @pagination-color;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
margin-left: -1px;
}
&:first-child {
> a,
> button,
> span {
margin-left: 0;
.border-left-radius(@border-radius-base);
}
}
&:last-child {
> a,
> button,
> span {
.border-right-radius(@border-radius-base);
}
}
}
> li > a,
> li > button,
> li > span {
&:hover,
&:focus {
color: @pagination-hover-color;
background-color: @pagination-hover-bg;
border-color: @pagination-hover-border;
}
}
> .active > a,
> .active > button,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-border;
cursor: default;
}
}
> .disabled {
> span,
> span:hover,
> span:focus,
> a,
> a:hover,
> a:focus,
> button,
> button:hover,
> button:focus {
color: @pagination-disabled-color;
background-color: @pagination-disabled-bg;
border-color: @pagination-disabled-border;
cursor: not-allowed;
}
}
.ellipses {
pointer-events: none;
}
}
// Sizing
// --------------------------------------------------
// Large
.pagination-lg {
.pagination-size(
@padding-large-vertical; @padding-large-horizontal; @font-size-large;
@border-radius-large
);
}
// Small
.pagination-sm {
.pagination-size(
@padding-small-vertical; @padding-small-horizontal; @font-size-small;
@border-radius-small
);
}

190
services/web/frontend/stylesheets/components/popovers.less Executable file
View File

@@ -0,0 +1,190 @@
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
display: none;
max-width: @popover-max-width;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top {
margin-top: -@popover-arrow-width;
}
&.right {
margin-left: @popover-arrow-width;
}
&.bottom {
margin-top: @popover-arrow-width;
}
&.left {
margin-left: -@popover-arrow-width;
}
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover > .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover > .arrow {
border-width: @popover-arrow-outer-width;
}
.popover > .arrow:after {
border-width: @popover-arrow-width;
content: '';
}
.popover {
&.top > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
content: ' ';
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
}
&.right > .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color;
&:after {
content: ' ';
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
}
}
&.bottom > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
content: ' ';
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
}
}
&.left > .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color;
&:after {
content: ' ';
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
}
}
.popover.dark-themed {
.popover-title {
color: @popover-dark-color;
background-color: @popover-dark-bg;
border-bottom: 0;
font-family: Lato, sans-serif;
font-weight: bold;
}
.popover-content {
color: @popover-dark-color;
background-color: @popover-dark-bg;
}
a {
color: #97b6e5;
}
padding: 0;
border: 1px solid @popover-dark-border-color;
max-width: @popover-dark-max-width;
}
.popover.dark-themed {
&.top > .arrow {
border-top-color: @popover-dark-arrow-outer-color;
&:after {
border-top-color: @popover-dark-arrow-color;
}
}
&.right > .arrow {
border-right-color: @popover-dark-arrow-outer-color;
&:after {
border-right-color: @popover-dark-arrow-color;
}
}
&.bottom > .arrow {
border-bottom-color: @popover-dark-arrow-outer-color;
&:after {
border-bottom-color: @popover-dark-arrow-color;
}
}
&.left > .arrow {
border-left-color: @popover-dark-arrow-outer-color;
&:after {
border-left-color: @popover-dark-arrow-color;
}
}
}

84
services/web/frontend/stylesheets/components/progress-bars.less Executable file
View File

@@ -0,0 +1,84 @@
//
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// WebKit
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Spec and IE10+
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
height: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @progress-border-radius;
border: @progress-border-width solid @progress-border-color;
.box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
}
// Bar of progress
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: @font-size-small;
line-height: @line-height-computed;
color: @progress-bar-color;
text-align: center;
background-color: @progress-bar-bg;
.box-shadow(@progress-bar-shadow);
.transition(width 0.6s ease);
}
// Striped bars
.progress-striped .progress-bar {
#gradient > .striped();
background-size: 40px 40px;
}
// Call animation for the active one
.progress.active .progress-bar {
.animation(progress-bar-stripes 2s linear infinite);
}
// Variations
// -------------------------
.progress-bar-success {
.progress-bar-variant(@progress-bar-success-bg);
}
.progress-bar-info {
.progress-bar-variant(@progress-bar-info-bg);
}
.progress-bar-warning {
.progress-bar-variant(@progress-bar-warning-bg);
}
.progress-bar-danger {
.progress-bar-variant(@progress-bar-danger-bg);
}

97
services/web/frontend/stylesheets/components/quote.less Normal file
View File

@@ -0,0 +1,97 @@
blockquote.quote-large-text-centered {
text-align: center;
font-size: var(
--font-size-07
) !important; //override .website-redesign blockquote
font-weight: 600 !important; //override .website-redesign blockquote
line-height: var(
--line-height-06
) !important; //override .website-redesign blockquote
// customize open/close quote placement.
// Otherwise, close is after footer and before is above quote
&:before,
&:after {
content: none;
}
.quote {
margin-bottom: var(--spacing-08);
&:before {
content: open-quote;
}
&:after {
content: close-quote;
}
}
.quote-img {
img {
border-radius: 50%;
height: 64px;
max-width: 64px;
}
}
footer {
color: inherit;
font-size: var(--font-size-body-base);
font-weight: 400;
line-height: var(--line-height-03);
padding: var(--spacing-04) 0 0 0;
&:before {
content: none; //override type.less
}
.quote-link {
text-align: center;
margin-top: var(--spacing-05);
}
}
@media (max-width: @screen-sm-max) {
font-size: var(--font-size-04) !important;
line-height: var(--line-height-04) !important;
footer {
font-size: var(--font-size-02) !important;
line-height: var(--line-height-02) !important;
}
}
}
blockquote.quote-left-green-border {
border-left: 2px solid var(--green-60) !important;
text-align: left;
font-size: var(--font-size-07) !important;
line-height: var(--line-height-06) !important;
color: var(--neutral-90);
padding: var(--spacing-04) 0 var(--spacing-04) var(--spacing-06) !important;
// customize open/close quote placement.
// Otherwise, close is after footer and before is above quote
&:before,
&:after {
content: none;
}
.quote {
&:before {
content: open-quote;
}
&:after {
content: close-quote;
}
}
footer {
.heading-xs();
color: var(--neutral-70);
font-weight: 400;
margin: var(--spacing-09) 0 0 0;
padding: 0;
}
.quote-link {
margin-top: var(--spacing-05);
}
}

55
services/web/frontend/stylesheets/components/radio-chip.less Normal file
View File

@@ -0,0 +1,55 @@
.radio-chip {
background: @white;
border: 1px solid @neutral-60;
border-radius: 999px;
color: @neutral-90;
cursor: pointer;
display: inline-flex;
font-weight: 400;
gap: 4px;
inline-size: fit-content;
line-height: 1.4;
padding: 8px 16px 8px 8px;
@media only screen and (max-width: @screen-sm-min) {
width: 100%;
}
&:hover {
background: @neutral-20;
}
&:focus-within {
box-shadow: 0px 0px 0px 2px @blue-30;
}
input[type='radio'] {
accent-color: @green-50;
cursor: pointer;
height: 16px;
margin: 4px;
width: 15px;
}
}
.radio-chip[data-disabled='true'] {
border-color: @neutral-20;
&:hover {
background: @white;
cursor: not-allowed;
}
}
.radio-group {
display: flex;
flex-direction: column;
flex-wrap: wrap;
grid-gap: 16px;
height: 180px;
width: 100%;
@media (max-width: @screen-sm-min) {
flex-wrap: nowrap;
height: 100%;
}
}

75
services/web/frontend/stylesheets/components/select.less Normal file
View File

@@ -0,0 +1,75 @@
.select-trigger {
display: flex;
justify-content: space-between;
border: 1px solid black;
border-radius: 4px;
padding: 5px 10px;
user-select: none;
color: @neutral-90;
&.disabled {
cursor: not-allowed;
background-color: @neutral-20;
border-color: @neutral-20;
}
}
.select-highlighted:not(.select-disabled) {
background-color: @neutral-10;
border-radius: 4px;
}
.select-active {
font-weight: bold;
}
.select-disabled {
color: @text-muted;
cursor: not-allowed;
}
.select-items {
list-style: none;
width: 100%;
padding: 4px;
margin: 0;
position: absolute;
background-color: white;
box-shadow: 0px 2px 4px 0px #1e253029;
overflow-y: auto;
z-index: 1;
max-height: 200px;
& li {
padding: 12px 8px;
}
}
.select-wrapper {
position: relative;
}
.select-item-title,
.select-item-subtitle {
display: block;
user-select: none;
:not(.select-disabled) {
cursor: default;
}
}
.select-item-icon {
width: 30px;
display: inline-block;
}
.select-item-subtitle {
font-size: 0.9rem;
}
.select-icon .select-item-subtitle {
margin-left: 30px;
}
.select-optional-label {
font-weight: normal;
}

90
services/web/frontend/stylesheets/components/split-menu.less Normal file
View File

@@ -0,0 +1,90 @@
.split-menu {
display: flex;
&.btn-md,
&.btn-sm,
&.btn-xs {
padding: 0;
}
&.btn-md {
& > .split-menu-button,
& > .split-menu-dropdown-toggle {
height: 36px;
}
}
&.btn-sm {
& > .split-menu-button,
& > .split-menu-dropdown-toggle {
height: 32px;
}
}
&.btn-xs {
& > .split-menu-button,
& > .split-menu-dropdown-toggle {
height: 28px;
}
}
&.btn-primary {
background-color: @ol-green;
}
.split-menu-icon {
margin-right: @line-height-computed / 4;
}
.split-menu-button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
height: 100%;
padding-top: 0;
padding-bottom: 0;
&.btn-primary {
border-right: 1px solid fade(@neutral-90, 16%);
}
&.btn-danger {
border-right: 1px solid fade(@neutral-90, 16%);
}
&.no-left-radius {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.split-menu-button {
// workaround for for the blue 2x border on the new css
// if z-index rule is not added, the border will overlap under the `split-menu-dropdown-toggle` since margin between both component is only 1px
z-index: 1;
}
.split-menu-dropdown {
float: none;
display: flex;
flex-wrap: nowrap;
align-self: stretch;
margin-right: 6px;
.split-menu-dropdown-toggle {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding: 0 8px;
// on new css, btn-secondary has a border
// since the border between both buttons already been defined in the `split-menu-button`
// we will remove the rule from the dropdown toggle
&.btn-secondary {
border-left: none;
}
&.no-left-border {
border-left: none;
}
}
}
}

18
services/web/frontend/stylesheets/components/stepper.less Normal file
View File

@@ -0,0 +1,18 @@
.stepper {
display: flex;
gap: 12px;
width: 100%;
height: 6px;
.step {
width: 100%;
border-radius: 6px;
background: @neutral-20;
}
.step.completed {
background: @green;
}
.step.active {
background: @green-20;
}
}

63
services/web/frontend/stylesheets/components/switch.less Normal file
View File

@@ -0,0 +1,63 @@
@switch-circle-diameter: 16px;
@switch-inner-padding: 2px;
@switch-width: 34px;
@switch-height: @switch-circle-diameter + @switch-inner-padding +
@switch-inner-padding;
@switch-circle-translate-x: @switch-width - @switch-circle-diameter -
@switch-inner-padding - @switch-inner-padding;
@switch-circle-wrapper-border-radius: @switch-height / 2;
@switch-transition: 0.4s;
.switch-input {
position: relative;
display: inline-block;
width: @switch-width;
height: @switch-height;
input.invisible-input {
opacity: 0;
width: 0;
height: 0;
// span.switch -> circle "wrapper"
& + span.switch {
background-color: @ol-blue-gray-4;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: @switch-transition;
border-radius: @switch-circle-wrapper-border-radius;
}
// span.switch::before is the circle itself
& + span.switch::before {
position: absolute;
content: '';
height: @switch-circle-diameter;
width: @switch-circle-diameter;
left: @switch-inner-padding;
bottom: @switch-inner-padding;
background-color: @white;
transition: @switch-transition;
border-radius: 50%;
}
&:checked + span.switch {
background-color: @ol-green;
}
// when input is checked, move circle to the right
&:checked + span.switch::before {
transform: translateX(@switch-circle-translate-x);
}
}
&.disabled {
input.invisible-input + span.switch {
background-color: @gray-light;
}
}
}

245
services/web/frontend/stylesheets/components/tables.less Executable file
View File

@@ -0,0 +1,245 @@
//
// Tables
// --------------------------------------------------
table {
max-width: 100%;
background-color: @table-bg;
}
th {
text-align: left;
}
// Baseline styles
.table {
width: 100%;
margin-bottom: @line-height-computed;
// Cells
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: @table-cell-padding;
line-height: @line-height-base;
vertical-align: top;
border-top: 1px solid @table-border-color;
}
}
}
// Bottom align for column headings
> thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
}
// Remove top border from thead by default
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
> tbody + tbody {
border-top: 2px solid @table-border-color;
}
// Nesting
.table {
background-color: @body-bg;
}
}
.table-fixed {
.table;
table-layout: fixed;
word-wrap: break-word;
}
.table-vertically-centered-cells {
> tbody > tr > td {
vertical-align: middle;
}
}
// Condensed table w/ half padding
.table-condensed {
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: @table-condensed-cell-padding;
}
}
}
}
// Bordered versions
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid @table-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid @table-border-color;
}
}
}
> thead > tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody > tr:nth-child(odd) {
> td,
> th {
background-color: @table-bg-accent;
}
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody > tr:hover {
> td,
> th {
background-color: @table-bg-hover;
}
}
}
// Table cell sizing
//
// Reset default table behavior
table col[class*='col-'] {
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-column;
}
table {
td,
th {
&[class*='col-'] {
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-cell;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
// Generate the contextual variants
.table-row-variant(active; @table-bg-active);
.table-row-variant(success; @state-success-bg);
.table-row-variant(info; @state-info-bg);
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: @screen-xs-max) {
.table-responsive {
width: 100%;
margin-bottom: (@line-height-computed * 0.75);
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color;
-webkit-overflow-scrolling: touch;
// Tighten up spacing
> .table {
margin-bottom: 0;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
}
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
// chances are there will be only one `tr` in a `thead` and that would
// remove the border altogether.
> tbody,
> tfoot {
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}
.table-outlined-container {
border: @border-width-sm solid @table-border-color;
padding: @padding-sm @padding-sm 0 @padding-sm;
border-radius: @border-radius-base-new;
table {
margin-bottom: 0;
}
}

136
services/web/frontend/stylesheets/components/tabs.less Normal file
View File

@@ -0,0 +1,136 @@
.ol-tabs {
// Overrides for nav.less
.nav-tabs {
border: 0 !important;
margin-bottom: 0;
margin-top: -@line-height-computed; //- adjusted for portal-name
padding: @padding-lg 0 @padding-md;
text-align: center;
}
.nav-tabs > li {
display: inline-block;
float: none;
a {
border: 0;
color: @link-color-alt;
&:focus,
&:hover {
background-color: transparent !important;
border: 0;
color: @link-hover-color-alt;
}
}
}
li.active > a {
background-color: transparent !important;
border: 0 !important;
border-bottom: 1px solid @accent-color-secondary!important;
color: @accent-color-secondary!important;
&:hover {
border-bottom: 1px solid @accent-color-secondary!important;
color: @accent-color-secondary!important;
}
}
.tab-content:extend(.container) {
background-color: transparent !important;
border: none !important;
}
}
.ol-tabs-scrollable {
// Styling for Website redesign, it will be used in CMS Later on.
max-width: 800px;
margin: 0 auto;
.nav-tabs-container {
overflow-x: auto;
margin-bottom: var(--spacing-11);
text-align: center;
.nav-tabs {
display: inline-flex;
border-bottom: var(--border-width-base) solid var(--neutral-20);
margin: 0 auto;
padding: 0;
text-align: center;
min-width: max-content; // This is for horizontal scrolling
border-top: 2px solid transparent; // so that top focus border is visible
li {
display: inline-block;
float: none;
margin-bottom: calc(var(--border-width-base) * -1);
margin-right: var(--spacing-04);
&:last-child {
margin-right: 0;
}
a {
border: 0;
border-radius: 0;
color: var(--neutral-70);
margin-right: unset;
padding: var(--spacing-04);
line-height: var(--line-height-03);
&:focus,
&:hover {
border: 0;
}
&:focus,
&:focus-visible {
background-color: unset;
outline: 0;
}
&:hover {
background-color: var(--neutral-10);
}
&:focus-visible {
.box-shadow-button-input();
}
}
}
li.active > a {
background-color: transparent !important;
border: 0 !important;
border-bottom: 3px solid var(--green-50) !important;
color: @neutral-90 !important;
&:hover {
border-bottom: 3px solid var(--green-50) !important;
}
}
@media (max-width: @screen-xs-max) {
text-align: left;
}
}
}
.tab-content {
border: 0 !important; //override navs.less
padding: 0 !important; //override navs.less
}
.ol-accordions-container :first-child {
// remove top padding so we have spacing-11 between tab nav and tab content
padding-top: 0px !important;
}
}
// Scroll the page up a bit to allow tab links to be shown when navigating to
// a bookmarked tab hash
[data-ol-bookmarkable-tabset] .tab-pane {
scroll-margin-top: calc(
@line-height-computed + // Computed text height
20px + // nav-link-padding top & bottom
@padding-md + // ol-tabs bottom padding
(@line-height-computed / 2) // tab-content top padding
);
}

161
services/web/frontend/stylesheets/components/tags-input.less Normal file
View File

@@ -0,0 +1,161 @@
.tags-input {
display: block;
}
.tags-input *,
.tags-input *:before,
.tags-input *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tags-input label.small {
font-weight: normal;
}
.tags-input .host {
position: relative;
height: 100%;
}
.tags-input .host:active {
outline: none;
}
.tags-input .tags {
.form-control;
appearance: textfield;
-moz-appearance: textfield;
-webkit-appearance: textfield;
overflow: hidden;
word-wrap: break-word;
cursor: text;
background-color: #fff;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.tags-input .tags:focus-within {
&:extend(.input-focus-style);
}
.tags-input .tags .tag-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.tags-input .tags .tag-item {
margin: 2px;
padding: 2px 7px;
display: inline-flex;
align-items: center;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid @gray-light;
background-color: @gray-lightest;
border-radius: 3px;
}
.tags-input .tags .tag-item.selected {
background-color: @gray-lighter;
}
.tags-input .tags .tag-item .fa {
flex-shrink: 0;
}
.tags-input .tags .tag-item .remove-button {
color: @gray-light;
text-decoration: none;
cursor: pointer;
flex-shrink: 0;
}
.tags-input .tags .tag-item .remove-button:active {
color: @brand-primary;
}
.tags-input .tags .input {
border: 0;
outline: none;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.tags-input .tags .input {
.placeholder();
}
.tags-input .tags .input.invalid-tag {
color: @brand-danger;
}
.tags-input .tags .input::-ms-clear {
display: none;
}
.tags-input.ng-invalid .tags {
-webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
}
.tags-input[disabled] .host:focus {
outline: none;
}
.tags-input[disabled] .tags {
background-color: #eee;
cursor: default;
}
.tags-input[disabled] .tags .tag-item {
opacity: 0.65;
background: -webkit-linear-gradient(
top,
#f0f9ff 0%,
rgba(203, 235, 255, 0.75) 47%,
rgba(161, 219, 255, 0.62) 100%
);
background: linear-gradient(
to bottom,
#f0f9ff 0%,
rgba(203, 235, 255, 0.75) 47%,
rgba(161, 219, 255, 0.62) 100%
);
}
.tags-input[disabled] .tags .tag-item .remove-button {
cursor: default;
}
.tags-input[disabled] .tags .tag-item .remove-button:active {
color: @brand-primary;
}
.tags-input[disabled] .tags .input {
background-color: #eee;
cursor: default;
}
.tags-input .autocomplete {
margin-top: 5px;
position: absolute;
padding: 5px 0;
z-index: 999;
width: 100%;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tags-input .autocomplete .suggestion-list {
margin: 0;
padding: 0;
list-style-type: none;
max-height: 280px;
overflow-y: auto;
position: relative;
}
.tags-input .autocomplete .suggestion-item {
padding: 5px 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tags-input .autocomplete .suggestion-item.selected {
color: white;
background-color: @brand-primary;
.subdued {
color: white;
}
}
.tags-input .autocomplete .suggestion-item em {
font-weight: bold;
font-style: normal;
}

35
services/web/frontend/stylesheets/components/thumbnails.less Executable file
View File

@@ -0,0 +1,35 @@
//
// Thumbnails
// --------------------------------------------------
// Mixin and adjust the regular image class
.thumbnail {
display: block;
padding: @thumbnail-padding;
margin-bottom: @line-height-computed;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all 0.2s ease-in-out);
> img,
a > img {
&:extend(.img-responsive);
margin-left: auto;
margin-right: auto;
}
// Add a hover state for linked versions only
a&:hover,
a&:focus,
a&.active {
border-color: @link-color;
}
// Image captions
.caption {
padding: @thumbnail-caption-padding;
color: @thumbnail-caption-color;
}
}

114
services/web/frontend/stylesheets/components/tooltip.less Executable file
View File

@@ -0,0 +1,114 @@
//
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
display: block;
visibility: visible;
font-size: @font-size-small;
line-height: 1.4;
.opacity(0);
&.in {
.opacity(@tooltip-opacity);
}
&.top {
margin-top: -3px;
padding: @tooltip-arrow-width 0;
}
&.right {
margin-left: 3px;
padding: 0 @tooltip-arrow-width;
}
&.bottom {
margin-top: 3px;
padding: @tooltip-arrow-width 0;
}
&.left {
margin-left: -3px;
padding: 0 @tooltip-arrow-width;
}
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: @tooltip-max-width;
padding: 3px 8px;
color: @tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
.tooltip-wide & {
max-width: unset;
}
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-left .tooltip-arrow {
bottom: 0;
left: @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
right: @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width
0;
border-right-color: @tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width
@tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-left .tooltip-arrow {
top: 0;
left: @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
right: @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
}

65
services/web/frontend/stylesheets/components/ui-select.less Normal file
View File

@@ -0,0 +1,65 @@
.ui-select-bootstrap > .ui-select-choices,
.ui-select-bootstrap > .ui-select-no-choice {
width: auto;
max-width: 400px;
}
.dropdown-menu .ui-select-choices-row {
padding: 4px 0;
> .ui-select-choices-row-inner {
overflow: hidden;
text-overflow: ellipsis;
}
}
.ui-select-placeholder,
.ui-select-match-text {
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
}
.ui-select-bootstrap {
&:focus {
outline: none;
}
> .ui-select-match {
&:focus {
outline: none;
}
&.btn-default-focus {
outline: 0;
box-shadow: none;
background-color: transparent;
> .btn {
border-color: @input-border-focus;
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px fade(@input-border-focus, 60%);
padding-top: @input-suggestion-v-offset;
}
}
> .btn {
color: @input-color;
background-color: @input-bg;
border: 1px solid @input-border;
padding-top: @input-suggestion-v-offset;
&[disabled] {
cursor: not-allowed;
background-color: @input-bg-disabled;
opacity: 1;
}
}
}
}
.ui-select-container[tagging] {
.ui-select-toggle {
cursor: text;
padding-top: @input-suggestion-v-offset;
> i.caret.pull-right {
display: none;
}
}
}