summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/styles/bmc/custom/_alert.scss110
-rw-r--r--src/assets/styles/bmc/custom/_base.scss94
-rw-r--r--src/assets/styles/bmc/custom/_buttons.scss130
-rw-r--r--src/assets/styles/bmc/custom/_card.scss22
-rw-r--r--src/assets/styles/bmc/custom/_dropdown.scss22
-rw-r--r--src/assets/styles/bmc/custom/_forms.scss124
-rw-r--r--src/assets/styles/bmc/custom/_tables.scss50
7 files changed, 415 insertions, 137 deletions
diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 0e78ba64..521e910b 100644
--- a/src/assets/styles/bmc/custom/_alert.scss
+++ b/src/assets/styles/bmc/custom/_alert.scss
@@ -1,70 +1,70 @@
.alert {
- display: flex;
- padding: $spacer;
- border-width: 0 0 0 3px;
- color: gray("800");
- margin-bottom: $spacer;
+ display: flex;
+ padding: $spacer;
+ border-width: 0 0 0 3px;
+ color: gray("800");
+ margin-bottom: $spacer;
- &.small {
- padding: $spacer / 2;
- font-size: 1rem;
- }
+ &.small {
+ padding: $spacer / 2;
+ font-size: 1rem;
+ }
- .close {
- font-weight: 300;
- opacity: 1;
- }
+ .close {
+ font-weight: 300;
+ opacity: 1;
+ }
- .alert-icon {
- display: inline-flex;
- align-items: flex-start;
- margin-right: $spacer;
- margin-bottom: $spacer;
+ .alert-icon {
+ display: inline-flex;
+ align-items: flex-start;
+ margin-right: $spacer;
+ margin-bottom: $spacer;
- @include media-breakpoint-up(sm) {
- margin-bottom: 0;
- }
+ @include media-breakpoint-up(sm) {
+ margin-bottom: 0;
}
+ }
- .alert-content {
- flex: 1 1 auto;
- }
+ .alert-content {
+ flex: 1 1 auto;
+ }
- .alert-title {
- margin-bottom: $spacer / 2;
- }
+ .alert-title {
+ margin-bottom: $spacer / 2;
+ }
- .alert-msg {
- p + p {
- margin-bottom: $spacer;
- }
-
- p:last-of-type {
- margin-bottom: 0;
- }
+ .alert-msg {
+ p + p {
+ margin-bottom: $spacer;
}
- &.alert-info {
- border-left-color: theme-color("info");
- background-color: theme-color-light("info");
- fill: theme-color("info");
+ p:last-of-type {
+ margin-bottom: 0;
}
+ }
- &.alert-success {
- border-left-color: theme-color("success");
- background-color: theme-color-light("success");
- fill: theme-color("success");
- }
+ &.alert-info {
+ border-left-color: theme-color("info");
+ background-color: theme-color-light("info");
+ fill: theme-color("info");
+ }
- &.alert-danger {
- border-left-color: theme-color("danger");
- background-color: theme-color-light("danger");
- fill: theme-color("danger");
- }
+ &.alert-success {
+ border-left-color: theme-color("success");
+ background-color: theme-color-light("success");
+ fill: theme-color("success");
+ }
- &.alert-warning {
- border-left-color: theme-color("warning");
- background-color: theme-color-light("warning");
- fill: theme-color("warning");
- }
- } \ No newline at end of file
+ &.alert-danger {
+ border-left-color: theme-color("danger");
+ background-color: theme-color-light("danger");
+ fill: theme-color("danger");
+ }
+
+ &.alert-warning {
+ border-left-color: theme-color("warning");
+ background-color: theme-color-light("warning");
+ fill: theme-color("warning");
+ }
+} \ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index c11e046c..4902f87a 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,50 +1,114 @@
-dt,
-legend,
-label {
- color: gray("800");
- font-size: 14px;
- font-weight: 400;
- line-height: 1.4285;
+/* W3C standard
+ сейчас только для Firefox */
+* {
+ scrollbar-width: thin;
+ scrollbar-color: $gray-20 $gray-5;
+}
+
+/* для Chrome/Edge/Safari */
+*::-webkit-scrollbar {
+ height: 12px;
+ width: 8px;
+}
+
+*::-webkit-scrollbar-track {
+ background: $gray-5;
+}
+
+*::-webkit-scrollbar-thumb {
+ background-color: $gray-20;
+ border-radius: 5px;
+ border: 3px solid $gray-5;
}
h1,
.h1 {
- font-size: 2.625rem;
- font-weight: 300;
+ font-size: 1.75rem !important;
+ font-weight: 700;
line-height: 1.238;
}
h2,
.h2 {
- font-size: 2.25rem;
- font-weight: 300;
+ font-size: 1.25rem !important;
+ font-weight: 500;
line-height: 1.3333;
}
h3,
.h3 {
- font-size: 1.75rem;
+ font-size: 1rem !important;
font-weight: 400;
line-height: 1.2857;
}
h4,
.h4 {
- font-size: 1.25rem;
+ font-size: 0.875rem !important;
font-weight: 400;
line-height: 1.3;
}
h5,
.h5 {
- font-size: 1rem;
+ font-size: 0.75rem !important;
font-weight: 500;
line-height: 1.375;
}
h6,
.h6 {
- font-size: 0.875rem;
+ font-size: 0.625rem !important;
font-weight: 500;
line-height: 1.2857;
}
+
+.page-section {
+ margin-bottom: 2rem !important;
+}
+
+.nav-link--current{
+ background-color: $red-light-background !important;
+ color: $red !important;
+ &:hover,
+ &:focus {
+ background-color: $red-light-background !important;
+ color: $red !important;
+ }
+}
+
+.nav > :first-child {
+ border-top: 1px solid $gray-20;
+}
+
+.nav-link {
+ background-color: $gray-5;
+}
+
+.btn-link:active, .nav-link:active {
+ background-color: $red-light-background !important;
+ color: $red !important;
+}
+
+.nav-item {
+ & > button, & > a {
+ border-bottom: 1px solid $gray-20;
+ }
+}
+
+.app-header .navbar {
+ height: 53px !important;
+}
+
+.app-header .navbar-text, .app-header .nav-link, .app-header .btn-link {
+ border-radius: $border-radius;
+ &:hover {
+ background-color: $red-40 !important;
+ }
+ &:active {
+ background-color: $red-active !important;
+ }
+ &:focus {
+ outline: 0;
+ }
+} \ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 2a7b8169..86853f41 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -10,7 +10,7 @@
margin-right: $spacer / 4;
}
&:disabled {
- color: gray("600");
+ color: $red;
fill: currentColor;
box-shadow: none !important;
&:not(.btn-link) {
@@ -21,27 +21,114 @@
}
.btn-primary {
- fill: currentColor;
- &:focus,
- &:not(:disabled):not(.disabled):active:focus {
- border-color: $white;
- box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+ background-color: $red;
+ border-radius: $border-radius;
+ border: none;
+ box-shadow: 1px 2px 2px -1px #4f252566 inset;
+ &:hover {
+ background-color: $red-hover;
+ }
+ &:not(:disabled):not(.disabled):active:focus,
+ &:focus-visible {
+ border: none;
+ box-shadow: none;
+ background-color: $red-click;
+ }
+ &:focus {
+ border: none;
+ box-shadow: 0px 0px 0px 4px $red-shadow;
+ background-color: $red;
+ }
+ &:active {
+ border: none;
+ box-shadow: none;
+ background-color: $red;
}
}
.btn-secondary {
- fill: currentColor;
- &:focus,
- &:not(:disabled):not(.disabled):active:focus {
- border-color: $white;
- box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+ background-color: $gray-5;
+ color: $red;
+ border-radius: $border-radius;
+ border: none;
+ box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 20px;
+ &:hover {
+ background-color: $gray-5-hover;
+ color: $red;
+ }
+ &:focus {
+ border: none;
+ box-shadow: 0px 0px 0px 4px $red-shadow;
+ color: $red;
+ background-color: $gray-5;
+ }
+ &:not(:disabled):not(.disabled):active:focus,
+ &:focus-visible {
+ border: none;
+ box-shadow: none;
+ color: $red;
+ background-color: $gray-20;
+ }
+}
+
+.btn-unstiled {
+ border: none;
+ &:focus {
+ box-shadow: none;
+ }
+ &:active {
+ box-shadow: none;
+ }
+}
+
+.btn-popover {
+ border: none;
+ color: $red;
+ height: 28px;
+ border-radius: $border-radius;
+ font-weight: 500;
+ font-size: 12px;
+ transition: ease-in 0.2s;
+ &:hover {
+ color: $white;
+ transition: ease-in 0.2s;
+ }
+ &:focus {
+ box-shadow: none;
+ }
+ &:active {
+ box-shadow: none;
+ }
+ &.selected-unit-button {
+ transition: ease-in 0.2s;
+ color: $white;
+ }
+ &.selected-choice-button {
+ transition: ease-in 0.2s;
+ color: $white;
+ }
+}
+
+.btn-toogle-popover {
+ justify-content: flex-start;
+ width: 25px;
+ height: 16px;
+ padding: 0;
+ &:focus {
+ box-shadow: none;
+ }
+ &:active {
+ box-shadow: none;
}
}
// Global style for all button link
.btn-link {
- font-weight: $headings-font-weight;
- fill: theme-color("primary");
+ color: $text-primary;
text-decoration: none !important;
&:hover {
background-color: gray("200");
@@ -50,14 +137,19 @@
&:active {
background-color: gray("300");
}
- &:focus {
- box-shadow: inset 0 0 0 2px theme-color("primary");
- color: theme-color("primary");
- outline: none;
- }
&:disabled {
box-shadow: $btn-focus-box-shadow;
}
+ &.collapsed {
+ .icon-expand {
+ transform: rotate(180deg);
+ transition: 0.3s linear;
+ }
+ .icon-expand-right {
+ transform: rotate(180deg);
+ transition: 0.3s linear;
+ }
+ }
}
// Icon only buttons
@@ -77,6 +169,6 @@
// Contain input buttons within input
.btn-datepicker .dropdown-toggle,
.input-action-btn {
- padding: 7px;
+ padding: 6px;
margin: 1px;
} \ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss
index 5f2a5962..7e2c50dd 100644
--- a/src/assets/styles/bmc/custom/_card.scss
+++ b/src/assets/styles/bmc/custom/_card.scss
@@ -1,5 +1,27 @@
.card {
+ border-radius: $border-radius;
.bg-success {
background-color: theme-color-light('success')!important;
}
+}
+
+.card-header {
+ .card-header-tabs {
+ border: none !important;
+
+ .nav-link {
+ border: none !important;
+ color: $text-secondary;
+ font-weight: 500 !important;
+ background: none !important;
+ &:hover {
+ color: $red-hover
+ }
+ }
+
+ .nav-link.active {
+ color: $red-active !important;
+ text-decoration: underline;
+ }
+ }
} \ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 969c4c68..620c380c 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/src/assets/styles/bmc/custom/_dropdown.scss
@@ -2,17 +2,35 @@
.dropdown-menu {
z-index: $zindex-dropdown + 1;
padding: 0;
+ border-radius: $border-radius;
}
+
.dropdown-item {
- padding-left: $spacer/4;
- margin-top: -1 * $spacer/4;
+ padding: $spacer/4.9;
+ margin: $spacer/4;
+ width: auto;
+ border-radius: $border-radius;
+ &:hover {
+ background-color: $red-hover;
+ color: $white;
+ }
+ &:active {
+ background-color: $red-active;
+ }
+ &:focus {
+ outline: none;
+ background-color: $red-click;
+ box-shadow: inset 0 0 0 2px theme-color("primary");
+ }
}
+
.b-dropdown-form {
padding: $spacer/2;
.form-group {
margin-bottom: $spacer/2;
}
}
+
// Table filter dropdown clear button style
.table-filter {
.dropdown-item {
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 428a40c2..37ecc214 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -14,27 +14,15 @@
line-height: $form-line-height;
}
-.form-group {
- margin-bottom: $spacer * 2;
-}
-
.custom-select,
.form-control,
.input-group-text {
- border-color: gray("500") !important;
- background-color: gray("100");
+ border-radius: $border-radius;
+ background-color: $white;
}
.custom-select,
.form-control {
- &:active {
- border: 1px solid $primary!important;
- }
- &:focus {
- color: theme-color("dark");
- background-color: gray("100");
- box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
- }
&:disabled {
background-color: gray("400");
color: gray("600");
@@ -48,26 +36,52 @@
}
}
-.custom-select,
-.custom-control-label,
+.form-control::-webkit-outer-spin-button,
+.form-control::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+.form-control[type='number'] {
+ -moz-appearance: textfield;
+}
+
.form-control {
- color: theme-color("dark") !important;
- font-size: 1rem;
+ color: $text-secondary;
+ border-radius: $border-radius;
+ border: none;
+ background-color: $gray-5;
+ font-size: 0.875rem;
+ &:focus {
+ color: $text-secondary;
+ }
+ &:hover {
+ background-color: $gray-5-hover;
+ }
}
// Inverted form colors
.form-background {
- background-color: gray("100");
+ background-color: none;
+ padding: 0 !important;
.custom-select,
.form-control {
- background-color: $white;
+ color: #0c1c29e6;
+ border-radius: $border-radius;
+ border: none;
+ background-color: $gray-5;
+ &:hover {
+ background-color: $gray-5-hover;
+ }
&:focus {
- background-color: $white;
+ border: 1px solid gray("400");
}
&:disabled {
background-color: gray("400");
color: gray("600");
}
+ &.is-valid {
+ border: 1px solid gray("400");
+ }
}
}
@@ -76,12 +90,22 @@
line-height: $form-line-height;
}
+.custom-checkbox ::before {
+ box-shadow: none !important;
+ border: 2px solid $on-surface-secondary;
+ background-color: #fff;
+ border-radius: 3px;
+}
+
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
- background-color: $black;
- border-color: $black;
+ background-color: $red;
+ border-color: $red;
cursor: pointer;
+ &:focus {
+ box-shadow: none !important;
+ }
}
.custom-control {
@@ -94,8 +118,35 @@
}
}
-.custom-control-input:focus ~ .custom-control-label::before{
- box-shadow: 0 0 0 2px theme-color("primary");
+.custom-switch {
+ width: 28px;
+ height: 16px;
+}
+
+.custom-switch
+.custom-control-input:focus ~ .custom-control-label::before {
+ box-shadow: none;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::after {
+ border: 1px solid $gray-20;
+ background: $white;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+ border-color: $gray-20;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+ background-color: rgba(4, 10, 15, 0.3);
+ border-color: $gray-20;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::before {
+ border: 1px solid $gray-20;
+ background: rgba(4, 10, 15, 0.3);
}
.custom-control-label::after {
@@ -130,3 +181,26 @@
background-position: right 3rem bottom 50%;
}
}
+// For invisible label of fields
+.invisible {
+ height: 0;
+ margin-bottom: 0;
+}
+// Global style progress bar
+.progress {
+ height: 8px;
+ background-color: $gray-10;
+}
+
+.progress-bar {
+ background-color: $red;
+ border-radius: 4px;
+}
+
+.progress_bar_percent {
+ color: $red;
+}
+
+.system-control__radio label {
+ padding-top: 4px;
+}
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e8b5a832..8786ebb5 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -1,18 +1,18 @@
.table {
position: relative;
z-index: $zindex-dropdown;
-
+
td {
- border-top: 1px solid gray("300");
- border-bottom: 1px solid gray("300");
+ border-top: 1px solid $gray-10;
+ border-bottom: 1px solid $gray-10;
&:first-of-type {
- border-left: 1px solid gray("300");
+ border-left: 1px solid $gray-10;
}
&:last-of-type {
- border-right: 1px solid gray("300");
+ border-right: 1px solid $gray-10;
}
vertical-align: middle;
-
+ font-size: 0.875rem;
// Table action buttons
.btn-link {
width: 40px;
@@ -26,19 +26,24 @@
// thead-light added for specificity
.thead-light th {
+ background-color: $gray-10;
vertical-align: middle;
- border-top: 1px solid gray("300");
- border-bottom: 1px solid gray("300");
+ border-top: 1px solid $gray-10;
+ border-bottom: 1px solid $gray-10;
&:first-of-type {
- border-left: 1px solid gray("300");
+ border-left: 1px solid $gray-10;
}
&:last-of-type {
- border-right: 1px solid gray("300");
+ border-right: 1px solid $gray-10;
}
- color: theme-color("dark");
+ text-transform: uppercase;
+ color: $text-primary;
&:focus {
outline: none;
}
+ & > div {
+ font-size: 0.875rem !important;
+ }
}
.status-icon svg {
@@ -56,20 +61,22 @@
}
.b-table-details {
- background-color: theme-color("light");
+ background-color: inherit;
td {
- padding-left: calc(50px + (#{$table-cell-padding} * 2));
- padding-right: calc(50px + (#{$table-cell-padding} * 2));
+ padding-left: $table-cell-padding;
+ padding-right: $table-cell-padding;
}
dl {
margin: 0;
}
dt {
+ font-size: 0.75rem !important;
float: left;
clear: left;
margin-right: $spacer / 2;
}
dd {
+ font-size: 0.75rem !important;
line-height: 1.2
}
}
@@ -78,7 +85,7 @@
width: 50px;
.btn {
padding: 0;
- width: 50px;
+ width: 40px;
}
svg {
fill: theme-color("dark");
@@ -104,12 +111,12 @@
// Table stacked style for small screen only
@include media-breakpoint-down(xs) {
.b-table-stacked-sm {
- border: 1px solid gray("300");
+ border: 1px solid $gray-10;
tr {
- &:not(:first-child) > td[aria-colindex='1'] {
- border-top: 1px solid gray("300");
+ &:not(:first-child) > td[aria-colindex='1'] {
+ border-top: 1px solid $gray-10;
padding-top: 0.625rem;
}
@@ -164,8 +171,9 @@
padding-left: 1rem;
}
}
+}
+
+.table-responsive, .table-responsive-md {
+ margin-top: 0.5rem;
- .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
- border-top-width: 1px;
- }
}
generated by cgit v1.2.3 (git 2.39.0) at 2024-06-17 21:46:15 +0300