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

alert primary, less refactoring

Browse Source
This commit is contained in:
Yuri Kuznetsov
2025-06-10 15:53:36 +03:00
parent eb760272c4
commit 7eb2f79e3b
7 changed files with 60 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/views/admin/layouts/detail.js
+2
View File
@@ -124,12 +124,14 @@ class LayoutDetailView extends LayoutGridView {
'success',
'danger',
'warning',
'primary',
],
style: {
'info': 'info',
'success': 'success',
'danger': 'danger',
'warning': 'warning',
'primary': 'primary',
},
default: 'info',
translation: 'LayoutManager.options.style',
frontend/less/espo/bootstrap/alerts.less
-24
View File
@@ -2,10 +2,6 @@
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
margin-bottom: var(--line-height-computed);
border: 1px solid transparent;
@@ -27,23 +23,3 @@
margin-top: 5px;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
.alert-variant-espo(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-info {
.alert-variant-espo(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant-espo(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant-espo(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}
frontend/less/espo/bootstrap/variables.less
-16
View File
@@ -63,22 +63,6 @@
@modal-backdrop-opacity: .5;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@list-group-disabled-color: @gray-light;
@list-group-disabled-bg: @gray-lighter;
@list-group-disabled-text-color: @list-group-disabled-color;
frontend/less/espo/elements/alert.less
+20
View File
@@ -49,3 +49,23 @@ body > .alert {
}
}
}
.alert-success {
.alert-variant-espo(var(--state-success-bg); var(--state-success-border); var(--state-success-text));
}
.alert-info {
.alert-variant-espo(var(--state-info-bg); var(--state-info-border); var(--state-info-text));
}
.alert-warning {
.alert-variant-espo(var(--state-warning-bg); var(--state-warning-border); var(--state-warning-text));
}
.alert-danger {
.alert-variant-espo(var(--state-danger-bg); var(--state-danger-border); var(--state-danger-text));
}
.alert-primary {
.alert-variant-espo(var(--state-primary-bg); var(--state-primary-border); var(--state-primary-text));
}
frontend/less/espo/root-variables.less
+18 -9
View File
@@ -262,14 +262,29 @@
--brand-success-10: darken(@brand-success-value, 10%);
--brand-warning-10: darken(@brand-warning-value, 10%);
--state-primary-bg: @state-primary-bg-value;
--state-primary-text: @state-primary-text-value;
--state-default-bg: @state-default-bg-value;
--state-default-text: @state-default-text-value;
--state-primary-bg: @state-primary-bg-value;
--state-primary-text: @state-primary-text-value;
--state-primary-border: @state-primary-border-value;
--state-danger-bg: @state-danger-bg-value;
--state-danger-text: @state-danger-text-value;
--state-danger-border: @state-danger-border-value;
--state-info-text: @state-info-text-value;
--state-info-bg: @state-info-bg-value;
--state-info-border: @state-info-border-value;
--state-success-text: @state-success-text-value;
--state-success-bg: @state-success-bg-value;
--state-success-border: @state-success-border-value;
--state-warning-bg: @state-warning-bg-value;
--state-warning-text: @state-warning-text-value;
--state-warning-border: @state-warning-border-value;
--state-danger-bg-5: darken(@state-danger-bg-value, 5%);
--state-danger-bg-10: darken(@state-danger-bg-value, 10%);
--state-danger-text-10: darken(@state-danger-text-value, 10%);
@@ -277,20 +292,14 @@
--brand-info-10: darken(@brand-info-value, 10%);
--state-info-text: @state-info-text-value;
--state-info-text-10: darken(@state-info-text-value, 10%);
--state-info-bg: @state-info-bg-value;
--state-info-bg-5: darken(@state-info-bg-value, 5%);
--state-info-bg-10: darken(@state-info-bg-value, 10%);
--state-success-text: @state-success-text-value;
--state-success-bg: @state-success-bg-value;
--state-success-bg-5: darken(@state-success-bg-value, 5%);
--state-success-text-10: darken(@state-success-text-value, 10%);
--state-success-text-10l: lighten(darken(@state-success-text-value, 10%), 20);
--state-warning-bg: @state-warning-bg-value;
--state-warning-text: @state-warning-text-value;
--state-warning-text-10: darken(@state-warning-text-value, 10%);
--state-warning-text-10l: lighten(darken(@state-warning-text-value, 10%), 20);
--state-warning-bg-5: darken(@state-warning-bg-value, 5%);
frontend/less/espo/value-variables.less
+5
View File
@@ -28,18 +28,23 @@
@state-primary-bg-value: #ecf5fd;
@state-primary-text-value: #5b9aca;
@state-primary-border-value: darken(@state-primary-bg-value, 5%);
@state-success-bg-value: lighten(spin(@brand-success-value, 5), 30%);
@state-success-text-value: darken(spin(@brand-success-value, 7), 17%);
@state-success-border-value: darken(@state-success-bg-value, 5%);
@state-info-bg-value: #ece7f9;
@state-info-text-value: #83779c;
@state-info-border-value: darken(@state-info-bg-value, 5%);
@state-warning-bg-value: #fbf7e1;
@state-warning-text-value: #9E7328;
@state-warning-border-value: darken(@state-warning-bg-value, 10%);
@state-danger-text-value: #ad4846;
@state-danger-bg-value: #f2dede;
@state-danger-border-value: darken(@state-danger-bg-value, 10%);
@state-default-text-value: @text-gray-color-value;
@state-default-bg-value: @gray-lighter-value;
frontend/less/espo/variables.less
+15 -16
View File
@@ -75,27 +75,26 @@
@state-success-bg: var(--state-success-bg);
@state-success-text: var(--state-success-text);
@state-success-border: var(--state-success-border);
@state-danger-bg: var(--state-danger-bg);
@state-danger-text: var(--state-danger-text);
@state-danger-border: var(--state-danger-border);
@state-warning-text: var(--state-warning-text);
@state-warning-bg: var(--state-warning-bg);
@state-warning-border: var(--state-warning-border);
@state-info-text: var(--state-info-text);
@state-info-bg: var(--state-info-bg);
@state-info-border: var(--state-info-border);
@state-info-bg-5: var(--state-info-bg-5);
@state-success-bg-5: var(--state-success-bg-5);
@state-success-bg-10: var(--state-success-bg-10);
@state-success-border: var(--state-success-bg-5);
@state-success-text-10: var(--state-success-text-10);
@state-danger-bg: var(--state-danger-bg);
@state-danger-border: var(--state-danger-bg-10);
@state-danger-text: var(--state-danger-text);
@state-info-bg: var(--state-info-bg);
@state-info-bg-5: var(--state-info-bg-5);
@state-info-text: var(--state-info-text);
@state-info-border: var(--state-info-bg-10);
@state-warning-text: var(--state-warning-text);
@state-warning-border: var(--state-warning-bg-10);
@state-warning-bg: var(--state-warning-bg);
@panel-primary-border: var(--panel-primary-border);
@navbar-inverse-color: var(--navbar-inverse-color);