less ref
This commit is contained in:
Yuri Kuznetsov
@@ -5,28 +5,22 @@
|
||||
@import "../bootstrap/less/mixins/hide-text.less";
|
||||
@import "../bootstrap/less/mixins/opacity.less";
|
||||
@import "../bootstrap/less/mixins/image.less";
|
||||
@import "../bootstrap/less/mixins/labels.less";
|
||||
@import "../bootstrap/less/mixins/reset-filter.less";
|
||||
@import "../bootstrap/less/mixins/resize.less";
|
||||
@import "../bootstrap/less/mixins/responsive-visibility.less";
|
||||
@import "../bootstrap/less/mixins/size.less";
|
||||
@import "../bootstrap/less/mixins/tab-focus.less";
|
||||
@import "../bootstrap/less/mixins/text-emphasis.less";
|
||||
@import "../bootstrap/less/mixins/text-overflow.less";
|
||||
@import "../bootstrap/less/mixins/vendor-prefixes.less";
|
||||
|
||||
// Components
|
||||
@import "../bootstrap/less/mixins/alerts.less";
|
||||
@import "../bootstrap/less/mixins/buttons.less";
|
||||
@import "../bootstrap/less/mixins/panels.less";
|
||||
@import "../bootstrap/less/mixins/list-group.less";
|
||||
@import "../bootstrap/less/mixins/nav-divider.less";
|
||||
@import "../bootstrap/less/mixins/forms.less";
|
||||
@import "../bootstrap/less/mixins/progress-bar.less";
|
||||
@import "../bootstrap/less/mixins/table-row.less";
|
||||
|
||||
// Skins
|
||||
@import "../bootstrap/less/mixins/background-variant.less";
|
||||
@import "mixins/border-radius-flipped.less"; //FLIPPED
|
||||
@import "mixins/gradients-rtl.less"; // RTL
|
||||
|
||||
|
||||
@@ -5,28 +5,22 @@
|
||||
@import "../../espo/bootstrap/mixins/hide-text.less";
|
||||
@import "../../espo/bootstrap/mixins/opacity.less";
|
||||
@import "../../espo/bootstrap/mixins/image.less";
|
||||
@import "../../espo/bootstrap/mixins/labels.less";
|
||||
@import "../../espo/bootstrap/mixins/reset-filter.less";
|
||||
@import "../../espo/bootstrap/mixins/resize.less";
|
||||
@import "../../espo/bootstrap/mixins/responsive-visibility.less";
|
||||
@import "../../espo/bootstrap/mixins/size.less";
|
||||
@import "../../espo/bootstrap/mixins/tab-focus.less";
|
||||
@import "../../espo/bootstrap/mixins/text-emphasis.less";
|
||||
@import "../../espo/bootstrap/mixins/text-overflow.less";
|
||||
@import "../../espo/bootstrap/mixins/vendor-prefixes.less";
|
||||
|
||||
// Components
|
||||
@import "../../espo/bootstrap/mixins/alerts.less";
|
||||
@import "../../espo/bootstrap/mixins/buttons.less";
|
||||
@import "../../espo/bootstrap/mixins/panels.less";
|
||||
@import "../../espo/bootstrap/mixins/list-group.less";
|
||||
@import "../../espo/bootstrap/mixins/nav-divider.less";
|
||||
@import "../../espo/bootstrap/mixins/forms.less";
|
||||
@import "../../espo/bootstrap/mixins/progress-bar.less";
|
||||
@import "../../espo/bootstrap/mixins/table-row.less";
|
||||
|
||||
// Skins
|
||||
@import "../../espo/bootstrap/mixins/background-variant.less";
|
||||
@import "../../espo/bootstrap/mixins/border-radius.less";
|
||||
@import "mixins/gradients-rtl.less"; // RTL
|
||||
|
||||
|
||||
@@ -5,29 +5,23 @@
|
||||
@import "mixins/hide-text.less";
|
||||
@import "mixins/opacity.less";
|
||||
@import "mixins/image.less";
|
||||
@import "mixins/labels.less";
|
||||
@import "mixins/reset-filter.less";
|
||||
@import "mixins/resize.less";
|
||||
@import "mixins/responsive-visibility.less";
|
||||
@import "mixins/size.less";
|
||||
@import "mixins/tab-focus.less";
|
||||
@import "mixins/reset-text.less";
|
||||
@import "mixins/text-emphasis.less";
|
||||
@import "mixins/text-overflow.less";
|
||||
@import "mixins/vendor-prefixes.less";
|
||||
|
||||
// Components
|
||||
@import "mixins/alerts.less";
|
||||
@import "mixins/buttons.less";
|
||||
@import "mixins/panels.less";
|
||||
@import "mixins/list-group.less";
|
||||
@import "mixins/nav-divider.less";
|
||||
@import "mixins/forms.less";
|
||||
@import "mixins/progress-bar.less";
|
||||
@import "mixins/table-row.less";
|
||||
|
||||
// Skins
|
||||
@import "mixins/background-variant.less";
|
||||
@import "mixins/border-radius.less";
|
||||
@import "mixins/gradients.less";
|
||||
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
// Alerts
|
||||
|
||||
.alert-variant(@background; @border; @text-color) {
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
color: @text-color;
|
||||
|
||||
hr {
|
||||
border-top-color: darken(@border, 5%);
|
||||
}
|
||||
.alert-link {
|
||||
color: darken(@text-color, 10%);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
// Contextual backgrounds
|
||||
|
||||
.bg-variant(@color) {
|
||||
background-color: @color;
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
background-color: darken(@color, 10%);
|
||||
}
|
||||
}
|
||||
@@ -1,60 +1,3 @@
|
||||
// Button variants
|
||||
//
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
.button-variant(@color; @background; @border) {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: @color;
|
||||
background-color: darken(@background, 10%);
|
||||
border-color: darken(@border, 25%);
|
||||
}
|
||||
&:hover {
|
||||
color: @color;
|
||||
background-color: darken(@background, 10%);
|
||||
border-color: darken(@border, 12%);
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
color: @color;
|
||||
background-color: darken(@background, 10%);
|
||||
border-color: darken(@border, 12%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: @color;
|
||||
background-color: darken(@background, 17%);
|
||||
border-color: darken(@border, 25%);
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
background-image: none;
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: @background;
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height) {
|
||||
|
||||
@@ -1,66 +1,3 @@
|
||||
// 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,
|
||||
&.radio label,
|
||||
&.checkbox label,
|
||||
&.radio-inline label,
|
||||
&.checkbox-inline label {
|
||||
color: @text-color;
|
||||
}
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: @border-color;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
border-color: darken(@border-color, 10%);
|
||||
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
// 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-border-focus` 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: var(--input-border-focus)) {
|
||||
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
|
||||
&:focus {
|
||||
border-color: @color;
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
|
||||
}
|
||||
}
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Relative text size, padding, and border-radii changes for form controls. For
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
// Labels
|
||||
|
||||
.label-variant(@color) {
|
||||
background-color: @color;
|
||||
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken(@color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
// List Groups
|
||||
|
||||
.list-group-item-variant(@state; @background; @color) {
|
||||
.list-group-item-@{state} {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
|
||||
a&,
|
||||
button& {
|
||||
color: @color;
|
||||
|
||||
.list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @color;
|
||||
background-color: darken(@background, 5%);
|
||||
}
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
color: #fff;
|
||||
background-color: @color;
|
||||
border-color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
// 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,
|
||||
&:hover > .@{state},
|
||||
&.@{state}:hover > th {
|
||||
background-color: darken(@background, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
// Typography
|
||||
|
||||
.text-emphasis-variant(@color) {
|
||||
color: @color;
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
color: darken(@color, 10%);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
.tab-focus() {
|
||||
outline: none;
|
||||
outline-offset: -2px;
|
||||
outline: none;
|
||||
outline-offset: var(--minus-2px);
|
||||
}
|
||||
|
||||
.form-control-focus-espo(@color-rgba: var(--input-border-focus-rgba)) {
|
||||
|
||||
Reference in New Issue
Block a user