Merge remote-tracking branch 'origin/ervu/tmp_makets' into ervu/tmp_makets
* origin/ervu/tmp_makets: bg colours selectize-dropdown // graph-donut
This commit is contained in:
Фоат Саляхов
commit
70b6c5c4b5
2 changed files with 35 additions and 121 deletions
|
|
@ -32,6 +32,13 @@
|
|||
color: var(--color-text-primary);
|
||||
font-family: 'GolosUI';
|
||||
}
|
||||
.webbpm.ervu_dashboard .selectize-dropdown {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.webbpm.ervu_dashboard .selectize-dropdown-content {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.webbpm.ervu_dashboard .block-panel button-component {
|
||||
position: relative;
|
||||
|
|
@ -219,148 +226,58 @@
|
|||
overflow: visible;
|
||||
}
|
||||
|
||||
.webbpm.ervu_dashboard .graph-chart .chart-content {
|
||||
width: min(10vw, 12.5rem);
|
||||
height: min(7vw, 9rem);
|
||||
}
|
||||
.webbpm.ervu_dashboard :is(.graph-donut, .graph-donut-large) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-chart .chart-content {
|
||||
width: min(10vw, 12.5rem);
|
||||
height: min(7vw, 9rem);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-donut .chart-content {
|
||||
width: min(8vw, 11rem);
|
||||
height: min(8vw, 11rem);
|
||||
width: 196px;
|
||||
height: 196px;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-donut-medium .chart-content {
|
||||
width: min(10vw, 13.5rem);
|
||||
height: min(10vw, 13.5rem);
|
||||
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-donut-large .chart-content {
|
||||
width: min(14vw, 18.5rem);
|
||||
height: min(14vw, 18.5rem);
|
||||
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend .horizontal-container {
|
||||
align-items: center;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend .horizontal-container > text {
|
||||
flex: 1;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend .horizontal-container > text.text-invert:not(.mute) > div > div:last-of-type {
|
||||
font-size: var(--size-num-primary);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend .mute {
|
||||
margin-top: var(--indent-small);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend .lined {
|
||||
padding-top: var(--indent-small);
|
||||
margin-top: var(--indent-small);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container > * + * {
|
||||
padding-top: var(--indent-small);
|
||||
margin-top: var(--indent-small);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container > hbox [class*="legend-col"] {
|
||||
margin-top: var(--indent-xmini);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert:not(.mute) {
|
||||
font-size: var(--size-num-primary);
|
||||
margin-top: var(--indent-xmini);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert:not(.mute) label {
|
||||
font-size: var(--size-text-primary);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert > div {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox {
|
||||
padding-right: 0;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox + vbox {
|
||||
padding-left: var(--indent-base);
|
||||
margin-left: var(--indent-base);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container {
|
||||
height: 100%;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container [class*="legend-col"] {
|
||||
padding-bottom: var(--indent-base);
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container .text-invert:not(.mute) {
|
||||
font-size: var(--size-num-primary);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container .text-invert:not(.mute) label {
|
||||
font-size: var(--size-text-primary);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-right {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-right .text-invert > div {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.webbpm.ervu_dashboard .graph-legend-right .text-invert > div > div:last-of-type {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--size-num-primary);
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] ervu-chart-v2 ~ hbox,
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] > div > hbox {
|
||||
margin-top: var(--indent-mini);
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .form-group {
|
||||
align-items: baseline;
|
||||
line-height: normal;
|
||||
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .mute {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] [class*="legend-col"] {
|
||||
position: relative;
|
||||
padding-left: var(--indent-large);
|
||||
padding-left: var(--indent-xbase);
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] [class*="legend-col"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: var(--indent-base);
|
||||
height: var(--indent-base);
|
||||
top: var(--indent-xmini);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
border-radius: var(--indent-base);
|
||||
}
|
||||
border-radius: 12px;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-green::before {
|
||||
background-color: var(--color-success);
|
||||
background-color: #a3bd9c;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-red::before {
|
||||
background-color: var(--color-error);
|
||||
background-color: #e4aaac;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-yellow::before {
|
||||
background-color: #ffc737;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-blue-lt::before {
|
||||
background-color: #00f0ff;
|
||||
background-color: #d4c892;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-blue::before {
|
||||
background-color: #17a8fa;
|
||||
background-color: #a0c3f0;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-lila::before {
|
||||
background-color: #e24fd4;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-coral::before {
|
||||
background-color: #ff4f5e;
|
||||
background-color: #9193b7;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-orange::before {
|
||||
background-color: #d98200;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-orange-dk::before {
|
||||
background-color: #db5c00;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-olive::before {
|
||||
background-color: #808000;
|
||||
}
|
||||
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-dark-blue::before {
|
||||
background-color: #4d66cc;
|
||||
background-color: #e9decd;
|
||||
}
|
||||
|
||||
.webbpm.ervu_dashboard grid-v2 {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@
|
|||
|
||||
--border: rgba(1, 72, 116, 0.1);
|
||||
--shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.15);
|
||||
--bg-red: #f1d2d2;
|
||||
--bg-blue: #a1c2e0;
|
||||
--bg-yellow: #e7dcab;
|
||||
--bg-green: #96b9ad;
|
||||
--bg-orange: #e9decd;
|
||||
|
||||
--input-bg: rgba(53, 126, 172, 0.05);
|
||||
--input-border: rgba(53, 126, 172, 0.2);
|
||||
|
|
@ -18,19 +23,11 @@
|
|||
--size-text-header: 28px;
|
||||
--size-text-title: 20px;
|
||||
--size-text-subtitle: 16px;
|
||||
--size-text-addprimary: min(1vw, 1.25rem); /*20px*/
|
||||
--size-text-primary: 14px;
|
||||
--size-text-secondary: 12px;
|
||||
|
||||
--size-num-title: min(3vw, 3.75rem); /*60px*/
|
||||
--size-num-subtitle: min(2.4vw, 3rem); /*48px*/
|
||||
--size-num-addtitle: min(2vw, 2.5rem); /*40px*/
|
||||
--size-num-primary: min(1.6vw, 2rem); /*32px*/
|
||||
--size-num-secondary: min(1.2vw, 1.5rem); /*24px*/
|
||||
|
||||
--indent-huge: min(2.4vw, 3rem); /*48*/
|
||||
--indent-xlarge: 40px;
|
||||
--indent-large: min(1.6vw, 2rem); /*32*/
|
||||
--indent-large: 32px;
|
||||
--indent-medium: 24px;
|
||||
--indent-xbase: 20px;
|
||||
--indent-base: 16px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue