purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +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 {
position: relative;
overflow-x: hidden;
overflow-y: auto;
overflow: hidden;
// Carded layout
&.carded {
@ -24,7 +23,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
min-width: 100%;
// Top bg
.top-bg {
> .top-bg {
position: absolute;
z-index: 1;
top: 0;
@ -40,23 +39,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// 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 {
display: flex;
@ -70,7 +52,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
max-width: 100%;
max-height: 100%;
.header {
> .header {
height: $carded-header-height-without-toolbar;
min-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;
flex-direction: column;
flex: 1 0 auto;
overflow: hidden;
@include mat-elevation(7);
.toolbar {
> .toolbar {
display: flex;
justify-content: flex-start;
align-items: center;
@ -101,7 +83,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> .content {
flex: 1 0 auto;
overflow: auto;
}
}
}
@ -109,20 +90,20 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Tabbed
&.tabbed {
.center {
> .center {
width: 100%;
min-width: 0;
.header {
> .header {
flex: 1 1 auto;
}
.content-card {
> .content-card {
.content {
> .content {
display: flex;
.mat-tab-group {
> .mat-tab-group {
overflow: hidden;
.mat-tab-header {
@ -142,7 +123,50 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
position: relative;
width: 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;
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;
height: auto;
z-index: 4;
overflow-y: hidden;
@include mat-elevation(7);
&.locked-open {
@ -194,7 +217,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
.header {
> .header {
height: $carded-header-height;
min-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;
overflow: auto;
}
}
@ -222,7 +244,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
margin-left: 32px;
margin-right: 32px;
.header {
> .header {
display: flex;
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;
flex-direction: column;
flex: 1 1 auto;
overflow: hidden;
@include mat-elevation(7);
.toolbar {
> .toolbar {
display: flex;
justify-content: flex-start;
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 {
flex: 1 1 auto;
}
}
}
}
// Tabbed
&.tabbed {
@ -294,16 +298,16 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
width: calc(100% - 64px);
}
.header {
> .header {
flex: 1 1 auto;
}
.content-card {
> .content-card {
.content {
> .content {
display: flex;
.mat-tab-group {
> .mat-tab-group {
overflow: hidden;
.mat-tab-header {
@ -323,9 +327,59 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
position: relative;
width: 100%;
height: 100%;
}
}
}
}
}
}
}
}
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .sidebar {
> .content {
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 {
overflow: auto;
> .content {
flex: 1 1 auto;
@ -366,7 +419,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
&.fullwidth,
&.inner-sidebar {
//min-height: 100%;
> .header {
height: $header-height;
@ -418,21 +470,37 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: auto;
z-index: 3;
@include mat-elevation(7);
.header {
> .header {
height: $header-height;
min-height: $header-height;
max-height: $header-height;
}
.content {
> .content {
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 {
flex-direction: column;
@ -445,16 +513,15 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> .sidebar {
background: none;
box-shadow: none;
}
}
}
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .content {
overflow: auto;
}
}
> .center {
flex: 1 1 auto;
overflow: auto;
}
}
}
}
@ -490,7 +557,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
&.tabbed {
min-height: 100%;
.header {
> .header {
height: $header-height;
min-height: $header-height;
max-height: $header-height;
@ -498,7 +565,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> .content {
.mat-tab-group {
> .mat-tab-group {
.mat-tab-labels {
padding: 0 24px;
@ -526,21 +593,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
&.left-sidenav,
&.right-sidenav {
&.left-sidebar,
&.right-sidebar {
> mat-sidenav-container {
> .mat-sidenav-content,
> .mat-drawer-content {
.center {
> .center {
margin: 0 16px;
}
}
}
}
}
// 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 -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
@ -8,9 +8,7 @@
<!-- CONTENT -->
<div class="content p-24 mat-white-bg">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / 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 -->
<div class="header mat-accent-bg p-24">