mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-03 15:11:37 +00:00
1451 lines
38 KiB
SCSS
1451 lines
38 KiB
SCSS
/* ----------------------------------------------------------------------------------------------------- */
|
|
/* @ 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'};
|
|
}
|
|
}
|
|
}
|