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

removed paddings from page-layouts + fixed apps paddings + page layouts coloring

Browse Source
This commit is contained in:
Sercan Yemen 2017-07-31 11:49:43 +03:00
parent 8fdca9f2ec
commit b48110ee2c
32 changed files with 73 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/core/scss/partials/_page-layouts.scss
View File

@ -18,7 +18,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
right: 0;
left: 0;
height: $header-height;
background-color: mat-color($accent);
}
// Carded layout
@ -62,7 +61,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
height: $card-header-height;
min-height: $card-header-height;
max-height: $card-header-height;
padding: 24px;
}
.content-card {
@ -77,7 +75,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 24px;
height: $card-toolbar-height;
min-height: $card-toolbar-height;
max-height: $card-toolbar-height;
@ -87,7 +84,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
.content {
display: flex;
flex: 1;
padding: 24px;
background: #FFFFFF;
overflow: auto;
}
@ -137,12 +133,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
height: $header-height;
min-height: $header-height;
max-height: $header-height;
padding: 24px;
}
.content {
background: transparent;
padding: 24px;
overflow: auto;
}
}
@ -167,7 +161,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
height: $card-header-height;
min-height: $card-header-height;
max-height: $card-header-height;
padding: 24px;
}
.content-card {
@ -183,7 +176,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
justify-content: flex-start;
align-items: center;
flex: 1;
padding: 8px 24px;
height: $card-toolbar-height;
min-height: $card-toolbar-height;
max-height: $card-toolbar-height;
@ -199,7 +191,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
.content {
display: flex;
flex: 1;
padding: 24px;
background: #FFFFFF;
overflow: auto;
}
@ -267,12 +258,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
height: $header-height;
min-height: $header-height;
max-height: $header-height;
padding: 24px;
background-color: mat-color($accent);
}
> .content {
padding: 24px;
}
}
@ -300,7 +285,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
width: 240px;
min-width: 240px;
max-width: 240px;
padding: 24px;
z-index: 51;
@include mat-elevation(7);
@ -327,8 +311,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
height: $header-height;
min-height: $header-height;
max-height: $header-height;
padding: 24px;
background-color: mat-color($accent);
}
.center {
@ -336,7 +318,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
@include mat-elevation(7);
.content {
padding: 24px;
background: #FFFFFF;
}
}
@ -352,8 +333,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
height: $header-height;
min-height: $header-height;
max-height: $header-height;
padding: 24px;
background-color: mat-color($accent);
}
> .content {
@ -363,10 +342,6 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
.mat-tab-labels {
padding: 0 24px;
}
.mat-tab-body {
padding: 24px;
}
}
}
}
@ -375,6 +350,5 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
// Blank layout
&.blank {
min-height: 100%;
padding: 24px;
}
}

1
src/app/main/apps/calendar/calendar.component.scss
View File

@ -189,7 +189,6 @@
background-repeat: no-repeat;
background-color: #FAFAFA;
color: #FFFFFF;
padding-bottom: 16px;
&:before {
content: '';

2
src/app/main/apps/chat/chat.component.scss
View File

@ -2,7 +2,7 @@
height: 100% !important;
.center {
padding: 32px 32px 0 32px;
padding: 32px 0;
max-width: 1400px;
height: 100%;
margin: 0 auto;

2
src/app/main/apps/mail/mail.component.html
View File

@ -40,7 +40,7 @@
<div class="content-card">
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<div class="toolbar px-24 py-8">
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
[indeterminate]="isIndeterminate"></md-checkbox>

11
src/app/main/apps/mail/mail.component.scss
View File

@ -7,7 +7,6 @@
.center {
.header {
padding: 0 !important;
.search-wrapper {
@include mat-elevation(7);
@ -38,16 +37,6 @@
}
}
}
.content-card {
.toolbar {
}
.content {
padding: 0 !important;
}
}
}
}

2
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -1,5 +1,5 @@
<!-- SIDENAV HEADER -->
<div class="header" fxLayout="column" fxLayoutAlign="space-between start">
<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon">mail</md-icon>
<span class="logo-text">Mailbox</span>

6
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss
View File

@ -19,12 +19,6 @@
.account {
width: 100%;
.account-selection {
}
}
}
.content {
padding: 0 !important;
}
}

2
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html
View File

@ -1,5 +1,5 @@
<!-- SIDENAV HEADER -->
<div class="header" fxLayout="column" fxLayoutAlign="space-between start">
<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon">check_box</md-icon>
<span class="logo-text">To-do</span>

1
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss
View File

@ -25,7 +25,6 @@
}
.content {
padding: 0 !important;
.add-todo-button {
width: 100%;

2
src/app/main/apps/todo/todo.component.html
View File

@ -40,7 +40,7 @@
<div class="content-card">
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<div class="toolbar px-24 py-8">
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
[indeterminate]="isIndeterminate"></md-checkbox>

11
src/app/main/apps/todo/todo.component.scss
View File

@ -7,7 +7,6 @@
.center {
.header {
padding: 0 !important;
.search-wrapper {
@include mat-elevation(7);
@ -38,16 +37,6 @@
}
}
}
.content-card {
.toolbar {
}
.content {
padding: 0 !important;
}
}
}
}

2
src/app/main/pages/profile/profile.component.html
View File

@ -1,7 +1,7 @@
<div id="profile" class="page-layout simple tabbed">
<!-- HEADER -->
<div class="header md-accent-bg" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
<div class="header p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
fxLayoutAlign.gt-sm="space-between end">
<div class="user-info" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"

4
src/app/main/pages/profile/tabs/about/about.component.html
View File

@ -1,6 +1,6 @@
<div id="about" fxLayout="row" fxLayoutWrap>
<div id="about" class="p-24" fxLayout="row" fxLayoutWrap>
<div class="about" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
<div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
<div class="profile-box info-box general" fxLayout="column">

5
src/app/main/pages/profile/tabs/about/about.component.scss
View File

@ -5,8 +5,7 @@
#about {
max-width: 1200px;
.about {
padding: 8px;
.about-content {
.general {
@ -35,7 +34,7 @@
}
.about-sidebar {
padding: 8px 8px 8px 32px;
padding-left: 32px;
@include media-breakpoint('sm') {
padding: 8px

2
src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.html
View File

@ -1,4 +1,4 @@
<div id="photos-videos">
<div id="photos-videos" class="p-24">
<div class="period" *ngFor="let period of photosVideos">
<div class="period-title">
<span class="name">{{period.name}}</span>

1
src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.scss
View File

@ -3,7 +3,6 @@
:host {
#photos-videos {
padding: 8px;
.period {

4
src/app/main/pages/profile/tabs/timeline/timeline.component.html
View File

@ -1,6 +1,6 @@
<div id="timeline" fxLayout="row" fxLayoutWrap>
<div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
<div class="timeline" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2"
<div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2"
fxFlexOrder.gt-sm="1">
<div class="profile-box add-post">

5
src/app/main/pages/profile/tabs/timeline/timeline.component.scss
View File

@ -5,8 +5,7 @@
#timeline {
max-width: 1200px;
.timeline {
padding: 8px;
.timeline-content {
.add-post {
margin-bottom: 0;
@ -217,7 +216,7 @@
}
.timeline-sidebar {
padding: 8px 8px 8px 32px;
padding-left: 32px;
@include media-breakpoint('sm') {
padding: 8px

2
src/app/main/ui/colors/colors.component.html
View File

@ -1,7 +1,7 @@
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
<!-- HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
<div class="header p-24" fxLayout="row" fxLayoutAlign="space-between center">
<h1 class="title">Material Colors</h1>
<a md-raised-button class="reference-button"

2
src/app/main/ui/page-layouts/blank/blank.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout blank">
<div class="page-layout blank p-24">
<h2>Blank Page</h2>

6
src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header">
<div class="header p-24">
<h2>Fullwidth with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -17,13 +17,13 @@
<div class="content-card">
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<div class="toolbar px-24 py-8">
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content">
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>

9
src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
View File

@ -1,15 +1,16 @@
<div class="page-layout carded fullwidth">
<!-- TOP BACKGROUND -->
<div class="top-bg"></div>
<div class="top-bg md-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header">
<div class="header md-accent-bg p-24">
<h2>Fullwidth with content scroll</h2>
<button md-raised-button>test</button>
</div>
<!-- / CONTENT HEADER -->
@ -17,13 +18,13 @@
<div class="content-card">
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<div class="toolbar px-24 py-8">
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-content></fuse-demo-content>

12
src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
View File

@ -11,13 +11,13 @@
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header">
<span>Sidenav header</span>
<div class="header p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header">
<div class="header p-24">
<h2>Left sidenav with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -38,7 +38,7 @@
<div class="content-card">
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<div class="toolbar px-24 py-8">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="carded-left-sidenav"
fxHide.gt-md>
@ -50,7 +50,7 @@
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-content></fuse-demo-content>

12
src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
View File

@ -11,13 +11,13 @@
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header">
<span>Sidenav header</span>
<div class="header p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header">
<div class="header p-24">
<h2>Left sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -38,7 +38,7 @@
<div class="content-card">
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<div class="toolbar px-24 py-8">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="carded-left-sidenav"
fxHide.gt-md>
@ -50,7 +50,7 @@
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-content></fuse-demo-content>

12
src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
View File

@ -11,13 +11,13 @@
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header">
<span>Sidenav header</span>
<div class="header p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header">
<div class="header p-24">
<h2>Right sidenav with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -38,7 +38,7 @@
<div class="content-card">
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<div class="toolbar px-24 py-8">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="carded-right-sidenav"
fxHide.gt-md>
@ -50,7 +50,7 @@
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-content></fuse-demo-content>

12
src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
View File

@ -11,13 +11,13 @@
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header">
<span>Sidenav header</span>
<div class="header p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header">
<div class="header p-24">
<h2>Right sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -38,7 +38,7 @@
<div class="content-card">
<!-- CONTENT TOOLBAR -->
<div class="toolbar">
<div class="toolbar px-24 py-8">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="carded-right-sidenav"
fxHide.gt-md>
@ -50,7 +50,7 @@
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" perfect-scrollbar>
<div class="content p-24" perfect-scrollbar>
<fuse-demo-content></fuse-demo-content>

4
src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html
View File

@ -1,13 +1,13 @@
<div class="page-layout simple fullwidth">
<!-- HEADER -->
<div class="header">
<div class="header p-24">
<h2>Fullwidth</h2>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>

6
src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
View File

@ -3,7 +3,7 @@
<md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
fuseMdSidenavHelper="simple-left-sidenav-2" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
@ -15,7 +15,7 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header" fxLayout="row">
<div class="header p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-left-sidenav-2"
@ -31,7 +31,7 @@
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>

6
src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
View File

@ -3,7 +3,7 @@
<md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
@ -15,7 +15,7 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header" fxLayout="row">
<div class="header p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-left-sidenav"
@ -31,7 +31,7 @@
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>

6
src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
View File

@ -3,7 +3,7 @@
<md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
fuseMdSidenavHelper="simple-right-sidenav-2" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
@ -15,7 +15,7 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header" fxLayout="row">
<div class="header p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-right-sidenav-2"
@ -31,7 +31,7 @@
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>

6
src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
View File

@ -3,7 +3,7 @@
<md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
@ -15,7 +15,7 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header" fxLayout="row">
<div class="header p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-right-sidenav"
@ -31,7 +31,7 @@
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>

14
src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html
View File

@ -1,7 +1,7 @@
<div class="page-layout simple tabbed" fxLayout="column">
<!-- HEADER -->
<div class="header">
<div class="header p-24">
<h2>Tabbed</h2>
</div>
<!-- / HEADER -->
@ -12,15 +12,21 @@
<md-tab-group md-dynamic-height="true">
<md-tab label="Tab 1">
<fuse-demo-content></fuse-demo-content>
<div class="p-24">
<fuse-demo-content></fuse-demo-content>
</div>
</md-tab>
<md-tab label="Tab 2">
<fuse-demo-content></fuse-demo-content>
<div class="p-24">
<fuse-demo-content></fuse-demo-content>
</div>
</md-tab>
<md-tab label="Tab 3">
<fuse-demo-content></fuse-demo-content>
<div class="p-24">
<fuse-demo-content></fuse-demo-content>
</div>
</md-tab>
</md-tab-group>