vendor/assets/stylesheets/_footer.scss in active_frontend-7.0.2 vs vendor/assets/stylesheets/_footer.scss in active_frontend-8.0.0
- old
+ new
@@ -1,9 +1,10 @@
/* Table of Contents
==================================================
# Footer
-# Alternate
+# Styles
+# Sizes
# Colors
# Media Queries */
/* # Footer
================================================== */
@@ -14,103 +15,84 @@
right: 0;
z-index: 1030;
}
.footer {
background: $color-white;
- border-top: 2px solid $color-haze-light;
+ border-top: 1px solid $color-haze;
+ background-size: 100% 1px, 100% 1px;
+ background-position: top, bottom;
+ background-repeat: no-repeat;
box-sizing: border-box;
- width: 100%;
+ color: $color-gray;
margin-top: 40px;
- padding: 20px 0;
+ padding: 25px 0 10px 0;
+ width: 100%;
}
-.footer-app { width: calc(100% - 280px); }
-.footer-brand { float: left; }
-.footer-brand > a {
- color: $color-gray-light;
- font-size: 30px;
- text-decoration: none;
-}
-.footer-nav {
- float: right;
+.footer-nav,
+.footer-subnav,
+.footer-navicon {
list-style: none;
- margin: 10px 0 0 0;
+ margin: 0 0 10px 0;
padding: 0;
}
-.footer-nav > li {
- font-size: 10px;
+.footer-nav > li,
+.footer-subnav > li,
+.footer-navicon > li {
float: left;
- line-height: 10px;
- margin-left: 10px;
+ margin: 0 5px;
}
-.footer-nav > li:first-child { margin: 0; }
-.footer-nav > li > a {
- color: $color-gray-light;
- font-weight: 500;
- text-decoration: none;
- text-transform: uppercase;
-}
-.footer-footnote {
- float: left;
- color: $color-gray-light;
+.footer-nav > li:first-child,
+.footer-subnav > li:first-child,
+.footer-navicon > li:first-child { margin-left: 0; }
+.footer-nav > li:last-child,
+.footer-subnav > li:last-child,
+.footer-navicon > li:last-child { margin-right: 0; }
+.footer-nav > li,
+.footer-subnav > li {
font-size: 10px;
line-height: 10px;
- margin: 8px 0 0 10px;
-}
-
-/* # Alternate
-================================================== */
-.footer-alt { padding: 60px 0; }
-.footer-alt .footer-brand {
- float: none;
- text-align: center;
-}
-.footer-alt .footer-nav {
- float: none;
- margin: 0 0 10px 0;
-}
-.footer-alt .footer-nav > h6 {
- border-bottom: 1px solid $color-haze;
- letter-spacing: 1px;
- margin-bottom: 5px;
- padding-bottom: 5px;
text-transform: uppercase;
}
-.footer-alt .footer-nav > li {
- float: none;
- font-size: 14px;
- line-height: 22px;
- margin: 0;
+.footer-nav > li,
+.footer-navicon > li { color: $color-gray-dark; }
+.footer-subnav > li { color: $color-gray-light; }
+.footer-navicon > li {
+ font-size: 18px;
+ line-height: 18px;
+ margin-top: -6px;
}
-.footer-alt .footer-nav > li > a {
- font-weight: normal;
- text-transform: none;
-}
-.footer-alt .footer-footnote {
- display: block;
- float: none;
- margin: 30px 0 15px 0;
- text-align: center;
-}
+.footer-nav > li > a { font-weight: 500; }
+.footer-nav > li > a,
+.footer-navicon > li > a { color: $color-gray-dark; }
+.footer-subnav > li > a { color: $color-gray-light; }
+/* # Styles
+================================================== */
+.footer-alt { padding: 60px 0 120px 0; }
+
+/* # Sizes
+================================================== */
+.footer-app { width: calc(100% - 280px); }
+
/* # Colors
================================================== */
.footer-dark {
background: $color-black;
- border-color: rgba(0,0,0,0.2);
+ border-color: $color-black-dark;
}
-.footer-dark.footer-alt .footer-nav > h6 {
- color: $color-white;
- border-color: $color-black-light;
-}
-.footer-dark.footer-alt .footer-brand > a,
-.footer-dark.footer-alt .footer-nav > li,
-.footer-dark.footer-alt .footer-nav > li > a,
-.footer-dark.footer-alt .footer-footnote { color: $color-gray; }
.footer-light {
background: $color-haze-light;
border-color: $color-haze-dark;
}
+.footer-dark .footer-nav > li,
+.footer-dark .footer-navicon > li,
+.footer-dark .footer-nav > li > a,
+.footer-dark .footer-navicon > li > a { color: $color-white; }
+.footer-dark .footer-subnav > li,
+.footer-dark .footer-subnav > li > a,
+.footer-light .footer-subnav > li,
+.footer-light .footer-subnav > li > a { color: $color-gray; }
/* # Media Queries
================================================== */
@media only screen and (max-width: 1365px) {
.footer-app { width: calc(100% - 250px); }
@@ -119,22 +101,14 @@
.footer-app { width: calc(100% - 220px); }
}
@media only screen and (max-width: 959px) {
.footer-app { width: 100%; }
}
-@media only screen and (max-width: 767px) {
- .footer-alt .footer-nav {
- margin-bottom: 5px;
- text-align: center;
- }
- .footer-alt .footer-nav > li {
- display: inline-block;
- font-size: 10px;
- line-height: 10px;
- margin-right: 10px;
- }
- .footer-alt .footer-nav > li:last-child { margin: 0; }
- .footer-alt .footer-nav > li > a {
- font-weight: bold;
- text-transform: uppercase;
- }
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2),
+only screen and ( min--moz-device-pixel-ratio: 2),
+only screen and ( -o-min-device-pixel-ratio: 2/1),
+only screen and ( min-device-pixel-ratio: 2),
+only screen and ( min-resolution: 192dpi),
+only screen and ( min-resolution: 2dppx) {
+ .footer { border-width: 0.5px; }
}
\ No newline at end of file