feat: VivesPOS landing on Winter CMS 1.2 — theme + plugin + Dockerfile
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
- Base: wintercms/winter branch 1.2 (full framework) - Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS - Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication - Partials: hero (offline-first), features, modes (offline/nube toggle), screenshots, pricing (3 planes), comparison, FAQ, CTA - Plugin VivesPOS.Site with ContactForm - Dockerfile: PHP 8.2 Apache, port 80, healthcheck - Added winter/wn-pages, blog, sitemap, seo plugins - Active theme set to vivespos
This commit is contained in:
7
modules/system/assets/ui/less/autocomplete.less
Normal file
7
modules/system/assets/ui/less/autocomplete.less
Normal file
@@ -0,0 +1,7 @@
|
||||
.autocomplete.dropdown-menu {
|
||||
background: white;
|
||||
|
||||
li a {
|
||||
padding: 3px 12px;
|
||||
}
|
||||
}
|
||||
99
modules/system/assets/ui/less/breadcrumb.less
Normal file
99
modules/system/assets/ui/less/breadcrumb.less
Normal file
@@ -0,0 +1,99 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Breadcrumb
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-breadcrumb-text: #FFFFFF;
|
||||
@color-breadcrumb-active-text: #2A3E51;
|
||||
@color-breadcrumb-background: #d0d9dd;
|
||||
@color-breadcrumb-inactive-background: #9098a2;
|
||||
@color-breadcrumb-active-background: @brand-secondary;
|
||||
|
||||
.control-breadcrumb {
|
||||
margin: -(@padding-standard) -(@padding-standard) @padding-standard -(@padding-standard);
|
||||
background-color: @color-breadcrumb-background;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: @font-size-base;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 12px 10px 12px 30px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: @color-breadcrumb-text;
|
||||
background-color: @color-breadcrumb-inactive-background;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: @color-breadcrumb-text;
|
||||
text-decoration: none;
|
||||
&:hover { color: @color-breadcrumb-text; }
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
top: 0;
|
||||
right: -14px;
|
||||
position: absolute;
|
||||
z-index: @zindex-breadcrumb;
|
||||
}
|
||||
|
||||
&:after {
|
||||
.triangle(right, 15px, 45px, @color-breadcrumb-inactive-background);
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: -15px;
|
||||
z-index: @zindex-breadcrumb - 1;
|
||||
.triangle(right, 15px, 45px, @color-breadcrumb-background);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
content:'';
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background-color: transparent;
|
||||
color: @color-breadcrumb-active-text;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb to sit flush to the element below
|
||||
body.breadcrumb-flush .control-breadcrumb,
|
||||
.control-breadcrumb.breadcrumb-flush {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body.slim-container {
|
||||
.control-breadcrumb {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body.compact-container {
|
||||
.control-breadcrumb {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
185
modules/system/assets/ui/less/button.base.less
Normal file
185
modules/system/assets/ui/less/button.base.less
Normal file
@@ -0,0 +1,185 @@
|
||||
|
||||
// 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;
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
|
||||
.user-select(none);
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @btn-default-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none; // Future-proof disabling of clicks
|
||||
.opacity(.65);
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-default {
|
||||
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border; @btn-primary-bg; @btn-primary-bg);
|
||||
}
|
||||
.btn-primary {
|
||||
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border; @btn-primary-bg; @btn-primary-bg);
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-secondary {
|
||||
.button-variant(#000; @btn-secondary-bg; @btn-secondary-border; @btn-secondary-bg; @btn-secondary-bg);
|
||||
color: @btn-secondary-color;
|
||||
}
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
.button-variant(@btn-success-color; @btn-default-bg; @btn-success-border; @btn-success-bg; @btn-success-bg);
|
||||
}
|
||||
// Info appears as blue-green
|
||||
.btn-info {
|
||||
.button-variant(@btn-info-color; @btn-default-bg; @btn-info-border; @btn-info-bg; @btn-info-bg);
|
||||
}
|
||||
// Warning appears as orange
|
||||
.btn-warning {
|
||||
.button-variant(@btn-warning-color; @btn-default-bg; @btn-warning-border; @btn-warning-bg; @btn-warning-bg);
|
||||
}
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
.button-variant(@btn-danger-color; @btn-default-bg; @btn-danger-border; @btn-danger-bg; @btn-danger-bg);
|
||||
}
|
||||
|
||||
|
||||
// Outline buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-outline-default {
|
||||
.button-outline-variant(@btn-default-bg);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
.button-outline-variant(@btn-primary-bg);
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
.button-outline-variant(darken(@btn-secondary-bg, 15%));
|
||||
}
|
||||
.btn-outline-info {
|
||||
.button-outline-variant(@btn-info-bg);
|
||||
}
|
||||
.btn-outline-success {
|
||||
.button-outline-variant(@btn-success-bg);
|
||||
}
|
||||
.btn-outline-warning {
|
||||
.button-outline-variant(@btn-warning-bg);
|
||||
}
|
||||
.btn-outline-danger {
|
||||
.button-outline-variant(@btn-danger-bg);
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.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; @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; @border-radius-small);
|
||||
}
|
||||
.btn-xs {
|
||||
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @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%;
|
||||
}
|
||||
}
|
||||
225
modules/system/assets/ui/less/button.groups.less
Normal file
225
modules/system/assets/ui/less/button.groups.less
Normal file
@@ -0,0 +1,225 @@
|
||||
|
||||
//
|
||||
// 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: @zindex-button;
|
||||
}
|
||||
&:focus {
|
||||
// Remove focus outline when dropdown JS adds it after closing the menu
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
margin-left: -5px; // Offset the first child's margin
|
||||
&: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 {
|
||||
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
191
modules/system/assets/ui/less/button.less
Normal file
191
modules/system/assets/ui/less/button.less
Normal file
@@ -0,0 +1,191 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "button.base.less";
|
||||
@import "button.groups.less";
|
||||
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn {
|
||||
font-size: @font-size-base - 1;
|
||||
outline: none !important;
|
||||
.box-shadow(~"inset 0 -2px 0 rgba(0,0,0,.15)");
|
||||
|
||||
&[disabled] {
|
||||
color: rgba(255,255,255,.6);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
.box-shadow(inset 0 1px 0 rgba(0,0,0,.3));
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Buttons with icons
|
||||
//
|
||||
|
||||
.btn {
|
||||
i[class^="icon-"],
|
||||
i[class*=" icon-"] {
|
||||
opacity: .6;
|
||||
|
||||
}
|
||||
|
||||
&.on,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
i[class^="icon-"],
|
||||
i[class*=" icon-"] {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&[class^="wn-icon-"],
|
||||
&[class*=" wn-icon-"],
|
||||
&[class^="oc-icon-"],
|
||||
&[class*=" oc-icon-"] {
|
||||
&:before {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
position: relative;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
&.on,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
.box-shadow(~"inset 0 -2px 0 rgba(0,0,0,.1)");
|
||||
|
||||
&[disabled] {
|
||||
color: rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
.box-shadow(inset 0 1px 0 rgba(0,0,0,.2));
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
.box-shadow(none) !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn {
|
||||
border-right: 1px solid rgba(0,0,0,0.09);
|
||||
margin-left: 0 !important;
|
||||
|
||||
&:last-child, &.last {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.last {
|
||||
.border-right-radius(@border-radius-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown {
|
||||
float: left;
|
||||
|
||||
&:not(:last-child, .last) > .btn {
|
||||
border-right: 1px solid rgba(0,0,0,0.09);
|
||||
.border-right-radius(0) !important;
|
||||
}
|
||||
|
||||
&:not(:first-child) > .btn {
|
||||
.border-left-radius(0) !important;
|
||||
}
|
||||
|
||||
&.last {
|
||||
.btn {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn, .btn-group {
|
||||
&.offset-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
font-size: 21px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
color: @color-icon-btn-default;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: @link-color;
|
||||
}
|
||||
|
||||
&.danger:hover:before {
|
||||
color: @color-btn-danger;
|
||||
}
|
||||
|
||||
&.pull-right:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.margin-left {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 17px;
|
||||
height: 17px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
&.larger {
|
||||
font-size: 21px;
|
||||
height: 21px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: @font-size-base;
|
||||
padding: 8px 0;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
color: @btn-default-bg;
|
||||
|
||||
a {
|
||||
color: @btn-default-bg;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: @link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
modules/system/assets/ui/less/button.mixins.less
Normal file
100
modules/system/assets/ui/less/button.mixins.less
Normal file
@@ -0,0 +1,100 @@
|
||||
// Button variants
|
||||
// -------------------------
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
.button-variant(@color; @background; @border; @background-hover: @background; @border-hover: @border) {
|
||||
color: @color;
|
||||
border: none;
|
||||
background: @background;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open .dropdown-toggle& {
|
||||
color: @color;
|
||||
background: darken(@background-hover, 5%);
|
||||
border-color: @border-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open .dropdown-toggle& {
|
||||
background: darken(@background-hover, 8%);
|
||||
border-color: darken(@border-hover, 12%);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.on {
|
||||
background: darken(@background, 12%);
|
||||
border-color: darken(@border, 16%);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background: @background;
|
||||
border-color: @border;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: @background;
|
||||
background: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.button-outline-variant(@color) {
|
||||
color: darken(@color, 10%);
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border-color: @color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: #fff;
|
||||
background-color: @color;
|
||||
border-color: @color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
color: #fff;
|
||||
background-color: @color;
|
||||
border-color: @color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: #fff;
|
||||
background-color: darken(@color, 17%);
|
||||
border-color: darken(@color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: lighten(@color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button sizes
|
||||
// -------------------------
|
||||
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
|
||||
padding: @padding-vertical (@padding-horizontal * 1.5);
|
||||
font-size: @font-size;
|
||||
line-height: @line-height;
|
||||
.border-radius(@border-radius);
|
||||
}
|
||||
34
modules/system/assets/ui/less/button.variables.less
Normal file
34
modules/system/assets/ui/less/button.variables.less
Normal file
@@ -0,0 +1,34 @@
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #FFFFFF;
|
||||
@btn-default-bg: #656d79;
|
||||
@btn-default-border: #656d79;
|
||||
|
||||
@btn-primary-color: #fff;
|
||||
@btn-primary-bg: @brand-secondary-darker;
|
||||
@btn-primary-border: darken(@btn-primary-bg, 5%);
|
||||
|
||||
@btn-secondary-color: #405261;
|
||||
@btn-secondary-bg: #e1e2e4;
|
||||
@btn-secondary-border: darken(@btn-secondary-bg, 5%);
|
||||
|
||||
@btn-success-color: #fff;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: darken(@btn-success-bg, 5%);
|
||||
|
||||
@btn-info-color: #fff;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: darken(@btn-info-bg, 5%);
|
||||
|
||||
@btn-warning-color: #fff;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: darken(@btn-warning-bg, 5%);
|
||||
|
||||
@btn-danger-color: #fff;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: darken(@btn-danger-bg, 5%);
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
@color-icon-btn-default: #bcc3c7;
|
||||
@color-btn-danger: @brand-danger;
|
||||
183
modules/system/assets/ui/less/callout.less
Normal file
183
modules/system/assets/ui/less/callout.less
Normal file
@@ -0,0 +1,183 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
// Callouts
|
||||
// --------------------------------------------------
|
||||
@callout-padding: 20px;
|
||||
@callout-info-header-bg: #b9dbef;
|
||||
@callout-info-content-bg: #d8eaf4;
|
||||
@callout-info-icon: #597f97;
|
||||
@callout-warning-header-bg: #f6e7b2;
|
||||
@callout-warning-content-bg: #f8f0d5;
|
||||
@callout-warning-icon: #9f8e51;
|
||||
@callout-danger-header-bg: #f6b5b2;
|
||||
@callout-danger-content-bg: #f8d6d5;
|
||||
@callout-danger-icon: #9f5551;
|
||||
@callout-success-header-bg: #d3e9bf;
|
||||
@callout-success-content-bg: #e6f1db;
|
||||
@callout-success-icon: #6d915e;
|
||||
|
||||
//
|
||||
// Callouts
|
||||
// --------------------------------------------------
|
||||
|
||||
.callout {
|
||||
font-size: @font-size-base - 1;
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
&.fade {
|
||||
.opacity(0);
|
||||
.transition(~'all 0.5s, width 0s');
|
||||
.transform(~'scale(0.9)');
|
||||
}
|
||||
|
||||
&.fade.in {
|
||||
.opacity(1);
|
||||
.transform( ~'scale(1)');
|
||||
}
|
||||
|
||||
> .close {
|
||||
margin: 15px 15px 0 0;
|
||||
}
|
||||
|
||||
&.callout-danger {
|
||||
> .header {
|
||||
background: @callout-danger-header-bg;
|
||||
i { color: @callout-danger-icon; }
|
||||
}
|
||||
> .content {
|
||||
background: white;
|
||||
border: 2px solid @callout-danger-content-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-info {
|
||||
> .header {
|
||||
background: @callout-info-header-bg;
|
||||
i { color: @callout-info-icon; }
|
||||
}
|
||||
> .content {
|
||||
background: white;
|
||||
border: 2px solid @callout-info-content-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-success {
|
||||
> .header {
|
||||
background: @callout-success-header-bg;
|
||||
i { color: @callout-success-icon; }
|
||||
}
|
||||
> .content {
|
||||
background: white;
|
||||
border: 2px solid @callout-success-content-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.callout-warning {
|
||||
> .header {
|
||||
background: @callout-warning-header-bg;
|
||||
i { color: @callout-warning-icon; }
|
||||
}
|
||||
> .content {
|
||||
background: white;
|
||||
border: 2px solid @callout-warning-content-bg;
|
||||
}
|
||||
}
|
||||
|
||||
> .header + .content {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
> .header {
|
||||
padding: @callout-padding;
|
||||
padding-bottom: 15px;
|
||||
.border-radius(4px 4px 0 0);
|
||||
color: #2f2d26;
|
||||
|
||||
h3 {
|
||||
letter-spacing: 0;
|
||||
margin: 0 0 7px 0;
|
||||
font-size: @font-size-base - 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h3, p, ul, ol {
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: @padding-standard;
|
||||
}
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.border-radius(4px);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 26px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
color: #2f2d26;
|
||||
padding: 16px 20px 15px;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #2f2d26;
|
||||
text-transform: none;
|
||||
margin: 20px 0 5px 0;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
h1 { font-size: 30px; }
|
||||
h2 { font-size: 26px; }
|
||||
h3 { font-size: 24px; }
|
||||
h4 { font-size: 20px; }
|
||||
h5 { font-size: 18px; }
|
||||
h6 { font-size: 16px; }
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: @padding-standard;
|
||||
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-panel {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-icon {
|
||||
> .header {
|
||||
h3, p, ul, ol {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-subheader {
|
||||
> .header {
|
||||
i {
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group > .callout {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
392
modules/system/assets/ui/less/chart.less
Normal file
392
modules/system/assets/ui/less/chart.less
Normal file
@@ -0,0 +1,392 @@
|
||||
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Chart
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-status-list-text: #7e8c8d;
|
||||
|
||||
@color-chart-tooltip-bg: #000000;
|
||||
@color-chart-tooltip-text: #ffffff;
|
||||
|
||||
@color-scoreboard-title: #666666;
|
||||
@color-scoreboard-description: #999999;
|
||||
@color-scoreboard-body: #666666;
|
||||
@color-scoreboard-icon: #e5a91a;
|
||||
@color-scoreboard-positive: #95b753;
|
||||
@color-scoreboard-negative: #cc3300;
|
||||
|
||||
.control-chart-non-centered() {
|
||||
text-align: left;
|
||||
|
||||
.canvas {
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Chart
|
||||
// --------------------------------------------------
|
||||
|
||||
.control-chart {
|
||||
div.canvas {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
span.center {
|
||||
position: absolute;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
margin-top: -21px;
|
||||
font-size: 30px;
|
||||
font-weight: 100;
|
||||
color: @color-scoreboard-title;
|
||||
z-index: @zindex-chart - 1;
|
||||
}
|
||||
|
||||
svg {
|
||||
z-index: @zindex-chart;
|
||||
}
|
||||
}
|
||||
|
||||
&.full-width div.canvas {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: inline-block;
|
||||
height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
li {
|
||||
width: 120px;
|
||||
white-space: normal;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
color: @color-scoreboard-title;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
float: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.chart-legend {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
|
||||
table {
|
||||
font-size: 12px;
|
||||
color: @color-scoreboard-title;
|
||||
|
||||
tr {
|
||||
td {
|
||||
padding: 0 0 7px 0;
|
||||
vertical-align: top;
|
||||
|
||||
&.value {
|
||||
padding-left: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
.border-radius(@border-radius-base);
|
||||
text-indent: -100000em;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
&.indicator {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child td {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-chart-non-centered();
|
||||
|
||||
&.centered {
|
||||
text-align: center;
|
||||
|
||||
.canvas {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.wrap-legend div.chart-legend table tr {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child td {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-container .wrapped .control-chart {
|
||||
.control-chart-non-centered();
|
||||
}
|
||||
|
||||
#flotTip, #chart-tooltip {
|
||||
white-space: nowrap;
|
||||
padding: 7px 10px;
|
||||
background: @color-chart-tooltip-bg;
|
||||
position: absolute;
|
||||
z-index: @zindex-tooltip;
|
||||
color: @color-chart-tooltip-text;
|
||||
.border-radius(@border-radius-base*2);
|
||||
font-size: 12px;
|
||||
.opacity(0.8);
|
||||
}
|
||||
|
||||
.title-value {
|
||||
h4 {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: @color-scoreboard-title;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
span.goal-meter-indicator {
|
||||
float: left;
|
||||
height: 24px;
|
||||
width: 10px;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 9px;
|
||||
background: @color-scoreboard-negative;
|
||||
|
||||
> span {
|
||||
text-indent: -10000em;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: @color-scoreboard-positive;
|
||||
height: 0;
|
||||
.transition(all 0.2s);
|
||||
}
|
||||
}
|
||||
|
||||
&.goal-meter-inverse {
|
||||
span.goal-meter-indicator {
|
||||
background: @color-scoreboard-positive;
|
||||
> span {
|
||||
background: @color-scoreboard-negative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: @color-scoreboard-body;
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
line-height: 41px;
|
||||
|
||||
&:before {
|
||||
color: @color-scoreboard-icon;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: @color-scoreboard-positive;
|
||||
}
|
||||
&.danger {
|
||||
color: @color-scoreboard-negative;
|
||||
}
|
||||
|
||||
&.negative, &.positive {
|
||||
&:after {
|
||||
font-size: 17px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.negative {
|
||||
color: @color-scoreboard-negative;
|
||||
&:after{.icon(@angle-double-down)};
|
||||
}
|
||||
&.positive {
|
||||
color: @color-scoreboard-positive;
|
||||
&:after{.icon(@angle-double-up)};
|
||||
}
|
||||
|
||||
&.description {
|
||||
color: @color-scoreboard-description;
|
||||
font-weight: 300;
|
||||
line-height: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-container {
|
||||
.title-value {
|
||||
margin-top: -18px;
|
||||
|
||||
p {
|
||||
font-weight: 100;
|
||||
font-size: 40px;
|
||||
|
||||
&.description {
|
||||
font-size: 12px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
font-size: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.negative, &.positive {
|
||||
&:after {
|
||||
top: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.goal-meter-indicator {
|
||||
height: 31px;
|
||||
top: 4px;
|
||||
width: 15px;
|
||||
margin-right: 10px;
|
||||
|
||||
span {
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Status list
|
||||
// --------------------------------------------------
|
||||
|
||||
.control-status-list > ul {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 7px 15px 6px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
font-size: @font-size-base - 1;
|
||||
color: @color-status-list-text;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-status-list-text;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: @link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
margin: 0 5px;
|
||||
|
||||
&.muted { color: @text-muted; }
|
||||
&.primary { .text-emphasis-variant(@brand-primary); }
|
||||
&.success { .text-emphasis-variant(@state-success-text); }
|
||||
&.info { .text-emphasis-variant(@state-info-text); }
|
||||
&.warning { .text-emphasis-variant(@state-warning-text); }
|
||||
&.danger { .text-emphasis-variant(@state-danger-text); }
|
||||
}
|
||||
|
||||
.status-label {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
.border-radius(@border-radius-base);
|
||||
|
||||
&:not(.link) {
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
font-family: @font-family-monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: white;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
.border-radius(100px);
|
||||
|
||||
> i {
|
||||
font-size: 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon,
|
||||
.status-label {
|
||||
background: #aaa;
|
||||
&.success { background: @brand-success; }
|
||||
&.primary { background: @brand-primary; }
|
||||
&.warning { background: @brand-warning; }
|
||||
&.danger { background: @brand-danger; }
|
||||
&.info { background: @brand-info; }
|
||||
&.link { background: transparent; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gecko .control-status-list > ul li span.status.circle {
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.report-container {
|
||||
.control-status-list > ul {
|
||||
margin: -15px;
|
||||
}
|
||||
}
|
||||
53
modules/system/assets/ui/less/checkbox.balloon.less
Normal file
53
modules/system/assets/ui/less/checkbox.balloon.less
Normal file
@@ -0,0 +1,53 @@
|
||||
//
|
||||
// Balloon selector
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-balloon-control-default-text: #ffffff;
|
||||
@color-balloon-control-default-bg: #bcc3c7;
|
||||
@color-balloon-control-hover-bg: @brand-secondary;
|
||||
@color-balloon-control-active-bg: #da5700;
|
||||
|
||||
.control-balloon-selector {
|
||||
ul {
|
||||
padding: 0;
|
||||
|
||||
// Offset the item top margin
|
||||
margin-top: -5px;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding: 6px 7px 5px;
|
||||
margin-right: 5px;
|
||||
margin-top: 6px;
|
||||
text-transform: uppercase;
|
||||
background: @color-balloon-control-default-bg;
|
||||
color: @color-balloon-control-default-text;
|
||||
font-size: 10px;
|
||||
line-height: 100%;
|
||||
.border-radius(@border-radius-base);
|
||||
.transition(all 0.1s ease);
|
||||
|
||||
&.active {
|
||||
background: @color-balloon-control-active-bg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.control-disabled {
|
||||
.opacity(0.5);
|
||||
}
|
||||
|
||||
&:not(.control-disabled) ul {
|
||||
li:hover {
|
||||
background: @color-balloon-control-hover-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.control-balloon-selector ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
330
modules/system/assets/ui/less/checkbox.less
Normal file
330
modules/system/assets/ui/less/checkbox.less
Normal file
@@ -0,0 +1,330 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "checkbox.balloon.less";
|
||||
|
||||
@color-checkbox-checked: @brand-secondary;
|
||||
|
||||
@color-checkbox-icon: #FFFFFF;
|
||||
@color-checkbox-border: @input-border;
|
||||
|
||||
@color-checkbox-switch-bg: #f6f6f6;
|
||||
@color-checkbox-switch-on: @brand-success;
|
||||
@color-checkbox-switch-off: @brand-danger;
|
||||
|
||||
@color-label-green: @color-checkbox-switch-on;
|
||||
@color-label-red: @color-checkbox-switch-off;
|
||||
|
||||
//
|
||||
// Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
.custom-checkbox.nolabel label,
|
||||
.custom-radio.nolabel label {
|
||||
.text-hide();
|
||||
}
|
||||
|
||||
//
|
||||
// Nice Checkboxes & Radios
|
||||
//
|
||||
|
||||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
padding-left: 23px;
|
||||
margin-top: 0;
|
||||
|
||||
// Element needs to be present for browser based validation to work
|
||||
// @see https://github.com/octobercms/october/pull/5520
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
margin-right: 15px;
|
||||
margin-left: -20px;
|
||||
font-size: @label-font-size;
|
||||
.user-select(none);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: @color-checkbox-icon;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
margin-right: 15px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 0;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid @color-checkbox-border;
|
||||
.box-shadow(@input-box-shadow);
|
||||
}
|
||||
&:hover:before {
|
||||
border-color: darken(@color-checkbox-border, 10%);
|
||||
}
|
||||
&:active:before {
|
||||
border-color: darken(@color-checkbox-border, 20%);
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio]:checked + label {
|
||||
&:before {
|
||||
border-color: @color-checkbox-checked;
|
||||
|
||||
line-height: 17px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: @color-checkbox-checked;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
.border-radius(17px);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio][data-radio-color=green]:checked + label {
|
||||
&:before {
|
||||
border-color: @color-label-green;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: @color-label-green;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio][data-radio-color=red]:checked + label {
|
||||
&:before {
|
||||
border-color: @color-label-red;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: @color-label-red;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:indeterminate + label:before,
|
||||
input[type=checkbox]:checked + label:before {
|
||||
border-color: @color-checkbox-checked;
|
||||
background-color: @color-checkbox-checked;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
border-width: 2px;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label:before {
|
||||
.icon(@check);
|
||||
}
|
||||
|
||||
input[type=checkbox]:indeterminate + label:before {
|
||||
.icon(@minus);
|
||||
}
|
||||
|
||||
input:disabled + label:before {
|
||||
background-color: #999 !important;
|
||||
border: 1px solid @color-checkbox-border !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
label:before {
|
||||
border-color: @color-focus;
|
||||
}
|
||||
}
|
||||
|
||||
p.help-block {
|
||||
padding-left: 6px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-radio label:before {
|
||||
.border-radius(18px);
|
||||
}
|
||||
|
||||
.custom-checkbox label:before {
|
||||
.border-radius(3px);
|
||||
}
|
||||
|
||||
.inline-options {
|
||||
.field-checkboxlist-scrollable {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.field-checkboxlist-inner {
|
||||
padding: 10px 20px 20px 20px !important;
|
||||
|
||||
.custom-checkbox {
|
||||
display: inline-block;
|
||||
margin: 0 5px 10px 0;
|
||||
|
||||
label {
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 10px;
|
||||
|
||||
&:before {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-field {
|
||||
> label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.custom-radio {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// ON / OFF Switcher
|
||||
//
|
||||
|
||||
.switch-field {
|
||||
.disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
display: inline-block;
|
||||
|
||||
* {
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.field-switch {
|
||||
padding-left: 85px;
|
||||
float: left;
|
||||
|
||||
> label {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
display: block;
|
||||
width: 65px;
|
||||
height: 26px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
.border-radius(3px);
|
||||
|
||||
* { .box-sizing(border-box); }
|
||||
&.disabled { .opacity(.5); }
|
||||
.slide-button {
|
||||
z-index: @zindex-checkbox - 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 42px;
|
||||
top: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: @color-checkbox-switch-bg;
|
||||
.border-radius(20px);
|
||||
.transition(all 0.1s);
|
||||
}
|
||||
|
||||
label,
|
||||
> span {
|
||||
line-height: 23px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label {
|
||||
z-index: @zindex-checkbox - 2;
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input {
|
||||
z-index: @zindex-checkbox;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.opacity(0);
|
||||
&:checked {
|
||||
~ .slide-button {
|
||||
right: 4px;
|
||||
}
|
||||
~ span { background-color: @color-checkbox-switch-on; }
|
||||
~ span span {
|
||||
&:first-of-type {
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
&:last-of-type {
|
||||
color: #666666;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
~ span { background-color: #666666 !important; }
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: @color-checkbox-switch-off;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
.user-select(none);
|
||||
.border-radius(20px);
|
||||
|
||||
span {
|
||||
z-index: @zindex-checkbox;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: -1px;
|
||||
.box-sizing(border-box);
|
||||
&:last-child {
|
||||
left: 28px;
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
&:first-of-type {
|
||||
padding-left: 13px;
|
||||
display: none;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
168
modules/system/assets/ui/less/datepicker.date.less
Normal file
168
modules/system/assets/ui/less/datepicker.date.less
Normal file
@@ -0,0 +1,168 @@
|
||||
//
|
||||
// Date Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.pika-single {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 240px;
|
||||
padding: 8px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
&.is-bound {
|
||||
position: absolute;
|
||||
box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
|
||||
.pika-title, .pika-footer {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pika-footer {
|
||||
margin: 5px auto 0;
|
||||
}
|
||||
|
||||
.pika-label {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
position: relative;
|
||||
z-index: @zindex-datepicker;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 5px 3px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pika-footer, .pika-title {
|
||||
select {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: @zindex-datepicker - 1;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pika-prev,
|
||||
.pika-next {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
outline: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 30px;
|
||||
background-color: transparent;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 75% 75%;
|
||||
white-space: nowrap;
|
||||
text-indent: 100%;
|
||||
overflow: hidden;
|
||||
opacity: .5;
|
||||
*position: absolute;
|
||||
*top: 0;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pika-prev,
|
||||
.is-rtl .pika-next {
|
||||
float: left;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
|
||||
*left: 0;
|
||||
}
|
||||
|
||||
.pika-next,
|
||||
.is-rtl .pika-prev {
|
||||
float: right;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
|
||||
*right: 0;
|
||||
}
|
||||
|
||||
.pika-prev.is-disabled,
|
||||
.pika-next.is-disabled {
|
||||
cursor: default;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.pika-select {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
.pika-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border: 0;
|
||||
|
||||
th, td {
|
||||
width: 14.285714285714286%;
|
||||
}
|
||||
|
||||
th {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pika-button {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
outline: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
text-align: right;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.is-today .pika-button {
|
||||
color: #33aaff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.is-selected .pika-button {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
background: #33aaff;
|
||||
box-shadow: inset 0 1px 3px #178fe5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.is-disabled .pika-button {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: #999;
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.pika-button:hover {
|
||||
color: #fff !important;
|
||||
background: #ff8000 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
117
modules/system/assets/ui/less/datepicker.less
Normal file
117
modules/system/assets/ui/less/datepicker.less
Normal file
@@ -0,0 +1,117 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Date Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "datepicker.date.less";
|
||||
@import "datepicker.time.less";
|
||||
|
||||
.field-datepicker {
|
||||
|
||||
}
|
||||
|
||||
.pika-single {
|
||||
border-radius: @border-radius-base;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
z-index: @zindex-datepicker;
|
||||
font-family: @font-family-sans-serif;
|
||||
width: 310px;
|
||||
|
||||
&.is-bound {
|
||||
.box-shadow(@overlay-box-shadow);
|
||||
}
|
||||
|
||||
abbr {
|
||||
border-bottom: none;
|
||||
}
|
||||
.pika-button {
|
||||
border-radius: 999px !important;
|
||||
text-align: center;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
margin: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
.is-today .pika-button {
|
||||
background: #ddd;
|
||||
font-weight: bold;
|
||||
color: @color-datepicker-today-text;
|
||||
}
|
||||
|
||||
.is-selected .pika-button {
|
||||
box-shadow: none;
|
||||
background: @color-datepicker-selected-bg;
|
||||
}
|
||||
|
||||
.pika-button:hover {
|
||||
color: @color-datepicker-hover-text !important;
|
||||
background: @color-datepicker-hover-bg !important;
|
||||
}
|
||||
|
||||
.pika-label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.pika-table th {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
font-size: @font-size-base - 3;
|
||||
}
|
||||
|
||||
.pika-footer {
|
||||
.pika-label {
|
||||
font-size: @font-size-base - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-popover {
|
||||
z-index: @zindex-datepicker;
|
||||
.box-shadow(@overlay-box-shadow);
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
.popover-title {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.top {
|
||||
margin-top: -5px;
|
||||
}
|
||||
&.right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
&.bottom {
|
||||
margin-top: 5px;
|
||||
}
|
||||
&.left {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
> .arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-plate {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.clockpicker-hours .clockpicker-tick {
|
||||
font-size: 12px;
|
||||
|
||||
&.tick-inner {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.clockpicker-minutes .clockpicker-tick {
|
||||
font-size: 16px;
|
||||
}
|
||||
299
modules/system/assets/ui/less/datepicker.time.less
Normal file
299
modules/system/assets/ui/less/datepicker.time.less
Normal file
@@ -0,0 +1,299 @@
|
||||
//
|
||||
// Time Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
//
|
||||
// Special Popover
|
||||
//
|
||||
|
||||
.clockpicker-popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
max-width: 276px;
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
|
||||
&.top {
|
||||
margin-top: -10px;
|
||||
}
|
||||
&.right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&.bottom {
|
||||
margin-top: 10px;
|
||||
}
|
||||
&.left {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
padding: 8px 14px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.popover-content {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
/*
|
||||
> .arrow,
|
||||
> .arrow:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
// The following are set in WordPress (wp-admin/css/revisions.css) - reset them to initial values
|
||||
overflow:visible;
|
||||
margin:0;
|
||||
padding:0;
|
||||
z-index:auto;
|
||||
background-color:transparent;
|
||||
-webkit-box-shadow:none;
|
||||
box-shadow:none;
|
||||
bottom:auto;
|
||||
left:auto;
|
||||
right:auto;
|
||||
top:auto;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
}
|
||||
> .arrow {
|
||||
border-width: 11px;
|
||||
}
|
||||
> .arrow:after {
|
||||
content: "";
|
||||
border-width: 10px;
|
||||
}
|
||||
&.top > .arrow {
|
||||
bottom: -11px;
|
||||
left: 50%;
|
||||
margin-left: -11px;
|
||||
border-top-color: #999;
|
||||
border-top-color: rgba(0, 0, 0, .25);
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&.top > .arrow:after {
|
||||
bottom: 1px;
|
||||
margin-left: -10px;
|
||||
content: " ";
|
||||
border-top-color: #fff;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&.right > .arrow {
|
||||
top: 50%;
|
||||
left: -11px;
|
||||
margin-top: -11px;
|
||||
border-right-color: #999;
|
||||
border-right-color: rgba(0, 0, 0, .25);
|
||||
border-left-width: 0;
|
||||
}
|
||||
&.right > .arrow:after {
|
||||
bottom: -10px;
|
||||
left: 1px;
|
||||
content: " ";
|
||||
border-right-color: #fff;
|
||||
border-left-width: 0;
|
||||
}
|
||||
&.bottom > .arrow {
|
||||
top: -11px;
|
||||
left: 50%;
|
||||
margin-left: -11px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #999;
|
||||
border-bottom-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
&.bottom > .arrow:after {
|
||||
top: 1px;
|
||||
margin-left: -10px;
|
||||
content: " ";
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
&.left > .arrow {
|
||||
top: 50%;
|
||||
right: -11px;
|
||||
margin-top: -11px;
|
||||
border-right-width: 0;
|
||||
border-left-color: #999;
|
||||
border-left-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
&.left > .arrow:after {
|
||||
right: 1px;
|
||||
bottom: -10px;
|
||||
content: " ";
|
||||
border-right-width: 0;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
//
|
||||
// Clock Picker
|
||||
//
|
||||
|
||||
.clockpicker .input-group-addon {
|
||||
cursor: pointer;
|
||||
}
|
||||
.clockpicker-moving {
|
||||
cursor: move;
|
||||
}
|
||||
.clockpicker-align-left.popover > .arrow {
|
||||
left: 25px;
|
||||
}
|
||||
.clockpicker-align-top.popover > .arrow {
|
||||
top: 17px;
|
||||
}
|
||||
.clockpicker-align-right.popover > .arrow {
|
||||
left: auto;
|
||||
right: 25px;
|
||||
}
|
||||
.clockpicker-align-bottom.popover > .arrow {
|
||||
top: auto;
|
||||
bottom: 6px;
|
||||
}
|
||||
|
||||
.clockpicker-popover {
|
||||
.popover-title {
|
||||
background-color: #fff;
|
||||
color: #999;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.popover-content {
|
||||
background-color: #f8f8f8;
|
||||
padding: 12px;
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-plate {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
// Disable text selection highlighting. Thanks to Hermanya
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.clockpicker-canvas,
|
||||
.clockpicker-dial {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
}
|
||||
.clockpicker-minutes {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.clockpicker-tick {
|
||||
border-radius: 50%;
|
||||
color: #666;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: rgb(192, 229, 247);
|
||||
background-color: rgba(0, 149, 221, .25);
|
||||
}
|
||||
}
|
||||
|
||||
// .clockpicker-button {
|
||||
// background-image: none;
|
||||
// background-color: #fff;
|
||||
// border-width: 1px 0 0;
|
||||
// border-top-left-radius: 0;
|
||||
// border-top-right-radius: 0;
|
||||
// margin: 0;
|
||||
// padding: 10px 0;
|
||||
// text-align: center;
|
||||
// }
|
||||
// .clockpicker-button:hover {
|
||||
// background-image: none;
|
||||
// background-color: #ebebeb;
|
||||
// }
|
||||
// .clockpicker-button:focus {
|
||||
// outline: none!important;
|
||||
// }
|
||||
|
||||
.clockpicker-dial {
|
||||
.transition(~"transform 350ms, opacity 350ms");
|
||||
}
|
||||
.clockpicker-dial-out {
|
||||
opacity: 0;
|
||||
}
|
||||
.clockpicker-hours.clockpicker-dial-out {
|
||||
.transform(scale(1.2, 1.2));
|
||||
}
|
||||
.clockpicker-minutes.clockpicker-dial-out {
|
||||
.transform(scale(.8, .8));
|
||||
}
|
||||
.clockpicker-canvas {
|
||||
.transition(opacity 175ms);
|
||||
}
|
||||
.clockpicker-canvas-out {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.clockpicker-canvas-bearing,
|
||||
.clockpicker-canvas-fg {
|
||||
stroke: none;
|
||||
fill: rgb(0, 149, 221);
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
stroke: none;
|
||||
fill: rgb(192, 229, 247);
|
||||
}
|
||||
.clockpicker-canvas-bg-trans {
|
||||
fill: rgba(0, 149, 221, .25);
|
||||
}
|
||||
.clockpicker-canvas line {
|
||||
stroke: rgb(0, 149, 221);
|
||||
stroke-width: 1;
|
||||
stroke-linecap: round;
|
||||
// shape-rendering: crispEdges;
|
||||
}
|
||||
.clockpicker-button.am-button {
|
||||
margin: 1px;
|
||||
padding: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, .2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.clockpicker-button.pm-button {
|
||||
margin: 1px 1px 1px 136px;
|
||||
padding: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, .2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
8
modules/system/assets/ui/less/datepicker.variables.less
Normal file
8
modules/system/assets/ui/less/datepicker.variables.less
Normal file
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// Date Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-datepicker-today-text: @brand-primary;
|
||||
@color-datepicker-selected-bg: @brand-accent;
|
||||
@color-datepicker-hover-bg: #f5f5f5;
|
||||
@color-datepicker-hover-text: @brand-primary-darker;
|
||||
189
modules/system/assets/ui/less/dropdown.base.less
Normal file
189
modules/system/assets/ui/less/dropdown.base.less
Normal file
@@ -0,0 +1,189 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
// The dropdown wrapper (div)
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 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,.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 {
|
||||
height: 1px;
|
||||
margin: ((@line-height-computed / 2) - 1) 0;
|
||||
overflow: hidden;
|
||||
background-color: @dropdown-divider-bg;
|
||||
}
|
||||
|
||||
// Links within the dropdown menu
|
||||
> li > a {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// Hover/Focus state
|
||||
.dropdown-menu > li > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: @dropdown-link-hover-color;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
// Nuke hover/focus effects
|
||||
.dropdown-menu > .disabled > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
background-image: none; // Remove CSS gradient
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
|
||||
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.
|
||||
//
|
||||
.dropdown-menu-left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
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.
|
||||
|
||||
.dropup {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
305
modules/system/assets/ui/less/dropdown.less
Normal file
305
modules/system/assets/ui/less/dropdown.less
Normal file
@@ -0,0 +1,305 @@
|
||||
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Dropdown
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "dropdown.base.less";
|
||||
|
||||
//
|
||||
// Dropdown
|
||||
// --------------------------------------------------
|
||||
|
||||
.dropdown-menu {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
.box-shadow(none);
|
||||
|
||||
&.offset-left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
> ul {
|
||||
background-color: @dropdown-bg;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
margin-top: 7px;
|
||||
.box-shadow(@overlay-box-shadow);
|
||||
.border-radius(@border-radius-base);
|
||||
|
||||
&:after {
|
||||
.triangle(up, 15px, 8px, @dropdown-bg);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: -8px;
|
||||
z-index: @zindex-dropdown + 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.triangle(up, 17px, 9px, @dropdown-border);
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: -9px;
|
||||
z-index: @zindex-dropdown;
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
outline: none;
|
||||
padding: 10px 15px;
|
||||
font-size: @font-size-base - 1;
|
||||
display: block;
|
||||
color: @dropdown-link-color;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @color-dropdown-hover-text;
|
||||
background-color: @color-dropdown-hover-bg;
|
||||
|
||||
&[class^="wn-icon-"],
|
||||
&[class*=" wn-icon-"],
|
||||
&[class^="oc-icon-"],
|
||||
&[class*=" oc-icon-"] {
|
||||
&:before {
|
||||
color: @color-dropdown-hover-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @color-dropdown-active-text;
|
||||
background-color: @color-dropdown-active-bg;
|
||||
|
||||
&[class^="wn-icon-"],
|
||||
&[class*=" wn-icon-"],
|
||||
&[class^="oc-icon-"],
|
||||
&[class*=" oc-icon-"] {
|
||||
&:before {
|
||||
color: @color-dropdown-active-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[class^="wn-icon-"],
|
||||
&[class*=" wn-icon-"],
|
||||
&[class^="oc-icon-"],
|
||||
&[class*=" oc-icon-"] {
|
||||
padding-left: 30px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
left: 9px;
|
||||
top: 8px;
|
||||
color: fade(@dropdown-link-color, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.first-item {
|
||||
a {
|
||||
&:hover, &:focus, &:active {
|
||||
&:after {
|
||||
.triangle(up, 15px, 8px, @color-dropdown-hover-bg);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: -8px;
|
||||
z-index: @zindex-dropdown + 2;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
&:after {
|
||||
.triangle(up, 15px, 8px, @color-dropdown-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-title { display: none; }
|
||||
&.divider { margin: 0; }
|
||||
|
||||
&.active > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
.dropdown-container > ul {
|
||||
&:after {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
}
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 14px;
|
||||
}
|
||||
li.first-item a {
|
||||
&:hover, &:focus {
|
||||
&:after {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Drop up
|
||||
//
|
||||
|
||||
.dropdown.dropup .dropdown-menu {
|
||||
.dropdown-container {
|
||||
> ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 7px;
|
||||
|
||||
&:after {
|
||||
.triangle(down, 15px, 8px, @dropdown-bg);
|
||||
top: auto;
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.triangle(down, 17px, 9px, @dropdown-border);
|
||||
top: auto;
|
||||
bottom: -9px;
|
||||
}
|
||||
|
||||
li.first-item {
|
||||
a {
|
||||
&:after { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
li.last-item {
|
||||
a {
|
||||
&:hover, &:focus, &:active {
|
||||
&:after {
|
||||
.triangle(down, 15px, 8px, @color-dropdown-hover-bg);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
bottom: -8px;
|
||||
z-index: @zindex-dropdown + 2;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
&:after {
|
||||
.triangle(down, 15px, 8px, @color-dropdown-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.touch .dropdown-menu .dropdown-container > ul li {
|
||||
a:hover {
|
||||
color: @dropdown-link-color;
|
||||
background: white;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
left: 9px;
|
||||
top: 7px;
|
||||
color: @dropdown-border;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-item {
|
||||
a:hover {
|
||||
&:after {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.dropdown-open {
|
||||
.dropdown-overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// background: rgba(0,0,0,0.1);
|
||||
z-index: @zindex-dropdown - 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
body.dropdown-open {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.dropdown-overlay {
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
position: fixed!important;
|
||||
margin: 0!important;
|
||||
top: 0!important;
|
||||
right: 0!important;
|
||||
bottom: 0!important;
|
||||
left: 0!important;
|
||||
z-index: @zindex-dropdown;
|
||||
|
||||
.dropdown-container {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
|
||||
ul {
|
||||
min-height: 100%;
|
||||
margin-top: 0;
|
||||
&:before, &:after {display: none;}
|
||||
|
||||
li.dropdown-title {
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
border-bottom: 1px solid @color-dropdown-title-border;
|
||||
color: @color-dropdown-title-text;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
|
||||
&:after {
|
||||
.icon(@times);
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 13px;
|
||||
.opacity(0.3);
|
||||
}
|
||||
}
|
||||
|
||||
li.first-item {
|
||||
a:hover, :focus {
|
||||
&:after {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
modules/system/assets/ui/less/dropdown.variables.less
Normal file
22
modules/system/assets/ui/less/dropdown.variables.less
Normal file
@@ -0,0 +1,22 @@
|
||||
@dropdown-bg: #fff;
|
||||
@dropdown-border: @overlay-background;
|
||||
@dropdown-fallback-border: #ccc;
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
@dropdown-link-color: #39454a;
|
||||
@dropdown-link-hover-color: darken(@gray-dark, 5%);
|
||||
@dropdown-link-hover-bg: #f5f5f5;
|
||||
|
||||
@dropdown-link-active-color: @component-active-color;
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
@dropdown-link-disabled-color: @gray-light;
|
||||
|
||||
@dropdown-header-color: @gray-light;
|
||||
|
||||
@color-dropdown-title-border: #c9c9c9;
|
||||
@color-dropdown-title-text: @dropdown-link-color;
|
||||
@color-dropdown-hover-bg: @highlight-hover-bg;
|
||||
@color-dropdown-hover-text: @highlight-hover-text;
|
||||
@color-dropdown-active-bg: @highlight-active-bg;
|
||||
@color-dropdown-active-text: @highlight-active-text;
|
||||
395
modules/system/assets/ui/less/filter.less
Normal file
395
modules/system/assets/ui/less/filter.less
Normal file
@@ -0,0 +1,395 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "popover.less";
|
||||
@import "loader.less";
|
||||
|
||||
//
|
||||
// Filters
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-filter-bg: #ECF0F1;
|
||||
@color-filter-bg-active: #6AAB55;
|
||||
@color-filter-border: #D7DBDD;
|
||||
@color-filter-text: rgba(0,0,0,.6);
|
||||
@color-filter-text-active: #000000;
|
||||
@color-filter-items-bg: #fafafa;
|
||||
@color-filter-items-bg-hover: @brand-secondary;
|
||||
|
||||
//
|
||||
// Filters
|
||||
// --------------------------------------------------
|
||||
|
||||
.control-filter {
|
||||
padding: 0 (@padding-standard / 2);
|
||||
color: @color-filter-text;
|
||||
background-color: @color-filter-bg;
|
||||
border-top: 1px solid @color-filter-border;
|
||||
border-bottom: 1px solid @color-filter-border;
|
||||
|
||||
font-size: @font-size-base - 1;
|
||||
|
||||
.custom-checkbox label {
|
||||
font-size: @font-size-base - 1;
|
||||
color: @color-filter-text;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @color-filter-text;
|
||||
}
|
||||
|
||||
> .filter-scope {
|
||||
display: inline-block;
|
||||
padding: (@padding-standard / 2);
|
||||
|
||||
.filter-label {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.filter-setting {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
.transition(color 0.6s);
|
||||
}
|
||||
|
||||
&.loading-indicator-container.in-progress {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
|
||||
.loading-indicator {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
left: unset;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
background-color: @color-filter-bg;
|
||||
border-radius: 50%;
|
||||
margin-top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 15px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 14px;
|
||||
.icon(@angle-down);
|
||||
}
|
||||
|
||||
&.active {
|
||||
.filter-setting {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: #FFF;
|
||||
background-color: @color-filter-bg-active;
|
||||
.border-radius(4px);
|
||||
.transition(~'color 1s, background-color 1s');
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox {
|
||||
padding-left: 35px;
|
||||
&, label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
padding: 0 10px;
|
||||
|
||||
&, label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: inline;
|
||||
width: auto;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
top: -2px;
|
||||
right: 7px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-group {
|
||||
display: inline-flex;
|
||||
border: 2px solid @brand-primary;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 5px 0;
|
||||
vertical-align: baseline;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-right: 2px solid @brand-primary;
|
||||
border-radius: 0;
|
||||
background: @color-filter-bg;
|
||||
color: @color-filter-text;
|
||||
font-size: @font-size-base - 1;
|
||||
font-weight: 600;
|
||||
padding: 3px 10px;
|
||||
line-height: 1.5;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover:not(.btn-primary) {
|
||||
background: lighten(@brand-primary, 5%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown {
|
||||
padding: 0 0 0 10px;
|
||||
vertical-align: middle;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.select2-container--default {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
.select2-selection__clear {
|
||||
float: none;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.select2-selection--single {
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
box-sizing: content-box;
|
||||
|
||||
.select2-selection__placeholder {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&, &.custom-checkbox label {
|
||||
color: @color-filter-text-active;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
color: @color-filter-text-active;
|
||||
}
|
||||
|
||||
&.active .filter-setting {
|
||||
background-color: darken(@color-filter-bg-active, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .filter-has-popover {
|
||||
display: inline-block;
|
||||
padding: (@padding-standard / 2);
|
||||
.filter-label {}
|
||||
.filter-setting {
|
||||
display: inline-block;
|
||||
.transition(color 0.6s);
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 14px;
|
||||
.icon(@angle-down);
|
||||
}
|
||||
|
||||
&.active {
|
||||
.filter-setting {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: #FFF;
|
||||
background-color: @color-filter-bg-active;
|
||||
.border-radius(4px);
|
||||
.transition(~'color 1s, background-color 1s');
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
.filter-label { color: @color-filter-text; }
|
||||
&.active .filter-setting { background-color: darken(@color-filter-bg-active, 5%); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-filter-popover {
|
||||
min-width: 275px;
|
||||
|
||||
.filter-search {
|
||||
min-height: 36px;
|
||||
input {
|
||||
min-height: 36px;
|
||||
border: none;
|
||||
border-bottom: 1px solid @color-filter-border;
|
||||
.border-bottom-radius(0);
|
||||
.box-shadow(none);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.form-control.icon.search {
|
||||
background-position: right -81px;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-items, .filter-active-items {
|
||||
color: @color-filter-text;
|
||||
font-size: @font-size-base - 1;
|
||||
ul, li {
|
||||
list-style-type: none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
li {
|
||||
.transition(~'color 0.6s, background-color 0.3s');
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @color-filter-text;
|
||||
display: block;
|
||||
padding: 7px 15px;
|
||||
|
||||
&:before {
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @color-filter-items-bg-hover;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-items {
|
||||
max-height: 135px;
|
||||
overflow: auto;
|
||||
|
||||
background-color: @color-filter-items-bg;
|
||||
border-bottom: 1px solid @color-filter-border;
|
||||
a:before { .icon(@plus); }
|
||||
|
||||
li.loading {
|
||||
padding: 7px;
|
||||
> span {
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-image: url('@{loader-image-path}/loader-transparent.svg');
|
||||
background-size: 20px 20px;
|
||||
background-position: 50% 50%;
|
||||
.animation(spin 1s linear infinite);
|
||||
}
|
||||
}
|
||||
|
||||
li.animate-enter { .animation(fadeInUp .5s); }
|
||||
}
|
||||
|
||||
.filter-active-items {
|
||||
a:before { .icon(@times); }
|
||||
li.animate-enter { .animation(fadeInDown .5s); }
|
||||
}
|
||||
|
||||
&.control-filter-box-popover {
|
||||
min-width: 190px;
|
||||
|
||||
.filter-buttons {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.--range {
|
||||
.filter-buttons .btn {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
.control-filter-popover {
|
||||
.filter-items {
|
||||
max-height: 200px;
|
||||
}
|
||||
.filter-search {
|
||||
input {
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
.form-control.icon.search {
|
||||
background-position: 0 -81px;
|
||||
}
|
||||
.close {
|
||||
width: 30px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 28px;
|
||||
z-index: @zindex-filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
49
modules/system/assets/ui/less/flag.less
Normal file
49
modules/system/assets/ui/less/flag.less
Normal file
@@ -0,0 +1,49 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
@import "../vendor/flag-icon/less/variables";
|
||||
|
||||
//
|
||||
// Overriding path variable
|
||||
// --------------------------------------------------
|
||||
|
||||
@flag-icon-css-path: 'vendor/flag-icon/flags';
|
||||
|
||||
//
|
||||
// Flag
|
||||
// --------------------------------------------------
|
||||
|
||||
[class^="flag-"],
|
||||
[class*=" flag-"] {
|
||||
background-size: contain;
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: unit((4 / 3), em);
|
||||
line-height: 1em;
|
||||
&:before {
|
||||
content: "\00a0";
|
||||
}
|
||||
&.oc-flag-squared,
|
||||
&.wn-flag-squared {
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.flag-icon(@country) {
|
||||
.flag-@{country} {
|
||||
background-image: ~"url(@{flag-icon-css-path}@{flag-icon-rect-path}/@{country}.svg)";
|
||||
&.wn-flag-squared,
|
||||
&.oc-flag-squared {
|
||||
background-image: ~"url(@{flag-icon-css-path}@{flag-icon-square-path}/@{country}.svg)";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Generate all flags
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "../vendor/flag-icon/less/flag-icon-list";
|
||||
@import "../vendor/flag-icon/less/flag-icon-more";
|
||||
84
modules/system/assets/ui/less/flashmessage.less
Normal file
84
modules/system/assets/ui/less/flashmessage.less
Normal file
@@ -0,0 +1,84 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "icon.close.less";
|
||||
|
||||
//
|
||||
// Flash Messages
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-flash-success-bg: #8da85e;
|
||||
@color-flash-error-bg: #cc3300;
|
||||
@color-flash-warning-bg: @brand-warning;
|
||||
@color-flash-info-bg: #5fb6f5;
|
||||
@color-flash-text: #ffffff;
|
||||
|
||||
#layout-canvas {
|
||||
.flash-message{ display: none; }
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
position: fixed;
|
||||
width: 500px;
|
||||
left: 50%;
|
||||
top: 50px;
|
||||
margin-left: -250px;
|
||||
color: @color-flash-text;
|
||||
font-size: 14px;
|
||||
padding: 10px 30px 10px 15px;
|
||||
z-index: @zindex-flashmessage;
|
||||
word-wrap: break-word;
|
||||
text-align: center;
|
||||
.box-shadow(@overlay-box-shadow);
|
||||
.border-radius(@border-radius-base);
|
||||
|
||||
&.fade {
|
||||
.opacity(0);
|
||||
.transition(~'all 0.5s, width 0s');
|
||||
.transform(~'scale(0.9)');
|
||||
}
|
||||
|
||||
&.fade.in {
|
||||
.opacity(1);
|
||||
.transform( ~'scale(1)');
|
||||
}
|
||||
|
||||
&.success { background: @color-flash-success-bg; }
|
||||
&.error { background: @color-flash-error-bg; }
|
||||
&.warning { background: @color-flash-warning-bg; }
|
||||
&.info { background: @color-flash-info-bg; }
|
||||
|
||||
button {
|
||||
float: none;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
color: white;
|
||||
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
color: white
|
||||
}
|
||||
}
|
||||
|
||||
&.static {
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
display: block !important;
|
||||
margin-left: 0 !important;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
.flash-message {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
margin-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
445
modules/system/assets/ui/less/form.base.less
Normal file
445
modules/system/assets/ui/less/form.base.less
Normal file
@@ -0,0 +1,445 @@
|
||||
//
|
||||
// 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: normal;
|
||||
font-size: @label-font-size;
|
||||
color: @color-label;
|
||||
}
|
||||
|
||||
// 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; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: (@padding-base-vertical) @padding-base-horizontal (@padding-base-vertical + 1);
|
||||
font-size: @input-font-size;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
.border-radius(@input-border-radius);
|
||||
.transition(@input-transition);
|
||||
|
||||
// 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 !important;
|
||||
color: @input-color-disabled;
|
||||
opacity: 1; // iOS fix for unreadable disabled content
|
||||
}
|
||||
|
||||
// Reset height for `textarea`s
|
||||
textarea& {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
// 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: 15px;
|
||||
padding-left: 20px;
|
||||
label {
|
||||
display: inline;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
// Ensure icons don't overlap text
|
||||
.form-control {
|
||||
padding-right: (@input-height-base * 1.25);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// Feedback states
|
||||
.has-success {
|
||||
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
|
||||
}
|
||||
.has-warning {
|
||||
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
|
||||
}
|
||||
.has-error {
|
||||
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
|
||||
}
|
||||
|
||||
|
||||
// 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: @color-help-block-text;
|
||||
}
|
||||
|
||||
label + .help-block,
|
||||
label + .help-block.before-field {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
162
modules/system/assets/ui/less/form.groups.less
Normal file
162
modules/system/assets/ui/less/form.groups.less
Normal file
@@ -0,0 +1,162 @@
|
||||
//
|
||||
// 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: @zindex-form;
|
||||
|
||||
// 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: @zindex-form;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
554
modules/system/assets/ui/less/form.less
Normal file
554
modules/system/assets/ui/less/form.less
Normal file
@@ -0,0 +1,554 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "form.base.less";
|
||||
@import "form.groups.less";
|
||||
|
||||
// Load order
|
||||
@import "select.less";
|
||||
@import "checkbox.less";
|
||||
|
||||
//
|
||||
// Form containers
|
||||
//
|
||||
|
||||
.form-preview {
|
||||
padding: @padding-standard;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
|
||||
>.form-group:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
.radio, .checkbox {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Form to sit flush to the element above
|
||||
&.form-flush {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
// Style primary tabs
|
||||
.control-tabs.primary-tabs {
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
> li a > span.title {
|
||||
&:before, &:after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
> li.active a {
|
||||
&:before {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Nice forms
|
||||
//
|
||||
|
||||
.form-elements, .form-tabless-fields {
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
.form-control {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid @input-border;
|
||||
.box-shadow(@input-box-shadow);
|
||||
|
||||
&:focus {
|
||||
border: 1px solid @color-form-field-border-focus;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: right -2px;
|
||||
padding-right: 30px !important;
|
||||
background-image: url('@{image-path}/bitmap-icons.png');
|
||||
|
||||
&.plus { background-position: right -124px; }
|
||||
&.search { background-position: right -84px; }
|
||||
&.user { background-position: right -41px; }
|
||||
&.lock { background-position: right 0; }
|
||||
}
|
||||
|
||||
&.growable {
|
||||
width: 110px;
|
||||
//.transition(width 0.2s);
|
||||
&:focus, &:active {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
width: 40px;
|
||||
text-indent: -999px;
|
||||
|
||||
&:focus, &:active {
|
||||
text-indent: 0;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&, &.layout-item {
|
||||
padding-bottom: @padding-standard;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.box-sizing(border-box);
|
||||
|
||||
&.is-required {
|
||||
> label:not(.custom-switch):after,
|
||||
> .custom-checkbox > label:after,
|
||||
> .field-switch > label:after {
|
||||
background-color: @color-form-required-asterisk;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin-left: 3px;
|
||||
vertical-align: super;
|
||||
font-size: 60%;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
.border-radius(8px);
|
||||
}
|
||||
}
|
||||
|
||||
&.span-full {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.span-left {
|
||||
float: left;
|
||||
width: 48.5%;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&.span-right {
|
||||
float: right;
|
||||
width: 48.5%;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
&.clear-full {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&.clear-left {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&.clear-right {
|
||||
clear: right;
|
||||
}
|
||||
|
||||
&.layout-relative {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.checkbox-field {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
&.number-field {
|
||||
> .form-control { text-align: right; }
|
||||
}
|
||||
|
||||
&.radio-align {
|
||||
padding-left: 28px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
&.checkbox-align {
|
||||
padding-left: 28px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&.field-align-above {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&.field-slim {
|
||||
&.span-left, &.span-right {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.field-indent {
|
||||
padding-left: 23px;
|
||||
}
|
||||
|
||||
&.input-sidebar-control {
|
||||
padding-right: 35px;
|
||||
|
||||
.sidebar-control {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 34px;
|
||||
font-size: 16px;
|
||||
color: @color-input-sidebar-control;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
color: @link-color;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-preview {
|
||||
|
||||
.form-control {
|
||||
background-color: @color-form-field-preview-bg;
|
||||
color: @color-form-field-preview-text;
|
||||
height: auto;
|
||||
min-height: 38px;
|
||||
border-color: #eee;
|
||||
word-break: break-word;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
label { cursor: default; }
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
font-size: @font-size-base - 1;
|
||||
margin-bottom: 0;
|
||||
&.before-field {
|
||||
margin-top: 0;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
|
||||
> .icon {
|
||||
position: absolute;
|
||||
z-index: @zindex-form;
|
||||
padding: 13px;
|
||||
pointer-events: none;
|
||||
color: @color-form-field-icon;
|
||||
font-size: 15px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&.right-align {
|
||||
> .icon { right: 0; }
|
||||
input { padding-right: 32px !important; }
|
||||
}
|
||||
|
||||
&.left-align {
|
||||
> .icon { left: 0; }
|
||||
input { padding-left: 32px !important; }
|
||||
}
|
||||
}
|
||||
|
||||
.field-section {
|
||||
border-bottom: 1px solid @color-form-field-border;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 7px;
|
||||
|
||||
> h4 {
|
||||
color: rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
> p:first-child,
|
||||
> h4:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.is-collapsible {
|
||||
cursor: pointer;
|
||||
|
||||
> h4:before {
|
||||
// Icon
|
||||
display: inline-block;
|
||||
.icon-FontAutumn();
|
||||
vertical-align: baseline;
|
||||
content: @chevron-up;
|
||||
|
||||
font-size: 12px;
|
||||
margin: 2px 8px 0;
|
||||
float: right;
|
||||
color: rgba(0,0,0,.4);
|
||||
.transition(all 0.3s);
|
||||
.scaleAxes(1, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid darken(@color-form-field-border, 10%);
|
||||
> h4:before {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.section-field.collapsed {
|
||||
.field-section.is-collapsible > h4:before {
|
||||
.scaleAxes(1, -1);
|
||||
}
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
resize: vertical;
|
||||
&.size-tiny { min-height: @size-tiny; }
|
||||
&.size-small { min-height: @size-small; }
|
||||
&.size-large { min-height: @size-large; }
|
||||
&.size-huge { min-height: @size-huge; }
|
||||
&.size-giant { min-height: @size-giant; }
|
||||
}
|
||||
|
||||
.field-checkboxlist {
|
||||
.field-checkboxlist-inner {
|
||||
.border-radius(@border-radius-base);
|
||||
background: @color-form-checkboxlist-background;
|
||||
border: 1px solid @color-form-checkboxlist-border;
|
||||
}
|
||||
|
||||
&:not(.is-scrollable) {
|
||||
.field-checkboxlist-inner {
|
||||
padding: 15px 15px 2px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkboxlist-controls {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: baseline;
|
||||
-ms-flex-align: baseline;
|
||||
align-items: baseline;
|
||||
> div {
|
||||
padding-bottom: 7px;
|
||||
|
||||
> a {
|
||||
font-size: 13px;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
> i {
|
||||
color: @text-muted;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
&:hover > i {
|
||||
color: @color-label;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-checkboxlist-scrollable {
|
||||
padding-left: 15px;
|
||||
height: @size-large + 100;
|
||||
|
||||
// First checkbox
|
||||
.checkbox {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// All others
|
||||
.checkbox ~ .checkbox { margin-top: 0; }
|
||||
}
|
||||
|
||||
.field-recordfinder {
|
||||
background-color: @color-form-field-bg;
|
||||
border: 1px solid @color-form-field-border;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.box-shadow(@input-box-shadow);
|
||||
.border-radius(@input-border-radius);
|
||||
|
||||
.form-control {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
height: auto;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 7px 30px 7px 11px;
|
||||
.box-shadow(none);
|
||||
}
|
||||
.btn {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
color: lighten(@color-form-field-recordfinder-btn, 15%);
|
||||
text-shadow: none;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
|
||||
&.clear-record {
|
||||
right: 44px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @color-form-field-recordfinder-btn;
|
||||
}
|
||||
}
|
||||
.text-muted i {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.primary {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.recordfinder-list {
|
||||
.list-footer {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.recordfinder-search {
|
||||
background-position: right -81px !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
border-radius: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
.clearfix();
|
||||
padding-bottom: @padding-standard;
|
||||
font-size: 0;
|
||||
|
||||
.btn {
|
||||
margin-right: 15px;
|
||||
|
||||
&.no-margin-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-right: 10px;
|
||||
|
||||
.btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.buttons-offset {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
body.slim-container {
|
||||
.form-buttons {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @form-breakpoint-max) {
|
||||
.form-group {
|
||||
&.span-left, &.span-right {
|
||||
width: 100%;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Select2
|
||||
//
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
||||
border: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Controls inside toolbar
|
||||
//
|
||||
|
||||
[data-control=toolbar] {
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
input[type=text].form-control, label {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 7px;
|
||||
|
||||
&.standalone {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
margin-right: 15px;
|
||||
|
||||
.select2-selection__rendered {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.select2-selection--single {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control.custom-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
79
modules/system/assets/ui/less/form.mixins.less
Normal file
79
modules/system/assets/ui/less/form.mixins.less
Normal file
@@ -0,0 +1,79 @@
|
||||
|
||||
// Form validation states
|
||||
//
|
||||
// Used in forms.less to generate the form validation CSS for warnings, errors,
|
||||
// and successes.
|
||||
|
||||
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
|
||||
// Color the label and help text
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
color: @text-color;
|
||||
}
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: @border-color;
|
||||
&:focus {
|
||||
border-color: darken(@border-color, 10%);
|
||||
}
|
||||
}
|
||||
// Set validation states also for addons
|
||||
.input-group-addon {
|
||||
color: @text-color;
|
||||
border-color: @border-color;
|
||||
background-color: @background-color;
|
||||
}
|
||||
// Optional feedback icon
|
||||
.form-control-feedback {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Form control focus state
|
||||
//
|
||||
// Generate a customized focus state and for any input with the specified color,
|
||||
// which defaults to the `@input-focus-border` variable.
|
||||
//
|
||||
// We highly encourage you to not customize the default value, but instead use
|
||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
||||
// WebKit's default styles, but applicable to a wider range of browsers. Its
|
||||
// usability and accessibility should be taken into account with any change.
|
||||
//
|
||||
// Example usage: change the default blue border and shadow to white for better
|
||||
// contrast against a dark gray background.
|
||||
|
||||
.form-control-focus(@color: @input-border-focus) {
|
||||
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
|
||||
&:focus {
|
||||
border-color: @color;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Relative text size, padding, and border-radii changes for form controls. For
|
||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
||||
// element gets special love because it's special, and that's a fact!
|
||||
|
||||
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
|
||||
height: @input-height;
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
font-size: @font-size;
|
||||
line-height: @line-height;
|
||||
.border-radius(@border-radius);
|
||||
|
||||
select& {
|
||||
height: @input-height;
|
||||
line-height: @input-height;
|
||||
}
|
||||
|
||||
textarea&,
|
||||
select[multiple]& {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
53
modules/system/assets/ui/less/form.variables.less
Normal file
53
modules/system/assets/ui/less/form.variables.less
Normal file
@@ -0,0 +1,53 @@
|
||||
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
@input-bg: #fff;
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
@input-color: #385487;
|
||||
@input-border: #d1d6d9;
|
||||
@input-border-focus: @input-border;
|
||||
@input-border-radius: 3px;
|
||||
@input-border-fade: fade(@input-border, 25%);
|
||||
@input-box-shadow: ~"inset 0 1px 0 @{input-border-fade}, 0 1px 0 rgba(255,255,255,.5)";
|
||||
|
||||
@input-color-placeholder: #cccccc;
|
||||
@input-color-disabled: #999999;
|
||||
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @gray-dark;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
@label-font-size: @font-size-base - 1;
|
||||
@input-font-size: @font-size-base;
|
||||
@color-label: #2A3E51;
|
||||
|
||||
@input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
|
||||
@form-breakpoint-min: 770px;
|
||||
@form-breakpoint-max: (@form-breakpoint-min - 1);
|
||||
|
||||
@color-input-sidebar-control: #C4C4C4;
|
||||
|
||||
@color-form-field-border: @input-border;
|
||||
@color-form-field-border-focus: @input-border-focus;
|
||||
@color-form-required-asterisk: @brand-danger;
|
||||
@color-form-sidebar: #ecf0f1;
|
||||
@color-form-field-preview-bg: #f6f6f6;
|
||||
@color-form-field-preview-text: #555555;
|
||||
@color-form-field-bg: #ffffff;
|
||||
@color-form-field-icon: #bdbdbd;
|
||||
@color-help-block-text: #777777;
|
||||
|
||||
@color-form-field-recordfinder-btn: #333333;
|
||||
|
||||
@color-form-checkboxlist-border: #e2e2e2;
|
||||
@color-form-checkboxlist-background: #FFFFFF;
|
||||
25
modules/system/assets/ui/less/global.less
Normal file
25
modules/system/assets/ui/less/global.less
Normal file
@@ -0,0 +1,25 @@
|
||||
//
|
||||
// Global
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.variables.less";
|
||||
@import "global.mixins.css3.less";
|
||||
@import "global.mixins.triangle.less";
|
||||
@import "global.mixins.gradient.less";
|
||||
@import "global.mixins.utility.less";
|
||||
@import "site.variables.less";
|
||||
@import "site.mixins.less";
|
||||
@import "button.mixins.less";
|
||||
@import "button.variables.less";
|
||||
@import "icon.mixins.less";
|
||||
@import "icon.variables.less";
|
||||
@import "form.mixins.less";
|
||||
@import "form.variables.less";
|
||||
@import "list.mixins.less";
|
||||
@import "list.variables.less";
|
||||
@import "dropdown.variables.less";
|
||||
@import "datepicker.variables.less";
|
||||
@import "toolbar.variables.less";
|
||||
@import "tooltip.variables.less";
|
||||
@import "popup.variables.less";
|
||||
@import "windex.variables.less";
|
||||
221
modules/system/assets/ui/less/global.mixins.css3.less
Normal file
221
modules/system/assets/ui/less/global.mixins.css3.less
Normal file
@@ -0,0 +1,221 @@
|
||||
// Border radius
|
||||
//
|
||||
.border-radius(@radius) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
// Single side border-radius
|
||||
.border-top-radius(@radius) {
|
||||
border-top-right-radius: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
}
|
||||
.border-right-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-top-right-radius: @radius;
|
||||
}
|
||||
.border-bottom-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
}
|
||||
.border-left-radius(@radius) {
|
||||
border-bottom-left-radius: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
//
|
||||
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
|
||||
// supported browsers that have box shadow capabilities now support the
|
||||
// standard `box-shadow` property.
|
||||
.box-shadow(@shadow) {
|
||||
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
.transition(@transition) {
|
||||
-webkit-transition: @transition;
|
||||
transition: @transition;
|
||||
}
|
||||
.transition-property(@transition-property) {
|
||||
-webkit-transition-property: @transition-property;
|
||||
transition-property: @transition-property;
|
||||
}
|
||||
.transition-delay(@transition-delay) {
|
||||
-webkit-transition-delay: @transition-delay;
|
||||
transition-delay: @transition-delay;
|
||||
}
|
||||
.transition-duration(@transition-duration) {
|
||||
-webkit-transition-duration: @transition-duration;
|
||||
transition-duration: @transition-duration;
|
||||
}
|
||||
.transition-transform(@transition) {
|
||||
-webkit-transition: -webkit-transform @transition;
|
||||
-moz-transition: -moz-transform @transition;
|
||||
-o-transition: -o-transform @transition;
|
||||
transition: transform @transition;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
.rotate(@degrees) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
-ms-transform: rotate(@degrees); // IE9 only
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
.scale(@ratio; @ratio-y...) {
|
||||
-webkit-transform: scale(@ratio, @ratio-y);
|
||||
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
|
||||
transform: scale(@ratio, @ratio-y);
|
||||
}
|
||||
.translate(@x; @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y); // IE9 only
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.skew(@x; @y) {
|
||||
-webkit-transform: skew(@x, @y);
|
||||
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||
transform: skew(@x, @y);
|
||||
}
|
||||
.translate3d(@x; @y; @z) {
|
||||
-webkit-transform: translate3d(@x, @y, @z);
|
||||
transform: translate3d(@x, @y, @z);
|
||||
}
|
||||
|
||||
.rotateX(@degrees) {
|
||||
-webkit-transform: rotateX(@degrees);
|
||||
-ms-transform: rotateX(@degrees); // IE9 only
|
||||
transform: rotateX(@degrees);
|
||||
}
|
||||
.rotateY(@degrees) {
|
||||
-webkit-transform: rotateY(@degrees);
|
||||
-ms-transform: rotateY(@degrees); // IE9 only
|
||||
transform: rotateY(@degrees);
|
||||
}
|
||||
.perspective(@perspective) {
|
||||
-webkit-perspective: @perspective;
|
||||
-moz-perspective: @perspective;
|
||||
perspective: @perspective;
|
||||
}
|
||||
.perspective-origin(@perspective) {
|
||||
-webkit-perspective-origin: @perspective;
|
||||
-moz-perspective-origin: @perspective;
|
||||
perspective-origin: @perspective;
|
||||
}
|
||||
.transform-origin(@origin) {
|
||||
-webkit-transform-origin: @origin;
|
||||
-moz-transform-origin: @origin;
|
||||
-ms-transform-origin: @origin; // IE9 only
|
||||
transform-origin: @origin;
|
||||
}
|
||||
|
||||
// Animations
|
||||
.animation(@animation) {
|
||||
-webkit-animation: @animation;
|
||||
animation: @animation;
|
||||
}
|
||||
.animation-name(@name) {
|
||||
-webkit-animation-name: @name;
|
||||
animation-name: @name;
|
||||
}
|
||||
.animation-duration(@duration) {
|
||||
-webkit-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
}
|
||||
.animation-timing-function(@timing-function) {
|
||||
-webkit-animation-timing-function: @timing-function;
|
||||
animation-timing-function: @timing-function;
|
||||
}
|
||||
.animation-delay(@delay) {
|
||||
-webkit-animation-delay: @delay;
|
||||
animation-delay: @delay;
|
||||
}
|
||||
.animation-iteration-count(@iteration-count) {
|
||||
-webkit-animation-iteration-count: @iteration-count;
|
||||
animation-iteration-count: @iteration-count;
|
||||
}
|
||||
.animation-direction(@direction) {
|
||||
-webkit-animation-direction: @direction;
|
||||
animation-direction: @direction;
|
||||
}
|
||||
|
||||
// Backface visibility
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
// Default value is `visible`, but can be changed to `hidden`
|
||||
.backface-visibility(@visibility){
|
||||
-webkit-backface-visibility: @visibility;
|
||||
-moz-backface-visibility: @visibility;
|
||||
backface-visibility: @visibility;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
.box-sizing(@boxmodel) {
|
||||
-webkit-box-sizing: @boxmodel;
|
||||
-moz-box-sizing: @boxmodel;
|
||||
box-sizing: @boxmodel;
|
||||
}
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
.user-select(@select) {
|
||||
-webkit-user-select: @select;
|
||||
-moz-user-select: @select;
|
||||
-ms-user-select: @select; // IE10+
|
||||
user-select: @select;
|
||||
}
|
||||
|
||||
// Resize anything
|
||||
.resizable(@direction) {
|
||||
resize: @direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Safari fix
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
|
||||
-webkit-column-count: @column-count;
|
||||
-moz-column-count: @column-count;
|
||||
column-count: @column-count;
|
||||
-webkit-column-gap: @column-gap;
|
||||
-moz-column-gap: @column-gap;
|
||||
column-gap: @column-gap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
.hyphens(@mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: @mode;
|
||||
-moz-hyphens: @mode;
|
||||
-ms-hyphens: @mode; // IE10+
|
||||
-o-hyphens: @mode;
|
||||
hyphens: @mode;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
.opacity(@opacity) {
|
||||
opacity: @opacity;
|
||||
// IE8 filter
|
||||
@opacity-ie: (@opacity * 100);
|
||||
filter: ~"alpha(opacity=@{opacity-ie})";
|
||||
}
|
||||
|
||||
// Universal transform
|
||||
// --------------------------------------------------
|
||||
|
||||
.transform(@transform) {
|
||||
-webkit-transform: @transform;
|
||||
-ms-transform: @transform; // IE9+
|
||||
transform: @transform;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
//
|
||||
|
||||
.scaleAxes(@x, @y) {
|
||||
-webkit-transform: scale(@x, @y);
|
||||
-moz-transform: scale(@x, @y);
|
||||
-ms-transform: scale(@x, @y);
|
||||
-o-transform: scale(@x, @y);
|
||||
transform: scale(@x, @y);
|
||||
}
|
||||
60
modules/system/assets/ui/less/global.mixins.gradient.less
Normal file
60
modules/system/assets/ui/less/global.mixins.gradient.less
Normal file
@@ -0,0 +1,60 @@
|
||||
// Gradients
|
||||
// --------------------------------------------------
|
||||
|
||||
#gradient {
|
||||
|
||||
// Horizontal gradient, from left to right
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9 and below.
|
||||
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
|
||||
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
|
||||
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
background-repeat: repeat-x;
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
|
||||
}
|
||||
|
||||
// Vertical gradient, from top to bottom
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9 and below.
|
||||
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
|
||||
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12
|
||||
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
background-repeat: repeat-x;
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
|
||||
}
|
||||
|
||||
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
|
||||
background-repeat: repeat-x;
|
||||
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
|
||||
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
}
|
||||
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
|
||||
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
||||
background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
||||
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
|
||||
background-repeat: no-repeat;
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
|
||||
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
||||
background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
||||
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
||||
background-repeat: no-repeat;
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
.radial(@inner-color: #555; @outer-color: #333) {
|
||||
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
|
||||
background-image: radial-gradient(circle, @inner-color, @outer-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
|
||||
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
||||
}
|
||||
}
|
||||
34
modules/system/assets/ui/less/global.mixins.triangle.less
Normal file
34
modules/system/assets/ui/less/global.mixins.triangle.less
Normal file
@@ -0,0 +1,34 @@
|
||||
// Triangles
|
||||
// --------------------------------------------------
|
||||
|
||||
.triangle-base() {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.triangle(@direction, @width, @height, @color) when (@direction = up) {
|
||||
.triangle-base();
|
||||
border-left: (@width / 2) solid transparent;
|
||||
border-right: (@width / 2) solid transparent;
|
||||
border-bottom: @height solid @color;
|
||||
}
|
||||
.triangle(@direction, @width, @height, @color) when (@direction = down) {
|
||||
.triangle-base();
|
||||
border-left: (@width / 2) solid transparent;
|
||||
border-right: (@width / 2) solid transparent;
|
||||
border-top: @height solid @color;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.triangle(@direction, @width, @height, @color) when (@direction = left) {
|
||||
.triangle-base();
|
||||
border-top: (@height / 2) solid transparent;
|
||||
border-bottom: (@height / 2) solid transparent;
|
||||
border-right: @width solid @color;
|
||||
}
|
||||
.triangle(@direction, @width, @height, @color) when (@direction = right) {
|
||||
.triangle-base();
|
||||
border-top: (@height / 2) solid transparent;
|
||||
border-bottom: (@height / 2) solid transparent;
|
||||
border-left: @width solid @color;
|
||||
}
|
||||
134
modules/system/assets/ui/less/global.mixins.utility.less
Normal file
134
modules/system/assets/ui/less/global.mixins.utility.less
Normal file
@@ -0,0 +1,134 @@
|
||||
// Utilities
|
||||
// -------------------------
|
||||
|
||||
// Clearfix
|
||||
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
//
|
||||
// For modern browsers
|
||||
// 1. The space content is one way to avoid an Opera bug when the
|
||||
// contenteditable attribute is included anywhere else in the document.
|
||||
// Otherwise it causes space to appear at the top and bottom of elements
|
||||
// that are clearfixed.
|
||||
// 2. The use of `table` rather than `block` is only necessary if using
|
||||
// `:before` to contain the top-margins of child elements.
|
||||
.clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " "; // 1
|
||||
display: table; // 2
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// WebKit-style focus
|
||||
.tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted;
|
||||
outline-offset: 0px;
|
||||
|
||||
// Firefox
|
||||
outline: 4px auto Highlight;
|
||||
// WebKit
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
.size(@width; @height) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
.square(@size) {
|
||||
.size(@size; @size);
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
.placeholder(@color: @input-color-placeholder) {
|
||||
&::-moz-placeholder { color: @color; // Firefox
|
||||
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
|
||||
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
|
||||
}
|
||||
|
||||
// Text overflow
|
||||
// Requires inline-block or block for proper styling
|
||||
.text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// CSS image replacement
|
||||
//
|
||||
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
|
||||
// mixins being reused as classes with the same name, this doesn't hold up. As
|
||||
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
|
||||
// that we cannot chain the mixins together in Less, so they are repeated.
|
||||
//
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||
|
||||
// Deprecated as of v3.0.1 (will be removed in v4)
|
||||
.hide-text() {
|
||||
font: ~"0/0" a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
// New mixin to use as of v3.0.1
|
||||
.text-hide() {
|
||||
.hide-text();
|
||||
}
|
||||
|
||||
// Retina images
|
||||
//
|
||||
// Short retina mixin for setting background-image and -size
|
||||
|
||||
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
|
||||
background-image: url("@{file-1x}");
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
background-image: url("@{file-2x}");
|
||||
background-size: @width-1x @height-1x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive image
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
|
||||
.img-responsive(@display: block;) {
|
||||
display: @display;
|
||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||
}
|
||||
|
||||
// Responsive utilities
|
||||
// -------------------------
|
||||
// More easily include all the states for responsive-utilities.less.
|
||||
.responsive-visibility() {
|
||||
display: block !important;
|
||||
table& { display: table; }
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
}
|
||||
|
||||
.responsive-invisibility() {
|
||||
display: none !important;
|
||||
}
|
||||
190
modules/system/assets/ui/less/global.variables.less
Normal file
190
modules/system/assets/ui/less/global.variables.less
Normal file
@@ -0,0 +1,190 @@
|
||||
//
|
||||
// Reset
|
||||
// --------------------------------------------------
|
||||
|
||||
// Dupe
|
||||
@body-bg: #f9f9f9;
|
||||
|
||||
@text-color: @gray-dark;
|
||||
@link-color: @brand-secondary;
|
||||
@link-hover-color: darken(@link-color, 30%);
|
||||
|
||||
@link-hover-decoration: underline;
|
||||
|
||||
//
|
||||
// Paths
|
||||
// --------------------------------------------------
|
||||
|
||||
@font-path: "../font";
|
||||
@image-path: "../images";
|
||||
|
||||
//
|
||||
// Breakpoints
|
||||
// --------------------------------------------------
|
||||
|
||||
// Extra small screen / phone
|
||||
@screen-xs: 480px;
|
||||
@screen-xs-min: @screen-xs;
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
//
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
@font-family-sans-serif: sans-serif;
|
||||
@font-family-serif: serif;
|
||||
@font-family-monospace: monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@line-height-base: 1.428571429; // 20/14
|
||||
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||
|
||||
@headings-font-family: inherit;
|
||||
@headings-font-weight: 400;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
|
||||
@component-offset-horizontal: 180px;
|
||||
@text-muted: @gray-light;
|
||||
@abbr-border-color: @gray-light;
|
||||
@headings-small-color: @gray-light;
|
||||
@blockquote-small-color: @gray-light;
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
@page-header-border-color: @gray-lighter;
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
//
|
||||
// Sizes
|
||||
// --------------------------------------------------
|
||||
@size-tiny: 50px;
|
||||
@size-small: 100px;
|
||||
@size-large: 200px;
|
||||
@size-huge: 250px;
|
||||
@size-giant: 350px;
|
||||
|
||||
//
|
||||
// Colors
|
||||
// --------------------------------------------------
|
||||
@brand-primary: #103141;
|
||||
@brand-secondary: #2da7c7;
|
||||
@brand-accent: #6cc551;
|
||||
@brand-primary-lighter: lighten(@brand-primary, 5%);
|
||||
@brand-secondary-lighter:lighten(@brand-secondary, 5%);
|
||||
@brand-accent-lighter: lighten(@brand-accent, 5%);
|
||||
@brand-primary-darker: darken(@brand-primary, 5%);
|
||||
@brand-secondary-darker: darken(@brand-secondary, 5%);
|
||||
@brand-accent-darker: darken(@brand-accent, 5%);
|
||||
|
||||
@brand-success: #52a838;
|
||||
@brand-info: #48b9d5;
|
||||
@brand-warning: #de8754;
|
||||
@brand-danger: #e01346;
|
||||
|
||||
@color-text-title: #405261;
|
||||
@color-text-description: #8f8f8f;
|
||||
|
||||
@color-focus: @brand-primary;
|
||||
@color-border: #cccccc;
|
||||
@color-border-light: #e1e1e1;
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray-light: lighten(#000, 60%); // #999
|
||||
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||
|
||||
@state-success-text: #3c763d;
|
||||
@state-success-bg: #dff0d8;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #31708f;
|
||||
@state-info-bg: #d9edf7;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #8a6d3b;
|
||||
@state-warning-bg: #fcf8e3;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
|
||||
|
||||
@state-danger-text: #a94442;
|
||||
@state-danger-bg: #f2dede;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
|
||||
|
||||
//
|
||||
// Highlights
|
||||
// --------------------------------------------------
|
||||
|
||||
@highlight-hover-bg: mix(white, @brand-secondary, 13%);
|
||||
@highlight-hover-text: #fff;
|
||||
|
||||
@highlight-active-bg: @brand-accent;
|
||||
@highlight-active-text: #fff;
|
||||
|
||||
//
|
||||
// General
|
||||
// --------------------------------------------------
|
||||
@padding-standard: 20px;
|
||||
|
||||
@padding-base-vertical: 8px;
|
||||
@padding-base-horizontal: 13px;
|
||||
|
||||
@padding-large-vertical: 10px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 3px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
@component-active-color: #fff;
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
@caret-width-base: 4px;
|
||||
@caret-width-large: 5px;
|
||||
|
||||
@spacer: @padding-standard;
|
||||
@spacer-y: @spacer;
|
||||
@spacer-x: @spacer;
|
||||
|
||||
@overlay-box-shadow: ~"0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)";
|
||||
@overlay-background: rgba(0,0,0,0.2);
|
||||
33
modules/system/assets/ui/less/icon.close.less
Normal file
33
modules/system/assets/ui/less/icon.close.less
Normal file
@@ -0,0 +1,33 @@
|
||||
//
|
||||
// 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;
|
||||
font-family: sans-serif;
|
||||
.opacity(.2);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @close-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
.opacity(.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;
|
||||
}
|
||||
}
|
||||
15
modules/system/assets/ui/less/icon.icons.less
Normal file
15
modules/system/assets/ui/less/icon.icons.less
Normal file
@@ -0,0 +1,15 @@
|
||||
each(.fa-icons(), {
|
||||
@scope: ~':is(.icon-@{key},.wn-icon-@{key},.oc-icon-@{key})';
|
||||
|
||||
@{scope}:before {
|
||||
content: @value;
|
||||
}
|
||||
});
|
||||
|
||||
each(.fa-brand-icons(), {
|
||||
@scope: ~':is(.icon-@{key},.wn-icon-@{key},.oc-icon-@{key})';
|
||||
@{scope}:before {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
content: @value;
|
||||
}
|
||||
});
|
||||
207
modules/system/assets/ui/less/icon.less
Normal file
207
modules/system/assets/ui/less/icon.less
Normal file
@@ -0,0 +1,207 @@
|
||||
//
|
||||
// Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "icon.close.less";
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: @fa-font-display;
|
||||
src: url('@{icon-font-path}/fa-regular-400.woff2?v=@{icon-font-version}') format('woff2'),
|
||||
url('@{icon-font-path}/fa-regular-400.ttf?v=@{icon-font-version}') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: @fa-font-display;
|
||||
src: url('@{icon-font-path}/fa-solid-900.woff2?v=@{icon-font-version}') format('woff2'),
|
||||
url('@{icon-font-path}/fa-solid-900.ttf?v=@{icon-font-version}') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: @fa-font-display;
|
||||
src: url('@{icon-font-path}/fa-brands-400.woff2?v=@{icon-font-version}') format('woff2'),
|
||||
url('@{icon-font-path}/fa-brands-400.ttf?v=@{icon-font-version}') format('truetype');
|
||||
}
|
||||
|
||||
//
|
||||
// Standard icons
|
||||
//
|
||||
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
.icon-FontAutumn();
|
||||
display: inline;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
vertical-align: baseline;
|
||||
background-image: none;
|
||||
background-position: 0% 0%;
|
||||
background-repeat: repeat;
|
||||
margin-top: 0;
|
||||
|
||||
&::before {
|
||||
text-decoration: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.icon-border {
|
||||
border-color: @fa-border-color;
|
||||
border-radius: @fa-border-radius;
|
||||
border-style: @fa-border-style;
|
||||
border-width: @fa-border-width;
|
||||
padding: @fa-border-padding;
|
||||
}
|
||||
|
||||
&.pull-left {
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
margin-left: .3em;
|
||||
}
|
||||
}
|
||||
|
||||
.far,
|
||||
.icon-regular,
|
||||
.wn-icon-regular,
|
||||
.oc-icon-regular {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fad,
|
||||
.icon-solid,
|
||||
.wn-icon-solid,
|
||||
.oc-icon-solid {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.fab,
|
||||
.icon-brands,
|
||||
.wn-icon-brands,
|
||||
.oc-icon-brands {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
//
|
||||
// Prefixed icons ("wn-")
|
||||
//
|
||||
|
||||
[class^="wn-icon-"],
|
||||
[class*=" wn-icon-"],
|
||||
[class^="oc-icon-"],
|
||||
[class*=" oc-icon-"] {
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
.icon-FontAutumn();
|
||||
vertical-align: baseline;
|
||||
}
|
||||
&.empty:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Icon Sizes
|
||||
//
|
||||
|
||||
.icon-1x {
|
||||
font-size: 1em;
|
||||
}
|
||||
.icon-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
.icon-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
.icon-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
.icon-5x {
|
||||
font-size: 5em;
|
||||
}
|
||||
.icon-6x {
|
||||
font-size: 6em;
|
||||
}
|
||||
.icon-7x {
|
||||
font-size: 7em;
|
||||
}
|
||||
.icon-8x {
|
||||
font-size: 8em;
|
||||
}
|
||||
.icon-9x {
|
||||
font-size: 9em;
|
||||
}
|
||||
.icon-10x {
|
||||
font-size: 10em;
|
||||
}
|
||||
.icon-2xs {
|
||||
font-size: 0.625em;
|
||||
line-height: 0.1em;
|
||||
vertical-align: 0.225em;
|
||||
}
|
||||
.icon-xs {
|
||||
font-size: 0.75em;
|
||||
line-height: 0.08333333em;
|
||||
vertical-align: 0.125em;
|
||||
}
|
||||
.icon-sm {
|
||||
font-size: 0.875em;
|
||||
line-height: 0.07142857em;
|
||||
vertical-align: 0.05357143em;
|
||||
}
|
||||
.icon-lg {
|
||||
font-size: 1.25em;
|
||||
line-height: 0.05em;
|
||||
vertical-align: -0.075em;
|
||||
}
|
||||
.icon-xl {
|
||||
font-size: 1.5em;
|
||||
line-height: 0.04166667em;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
.icon-2xl {
|
||||
font-size: 2em;
|
||||
line-height: 0.03125em;
|
||||
vertical-align: -0.1875em;
|
||||
}
|
||||
|
||||
//
|
||||
// Icons in a list (borrowed from Font Awesome 6)
|
||||
//
|
||||
|
||||
.icon-ul {
|
||||
list-style-type: none;
|
||||
margin-left: @fa-li-margin;
|
||||
padding-left: 0;
|
||||
|
||||
> li { position: relative; }
|
||||
}
|
||||
|
||||
.icon-li {
|
||||
left: @fa-li-width * -1;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: @fa-li-width;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_mixins.less";
|
||||
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_fixed-width.less";
|
||||
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_animated.less";
|
||||
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_rotated-flipped.less";
|
||||
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_screen-reader.less";
|
||||
104
modules/system/assets/ui/less/icon.mixins.less
Normal file
104
modules/system/assets/ui/less/icon.mixins.less
Normal file
@@ -0,0 +1,104 @@
|
||||
// Mixins
|
||||
// --------------------------
|
||||
|
||||
.icon(@icon) {
|
||||
.icon-FontAutumn();
|
||||
content: @icon;
|
||||
}
|
||||
|
||||
.icon-FontAutumn(@weight: 900) {
|
||||
font-family: @fa-style-family;
|
||||
font-weight: @weight;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
|
||||
.icon-stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: @width;
|
||||
height: @height;
|
||||
line-height: @width;
|
||||
vertical-align: -35%;
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: @top-font-size;
|
||||
line-height: inherit;
|
||||
*line-height: @height;
|
||||
}
|
||||
.icon-stack-base {
|
||||
font-size: @base-font-size;
|
||||
*line-height: @height / @base-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll markers
|
||||
// --------------------------------------------------
|
||||
|
||||
.vertical-scroll-marker(@color) {
|
||||
.scroll-marker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
display: none;
|
||||
|
||||
&:after {
|
||||
.icon(@ellipsis-h);
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
top: 0;
|
||||
height: 9px;
|
||||
font-size: 10px;
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&.before {top: 0;}
|
||||
&.after {
|
||||
bottom: 3px;
|
||||
&:after {
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.scroll-before .scroll-marker.before { display: block; }
|
||||
&.scroll-after .scroll-marker.after { display: block; }
|
||||
}
|
||||
|
||||
.horizontal-scroll-indicators(@color) {
|
||||
&:after, &:before {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
height: 9px;
|
||||
font-size: 10px;
|
||||
color: @color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -6px;
|
||||
.icon(@angle-left);
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: -8px;
|
||||
.icon(@angle-right);
|
||||
}
|
||||
|
||||
&.scroll-before:before { display: block; }
|
||||
&.scroll-after:after { display: block; }
|
||||
}
|
||||
3250
modules/system/assets/ui/less/icon.shims.less
Normal file
3250
modules/system/assets/ui/less/icon.shims.less
Normal file
File diff suppressed because it is too large
Load Diff
807
modules/system/assets/ui/less/icon.variables.less
Normal file
807
modules/system/assets/ui/less/icon.variables.less
Normal file
@@ -0,0 +1,807 @@
|
||||
//
|
||||
// Close icons
|
||||
// --------------------------------------------------
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
// Variables
|
||||
// --------------------------
|
||||
|
||||
@icon-font-path: @font-path;
|
||||
@icon-font-version: "2.0.0";
|
||||
|
||||
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_variables.less";
|
||||
|
||||
@fa-css-prefix: icon;
|
||||
@fa-font-path: @icon-font-path;
|
||||
|
||||
// Icon variable map
|
||||
// Maps the old icon variables to the new Font Awesome variables
|
||||
// --------------------------
|
||||
|
||||
@500px: @fa-var-500px;
|
||||
@address-book: @fa-var-address-book;
|
||||
@address-book-o: @fa-var-address-book;
|
||||
@address-card: @fa-var-address-card;
|
||||
@address-card-o: @fa-var-address-card;
|
||||
@adjust: @fa-var-adjust;
|
||||
@adn: @fa-var-adn;
|
||||
@align-center: @fa-var-align-center;
|
||||
@align-justify: @fa-var-align-justify;
|
||||
@align-left: @fa-var-align-left;
|
||||
@align-right: @fa-var-align-right;
|
||||
@amazon: @fa-var-amazon;
|
||||
@ambulance: @fa-var-ambulance;
|
||||
@american-sign-language-interpreting: @fa-var-american-sign-language-interpreting;
|
||||
@anchor: @fa-var-anchor;
|
||||
@android: @fa-var-android;
|
||||
@angellist: @fa-var-angellist;
|
||||
@angle-double-down: @fa-var-angle-double-down;
|
||||
@angle-double-left: @fa-var-angle-double-left;
|
||||
@angle-double-right: @fa-var-angle-double-right;
|
||||
@angle-double-up: @fa-var-angle-double-up;
|
||||
@angle-down: @fa-var-angle-down;
|
||||
@angle-left: @fa-var-angle-left;
|
||||
@angle-right: @fa-var-angle-right;
|
||||
@angle-up: @fa-var-angle-up;
|
||||
@apple: @fa-var-apple;
|
||||
@archive: @fa-var-archive;
|
||||
@area-chart: @fa-var-area-chart;
|
||||
@arrow-circle-down: @fa-var-arrow-circle-down;
|
||||
@arrow-circle-left: @fa-var-arrow-circle-left;
|
||||
@arrow-circle-o-down: @fa-var-arrow-circle-down;
|
||||
@arrow-circle-o-left: @fa-var-arrow-circle-left;
|
||||
@arrow-circle-o-right: @fa-var-arrow-circle-right;
|
||||
@arrow-circle-o-up: @fa-var-arrow-circle-up;
|
||||
@arrow-circle-right: @fa-var-arrow-circle-right;
|
||||
@arrow-circle-up: @fa-var-arrow-circle-up;
|
||||
@arrow-down: @fa-var-arrow-down;
|
||||
@arrow-left: @fa-var-arrow-left;
|
||||
@arrow-right: @fa-var-arrow-right;
|
||||
@arrow-up: @fa-var-arrow-up;
|
||||
@arrows: @fa-var-arrows;
|
||||
@arrows-alt: @fa-var-arrows-alt;
|
||||
@arrows-h: @fa-var-arrows-h;
|
||||
@arrows-v: @fa-var-arrows-v;
|
||||
@asl-interpreting: @fa-var-asl-interpreting;
|
||||
@assistive-listening-systems: @fa-var-assistive-listening-systems;
|
||||
@asterisk: @fa-var-asterisk;
|
||||
@at: @fa-var-at;
|
||||
@audio-description: @fa-var-audio-description;
|
||||
@automobile: @fa-var-automobile;
|
||||
@backward: @fa-var-backward;
|
||||
@balance-scale: @fa-var-balance-scale;
|
||||
@ban: @fa-var-ban;
|
||||
@bandcamp: @fa-var-bandcamp;
|
||||
@bank: @fa-var-bank;
|
||||
@bar-chart: @fa-var-bar-chart;
|
||||
@bar-chart-o: @fa-var-bar-chart;
|
||||
@barcode: @fa-var-barcode;
|
||||
@bars: @fa-var-bars;
|
||||
@bath: @fa-var-bath;
|
||||
@bathtub: @fa-var-bathtub;
|
||||
@battery: @fa-var-battery;
|
||||
@battery-0: @fa-var-battery-0;
|
||||
@battery-1: @fa-var-battery-quarter;
|
||||
@battery-2: @fa-var-battery-2;
|
||||
@battery-3: @fa-var-battery-3;
|
||||
@battery-4: @fa-var-battery-4;
|
||||
@battery-empty: @fa-var-battery-empty;
|
||||
@battery-full: @fa-var-battery-full;
|
||||
@battery-half: @fa-var-battery-half;
|
||||
@battery-quarter: @fa-var-battery-quarter;
|
||||
@battery-three-quarters: @fa-var-battery-three-quarters;
|
||||
@bed: @fa-var-bed;
|
||||
@beer: @fa-var-beer;
|
||||
@behance: @fa-var-behance;
|
||||
@behance-square: @fa-var-behance-square;
|
||||
@bell: @fa-var-bell;
|
||||
@bell-o: @fa-var-bell;
|
||||
@bell-slash: @fa-var-bell-slash;
|
||||
@bell-slash-o: @fa-var-bell-slash;
|
||||
@bicycle: @fa-var-bicycle;
|
||||
@binoculars: @fa-var-binoculars;
|
||||
@birthday-cake: @fa-var-birthday-cake;
|
||||
@bitbucket: @fa-var-bitbucket;
|
||||
@bitbucket-square: @fa-var-bitbucket;
|
||||
@bitcoin: @fa-var-bitcoin;
|
||||
@black-tie: @fa-var-black-tie;
|
||||
@blind: @fa-var-blind;
|
||||
@bluetooth: @fa-var-bluetooth;
|
||||
@bluetooth-b: @fa-var-bluetooth-b;
|
||||
@bold: @fa-var-bold;
|
||||
@bolt: @fa-var-bolt;
|
||||
@bomb: @fa-var-bomb;
|
||||
@book: @fa-var-book;
|
||||
@bookmark: @fa-var-bookmark;
|
||||
@bookmark-o: @fa-var-bookmark;
|
||||
@braille: @fa-var-braille;
|
||||
@briefcase: @fa-var-briefcase;
|
||||
@btc: @fa-var-btc;
|
||||
@bug: @fa-var-bug;
|
||||
@building: @fa-var-building;
|
||||
@building-o: @fa-var-building;
|
||||
@bullhorn: @fa-var-bullhorn;
|
||||
@bullseye: @fa-var-bullseye;
|
||||
@bus: @fa-var-bus;
|
||||
@buysellads: @fa-var-buysellads;
|
||||
@cab: @fa-var-cab;
|
||||
@calculator: @fa-var-calculator;
|
||||
@calendar: @fa-var-calendar;
|
||||
@calendar-check-o: @fa-var-calendar-check;
|
||||
@calendar-minus-o: @fa-var-calendar-minus;
|
||||
@calendar-o: @fa-var-calendar;
|
||||
@calendar-plus-o: @fa-var-calendar-plus;
|
||||
@calendar-times-o: @fa-var-calendar-times;
|
||||
@camera: @fa-var-camera;
|
||||
@camera-retro: @fa-var-camera-retro;
|
||||
@car: @fa-var-car;
|
||||
@caret-down: @fa-var-caret-down;
|
||||
@caret-left: @fa-var-caret-left;
|
||||
@caret-right: @fa-var-caret-right;
|
||||
@caret-square-o-down: @fa-var-caret-square-down;
|
||||
@caret-square-o-left: @fa-var-caret-square-left;
|
||||
@caret-square-o-right: @fa-var-caret-square-right;
|
||||
@caret-square-o-up: @fa-var-caret-square-up;
|
||||
@caret-up: @fa-var-caret-up;
|
||||
@cart-arrow-down: @fa-var-cart-arrow-down;
|
||||
@cart-plus: @fa-var-cart-plus;
|
||||
@cc: @fa-var-closed-captioning;
|
||||
@cc-amex: @fa-var-cc-amex;
|
||||
@cc-diners-club: @fa-var-cc-diners-club;
|
||||
@cc-discover: @fa-var-cc-discover;
|
||||
@cc-jcb: @fa-var-cc-jcb;
|
||||
@cc-mastercard: @fa-var-cc-mastercard;
|
||||
@cc-paypal: @fa-var-cc-paypal;
|
||||
@cc-stripe: @fa-var-cc-stripe;
|
||||
@cc-visa: @fa-var-cc-visa;
|
||||
@certificate: @fa-var-certificate;
|
||||
@chain: @fa-var-chain;
|
||||
@chain-broken: @fa-var-chain-broken;
|
||||
@check: @fa-var-check;
|
||||
@check-circle: @fa-var-check-circle;
|
||||
@check-circle-o: @fa-var-check-circle;
|
||||
@check-square: @fa-var-check-square;
|
||||
@check-square-o: @fa-var-check-square;
|
||||
@chevron-circle-down: @fa-var-chevron-circle-down;
|
||||
@chevron-circle-left: @fa-var-chevron-circle-left;
|
||||
@chevron-circle-right: @fa-var-chevron-circle-right;
|
||||
@chevron-circle-up: @fa-var-chevron-circle-up;
|
||||
@chevron-down: @fa-var-chevron-down;
|
||||
@chevron-left: @fa-var-chevron-left;
|
||||
@chevron-right: @fa-var-chevron-right;
|
||||
@chevron-up: @fa-var-chevron-up;
|
||||
@child: @fa-var-child;
|
||||
@chrome: @fa-var-chrome;
|
||||
@circle: @fa-var-circle;
|
||||
@circle-o: @fa-var-circle;
|
||||
@circle-o-notch: @fa-var-circle-notch;
|
||||
@circle-thin: @fa-var-circle;
|
||||
@clipboard: @fa-var-clipboard;
|
||||
@clock-o: @fa-var-clock;
|
||||
@clone: @fa-var-clone;
|
||||
@close: @fa-var-close;
|
||||
@cloud: @fa-var-cloud;
|
||||
@cloud-download: @fa-var-cloud-download;
|
||||
@cloud-upload: @fa-var-cloud-upload;
|
||||
@cny: @fa-var-cny;
|
||||
@code: @fa-var-code;
|
||||
@code-fork: @fa-var-code-fork;
|
||||
@codepen: @fa-var-codepen;
|
||||
@codiepie: @fa-var-codiepie;
|
||||
@coffee: @fa-var-coffee;
|
||||
@cog: @fa-var-cog;
|
||||
@cogs: @fa-var-cogs;
|
||||
@columns: @fa-var-columns;
|
||||
@comment: @fa-var-comment;
|
||||
@comment-o: @fa-var-comment;
|
||||
@commenting: @fa-var-commenting;
|
||||
@commenting-o: @fa-var-commenting;
|
||||
@comments: @fa-var-comments;
|
||||
@comments-o: @fa-var-comments;
|
||||
@compass: @fa-var-compass;
|
||||
@compress: @fa-var-compress;
|
||||
@connectdevelop: @fa-var-connectdevelop;
|
||||
@contao: @fa-var-contao;
|
||||
@copy: @fa-var-copy;
|
||||
@copyright: @fa-var-copyright;
|
||||
@creative-commons: @fa-var-creative-commons;
|
||||
@credit-card: @fa-var-credit-card;
|
||||
@credit-card-alt: @fa-var-credit-card-alt;
|
||||
@crop: @fa-var-crop;
|
||||
@crosshairs: @fa-var-crosshairs;
|
||||
@css3: @fa-var-css3;
|
||||
@cube: @fa-var-cube;
|
||||
@cubes: @fa-var-cubes;
|
||||
@cut: @fa-var-cut;
|
||||
@cutlery: @fa-var-cutlery;
|
||||
@dashboard: @fa-var-dashboard;
|
||||
@dashcube: @fa-var-dashcube;
|
||||
@database: @fa-var-database;
|
||||
@deaf: @fa-var-deaf;
|
||||
@deafness: @fa-var-deafness;
|
||||
@dedent: @fa-var-dedent;
|
||||
@delicious: @fa-var-delicious;
|
||||
@desktop: @fa-var-desktop;
|
||||
@deviantart: @fa-var-deviantart;
|
||||
@diamond: @fa-var-diamond;
|
||||
@digg: @fa-var-digg;
|
||||
@dollar: @fa-var-dollar;
|
||||
@dot-circle-o: @fa-var-dot-circle;
|
||||
@download: @fa-var-download;
|
||||
@dribbble: @fa-var-dribbble;
|
||||
@drivers-license: @fa-var-drivers-license;
|
||||
@drivers-license-o: @fa-var-drivers-license;
|
||||
@dropbox: @fa-var-dropbox;
|
||||
@drupal: @fa-var-drupal;
|
||||
@edge: @fa-var-edge;
|
||||
@edit: @fa-var-edit;
|
||||
@eercast: @fa-var-sellcast;
|
||||
@eject: @fa-var-eject;
|
||||
@ellipsis-h: @fa-var-ellipsis-h;
|
||||
@ellipsis-v: @fa-var-ellipsis-v;
|
||||
@empire: @fa-var-empire;
|
||||
@envelope: @fa-var-envelope;
|
||||
@envelope-o: @fa-var-envelope;
|
||||
@envelope-open: @fa-var-envelope-open;
|
||||
@envelope-open-o: @fa-var-envelope-open;
|
||||
@envelope-square: @fa-var-envelope-square;
|
||||
@envira: @fa-var-envira;
|
||||
@eraser: @fa-var-eraser;
|
||||
@etsy: @fa-var-etsy;
|
||||
@eur: @fa-var-eur;
|
||||
@euro: @fa-var-euro;
|
||||
@exchange: @fa-var-exchange;
|
||||
@exclamation: @fa-var-exclamation;
|
||||
@exclamation-circle: @fa-var-exclamation-circle;
|
||||
@exclamation-triangle: @fa-var-exclamation-triangle;
|
||||
@expand: @fa-var-expand;
|
||||
@expeditedssl: @fa-var-expeditedssl;
|
||||
@external-link: @fa-var-external-link;
|
||||
@external-link-square: @fa-var-external-link-square;
|
||||
@eye: @fa-var-eye;
|
||||
@eye-slash: @fa-var-eye-slash;
|
||||
@eyedropper: @fa-var-eyedropper;
|
||||
@fa: @fa-var-font-awesome;
|
||||
@facebook: @fa-var-facebook;
|
||||
@facebook-f: @fa-var-facebook-f;
|
||||
@facebook-official: @fa-var-facebook;
|
||||
@facebook-square: @fa-var-facebook-square;
|
||||
@fast-backward: @fa-var-fast-backward;
|
||||
@fast-forward: @fa-var-fast-forward;
|
||||
@fax: @fa-var-fax;
|
||||
@feed: @fa-var-feed;
|
||||
@female: @fa-var-female;
|
||||
@fighter-jet: @fa-var-fighter-jet;
|
||||
@file: @fa-var-file;
|
||||
@file-archive-o: @fa-var-file-archive;
|
||||
@file-audio-o: @fa-var-file-audio;
|
||||
@file-code-o: @fa-var-file-code;
|
||||
@file-excel-o: @fa-var-file-excel;
|
||||
@file-image-o: @fa-var-file-image;
|
||||
@file-movie-o: @fa-var-file-video;
|
||||
@file-o: @fa-var-file;
|
||||
@file-pdf-o: @fa-var-file-pdf;
|
||||
@file-photo-o: @fa-var-file-image;
|
||||
@file-picture-o: @fa-var-file-image;
|
||||
@file-powerpoint-o: @fa-var-file-powerpoint;
|
||||
@file-sound-o: @fa-var-file-audio;
|
||||
@file-text: @fa-var-file-text;
|
||||
@file-text-o: @fa-var-file-text;
|
||||
@file-video-o: @fa-var-file-video;
|
||||
@file-word-o: @fa-var-file-word;
|
||||
@file-zip-o: @fa-var-file-zipper;
|
||||
@files-o: @fa-var-copy;
|
||||
@film: @fa-var-film;
|
||||
@filter: @fa-var-filter;
|
||||
@fire: @fa-var-fire;
|
||||
@fire-extinguisher: @fa-var-fire-extinguisher;
|
||||
@firefox: @fa-var-firefox;
|
||||
@first-order: @fa-var-first-order;
|
||||
@flag: @fa-var-flag;
|
||||
@flag-checkered: @fa-var-flag-checkered;
|
||||
@flag-o: @fa-var-flag;
|
||||
@flash: @fa-var-bolt;
|
||||
@flask: @fa-var-flask;
|
||||
@flickr: @fa-var-flickr;
|
||||
@floppy-o: @fa-var-floppy-disk;
|
||||
@folder: @fa-var-folder;
|
||||
@folder-o: @fa-var-folder;
|
||||
@folder-open: @fa-var-folder-open;
|
||||
@folder-open-o: @fa-var-folder-open;
|
||||
@font: @fa-var-font;
|
||||
@font-awesome: @fa-var-font-awesome;
|
||||
@fonticons: @fa-var-fonticons;
|
||||
@fort-awesome: @fa-var-fort-awesome;
|
||||
@forumbee: @fa-var-forumbee;
|
||||
@forward: @fa-var-forward;
|
||||
@foursquare: @fa-var-foursquare;
|
||||
@free-code-camp: @fa-var-free-code-camp;
|
||||
@frown-o: @fa-var-frown;
|
||||
@futbol-o: @fa-var-futbol;
|
||||
@gamepad: @fa-var-gamepad;
|
||||
@gavel: @fa-var-gavel;
|
||||
@gbp: @fa-var-gbp;
|
||||
@ge: @fa-var-empire;
|
||||
@gear: @fa-var-gear;
|
||||
@gears: @fa-var-gears;
|
||||
@genderless: @fa-var-genderless;
|
||||
@get-pocket: @fa-var-get-pocket;
|
||||
@gg: @fa-var-gg;
|
||||
@gg-circle: @fa-var-gg-circle;
|
||||
@gift: @fa-var-gift;
|
||||
@git: @fa-var-git;
|
||||
@git-square: @fa-var-git-square;
|
||||
@github: @fa-var-github;
|
||||
@github-alt: @fa-var-github-alt;
|
||||
@github-square: @fa-var-github-square;
|
||||
@gitlab: @fa-var-gitlab;
|
||||
@gittip: @fa-var-gratipay;
|
||||
@glass: @fa-var-martini-glass-empty;
|
||||
@glide: @fa-var-glide;
|
||||
@glide-g: @fa-var-glide-g;
|
||||
@globe: @fa-var-globe;
|
||||
@google: @fa-var-google;
|
||||
@google-plus: @fa-var-google-plus;
|
||||
@google-plus-circle: @fa-var-google-plus;
|
||||
@google-plus-official: @fa-var-google-plus;
|
||||
@google-plus-square: @fa-var-google-plus-square;
|
||||
@google-wallet: @fa-var-google-wallet;
|
||||
@graduation-cap: @fa-var-graduation-cap;
|
||||
@gratipay: @fa-var-gratipay;
|
||||
@grav: @fa-var-grav;
|
||||
@group: @fa-var-users;
|
||||
@h-square: @fa-var-h-square;
|
||||
@hacker-news: @fa-var-hacker-news;
|
||||
@hand-grab-o: @fa-var-hand-back-fist;
|
||||
@hand-lizard-o: @fa-var-hand-lizard;
|
||||
@hand-o-down: @fa-var-hand-point-down;
|
||||
@hand-o-left: @fa-var-hand-point-left;
|
||||
@hand-o-right: @fa-var-hand-point-right;
|
||||
@hand-o-up: @fa-var-hand-point-up;
|
||||
@hand-paper-o: @fa-var-hand-paper;
|
||||
@hand-peace-o: @fa-var-hand-peace;
|
||||
@hand-pointer-o: @fa-var-hand-pointer;
|
||||
@hand-rock-o: @fa-var-hand-back-fist;
|
||||
@hand-scissors-o: @fa-var-hand-scissors;
|
||||
@hand-spock-o: @fa-var-hand-spock;
|
||||
@hand-stop-o: @fa-var-hand;
|
||||
@handshake-o: @fa-var-handshake;
|
||||
@hard-of-hearing: @fa-var-hard-of-hearing;
|
||||
@hashtag: @fa-var-hashtag;
|
||||
@hdd-o: @fa-var-hdd;
|
||||
@header: @fa-var-header;
|
||||
@headphones: @fa-var-headphones;
|
||||
@heart: @fa-var-heart;
|
||||
@heart-o: @fa-var-heart;
|
||||
@heartbeat: @fa-var-heartbeat;
|
||||
@history: @fa-var-history;
|
||||
@home: @fa-var-home;
|
||||
@hospital-o: @fa-var-hospital;
|
||||
@hotel: @fa-var-hotel;
|
||||
@hourglass: @fa-var-hourglass;
|
||||
@hourglass-1: @fa-var-hourglass-1;
|
||||
@hourglass-2: @fa-var-hourglass-2;
|
||||
@hourglass-3: @fa-var-hourglass-3;
|
||||
@hourglass-end: @fa-var-hourglass-end;
|
||||
@hourglass-half: @fa-var-hourglass-half;
|
||||
@hourglass-o: @fa-var-hourglass;
|
||||
@hourglass-start: @fa-var-hourglass-start;
|
||||
@houzz: @fa-var-houzz;
|
||||
@html5: @fa-var-html5;
|
||||
@i-cursor: @fa-var-i-cursor;
|
||||
@id-badge: @fa-var-id-badge;
|
||||
@id-card: @fa-var-id-card;
|
||||
@id-card-o: @fa-var-id-card;
|
||||
@ils: @fa-var-ils;
|
||||
@image: @fa-var-image;
|
||||
@imdb: @fa-var-imdb;
|
||||
@inbox: @fa-var-inbox;
|
||||
@indent: @fa-var-indent;
|
||||
@industry: @fa-var-industry;
|
||||
@info: @fa-var-info;
|
||||
@info-circle: @fa-var-info-circle;
|
||||
@inr: @fa-var-inr;
|
||||
@instagram: @fa-var-instagram;
|
||||
@institution: @fa-var-institution;
|
||||
@internet-explorer: @fa-var-internet-explorer;
|
||||
@intersex: @fa-var-mars-and-venus;
|
||||
@ioxhost: @fa-var-ioxhost;
|
||||
@italic: @fa-var-italic;
|
||||
@joomla: @fa-var-joomla;
|
||||
@jpy: @fa-var-jpy;
|
||||
@jsfiddle: @fa-var-jsfiddle;
|
||||
@key: @fa-var-key;
|
||||
@keyboard-o: @fa-var-keyboard;
|
||||
@krw: @fa-var-krw;
|
||||
@language: @fa-var-language;
|
||||
@laptop: @fa-var-laptop;
|
||||
@lastfm: @fa-var-lastfm;
|
||||
@lastfm-square: @fa-var-lastfm-square;
|
||||
@leaf: @fa-var-leaf;
|
||||
@leanpub: @fa-var-leanpub;
|
||||
@legal: @fa-var-legal;
|
||||
@lemon-o: @fa-var-lemon;
|
||||
@level-down: @fa-var-level-down;
|
||||
@level-up: @fa-var-level-up;
|
||||
@life-bouy: @fa-var-life-ring;
|
||||
@life-buoy: @fa-var-life-ring;
|
||||
@life-ring: @fa-var-life-ring;
|
||||
@life-saver: @fa-var-life-ring;
|
||||
@lightbulb-o: @fa-var-lightbulb;
|
||||
@line-chart: @fa-var-line-chart;
|
||||
@link: @fa-var-link;
|
||||
@linkedin: @fa-var-linkedin;
|
||||
@linkedin-square: @fa-var-linkedin;
|
||||
@linode: @fa-var-linode;
|
||||
@linux: @fa-var-linux;
|
||||
@list: @fa-var-list;
|
||||
@list-alt: @fa-var-list-alt;
|
||||
@list-ol: @fa-var-list-ol;
|
||||
@list-ul: @fa-var-list-ul;
|
||||
@location-arrow: @fa-var-location-arrow;
|
||||
@lock: @fa-var-lock;
|
||||
@long-arrow-down: @fa-var-long-arrow-down;
|
||||
@long-arrow-left: @fa-var-long-arrow-left;
|
||||
@long-arrow-right: @fa-var-long-arrow-right;
|
||||
@long-arrow-up: @fa-var-long-arrow-up;
|
||||
@low-vision: @fa-var-low-vision;
|
||||
@magic: @fa-var-magic;
|
||||
@magnet: @fa-var-magnet;
|
||||
@mail-forward: @fa-var-mail-forward;
|
||||
@mail-reply: @fa-var-mail-reply;
|
||||
@mail-reply-all: @fa-var-mail-reply-all;
|
||||
@male: @fa-var-male;
|
||||
@map: @fa-var-map;
|
||||
@map-marker: @fa-var-map-marker;
|
||||
@map-o: @fa-var-map;
|
||||
@map-pin: @fa-var-map-pin;
|
||||
@map-signs: @fa-var-map-signs;
|
||||
@mars: @fa-var-mars;
|
||||
@mars-double: @fa-var-mars-double;
|
||||
@mars-stroke: @fa-var-mars-stroke;
|
||||
@mars-stroke-h: @fa-var-mars-stroke-h;
|
||||
@mars-stroke-v: @fa-var-mars-stroke-v;
|
||||
@maxcdn: @fa-var-maxcdn;
|
||||
@medium: @fa-var-medium;
|
||||
@medkit: @fa-var-medkit;
|
||||
@meetup: @fa-var-meetup;
|
||||
@meh-o: @fa-var-meh;
|
||||
@mercury: @fa-var-mercury;
|
||||
@microchip: @fa-var-microchip;
|
||||
@microphone: @fa-var-microphone;
|
||||
@microphone-slash: @fa-var-microphone-slash;
|
||||
@minus: @fa-var-minus;
|
||||
@minus-circle: @fa-var-minus-circle;
|
||||
@minus-square: @fa-var-minus-square;
|
||||
@minus-square-o: @fa-var-minus-square;
|
||||
@mixcloud: @fa-var-mixcloud;
|
||||
@mobile: @fa-var-mobile;
|
||||
@mobile-phone: @fa-var-mobile-phone;
|
||||
@modx: @fa-var-modx;
|
||||
@money: @fa-var-money-bill-1;
|
||||
@moon-o: @fa-var-moon;
|
||||
@mortar-board: @fa-var-mortar-board;
|
||||
@motorcycle: @fa-var-motorcycle;
|
||||
@mouse-pointer: @fa-var-mouse-pointer;
|
||||
@music: @fa-var-music;
|
||||
@navicon: @fa-var-navicon;
|
||||
@neuter: @fa-var-neuter;
|
||||
@newspaper-o: @fa-var-newspaper;
|
||||
@object-group: @fa-var-object-group;
|
||||
@object-ungroup: @fa-var-object-ungroup;
|
||||
@odnoklassniki: @fa-var-odnoklassniki;
|
||||
@odnoklassniki-square: @fa-var-odnoklassniki-square;
|
||||
@opencart: @fa-var-opencart;
|
||||
@openid: @fa-var-openid;
|
||||
@opera: @fa-var-opera;
|
||||
@optin-monster: @fa-var-optin-monster;
|
||||
@outdent: @fa-var-outdent;
|
||||
@pagelines: @fa-var-pagelines;
|
||||
@paint-brush: @fa-var-paint-brush;
|
||||
@paper-plane: @fa-var-paper-plane;
|
||||
@paper-plane-o: @fa-var-paper-plane;
|
||||
@paperclip: @fa-var-paperclip;
|
||||
@paragraph: @fa-var-paragraph;
|
||||
@paste: @fa-var-paste;
|
||||
@pause: @fa-var-pause;
|
||||
@pause-circle: @fa-var-pause-circle;
|
||||
@pause-circle-o: @fa-var-pause-circle;
|
||||
@paw: @fa-var-paw;
|
||||
@paypal: @fa-var-paypal;
|
||||
@pencil: @fa-var-pencil;
|
||||
@pencil-square: @fa-var-pencil-square;
|
||||
@pencil-square-o: @fa-var-pencil-square;
|
||||
@percent: @fa-var-percent;
|
||||
@phone: @fa-var-phone;
|
||||
@phone-square: @fa-var-phone-square;
|
||||
@photo: @fa-var-image;
|
||||
@picture-o: @fa-var-image;
|
||||
@pie-chart: @fa-var-pie-chart;
|
||||
@pied-piper: @fa-var-pied-piper;
|
||||
@pied-piper-alt: @fa-var-pied-piper-alt;
|
||||
@pied-piper-pp: @fa-var-pied-piper-pp;
|
||||
@pinterest: @fa-var-pinterest;
|
||||
@pinterest-p: @fa-var-pinterest-p;
|
||||
@pinterest-square: @fa-var-pinterest-square;
|
||||
@plane: @fa-var-plane;
|
||||
@play: @fa-var-play;
|
||||
@play-circle: @fa-var-play-circle;
|
||||
@play-circle-o: @fa-var-play-circle;
|
||||
@plug: @fa-var-plug;
|
||||
@plus: @fa-var-plus;
|
||||
@plus-circle: @fa-var-plus-circle;
|
||||
@plus-square: @fa-var-plus-square;
|
||||
@plus-square-o: @fa-var-plus-square;
|
||||
@podcast: @fa-var-podcast;
|
||||
@power-off: @fa-var-power-off;
|
||||
@print: @fa-var-print;
|
||||
@product-hunt: @fa-var-product-hunt;
|
||||
@puzzle-piece: @fa-var-puzzle-piece;
|
||||
@qq: @fa-var-qq;
|
||||
@qrcode: @fa-var-qrcode;
|
||||
@question: @fa-var-question;
|
||||
@question-circle: @fa-var-question-circle;
|
||||
@question-circle-o: @fa-var-question-circle;
|
||||
@quora: @fa-var-quora;
|
||||
@quote-left: @fa-var-quote-left;
|
||||
@quote-right: @fa-var-quote-right;
|
||||
@ra: @fa-var-rebel;
|
||||
@random: @fa-var-random;
|
||||
@ravelry: @fa-var-ravelry;
|
||||
@rebel: @fa-var-rebel;
|
||||
@recycle: @fa-var-recycle;
|
||||
@reddit: @fa-var-reddit;
|
||||
@reddit-alien: @fa-var-reddit-alien;
|
||||
@reddit-square: @fa-var-reddit-square;
|
||||
@refresh: @fa-var-refresh;
|
||||
@registered: @fa-var-registered;
|
||||
@remove: @fa-var-remove;
|
||||
@renren: @fa-var-renren;
|
||||
@reorder: @fa-var-reorder;
|
||||
@repeat: @fa-var-repeat;
|
||||
@reply: @fa-var-reply;
|
||||
@reply-all: @fa-var-reply-all;
|
||||
@resistance: @fa-var-rebel;
|
||||
@retweet: @fa-var-retweet;
|
||||
@rmb: @fa-var-rmb;
|
||||
@road: @fa-var-road;
|
||||
@rocket: @fa-var-rocket;
|
||||
@rotate-left: @fa-var-rotate-left;
|
||||
@rotate-right: @fa-var-rotate-right;
|
||||
@rouble: @fa-var-rouble;
|
||||
@rss: @fa-var-rss;
|
||||
@rss-square: @fa-var-rss-square;
|
||||
@rub: @fa-var-rub;
|
||||
@ruble: @fa-var-ruble;
|
||||
@rupee: @fa-var-rupee;
|
||||
@s15: @fa-var-bath;
|
||||
@safari: @fa-var-safari;
|
||||
@save: @fa-var-save;
|
||||
@scissors: @fa-var-scissors;
|
||||
@scribd: @fa-var-scribd;
|
||||
@search: @fa-var-search;
|
||||
@search-minus: @fa-var-search-minus;
|
||||
@search-plus: @fa-var-search-plus;
|
||||
@sellsy: @fa-var-sellsy;
|
||||
@send: @fa-var-paper-plane;
|
||||
@send-o: @fa-var-paper-plane;
|
||||
@server: @fa-var-server;
|
||||
@share: @fa-var-share;
|
||||
@share-alt: @fa-var-share-alt;
|
||||
@share-alt-square: @fa-var-share-alt-square;
|
||||
@share-square: @fa-var-share-square;
|
||||
@share-square-o: @fa-var-share-square;
|
||||
@shekel: @fa-var-shekel;
|
||||
@sheqel: @fa-var-sheqel;
|
||||
@shield: @fa-var-shield;
|
||||
@ship: @fa-var-ship;
|
||||
@shirtsinbulk: @fa-var-shirtsinbulk;
|
||||
@shopping-bag: @fa-var-shopping-bag;
|
||||
@shopping-basket: @fa-var-shopping-basket;
|
||||
@shopping-cart: @fa-var-shopping-cart;
|
||||
@shower: @fa-var-shower;
|
||||
@sign-in: @fa-var-sign-in;
|
||||
@sign-language: @fa-var-sign-language;
|
||||
@sign-out: @fa-var-sign-out;
|
||||
@signal: @fa-var-signal;
|
||||
@signing: @fa-var-signing;
|
||||
@simplybuilt: @fa-var-simplybuilt;
|
||||
@sitemap: @fa-var-sitemap;
|
||||
@skyatlas: @fa-var-skyatlas;
|
||||
@skype: @fa-var-skype;
|
||||
@slack: @fa-var-slack;
|
||||
@sliders: @fa-var-sliders;
|
||||
@slideshare: @fa-var-slideshare;
|
||||
@smile-o: @fa-var-smile;
|
||||
@snapchat: @fa-var-snapchat;
|
||||
@snapchat-ghost: @fa-var-snapchat-ghost;
|
||||
@snapchat-square: @fa-var-snapchat-square;
|
||||
@snowflake-o: @fa-var-snowflake;
|
||||
@soccer-ball-o: @fa-var-soccer-ball;
|
||||
@sort: @fa-var-sort;
|
||||
@sort-alpha-asc: @fa-var-sort-alpha-asc;
|
||||
@sort-alpha-desc: @fa-var-sort-alpha-desc;
|
||||
@sort-amount-asc: @fa-var-sort-amount-asc;
|
||||
@sort-amount-desc: @fa-var-sort-amount-desc;
|
||||
@sort-asc: @fa-var-sort-asc;
|
||||
@sort-desc: @fa-var-sort-desc;
|
||||
@sort-down: @fa-var-sort-down;
|
||||
@sort-numeric-asc: @fa-var-sort-numeric-asc;
|
||||
@sort-numeric-desc: @fa-var-sort-numeric-desc;
|
||||
@sort-up: @fa-var-sort-up;
|
||||
@soundcloud: @fa-var-soundcloud;
|
||||
@space-shuttle: @fa-var-space-shuttle;
|
||||
@spinner: @fa-var-spinner;
|
||||
@spoon: @fa-var-spoon;
|
||||
@spotify: @fa-var-spotify;
|
||||
@square: @fa-var-square;
|
||||
@square-o: @fa-var-square;
|
||||
@stack-exchange: @fa-var-stack-exchange;
|
||||
@stack-overflow: @fa-var-stack-overflow;
|
||||
@star: @fa-var-star;
|
||||
@star-half: @fa-var-star-half;
|
||||
@star-half-empty: @fa-var-star-half-stroke;
|
||||
@star-half-full: @fa-var-star-half-stroke;
|
||||
@star-half-o: @fa-var-star-half;
|
||||
@star-o: @fa-var-star;
|
||||
@steam: @fa-var-steam;
|
||||
@steam-square: @fa-var-steam-square;
|
||||
@step-backward: @fa-var-step-backward;
|
||||
@step-forward: @fa-var-step-forward;
|
||||
@stethoscope: @fa-var-stethoscope;
|
||||
@sticky-note: @fa-var-sticky-note;
|
||||
@sticky-note-o: @fa-var-sticky-note;
|
||||
@stop: @fa-var-stop;
|
||||
@stop-circle: @fa-var-stop-circle;
|
||||
@stop-circle-o: @fa-var-stop-circle;
|
||||
@street-view: @fa-var-street-view;
|
||||
@strikethrough: @fa-var-strikethrough;
|
||||
@stumbleupon: @fa-var-stumbleupon;
|
||||
@stumbleupon-circle: @fa-var-stumbleupon-circle;
|
||||
@subscript: @fa-var-subscript;
|
||||
@subway: @fa-var-subway;
|
||||
@suitcase: @fa-var-suitcase;
|
||||
@sun-o: @fa-var-sun;
|
||||
@superpowers: @fa-var-superpowers;
|
||||
@superscript: @fa-var-superscript;
|
||||
@support: @fa-var-life-ring;
|
||||
@table: @fa-var-table;
|
||||
@tablet: @fa-var-tablet;
|
||||
@tachometer: @fa-var-tachometer;
|
||||
@tag: @fa-var-tag;
|
||||
@tags: @fa-var-tags;
|
||||
@tasks: @fa-var-tasks;
|
||||
@taxi: @fa-var-taxi;
|
||||
@telegram: @fa-var-telegram;
|
||||
@television: @fa-var-television;
|
||||
@tencent-weibo: @fa-var-tencent-weibo;
|
||||
@terminal: @fa-var-terminal;
|
||||
@text-height: @fa-var-text-height;
|
||||
@text-width: @fa-var-text-width;
|
||||
@th: @fa-var-th;
|
||||
@th-large: @fa-var-th-large;
|
||||
@th-list: @fa-var-th-list;
|
||||
@themeisle: @fa-var-themeisle;
|
||||
@thermometer: @fa-var-thermometer;
|
||||
@thermometer-0: @fa-var-thermometer-0;
|
||||
@thermometer-1: @fa-var-thermometer-1;
|
||||
@thermometer-2: @fa-var-thermometer-2;
|
||||
@thermometer-3: @fa-var-thermometer-3;
|
||||
@thermometer-4: @fa-var-thermometer-4;
|
||||
@thermometer-empty: @fa-var-thermometer-empty;
|
||||
@thermometer-full: @fa-var-thermometer-full;
|
||||
@thermometer-half: @fa-var-thermometer-half;
|
||||
@thermometer-quarter: @fa-var-thermometer-quarter;
|
||||
@thermometer-three-quarters: @fa-var-thermometer-three-quarters;
|
||||
@thumb-tack: @fa-var-thumb-tack;
|
||||
@thumbs-down: @fa-var-thumbs-down;
|
||||
@thumbs-o-down: @fa-var-thumbs-down;
|
||||
@thumbs-o-up: @fa-var-thumbs-up;
|
||||
@thumbs-up: @fa-var-thumbs-up;
|
||||
@ticket: @fa-var-ticket;
|
||||
@times: @fa-var-times;
|
||||
@times-circle: @fa-var-times-circle;
|
||||
@times-circle-o: @fa-var-times-circle;
|
||||
@times-rectangle: @fa-var-times-rectangle;
|
||||
@times-rectangle-o: @fa-var-times-rectangle;
|
||||
@tint: @fa-var-tint;
|
||||
@toggle-down: @fa-var-square-caret-down;
|
||||
@toggle-left: @fa-var-square-caret-left;
|
||||
@toggle-off: @fa-var-toggle-off;
|
||||
@toggle-on: @fa-var-toggle-on;
|
||||
@toggle-right: @fa-var-square-caret-right;
|
||||
@toggle-up: @fa-var-square-caret-up;
|
||||
@trademark: @fa-var-trademark;
|
||||
@train: @fa-var-train;
|
||||
@transgender: @fa-var-transgender;
|
||||
@transgender-alt: @fa-var-transgender-alt;
|
||||
@trash: @fa-var-trash;
|
||||
@trash-o: @fa-var-trash;
|
||||
@tree: @fa-var-tree;
|
||||
@trello: @fa-var-trello;
|
||||
@trophy: @fa-var-trophy;
|
||||
@truck: @fa-var-truck;
|
||||
@try: @fa-var-try;
|
||||
@tty: @fa-var-tty;
|
||||
@tumblr: @fa-var-tumblr;
|
||||
@tumblr-square: @fa-var-tumblr-square;
|
||||
@turkish-lira: @fa-var-turkish-lira;
|
||||
@tv: @fa-var-tv;
|
||||
@twitch: @fa-var-twitch;
|
||||
@twitter: @fa-var-twitter;
|
||||
@twitter-square: @fa-var-twitter-square;
|
||||
@umbrella: @fa-var-umbrella;
|
||||
@underline: @fa-var-underline;
|
||||
@undo: @fa-var-undo;
|
||||
@universal-access: @fa-var-universal-access;
|
||||
@university: @fa-var-university;
|
||||
@unlink: @fa-var-unlink;
|
||||
@unlock: @fa-var-unlock;
|
||||
@unlock-alt: @fa-var-unlock-alt;
|
||||
@unsorted: @fa-var-unsorted;
|
||||
@upload: @fa-var-upload;
|
||||
@usb: @fa-var-usb;
|
||||
@usd: @fa-var-usd;
|
||||
@user: @fa-var-user;
|
||||
@user-circle: @fa-var-user-circle;
|
||||
@user-circle-o: @fa-var-user-circle;
|
||||
@user-md: @fa-var-user-md;
|
||||
@user-o: @fa-var-user;
|
||||
@user-plus: @fa-var-user-plus;
|
||||
@user-secret: @fa-var-user-secret;
|
||||
@user-times: @fa-var-user-times;
|
||||
@users: @fa-var-users;
|
||||
@vcard: @fa-var-vcard;
|
||||
@vcard-o: @fa-var-vcard;
|
||||
@venus: @fa-var-venus;
|
||||
@venus-double: @fa-var-venus-double;
|
||||
@venus-mars: @fa-var-venus-mars;
|
||||
@viacoin: @fa-var-viacoin;
|
||||
@viadeo: @fa-var-viadeo;
|
||||
@viadeo-square: @fa-var-viadeo-square;
|
||||
@video-camera: @fa-var-video-camera;
|
||||
@vimeo: @fa-var-vimeo;
|
||||
@vimeo-square: @fa-var-vimeo-square;
|
||||
@vine: @fa-var-vine;
|
||||
@vk: @fa-var-vk;
|
||||
@volume-control-phone: @fa-var-volume-control-phone;
|
||||
@volume-down: @fa-var-volume-down;
|
||||
@volume-off: @fa-var-volume-off;
|
||||
@volume-up: @fa-var-volume-up;
|
||||
@warning: @fa-var-warning;
|
||||
@wechat: @fa-var-weixin;
|
||||
@weibo: @fa-var-weibo;
|
||||
@weixin: @fa-var-weixin;
|
||||
@whatsapp: @fa-var-whatsapp;
|
||||
@wheelchair: @fa-var-wheelchair;
|
||||
@wheelchair-alt: @fa-var-wheelchair-alt;
|
||||
@wifi: @fa-var-wifi;
|
||||
@wikipedia-w: @fa-var-wikipedia-w;
|
||||
@window-close: @fa-var-window-close;
|
||||
@window-close-o: @fa-var-window-close;
|
||||
@window-maximize: @fa-var-window-maximize;
|
||||
@window-minimize: @fa-var-window-minimize;
|
||||
@window-restore: @fa-var-window-restore;
|
||||
@windows: @fa-var-windows;
|
||||
@won: @fa-var-won;
|
||||
@wordpress: @fa-var-wordpress;
|
||||
@wpbeginner: @fa-var-wpbeginner;
|
||||
@wpexplorer: @fa-var-wpexplorer;
|
||||
@wpforms: @fa-var-wpforms;
|
||||
@wrench: @fa-var-wrench;
|
||||
@xing: @fa-var-xing;
|
||||
@xing-square: @fa-var-xing-square;
|
||||
@y-combinator: @fa-var-y-combinator;
|
||||
@y-combinator-square: @fa-var-y-combinator;
|
||||
@yahoo: @fa-var-yahoo;
|
||||
@yc: @fa-var-y-combinator;
|
||||
@yc-square: @fa-var-y-combinator;
|
||||
@yelp: @fa-var-yelp;
|
||||
@yen: @fa-var-yen;
|
||||
@yoast: @fa-var-yoast;
|
||||
@youtube: @fa-var-youtube;
|
||||
@youtube-play: @fa-var-youtube;
|
||||
@youtube-square: @fa-var-youtube;
|
||||
689
modules/system/assets/ui/less/inspector.less
Normal file
689
modules/system/assets/ui/less/inspector.less
Normal file
@@ -0,0 +1,689 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "popover.less";
|
||||
@import "tooltip.less";
|
||||
@import "checkbox.less";
|
||||
@import "select.less";
|
||||
|
||||
//
|
||||
// Inspector
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-inspector-bg: #f2f2f2;
|
||||
@color-inspector-value-bg: #ffffff;
|
||||
@color-inspector-active-bg: #ffffff;
|
||||
@color-inspector-text: #333333;
|
||||
@color-inspector-input-text: #385487;
|
||||
@color-inspector-grid: #c8cccd;
|
||||
@color-inspector-changed: #c03f31;
|
||||
|
||||
//
|
||||
// Inspector
|
||||
// --------------------------------------------------
|
||||
|
||||
.inspector-autocomplete-list() {
|
||||
background: white;
|
||||
font-size: 12px;
|
||||
z-index: @zindex-inspector;
|
||||
|
||||
li a {
|
||||
padding: 5px 12px;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-fields {
|
||||
min-width: 220px;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
.border-bottom-radius(2px);
|
||||
|
||||
td, th {
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
width: 50%;
|
||||
border-bottom: 1px solid @color-inspector-grid;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
color: @color-inspector-text;
|
||||
}
|
||||
|
||||
td {
|
||||
color: @color-inspector-input-text;
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
td, th { border-bottom: none; }
|
||||
|
||||
td {
|
||||
&, input[type=text] {
|
||||
.border-radius(0 0 2px 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.group {
|
||||
.user-select(none);
|
||||
|
||||
th {
|
||||
background: #e0e4e5;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
tr.invalid th {
|
||||
color: #c03f31!important;
|
||||
}
|
||||
|
||||
tr.control-group {
|
||||
.user-select(none);
|
||||
|
||||
th, td {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&.collapsed {display: none;}
|
||||
&.expanded {display: table-row;}
|
||||
}
|
||||
|
||||
&.has-groups {
|
||||
th {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
tr.grouped th {
|
||||
padding-left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-weight: 400;
|
||||
border-left: 1px solid @color-inspector-grid;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: @color-inspector-value-bg;
|
||||
|
||||
&.text {
|
||||
|
||||
input[type=text] {
|
||||
&::-webkit-input-placeholder {
|
||||
font-weight: normal!important;
|
||||
color: #b5babd;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
font-weight: normal!important;
|
||||
color: #b5babd;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
font-weight: normal!important;
|
||||
color: #b5babd;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
font-weight: normal!important;
|
||||
color: #b5babd;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: @color-inspector-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.autocomplete {
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
|
||||
.autocomplete-container {
|
||||
input[type=text] {
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
.inspector-autocomplete-list();
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
span {
|
||||
margin-top: -12px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.trigger-cell {
|
||||
padding: 0!important;
|
||||
|
||||
a.trigger {
|
||||
display: block;
|
||||
padding: 5px 12px 7px 12px;
|
||||
overflow: hidden;
|
||||
min-height: 29px;
|
||||
text-overflow: ellipsis;
|
||||
color: @color-inspector-text;
|
||||
text-decoration: none;
|
||||
|
||||
&.placeholder {
|
||||
color: #b5babd;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
background-color: @color-inspector-bg;
|
||||
|
||||
span {
|
||||
margin-top: -12px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
div.external-param-editor-container {
|
||||
position: relative;
|
||||
padding-right: 25px;
|
||||
|
||||
div.external-editor {
|
||||
bottom: 0;
|
||||
margin: -5px -12px;
|
||||
right: 30px;
|
||||
left: auto;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
|
||||
.transition(left 0.2s);
|
||||
.transform( ~'translateZ(0)');
|
||||
will-change: transform;
|
||||
|
||||
div.controls {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
color: #2b3e50;
|
||||
outline: none;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
top: 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-left: 30px;
|
||||
padding-right: 12px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.editor-visible {
|
||||
div.external-editor {
|
||||
div.controls {
|
||||
input {
|
||||
background: @color-inspector-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
div.external-param-editor-container {
|
||||
div.external-editor {
|
||||
div.controls {
|
||||
input {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown, &.trigger-cell {
|
||||
div.external-param-editor-container div.external-editor {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
white-space: nowrap;
|
||||
padding-right: 10px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
span.info {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 3px;
|
||||
font-size: 14px;
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
line-height: 80%;
|
||||
.opacity(0.4);
|
||||
&:before {
|
||||
margin-left: 3px;
|
||||
}
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.expandControl {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: -15px;
|
||||
top: 2px;
|
||||
text-indent: -100000em;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
&:after {
|
||||
.icon(@angle-right);
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: -2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded span:after {
|
||||
.icon(@angle-down);
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
div.custom-checkbox {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
.user-select(none);
|
||||
|
||||
label:before {
|
||||
top: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
|
||||
.select2-selection {
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
padding: 0 3px 0 12px;
|
||||
border: none !important;
|
||||
font-size: 12px;
|
||||
.border-radius(0) !important;
|
||||
.box-shadow(none) !important;
|
||||
|
||||
&.select2-default {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
> span {
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--open {
|
||||
.border-radius(0) !important;
|
||||
border: none !important;
|
||||
|
||||
.select2-selection {}
|
||||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding: 0 22px 0 0;
|
||||
color: @color-inspector-input-text;
|
||||
}
|
||||
}
|
||||
|
||||
tr.changed {
|
||||
td {
|
||||
font-weight: 600;
|
||||
input[type=text] {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div.control-popover {
|
||||
&.control-inspector {
|
||||
> div {
|
||||
background: @color-inspector-bg;
|
||||
border: none;
|
||||
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hero {
|
||||
.inspector-fields {
|
||||
th, td {
|
||||
padding: 9px 12px;
|
||||
font-weight: 600!important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
td {
|
||||
font-weight: 400!important;
|
||||
}
|
||||
|
||||
div.custom-select.select2-container .select2-selection {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inspector-temporary-placement {
|
||||
visibility: hidden;
|
||||
left: 0!important;
|
||||
top: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-columns-editor {
|
||||
min-height: 400px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #bdc3c7;
|
||||
|
||||
.items-column {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.inspector-wrapper {
|
||||
background: #f2f2f2; // Use @color-inspector-bg instead
|
||||
border-left: 2px solid #bdc3c7;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
html.gecko.mac {
|
||||
.scroll-wrapper.inspector-wrapper > div {
|
||||
margin-right: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-table-list {
|
||||
border-top: 1px solid #e2e2e2;
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
div.inspector-dictionary-container {
|
||||
border: 1px solid #e0e0e0;
|
||||
|
||||
.values {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
table.headers {
|
||||
width: 100%;
|
||||
border: none;
|
||||
|
||||
td {
|
||||
width: 50%;
|
||||
padding: 7px 5px;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid #e0e0e0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.inspector-dictionary-table {
|
||||
width: 100%;
|
||||
border: none;
|
||||
|
||||
tbody tr {
|
||||
td {
|
||||
width: 50%;
|
||||
padding: 0!important;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
|
||||
div {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
&.active div {
|
||||
border-color: #5fb6f5;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 7px 5px;
|
||||
.box-shadow(none);
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-header {
|
||||
background: @color-popover-head-bg;
|
||||
padding: 14px 16px;
|
||||
position: relative;
|
||||
color: @color-popover-head-text;
|
||||
border-bottom: 2px solid @color-popover-border;
|
||||
|
||||
h3 {
|
||||
font-size: @font-size-base;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-right: 15px;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: @font-size-base - 2;
|
||||
font-weight: normal;
|
||||
margin: 5px 0 0 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
span, a {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
float: none;
|
||||
color: @close-color;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
|
||||
.opacity(0.4);
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
color: @close-color;
|
||||
}
|
||||
}
|
||||
|
||||
.detach {
|
||||
right: 26px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.close {
|
||||
right: 11px;
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-container {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-scrollpad {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-field-comment {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul.autocomplete.dropdown-menu.inspector-autocomplete {
|
||||
.inspector-autocomplete-list();
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
&.ocInspectorDropdown {
|
||||
font-size: 12px;
|
||||
.border-radius(0) !important;
|
||||
border: none !important;
|
||||
|
||||
> .select2-results {
|
||||
> .select2-results__options {
|
||||
font-size: 12px;
|
||||
}
|
||||
> li > div {
|
||||
padding: 5px 12px 5px;
|
||||
}
|
||||
|
||||
li.select2-no-results {
|
||||
padding: 5px 12px 5px;
|
||||
}
|
||||
|
||||
li > i, li > img {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
min-height: 26px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #b2b9be;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
.icon(@search);
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
input.select2-search__field {
|
||||
min-height: 26px;
|
||||
background: transparent !important;
|
||||
font-size: @input-font-size - 1;
|
||||
padding-left: 4px;
|
||||
padding-right: 20px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
233
modules/system/assets/ui/less/list.base.less
Normal file
233
modules/system/assets/ui/less/list.base.less
Normal file
@@ -0,0 +1,233 @@
|
||||
//
|
||||
// Tables
|
||||
// --------------------------------------------------
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
background-color: @table-bg;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Baseline styles
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: @line-height-computed;
|
||||
border-collapse: separate;
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Condensed table w/ half padding
|
||||
|
||||
.table-condensed {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-condensed-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bordered version
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
634
modules/system/assets/ui/less/list.less
Normal file
634
modules/system/assets/ui/less/list.less
Normal file
@@ -0,0 +1,634 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Lists
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "list.rowlink.less";
|
||||
@import "list.base.less";
|
||||
|
||||
//
|
||||
// List Data Table
|
||||
//
|
||||
|
||||
table.table.data {
|
||||
.list-head-icon(@icon) {
|
||||
> span, > a {
|
||||
&:after {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
vertical-align: text-top;
|
||||
.opacity(.4);
|
||||
.icon(@icon);
|
||||
}
|
||||
&:hover:after { .opacity(.8); }
|
||||
}
|
||||
}
|
||||
|
||||
.table-totals {
|
||||
background-color: #f2f2f2;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
color: @color-list-text-head;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
thead .table-totals span {
|
||||
text-align: center;
|
||||
padding: 6.5px 7.5px;
|
||||
}
|
||||
tfoot .table-totals {
|
||||
td {
|
||||
border-top: 2px solid @color-list-border;
|
||||
}
|
||||
span {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
font-size: @font-size-base - 1;
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
|
||||
&.no-offset-bottom {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: @color-list-head-bg;
|
||||
|
||||
td, th {
|
||||
border-width: 1px;
|
||||
border-top: 1px solid @color-list-border !important;
|
||||
border-bottom: 2px solid @color-list-border !important;
|
||||
border-color: @color-list-border;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-base - 3;
|
||||
white-space: nowrap;
|
||||
|
||||
> a, > span {
|
||||
display: block;
|
||||
padding: 13px 15px;
|
||||
color: @color-list-text-head;
|
||||
text-decoration: none;
|
||||
&:hover { color: @color-list-text-active; }
|
||||
}
|
||||
|
||||
&.sortable { .list-head-icon(@angle-right); }
|
||||
&.sort-desc { .list-head-icon(@angle-down); }
|
||||
&.sort-asc { .list-head-icon(@angle-up); }
|
||||
|
||||
&.active {
|
||||
background-color: inherit;
|
||||
> span, > a {
|
||||
&:after {
|
||||
color: @color-list-active-sort;
|
||||
.opacity(1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr th:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
tr th:last-child a {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.list-checkbox .custom-checkbox {
|
||||
top: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:nth-child(even) {
|
||||
td, th { background-color: @color-list-accent; }
|
||||
}
|
||||
td, th {
|
||||
padding: 12px 15px;
|
||||
color: @color-list-text;
|
||||
border-top: 2px solid white;
|
||||
|
||||
a:not(.btn) {
|
||||
color: @color-list-text;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.progress {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
height:var(--progress-height, 18px);
|
||||
margin-bottom: 0;
|
||||
background-color: @color-list-progress-bg;
|
||||
.border-radius(0);
|
||||
.box-shadow(0 0 1px darken(@color-list-border, 50%));
|
||||
|
||||
div.bar {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: -11px;
|
||||
bottom: -11px;
|
||||
background: @color-list-progress-bg;
|
||||
.opacity(0.3);
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
th, td {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
th, td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tr td:first-child {
|
||||
border-left: 3px solid transparent;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
tr.active td {
|
||||
color: @color-list-text-active;
|
||||
|
||||
&:first-child {
|
||||
border-left: 3px solid @color-list-stripe-active;
|
||||
}
|
||||
}
|
||||
|
||||
tr.rowlink:not(.nolink):hover td, tr:not(.no-data).selected td {
|
||||
background: @color-list-hover-bg !important;
|
||||
color: @highlight-hover-text;
|
||||
|
||||
a:not(.btn), span, i[class^="icon-"] {
|
||||
color: @highlight-hover-text;
|
||||
}
|
||||
|
||||
div.progress {
|
||||
background-color: lighten(@color-list-hover-bg, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
tr.rowlink:not(.nolink):active td {
|
||||
background: @color-list-active-bg !important;
|
||||
color: @color-list-active-text;
|
||||
}
|
||||
|
||||
tr.hidden {
|
||||
td, th, td a, th a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
tr.strike {
|
||||
td, th, td a, th a {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
tr.frozen {
|
||||
td, th, td a, th a {
|
||||
color: #337ab7;
|
||||
}
|
||||
}
|
||||
|
||||
tr.processing {
|
||||
td, th, td a, th a {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
tr.negative {
|
||||
td, th, td a, th a {
|
||||
color: #b2341c;
|
||||
}
|
||||
}
|
||||
|
||||
tr.positive {
|
||||
td, th, td a, th a {
|
||||
color: #278731;
|
||||
}
|
||||
}
|
||||
|
||||
tr.disabled, tr.deleted {
|
||||
td, th, td a, th a {
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
tr.new, tr.important {
|
||||
td, th, td a, th a {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
tr.safe, tr.special {
|
||||
td, th, td a, th a {
|
||||
color: #98a7a8;
|
||||
}
|
||||
}
|
||||
|
||||
td.column-break-word {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// Requires "max-width" with px value
|
||||
td.column-single-line {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.column-slim {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
td.column-compact {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td.column-button {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&.icons {
|
||||
td i[class^="icon-"] {
|
||||
display: inline-block;
|
||||
margin-right: 7px;
|
||||
font-size: 15px;
|
||||
color: #95a5a6;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
.user-select(none);
|
||||
}
|
||||
}
|
||||
|
||||
&.no-active-indicator tbody {
|
||||
tr td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
a {
|
||||
color: @color-list-text;
|
||||
text-decoration: none;
|
||||
}
|
||||
td, th {
|
||||
border-color: @color-list-border;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
th.list-cell-type-switch,
|
||||
td.list-cell-type-switch {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th.list-cell-type-number,
|
||||
td.list-cell-type-number {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
th.list-cell-align-left,
|
||||
td.list-cell-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th.list-cell-align-right,
|
||||
td.list-cell-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
th.list-cell-align-center,
|
||||
td.list-cell-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
.list-badge {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 0 5px 0 0;
|
||||
padding: 1px 0 0 0;
|
||||
font-size: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
border-radius: @border-radius-base;
|
||||
color: #fff;
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&.badge-default {
|
||||
background: @gray-light;
|
||||
}
|
||||
|
||||
&.badge-primary {
|
||||
background: @brand-primary;
|
||||
}
|
||||
|
||||
&.badge-success {
|
||||
background: @brand-success;
|
||||
}
|
||||
|
||||
&.badge-info {
|
||||
background: @brand-info;
|
||||
}
|
||||
|
||||
&.badge-warning {
|
||||
background: @brand-warning;
|
||||
}
|
||||
|
||||
&.badge-danger {
|
||||
background: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Checkbox
|
||||
//
|
||||
|
||||
.list-checkbox {
|
||||
width: 52px;
|
||||
vertical-align: top;
|
||||
border-right: 1px solid @color-list-border-light;
|
||||
.checkbox {
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.custom-checkbox {
|
||||
position: relative;
|
||||
top: -14px;
|
||||
left: -2px;
|
||||
label {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr td.list-checkbox {
|
||||
padding-left: (@padding-standard - 3); // Offset the border
|
||||
padding-right: (@padding-standard - 17); // Offset the checkbox padding
|
||||
}
|
||||
|
||||
thead tr th.list-checkbox {
|
||||
padding: 18px 0 0 @padding-standard;
|
||||
}
|
||||
|
||||
//
|
||||
// Trees
|
||||
//
|
||||
|
||||
.list-tree {
|
||||
width: 10px;
|
||||
padding: 0;
|
||||
padding-left: 0 !important;
|
||||
vertical-align: middle;
|
||||
|
||||
a.list-expand-collapse {
|
||||
padding: 5px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
text-decoration: none !important;
|
||||
color: @color-list-text-tree;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree levels 1 - 10
|
||||
.makeTreeLevel(@count) {
|
||||
tr.list-tree-level-@{count} {
|
||||
a.list-expand-collapse { left: 10px + (10 * @count); }
|
||||
td.list-cell-index-1 { padding-left: 15px + (10 * @count); }
|
||||
}
|
||||
}
|
||||
|
||||
.makeTreeLevel(0);
|
||||
.makeTreeLevel(1);
|
||||
.makeTreeLevel(2);
|
||||
.makeTreeLevel(3);
|
||||
.makeTreeLevel(4);
|
||||
.makeTreeLevel(5);
|
||||
.makeTreeLevel(6);
|
||||
.makeTreeLevel(7);
|
||||
.makeTreeLevel(8);
|
||||
.makeTreeLevel(9);
|
||||
.makeTreeLevel(10);
|
||||
}
|
||||
|
||||
//
|
||||
// List containers
|
||||
//
|
||||
|
||||
.list-preview {
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
border: 1px solid @color-list-border;
|
||||
|
||||
.list-header:first-child {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.control-list:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control-list:last-child > table {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// List to sit flush to the element above (no toolbar)
|
||||
.list-flush {
|
||||
table.table.data {
|
||||
thead tr th {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List with sidebar
|
||||
.list-with-sidebar {
|
||||
table.table.data {
|
||||
border-left: 1px solid @color-list-border;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// List control
|
||||
//
|
||||
|
||||
.control-list {
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
p.no-data {
|
||||
padding: 18px 20px;
|
||||
margin: 0 20px;
|
||||
color: @color-list-norecords-text;
|
||||
font-size: @font-size-base - 1;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
.border-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
table.table.data {
|
||||
margin-bottom: 0;
|
||||
|
||||
.list-setup {
|
||||
width: 48px;
|
||||
a {
|
||||
display: block;
|
||||
color: #000000;
|
||||
&:before {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
.icon(@list-ul);
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
vertical-align: baseline;
|
||||
.opacity(.6);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
.opacity(1);
|
||||
color: @color-list-hover-bg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
background-color: @color-list-header-bg;
|
||||
padding: 0 @padding-standard 1px @padding-standard;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
color: @color-status-list-text;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-footer {
|
||||
padding: 10px 15px;
|
||||
|
||||
a {
|
||||
color: @color-list-text;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.list-pagination {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
padding-top: 10px;
|
||||
overflow: hidden; /* clearfix */
|
||||
|
||||
.loading-indicator {
|
||||
div {
|
||||
margin-left: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-widget {
|
||||
.table-container {
|
||||
margin: -15px;
|
||||
|
||||
table.table.data {
|
||||
margin-bottom: 0;
|
||||
|
||||
thead tr {
|
||||
th {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:nth-child(even) {
|
||||
td, th { background-color: transparent; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Scrollable list control
|
||||
//
|
||||
|
||||
.list-scrollable-container {
|
||||
touch-action: auto;
|
||||
position: relative;
|
||||
|
||||
.horizontal-scroll-indicators(@color-list-text-head);
|
||||
|
||||
&:after, &:before {
|
||||
margin-top: 0;
|
||||
height: 40px;
|
||||
padding: 13px 10px;
|
||||
background: #fff;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
> .list-scrollable {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.scroll-after th a,
|
||||
&.scroll-before th a {
|
||||
cursor: grab;
|
||||
}
|
||||
}
|
||||
27
modules/system/assets/ui/less/list.mixins.less
Normal file
27
modules/system/assets/ui/less/list.mixins.less
Normal file
@@ -0,0 +1,27 @@
|
||||
// Tables
|
||||
// -------------------------
|
||||
.table-row-variant(@state; @background) {
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
.table > thead > tr,
|
||||
.table > tbody > tr,
|
||||
.table > tfoot > tr {
|
||||
> td.@{state},
|
||||
> th.@{state},
|
||||
&.@{state} > td,
|
||||
&.@{state} > th {
|
||||
background-color: @background;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for `.table-hover`
|
||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||
.table-hover > tbody > tr {
|
||||
> td.@{state}:hover,
|
||||
> th.@{state}:hover,
|
||||
&.@{state}:hover > td,
|
||||
&.@{state}:hover > th {
|
||||
background-color: darken(@background, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
20
modules/system/assets/ui/less/list.rowlink.less
Normal file
20
modules/system/assets/ui/less/list.rowlink.less
Normal file
@@ -0,0 +1,20 @@
|
||||
// Rowlink.less
|
||||
// CSS for rowlink plugin
|
||||
// ----------------------
|
||||
|
||||
tr.rowlink:not(.nolink) td {
|
||||
cursor: pointer;
|
||||
&.nolink {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.table tbody tr.rowlink:hover td {
|
||||
background-color: @table-bg-hover;
|
||||
}
|
||||
|
||||
a.rowlink {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
42
modules/system/assets/ui/less/list.variables.less
Normal file
42
modules/system/assets/ui/less/list.variables.less
Normal file
@@ -0,0 +1,42 @@
|
||||
//== Tables
|
||||
//
|
||||
//## Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
@table-cell-padding: 8px;
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
@table-bg: transparent;
|
||||
@table-bg-accent: #f9f9f9;
|
||||
@table-bg-hover: #f5f5f5;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
@table-border-color: #ddd;
|
||||
|
||||
@color-list-active: #dddddd;
|
||||
@color-list-hover: #dddddd;
|
||||
@color-list-active-border: @brand-secondary;
|
||||
@color-list-arrow: #cfcfcf;
|
||||
@color-list-icon: #a1aab1;
|
||||
@color-list-parent-bg: #ffffff;
|
||||
@color-list-nav-arrow: @brand-primary;
|
||||
@color-list-header-bg: transparent;
|
||||
@color-list-head-bg: #ffffff;
|
||||
@color-list-progress-bg: @brand-secondary;
|
||||
@color-list-border: #D4D8DA;
|
||||
@color-list-border-light: #eeeeee;
|
||||
@color-list-text-head: #666666;
|
||||
@color-list-text: #666666;
|
||||
@color-list-text-active: #000000;
|
||||
@color-list-text-tree: #999999;
|
||||
@color-list-stripe-active: #ff9933;
|
||||
@color-list-accent: #ECF0F1;
|
||||
@color-list-norecords-text: #555555;
|
||||
@color-list-hover-bg: @highlight-hover-bg;
|
||||
@color-list-hover-text: @highlight-hover-text;
|
||||
@color-list-active-bg: @highlight-active-bg;
|
||||
@color-list-active-text: @highlight-active-text;
|
||||
@color-list-active-sort: #c63e26;
|
||||
@color-list-grid: #E4E7E8;
|
||||
@color-list-progress-bg: #F5F5F5;
|
||||
|
||||
@color-status-list-text: #7e8c8d;
|
||||
338
modules/system/assets/ui/less/loader.less
Normal file
338
modules/system/assets/ui/less/loader.less
Normal file
@@ -0,0 +1,338 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Loading indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-loading-indicator-text: #999999;
|
||||
@color-stripe-loader: @brand-accent;
|
||||
@loader-image-path: @image-path;
|
||||
|
||||
.loading-indicator {
|
||||
padding: 20px 20px 20px 60px;
|
||||
color: @color-loading-indicator-text;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background: @body-bg;
|
||||
text-align: left;
|
||||
z-index: @zindex-loader;
|
||||
|
||||
> span {
|
||||
background: transparent url('@{loader-image-path}/loader.gif') no-repeat 0 50%;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
left: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-indicator-container {
|
||||
position: relative;
|
||||
min-height: 40px;
|
||||
|
||||
.loading-indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 0;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.65em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.cssanimations {
|
||||
.loading-indicator > span {
|
||||
background-image: url('@{loader-image-path}/loader-transparent.svg');
|
||||
background-size: 35px 35px;
|
||||
background-position: 50% 50%;
|
||||
.animation(spin 1s linear infinite);
|
||||
}
|
||||
|
||||
.loading-indicator.is-opaque,
|
||||
.loading-indicator-container.is-opaque .loading-indicator {
|
||||
> span {
|
||||
background-image: url('@{loader-image-path}/loader.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
.loading-indicator-container.size-small {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.loading-indicator.size-small,
|
||||
.loading-indicator-container.size-small .loading-indicator {
|
||||
padding: 16px 16px 16px 30px;
|
||||
font-size: 11px;
|
||||
> span {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
html.cssanimations {
|
||||
.loading-indicator.size-small,
|
||||
.loading-indicator-container.size-small .loading-indicator {
|
||||
> span {
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Centered
|
||||
|
||||
.loading-indicator.indicator-center,
|
||||
.loading-indicator-container.indicator-center .loading-indicator {
|
||||
padding: 20px;
|
||||
|
||||
> span {
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
> div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Inset
|
||||
|
||||
.loading-indicator.indicator-inset,
|
||||
.loading-indicator-container.indicator-inset .loading-indicator {
|
||||
padding-left: 80px;
|
||||
|
||||
> span {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Form fields
|
||||
|
||||
.loading-indicator-container.size-form-field,
|
||||
.loading-indicator-container.size-input-text {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.loading-indicator-container.size-form-field .loading-indicator,
|
||||
.loading-indicator-container.size-input-text .loading-indicator {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
> span {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
left: auto;
|
||||
right: 7px;
|
||||
top: 6px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-size: 23px 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-indicator-container.size-form-field .loading-indicator > span {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
//
|
||||
// Cursor loading indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
html.cssanimations {
|
||||
.cursor-loading-indicator {
|
||||
background: transparent url('@{loader-image-path}/loader-transparent.svg') no-repeat 50% 50%;
|
||||
.animation(spin 1s linear infinite);
|
||||
background-size: 20px 20px;
|
||||
position: fixed;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Bar loading indicator
|
||||
//
|
||||
// Usage:
|
||||
// <div class="progress bar-loading-indicator">
|
||||
// <div class="progress-bar" role="progressbar"></div>
|
||||
// </div>
|
||||
//
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-loading-indicator {
|
||||
.transition(opacity .4s linear);
|
||||
|
||||
.progress-bar {
|
||||
.animation(infinite-loader 90s ease-in forwards);
|
||||
.transition-duration(0s);
|
||||
}
|
||||
|
||||
&.bar-loaded {
|
||||
.opacity(0);
|
||||
.transition-delay(.3s);
|
||||
|
||||
.progress-bar {
|
||||
width: 100% !important;
|
||||
.transition(width .3s linear);
|
||||
.animation(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Stripe loading indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
@stripe-loader-height: 4px;
|
||||
.stripe-loading-indicator {
|
||||
|
||||
height: @stripe-loader-height;
|
||||
background: transparent;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: @zindex-flashmessage;
|
||||
|
||||
.stripe, .stripe-loaded {
|
||||
height: @stripe-loader-height;
|
||||
display: block;
|
||||
background: @color-stripe-loader;
|
||||
position: absolute;
|
||||
.box-shadow(~"inset 0 1px 1px -1px #FFF, inset 0 -1px 1px -1px #FFF");
|
||||
}
|
||||
|
||||
.stripe {
|
||||
width: 100%;
|
||||
.animation(infinite-loader 60s linear);
|
||||
}
|
||||
|
||||
.stripe-loaded {
|
||||
width: 0;
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
.opacity(0);
|
||||
.transition(opacity .4s linear);
|
||||
.transition-delay(.3s);
|
||||
.stripe-loaded {
|
||||
.opacity(1);
|
||||
.transition(width .3s linear);
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Infinite loading animation
|
||||
// --------------------------------------------------
|
||||
|
||||
@startCount: 1;
|
||||
@startVal: 28%;
|
||||
@start: 0;
|
||||
.infinite-class (@index, @val, @count) when (@index = 0) {
|
||||
@tmpSelector: ~"@{index}%";
|
||||
@{tmpSelector} { width: 0%; }
|
||||
.infinite-class(@index + 10, @val + (@val / (@count * 2)), @count + 1);
|
||||
}
|
||||
.infinite-class (@index, @val, @count) when (@index < 101) and (@index > 9) {
|
||||
@tmpSelector: ~"@{index}%";
|
||||
@{tmpSelector} { width: @val; }
|
||||
.infinite-class(@index + 10, @val + (@val / @count), @count * 2);
|
||||
}
|
||||
|
||||
@-moz-keyframes infinite-loader {
|
||||
.infinite-class(@start, @startVal, @startCount);
|
||||
}
|
||||
@-webkit-keyframes infinite-loader {
|
||||
.infinite-class(@start, @startVal, @startCount);
|
||||
}
|
||||
@-o-keyframes infinite-loader {
|
||||
.infinite-class(@start, @startVal, @startCount);
|
||||
}
|
||||
@-ms-keyframes infinite-loader {
|
||||
.infinite-class(@start, @startVal, @startCount);
|
||||
}
|
||||
@keyframes infinite-loader {
|
||||
.infinite-class(@start, @startVal, @startCount);
|
||||
}
|
||||
|
||||
//
|
||||
// Spin animation
|
||||
// --------------------------------------------------
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(359deg); }
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(359deg); }
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(359deg); }
|
||||
}
|
||||
@-ms-keyframes spin {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(359deg); }
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(359deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes rspin {
|
||||
0% { -moz-transform: rotate(359deg); }
|
||||
100% { -moz-transform: rotate(0deg); }
|
||||
}
|
||||
@-webkit-keyframes rspin {
|
||||
0% { -webkit-transform: rotate(359deg); }
|
||||
100% { -webkit-transform: rotate(0deg); }
|
||||
}
|
||||
@-o-keyframes rspin {
|
||||
0% { -o-transform: rotate(359deg); }
|
||||
100% { -o-transform: rotate(0deg); }
|
||||
}
|
||||
@-ms-keyframes rspin {
|
||||
0% { -ms-transform: rotate(359deg); }
|
||||
100% { -ms-transform: rotate(0deg); }
|
||||
}
|
||||
@keyframes rspin {
|
||||
0% { transform: rotate(359deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
117
modules/system/assets/ui/less/pagination.less
Normal file
117
modules/system/assets/ui/less/pagination.less
Normal file
@@ -0,0 +1,117 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Pagination
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-pagination-icon: #666666;
|
||||
@color-pagination-hover: @link-color;
|
||||
@color-pagination-inactive: #b6b6b6;
|
||||
@color-pagination: #98a7a8;
|
||||
|
||||
//
|
||||
// Pagination
|
||||
// --------------------------------------------------
|
||||
|
||||
.control-pagination {
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.page-iteration {
|
||||
margin-right: 4px;
|
||||
font-size: @font-size-base - 1;
|
||||
color: @color-pagination;
|
||||
display: block;
|
||||
@media (min-width: @screen-sm-min) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Page selector
|
||||
//
|
||||
|
||||
select {
|
||||
width: 50px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
select, .select2-container {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.select2-container {
|
||||
min-width: 50px;
|
||||
vertical-align: bottom;
|
||||
bottom: 2px;
|
||||
|
||||
.select2-selection {
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
padding: 0 30px 0 10px;
|
||||
border: none !important;
|
||||
font-size: 12px;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.border-radius(0) !important;
|
||||
.box-shadow(none) !important;
|
||||
|
||||
&.select2-default {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Next and previous
|
||||
//
|
||||
|
||||
.page-next, .page-back, .page-last, .page-first {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
&:before {
|
||||
color: @color-pagination-icon;
|
||||
font-size: 19px;
|
||||
line-height: 19px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
a.page-next, a.page-back, a.page-last, a.page-first {
|
||||
&:hover:before {
|
||||
color: @color-pagination-hover;
|
||||
}
|
||||
}
|
||||
span.page-next, span.page-back, span.page-last, span.page-first {
|
||||
&:before {
|
||||
color: @color-pagination-inactive;
|
||||
}
|
||||
}
|
||||
.page-next {
|
||||
padding-left: 6px;
|
||||
}
|
||||
.page-back {
|
||||
padding-right: 6px;
|
||||
}
|
||||
.page-last {
|
||||
padding-left: 6px;
|
||||
}
|
||||
.page-first {
|
||||
padding-right: 6px;
|
||||
}
|
||||
.page-next:before { .icon(@angle-right); }
|
||||
.page-back:before { .icon(@angle-left); }
|
||||
.page-last:before { .icon(@angle-double-right); }
|
||||
.page-first:before { .icon(@angle-double-left); }
|
||||
}
|
||||
317
modules/system/assets/ui/less/popover.less
Normal file
317
modules/system/assets/ui/less/popover.less
Normal file
@@ -0,0 +1,317 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "dropdown.less";
|
||||
@import "icon.close.less";
|
||||
|
||||
//
|
||||
// Popover
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-popover-bg: #ffffff;
|
||||
@color-popover-border: rgba(0,0,0,.15);
|
||||
@color-popover-head-bg: #f9f9f9;
|
||||
@color-popover-head-text: #2a3e51;
|
||||
@color-popover-danger-bg: @brand-danger;
|
||||
|
||||
div.control-popover {
|
||||
position: absolute;
|
||||
background-clip: content-box;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: @zindex-popover;
|
||||
visibility: hidden;
|
||||
|
||||
&.in, &.fade {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.fade {
|
||||
& > div {
|
||||
.opacity(0);
|
||||
.transition(~'all 0.3s, width 0s');
|
||||
.transform(~'scale(0.7)');
|
||||
}
|
||||
}
|
||||
|
||||
&.fade.in {
|
||||
& > div {
|
||||
.opacity(1);
|
||||
.transform( ~'scale(1)');
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
background: @color-popover-bg;
|
||||
.box-shadow(@overlay-box-shadow);
|
||||
.border-top-radius(5px);
|
||||
.border-bottom-radius(2px);
|
||||
|
||||
&:after, &:before {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:after { z-index: @zindex-popover + 1; }
|
||||
&:before { z-index: @zindex-popover; }
|
||||
}
|
||||
|
||||
&.placement-bottom > div {
|
||||
&:after {
|
||||
.triangle(up, 15px, 8px, @color-popover-bg);
|
||||
left: 15px;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.triangle(up, 17px, 9px, @color-popover-border);
|
||||
left: 14px;
|
||||
top: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
&.placement-top > div {
|
||||
&:after {
|
||||
.triangle(down, 15px, 8px, @color-popover-bg);
|
||||
left: 15px;
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.triangle(down, 17px, 9px, @color-popover-border);
|
||||
left: 14px;
|
||||
bottom: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
&.placement-left > div {
|
||||
&:after {
|
||||
.triangle(right, 8px, 15px, @color-popover-bg);
|
||||
right: -8px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.triangle(right, 9px, 17px, @color-popover-border);
|
||||
right: -9px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.placement-right > div {
|
||||
&:after {
|
||||
.triangle(left, 8px, 15px, @color-popover-bg);
|
||||
left: -8px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.triangle(left, 9px, 17px, @color-popover-border);
|
||||
left: -9px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
div.popover-body {
|
||||
padding: 15px;
|
||||
|
||||
&.form-container {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.popover-footer {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.popover-head {
|
||||
background: @color-popover-head-bg;
|
||||
padding: 14px 16px;
|
||||
position: relative;
|
||||
color: @color-popover-head-text;
|
||||
.border-top-radius(2px);
|
||||
border-bottom: 2px solid @color-popover-border;
|
||||
|
||||
&:before {
|
||||
z-index: @zindex-popover + 2;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: @font-size-base;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-right: 15px;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: @font-size-base - 2;
|
||||
font-weight: normal;
|
||||
margin: 5px 0 0 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
float: none;
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
top: 12px;
|
||||
color: @color-popover-head-text;
|
||||
outline: none;
|
||||
.opacity(0.4);
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-move-to-container {
|
||||
.opacity(0.4);
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 26px;
|
||||
float: none;
|
||||
color: @close-color;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
line-height: 17px;
|
||||
|
||||
&:hover {
|
||||
.opacity(1);
|
||||
color: @close-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.transform(~'rotate(270deg)');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.placement-bottom .popover-head:before {
|
||||
.triangle(up, 15px, 8px, @color-popover-head-bg);
|
||||
left: 15px;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
&.placement-left .popover-head:before {
|
||||
.triangle(right, 8px, 15px, @color-popover-head-bg);
|
||||
right: -8px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
&.placement-right .popover-head:before {
|
||||
.triangle(left, 8px, 15px, @color-popover-head-bg);
|
||||
left: -8px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
&.popover-danger {
|
||||
> div {
|
||||
color: #fff;
|
||||
background-color: @color-popover-danger-bg;
|
||||
}
|
||||
|
||||
&.placement-bottom {
|
||||
> div:after, .popover-head:before {
|
||||
.triangle(up, 15px, 8px, @color-popover-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.placement-top {
|
||||
> div:after, .popover-head:before {
|
||||
.triangle(down, 15px, 8px, @color-popover-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.placement-left {
|
||||
> div:after, .popover-head:before {
|
||||
.triangle(right, 8px, 15px, @color-popover-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.placement-right {
|
||||
> div:after, .popover-head:before {
|
||||
.triangle(left, 8px, 15px, @color-popover-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.popover-head {
|
||||
color: #fff;
|
||||
background-color: @color-popover-danger-bg;
|
||||
border-bottom: 2px solid rgba(255,255,255,.15);
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.popover-fixed-height {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-highlight {
|
||||
position: relative;
|
||||
z-index: (@zindex-popover - 2) !important;
|
||||
&:hover, &:active, &:focus {
|
||||
z-index: (@zindex-popover - 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.popover-overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @overlay-background;
|
||||
z-index: @zindex-popover - 3;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
body.popover-open {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.control-popover {
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 100% !important;
|
||||
z-index: @zindex-popover + 3;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
|
||||
> div {
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.popover-fixed-height {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.popover-head:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
138
modules/system/assets/ui/less/popup.base.less
Normal file
138
modules/system/assets/ui/less/popup.base.less
Normal file
@@ -0,0 +1,138 @@
|
||||
//
|
||||
// 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 { .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;
|
||||
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,.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 @padding-standard;
|
||||
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;
|
||||
}
|
||||
|
||||
// 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 @padding-standard;
|
||||
}
|
||||
|
||||
// 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;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@media (min-width: @screen-sm-min) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
width: @modal-md;
|
||||
margin: 80px auto 30px auto; // The top margin is increased to avoid overlapping with flash messages
|
||||
}
|
||||
.modal-content {
|
||||
.box-shadow(0 5px 15px rgba(0,0,0,.5));
|
||||
}
|
||||
|
||||
// Modal sizes
|
||||
.modal-sm { width: @modal-sm; }
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.modal-lg { width: @modal-lg; }
|
||||
}
|
||||
204
modules/system/assets/ui/less/popup.less
Normal file
204
modules/system/assets/ui/less/popup.less
Normal file
@@ -0,0 +1,204 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "loader.less";
|
||||
@import "icon.close.less";
|
||||
|
||||
//
|
||||
// Popup
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "popup.base.less";
|
||||
|
||||
//
|
||||
// Popup
|
||||
// --------------------------------------------------
|
||||
|
||||
@popup-size-giant: 982px;
|
||||
@popup-size-huge: 900px;
|
||||
@popup-size-large: 750px;
|
||||
@popup-size-small: 400px;
|
||||
@popup-size-tiny: 300px;
|
||||
|
||||
.modal-content {
|
||||
.box-shadow(@popup-box-shadow);
|
||||
.border-radius(@border-radius-base);
|
||||
border: none;
|
||||
background: @color-popup-content-bg;
|
||||
}
|
||||
|
||||
.modal-content.popup-shaking {
|
||||
.animation(popup-shake 0.82s cubic-bezier(.36,.07,.19,.97) both);
|
||||
.transform(translate3d(0, 0, 0));
|
||||
.backface-visibility(hidden);
|
||||
.perspective(1000px);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: @color-popup-header-bg;
|
||||
color: @color-popup-header-text;
|
||||
.border-top-radius(@border-radius-base);
|
||||
padding: @modal-title-padding @padding-standard;
|
||||
border: none;
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: @color-popup-footer-bg;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
padding: 0 @padding-standard @padding-standard @padding-standard;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&.modal-no-header {
|
||||
padding-top: @padding-standard;
|
||||
}
|
||||
|
||||
&.modal-no-footer {
|
||||
padding-bottom: @padding-standard;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
&.size-adaptive {
|
||||
width: 100%;
|
||||
padding-right: 50px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
&.adaptive-height {
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
&.size-tiny { width: @popup-size-tiny; }
|
||||
&.size-small { width: @popup-size-small; }
|
||||
}
|
||||
@media (min-width: @screen-md-min) {
|
||||
&.size-large { width: @popup-size-large; }
|
||||
&.size-huge { width: @popup-size-huge; }
|
||||
&.size-giant { width: @popup-size-giant; }
|
||||
}
|
||||
@media (max-width: @screen-sm) {
|
||||
&.size-adaptive {
|
||||
width: auto;
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-popup {
|
||||
&.fade {
|
||||
&:not(.in) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
.opacity(0);
|
||||
.transition(~'all 0.3s, width 0s');
|
||||
.transform(~'scale(0.7)');
|
||||
}
|
||||
}
|
||||
|
||||
&.fade.in {
|
||||
.modal-dialog {
|
||||
.opacity(1);
|
||||
.transform( ~'scale(1)');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: (@zindex-modal-background - 10);
|
||||
background-color: @modal-backdrop-bg;
|
||||
.opacity(1);
|
||||
|
||||
.popup-loading-indicator {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
.transition(~'all 0.3s, width 0s');
|
||||
.transform(~'scale(0.7)');
|
||||
.opacity(0);
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
background-size: 50px 50px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-image: url('@{loader-image-path}/loader-transparent.svg');
|
||||
.animation(spin 1s linear infinite);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 25px 0 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&.loading .popup-loading-indicator {
|
||||
.opacity(1);
|
||||
.transform(~'scale(1)');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mac body.modal-open {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Popup animations
|
||||
// -------------------------
|
||||
|
||||
@-moz-keyframes popup-shake {
|
||||
10%, 90% { -moz-transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { -moz-transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { -moz-transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { -moz-transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes popup-shake {
|
||||
10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { -webkit-transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { -webkit-transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
|
||||
@keyframes popup-shake {
|
||||
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
23
modules/system/assets/ui/less/popup.variables.less
Normal file
23
modules/system/assets/ui/less/popup.variables.less
Normal file
@@ -0,0 +1,23 @@
|
||||
//
|
||||
// Popup
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-popup-header-bg: transparent;
|
||||
@color-popup-header-text: #2A3E51;
|
||||
@color-popup-footer-bg: transparent;
|
||||
@color-popup-content-bg: #f9f9f9;
|
||||
|
||||
@popup-box-shadow: ~"0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22)";
|
||||
|
||||
@modal-inner-padding: @padding-standard;
|
||||
@modal-title-padding: @padding-standard;
|
||||
@modal-title-line-height: @line-height-base;
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
@modal-content-fallback-border-color: #999;
|
||||
@modal-backdrop-bg: @overlay-background;
|
||||
@modal-backdrop-opacity: .5;
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
84
modules/system/assets/ui/less/progressbar.less
Normal file
84
modules/system/assets/ui/less/progressbar.less
Normal file
@@ -0,0 +1,84 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Progress bars
|
||||
// --------------------------------------------------
|
||||
|
||||
@progress-bg: #d9dee0;
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
@progress-bar-bg: #2f99da;
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
// Bar itself
|
||||
// -------------------------
|
||||
|
||||
// Outer container
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
height: 9px;
|
||||
margin-bottom: @line-height-computed;
|
||||
background-color: @progress-bg;
|
||||
.border-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
// Bar of progress
|
||||
.progress-bar {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
font-size: @font-size-small;
|
||||
line-height: 9px;
|
||||
color: @progress-bar-color;
|
||||
text-align: center;
|
||||
background-color: @progress-bar-bg;
|
||||
.transition(width .6s ease);
|
||||
}
|
||||
|
||||
// Call animation for the active one
|
||||
.progress.active .progress-bar {
|
||||
#gradient.striped(rgba(255,255,255,.15); -45deg);
|
||||
background-size: 40px 40px;
|
||||
.animation(progress-bar-stripes 2s linear infinite);
|
||||
}
|
||||
|
||||
// Variations
|
||||
// -------------------------
|
||||
|
||||
.progress-bar-success {
|
||||
background-color: @progress-bar-success-bg;
|
||||
}
|
||||
|
||||
.progress-bar-info {
|
||||
background-color: @progress-bar-info-bg;
|
||||
}
|
||||
|
||||
.progress-bar-warning {
|
||||
background-color: @progress-bar-warning-bg;
|
||||
}
|
||||
|
||||
.progress-bar-danger {
|
||||
background-color: @progress-bar-danger-bg;
|
||||
}
|
||||
|
||||
// Bar animations
|
||||
// -------------------------
|
||||
|
||||
// WebKit
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 40px 0; }
|
||||
}
|
||||
|
||||
// Spec and IE10+
|
||||
@keyframes progress-bar-stripes {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 40px 0; }
|
||||
}
|
||||
67
modules/system/assets/ui/less/scoreboard.less
Normal file
67
modules/system/assets/ui/less/scoreboard.less
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "chart.less";
|
||||
@import "toolbar.less";
|
||||
|
||||
//
|
||||
// Scoreboard
|
||||
// --------------------------------------------------
|
||||
|
||||
div.scoreboard {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
.horizontal-scroll-indicators(@color-scroll-indicator);
|
||||
&:before, &:after { margin-top: -10px; }
|
||||
&:before { left: 7px; }
|
||||
&:after { right: 10px; }
|
||||
|
||||
div.scoreboard-item {
|
||||
display: inline-block;
|
||||
margin-right: 40px;
|
||||
margin-bottom: @padding-standard;
|
||||
vertical-align: top;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.control-chart {
|
||||
// Setup the chart height in the scoreboard
|
||||
// and set offsets so that the elements do not
|
||||
// "jump" when the chart script loads and
|
||||
// adds the canvas and color indicator elements.
|
||||
min-height: 67px;
|
||||
|
||||
ul {
|
||||
margin-left: 77px;
|
||||
top: -2px;
|
||||
|
||||
li {
|
||||
padding-left: 18px;
|
||||
& > i { margin-left: -18px; }
|
||||
}
|
||||
}
|
||||
|
||||
div.canvas {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.canvas + ul { margin-left: 0; }
|
||||
}
|
||||
|
||||
.scoreboard-offset {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
body.slim-container {
|
||||
div.scoreboard {
|
||||
padding: 0 @padding-standard;
|
||||
}
|
||||
}
|
||||
594
modules/system/assets/ui/less/select.less
Normal file
594
modules/system/assets/ui/less/select.less
Normal file
@@ -0,0 +1,594 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "loader.less";
|
||||
@import "form.variables.less";
|
||||
@import "../vendor/select2/css/select2.less";
|
||||
|
||||
//
|
||||
// Select
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "select.mixins.less";
|
||||
@import "select.variables.less";
|
||||
|
||||
.select2-dropdown {
|
||||
z-index: @zindex-select;
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.loading-indicator {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
background-image: url('@{loader-image-path}/loader-transparent.svg');
|
||||
left: auto;
|
||||
right: 10px;
|
||||
top: 19px;
|
||||
background-size: 17px 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.in-progress {
|
||||
.select2-selection .select2-selection__arrow b {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default {
|
||||
display: block;
|
||||
|
||||
.select2-selection {
|
||||
.select-input-defaults();
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.select2-search--dropdown {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
.icon(@search);
|
||||
right: 13px;
|
||||
top: 9px;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.select2-search__field {
|
||||
.select-input-defaults();
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search__field {
|
||||
outline: 0;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: @input-color-placeholder;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
|
||||
&[role=group] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&[aria-disabled=true] {
|
||||
color: @color-select-link-disabled;
|
||||
cursor: @select-cursor-disabled;
|
||||
}
|
||||
|
||||
&[aria-selected=true] {
|
||||
background-color: @color-select-hover-bg;
|
||||
color: @color-select-hover;
|
||||
}
|
||||
|
||||
&--highlighted[aria-selected] {
|
||||
background-color: @color-select-active-bg;
|
||||
color: @color-select-active;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
.select2-results__group {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal;
|
||||
padding-left: @padding-base-horizontal*2;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal*2;
|
||||
padding-left: @padding-base-horizontal*3;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal*3;
|
||||
padding-left: @padding-base-horizontal*4;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal*4;
|
||||
padding-left: @padding-base-horizontal*5;
|
||||
|
||||
.select2-results__option {
|
||||
margin-left: -@padding-base-horizontal*5;
|
||||
padding-left: @padding-base-horizontal*6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__group {
|
||||
color: @color-select-header;
|
||||
display: block;
|
||||
padding: @padding-base-vertical 6px;
|
||||
line-height: @line-height-base;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.select2-container--focus,
|
||||
&.select2-container--open {
|
||||
.select2-selection {
|
||||
.transition(@input-transition);
|
||||
border-color: @input-border-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--open {
|
||||
//
|
||||
// Make the dropdown arrow point up while the dropdown is visible.
|
||||
//
|
||||
.select2-selection .select2-selection__arrow b {
|
||||
&:before {
|
||||
.icon(@angle-up);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Handle border radii of the container when the dropdown is showing.
|
||||
//
|
||||
&.select2-container--below {
|
||||
.select2-selection:not(.select-no-dropdown) {
|
||||
.border-bottom-radius(0);
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--above {
|
||||
.select2-selection:not(.select-no-dropdown) {
|
||||
.border-top-radius(0);
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
color: @color-select-icon;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--disabled {
|
||||
|
||||
.select2-selection {
|
||||
border-color: @input-border;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.select2-selection,
|
||||
.select2-search__field {
|
||||
cursor: @select-cursor-disabled;
|
||||
}
|
||||
|
||||
.select2-selection,
|
||||
.select2-selection--multiple .select2-selection__choice {
|
||||
background-color: @input-bg-disabled;
|
||||
}
|
||||
|
||||
.select2-selection__clear,
|
||||
.select2-selection--multiple .select2-selection__choice__remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
//------------------------------------
|
||||
|
||||
.select2-dropdown {
|
||||
.box-shadow(@select-box-shadow);
|
||||
border-color: @input-border-focus;
|
||||
overflow-x: hidden;
|
||||
margin-top: -1px;
|
||||
&--above {
|
||||
margin-top: 1px;
|
||||
.box-shadow(@select-box-shadow-above);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results > .select2-results__options {
|
||||
font-size: @input-font-size;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// No Dropdown
|
||||
//------------------------------------
|
||||
|
||||
.select2-dropdown.select-no-dropdown {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.select2-dropdown.select-hide-selected {
|
||||
li[aria-selected=true] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Single select
|
||||
//------------------------------------
|
||||
|
||||
.select2-selection--single {
|
||||
height: @input-height-base;
|
||||
line-height: @line-height-base;
|
||||
padding: @padding-base-vertical @padding-base-horizontal + @caret-width-base*3 @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
//
|
||||
// Adjust the single Select2's dropdown arrow button appearance.
|
||||
//
|
||||
.select2-selection__arrow {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: @padding-base-horizontal;
|
||||
top: 0;
|
||||
width: @caret-width-base;
|
||||
|
||||
b {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 9px;
|
||||
width: 8px;
|
||||
right: 3px;
|
||||
margin-top: -5px;
|
||||
line-height: 9px;
|
||||
&:before {
|
||||
.icon(@angle-down);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
color: @input-color;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select2-selection__placeholder {
|
||||
color: @input-color-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiple select
|
||||
//------------------------------------
|
||||
|
||||
.select2-selection--multiple {
|
||||
min-height: @input-height-base;
|
||||
|
||||
.select2-selection__rendered {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
line-height: @line-height-base;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.select2-selection__placeholder {
|
||||
color: @input-color-placeholder;
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
//
|
||||
// Make Multi Select2's choices match default button styles.
|
||||
//
|
||||
.select2-selection__choice {
|
||||
color: @color-select-text;
|
||||
background: @color-select-choice-bg;
|
||||
border: 1px solid @color-select-choice-border;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
float: left;
|
||||
margin: (@padding-base-vertical - 2) 0 0 (@padding-base-horizontal / 2);
|
||||
padding: 0 (@padding-base-vertical - 2);
|
||||
}
|
||||
|
||||
//
|
||||
// Minus 2px borders.
|
||||
//
|
||||
.select2-search--inline {
|
||||
.select2-search__field {
|
||||
background: transparent;
|
||||
padding: 0 @padding-base-horizontal;
|
||||
height: @input-height-base - 2;
|
||||
line-height: @line-height-base;
|
||||
margin-top: 0;
|
||||
min-width: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
float: right;
|
||||
margin: -2px 0 1px 8px;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
margin-top: @padding-base-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// Control sizing
|
||||
//------------------------------------
|
||||
|
||||
/* 1 */
|
||||
&.input-sm,
|
||||
&.input-lg {
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.input-sm,
|
||||
.input-group-sm &,
|
||||
.form-group-sm & {
|
||||
.select2-selection--single {
|
||||
border-radius: @border-radius-small;
|
||||
font-size: @font-size-small;
|
||||
height: @input-height-small;
|
||||
line-height: @line-height-small;
|
||||
padding: @padding-small-vertical @padding-small-horizontal + @caret-width-base*3 @padding-small-vertical @padding-small-horizontal;
|
||||
|
||||
/* 2 */
|
||||
.select2-selection__arrow b {
|
||||
margin-left: -@padding-small-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
min-height: @input-height-small;
|
||||
|
||||
.select2-selection__choice {
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
margin: (@padding-small-vertical - 2) 0 0 (@padding-small-horizontal / 2);
|
||||
padding: 0 (@padding-small-vertical - 2);
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: 0 @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
height: @input-height-small - 2;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
margin-top: @padding-small-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.input-lg,
|
||||
.input-group-lg &,
|
||||
.form-group-lg & {
|
||||
.select2-selection--single {
|
||||
border-radius: @border-radius-large;
|
||||
font-size: @font-size-large;
|
||||
height: @input-height-large;
|
||||
line-height: @line-height-large;
|
||||
padding: @padding-large-vertical @padding-large-horizontal + @caret-width-large*3 @padding-large-vertical @padding-large-horizontal;
|
||||
|
||||
/* 1 */
|
||||
.select2-selection__arrow {
|
||||
width: @caret-width-large;
|
||||
|
||||
b {
|
||||
border-width: @caret-width-large @caret-width-large 0 @caret-width-large;
|
||||
margin-left: -@caret-width-large;
|
||||
margin-left: -@padding-large-vertical;
|
||||
margin-top: -(@caret-width-large / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
min-height: @input-height-large;
|
||||
|
||||
.select2-selection__choice {
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-large;
|
||||
border-radius: 4px;
|
||||
margin: (@padding-large-vertical - 1) 0 0 (@padding-large-horizontal / 2);
|
||||
padding: 0 @padding-large-vertical;
|
||||
}
|
||||
|
||||
.select2-search--inline .select2-search__field {
|
||||
padding: 0 @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
height: @input-height-large - 2;
|
||||
line-height: @line-height-large;
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
margin-top: @padding-large-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.input-lg.select2-container--open {
|
||||
.dropdown-arrow;
|
||||
}
|
||||
|
||||
.input-group-lg & {
|
||||
&.select2-container--open {
|
||||
.dropdown-arrow;
|
||||
}
|
||||
}
|
||||
|
||||
// RTL Support
|
||||
//------------------------------------
|
||||
|
||||
&[dir="rtl"] {
|
||||
|
||||
.select2-selection--single {
|
||||
padding-left: @padding-base-horizontal + @caret-width-base*3;
|
||||
padding-right: @padding-base-horizontal;
|
||||
.select2-selection__rendered {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-align: right; /* 1 */
|
||||
}
|
||||
|
||||
.select2-selection__clear {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
left: @padding-base-horizontal;
|
||||
right: auto;
|
||||
|
||||
b {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice,
|
||||
.select2-selection__placeholder {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.select2-selection__choice {
|
||||
margin-left: 0;
|
||||
margin-right: (@padding-base-horizontal / 2);
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
margin-left: 2px;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validation
|
||||
//------------------------------------
|
||||
|
||||
.has-warning {
|
||||
.validation-state-focus(@state-warning-text);
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.validation-state-focus(@state-danger-text);
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.validation-state-focus(@state-success-text);
|
||||
}
|
||||
|
||||
// Input groups
|
||||
//------------------------------------
|
||||
|
||||
.input-group .select2-container--default {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
position: relative;
|
||||
z-index: @zindex-form;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-group.select2-default-prepend .select2-container--default {
|
||||
.select2-selection {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group.select2-default-append .select2-container--default {
|
||||
.select2-selection {
|
||||
.border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-default-append,
|
||||
.select2-default-prepend {
|
||||
.select2-container--default,
|
||||
.input-group-btn,
|
||||
.input-group-btn .btn {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Temporary fix for https://github.com/select2/select2-default-theme/issues/9
|
||||
*
|
||||
* Provides `!important` for certain properties of the class applied to the
|
||||
* original `<select>` element to hide it.
|
||||
*
|
||||
* @see https://github.com/select2/select2/pull/3301
|
||||
* @see https://github.com/fk/select2/commit/31830c7b32cb3d8e1b12d5b434dee40a6e753ada
|
||||
*/
|
||||
|
||||
.form-control.select2-hidden-accessible {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
// Inline
|
||||
//------------------------------------
|
||||
|
||||
.form-inline .select2-container--default {
|
||||
display: inline-block;
|
||||
}
|
||||
45
modules/system/assets/ui/less/select.mixins.less
Normal file
45
modules/system/assets/ui/less/select.mixins.less
Normal file
@@ -0,0 +1,45 @@
|
||||
//
|
||||
// Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
.select-input-defaults() {
|
||||
background-color: @input-bg;
|
||||
border: 1px solid @input-border;
|
||||
border-radius: @input-border-radius;
|
||||
color: @input-color;
|
||||
font-size: @input-font-size;
|
||||
.box-shadow(@input-box-shadow);
|
||||
}
|
||||
|
||||
.validation-state-focus(@color) {
|
||||
.select2-dropdown,
|
||||
.select2-selection {
|
||||
border-color: @color;
|
||||
}
|
||||
|
||||
.select2-container--focus .select2-selection,
|
||||
.select2-container--open .select2-selection {
|
||||
border-color: darken(@color, 10%);
|
||||
}
|
||||
|
||||
&.select2-drop-active {
|
||||
border-color: darken(@color, 10%);
|
||||
|
||||
&.select2-drop.select2-drop-above {
|
||||
border-top-color: darken(@color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown arrow when dropdown is open
|
||||
.dropdown-arrow() {
|
||||
.select2-selection--single {
|
||||
//
|
||||
// Make the dropdown arrow point up while the dropdown is visible.
|
||||
//
|
||||
.select2-selection__arrow b {
|
||||
border-color: transparent transparent @color-select-icon transparent;
|
||||
border-width: 0 @caret-width-large @caret-width-large @caret-width-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
modules/system/assets/ui/less/select.variables.less
Normal file
21
modules/system/assets/ui/less/select.variables.less
Normal file
@@ -0,0 +1,21 @@
|
||||
//
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-select-icon: #666666;
|
||||
@color-select-border: #b2b9be;
|
||||
@color-select-border-focus: #808c8d;
|
||||
@color-select-bg: #f6f6f6;
|
||||
@color-select-hover-bg: #f5f5f5;
|
||||
@color-select-hover: darken(@gray-dark, 5%);
|
||||
@color-select-active: #fff;
|
||||
@color-select-active-bg: @brand-secondary;
|
||||
@color-select-header: @gray-light;
|
||||
@color-select-link-disabled: @gray-light;
|
||||
@color-select-choice-bg: #fff;
|
||||
@color-select-choice-border: #ccc;
|
||||
@color-select-text: #515c5d;
|
||||
|
||||
@select-box-shadow: 0 3px 6px rgba(0,0,0,.075);
|
||||
@select-box-shadow-above: 0 -3px 6px rgba(0,0,0,.075);
|
||||
@select-cursor-disabled: not-allowed;
|
||||
94
modules/system/assets/ui/less/site.grid.less
Normal file
94
modules/system/assets/ui/less/site.grid.less
Normal file
@@ -0,0 +1,94 @@
|
||||
//
|
||||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
.container {
|
||||
.container-fixed();
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: @container-sm;
|
||||
}
|
||||
@media (min-width: @screen-md-min) {
|
||||
width: @container-md;
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
width: @container-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but without any defined
|
||||
// width for fluid, full width layouts.
|
||||
|
||||
.container-fluid {
|
||||
.container-fixed();
|
||||
}
|
||||
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
.row {
|
||||
.make-row();
|
||||
}
|
||||
|
||||
// Compact rows
|
||||
|
||||
.row-flush {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
[class*="col-"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
.make-grid-columns();
|
||||
|
||||
|
||||
// Extra small grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for extra small devices like
|
||||
// smartphones.
|
||||
|
||||
.make-grid(xs);
|
||||
|
||||
|
||||
// Small grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the small device range, from phones
|
||||
// to tablets.
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.make-grid(sm);
|
||||
}
|
||||
|
||||
|
||||
// Medium grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.make-grid(md);
|
||||
}
|
||||
|
||||
|
||||
// Large grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.make-grid(lg);
|
||||
}
|
||||
16
modules/system/assets/ui/less/site.less
Normal file
16
modules/system/assets/ui/less/site.less
Normal file
@@ -0,0 +1,16 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Site structure
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "site.normalize.less";
|
||||
@import "site.reset.less";
|
||||
@import "site.print.less";
|
||||
@import "site.grid.less";
|
||||
@import "site.utility.less";
|
||||
@import "site.typography.less";
|
||||
227
modules/system/assets/ui/less/site.mixins.less
Normal file
227
modules/system/assets/ui/less/site.mixins.less
Normal file
@@ -0,0 +1,227 @@
|
||||
// Contextual backgrounds
|
||||
// -------------------------
|
||||
.bg-variant(@color) {
|
||||
background-color: @color;
|
||||
a&:hover {
|
||||
background-color: darken(@color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
.text-emphasis-variant(@color) {
|
||||
color: @color;
|
||||
a&:hover {
|
||||
color: darken(@color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Grid System
|
||||
// -----------
|
||||
|
||||
// Centered container element
|
||||
.container-fixed() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
// Creates a wrapper for a series of columns
|
||||
.make-row(@gutter: @grid-gutter-width) {
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
// Generate the extra small columns
|
||||
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
min-height: 1px;
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
}
|
||||
.make-xs-column-offset(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-xs-column-push(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-xs-column-pull(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the small columns
|
||||
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-sm-column-offset(@columns) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-sm-column-push(@columns) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-sm-column-pull(@columns) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the medium columns
|
||||
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-md-column-offset(@columns) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-md-column-push(@columns) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-md-column-pull(@columns) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large columns
|
||||
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-lg-column-offset(@columns) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-lg-column-push(@columns) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-lg-column-pull(@columns) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `@grid-columns`.
|
||||
|
||||
.make-grid-columns() {
|
||||
// Common styles for all sizes of grid columns, widths 1-12
|
||||
.col(@index) when (@index = 1) { // initial
|
||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
|
||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
}
|
||||
|
||||
.float-grid-columns(@class) {
|
||||
.col(@index) when (@index = 1) { // initial
|
||||
@item: ~".col-@{class}-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||
@item: ~".col-@{class}-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
}
|
||||
|
||||
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
|
||||
.col-@{class}-@{index} {
|
||||
width: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = push) {
|
||||
.col-@{class}-push-@{index} {
|
||||
left: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = pull) {
|
||||
.col-@{class}-pull-@{index} {
|
||||
right: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = offset) {
|
||||
.col-@{class}-offset-@{index} {
|
||||
margin-left: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Basic looping in LESS
|
||||
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
|
||||
.calc-grid-column(@index, @class, @type);
|
||||
// next iteration
|
||||
.loop-grid-columns((@index - 1), @class, @type);
|
||||
}
|
||||
|
||||
// Create grid for specific class
|
||||
.make-grid(@class) {
|
||||
.float-grid-columns(@class);
|
||||
.loop-grid-columns(@grid-columns, @class, width);
|
||||
.loop-grid-columns(@grid-columns, @class, pull);
|
||||
.loop-grid-columns(@grid-columns, @class, push);
|
||||
.loop-grid-columns(@grid-columns, @class, offset);
|
||||
}
|
||||
460
modules/system/assets/ui/less/site.normalize.less
Normal file
460
modules/system/assets/ui/less/site.normalize.less
Normal file
@@ -0,0 +1,460 @@
|
||||
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
// user zoom.
|
||||
//
|
||||
|
||||
html {
|
||||
font-family: sans-serif; // 1
|
||||
-ms-text-size-adjust: 100%; // 2
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default margin.
|
||||
//
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Correct `block` display not defined in IE 8/9.
|
||||
//
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
//
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
//
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `[hidden]` styling not present in IE 8/9.
|
||||
// Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
//
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Links
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove the gray background color from active links in IE 10.
|
||||
//
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//
|
||||
// Improve readability when focused and also mouse hovered in all browsers.
|
||||
//
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
//
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
//
|
||||
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
//
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in Safari 5 and Chrome.
|
||||
//
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
//
|
||||
// Address variable `h1` font-size and margin within `section` and `article`
|
||||
// contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
//
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9.
|
||||
//
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent and variable font size in all browsers.
|
||||
//
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
//
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
// Embedded content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove border when inside `a` element in IE 8/9.
|
||||
//
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct overflow displayed oddly in IE 9.
|
||||
//
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Grouping content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address margin not present in IE 8/9 and Safari 5.
|
||||
//
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
//
|
||||
// Address differences between Firefox and other browsers.
|
||||
//
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Contain overflow in all browsers.
|
||||
//
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address odd `em`-unit font size rendering in all browsers.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `select`, unless a `border` property is set.
|
||||
//
|
||||
|
||||
//
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
//
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; // 1
|
||||
font: inherit; // 2
|
||||
margin: 0; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Address `overflow` set to `hidden` in IE 8/9/10.
|
||||
//
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
// All other form control elements do not inherit `text-transform` values.
|
||||
// Correct `button` style inheritance in Firefox, IE 8+, and Opera
|
||||
// Correct `select` style inheritance in Firefox.
|
||||
//
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
// and `video` controls.
|
||||
// 2. Correct inability to style clickable `input` types in iOS.
|
||||
// 3. Improve usability and consistency of cursor style between image-type
|
||||
// `input` and others.
|
||||
//
|
||||
|
||||
button,
|
||||
html input[type="button"], // 1
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
cursor: pointer; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Re-set default cursor for disabled elements.
|
||||
//
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
//
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
//
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
//
|
||||
// It's recommended that you don't attempt to style these elements.
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
//
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
//
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
// `font-size` values of the `input`, it causes the cursor style of the
|
||||
// decrement button to change from `default` to `text`.
|
||||
//
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Prevents the placeholder getting displayed behind the incremental counter
|
||||
// See github issue: https://github.com/octobercms/october/issues/5397
|
||||
//
|
||||
|
||||
input[type="number"] {
|
||||
&:focus {
|
||||
&::-webkit-input-placeholder {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&::placeholder {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
&::-webkit-input-placeholder {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&::placeholder {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
// (include `-moz` to future-proof).
|
||||
//
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; // 2
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
//
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Define consistent border, margin, and padding.
|
||||
//
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `color` not being inherited in IE 8/9.
|
||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
//
|
||||
|
||||
legend {
|
||||
border: 0; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default vertical scrollbar in IE 8/9.
|
||||
//
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Don't inherit the `font-weight` (applied by a rule above).
|
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
//
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Tables
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove most spacing between table cells.
|
||||
//
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
101
modules/system/assets/ui/less/site.print.less
Normal file
101
modules/system/assets/ui/less/site.print.less
Normal file
@@ -0,0 +1,101 @@
|
||||
//
|
||||
// Basic print styles
|
||||
// --------------------------------------------------
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
|
||||
|
||||
@media print {
|
||||
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
color: #000 !important; // Black prints faster: h5bp.com/s
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
// Don't show links for images, or javascript/internal links
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group; // h5bp.com/t
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
// Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
|
||||
// Once fixed, we can just straight up remove this.
|
||||
select {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
// Bootstrap components
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
.table {
|
||||
td,
|
||||
th {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
.btn,
|
||||
.dropup > .btn {
|
||||
> .caret {
|
||||
border-top-color: #000 !important;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse !important;
|
||||
}
|
||||
.table-bordered {
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ddd !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
115
modules/system/assets/ui/less/site.reset.less
Normal file
115
modules/system/assets/ui/less/site.reset.less
Normal file
@@ -0,0 +1,115 @@
|
||||
//
|
||||
// Scaffolding
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Reset the box-sizing
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
|
||||
|
||||
// Body reset
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-family-base;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
background-color: @body-bg;
|
||||
}
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// Reset unusual Firefox-on-Android default style.
|
||||
//
|
||||
// See https://github.com/necolas/normalize.css/issues/214
|
||||
|
||||
button,
|
||||
input,
|
||||
select[multiple],
|
||||
textarea {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @link-hover-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Images
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
.img-responsive {
|
||||
.img-responsive();
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
.img-rounded {
|
||||
.border-radius(@border-radius-large);
|
||||
}
|
||||
|
||||
// Perfect circle
|
||||
.img-circle {
|
||||
border-radius: 50%; // set radius in percents
|
||||
}
|
||||
|
||||
|
||||
// Horizontal rules
|
||||
|
||||
hr {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
border: 0;
|
||||
border-top: 1px solid @hr-border;
|
||||
}
|
||||
|
||||
|
||||
// Only display content to screen readers
|
||||
//
|
||||
// See: http://a11yproject.com/posts/how-to-hide-content/
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
border: 0;
|
||||
}
|
||||
293
modules/system/assets/ui/less/site.typography.less
Normal file
293
modules/system/assets/ui/less/site.typography.less
Normal file
@@ -0,0 +1,293 @@
|
||||
//
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Headings
|
||||
// -------------------------
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: @headings-font-family;
|
||||
font-weight: @headings-font-weight;
|
||||
line-height: @headings-line-height;
|
||||
color: @headings-color;
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @headings-small-color;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-top: (@line-height-computed / 2);
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: @font-size-h1; }
|
||||
h2, .h2 { font-size: @font-size-h2; }
|
||||
h3, .h3 { font-size: @font-size-h3; }
|
||||
h4, .h4 { font-size: @font-size-h4; }
|
||||
h5, .h5 { font-size: @font-size-h5; }
|
||||
h6, .h6 { font-size: @font-size-h6; }
|
||||
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: floor((@font-size-base * 1.15));
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
font-size: (@font-size-base * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Emphasis & misc
|
||||
// -------------------------
|
||||
|
||||
// Ex: 14px base font * 85% = about 12px
|
||||
small,
|
||||
.small { font-size: 85%; }
|
||||
|
||||
// Undo browser default styling
|
||||
cite { font-style: normal; }
|
||||
|
||||
// Alignment
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
|
||||
// Contextual colors
|
||||
.text-muted {
|
||||
color: @text-muted;
|
||||
}
|
||||
.text-primary {
|
||||
.text-emphasis-variant(@brand-primary);
|
||||
}
|
||||
.text-success {
|
||||
.text-emphasis-variant(@state-success-text);
|
||||
}
|
||||
.text-info {
|
||||
.text-emphasis-variant(@state-info-text);
|
||||
}
|
||||
.text-warning {
|
||||
.text-emphasis-variant(@state-warning-text);
|
||||
}
|
||||
.text-danger {
|
||||
.text-emphasis-variant(@state-danger-text);
|
||||
}
|
||||
|
||||
// Contextual backgrounds
|
||||
// For now we'll leave these alongside the text classes until v4 when we can
|
||||
// safely shift things around (per SemVer rules).
|
||||
.bg-primary {
|
||||
// Given the contrast here, this is the only class to have its color inverted
|
||||
// automatically.
|
||||
color: #fff;
|
||||
.bg-variant(@brand-primary);
|
||||
}
|
||||
.bg-success {
|
||||
.bg-variant(@state-success-bg);
|
||||
}
|
||||
.bg-info {
|
||||
.bg-variant(@state-info-bg);
|
||||
}
|
||||
.bg-warning {
|
||||
.bg-variant(@state-warning-bg);
|
||||
}
|
||||
.bg-danger {
|
||||
.bg-variant(@state-danger-bg);
|
||||
}
|
||||
|
||||
|
||||
// Page header
|
||||
// -------------------------
|
||||
|
||||
.page-header {
|
||||
padding-bottom: ((@line-height-computed / 2) - 1);
|
||||
margin: (@line-height-computed * 2) 0 @line-height-computed;
|
||||
border-bottom: 1px solid @page-header-border-color;
|
||||
}
|
||||
|
||||
|
||||
// Lists
|
||||
// --------------------------------------------------
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// List options
|
||||
|
||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||
.list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
.list-unstyled();
|
||||
margin-left: -5px;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-top: 0; // Remove browser default
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
// Horizontal description lists
|
||||
//
|
||||
// Defaults to being stacked without any of the below styles applied, until the
|
||||
// grid breakpoint is reached (default of ~768px).
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.dl-horizontal {
|
||||
dt {
|
||||
float: left;
|
||||
width: (@component-offset-horizontal - 20);
|
||||
clear: left;
|
||||
text-align: right;
|
||||
.text-overflow();
|
||||
}
|
||||
dd {
|
||||
margin-left: @component-offset-horizontal;
|
||||
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MISC
|
||||
// ----
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr[title],
|
||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted @abbr-border-color;
|
||||
}
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
padding: (@line-height-computed / 2) @line-height-computed;
|
||||
margin: 0 0 @line-height-computed;
|
||||
font-size: @blockquote-font-size;
|
||||
border-left: 5px solid @blockquote-border-color;
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Note: Deprecated small and .small as of v3.1.0
|
||||
// Context: https://github.com/twbs/bootstrap/issues/11660
|
||||
footer,
|
||||
small,
|
||||
.small {
|
||||
display: block;
|
||||
font-size: 80%; // back to default font-size
|
||||
line-height: @line-height-base;
|
||||
color: @blockquote-small-color;
|
||||
|
||||
&:before {
|
||||
content: '\2014 \00A0'; // em dash, nbsp
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Opposite alignment of blockquote
|
||||
//
|
||||
// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
|
||||
.blockquote-reverse,
|
||||
blockquote.pull-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
border-right: 5px solid @blockquote-border-color;
|
||||
border-left: 0;
|
||||
text-align: right;
|
||||
|
||||
// Account for citation
|
||||
footer,
|
||||
small,
|
||||
.small {
|
||||
&:before { content: ''; }
|
||||
&:after {
|
||||
content: '\00A0 \2014'; // nbsp, em dash
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Quotes
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Addresses
|
||||
address {
|
||||
margin-bottom: @line-height-computed;
|
||||
font-style: normal;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
145
modules/system/assets/ui/less/site.utility.less
Normal file
145
modules/system/assets/ui/less/site.utility.less
Normal file
@@ -0,0 +1,145 @@
|
||||
//
|
||||
// Utility classes
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Floats
|
||||
// -------------------------
|
||||
|
||||
.clearfix {
|
||||
.clearfix();
|
||||
}
|
||||
.center-block {
|
||||
.center-block();
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
|
||||
// Toggling content
|
||||
// -------------------------
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.text-hide {
|
||||
.text-hide();
|
||||
}
|
||||
|
||||
// Hide from screenreaders and browsers
|
||||
//
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
// For Affix plugin
|
||||
// -------------------------
|
||||
|
||||
.affix {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
//
|
||||
// Responsive: Utility classes
|
||||
// --------------------------------------------------
|
||||
|
||||
// IE10 in Windows (Phone) 8
|
||||
//
|
||||
// Support for responsive views via media queries is kind of borked in IE10, for
|
||||
// Surface/desktop in split view and for Windows Phone 8. This particular fix
|
||||
// must be accompanied by a snippet of JavaScript to sniff the user agent and
|
||||
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
|
||||
// our Getting Started page for more information on this bug.
|
||||
//
|
||||
// For more information, see the following:
|
||||
//
|
||||
// Issue: https://github.com/twbs/bootstrap/issues/10497
|
||||
// Docs: http://getbootstrap.com/getting-started/#browsers
|
||||
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
|
||||
// Visibility utilities
|
||||
.visible-xs,
|
||||
.visible-sm,
|
||||
.visible-md,
|
||||
.visible-lg {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
|
||||
.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Print utilities
|
||||
//
|
||||
// Media queries are placed on the inside to be mixin-friendly.
|
||||
|
||||
.visible-print {
|
||||
.responsive-invisibility();
|
||||
|
||||
@media print {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-print {
|
||||
@media print {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
26
modules/system/assets/ui/less/site.variables.less
Normal file
26
modules/system/assets/ui/less/site.variables.less
Normal file
@@ -0,0 +1,26 @@
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
@grid-columns: 12;
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: (720px + @grid-gutter-width);
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: (940px + @grid-gutter-width);
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: (1140px + @grid-gutter-width);
|
||||
@container-lg: @container-large-desktop;
|
||||
226
modules/system/assets/ui/less/tab.base.less
Normal file
226
modules/system/assets/ui/less/tab.base.less
Normal file
@@ -0,0 +1,226 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 {
|
||||
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: transparent;
|
||||
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
|
||||
> a {
|
||||
.border-radius(@nav-pills-border-radius);
|
||||
}
|
||||
+ li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-pills-active-link-hover-color;
|
||||
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 {
|
||||
> .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);
|
||||
}
|
||||
535
modules/system/assets/ui/less/tab.less
Normal file
535
modules/system/assets/ui/less/tab.less
Normal file
@@ -0,0 +1,535 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Tabs control
|
||||
// - The control supports 3 basic CSS classes: master, primary and secondary.
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "tab.base.less";
|
||||
|
||||
@color-scroll-indicator: #bbbbbb;
|
||||
|
||||
@color-tab-border: #e0e0e0;
|
||||
@color-tab-inactive-text: #bbbbbb;
|
||||
@color-tab-active-text: @color-text-title;
|
||||
@color-tab-active-border: #d0d0d0;
|
||||
@color-tab-bg: #ffffff;
|
||||
@color-tab-active-marker: #ec8017;
|
||||
@color-tab-content-active-bg: #ffffff;
|
||||
@color-tab-content-border: #e3e5e7;
|
||||
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
@nav-tabs-border-color: #ddd;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @gray;
|
||||
@nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
.control-tabs {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.horizontal-scroll-indicators(@color-scroll-indicator);
|
||||
|
||||
&.scroll-active-before:before { color: @color-tab-active-border; }
|
||||
&.scroll-active-after:after { color: @color-tab-active-border; }
|
||||
|
||||
&:before, &:after {
|
||||
top: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
border-bottom: none;
|
||||
vertical-align: bottom;
|
||||
> li {
|
||||
font-size: 15px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
z-index: @zindex-tab - 2;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-left: none !important;
|
||||
border-top: none !important;
|
||||
border-right: none !important;
|
||||
padding: 0 0 10px 0;
|
||||
color: @color-tab-inactive-text;
|
||||
font-weight: 400;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
&:before {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
> span.title > span {
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
border-top: 2px solid @color-tab-border;
|
||||
margin-top: -4px;
|
||||
padding-top: 7px;
|
||||
> span:not([class*="wn-icon"]),
|
||||
> span:not([class*="oc-icon"]) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.tab-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
z-index: @zindex-tab;
|
||||
|
||||
a {
|
||||
color: @color-tab-active-text;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
bottom: 0;
|
||||
background: @color-tab-active-border;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div.tab-content {
|
||||
> div.tab-pane {
|
||||
padding: @padding-standard 0 0 0;
|
||||
display: none;
|
||||
.clearfix();
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
|
||||
&.layout-cell {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
&.pane-compact {
|
||||
padding: 0;
|
||||
}
|
||||
&.pane-padded {
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-closable] {
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
> li {
|
||||
margin-right: 5px;
|
||||
|
||||
a {
|
||||
padding-left: 20px !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
span.tab-close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 5px;
|
||||
left: -5px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: @color-tab-inactive-text !important;
|
||||
cursor: pointer;
|
||||
i {
|
||||
display: inline-block;
|
||||
z-index: @zindex-tab + 1;
|
||||
top: -7px;
|
||||
right: 5px;
|
||||
position: relative;
|
||||
}
|
||||
&:hover i {
|
||||
color: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.active span.close {
|
||||
color: @color-tab-inactive-text;
|
||||
}
|
||||
|
||||
&[data-modified] {
|
||||
span.tab-close i {
|
||||
top: -4px;
|
||||
|
||||
&:before {
|
||||
content: @circle;
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Master tabs
|
||||
//
|
||||
|
||||
&.master-tabs {
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
> li {
|
||||
a {
|
||||
font-size: 15px;
|
||||
border-bottom: transparent 4px solid;
|
||||
position: relative;
|
||||
z-index: @zindex-tab + 1;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
&.active {
|
||||
a { border-bottom: @color-tab-active-border 4px solid; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Primary tabs
|
||||
//
|
||||
|
||||
&.primary-tabs {
|
||||
margin-bottom: 5px;
|
||||
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
z-index: @zindex-tab - 1;
|
||||
content: ' ';
|
||||
border-bottom: 2px solid @color-tab-active-border;
|
||||
}
|
||||
|
||||
> li {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
margin-right: -20px;
|
||||
background: transparent;
|
||||
|
||||
&:first-child {
|
||||
padding-left: @padding-standard !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: @font-size-base;
|
||||
padding-bottom: 3px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: @zindex-tab + 1;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
|
||||
> span.title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 4px 25px 0px 25px;
|
||||
.box-sizing(border-box);
|
||||
z-index: @zindex-tab;
|
||||
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
display: block;
|
||||
border-top: 2px solid @color-tab-border;
|
||||
position: absolute;
|
||||
background: @body-bg;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
width: 20px;
|
||||
bottom: -2px;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
border-left: 2px solid @color-tab-border;
|
||||
.border-radius(8px 0 0 0);
|
||||
.transform( ~'skewX(-20deg)');
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
border-right: 2px solid @color-tab-border;
|
||||
.border-radius(0 8px 0 0);
|
||||
.transform( ~'skewX(20deg)');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background-image: none;
|
||||
margin-right: 0;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.active a {
|
||||
z-index: @zindex-tab + 3;
|
||||
|
||||
> span.title {
|
||||
z-index: @zindex-tab + 2;
|
||||
border-top-color: #d6d6d6;
|
||||
|
||||
&:before, &:after{
|
||||
border-color: @color-tab-active-border;
|
||||
}
|
||||
|
||||
span {
|
||||
border-top-color: @color-tab-active-border;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
right: 2px;
|
||||
left: 2px;
|
||||
content: ' ';
|
||||
background-color: @body-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div.tab-content {
|
||||
}
|
||||
|
||||
// Tab divider to sit inset the standard padding (20px)
|
||||
&.tabs-inset {
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Secondary tabs
|
||||
//
|
||||
|
||||
&.secondary-tabs {
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
> li {
|
||||
padding-right: 10px;
|
||||
margin-right: 10px;
|
||||
border-right: 1px solid @color-tab-border;
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div.tab-content {
|
||||
> div.tab-pane {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Content tabs
|
||||
//
|
||||
|
||||
&.content-tabs {
|
||||
|
||||
> ul.nav-tabs {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: @color-tab-content-border;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: 0;
|
||||
border-top: 1px solid @color-tab-content-border;
|
||||
border-right: 1px solid @color-tab-content-border;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
padding: 11px 20px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
background: transparent;
|
||||
font-weight: 500;
|
||||
|
||||
span.title {
|
||||
span {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid @color-tab-content-border;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid @color-tab-content-border;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: @color-tab-content-active-bg;
|
||||
a {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tab divider to sit inset the standard padding (20px)
|
||||
&.tabs-inset {
|
||||
> ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs to sit in by the standard offset (20px)
|
||||
&.tabs-offset {
|
||||
> ul.nav-tabs {
|
||||
li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs to sit flush to the element above
|
||||
&.tabs-flush {
|
||||
> ul.nav-tabs {
|
||||
li {
|
||||
border-top: none;
|
||||
}
|
||||
li:last-child {
|
||||
border-right: 1px solid transparent;
|
||||
}
|
||||
li:first-child {
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
li.active:last-child {
|
||||
border-right: 1px solid @color-tab-content-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tab-content > .tab-pane {
|
||||
padding-top: 0;
|
||||
|
||||
div.list-header,
|
||||
div.padded-container,
|
||||
div.toolbar-widget {
|
||||
background: @color-tab-content-active-bg;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
// Pane to sit inset the standard padding (20px)
|
||||
&.pane-inset {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.hide-tabs {
|
||||
.control-tabs {
|
||||
ul.nav-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> div.tab-content > div.tab-pane {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-sidebar {
|
||||
.control-tabs.secondary {
|
||||
> div > ul.nav-tabs > li a {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
28
modules/system/assets/ui/less/taglist.less
Normal file
28
modules/system/assets/ui/less/taglist.less
Normal file
@@ -0,0 +1,28 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.variables.less";
|
||||
@import "select.variables.less";
|
||||
|
||||
|
||||
// Taglist preview mode
|
||||
//------------------------------------
|
||||
|
||||
.taglist--preview {
|
||||
overflow: hidden;
|
||||
list-style-type: none;
|
||||
padding-top: 0; padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
.taglist__item {
|
||||
color: @color-select-text;
|
||||
background: @color-select-choice-bg;
|
||||
border: 1px solid @color-select-choice-border;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
float: left;
|
||||
margin: @padding-base-vertical 0 0 (@padding-base-horizontal / 2);
|
||||
padding: 0 (@padding-base-vertical - 2);
|
||||
}
|
||||
}
|
||||
274
modules/system/assets/ui/less/toolbar.less
Normal file
274
modules/system/assets/ui/less/toolbar.less
Normal file
@@ -0,0 +1,274 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
@import "button.less";
|
||||
|
||||
//
|
||||
// Toolbars
|
||||
// --------------------------------------------------
|
||||
|
||||
.control-toolbar {
|
||||
font-size: 0; // Do not rely on the default spacing between inline-block elements
|
||||
padding: 0 0 20px 0;
|
||||
position: relative;
|
||||
.horizontal-scroll-indicators(@color-scroll-indicator);
|
||||
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
padding-right: 20px;
|
||||
|
||||
&:last-child,
|
||||
&.last {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.horizontal-scroll-indicators(@color-scroll-indicator);
|
||||
|
||||
&:before { left: -10px; }
|
||||
&:after { right: 6px; }
|
||||
|
||||
.btn, .btn-group, .dropdown {
|
||||
white-space: nowrap;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.standalone {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown > .btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
> .btn, > .dropdown {
|
||||
margin-right: 0;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
> .btn {
|
||||
margin-right: 0;
|
||||
.border-right-radius(0);
|
||||
}
|
||||
|
||||
&.last > .btn {
|
||||
.border-right-radius(@border-radius-base) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.form-control[type=text] {
|
||||
height: auto;
|
||||
padding: 6px 13px 6px;
|
||||
}
|
||||
|
||||
&.toolbar-padded {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-control=toolbar] {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html.mobile {
|
||||
[data-control=toolbar].is-native-drag {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-input-text {
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
font-size: (@font-size-base * 1.5);
|
||||
font-weight: @close-font-weight;
|
||||
line-height: 1;
|
||||
color: @close-color;
|
||||
text-shadow: @close-text-shadow;
|
||||
font-family: sans-serif;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
height: 28px;
|
||||
|
||||
> i {
|
||||
.opacity(.2);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @close-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
> i {
|
||||
.opacity(.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Editor toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
@toolbar-editor-btn-size: 38px;
|
||||
|
||||
.control-toolbar.editor-toolbar {
|
||||
padding: 0;
|
||||
background: @color-toolbar-editor-bg;
|
||||
.border-bottom-radius(0);
|
||||
border-bottom: 2px solid @color-toolbar-editor-border;
|
||||
|
||||
.toolbar-item {
|
||||
.btn, .btn-group, .dropdown {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-align: center;
|
||||
height: @toolbar-editor-btn-size;
|
||||
width: @toolbar-editor-btn-size;
|
||||
line-height: @toolbar-editor-btn-size;
|
||||
zoom: 1;
|
||||
color: @color-toolbar-editor-btn;
|
||||
background: transparent;
|
||||
.user-select(none);
|
||||
.box-shadow(none);
|
||||
text-shadow: none;
|
||||
border-radius: 0;
|
||||
font-size: 14px;
|
||||
|
||||
> i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: none;
|
||||
background-color: @color-toolbar-editor-btn-bg-hover;
|
||||
color: @color-toolbar-editor-btn-hover;
|
||||
}
|
||||
&.active,
|
||||
&:active {
|
||||
outline: none;
|
||||
background-color: @color-toolbar-editor-btn-bg-active;
|
||||
color: @color-toolbar-editor-btn-hover;
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
opacity: 1;
|
||||
color: #bdbdbd;
|
||||
cursor: default;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.open {
|
||||
.btn {
|
||||
background-color: @color-toolbar-editor-btn-bg-active;
|
||||
color: @color-toolbar-editor-btn-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.btn[class^="wn-icon-"],
|
||||
.btn[class*=" wn-icon-"],
|
||||
.btn[class^="oc-icon-"],
|
||||
.btn[class*=" oc-icon-"] {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.oc-autumn-button {
|
||||
color: #c03f31;
|
||||
|
||||
&:hover {
|
||||
color: @color-toolbar-editor-btn-hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar tweaks for the side panel */
|
||||
|
||||
#layout-side-panel,
|
||||
.compact-toolbar {
|
||||
div.control-toolbar {
|
||||
&, &.toolbar-padded {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.separator {
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.border-radius(0)!important;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 13px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
border: none;
|
||||
padding: 11px 13px 12px;
|
||||
height: auto;
|
||||
.border-radius(0) !important;
|
||||
.box-shadow(~"inset 0 1px 0 @{input-border}");
|
||||
|
||||
&.icon.search {
|
||||
background-position: right -78px;
|
||||
}
|
||||
}
|
||||
|
||||
div.loading-indicator-container.size-input-text {
|
||||
.loading-indicator {
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
modules/system/assets/ui/less/toolbar.variables.less
Normal file
11
modules/system/assets/ui/less/toolbar.variables.less
Normal file
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// Toolbars
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-scroll-indicator: #bbbbbb;
|
||||
@color-toolbar-editor-bg: #f2f2f2;
|
||||
@color-toolbar-editor-border: #d4d8da;
|
||||
@color-toolbar-editor-btn: fade(@btn-secondary-color, 80%);
|
||||
@color-toolbar-editor-btn-bg-hover: #ddd;
|
||||
@color-toolbar-editor-btn-bg-active: mix(white, #999, 60%);
|
||||
@color-toolbar-editor-btn-hover: #000;
|
||||
101
modules/system/assets/ui/less/tooltip.less
Normal file
101
modules/system/assets/ui/less/tooltip.less
Normal file
@@ -0,0 +1,101 @@
|
||||
//
|
||||
// Dependencies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// 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);
|
||||
.box-shadow(@tooltip-box-shadow);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
12
modules/system/assets/ui/less/tooltip.variables.less
Normal file
12
modules/system/assets/ui/less/tooltip.variables.less
Normal file
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// Tooltips
|
||||
// --------------------------------------------------
|
||||
|
||||
@tooltip-max-width: 200px;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-bg: @brand-primary;
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
@tooltip-arrow-width: 5px;
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
@tooltip-box-shadow: ~"0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23)";
|
||||
131
modules/system/assets/ui/less/utilities.less
Normal file
131
modules/system/assets/ui/less/utilities.less
Normal file
@@ -0,0 +1,131 @@
|
||||
//
|
||||
// Filters
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "global.less";
|
||||
|
||||
//
|
||||
// Branding
|
||||
// --------------------------------------------------
|
||||
|
||||
.br-p { color: @brand-primary; }
|
||||
.br-s { color: @brand-secondary; }
|
||||
.br-a { color: @brand-accent; }
|
||||
.br-p-s10 { color: saturate(@brand-primary, 10%); }
|
||||
.br-s-s10 { color: saturate(@brand-secondary, 10%); }
|
||||
.br-a-s10 { color: saturate(@brand-accent, 10%); }
|
||||
.br-p-s20 { color: saturate(@brand-primary, 20%); }
|
||||
.br-s-s20 { color: saturate(@brand-secondary, 20%); }
|
||||
.br-a-s20 { color: saturate(@brand-accent, 20%); }
|
||||
|
||||
.bg-p { background-color: @brand-primary; }
|
||||
.bg-s { background-color: @brand-secondary; }
|
||||
.bg-a { background-color: @brand-accent; }
|
||||
.bg-p-s10 { background-color: saturate(@brand-primary, 10%); }
|
||||
.bg-s-s10 { background-color: saturate(@brand-secondary, 10%); }
|
||||
.bg-a-s10 { background-color: saturate(@brand-accent, 10%); }
|
||||
.bg-p-s20 { background-color: saturate(@brand-primary, 20%); }
|
||||
.bg-s-s20 { background-color: saturate(@brand-secondary, 20%); }
|
||||
.bg-a-s20 { background-color: saturate(@brand-accent, 20%); }
|
||||
|
||||
//
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
.t-ww { word-wrap: break-word; word-break: break-word; }
|
||||
.t-nw { white-space: nowrap; }
|
||||
|
||||
//
|
||||
// Positioning
|
||||
// --------------------------------------------------
|
||||
|
||||
.pos-r { position: relative !important; }
|
||||
.pos-a { position: absolute !important; }
|
||||
.pos-f { position: fixed !important; }
|
||||
|
||||
//
|
||||
// Width
|
||||
// --------------------------------------------------
|
||||
|
||||
.w-sm { width: 25% !important; }
|
||||
.w-md { width: 50% !important; }
|
||||
.w-lg { width: 75% !important; }
|
||||
.w-full { width: 100% !important; }
|
||||
.w-50 { width: 50px !important; }
|
||||
.w-100 { width: 100px !important; }
|
||||
.w-120 { width: 120px !important; }
|
||||
.w-130 { width: 130px !important; }
|
||||
.w-140 { width: 140px !important; }
|
||||
.w-150 { width: 150px !important; }
|
||||
.w-200 { width: 200px !important; }
|
||||
.w-300 { width: 300px !important; }
|
||||
.w-350 { width: 350px !important; }
|
||||
|
||||
//
|
||||
// Margins
|
||||
// --------------------------------------------------
|
||||
|
||||
.m-a-0 { margin: 0 !important; }
|
||||
.m-t-0 { margin-top: 0 !important; }
|
||||
.m-r-0 { margin-right: 0 !important; }
|
||||
.m-b-0 { margin-bottom: 0 !important; }
|
||||
.m-l-0 { margin-left: 0 !important; }
|
||||
|
||||
.m-a { margin: @spacer !important; }
|
||||
.m-t { margin-top: @spacer-y !important; }
|
||||
.m-r { margin-right: @spacer-x !important; }
|
||||
.m-b { margin-bottom: @spacer-y !important; }
|
||||
.m-l { margin-left: @spacer-x !important; }
|
||||
.m-x { margin-right: @spacer-x !important; margin-left: @spacer-x !important; }
|
||||
.m-y { margin-top: @spacer-y !important; margin-bottom: @spacer-y !important; }
|
||||
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
|
||||
|
||||
.m-a-md { margin: (@spacer-y * 1.5) !important; }
|
||||
.m-t-md { margin-top: (@spacer-y * 1.5) !important; }
|
||||
.m-r-md { margin-right: (@spacer-y * 1.5) !important; }
|
||||
.m-b-md { margin-bottom: (@spacer-y * 1.5) !important; }
|
||||
.m-l-md { margin-left: (@spacer-y * 1.5) !important; }
|
||||
.m-x-md { margin-right: (@spacer-x * 1.5) !important; margin-left: (@spacer-x * 1.5) !important; }
|
||||
.m-y-md { margin-top: (@spacer-y * 1.5) !important; margin-bottom: (@spacer-y * 1.5) !important; }
|
||||
|
||||
.m-a-lg { margin: (@spacer-y * 3) !important; }
|
||||
.m-t-lg { margin-top: (@spacer-y * 3) !important; }
|
||||
.m-r-lg { margin-right: (@spacer-y * 3) !important; }
|
||||
.m-b-lg { margin-bottom: (@spacer-y * 3) !important; }
|
||||
.m-l-lg { margin-left: (@spacer-y * 3) !important; }
|
||||
.m-x-lg { margin-right: (@spacer-x * 3) !important; margin-left: (@spacer-x * 3) !important; }
|
||||
.m-y-lg { margin-top: (@spacer-y * 3) !important; margin-bottom: (@spacer-y * 3) !important; }
|
||||
|
||||
//
|
||||
// Padding
|
||||
// --------------------------------------------------
|
||||
|
||||
.p-a-0 { padding: 0 !important; }
|
||||
.p-t-0 { padding-top: 0 !important; }
|
||||
.p-r-0 { padding-right: 0 !important; }
|
||||
.p-b-0 { padding-bottom: 0 !important; }
|
||||
.p-l-0 { padding-left: 0 !important; }
|
||||
|
||||
.p-a { padding: @spacer !important; }
|
||||
.p-t { padding-top: @spacer-y !important; }
|
||||
.p-r { padding-right: @spacer-x !important; }
|
||||
.p-b { padding-bottom: @spacer-y !important; }
|
||||
.p-l { padding-left: @spacer-x !important; }
|
||||
.p-x { padding-right: @spacer-x !important; padding-left: @spacer-x !important; }
|
||||
.p-y { padding-top: @spacer-y !important; padding-bottom: @spacer-y !important; }
|
||||
|
||||
.p-a-md { padding: (@spacer-y * 1.5) !important; }
|
||||
.p-t-md { padding-top: (@spacer-y * 1.5) !important; }
|
||||
.p-r-md { padding-right: (@spacer-y * 1.5) !important; }
|
||||
.p-b-md { padding-bottom: (@spacer-y * 1.5) !important; }
|
||||
.p-l-md { padding-left: (@spacer-y * 1.5) !important; }
|
||||
.p-x-md { padding-right: (@spacer-x * 1.5) !important; padding-left: (@spacer-x * 1.5) !important; }
|
||||
.p-y-md { padding-top: (@spacer-y * 1.5) !important; padding-bottom: (@spacer-y * 1.5) !important; }
|
||||
|
||||
.p-a-lg { padding: (@spacer-y * 3) !important; }
|
||||
.p-t-lg { padding-top: (@spacer-y * 3) !important; }
|
||||
.p-r-lg { padding-right: (@spacer-y * 3) !important; }
|
||||
.p-b-lg { padding-bottom: (@spacer-y * 3) !important; }
|
||||
.p-l-lg { padding-left: (@spacer-y * 3) !important; }
|
||||
.p-x-lg { padding-right: (@spacer-x * 3) !important; padding-left: (@spacer-x * 3) !important; }
|
||||
.p-y-lg { padding-top: (@spacer-y * 3) !important; padding-bottom: (@spacer-y * 3) !important; }
|
||||
53
modules/system/assets/ui/less/windex.variables.less
Normal file
53
modules/system/assets/ui/less/windex.variables.less
Normal file
@@ -0,0 +1,53 @@
|
||||
//
|
||||
// "Windex" Z-Index Window Manager
|
||||
// --------------------------------------------------
|
||||
|
||||
//
|
||||
// Z-Index frequencies:
|
||||
//
|
||||
// 0-100 - Primary layer (body / content)
|
||||
// 100-200 - Primary menus / dropdowns
|
||||
//
|
||||
// 300-400 - Secondary layer (full screen)
|
||||
// 400-500 - Secondary menus / dropdowns
|
||||
//
|
||||
// 500-600 - Tertiary layer (popups)
|
||||
// 600-700 - Tertiary menus / dropdowns
|
||||
//
|
||||
// 1000-10000 - Reserved for frequency manager
|
||||
//
|
||||
// 10000+ - Always on top
|
||||
//
|
||||
|
||||
//
|
||||
// Z-Indexes
|
||||
// --------------------------------------------------
|
||||
|
||||
// Primary
|
||||
@zindex-filter: 10;
|
||||
@zindex-button: 10;
|
||||
@zindex-form: 10;
|
||||
@zindex-checkbox: 10;
|
||||
@zindex-breadcrumb: 10;
|
||||
@zindex-chart: 10;
|
||||
@zindex-tab: 10;
|
||||
@zindex-loader: 10;
|
||||
@zindex-navbar: 100;
|
||||
@zindex-navbar-fixed: 110;
|
||||
|
||||
// Secondary
|
||||
@zindex-fullscreen: 300;
|
||||
|
||||
// Tertiary
|
||||
@zindex-modal-background: 500;
|
||||
@zindex-modal: 600;
|
||||
@zindex-popover: 600;
|
||||
@zindex-dropdown: 600;
|
||||
|
||||
// Always on top
|
||||
@zindex-inspector: 10000;
|
||||
@zindex-datepicker: 10100;
|
||||
@zindex-tooltip: 10200;
|
||||
@zindex-flashmessage: 10300;
|
||||
@zindex-select: 10400;
|
||||
@zindex-alert: 10500;
|
||||
Reference in New Issue
Block a user