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

(ExampleViewer) Updated style and theming compatibility

Browse Source
This commit is contained in:
Sercan Yemen 2018-08-28 07:15:58 +03:00
parent a184be1650
commit 8b97e6623b
3 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.theme.scss
View File

@ -113,6 +113,8 @@ $typography: mat-typography-config(
@import "src/app/main/documentation/components/cards/cards.theme";
@import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";
// Define a mixin for easier access
@mixin components-theme($theme) {
@ -159,6 +161,8 @@ $typography: mat-typography-config(
// Docs
@include docs-components-cards-theme($theme);
// Example Viewer
@include example-viewer-theme($theme);
}
// -----------------------------------------------------------------------------------------------------

7
src/app/main/angular-material-elements/example-viewer/example-viewer.scss
View File

@ -5,9 +5,9 @@ example-viewer {
padding: 24px 0;
.example-viewer-wrapper {
//border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
margin: 4px;
h3 {
margin-top: 10px;
}
@ -19,9 +19,8 @@ example-viewer {
display: flex;
justify-content: center;
padding: 8px 20px;
//color: mat-color($foreground, secondary-text);
//background: rgba(mat-color($foreground, secondary-text), .03);
flex: 1 1 auto;
border-bottom: 1px solid;
.example-viewer-title {
flex: 1 1 auto;
@ -58,7 +57,7 @@ example-viewer {
padding: 0;
margin: 0;
min-height: 150px;
//border-bottom: 1px solid mat-color($foreground, divider);
border-bottom: 1px solid;
> pre {
width: 100%;

27
src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss Normal file
View File

@ -0,0 +1,27 @@
@mixin example-viewer-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
example-viewer {
.example-viewer-header {
color: map-get($foreground, secondary-text);
background: map-get($background, app-bar);
border-bottom-color: map-get($foreground, divider);
}
.example-viewer-source {
.tab-content {
.tab {
.example-source {
border-bottom-color: map-get($foreground, divider);
}
}
}
}
}
}