hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

use sass magic

pull/57/head
HardiReady 2019-02-25 00:12:15 +01:00
parent d4347f9390
commit 16e7e655bb
4 changed files with 99 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
static/src/app/common/navigation/navigation-header.component.scss
View File

@ -1,98 +1,70 @@
li {
height: 50px;
line-height: 46px;
padding: 0 10px;
cursor: pointer;
}
li a {
font-size: 16px;
text-decoration: none;
color: #9d9d9d;
padding: 16px 5px;
}
li mat-list-item {
cursor: pointer;
}
li:hover {
a {
color: white;
}
}
li.active {
@extend li:hover;
background: #000000;
}
.navigation-items {
list-style-type: none;
padding: 0;
margin: 0;
}
.mat-toolbar.mat-primary {
background: #222222;
}
@import url('../../style/blink-indicator.scss');
mat-toolbar {
height: 2.5em;
min-height: 50px;
}
.brand-logo {
padding-top: 6px;
margin-right: -10px;
mat-icon {
color: #dadada;
width: 135px;
height: 40px;
stroke: #dadada;
}
.version-label {
position: relative;
left: -42px;
font-size: 12px;
color: #bebebe;
}
@media all and (max-width: 959px) {
margin: auto;
}
}
.unprocessed {
-webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: color-blink;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.unprocessed-child {
background-color: orange;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
}
@keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
&.mat-toolbar.mat-primary {
background: #222222;
}
.navigation-items {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
height: 50px;
line-height: 46px;
padding: 0 10px;
cursor: pointer;
mat-list-item {
cursor: pointer;
}
a {
font-size: 16px;
text-decoration: none;
color: #9d9d9d;
padding: 16px 5px;
}
&:hover {
a {
color: white;
}
}
&.active {
@extend li:hover;
background: #000000;
}
}
.brand-logo {
padding-top: 6px;
margin-right: -10px;
mat-icon {
color: #dadada;
width: 135px;
height: 40px;
stroke: #dadada;
}
.version-label {
position: relative;
left: -42px;
font-size: 12px;
color: #bebebe;
}
@media all and (max-width: 959px) {
margin: auto;
}
}
}

4
static/src/app/common/navigation/navigation-header.component.ts
View File

@ -24,12 +24,12 @@ export class NavigationHeaderComponent implements OnInit {
readonly availableLanguages = BaseConfig.i18n.availableLanguages;
readonly version = require('./../../../../../package.json').version;
config = RouteConfig;
language;
version = require('./../../../../../package.json').version;
constructor(public loginService: LoginService,
private promotionService: PromotionService,
private awardingService: AwardingService,

33
static/src/app/common/navigation/sidenav-list.component.scss
View File

@ -1,3 +1,5 @@
@import url('../../style/blink-indicator.scss');
mat-list-item.mat-list-item, a.mat-list-item {
font-size: 16px;
text-decoration: none;
@ -21,34 +23,3 @@ mat-divider {
margin: 15% 0;
border-color: #9d9d9d;
}
.unprocessed {
-webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: color-blink;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.unprocessed-child {
background-color: orange;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
}
@keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
}

30
static/src/app/style/blink-indicator.scss Normal file
View File

@ -0,0 +1,30 @@
.unprocessed {
-webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: color-blink;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.unprocessed-child {
background-color: orange;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
}
@keyframes color-blink {
from {
background-color: #222222;
}
to {
background-color: orange;
}
}