Merge branch 'feat/design_touches' into 'master'

Design touches

See merge request !26
This commit is contained in:
Felix Hamann 2018-04-15 00:50:58 +02:00
commit 8433df99c7
7 changed files with 31 additions and 26 deletions

View File

@ -20,7 +20,8 @@
--fontbase: #34303a; --fontbase: #34303a;
--fontsec: #5b5861; --fontsec: #5b5861;
/* THEME 4 */ /* THEME 4 */
--darkbase: #263C4C; --darkerbase: #274a65;
--darkbase: #425d79;
--lightbase: #598EB5; --lightbase: #598EB5;
--lighterbase: #5F98C2; --lighterbase: #5F98C2;
--whitebase: #FCFFFA; --whitebase: #FCFFFA;

View File

@ -70,7 +70,7 @@
justify-content: center; justify-content: center;
width: 30px; width: 30px;
height: 30px; height: 30px;
background-color: var(--darkbase); background-color: var(--darkerbase);
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
z-index: 20; z-index: 20;

View File

@ -18,10 +18,11 @@ $newline never
WiSe 17/18 WiSe 17/18
<ul .asidenav__list> <ul .asidenav__list>
$forall (Entity _ Course{..}) <- favourites $forall (Entity _ Course{..}) <- favourites
<li .asidenav__list-item> $with route <- CourseR courseTermId courseShorthand CourseShowR
<a .asidenav__link-wrapper href=@{CourseR courseTermId courseShorthand CourseShowR}> <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
<div .asidenav__link-shorthand>#{courseShorthand} <a .asidenav__link-wrapper href=@{route}>
<div .asidenav__link-label>#{courseName} <div .asidenav__link-shorthand>#{courseShorthand}
<div .asidenav__link-label>#{courseName}
<li .asidenav__list-item> <li .asidenav__list-item>
<a .asidenav__link-wrapper href="/course/S2018/ixd/show"> <a .asidenav__link-wrapper href="/course/S2018/ixd/show">

View File

@ -1,6 +1,6 @@
.main__aside { .main__aside {
position: relative; position: relative;
background-color: var(--darkbase); background-color: #425d79;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1; z-index: 1;
flex: 0 0 300px; flex: 0 0 300px;
@ -22,7 +22,11 @@
.asidenav__box-title { .asidenav__box-title {
width: 50px; width: 50px;
padding: 0; padding: 1px;
font-size: 18px;
text-align: center;
margin-bottom: 0;
background-color: var(--fontsec);
} }
.asidenav__link-wrapper { .asidenav__link-wrapper {
@ -35,10 +39,11 @@
width: 50px; width: 50px;
text-align: center; text-align: center;
opacity: 1; opacity: 1;
font-size: 16px; font-size: 15px;
line-height: 1em; line-height: 1em;
margin-right: 13px; margin-right: 13px;
flex-shrink: 0; flex-shrink: 0;
padding: 1px;
outline: 1px solid white; outline: 1px solid white;
text-transform: uppercase; text-transform: uppercase;
word-break: break-all; word-break: break-all;
@ -78,6 +83,9 @@
.asidenav__box-title { .asidenav__box-title {
padding: 7px 13px; padding: 7px 13px;
margin-top: 13px;
background-color: transparent;
transition: all .2s ease;
a { a {
color: white; color: white;
@ -155,6 +163,11 @@
pointer-events: none; pointer-events: none;
color: white; color: white;
} }
.asidenav__link-shorthand {
transform: scale(1.05, 1.0);
transform-origin: right;
}
} }
.asidenav__link-wrapper { .asidenav__link-wrapper {

View File

@ -7,11 +7,11 @@
width: 100%; width: 100%;
height: var(--header-height); height: var(--header-height);
padding-right: 5vw; padding-right: 5vw;
padding-left: 340px; padding-left: 90px;
background: var(--darkbase); /* Old browsers */ background: var(--darkerbase); /* Old browsers */
background: -moz-linear-gradient(bottom, var(--darkbase) 0%, #425d79 100%); /* FF3.6-15 */ background: -moz-linear-gradient(bottom, var(--darkerbase) 0%, #425d79 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, var(--darkbase) 0%,#425d79 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(bottom, var(--darkerbase) 0%,#425d79 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, var(--darkbase) 0%,#425d79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to top, var(--darkerbase) 0%,#425d79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: white; color: white;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
z-index: 10; z-index: 10;
@ -86,8 +86,7 @@
} }
.navbar .navbar__list-item:not(.navbar__list-item--active):hover { .navbar .navbar__list-item:not(.navbar__list-item--active):hover {
background-color: var(--darkbase); background-color: var(--darkerbase);
color: var(--whitebase);
} }
.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper { .navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
color: var(--whitebase); color: var(--whitebase);

View File

@ -1,7 +1,6 @@
$newline never $newline never
$if hasPageActions $if hasPageActions
<div .page-nav-prime> <div .page-nav-prime>
<h3>Aktionen:
<ul .pagenav__list> <ul .pagenav__list>
$forall menuType <- menuTypes $forall menuType <- menuTypes
$case menuType $case menuType

View File

@ -1,8 +1,6 @@
.page-nav-prime { .page-nav-prime {
background-color: var(--lightgreybase); background-color: var(--lightgreybase);
box-shadow: -20px -20px 0 20px var(--lightgreybase), padding: 13px;
20px -20px 0 20px var(--lightgreybase);
padding: 13px 0;
} }
.page-nav-prime .pagenav__list { .page-nav-prime .pagenav__list {
@ -11,11 +9,5 @@
} }
.page-nav-prime .pagenav__list-item { .page-nav-prime .pagenav__list-item {
display: inline-block; display: inline-block;
border-bottom: 2px solid var(--lightbase);
margin-right: 7px; margin-right: 7px;
transition: border-bottom-color .2s ease;
&:hover {
border-bottom-color: var(--lighterbase);
}
} }