71 lines
1.2 KiB
CSS
71 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: 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);
|
|
}
|
|
}
|