/home/fdhrevqn/public_html/wp-content/themes/fox/css/_footer.scss
/* Footer Sidebar
---------------------------------------------------------------------------------------------------------------------- */
#footer-widgets {
overflow: hidden;
padding: 3em 0;
border: 0 solid $border;
border-width: 1px 0 0;
// STRETCH
&.stretch-full {
padding-top: 0;
padding-bottom: 0;
border-top: 0;
.container {
width: 100%;
max-width: 100%;
}
}
.widget + .widget {
margin-top: 2em;
}
@include media( tablet ) {
padding: 2em 0;
}
@include media( mobile ) {
.widget-title {
text-align: inherit;
padding-left: 0;
padding-right: 0;
}
}
}
.footer-widgets {
.container {
overflow: hidden;
}
}
.footer-widgets-row {
margin: 0 -20px;
position: relative;
display: flex;
align-items: stretch;
flex-flow: row wrap;
// fall into 2 columns on mobile
@include media( mobile ) {
.footer-col {
&.col-1-1,
&.col-1-3 {
width: 100%;
}
&.col-1-3 {
margin: 2em 0;
}
&.col-3-4,
&.col-1-2,
&.col-1-4 {
width: 50%;
margin: 2em 0;
}
}
}
// 1 column on mobile
@include media( mobile-small ) {
.footer-col {
&.col-1-2,
&.col-1-3,
&.col-1-4,
&.col-3-4,
&.col-2-3 {
width: 100%;
margin: 2em 0;
}
&.footer-col-center,
&.footer-col-right,
&.footer-col-left {
.widget {
display: block;
margin: 0;
// text-align: inherit;
}
}
}
}
}
/**
* valign
* since 4.3
*/
.valign-middle .footer-widgets-row {
align-items: center;
}
.valign-bottom .footer-widgets-row {
align-items: flex-end;
}
.valign-top .footer-widgets-row {
align-items: flex-start;
}
.footer-col {
display: block;
flex: none;
padding: 0 20px;
min-height: 1px;
position: relative;
}
.footer-col-sep {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
border: 0px solid #c0c0c0;
border-width: 0 1px 0 0;
@include media( mobile-small ) {
display: none;
}
}
/* ALIGN, SINCE 4.4 */
.footer-col-left {
.widget {
width: auto;
display: table;
margin-right: auto;
text-align: left;
}
}
.footer-col-center {
.widget {
width: auto;
display: table;
margin: 0 auto;
text-align: center;
}
}
.footer-col-right {
.widget {
width: auto;
display: table;
margin-left: auto;
text-align: right;
}
}
/* Special Layouts on mobile
-------------------------------- *
.footer-sidebar-2-1-1,
.footer-sidebar-1-2-1,
.footer-sidebar-1-1-2 {
@include media( tablet ) {
.footer-widgets-row .footer-col.col-1-2,
.footer-widgets-row .footer-col.col-1-4 {
width: 100%;
}
.widget {
display: table;
width: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
}
/* Footer Bottom
---------------------------------------------------------------------------------------------------------------------- */
/* Layout
-------------------------------- */
#footer-bottom {
position: relative;
padding: 4em 0;
border: 0 solid $border;
border-width: 1px 0 0;
overflow: hidden;
.widget + .widget {
margin-top: 1em;
}
@include media( tablet ) {
padding: 2em 0;
}
&.skin-dark {
// border: 0;
}
}
.footer-bottom-inline {
display: flex;
align-items: flex-end;
margin: 0 -15px;
}
.footer-bottom-div {
flex: none;
width: 50%;
padding: 0 15px;
}
.footer-bottom-left {
text-align: left;
}
.footer-bottom-right {
margin-left: auto;
text-align: right;
}
// general styling
.footer-bottom {
// STRETCH
&.stretch-full {
.container {
width: 100%;
max-width: 100%;
}
}
// search form
.searchform {
max-width: 100%;
width: 320px;
display: inline-block;
}
}
/* Logo
-------------------------------- */
#footer-logo {
img {
display: inline-block;
}
}
/* Copyright Text
-------------------------------- */
.copyright {
position: relative;
p {
display: inline-block;
margin: 0;
width: 440px;
max-width: 100%;
}
a {
color: inherit;
&:hover {
color: inherit;
// text-decoration: underline;
}
}
i {
margin: 0 4px;
font-size: 12px;
}
i.fa-heart {
color: #D82E2E;
}
}
/* Search
-------------------------------- */
#footer-search {
position: relative;
.searchform {
display: inline-block;
width: 240px;
max-width: 100%;
position: relative;
.s {
width: 100%;
height: 34px;
line-height: 34px;
padding-left: 12px;
padding-right: 40px;
background: white;
color: black;
font-size: 14px;
}
}
.submit {
width: 34px;
height: 34px;
line-height: 34px;
padding: 0;
font-size: 16px;
text-align: center;
background: black;
color: white;
transition: all .15s ease-out;
cursor: pointer;
i {
display: block;
margin: 0;
line-height: inherit;
}
&:hover {
background: $accent;
}
}
}
/* Footer Menu
* since 2.4
-------------------------------- */
$footer-menu: ".footer-bottom .widget_nav_menu, #footernav";
#{$footer-menu} {
font-family: $nav;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px !important; // prevent inherit header nav style
ul.menu {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
display: block;
}
li {
display: block;
float: left;
padding: 0;
border: 0;
& + li {
margin-left: 16px;
}
&.current-menu-item a {
opacity: .4;
}
}
a {
color: inherit;
display: block;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
transition: all .2s ease-out;
&:hover {
color: inherit;
opacity: .5;
// text-decoration: underline;
}
}
}
@include media( mobile ) {
.footer-bottom .widget_nav_menu a,
#footernav a {
letter-spacing: 0;
}
}
/* Footer Bottom Classic more layouts
* @since 4.6
---------------------------------------------------------------------------------------------------------------------- */
/* Stack
-------------------------------- */
.classic-footer-bottom-stack {
text-align: center;
.footer-bottom-element {
@include clearfix;
> * {
display: inline-block;
}
&.social-list > ul {
display: inline-flex;
}
}
.footer-bottom-element ~ .footer-bottom-element { // from + to ~ since 4.6.2.3
margin-top: 24px;
}
}
/* Inline
-------------------------------- */
.footer-bottom-row {
display: flex;
align-items: center;
margin: 0 -20px;
& + .footer-bottom-row {
margin-top: 20px;
}
@include media( tablet ) {
display: block;
margin: 0;
}
#footer-logo img {
display: block;
@include media( tablet ) {
display: inline-block;
}
}
// since v4.6.8
.footer-bottom .widget_nav_menu li, #footernav li {
@include media( tablet ) {
display: inline-block;
float: none;
}
}
}
.footer-bottom-col {
flex: none;
padding: 0 20px;
width: 100%;
@include media( tablet ) {
width: 100%;
padding: 0;
& + .footer-bottom-col {
margin-top: 20px;
}
}
display: flex;
align-items: center;
@include media( tablet ) {
display: block;
}
> * {
flex: none;
& + * {
margin-left: 20px;
@include media( tablet ) {
margin-left: 0;
margin-top: 20px;
}
}
}
}
.footer-bottom-col-left,
.footer-bottom-col-right {
width: 50%;
@include media( tablet ) {
width: 100%;
text-align: center;
}
}
.footer-bottom-col-right {
justify-content: flex-end;
}
@include media( tablet ) {
#footernav {
ul {
display: inline-block;
}
}
}
/* Scroll Top
---------------------------------------------------------------------------------------------------------------------- */
#backtotop {
font-family: $heading;
position: fixed;
z-index: 9999;
bottom: -3px;
right: 30px;
padding: 6px 12px;
text-align: center;
background: #fff;
color: black;
border: 1px solid $border;
border-width: 1px 1px 0;
cursor: pointer;
text-transform: uppercase;
-webkit-transform: translateY(100%);
transform:translateY(100%);
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out;
&.shown {
-webkit-transform: translateY( 0 );
transform:translateY( 0 );
}
span {
display: block;
line-height: 1.1;
text-transform: uppercase;
transition: transform .15s ease-out;
}
&:hover span {
transform: translate(0,-3px);
}
.go {
font-size: 12px;
}
.top {
font-size: 20px;
font-weight: bold;
}
}
.backtotop-icon {
font-size: 20px;
i {
display: block;
line-height: inherit;
}
}
#backtotop.backtotop-circle {
bottom: 20px;
border-width: 1px;
padding: 0;
width: 28px;
height: 28px;
border-radius: 50%;
text-align: center;
-webkit-transform: none;
transform: none;
opacity: 0;
visibility: hidden;
&.shown {
opacity: 1;
visibility: visible;
}
span {
display: block;
line-height: inherit;
}
i {
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
height: 20px;
line-height: 20px;
margin-top: -10px;
z-index: 10;
}
&:hover span {
transform: none;
}
}
#backtotop.backtotop-square {
border-bottom: 0;
@include media( tablet ) {
padding: 4px 8px;
.go {
font-size: 10px;
}
.top {
font-size: 14px;
}
}
}
/**
* since 4.6
*/
#backtotop.backtotop-text.backtotop-circle {
width: 40px;
height: 40px;
line-height: 40px;
.go {
display: none;
}
.top {
font-weight: normal;
font-size: .7em;
letter-spacing: .5px;
line-height: 40px;
}
}