purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 12:05:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Angular Material) Apply rounded styles by default

Browse Source
This commit is contained in:
sercan 2021-07-01 12:23:49 +03:00
parent f369206ef8
commit c86a538d41
2 changed files with 62 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/@fuse/styles/overrides/angular-material.scss
View File

@ -136,11 +136,8 @@
.mat-flat-button, .mat-flat-button,
.mat-raised-button, .mat-raised-button,
.mat-stroked-button { .mat-stroked-button {
padding: 0 20px !important;
.fuse-mat-rounded & { border-radius: 9999px !important;
padding: 0 20px;
border-radius: 9999px;
}
} }
/* Target all buttons */ /* Target all buttons */
@ -334,6 +331,8 @@
/* @ Button Toggle /* @ Button Toggle
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */
.mat-button-toggle-group { .mat-button-toggle-group {
border: none !important;
@apply space-x-1;
&.mat-button-toggle-group-appearance-standard { &.mat-button-toggle-group-appearance-standard {
@ -341,36 +340,27 @@
background-clip: padding-box; background-clip: padding-box;
} }
} }
}
/* Rounded design */ .mat-button-toggle {
.fuse-mat-rounded { border-radius: 9999px;
overflow: hidden;
.mat-button-toggle-group {
border: none !important; border: none !important;
@apply space-x-1; font-weight: 500;
.mat-button-toggle { &.mat-button-toggle-checked {
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 { .mat-button-toggle-label-content {
padding: 0 20px; @apply text-default #{'!important'};
@apply text-secondary;
} }
}
.mat-ripple { .mat-button-toggle-label-content {
border-radius: 9999px; padding: 0 20px;
} @apply text-secondary;
}
.mat-ripple {
border-radius: 9999px;
} }
} }
} }
@ -1329,62 +1319,55 @@
opacity: 0 !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 { .mat-tab-label {
opacity: 1 !important; opacity: 1 !important;
} }
/* Rounded design */
.fuse-mat-rounded {
.mat-tab-group {
.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;
}
}
}
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */
/* @ Textarea /* @ Textarea
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */

3
src/index.html
View File

@ -50,8 +50,7 @@
</head> </head>
<!-- Apply the rounded design throughout the Angular Material library --> <body>
<body class="fuse-mat-rounded">
<!-- Splash screen --> <!-- Splash screen -->
<fuse-splash-screen> <fuse-splash-screen>