purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-24 11:53:19 +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

33
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,14 +340,6 @@
background-clip: padding-box; background-clip: padding-box;
} }
} }
}
/* Rounded design */
.fuse-mat-rounded {
.mat-button-toggle-group {
border: none !important;
@apply space-x-1;
.mat-button-toggle { .mat-button-toggle {
border-radius: 9999px; border-radius: 9999px;
@ -372,7 +363,6 @@
border-radius: 9999px; border-radius: 9999px;
} }
} }
}
} }
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */
@ -1329,16 +1319,6 @@
opacity: 0 !important; opacity: 0 !important;
} }
} }
}
.mat-tab-label {
opacity: 1 !important;
}
/* Rounded design */
.fuse-mat-rounded {
.mat-tab-group {
.mat-tab-header { .mat-tab-header {
border-bottom: none !important; border-bottom: none !important;
@ -1382,7 +1362,10 @@
.mat-tab-body-content { .mat-tab-body-content {
padding: 24px; padding: 24px;
} }
} }
.mat-tab-label {
opacity: 1 !important;
} }
/* ----------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------- */

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>