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

(Page Layouts) Small tweaks and fixes for native scrollbars

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-11 09:27:56 +03:00
parent bcf5a9e6cb
commit 928be05725
3 changed files with 149 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
src/@fuse/scss/partials/_page-layouts.scss
View File

@ -12,8 +12,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.page-layout { .page-layout {
position: relative; position: relative;
overflow-x: hidden; overflow: hidden;
overflow-y: auto;
// Carded layout // Carded layout
&.carded { &.carded {
@ -24,7 +23,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
min-width: 100%; min-width: 100%;
// Top bg // Top bg
.top-bg { > .top-bg {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 0; top: 0;
@ -40,23 +39,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Fullwidth // Fullwidth
&.fullwidth { &.fullwidth {
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .center {
flex: 1 1 auto;
.content-card {
flex: 1 1 auto;
> .content {
flex: 1 1 auto;
}
}
}
}
// Center // Center
> .center { > .center {
display: flex; display: flex;
@ -70,7 +52,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
.header { > .header {
height: $carded-header-height-without-toolbar; height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar; min-height: $carded-header-height-without-toolbar;
max-height: $carded-header-height-without-toolbar; max-height: $carded-header-height-without-toolbar;
@ -82,14 +64,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
} }
} }
.content-card { > .content-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 0 auto; flex: 1 0 auto;
overflow: hidden; overflow: hidden;
@include mat-elevation(7); @include mat-elevation(7);
.toolbar { > .toolbar {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -101,7 +83,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> .content { > .content {
flex: 1 0 auto; flex: 1 0 auto;
overflow: auto;
} }
} }
} }
@ -109,20 +90,20 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Tabbed // Tabbed
&.tabbed { &.tabbed {
.center { > .center {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
.header { > .header {
flex: 1 1 auto; flex: 1 1 auto;
} }
.content-card { > .content-card {
.content { > .content {
display: flex; display: flex;
.mat-tab-group { > .mat-tab-group {
overflow: hidden; overflow: hidden;
.mat-tab-header { .mat-tab-header {
@ -142,7 +123,50 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
}
}
}
}
}
}
}
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .center {
flex: 1 1 auto;
> .content-card {
flex: 1 1 auto;
> .content {
overflow: auto; overflow: auto;
flex: 1 1 auto;
}
}
}
// Tabbed
&.tabbed {
> .center {
> .content-card {
> .content {
> .mat-tab-group {
.mat-tab-body {
.mat-tab-body-content {
.tab-content {
overflow: auto;
}
} }
} }
} }
@ -168,7 +192,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
max-width: 240px; max-width: 240px;
height: auto; height: auto;
z-index: 4; z-index: 4;
overflow-y: hidden;
@include mat-elevation(7); @include mat-elevation(7);
&.locked-open { &.locked-open {
@ -194,7 +217,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
} }
} }
.header { > .header {
height: $carded-header-height; height: $carded-header-height;
min-height: $carded-header-height; min-height: $carded-header-height;
max-height: $carded-header-height; max-height: $carded-header-height;
@ -206,9 +229,8 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
} }
} }
.content { > .content {
background: transparent; background: transparent;
overflow: auto;
} }
} }
@ -222,7 +244,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
margin-left: 32px; margin-left: 32px;
margin-right: 32px; margin-right: 32px;
.header { > .header {
display: flex; display: flex;
height: $carded-header-height-without-toolbar; height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar; min-height: $carded-header-height-without-toolbar;
@ -235,14 +257,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
} }
} }
.content-card { > .content-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
@include mat-elevation(7); @include mat-elevation(7);
.toolbar { > .toolbar {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -259,29 +281,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
} }
} }
.content {
flex: 1 1 auto;
overflow: auto;
}
}
}
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .center {
flex: 1 1 auto;
.content-card {
flex: 1 1 auto;
> .content { > .content {
flex: 1 1 auto; flex: 1 1 auto;
} }
} }
} }
}
// Tabbed // Tabbed
&.tabbed { &.tabbed {
@ -294,16 +298,16 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
width: calc(100% - 64px); width: calc(100% - 64px);
} }
.header { > .header {
flex: 1 1 auto; flex: 1 1 auto;
} }
.content-card { > .content-card {
.content { > .content {
display: flex; display: flex;
.mat-tab-group { > .mat-tab-group {
overflow: hidden; overflow: hidden;
.mat-tab-header { .mat-tab-header {
@ -323,9 +327,59 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
}
}
}
}
}
}
}
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .sidebar {
> .content {
overflow: auto; overflow: auto;
} }
} }
> .center {
flex: 1 1 auto;
> .content-card {
flex: 1 1 auto;
> .content {
flex: 1 1 auto;
overflow: auto;
}
}
}
// Tabbed
&.tabbed {
> .center {
> .content-card {
> .content {
> .mat-tab-group {
.mat-tab-body {
.mat-tab-body-content {
.tab-content {
overflow: auto;
}
}
}
} }
} }
} }
@ -357,7 +411,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Fullwidth // Fullwidth
&.fullwidth { &.fullwidth {
overflow: auto;
> .content { > .content {
flex: 1 1 auto; flex: 1 1 auto;
@ -366,7 +419,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
&.fullwidth, &.fullwidth,
&.inner-sidebar { &.inner-sidebar {
//min-height: 100%;
> .header { > .header {
height: $header-height; height: $header-height;
@ -418,21 +470,37 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto;
z-index: 3; z-index: 3;
@include mat-elevation(7); @include mat-elevation(7);
.header { > .header {
height: $header-height; height: $header-height;
min-height: $header-height; min-height: $header-height;
max-height: $header-height; max-height: $header-height;
} }
.content { > .content {
flex: 1 0 auto; flex: 1 0 auto;
} }
} }
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .sidebar {
> .content {
overflow: auto;
}
}
> .center {
flex: 1 1 auto;
overflow: auto;
}
}
// Inner Sidebar // Inner Sidebar
&.inner-sidebar { &.inner-sidebar {
flex-direction: column; flex-direction: column;
@ -445,16 +513,15 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> .sidebar { > .sidebar {
background: none; background: none;
box-shadow: none; box-shadow: none;
}
}
}
// Inner scroll > .content {
&.inner-scroll { overflow: auto;
flex: 1 1 auto; }
}
> .center { > .center {
flex: 1 1 auto; overflow: auto;
}
} }
} }
} }
@ -490,7 +557,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
&.tabbed { &.tabbed {
min-height: 100%; min-height: 100%;
.header { > .header {
height: $header-height; height: $header-height;
min-height: $header-height; min-height: $header-height;
max-height: $header-height; max-height: $header-height;
@ -498,7 +565,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> .content { > .content {
.mat-tab-group { > .mat-tab-group {
.mat-tab-labels { .mat-tab-labels {
padding: 0 24px; padding: 0 24px;
@ -526,21 +593,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
} }
} }
&.left-sidenav, &.left-sidebar,
&.right-sidenav { &.right-sidebar {
> mat-sidenav-container { > .center {
> .mat-sidenav-content,
> .mat-drawer-content {
.center {
margin: 0 16px; margin: 0 16px;
} }
} }
} }
}
}
// End - Smaller margins // End - Smaller margins
} }
} }

4
src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple fullwidth" fusePerfectScrollbar> <div class="page-layout simple fullwidth">
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
@ -8,9 +8,7 @@
<!-- CONTENT --> <!-- CONTENT -->
<div class="content p-24 mat-white-bg"> <div class="content p-24 mat-white-bg">
<fuse-demo-content></fuse-demo-content> <fuse-demo-content></fuse-demo-content>
</div> </div>
<!-- / CONTENT --> <!-- / CONTENT -->

2
src/app/main/ui/page-layouts/simple/full-width-tabbed-1/full-width-tabbed-1.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple tabbed" fusePerfectScrollbar> <div class="page-layout simple tabbed">
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24"> <div class="header mat-accent-bg p-24">