diff --git a/src/app/components/navbar/navbar.scss b/src/app/components/navbar/navbar.scss
index 533eefb..bf96b5c 100644
--- a/src/app/components/navbar/navbar.scss
+++ b/src/app/components/navbar/navbar.scss
@@ -19,8 +19,6 @@
}
.navbar-toggle {
- padding: 12px 10px;
- margin-top: 20px;
border-radius: 100%;
background-color: #5e749d;
@@ -30,13 +28,12 @@
}
@media screen and (max-width: $screen-md) {
- margin-top: 45px;
+ padding: 12px 10px;
+ margin: 0;
}
}
.navbar-nav .divider span {
- padding: 0 0 10px 0;
- margin: 53px 10px 0 10px;
display: block;
@media screen and (max-width: $screen-md) {
@@ -48,11 +45,9 @@
padding: 0;
}
- .navbar-nav > li {
+ .navbar-nav {
- & > a {
- padding: 0 0 10px 0;
- margin: 55px 10px 0 10px;
+ li > a {
text-transform: uppercase;
color: #616161;
font-weight: bold;
@@ -65,41 +60,149 @@
.contraste & {
color: #fff;
}
+ }
+
+ li.active > a {
+ border-bottom: 2px solid #77BB34;
+ }
+ }
- @media screen and (max-width: $screen-md) {
- margin-top: 5px;
+ .contraste & {
+ .nav > li > a:hover,
+ .nav > li > a:focus {
+ color: #fff;
+ }
+
+ .active a {
+ border-bottom-color: #fff;
+ }
+ }
+
+ // <= Mobile
+ @media screen and (max-width: ($screen-sm - 1)) {
+ .navbar-collapse {
+ margin: 0 -15px;
+ }
+
+ .navbar-nav {
+ background-color: #eee;
+
+ & > li {
+ // border-top: 1px solid #ccc;
+ -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
+ -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
+ border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
+ border-image-slice: 1;
+
+ border-top: 1px solid #ccc;
+ border-bottom: 0px solid #ccc;
+ border-left: 0px solid #ccc;
+ border-right: 0px solid #ccc;
+ &:last-child {
+ border-bottom: 1px solid #ccc;
+ }
+ }
+
+ & > li > a {
+ padding: 12px 20px;
+ margin: 0;
text-align: right;
}
+
+ & > li.active > a {
+ border-bottom: none;
+ border-right: 4px solid #77BB34;
+ }
+
+ .dropdown-toggle {
+ margin-top: 0px;
+
+ }
+ .dropdown-menu {
+ position: relative;
+ margin-right: 10px;
+ }
+
+ .social-share {
+ float: right;
+ }
+ }
+
+ }
+
+ // >= Table, < Destop
+ @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
+ .navbar-brand {
+ padding-top: 0;
+ margin-top: 0;
+ margin-bottom: 60px;
}
- &.active > a {
- border-bottom: 3px solid #77BB34;
+ .navbar-collapse {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
- @media screen and (max-width: $screen-md) {
- border: none;
- background-color: #eee;
- padding: 10px 30px 10px 0px;
- border-right: 3px solid #77BB34;
+ ul.navbar-nav {
+ width: 100%;
+ float: none;
+ }
+
+ li > a {
+ margin: 0 10px;
+ padding: 0 0 10px 0;
+ }
+
+ li.dropdown {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+
+ .dropdown-toggle {
+ position: relative;
+ width: 160px;
+ margin: 0 5px 5px 0;
+ padding: 0;
+ }
}
}
+ }
+ // >= Desktop
+ @media screen and (min-width: $screen-md) {
- .dropdown-toggle {
- margin-top: 50px;
+ li > a {
+ padding: 15px 0;
+ margin: 0 9px;
+ }
- @media screen and (max-width: $screen-md) {
- margin-top: 0px;
+ li.divider span{
+ padding: 12px 0;
+ line-height: 20px;
+ }
+
+ li.dropdown {
+ .dropdown-toggle {
+ padding: 6px 10px;
+ margin: 0;
}
}
}
- .contraste & {
- .nav > li > a:hover,
- .nav > li > a:focus {
- color: #fff;
+ // > Desktop Large
+ @media screen and (min-width: $screen-lg) {
+ .navbar-brand {
+ margin-bottom: 30px;
}
- .active a {
- border-bottom-color: #fff;
+ ul.navbar-nav {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
+
+ li.divider span{
+ padding: 12px 6px;
}
}
}
@@ -116,4 +219,4 @@
right: 210px;
width: 100px;
}
-}
\ No newline at end of file
+}
diff --git a/src/app/components/social-share/social-share.scss b/src/app/components/social-share/social-share.scss
index af61042..afe92f1 100644
--- a/src/app/components/social-share/social-share.scss
+++ b/src/app/components/social-share/social-share.scss
@@ -10,6 +10,7 @@
&.list-inline {
margin: 0;
}
+
li {
float: left;
padding: 0;
@@ -33,7 +34,7 @@
background-color: #E0E0E0;
border-radius: 5px;
- @media screen and (max-width: $screen-xs) {
+ @media screen and (max-width: $screen-sm) {
background-color: #fff;
}
@@ -58,6 +59,11 @@
right: 20px;
border-width: 0 10px 10px;
border-bottom-color: #E0E0E0;
+
+
+ @media screen and (max-width: $screen-sm) {
+ border-bottom-color: #fff;
+ }
}
@media screen and (max-width: $screen-xs) {
diff --git a/src/app/layout.scss b/src/app/layout.scss
index beaf610..340603e 100644
--- a/src/app/layout.scss
+++ b/src/app/layout.scss
@@ -24,28 +24,28 @@
vertical-align: bottom;
}
-@media (min-width: 480px) {
- .row-xs-height {
+// @media (min-width: 480px) {
+.row-xs-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
- }
- .col-xs-height {
+}
+.col-xs-height {
display: table-cell;
float: none;
height: 100%;
- }
- .col-xs-top {
+}
+.col-xs-top {
vertical-align: top;
- }
- .col-xs-middle {
+}
+.col-xs-middle {
vertical-align: middle;
- }
- .col-xs-bottom {
+}
+.col-xs-bottom {
vertical-align: bottom;
- }
}
+// }
@media (min-width: 768px) {
.row-sm-height {
--
libgit2 0.21.2