Skip to content
Snippets Groups Projects
Commit 1402abc8 authored by Cindy's avatar Cindy Committed by pybelecalo
Browse files

[FIX TRTL-558] [US TRTL-531] design select

parent 3cb3a8e1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ui/ui-frontend-common/src/sass/_button.scss
+ 0
− 1
View file @ 1402abc8
......@@ -60,7 +60,6 @@
.btn span+i, .btn i+span {
padding-left: 0.5rem;
text-decoration:underline;
}
.btn {
......
ui/ui-frontend-common/src/sass/material/_autocomplete.scss
+ 1
− 0
View file @ 1402abc8
......@@ -7,6 +7,7 @@
.mat-option {
height: 50px;
padding: 14px 16px;
}
.mat-option:not(:last-child) {
......
ui/ui-frontend-common/src/sass/material/_select.scss
+ 72
− 39
View file @ 1402abc8
.vitamui-mat-select.mat-select-panel {
@include mat-select-panel
@include mat-select-panel;
}
.vitamui-mat-select.mat-form-field {
font-family: "Mulish", sans-serif;
font-size: 14px;
font-weight: 500;
width: 240px;
......@@ -14,7 +15,12 @@
&.mat-focused {
.mat-form-field-label {
color: $greyish-two;
color: var(--vitamui-grey-600);
}
.mat-form-field-flex {
outline: none;
border: solid 1px var(--vitamui-primary) !important;
}
}
......@@ -31,7 +37,7 @@
}
.mat-form-field-label {
color: $greyish-two;
color: var(--vitamui-grey-600);
font-weight: 400;
.mat-form-field-required-marker {
......@@ -41,7 +47,8 @@
&.mat-form-field-type-mat-input {
.mat-form-field-flex .mat-form-field-infix {
transition: border-top-width .4s cubic-bezier(.25,.8,.25,1), padding-bottom .4s cubic-bezier(.25,.8,.25,1);
transition: border-top-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
padding-bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
&.mat-form-field-should-float .mat-form-field-flex .mat-form-field-infix {
......@@ -67,58 +74,84 @@
}
&.mat-form-field-type-mat-select {
&.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
display: none;
}
&.mat-form-field-disabled {
opacity: 0.4;
.mat-form-field-flex {
background-color: var(--vitamui-grey-300);
.mat-select .mat-select-value {
font-weight: normal;
color: var(--vitamui-grey-700);
}
&:hover {
box-shadow: none;
}
.select-arrow {
i {
color: var(--vitamui-grey-700);
}
}
}
}
}
.mat-form-field-label {
color: var(--vitamui-grey-900);
.mat-form-field-label {
color: var(--vitamui-grey-900);
}
.mat-form-field-flex {
padding-right: 15px;
border: 1px solid var(--vitamui-grey-300);
.mat-form-field-infix {
border-top-width: 0;
display: flex;
align-items: center;
width: 100%;
}
.mat-form-field-flex {
border: 1px solid var(--vitamui-grey-300);
padding-right: 15px;
.mat-form-field-infix {
border-top-width: 0;
display: flex;
align-items: center;
width: 100%;
}
.mat-select .mat-select-value {
font-family: "Mulish", sans-serif;
}
.mat-select .mat-select-value {
color: var(--vitamui-grey-900);
font-weight: normal;
}
.mat-select .mat-select-arrow-wrapper {
visibility: hidden;
}
.mat-select .mat-select-arrow-wrapper {
visibility: hidden;
.select-arrow {
display: flex;
flex-direction: column;
margin-top: -8px;
i{
height: 10px;
font-size: 18px;
}
}
}
.select-arrow {
display: flex;
flex-direction: column;
margin-top: -8px;
:not(.mat-form-field-disabled).mat-form-field-flex {
&:hover {
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}
i {
height: 10px;
font-size: 18px;
color: var(--vitamui-primary);
}
}
.mat-select .mat-select-value {
color: var(--vitamui-grey-900);
font-weight: 700;
}
&:hover {
@include elevation-1;
.select-arrow {
i {
color: var(--vitamui-primary);
}
}
}
&.no-padding .mat-form-field-wrapper {
padding-bottom: 0;
}
......@@ -135,9 +168,9 @@
height: 25px;
padding: 0;
border: none;
&:hover {
@include elevation-0;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}
}
......
ui/ui-frontend-common/src/sass/mixins/material/_select.scss
+ 26
− 25
View file @ 1402abc8
......@@ -2,52 +2,53 @@
border-radius: 5px;
background-color: white;
border: solid 1px var(--vitamui-grey-400);
padding: 10px 0;
.mat-select-content {
background: transparent;
}
.mat-option {
font-family: 'Mulish', sans-serif;
color: var(--vitamui-grey-900);
height: 50px;
padding: 14px 16px;
}
.mat-option-text {
display: flex;
align-items: center;
font-family:'Mulish', sans-serif;
font-size: 14px;
line-height: 2em;
height: 2em;
padding: 0px 30px;
line-height: 22px;
color: var(--vitamui-grey-900);
letter-spacing: 0.1px;
}
.mat-option:not(:last-child) {
border-bottom: 1px solid var(--vitamui-grey-300);
}
.mat-option.mat-active,
.mat-option:hover:not(.mat-option-disabled),
.mat-option:focus:not(.mat-option-disabled) {
background-color: var(--vitamui-grey-300);
color: var(--vitamui-grey-900);
}
.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
background-color: var(--vitamui-grey-300);
color: var(--vitamui-grey-900);
}
.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-active):not(:hover) {
.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled){
font-weight: 700;
}
.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled):not(:hover) {
background: none;
}
.mat-option.mat-selected:not(.mat-option-multiple) {
font-weight: 500;
color: white;
&:before {
content: 'check';
font-family: 'Material Icons';
color: white;
display: block;
position: absolute;
left: 10px;
}
.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-active):not(:hover) {
background: none;
}
.mat-option-disabled {
color: $greyish-two;
color: var(--vitamui-grey-300);
}
}
.mat-select-panel:not([class*="mat-elevation-z"]) {
box-shadow: none !important;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment