espocrm-extensions/espocrm-base
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

less ref

Browse Source
This commit is contained in:
Yuri Kuznetsov
2024-10-30 14:32:42 +02:00
parent 320ff7a9c2
commit ae2be2326a
6 changed files with 27 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/less/espo/bootstrap/mixins/progress-bar.less
-5
View File
@@ -2,9 +2,4 @@
.progress-bar-variant(@color) {
background-color: @color;
// Deprecated parent class requirement as of v3.2.0
.progress-striped & {
#gradient > .striped();
}
}
frontend/less/espo/bootstrap/modals.less
+13 -35
View File
@@ -1,13 +1,9 @@
//
// Modals
// --------------------------------------------------
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
display: none;
overflow: hidden;
@@ -32,20 +28,17 @@
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
margin: var(--10px);
}
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-border-color;
background-color: var(--modal-content-bg);
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
@@ -53,70 +46,55 @@
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
// Fade for backdrop
background-color: var(--modal-backdrop-bg);
&.fade { .opacity(0); }
&.in { .opacity(@modal-backdrop-opacity); }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: var(--modal-title-padding);
border-bottom: 1px solid @modal-header-border-color;
border-bottom: var(--1px) solid var(--modal-header-border-color);
&:extend(.clearfix all);
}
// Close icon
.modal-header .close {
margin-top: -2px;
margin-top: var(--minus-2px);
}
// Title text within header
.modal-title {
margin: 0;
line-height: var(--modal-title-line-height);
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
padding: var(--modal-inner-padding);
}
// Footer (for actions)
.modal-footer {
padding: var(--modal-inner-padding);
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
border-top: var(--1px) solid var(--modal-header-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-left: var(--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;
margin-left: var(--minus-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;
width: var(--600px);
margin: var(--30px) auto;
}
// Modal sizes
.modal-sm { width: @modal-sm; }
}
@media (min-width: @screen-md-min) {
.modal-lg { width: @modal-lg; }
}
frontend/less/espo/bootstrap/progress-bars.less
+10 -40
View File
@@ -1,84 +1,54 @@
//
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// WebKit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Spec and IE10+
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
from { background-position: var(--40px) 0; }
to { background-position: 0 0; }
}
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
height: var(--line-height-computed);
margin-bottom: var(--line-height-computed);
background-color: @progress-bg;
background-color: var(--default-heading-bg-color);
}
// Bar of progress
.progress-bar {
float: left;
width: 0%;
width: 0;
height: 100%;
font-size: var(--font-size-small);
line-height: var(--line-height-computed);
color: @progress-bar-color;
color: var(--white-color);
text-align: center;
background-color: @progress-bar-bg;
background-color: var(--brand-primary);
.transition(width .6s ease);
}
// Striped bars
//
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar-striped` class, which you just add to an existing
// `.progress-bar`.
.progress-striped .progress-bar,
.progress-bar-striped {
#gradient > .striped();
background-size: 40px 40px;
background-size: var(--40px) var(--40px);
}
// Call animation for the active one
//
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar.active` approach.
.progress.active .progress-bar,
.progress-bar.active {
.animation(progress-bar-stripes 2s linear infinite);
}
// Variations
// -------------------------
.progress-bar-success {
.progress-bar-variant(@progress-bar-success-bg);
.progress-bar-variant(var(--brand-success));
}
.progress-bar-info {
.progress-bar-variant(@progress-bar-info-bg);
.progress-bar-variant(var(--brand-info));
}
.progress-bar-warning {
.progress-bar-variant(@progress-bar-warning-bg);
.progress-bar-variant(var(--brand-warning));
}
.progress-bar-danger {
.progress-bar-variant(@progress-bar-danger-bg);
.progress-bar-variant(var(--brand-danger));
}
frontend/less/espo/bootstrap/variables.less
+3 -77
View File
@@ -138,13 +138,9 @@
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
// Navbar
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-bg: transparent;
// Navs
@nav-link-padding: var(--10px) var(--15px);
@nav-link-hover-bg: @gray-lighter;
@@ -156,35 +152,12 @@
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-justified-active-link-border-color: @body-bg;
@tooltip-opacity: .9;
@tooltip-arrow-width: var(--5px);
@tooltip-arrow-width-negative: var(--minus-5px);
@tooltip-arrow-color: var(--dropdown-bg);
//** Background color of modal content area
@modal-content-bg: #fff;
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
//** Modal backdrop background color
@modal-backdrop-bg: #000;
//** Modal backdrop opacity
@modal-backdrop-opacity: .5;
//** Modal header border color
@modal-header-border-color: #e5e5e5;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
//Alerts
@modal-backdrop-opacity: .5;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@@ -202,57 +175,10 @@
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
@progress-bg: #f5f5f5;
//** Progress bar text color
@progress-bar-color: #fff;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
//** Success progress bar color
@progress-bar-success-bg: @brand-success;
//** Warning progress bar color
@progress-bar-warning-bg: @brand-warning;
//** Danger progress bar color
@progress-bar-danger-bg: @brand-danger;
//** Info progress bar color
@progress-bar-info-bg: @brand-info;
//** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-color: @gray-light;
@list-group-disabled-bg: @gray-lighter;
@list-group-disabled-text-color: @list-group-disabled-color;
//== Panels
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
// Carousel
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
frontend/less/espo/elements/modal.less
+1 -1
View File
@@ -5,7 +5,7 @@
.modal-header {
background-color: @modal-header-bg;
padding: var(--modal-title-padding) var(--panel-padding);
border-bottom: 0 solid @modal-header-border-color;
border-bottom: 0 solid var(--modal-header-border-color);
min-height: calc(var(--modal-title-line-height) + var(--modal-title-padding));
&.fixed-height {
frontend/less/espo/variables.less
-5
View File
@@ -60,10 +60,8 @@
@icon-font-path: "../../fonts/";
@modal-header-border-color: var(--modal-header-border-color);
@modal-header-bg: var(--modal-header-bg);
@modal-footer-bg: var(--modal-footer-bg);
@modal-content-bg: var(--modal-content-bg);
// @todo Move.
.container-fixed() {
@@ -75,8 +73,6 @@
.clearfix();
}
@modal-backdrop-bg: var(--modal-backdrop-bg);
@state-success-bg: var(--state-success-bg);
@state-success-text: var(--state-success-text);
@@ -119,7 +115,6 @@
@well-bg: var(--well-bg);
@well-border: var(--well-border);
@progress-bg: @default-heading-bg-color;
@list-group-hover-bg: @default-heading-bg-color;
@panel-footer-bg: @default-heading-bg-color;