Topic: Angular Chips not using SCSS variables
ECKD Service Gmbh pro premium priority asked 5 years ago
Expected behavior Overwriting Chips SCSS Variables affects Chips styling.
Actual behavior Currently in _chips-pro.scss there are two definitions of .chip, the second one commented with // Angular styles and without usage of variables.
first chip definition (with variables)
// Chips
.chip {
display: inline-block;
height: $chip-height;
font-size: $chip-font-size;
font-weight: $chip-font-weight;
color: $chip-font-color;
line-height: $chip-line-height;
padding: 0 $chip-padding-right;
border-radius: $chip-br;
background-color: $chip-background-color;
margin-bottom: $chip-margin-bottom;
margin-right: $chip-margin-right;
cursor: pointer;
transition: $pagination-page-link-transition;
&:hover {
transition: $pagination-page-link-transition;
background-color: $grey-lighten-2;
}
&:focus {
transition: $pagination-page-link-transition;
background-color: $grey-lighten-1;
}
&:active {
transition: $pagination-page-link-transition;
@extend .z-depth-1;
}
img {
float: left;
margin: 0 $chip-img-margin-right 0 $chip-img-margin-left;
height: $chip-img-height;
width: $chip-img-width;
border-radius: 50%;
}
.close {
cursor: pointer;
float: right;
font-size: $chip-close-font-size;
line-height: $chip-close-line-height;
padding-left: $chip-close-padding-left;
transition: all 0.1s linear;
}
}
Second definition without variables
// Angular styles
.chip {
display: inline-block;
height: 32px;
font-size: 13px;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
line-height: 32px;
padding: 0 12px;
border-radius: 16px;
background-color: #eceff1;
margin-bottom: 1rem;
margin-right: 1rem;
img {
float: left;
margin: 0 8px 0 -12px;
height: 32px;
width: 32px;
border-radius: 50%;
}
.close {
cursor: pointer;
float: right;
font-size: 16px;
line-height: 32px;
padding-left: 8px;
transition: all 0.1s linear;
}
}
Is there a specific reason for this?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.8.1
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
Thanks, we will take a closer look at that and remove the extra styles if they are not needed anymore.