salix/front/core/components/chip/style.scss

72 lines
1.5 KiB
SCSS
Raw Normal View History

2019-02-06 10:24:29 +00:00
@import "variables";
2018-09-04 09:49:00 +00:00
vn-chip {
2019-11-05 07:59:48 +00:00
border-radius: 1em;
2019-10-18 19:36:30 +00:00
background-color: $color-bg;
color: $color-font;
2019-10-30 15:57:14 +00:00
font-size: .9rem;
2019-10-18 19:36:30 +00:00
margin: .25em;
display: inline-flex;
align-items: center;
2019-11-05 07:59:48 +00:00
height: 2em;
2019-10-30 15:57:14 +00:00
max-width: 100%;
box-sizing: border-box;
2018-09-14 07:10:30 +00:00
2019-10-18 19:36:30 +00:00
&.colored {
background-color: $color-main;
2019-12-23 07:05:58 +00:00
color: $color-font-bg;
}
&.notice {
background-color: $color-notice-medium
}
&.success {
background-color: $color-success-medium;
}
&.warning {
background-color: $color-main-medium;
}
&.alert {
background-color: $color-alert-medium;
}
&.message {
2019-10-18 19:36:30 +00:00
color: $color-font-dark;
2019-12-23 07:05:58 +00:00
background-color: $color-bg-dark
2018-09-07 10:20:57 +00:00
}
2019-12-23 07:05:58 +00:00
2019-10-18 19:36:30 +00:00
& > div {
display: flex;
align-items: center;
height: 100%;
2019-10-30 15:57:14 +00:00
padding: 0 .7em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
2018-09-07 10:20:57 +00:00
2019-10-18 19:36:30 +00:00
& > vn-avatar {
margin-left: -0.7em;
2019-10-30 15:57:14 +00:00
margin-right: .3em;
vertical-align: middle;
2019-11-05 10:57:05 +00:00
height: 2em;
2019-10-30 15:57:14 +00:00
width: 2em;
2019-10-18 19:36:30 +00:00
}
2018-09-04 09:49:00 +00:00
}
2019-10-18 19:36:30 +00:00
& > vn-icon {
2019-10-30 15:57:14 +00:00
margin-right: .12em;
margin-left: -.12em;
2019-10-18 19:36:30 +00:00
vertical-align: middle;
opacity: .6;
cursor: pointer;
transition: opacity 250ms ease-out;
2018-09-14 07:10:30 +00:00
2019-10-18 19:36:30 +00:00
&:hover,
&:focus {
opacity: 1;
}
2018-09-14 07:10:30 +00:00
}
2019-10-18 19:36:30 +00:00
}
vn-avatar {
display: inline-block;
2019-10-30 15:57:14 +00:00
min-width: 2em;
2019-10-18 19:36:30 +00:00
border-radius: 50%;
2018-09-04 09:49:00 +00:00
}