Commit ad22c49d authored by Lukasz Waskiewicz's avatar Lukasz Waskiewicz
Browse files

refs #1454 rozsunięcie linków w widoku mobilnym, kosmetyka

parent 59a27c91
$simulationMarked: $backgroundColor; //lighten(#93AAE2, 15%);
@media (max-width: 768px){
header .logo {
text-align: center;
}
header .navbar .navbar-right {
margin-right: -15px;
}
header .simulation-tooltip{
display: none;
header {
.logo {
text-align: center;
}
.navbar .navbar-right {
margin-right: -15px;
}
.simulation-tooltip{
display: none;
}
.navbar li {
padding: 0 5px 0 5px;
}
}
}
header {
.logo {
a {
line-height: 45px;
}
img {
max-width: 100%;
max-height: 50px;
}
}
.navbar {
background: $backgroundColor;
a {
color: $white;
@include transition(all, 0.3s, ease);
&:hover, &:focus {
color: $black;
}
}
.navbar-brand {
color: $black;
font: {
size: 36px;
weight: bold;
}
padding-left: 0;
&:hover, &:focus {
color: $black;
}
}
}
li.active {
background: $white;
font: {
weight: bold;
}
}
.navbar > div {
border: {
color: $borderColor;
style: solid;
width: 1px 0 0;
}
&:last-child {
border: {
width: 1px 0 1px;
}
}
.nav {
color: $black;
li {
border: {
color: $borderColor;
style: solid;
width: 0 0 0 0;
}
/*
&:first-child {
border: {
width: 0 1px 0 1px;
}
}*/
a {
color: $black;
}
}
}
}
.top-line {
background: #f8f7f6;
font: {
size: 12px;
}
li {
a {
color: $black;
padding: 3px 3px 0 8px;
&:hover, &:focus {
background: #f8f7f6;
text-decoration: underline;
}
}
&.active {
background: #f8f7f6;
}
}
.navbar-right {
li {
border-width: 0 !important;
a {
font: {
weight: bold;
}
color: $black;
padding: 3px 3px 0 8px;
&:hover, &:focus {
background: #f8f7f6;
text-decoration: underline;
}
}
}
}
}
.middle-line {
a.dropdown {
background: $backgroundColor;
border: {
color: $borderColor;
radius: 0;
style: solid;
width: 0 1px;
}
padding: 15px;
width: 100%;
&:hover, &:focus {
background: lighten($backgroundColor, 10%);
}
}
a.dropdown-has-value {
background: $white;
}
a.dropdown span.active {
font: {
weight: bold;
}
}
.dropdown-menu {
border-radius: 0;
margin: 0;
min-width: 0;
li a {
background: $white;
color: $black;
padding: 5px 27px 5px 15px;
&:hover, &:focus {
background: $backgroundColor;
}
}
li.disabled a {
background: $white;
color: #999;
&:hover, &:focus {
background: $white;
color: #999;
}
}
li.active a {
color: $black;
font: {
weight: bold;
}
&:hover, &:focus {
color: $black;
}
}
}
.navbar-left {
margin-left: 20px;
}
}
.bottom-line {
border: {
color: $borderColor;
style: solid;
width: 1px 0 0;
}
.nav {
li {
background: $simulationMarked;
}
/*
.active {
background: darken($lightGreen, 20%);
}*/
.primary {
background: darken($lightGreen, 20%);
}
.dropdown-menu {
left: 0;
li {
border: {
width: 0;
}
}
}
}
}
.navbar-right .dropdown-menu {}
.login-name {
font-style: italic;
margin: 0;
line-height: 20px;
padding: 3px 3px 0 8px;
}
.logo {
a {
line-height: 45px;
}
img {
max-width: 100%;
max-height: 50px;
}
}
.navbar {
background: $backgroundColor;
a {
color: $white;
@include transition(all, 0.3s, ease);
&:hover, &:focus {
color: $black;
}
}
.navbar-brand {
color: $black;
font: {
size: 36px;
weight: bold;
}
padding-left: 0;
&:hover, &:focus {
color: $black;
}
}
}
li.active {
background: $white;
font: {
weight: bold;
}
}
.navbar > div {
border: {
color: $borderColor;
style: solid;
width: 1px 0 0;
}
&:last-child {
border: {
width: 1px 0 1px;
}
}
.nav {
color: $black;
li {
border: {
color: $borderColor;
style: solid;
width: 0 0 0 0;
}
/*
&:first-child {
border: {
width: 0 1px 0 1px;
}
}*/
a {
color: $black;
}
}
}
}
.top-line {
background: #f8f7f6;
font: {
size: 12px;
}
li {
a {
color: $black;
padding: 3px 3px 0 8px;
&:hover, &:focus {
background: #f8f7f6;
text-decoration: underline;
}
}
&.active {
background: #f8f7f6;
}
}
.navbar-right {
float: right !important;
li {
border-width: 0 !important;
a {
font: {
weight: bold;
}
color: $black;
padding: 3px 3px 0 8px;
&:hover, &:focus {
background: #f8f7f6;
text-decoration: underline;
}
}
}
}
}
.middle-line {
a.dropdown {
background: $backgroundColor;
border: {
color: $borderColor;
radius: 0;
style: solid;
width: 0 1px;
}
padding: 15px;
width: 100%;
&:hover, &:focus {
background: lighten($backgroundColor, 10%);
}
}
a.dropdown-has-value {
background: $white;
}
a.dropdown span.active {
font: {
weight: bold;
}
}
.dropdown-menu {
border-radius: 0;
margin: 0;
min-width: 0;
li a {
background: $white;
color: $black;
padding: 5px 27px 5px 15px;
&:hover, &:focus {
background: $backgroundColor;
}
}
li.disabled a {
background: $white;
color: #999;
&:hover, &:focus {
background: $white;
color: #999;
}
}
li.active a {
color: $black;
font: {
weight: bold;
}
&:hover, &:focus {
color: $black;
}
}
}
.navbar-left {
margin-left: 20px;
}
}
.bottom-line {
border: {
color: $borderColor;
style: solid;
width: 1px 0 0;
}
.nav {
li {
background: $simulationMarked;
}
/*
.active {
background: darken($lightGreen, 20%);
}*/
.primary {
background: darken($lightGreen, 20%);
}
.dropdown-menu {
left: 0;
li {
border: {
width: 0;
}
}
}
}
}
.navbar-right .dropdown-menu {}
.login-name {
font-style: italic;
margin: 0;
line-height: 20px;
padding: 3px 3px 0 8px;
}
}
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<div layout:fragment="baseFooter">
<div class="container">
<div class="row partners" >
<div class="col-sm-4 col-xs-12" >
<img th:src="@{/images/footer/innovative_economy.png}" height="60" alt="TODO" />
</div>
<div class="col-sm-4 col-xs-12" >
<a href="http://ocean.icm.edu.pl" >
<img th:src="@{/images/footer/ocean.png}" height="60" alt="TODO" />
</a>
</div>
<div class="col-sm-4 col-xs-12" >
<img th:src="@{/images/footer/european_union.png}" height="60" alt="TODO" />
</div>
</div>
<div class="row info" >
<a th:text="#{cocos.portal.footer.finance}" href="#" >Project co-financed</a>
</div>
<div class="row" >
<div class="col-lg-4 col-md-5 col-sm-12 footer-links">
<ul class="horizontal separated row ">
<li ><a th:href="@{/about}" class="muted clean" th:text="#{cocos.portal.footer.about}">About project</a></li>
<li ><a th:href="@{/termsOfUse}" class="muted clean" th:text="#{cocos.portal.termsOfUse.title}">Terms of use</a></li>
<li ><a class="supportContactBtn muted clean" th:text="#{cocos.portal.footer.contact}">Report an error</a></li>
</ul>
</div>
<div class="col-lg-8 col-md-7 col-sm-12 copyrights">
<a class="clean" href="http://icm.edu.pl" th:text="#{cocos.portal.footer.copyrights}">&copy; 2015 Interdisciplinary Centre for Mathematical and Computational Modelling</a>
</div>
<div class="container">
<div class="row partners">
<div class="col-sm-4 col-xs-12">
<img th:src="@{/images/footer/innovative_economy.png}" height="60" alt="TODO" />
</div>
<div th:replace="layout/main_footer.xhtml :: revisionInformation" />
</div>
<div class="col-sm-4 col-xs-12">
<a href="http://ocean.icm.edu.pl"> <img th:src="@{/images/footer/ocean.png}" height="60" alt="TODO" />
</a>
</div>
<div class="col-sm-4 col-xs-12">
<img th:src="@{/images/footer/european_union.png}" height="60" alt="TODO" />
</div>
</div>
<div class="row info">
<a th:text="#{cocos.portal.footer.finance}" href="#">Project co-financed</a>
</div>
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-12 footer-links">
<ul class="horizontal separated row ">
<li><a th:href="@{/about}" class="muted clean" th:text="#{cocos.portal.footer.about}">About project</a></li>
<li><a th:href="@{/termsOfUse}" class="muted clean" th:text="#{cocos.portal.termsOfUse.title}">Terms of use</a></li>
<li><a class="supportContactBtn muted clean" th:text="#{cocos.portal.footer.contact}">Report an error</a></li>
</ul>
</div>
<div class="col-lg-8 col-md-7 col-sm-12 copyrights">
<a class="clean" href="http://icm.edu.pl" th:text="#{cocos.portal.footer.copyrights}">&copy; 2015 Interdisciplinary Centre for Mathematical and
Computational Modelling</a>
</div>
</div>
<div th:replace="layout/main_footer.xhtml :: revisionInformation" />
</div>
</div>