overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-05-23 12:35:14 +09:00
parent e7deae813e
commit c83d2235ed
4 changed files with 75 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/commons/component/layout/topbar/app.topbar.component.html
View File

@ -13,7 +13,7 @@
</a> </a>
<a id="topbar-menu-button" href="#" (click)="app.onTopbarMenuButtonClick($event)"> <a id="topbar-menu-button" href="#" (click)="app.onTopbarMenuButtonClick($event)">
<i class="material-icons">menu</i> <i class="material-icons">expand_more</i>
</a> </a>
<ul class="topbar-items animated fadeInDown" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}"> <ul class="topbar-items animated fadeInDown" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">

9
src/assets/layout/css/layout-dark-blue.css
View File

@ -967,7 +967,7 @@ body {
left: -16px; left: -16px;
top: 3px; top: 3px;
background-color: #5180ce; background-color: #5180ce;
-moz-border-radius: 50%; /* -moz-border-radius: 50%;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
@ -976,13 +976,14 @@ body {
transition: all 0.3s; transition: all 0.3s;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16); -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16); } box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16); */}
.layout-container .topbar .topbar-right #menu-button:hover { .layout-container .topbar .topbar-right #menu-button:hover {
-webkit-transform: scale(1.2); /* -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); -moz-transform: scale(1.2);
-o-transform: scale(1.2); -o-transform: scale(1.2);
-ms-transform: scale(1.2); -ms-transform: scale(1.2);
transform: scale(1.2); } transform: scale(1.2); */
}
.layout-container .topbar .topbar-right #menu-button i { .layout-container .topbar .topbar-right #menu-button i {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;

4
src/index.html
View File

@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/x-icon" href="assets/layout/images/favicon.png"> <link rel="icon" type="image/x-icon" href="assets/layout/images/favicon.png">
<link id="theme-css" rel="stylesheet" type="text/css" href="assets/theme/theme-indigo.css"> <link id="theme-css" rel="stylesheet" type="text/css" href="assets/theme/theme-dark-blue.css">
<link id="layout-css" rel="stylesheet" type="text/css" href="assets/layout/css/layout-indigo.css"> <link id="layout-css" rel="stylesheet" type="text/css" href="assets/layout/css/layout-dark-blue.css">
</head> </head>
<body> <body>
<of-root> <of-root>

67
src/styles.scss
View File

@ -1,5 +1,72 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
//Logo
.landing-wrapper #header .header-top .logo {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 30px;
background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.landing-wrapper .header .header-top .logo {
background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
background-size: 200px 30px; } }
.layout-container .topbar .logo {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 30px;
background: url("/assets/layout/images/overFlow_CI_white_200_30.png") top left no-repeat !important;
background-size: 200px 30px; }
//top menu-button
.layout-container .topbar .topbar-right #menu-button {
color: #ffffff;
display: inline-block;
vertical-align: middle;
height: 36px;
margin-right: 10px;
position: relative;
//left: -16px;
left: 16px !important;
top: 3px;
background-color: transparent !important;
}
.layout-container .topbar .topbar-right #menu-button:hover {
color: #e8e8e8;}
.layout-container .topbar .topbar-right #menu-button i {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 1.5em;
/* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
text-indent: 0;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: 36px; }
.layout-container .topbar .topbar-right #menu-button i:before {
//content: "chevron_left";
content: "menu" !important;
}
//auth style //auth style
.login-body { .login-body {
//background: url("../images/login/login.png") top left no-repeat #f7f7f7; //background: url("../images/login/login.png") top left no-repeat #f7f7f7;