mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-06-29 06:15:12 +00:00
Code Issues Releases Wiki Activity

Cleanup variables in Shadow DOM

Browse Source
This commit is contained in:
Gabor PEK
2018-03-09 18:14:40 +01:00
parent c3f4ace7e9
commit 822b65462d
9 changed files with 33 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/header/header.component.html
View File

@ -1,11 +1,11 @@
<nav class="navbar navbar-default navbar-expand-md navbar-light tao-navbar fixed-top">
<div class="tao-grid-navbar">
<nav class="navbar navbar-default navbar-expand-md navbar-light tfw-navbar fixed-top">
<div class="tfw-grid-navbar">
<!-- <ul class="navbar-nav tao-grid-center-right">
<li class="nav-item tao-header-title">an</li>
</ul>-->
<img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tao-company-logo" alt="">
<img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
<ul class="navbar-nav">
<li class="nav-item tao-header-title">Tutorials</li>
<li class="nav-item tfw-header-title">Tutorials</li>
</ul>
</div>
</nav>

42
src/app/header/header.component.scss
View File

@ -1,24 +1,3 @@
// Variables
//
// Spaces
//
$space: 24px;
$sxlarge: 9 * $space;
$xxxlarge: 6 * $space;
$xxlarge: 4 * $space;
$xlarge: 2 * $space;
$large: 1.5 * $space;
$medium: $space;
$small: 0.75 * $space;
$tiny: 0.5 * $space;
$hair: 0.25 * $space;
$nano: 0.125 * $space;
//
// Misc
//
$tao-blue-500: #277EEC;
$font-size-base: 14px;
$font-size-h3: floor(($font-size-base * 1.3));
@ -27,15 +6,12 @@ $tao-navbar-height: 67px;
$company-logo-width: 130px;
//
// Classes
//
.tao-header-title {
.tfw-header-title {
color: $tao-blue-500;
font-size: $font-size-h3;
}
.tao-navbar {
.tfw-navbar {
background-color: rgba(255, 255, 255, 0.96);
min-height: $tao-navbar-height;
box-shadow: 0px 1px 6px 0px #888;
@ -43,37 +19,37 @@ $company-logo-width: 130px;
border: 1px solid #e7e7e7;
}
.tao-grid-navbar {
.tfw-grid-navbar {
display: grid;
grid-template-columns: $company-logo-width 1fr;
grid-column-gap: 8px;
width: 100%;
}
.tao-company-logo {
.tfw-company-logo {
display: block;
width: $company-logo-width;
}
.tao-company-logo-mobile {
.tfw-company-logo-mobile {
display: none;
width: 130px;
}
@media (max-width: 767px) {
.tao-grid-navbar {
.tfw-grid-navbar {
grid-template-columns: 1fr;
}
.tao-company-logo {
.tfw-company-logo {
display: none;
}
.tao-company-logo-mobile {
.tfw-company-logo-mobile {
display: block;
}
.tao-navbar-links {
.tfw-navbar-links {
justify-self: left !important;
}
}