Skip to content

Commit

Permalink
layout scss files
Browse files Browse the repository at this point in the history
  • Loading branch information
furknyavuz committed Sep 10, 2021
1 parent 4c4da8f commit 028fa06
Show file tree
Hide file tree
Showing 11 changed files with 91 additions and 193 deletions.
4 changes: 2 additions & 2 deletions src/app/page/dashboard-layout/dashboard-layout.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<app-dashboard-layout-top-nav></app-dashboard-layout-top-nav>
<app-dashboard-layout-side-nav></app-dashboard-layout-side-nav>
<app-side-content></app-side-content>
<div class="dashboard-layout-page">
<div class="page">
<div [class.dashboard-layout-page-top-loading-bar]="loading">
</div>
<div class="dashboard-layout-page-content">
<div class="page-content">
<router-outlet></router-outlet>
</div>
</div>
Expand Down
41 changes: 12 additions & 29 deletions src/app/page/dashboard-layout/dashboard-layout.component.scss
Original file line number Diff line number Diff line change
@@ -1,57 +1,40 @@
.dashboard-layout-page {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: var(--background-color);
padding: 0.5rem 0 0 env(safe-area-inset-left);
}
@use '../../../styles/page/page';

.dashboard-layout-page-content {
.page-content {
padding: 0 2rem 2em;
min-height: 120vh;
overflow: auto;
}

@media only screen and (max-width: 999px) {
.dashboard-layout-page {
.page {
min-height: 200vh;
margin-top: 55px;
}

.dashboard-layout-page, .footer-wrap {
.page, .footer-wrap {
margin-left: 0;
}
}

@media only screen and (min-width: 1000px) {
.side-nav-closed .dashboard-layout-page, .side-nav-closed .footer-wrap, .dashboard-layout-page, .footer-wrap {
.side-nav-closed .page, .side-nav-closed .footer-wrap, .page, .footer-wrap {
margin-left: 80px;
}
.dashboard-layout-page, .footer-wrap {
.page, .footer-wrap {
margin-right: 320px;
}
}

@media only screen and (min-width: 1000px) {
.dashboard-layout-page, .footer-wrap {
margin-left: 256px;
margin-right: 400px;
}
}

@media only screen and (min-width: 1000px) {
.dashboard-layout-page {
.page {
margin-top: 0;
}

.side-nav-closed .dashboard-layout-page, .side-nav-closed .footer-wrap {
margin-left: 80px;
.page, .footer-wrap {
margin-left: 256px;
margin-right: 400px;
}
}

@media screen and (min-aspect-ratio: 4/3) {
.dashboard-layout-page-content {
min-height: 200vh;
.side-nav-closed .page, .side-nav-closed .footer-wrap {
margin-left: 80px;
}
}
4 changes: 2 additions & 2 deletions src/app/page/landing-layout/landing-layout.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div>
<div class="landing-layout-page">
<div class="page">
<div class="header">
<app-landing-layout-top-nav></app-landing-layout-top-nav>
</div>
Expand All @@ -9,7 +9,7 @@
<path d="M 0,250 1000,120 V 0 H 0 Z" style="fill: var(--theme-color-lighter-2);"></path>
</svg>
</div>
<div class="landing-layout-page-content">
<div class="page-content">
<router-outlet></router-outlet>
</div>
</div>
Expand Down
26 changes: 1 addition & 25 deletions src/app/page/landing-layout/landing-layout.component.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,4 @@
.landing-layout-page {
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
background-color: var(--background-color);
}

.landing-raw-content-page {
display: flex;
flex-direction: column;
justify-content: center;
}
@use '../../../styles/page/page';

.header {
position: fixed;
Expand All @@ -25,12 +13,6 @@
height: 90px;
}

.landing-layout-page-content {
min-height: 120vh;
position: relative;
z-index: 2;
}

.policy-content a {
color: var(--theme-color);
}
Expand Down Expand Up @@ -92,9 +74,3 @@
padding-top: 165px;
}
}

@media screen and (min-aspect-ratio: 4/3) {
.landing-layout-page-content {
min-height: 200vh;
}
}
4 changes: 2 additions & 2 deletions src/app/page/settings-layout/settings-layout.component.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div [class.side-nav-closed]="sideNavClosed === 'true'">
<app-dashboard-layout-top-nav></app-dashboard-layout-top-nav>
<app-dashboard-layout-side-nav></app-dashboard-layout-side-nav>
<div class="settings-layout-page">
<div class="page">
<div [class.dashboard-layout-page-top-loading-bar]="loading">
</div>
<div class="settings-layout-page-content">
<div class="page-content">
<router-outlet></router-outlet>
</div>
</div>
Expand Down
31 changes: 8 additions & 23 deletions src/app/page/settings-layout/settings-layout.component.scss
Original file line number Diff line number Diff line change
@@ -1,53 +1,38 @@
.settings-layout-page {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: var(--background-color);
padding: 0.5rem 0 0 env(safe-area-inset-left);
}
@use '../../../styles/page/page';

.settings-layout-page-content {
.page-content {
padding: 0 2rem 2em;
min-height: 120vh;
overflow: auto;
}

@media only screen and (max-width: 999px) {
.settings-layout-page {
.page {
min-height: 200vh;
margin-top: 55px;
}

.settings-layout-page, .footer-wrap {
.page, .footer-wrap {
margin-left: 0;
}
}

@media only screen and (min-width: 1000px) {
.side-nav-closed .settings-layout-page, .side-nav-closed .footer-wrap, .settings-layout-page, .footer-wrap {
.side-nav-closed .page, .side-nav-closed .footer-wrap, .page, .footer-wrap {
margin-left: 80px;
}
}

@media only screen and (min-width: 1000px) {
.settings-layout-page, .footer-wrap {
.page, .footer-wrap {
margin-left: 256px;
}
}

@media only screen and (min-width: 1000px) {
.settings-layout-page {
.page {
margin-top: 0;
}

.side-nav-closed .settings-layout-page, .side-nav-closed .footer-wrap {
.side-nav-closed .page, .side-nav-closed .footer-wrap {
margin-left: 80px;
}
}

@media screen and (min-aspect-ratio: 4/3) {
.settings-layout-page-content {
min-height: 200vh;
}
}
24 changes: 4 additions & 20 deletions src/app/page/splash-layout/callback/callback.component.scss
Original file line number Diff line number Diff line change
@@ -1,19 +1,10 @@
@use '../splash-layout.component';
@use '../../../../styles/animation/animation';

.splash-content {
margin-top: 30vh;
}

.splash-logos > * {
margin: 8px;
}

.splash-logos i {
font-size: 28px;
}

.splash-logos img {
height: 55px;
}

.splash-loading-bar {
width: 130px;
height: 2px;
Expand All @@ -24,13 +15,13 @@
}

.splash-loading-bar::before {
@include animation.inline-loading-bar-animation;
content: "";
width: 68px;
height: 2px;
background: var(--theme-color);
position: absolute;
left: -34px;
animation: splash-loading-bar 1.5s infinite ease;
}

// Social
Expand Down Expand Up @@ -90,10 +81,3 @@
.paypal.splash-loading-bar {
--social: var(--paypal);
}

@keyframes splash-loading-bar {
50% {
left: 96px;
background: var(--social);
}
}
89 changes: 1 addition & 88 deletions src/app/page/splash-layout/external/external.component.scss
Original file line number Diff line number Diff line change
@@ -1,91 +1,4 @@
.splash-logos > * {
margin: 8px;
}

.splash-logos i {
font-size: 28px;
}

.splash-logos img {
height: 55px;
}

.splash-loading-bar {
width: 130px;
height: 2px;
background: #cfcfcf;
margin-top: 22px;
position: relative;
overflow: hidden;
}

.splash-loading-bar::before {
content: "";
width: 68px;
height: 2px;
background: var(--theme-color);
position: absolute;
left: -34px;
animation: splash-loading-bar 1.5s infinite ease;
}

// Social

.twitter.splash-loading-bar {
--social: var(--twitter);
}

.google.splash-loading-bar {
--social: var(--google);
}

.facebook-f.splash-loading-bar {
--social: var(--facebook);
}

.linkedin-in.splash-loading-bar {
--social: var(--linkedin);
}

.vk.splash-loading-bar {
--social: var(--vk);
}

.twitch.splash-loading-bar {
--social: var(--twitch);
}

.dribbble.splash-loading-bar {
--social: var(--dribbble);
}

.reddit-alien.splash-loading-bar {
--social: var(--reddit);
}

.pinterest.splash-loading-bar {
--social: var(--pinterest);
}

.yandex.splash-loading-bar {
--social: var(--yandex);
}

.github.splash-loading-bar {
--social: var(--github);
}

.stripe-s.splash-loading-bar {
--social: var(--stripe);
}

.coinbase.splash-loading-bar {
--social: var(--coinbase);
}

.paypal.splash-loading-bar {
--social: var(--paypal);
}
@use '../splash-layout.component';

@media only screen and (max-width: 999px) {
.splash-content {
Expand Down
22 changes: 20 additions & 2 deletions src/app/page/splash-layout/splash-layout.component.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,30 @@
@use '../../../styles/util/util';

.splash-layout-page {
@include util.flex-layout-column;

background-color: var(--background-color);

position: fixed;

top: 0;
left: 0;

width: 100%;
height: 100vh;
display: flex;

align-items: center;
text-align: center;
flex-direction: column;
}

.splash-logos > * {
margin: 8px;
}

.splash-logos i {
font-size: 28px;
}

.splash-logos img {
height: 55px;
}
Loading

0 comments on commit 028fa06

Please sign in to comment.