You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
8.5 KiB
322 lines
8.5 KiB
2 years ago
|
@import '../abstracts/variables';
|
||
|
|
|
||
|
|
.button-group-root {
|
||
|
|
border-radius: var(--default-borderradius);
|
||
|
|
display: inline-flex;
|
||
|
|
|
||
|
|
.button-root {
|
||
|
|
border-radius: var(--default-borderradius);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-override-styles {
|
||
|
|
.button {
|
||
|
|
color: var(--palette-text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-root {
|
||
|
|
background-color: inherit;
|
||
|
|
box-shadow: none;
|
||
|
|
border: none;
|
||
|
|
|
||
|
|
&:hover, &:focus-visible {
|
||
|
|
background-color: var(--palette-action-default-hover);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.button-group-horizontal {
|
||
|
|
&:not(.button-group-rtl) {
|
||
|
|
> .button-root:not(:last-child), > :not(:last-child) .button-root {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
margin-left: -1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-rtl {
|
||
|
|
> .button-root:not(:last-child), > :not(:last-child) .button-root {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
margin-left: -1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group-vertical {
|
||
|
|
flex-direction: column;
|
||
|
|
.icon-button {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .button-root:not(:last-child), > :not(:last-child) .button-root {
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
margin-top: -1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group-text {
|
||
|
|
&.button-group-override-styles {
|
||
|
|
.button-root {
|
||
|
|
padding: 6px 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-horizontal {
|
||
|
|
&:not(.button-group-rtl) {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-left: 1px solid var(--palette-text-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-rtl {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-right: 1px solid var(--palette-text-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-vertical {
|
||
|
|
.button-root:not(:last-child), > :not(:last-child) .button-root {
|
||
|
|
border-bottom: 1px solid var(--palette-text-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color in $palette-colors {
|
||
|
|
&.button-group-text-#{$color} {
|
||
|
|
.button-root {
|
||
|
|
color: var(--palette-#{$color});
|
||
|
|
|
||
|
|
&:hover, &:focus-visible {
|
||
|
|
background-color: var(--palette-#{$color}-hover);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-horizontal {
|
||
|
|
&:not(.button-group-rtl) {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-left: 1px solid var(--palette-#{$color});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-rtl {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-right: 1px solid var(--palette-#{$color});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-vertical {
|
||
|
|
.button-root:not(:last-child), > :not(:last-child) .button-root {
|
||
|
|
border-bottom: 1px solid var(--palette-#{$color});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group-outlined {
|
||
|
|
&.button-group-override-styles {
|
||
|
|
.button-root {
|
||
|
|
padding: 5px 15px;
|
||
|
|
border: 1px solid var(--palette-text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color in $palette-colors {
|
||
|
|
&.button-group-outlined-#{$color} .button-root {
|
||
|
|
color: var(--palette-#{$color});
|
||
|
|
border: 1px solid var(--palette-#{$color});
|
||
|
|
|
||
|
|
&:hover, &:focus-visible {
|
||
|
|
background-color: var(--palette-#{$color}-hover);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group-filled {
|
||
|
|
box-shadow: var(--elevation-2);
|
||
|
|
|
||
|
|
.button-root {
|
||
|
|
box-shadow: none;
|
||
|
|
|
||
|
|
&:hover, &:focus-visible {
|
||
|
|
box-shadow: var(--elevation-4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-override-styles {
|
||
|
|
.button-root {
|
||
|
|
background-color: var(--palette-action-default-hover);
|
||
|
|
padding: 6px 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-horizontal {
|
||
|
|
&:not(.button-group-rtl) {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-left: 1px solid var(--palette-divider);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-rtl {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-right: 1px solid var(--palette-divider);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-vertical {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-top: 1px solid var(--palette-divider);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color in $palette-colors {
|
||
|
|
&.button-group-filled-#{$color} {
|
||
|
|
.button-root {
|
||
|
|
background-color: var(--palette-#{$color});
|
||
|
|
color: var(--palette-#{$color}-text);
|
||
|
|
|
||
|
|
&:hover, &:focus-visible {
|
||
|
|
background-color: var(--palette-#{$color}-darken);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-horizontal {
|
||
|
|
&:not(.button-group-rtl) {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-left: 1px solid var(--palette-#{$color}-lighten);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-rtl {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-right: 1px solid var(--palette-#{$color}-lighten);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-vertical {
|
||
|
|
.button-root:not(:first-child), > :not(:first-child) .button-root {
|
||
|
|
border-top: 1px solid var(--palette-#{$color}-lighten);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group-disable-elevation {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group-root {
|
||
|
|
&.button-group-text-size-small .button-root {
|
||
|
|
padding: 4px 5px;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
|
||
|
|
&.icon-button .icon-root {
|
||
|
|
font-size: 1.422rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-text-size-large .button-root {
|
||
|
|
padding: 8px 11px;
|
||
|
|
font-size: 0.9375rem;
|
||
|
|
|
||
|
|
&.icon-button .icon-root {
|
||
|
|
font-size: 1.641rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-outlined-size-small .button-root {
|
||
|
|
padding: 3px 9px;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
|
||
|
|
&.icon-button {
|
||
|
|
padding: 3px 9px;
|
||
|
|
|
||
|
|
.icon-root {
|
||
|
|
font-size: 1.422rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-outlined-size-large .button-root {
|
||
|
|
padding: 7px 21px;
|
||
|
|
font-size: 0.9375rem;
|
||
|
|
|
||
|
|
&.icon-button {
|
||
|
|
padding: 7px 15px;
|
||
|
|
|
||
|
|
.icon-root {
|
||
|
|
font-size: 1.641rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-filled-size-small .button-root {
|
||
|
|
padding: 4px 10px;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
|
||
|
|
&.icon-button {
|
||
|
|
padding: 4px 10px;
|
||
|
|
|
||
|
|
.icon-root {
|
||
|
|
font-size: 1.422rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.button-group-filled-size-large .button-root {
|
||
|
|
padding: 8px 22px;
|
||
|
|
font-size: 0.9375rem;
|
||
|
|
|
||
|
|
&.icon-button {
|
||
|
|
padding: 8px 16px;
|
||
|
|
|
||
|
|
.icon-root {
|
||
|
|
font-size: 1.641rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group-root {
|
||
|
|
.button-root.icon-button {
|
||
|
|
padding-right: 12px;
|
||
|
|
padding-left: 12px;
|
||
|
|
|
||
|
|
.icon-root {
|
||
|
|
font-size: 1.516rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.ripple-icon {
|
||
|
|
&:after {
|
||
|
|
transform: scale(10,10);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active:after {
|
||
|
|
transform: scale(0,0);
|
||
|
|
opacity: 0.1;
|
||
|
|
transition: 0s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|