/* ----------------------------------------------------------------------------------------------------- */
/* @ Angular Material CDK helpers & overrides
/* ----------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------- */
/* @ Overlay
/* ----------------------------------------------------------------------------------------------------- */
.fuse-backdrop-on-mobile {
@apply bg-black bg-opacity-60 sm:bg-transparent #{'!important'};
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Angular Material helpers & overrides
/* ----------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------- */
/* @ Accordion
/* ----------------------------------------------------------------------------------------------------- */
.mat-accordion {
.mat-expansion-panel {
margin-bottom: 24px;
border-radius: 8px !important;
transition: box-shadow 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
@apply shadow #{'!important'};
&:last-child {
margin-bottom: 0;
}
&.mat-expanded,
&:hover {
@apply shadow-lg #{'!important'};
}
&:not(.mat-expanded) {
.mat-expansion-panel-header {
&:not([aria-disabled=true]) {
&.cdk-keyboard-focused,
&.cdk-program-focused,
&:hover {
background: transparent !important;
}
}
}
}
.mat-expansion-panel-header {
font-size: 14px;
&[aria-disabled=true] {
.mat-expansion-panel-header-description {
margin-right: 28px;
}
}
.mat-expansion-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
/* Do not override the border color of the expansion panel indicator */
&:after {
border-color: currentColor !important;
}
}
}
.mat-expansion-panel-body {
line-height: 1.7;
@apply text-secondary #{'!important'};
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Buttons
/* ----------------------------------------------------------------------------------------------------- */
.mat-button,
.mat-fab,
.mat-flat-button,
.mat-icon-button,
.mat-mini-fab,
.mat-raised-button,
.mat-stroked-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 40px;
min-height: 40px;
max-height: 40px;
line-height: 1 !important;
.mat-button-wrapper {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 100%;
z-index: 2; /* Move mat-button-wrapper above the ripple and focus overlay */
}
.mat-button-focus-overlay,
.mat-button-ripple {
z-index: 1;
}
/* Large button */
&.fuse-mat-button-large {
height: 48px;
min-height: 48px;
max-height: 48px;
}
/* Lower the icon opacity on disabled buttons */
&.mat-button-disabled {
.mat-icon {
opacity: 0.38 !important;
}
}
}
.mat-fab {
max-height: 56px;
}
/* Rounded design */
.mat-button,
.mat-flat-button,
.mat-raised-button,
.mat-stroked-button {
padding: 0 20px !important;
border-radius: 9999px !important;
}
/* Target all buttons */
.mat-button,
.mat-fab,
.mat-flat-button,
.mat-icon-button,
.mat-fab,
.mat-mini-fab,
.mat-raised-button,
.mat-stroked-button {
/* mat-progress-spinner inside buttons */
.mat-progress-spinner {
&.mat-progress-spinner-indeterminate-animation[mode=indeterminate] {
circle {
stroke: currentColor !important;
animation-duration: 6000ms;
}
}
}
}
/* Colored background buttons */
.mat-flat-button,
.mat-raised-button,
.mat-fab,
.mat-mini-fab {
.mat-icon {
color: currentColor !important;
}
/* Add hover and focus style on all buttons */
.mat-button-focus-overlay {
@apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
}
/* On palette colored buttons, use a darker color */
&.mat-primary,
&.mat-accent,
&.mat-warn {
.mat-button-focus-overlay {
background-color: rgba(0, 0, 0, 0.1) !important;
}
}
&:hover,
&.cdk-keyboard-focused,
&.cdk-program-focused {
.mat-button-focus-overlay {
opacity: 1 !important;
}
}
@media (hover: none) {
&:hover {
.mat-button-focus-overlay {
opacity: 0 !important;
}
}
}
&.mat-button-disabled {
.mat-button-focus-overlay {
opacity: 0 !important;
}
}
}
/* Transparent background buttons */
.mat-button,
.mat-icon-button,
.mat-stroked-button {
/* Apply primary color */
&.mat-primary:not(.mat-button-disabled) {
.mat-icon {
@apply text-primary #{'!important'};
}
}
/* Apply accent color */
&.mat-accent:not(.mat-button-disabled) {
.mat-icon {
@apply text-accent #{'!important'};
}
}
/* Apply warn color */
&.mat-warn:not(.mat-button-disabled) {
.mat-icon {
@apply text-warn #{'!important'};
}
}
/* Add hover and focus styles */
.mat-button-focus-overlay {
@apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
}
/* On primary colored buttons, use the primary color as focus overlay */
&.mat-primary:not(.mat-button-disabled) {
.mat-button-focus-overlay {
@apply bg-primary #{'!important'};
}
}
/* On accent colored buttons, use the accent color as focus overlay */
&.mat-accent:not(.mat-button-disabled) {
.mat-button-focus-overlay {
@apply bg-accent #{'!important'};
}
}
/* On warn colored buttons, use the warn color as focus overlay */
&.mat-warn:not(.mat-button-disabled) {
.mat-button-focus-overlay {
@apply bg-warn #{'!important'};
}
}
&.mat-primary:not(.mat-button-disabled),
&.mat-accent:not(.mat-button-disabled),
&.mat-warn:not(.mat-button-disabled) {
&:hover,
&.cdk-keyboard-focused,
&.cdk-program-focused {
.mat-button-focus-overlay {
opacity: 0.1 !important;
}
}
}
&:hover,
&.cdk-keyboard-focused,
&.cdk-program-focused {
.mat-button-focus-overlay {
opacity: 1 !important;
}
}
@media (hover: none) {
&:hover {
.mat-button-focus-overlay {
opacity: 0 !important;
}
}
}
&.mat-button-disabled {
.mat-button-focus-overlay {
opacity: 0 !important;
}
}
}
/* Stroked buttons */
.mat-stroked-button {
/* Border color */
&:not(.mat-button-disabled) {
@apply border-gray-300 dark:border-gray-500 #{'!important'};
}
&.mat-button-disabled {
@apply border-gray-200 dark:border-gray-600 #{'!important'};
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Button Toggle
/* ----------------------------------------------------------------------------------------------------- */
.mat-button-toggle-group {
border: none !important;
@apply space-x-1;
&.mat-button-toggle-group-appearance-standard {
.mat-button-toggle + .mat-button-toggle {
background-clip: padding-box;
}
}
.mat-button-toggle {
border-radius: 9999px;
overflow: hidden;
border: none !important;
font-weight: 500;
&.mat-button-toggle-checked {
.mat-button-toggle-label-content {
@apply text-default #{'!important'};
}
}
.mat-button-toggle-label-content {
padding: 0 20px;
@apply text-secondary;
}
.mat-ripple {
border-radius: 9999px;
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Checkbox
/* ----------------------------------------------------------------------------------------------------- */
.mat-checkbox {
display: inline-flex;
/* Allow multiline text */
.mat-checkbox-layout {
white-space: normal;
.mat-checkbox-inner-container {
display: inline-flex;
align-items: center;
margin: 0 8px 0 0;
/* Add a zero-width space character to trick the container */
/* into being the same height as a single line of the label */
&:after {
content: '\200b';
}
}
.mat-checkbox-label {
line-height: inherit;
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Chip
/* ----------------------------------------------------------------------------------------------------- */
.mat-chip {
font-weight: 500 !important;
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Dialog
/* ----------------------------------------------------------------------------------------------------- */
.mat-dialog-container {
border-radius: 16px !important;
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Drawer
/* ----------------------------------------------------------------------------------------------------- */
.mat-drawer-backdrop.mat-drawer-shown {
background-color: rgba(0, 0, 0, 0.6) !important;
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Form fields
/* ----------------------------------------------------------------------------------------------------- */
/* Fuse only uses 'fill' style form fields and therefore */
/* only provides fixes and tweaks for that style */
.mat-form-field.mat-form-field-appearance-fill {
/* Disabled */
&.mat-form-field-disabled {
opacity: 0.7 !important;
}
/* Invalid */
&.mat-form-field-invalid {
.mat-form-field-wrapper {
/* Border color */
.mat-form-field-flex {
@apply border-warn dark:border-warn #{'!important'};
}
}
}
/* Focused */
&.mat-focused {
.mat-form-field-wrapper {
/* Background color */
.mat-form-field-flex {
@apply bg-card dark:bg-card #{'!important'};
}
}
}
/* Focused and valid fields */
&.mat-focused:not(.mat-form-field-invalid) {
.mat-form-field-wrapper {
/* Border color */
.mat-form-field-flex {
@apply border-primary dark:border-primary #{'!important'};
}
}
}
/* Disable floating mat-label */
&.mat-form-field-has-label.mat-form-field-can-float.mat-form-field-should-float {
.mat-form-field-label-wrapper {
.mat-form-field-label {
width: 100% !important;
transform: none !important;
}
}
}
/* Remove the default arrow for native select */
&.mat-form-field-type-mat-native-select {
.mat-form-field-infix {
select {
top: auto;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-right: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748B' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right -7px center;
background-size: 24px;
.dark & {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2397a6ba' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
}
}
&:after {
display: none;
}
}
}
/* Adjustments for mat-label */
&.mat-form-field-has-label {
.mat-form-field-wrapper {
margin-top: 24px;
}
}
/* Default style tweaks and enhancements */
.mat-form-field-wrapper {
margin-bottom: 16px;
padding-bottom: 0;
.mat-form-field-flex {
position: relative;
display: flex;
align-items: stretch;
min-height: 48px;
border-radius: 6px;
padding: 0 16px;
border-width: 1px;
@apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500 #{'!important'};
.mat-form-field-prefix {
> .mat-icon {
margin-right: 12px;
}
> .mat-icon-button {
margin: 0 4px 0 -10px;
}
> .mat-select {
margin-right: 10px;
}
> .mat-datepicker-toggle {
margin-left: -8px;
}
> *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
margin-right: 12px;
}
}
.mat-form-field-suffix {
> .mat-icon {
margin-left: 12px;
}
> .mat-icon-button {
margin: 0 -10px 0 4px;
}
> .mat-select {
margin-left: 10px;
}
> .mat-datepicker-toggle {
margin-right: -8px;
}
}
.mat-form-field-prefix,
.mat-form-field-suffix {
display: inline-flex;
align-items: center;
justify-content: center;
@apply text-hint #{'!important'};
.mat-icon-button {
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
}
.mat-icon,
.mat-icon-button:not(.mat-button-disabled),
.mat-select-value {
@apply text-hint;
}
/* Remove the margins from the mat-icon if it's inside a button */
/* Force the icon size to 24 */
.mat-button,
.mat-raised-button,
.mat-icon-button,
.mat-stroked-button,
.mat-flat-button,
.mat-fab,
.mat-mini-fab {
.mat-icon {
margin: 0 !important;
@apply icon-size-6;
}
}
/* Datepicker default icon size */
.mat-datepicker-toggle-default-icon {
@apply icon-size-6;
}
/* Make mat-select usable as prefix and suffix */
.mat-select {
display: flex;
align-items: center;
&:focus {
.mat-select-trigger {
.mat-select-value {
@apply text-primary #{'!important'};
}
.mat-select-arrow-wrapper {
.mat-select-arrow {
border-top-color: var(--fuse-primary) !important;
}
}
}
}
.mat-select-trigger {
display: flex;
align-items: center;
.mat-select-value {
display: flex;
max-width: none;
mat-select-trigger {
.mat-icon {
margin: 0 !important;
}
}
}
.mat-select-arrow-wrapper {
display: flex;
align-items: center;
transform: none;
margin-left: 4px;
.mat-select-arrow {
min-height: 0;
@apply text-gray-500 dark:text-gray-400 #{'!important'};
}
}
}
}
}
.mat-form-field-infix {
position: static;
display: flex;
align-items: center;
width: 88px;
padding: 0;
border: 0;
.mat-input-element {
padding: 14px 0;
margin-top: 0;
}
/* Textarea */
textarea.mat-input-element {
display: flex;
align-self: stretch;
min-height: 36px;
height: auto;
margin: 14px 0;
padding: 0 6px 0 0;
transform: none;
}
/* Select */
.mat-select {
display: inline-flex;
.mat-select-trigger {
display: inline-flex;
align-items: center;
width: 100%;
.mat-select-value {
display: flex;
position: relative;
max-width: none;
.mat-select-value-text {
display: inline-flex;
> * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.mat-select-arrow-wrapper {
transform: translateY(0);
.mat-select-arrow {
margin: 0 0 0 8px;
}
}
}
/* Chips */
.mat-chip-list {
width: 100%;
margin: 0 -8px;
.mat-chip-input {
margin: 0 0 0 8px;
}
}
.mat-form-field-label-wrapper {
top: -25px;
height: auto;
padding-top: 0;
overflow: visible;
pointer-events: auto;
.mat-form-field-label {
position: relative;
top: 0;
margin-top: 0;
backface-visibility: hidden;
transition: none;
font-weight: 500;
@apply text-default #{'!important'};
}
}
}
}
/* Remove the underline */
.mat-form-field-underline {
display: none;
}
/* Subscript tweaks */
.mat-form-field-subscript-wrapper {
position: relative;
top: auto;
padding: 0;
margin-top: 0;
font-size: 12px;
font-weight: 500;
line-height: 1;
.mat-error,
.mat-hint {
display: block;
margin-top: 4px;
}
.mat-hint {
@apply text-hint #{'!important'};
}
}
}
/* Adds better alignment for textarea inputs */
&.fuse-mat-textarea {
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-prefix,
.mat-form-field-suffix {
align-items: flex-start;
}
.mat-form-field-prefix {
padding-top: 12px;
}
.mat-form-field-suffix {
padding-top: 12px;
}
}
}
}
/* Removes subscript space */
&.fuse-mat-no-subscript {
.mat-form-field-wrapper {
padding-bottom: 0;
margin-bottom: 0;
.mat-form-field-subscript-wrapper {
display: none !important;
height: 0 !important;
}
}
}
/* Rounded */
&.fuse-mat-rounded {
.mat-form-field-wrapper {
.mat-form-field-flex {
border-radius: 24px;
}
}
/* Emphasized affix */
&.fuse-mat-emphasized-affix {
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-prefix {
border-radius: 24px 0 0 24px;
> .mat-icon {
margin-right: 12px;
}
> .mat-icon-button {
margin-right: 2px;
}
> .mat-select {
margin-right: 8px;
}
> .mat-datepicker-toggle {
margin-right: 4px;
}
> *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
margin-right: 12px;
}
}
.mat-form-field-suffix {
border-radius: 0 24px 24px 0;
> .mat-icon {
margin-left: 12px !important;
}
> .mat-icon-button {
margin-left: 2px !important;
}
> .mat-select {
margin-left: 12px !important;
}
> .mat-datepicker-toggle {
margin-left: 4px !important;
}
> *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
margin-left: 12px !important;
}
}
}
}
}
}
/* Dense */
&.fuse-mat-dense {
.mat-form-field-wrapper {
.mat-form-field-flex {
min-height: 40px;
.mat-form-field-prefix,
.mat-form-field-suffix {
.mat-icon-button {
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
}
}
.mat-form-field-prefix {
> .mat-icon-button {
margin-left: -6px;
margin-right: 12px;
}
}
.mat-form-field-suffix {
> .mat-icon-button {
margin-left: 12px;
margin-right: -6px;
}
}
.mat-form-field-infix {
.mat-input-element {
padding: 11px 0;
}
}
}
}
/* Rounded */
&.fuse-mat-rounded {
.mat-form-field-wrapper {
.mat-form-field-flex {
border-radius: 20px;
}
}
/* Emphasized affix */
&.fuse-mat-emphasized-affix {
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-prefix {
border-radius: 20px 0 0 20px !important;
}
.mat-form-field-suffix {
border-radius: 0 20px 20px 0 !important;
}
}
}
}
}
}
/* Emphasized affix */
&.fuse-mat-emphasized-affix {
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-prefix {
margin: 0 16px 0 -16px;
padding-left: 16px;
border-radius: 6px 0 0 6px;
border-right-width: 1px;
> .mat-icon {
margin-right: 16px;
}
> .mat-icon-button {
margin: 0 6px 0 -10px;
}
> .mat-select {
margin-right: 12px;
}
> .mat-datepicker-toggle {
margin-right: 8px;
}
> *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
margin-right: 16px;
}
}
.mat-form-field-suffix {
margin: 0 -16px 0 16px;
padding-right: 16px;
border-radius: 0 6px 6px 0;
border-left-width: 1px;
> .mat-icon {
margin-left: 16px;
}
> .mat-icon-button {
margin: 0 -10px 0 6px;
}
> .mat-select {
margin: 0 -4px 0 16px;
}
> .mat-datepicker-toggle {
margin-left: 8px;
}
> *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
margin-left: 16px;
}
}
.mat-form-field-prefix,
.mat-form-field-suffix {
@apply bg-default border-gray-300 dark:border-gray-500 #{'!important'};
}
}
}
}
/* Bolder border width */
&.fuse-mat-bold {
.mat-form-field-wrapper {
.mat-form-field-flex {
border-width: 2px !important;
}
}
}
}
/* Fix the outline appearance */
.mat-form-field.mat-form-field-appearance-outline {
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-outline {
@apply text-gray-300 dark:text-gray-500 #{'!important'};
}
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Datepicker
/* ----------------------------------------------------------------------------------------------------- */
/* Hover and active cell content background opacity */
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,
.cdk-keyboard-focused .mat-calendar-body-active,
.cdk-program-focused .mat-calendar-body-active {
& > .mat-calendar-body-cell-content {
&:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
@apply bg-primary bg-opacity-30 #{'!important'};
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Icon
/* ----------------------------------------------------------------------------------------------------- */
.mat-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
font-size: 24px;
line-height: 24px;
-webkit-appearance: none !important;
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Inputs
/* ----------------------------------------------------------------------------------------------------- */
.mat-input-element {
&::placeholder {
transition: none !important;
@apply text-hint #{'!important'};
}
&::-moz-placeholder {
transition: none !important;
@apply text-hint #{'!important'};
}
&::-webkit-input-placeholder {
transition: none !important;
@apply text-hint #{'!important'};
}
&:-ms-input-placeholder {
transition: none !important;
@apply text-hint #{'!important'};
}
}
/* Invalid */
.mat-form-field-invalid {
.mat-input-element {
/* Placeholder color */
&::placeholder {
@apply text-warn #{'!important'};
}
&::-moz-placeholder {
@apply text-warn #{'!important'};
}
&::-webkit-input-placeholder {
@apply text-warn #{'!important'};
}
&:-ms-input-placeholder {
@apply text-warn #{'!important'};
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Menu
/* ----------------------------------------------------------------------------------------------------- */
.mat-menu-panel {
min-width: 144px !important;
.mat-menu-content {
.mat-menu-item {
display: flex;
align-items: center;
&.mat-menu-item-submenu-trigger {
padding-right: 40px;
}
.mat-icon {
margin-right: 12px;
}
}
/* Divider within mat-menu */
mat-divider {
margin: 8px 0;
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Paginator
/* ----------------------------------------------------------------------------------------------------- */
.mat-paginator {
.mat-paginator-container {
padding: 8px 16px;
justify-content: space-between;
@screen sm {
justify-content: normal;
}
/* Page size select */
.mat-paginator-page-size {
align-items: center;
min-height: 40px;
margin: 8px;
.mat-paginator-page-size-label {
display: none;
margin-right: 12px;
@screen sm {
display: block;
}
}
.mat-paginator-page-size-select {
margin: 0;
.mat-form-field-wrapper {
margin-bottom: 0;
.mat-form-field-flex {
min-height: 32px;
padding: 0 10px;
}
}
}
}
/* Range actions */
.mat-paginator-range-actions {
margin: 8px 0;
.mat-paginator-range-label {
margin-right: 16px;
}
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Select
/* ----------------------------------------------------------------------------------------------------- */
.mat-select {
display: inline-flex;
.mat-select-placeholder {
transition: none !important;
@apply text-hint #{'!important'};
}
.mat-select-trigger {
display: inline-flex;
align-items: center;
width: 100%;
height: auto;
.mat-select-value {
display: flex;
position: relative;
max-width: none;
.mat-select-value-text {
display: inline-flex;
> * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.mat-select-arrow-wrapper {
transform: translateY(0);
.mat-select-arrow {
margin: 0 4px 0 2px;
}
}
}
/* Invalid */
.mat-form-field-invalid {
.mat-select {
/* Placeholder color */
.mat-select-placeholder {
@apply text-warn #{'!important'};
}
}
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Slide Toggle
/* ----------------------------------------------------------------------------------------------------- */
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color: rgba(var(--fuse-accent-500-rgb), 0.54) !important;
}
.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
background-color: rgba(var(--fuse-primary-500-rgb), 0.54) !important;
}
.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {
background-color: rgba(var(--fuse-warn-500-rgb), 0.54) !important;
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Stepper
/* ----------------------------------------------------------------------------------------------------- */
.mat-step-icon {
/* Do not override the mat-icon color */
.mat-icon {
color: currentColor !important;
}
}
.mat-step-label,
.mat-step-label-selected {
font-weight: 500 !important;
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Tabs
/* ----------------------------------------------------------------------------------------------------- */
.mat-tab-group {
/* No header */
&.fuse-mat-no-header {
.mat-tab-header {
height: 0 !important;
max-height: 0 !important;
border: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
}
.mat-tab-header {
border-bottom: none !important;
.mat-tab-label-container {
padding: 0 24px;
.mat-tab-list {
.mat-tab-labels {
.mat-tab-label {
min-width: 0 !important;
height: 40px !important;
padding: 0 20px !important;
border-radius: 9999px !important;
@apply text-secondary;
&.mat-tab-label-active {
@apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
@apply text-default #{'!important'};
}
+ .mat-tab-label {
margin-left: 4px;
}
.mat-tab-label-content {
line-height: 20px;
}
}
}
.mat-ink-bar {
display: none !important;
}
}
}
}
.mat-tab-body-content {
padding: 24px;
}
}
.mat-tab-label {
opacity: 1 !important;
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Textarea
/* ----------------------------------------------------------------------------------------------------- */
textarea.mat-input-element {
box-sizing: content-box !important;
}
/* ----------------------------------------------------------------------------------------------------- */
/* @ Toolbar
/* ----------------------------------------------------------------------------------------------------- */
.mat-toolbar {
/* Apply primary contrast color */
&.mat-primary {
.mat-icon {
@apply text-on-primary #{'!important'};
}
.text-secondary {
@apply text-on-primary text-opacity-60 #{'!important'};
}
.text-hint {
@apply text-on-primary text-opacity-38 #{'!important'};
}
.text-disabled {
@apply text-on-primary text-opacity-38 #{'!important'};
}
.divider {
@apply text-on-primary text-opacity-12 #{'!important'};
}
}
/* Apply accent contrast color */
&.mat-accent {
.mat-icon {
@apply text-on-accent #{'!important'};
}
.text-secondary {
@apply text-on-accent text-opacity-60 #{'!important'};
}
.text-hint {
@apply text-on-accent text-opacity-38 #{'!important'};
}
.text-disabled {
@apply text-on-accent text-opacity-38 #{'!important'};
}
.divider {
@apply text-on-accent text-opacity-12 #{'!important'};
}
}
/* Apply warn contrast color */
&.mat-warn {
.mat-icon {
@apply text-on-warn #{'!important'};
}
.text-secondary {
@apply text-on-warn text-opacity-60 #{'!important'};
}
.text-hint {
@apply text-on-warn text-opacity-38 #{'!important'};
}
.text-disabled {
@apply text-on-warn text-opacity-38 #{'!important'};
}
.divider {
@apply text-on-warn text-opacity-12 #{'!important'};
}
}
}