66 lines
1.2 KiB
CSS
66 lines
1.2 KiB
CSS
|
.surface {
|
||
|
|
background-color: var(--tutu-color-surface);
|
||
|
|
color: var(--tutu-color-on-surface);
|
||
|
|
}
|
||
|
|
|
||
|
|
.touchTarget {
|
||
|
|
min-width: 44px;
|
||
|
|
min-height: 44px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
composes: buttonText from './typography.module.css';
|
||
|
|
composes: touchTarget;
|
||
|
|
|
||
|
|
border: none;
|
||
|
|
background-color: transparent;
|
||
|
|
color: var(--tutu-color-primary);
|
||
|
|
font-family: inherit;
|
||
|
|
|
||
|
|
&:focus,&:hover,&:focus-visible {
|
||
|
|
background-color: var(--tutu-color-surface-dd);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.pressed {
|
||
|
|
background-color: var(--tutu-color-surface-d);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.raised {
|
||
|
|
background-color: var(--tutu-color-primary);
|
||
|
|
color: var(--tutu-color-on-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:disabled, &[aria-disabled]:not([aria-disabled="false"]) {
|
||
|
|
color: #9e9e9e;
|
||
|
|
|
||
|
|
&:focus,&:hover,&:focus-visible {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar &, .appbar & {
|
||
|
|
height: 100%;
|
||
|
|
margin-block: 0;
|
||
|
|
padding-block: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.appbar & {
|
||
|
|
color: var(--tutu-color-on-primary);
|
||
|
|
|
||
|
|
&:focus,&:hover,&:focus-visible {
|
||
|
|
background-color: var(--tutu-color-primary-ll);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.pressed {
|
||
|
|
background-color: var(--tutu-color-primary-l);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar & {
|
||
|
|
color: var(--tutu-color-on-surface);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|