From ae2be2326a3cd3abfa0f0ebb0c65c61a2a3d770a Mon Sep 17 00:00:00 2001 From: Yuri Kuznetsov Date: Wed, 30 Oct 2024 14:32:42 +0200 Subject: [PATCH] less ref --- .../espo/bootstrap/mixins/progress-bar.less | 5 -- frontend/less/espo/bootstrap/modals.less | 48 +++-------- .../less/espo/bootstrap/progress-bars.less | 50 +++--------- frontend/less/espo/bootstrap/variables.less | 80 +------------------ frontend/less/espo/elements/modal.less | 2 +- frontend/less/espo/variables.less | 5 -- 6 files changed, 27 insertions(+), 163 deletions(-) diff --git a/frontend/less/espo/bootstrap/mixins/progress-bar.less b/frontend/less/espo/bootstrap/mixins/progress-bar.less index f07996a34d..9237e822b9 100644 --- a/frontend/less/espo/bootstrap/mixins/progress-bar.less +++ b/frontend/less/espo/bootstrap/mixins/progress-bar.less @@ -2,9 +2,4 @@ .progress-bar-variant(@color) { background-color: @color; - - // Deprecated parent class requirement as of v3.2.0 - .progress-striped & { - #gradient > .striped(); - } } diff --git a/frontend/less/espo/bootstrap/modals.less b/frontend/less/espo/bootstrap/modals.less index f84cf00149..b624b4ffeb 100644 --- a/frontend/less/espo/bootstrap/modals.less +++ b/frontend/less/espo/bootstrap/modals.less @@ -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; } } diff --git a/frontend/less/espo/bootstrap/progress-bars.less b/frontend/less/espo/bootstrap/progress-bars.less index 03d98ddc38..39dfda2a52 100644 --- a/frontend/less/espo/bootstrap/progress-bars.less +++ b/frontend/less/espo/bootstrap/progress-bars.less @@ -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)); } diff --git a/frontend/less/espo/bootstrap/variables.less b/frontend/less/espo/bootstrap/variables.less index b9b607bdcb..48e4725357 100644 --- a/frontend/less/espo/bootstrap/variables.less +++ b/frontend/less/espo/bootstrap/variables.less @@ -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); diff --git a/frontend/less/espo/elements/modal.less b/frontend/less/espo/elements/modal.less index 489e2285d4..af92ba2400 100644 --- a/frontend/less/espo/elements/modal.less +++ b/frontend/less/espo/elements/modal.less @@ -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 { diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less index 539db6dc75..51e10ba16f 100644 --- a/frontend/less/espo/variables.less +++ b/frontend/less/espo/variables.less @@ -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;