File: /var/www/html/delstar/wp-content/themes/construction/assets/sass/_elements.scss
// main: style.scss
/*------------------------------
4.1 Header
------------------------------*/
.site-header {
padding: 30px 0px 0px 0px;
//border-bottom: 1px solid $border;
position: relative;
z-index: 99;
width: 100%;
@include for(screens-large) {
padding-top: 15px;
}
.site-branding {
float: left;
@include for(screens-large) {
float: left;
width: 100%;
}
@include for(screens-small) {
float: left;
max-width: 80%;
}
.site-title {
margin-bottom: 0px;
font-size: 27px;
font-weight: bold;
margin-top: 0;
}
}
.header-right-wrap {
float: right;
@include for(screens-large) {
float: none;
width: 100%;
padding: 0px 0px 30px;
}
@include for(screens-small) {
padding: 0px 0px 30px;
}
.header-widget {
margin-bottom: 15px;
margin-top: 0px;
float: none;
display: block;
@include for(screens-large) {
float: left;
margin: 0px;
display: none;
}
}
.header-widget-mobile {
@include for(screens-large) {
display: block !important;
position: absolute;
width: 100%;
left: 0;
padding-left: 30px;
background: #FFFFFF;
border-top: 1px solid $border;
padding: 10px 20px;
.extract-element {
margin: 0px 30px 0px 0px;
float: left;
.header-social {
a {
margin: 0px 4px 0px 0px;
}
}
}
}
@include for(screens-medium) {
.extract-element {
margin: 0px 0px 0px 0px;
float: left;
.header-social {
display: none;
a {
margin: 0px 3px 0px 0px;
}
}
}
}
}
.extract-element {
float: right;
margin-left: 15px;
font-size: 12px;
@include for(screens-large) {
margin-left: 0px;
margin-right: 15px;
}
.phone-text {
font-family: $font_heading;
font-size: 15px;
font-weight: normal;
margin-left: 2px;
letter-spacing: 0.5px;
color: $primary;
}
}
.header-social {
a {
margin-left: 3px;
i {
padding: 0;
border-radius: 50%;
font-size: 1.20em;
line-height: 1.6em;
height: 1.8em;
width: 1.8em;
text-align:center;
border: 1px solid #DDDDDD;
color: #999999;
&:hover {
color: #222222;
border-color: #222222;
}
}
}
}
}
}
.header-transparent {
.site-header {
//padding: 15px 0px 0px 0px;
border-bottom: none;
position: absolute;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0px, transparent 95%);
color: $text;
.header-text {
opacity: 0.7;
}
}
@include for(large-screens){
.header-right-wrap {
color: #FFFFFF;
.extract-element {
.phone-text {
//color: #FFFFFF;
color: $primary;
}
}
.header-social {
a {
i {
border-color: #ffffff;
color: #FFFFFF;
&:hover {
background: #FFFFFF;
color: #222222;
border-color: #ffffff;
}
}
}
}
}
}
@include for(large-screens){
.wpc-menu {
a {
&:hover {
opacity: 1;
color: #FFFFFF;
}
}
> li > a {
color: #ffffff;
opacity: 0.7;
}
> li.current-menu-item, > li.current-menu-ancestor {
> a {
//border-top-color: $secondary;
opacity: 1;
color: #FFFFFF;
}
}
}
.page-header-wrap h1, .page-subtitle {
text-shadow: 1px 1px 1px #000;
}
}
#nav-toggle {
color: #FFFFFF;
}
@include for(screens-large){
.wpc-menu.wpc-menu-mobile {
> li > a {
//color: #999999;
opacity: 1;
}
}
}
} // END header-transparent.
/* Header Topbar
------------------------------*/
.header-topbar {
.site-header {
padding-top: 35px;
}
.wpc-menu > li > a {
padding-bottom: 35px;
}
.site-header .site-branding {
margin-top: 0px;
}
#nav-toggle {
top: 4px;
}
}
/* Header Centered
------------------------------*/
.header-centered {
.site-header .container {
@include for(large-screens) {
max-width: 100%;
width: 100%;
padding: 0px;
}
}
.site-header .header-right-wrap {
float: none;
width: 100%;
display: block;
text-align: center;
}
.site-header {
padding-top: 35px;
}
.site-header .site-branding {
margin-top: 0px;
float: none;
display: block;
text-align: center;
margin-bottom: 35px;
@include for(screens-large) {
margin-bottom: 0px;
float: left;
text-align: left;
}
}
.wpc-menu {
float: none;
border-top: 1px solid #e9e9e9;
ul li {
text-align: left;
}
}
.wpc-menu > li {
float: none;
display: inline-block;
}
#nav-toggle {
top: 4px;
}
.wpc-menu > li > a {
padding-bottom: 25px;
padding-top: 23px;
}
}
/* Top Bar
------------------------------*/
.site-topbar {
font-size: 12px;
font-family: $font_heading;
background: #f8f9f9;
border-bottom: 1px solid #e9e9e9;
color: #888888;
a {
color: #888888;
text-decoration: none;
&:hover {
color: $primary;
}
}
.container {
@include for(screens-medium) {
padding: 0px;
}
}
.widget {
margin-bottom: 0px;
a {
color: #888888;
&:hover {
color: $primary;
}
}
@include for(screens-medium) {
display: block;
width: 100%;
text-align: center;
border-top: 1px solid #e9e9e9;
margin: 0px;
}
// @include for(medium-screens) {
// }
@include for(large-screens) {
}
}
.topbar-highlight {
letter-spacing: 0.5px;
}
.topbar-left {
float: left;
@include for(screens-medium) {
float: none;
}
// @include for(screens-medium) {
// float: none;
// text-align: center;
// width: 100%;
// display: block;
// .widget {
// float: none;
// }
// }
@include for(large-screens) {
}
ul li a {
margin-right: 20px;
}
.topbar-widget {
padding-right: 15px;
margin-right: 15px;
float: left;
border-right: 1px solid #e9e9e9;
&:first-child {
border-left: 1px solid #e9e9e9;
padding-left: 15px;
}
}
.topbar-address, .topbar-phone, a.topbar-button {
margin-right: 15px;
}
}
.topbar-right {
float: right;
@include for(screens-medium) {
float: none;
}
// @include for(screens-medium) {
// }
@include for(large-screens) {
}
ul li a {
margin-left: 20px;
}
.topbar-widget {
padding-left: 15px;
margin-left: 15px;
float: right;
border-left: 1px solid #e9e9e9;
&:first-child {
border-right: 1px solid #e9e9e9;
padding-right: 15px;
}
}
.topbar-address, .topbar-phone, a.topbar-button {
margin-left: 15px;
}
}
.widgettitle {
display: none;
}
.topbar-widget {
padding: 12px 0px 12px;
@include for(medium-screens) {
float: none;
}
@include for(large-screens) {
}
}
.widget.widget_nav_menu {
ul {
list-style: none;
margin: 0;
padding: 0;
li {
display: inline-block;
margin: 0;
padding: 0;
a {
}
}
}
}
.topbar-social {
a {
margin: 0px 7px;
font-size: 15px;
line-height: 1;
}
}
.search-form {
margin-bottom: 0px;
.search-field {
float: none;
padding: 3px 7px 5px;
font-size: 10px;
margin: -6px 0px;
width: auto;
border-color: #e9e9e9;
}
}
// Responsive
@include for(small-screens) {
}
@include for(medium-screens) {
}
@include for(large-screens) {
}
}
@include for(large-screens) {
.site-header.fixed-on {
width: 100%;
z-index: 80;
}
.header-normal .site-header.fixed-on {
background-color: rgba(255,255,255,0.99);
}
.site-header.header-fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: all 0.5s ease;
z-index: 100;
background: rgba(255,255,255,0.99);
padding-top: 15px;
.wpc-menu > li > a {
padding-bottom: 15px;
transition: all 0.5s ease;
}
}
.header-transparent {
.site-header.fixed-on {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0px, transparent 95%);
}
.site-header.header-fixed {
background: rgba(0,0,0,0.8);
}
}
.header-topbar .site-header.header-fixed {
padding-top: 22px;
transition: all 0.5s ease;
.wpc-menu > li > a {
padding-bottom: 25px;
transition: all 0.5s ease;
}
}
.header-centered .site-header.header-fixed {
padding-top: 0px;
.site-branding {
display: none;
}
.wpc-menu > li > a {
padding-bottom: 25px;
transition: all 0.5s ease;
}
}
}
@include for ( screens-large ) {
.site-content {
padding-top: 0px !important;
}
}
/* Primary Navigation
------------------------------*/
.main-navigation {
position: relative;
z-index: 100;
@include for(screens-large) {
float: right;
}
@include for(screens-tiny) {
float: none;
#nav-toggle {
display: block;
text-align: center;
}
}
}
.wpc-menu, .wpc-menu * {
margin: 0;
padding: 0;
list-style: none;
}
// Essential Styles
.wpc-menu {
float: right;
@extend .clearfix;
ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
ul ul {
top: 0;
left: 100%;
}
li {
position: relative;
}
> li {
float: left;
}
li:hover > ul,li.sfHover > ul {
display: block;
}
a {
display: block;
position: relative;
}
}
// Skin
.wpc-menu {
ul {
min-width: 12em; // allow long menu items to determine submenu width
*width: 12em; //no auto sub width for IE7, see white-space comment below
box-shadow: 0 9px 14px rgba(0, 0, 0, 0.1);
}
li {
white-space: nowrap; // no need for Supersubs plugin
*white-space: normal; // ...unless you support IE7 (let it wrap)
-webkit-transition: background .2s;
transition: background .2s;
}
li:hover,
li.sfHover {
// only transition out, not in
-webkit-transition: none;
transition: none;
}
a {
color: #999999;
font-family: $font_heading;
padding: 0px 18px 30px;
font-size: 14px;
font-weight: 500;
//text-transform: uppercase;
text-decoration: none;
zoom: 1;
// border-top: 2px solid transparent;
// border-bottom: 2px solid transparent;
&:hover {
color: $primary;
}
}
ul li {
//background: $primary;
//border-top: 1px solid rgba(0,0,0,0.05);
// &:hover a{
// background: rgba(0,0,0,0.05);
// }
a {
padding: 8px 18px;
color: #999999;
font-size: 13px;
text-transform: none;
background: #ffffff;
&:hover {
background: $primary;
color: #ffffff;
}
}
}
ul li.current-menu-item > a {
background: $primary;
color: #ffffff;
}
// Hover & Active
> li:last-child > a {
padding-right: 0px;
}
> li:hover > a {
//border-top-color: $secondary;
}
> li.current-menu-item, > li.current-menu-ancestor {
> a {
//border-top-color: $secondary;
color: $primary;
}
}
}
// Arrows
@include for(large-screens){
.wpc-menu {
ul li.menu-item-has-children > a {
padding-right: 28px;
*padding-right: 22px; // no CSS arrows for IE7 (lack pseudo-elements)
}
ul li.menu-item-has-children > a:after {
content: "";
position: absolute;
top: 50%;
right: 10px;
margin-top: -14px;
height: 0;
width: 0;
// order of following 3 rules important for fallbacks to work
border: 4px solid transparent;
border-top-color: #eeeeee; // edit this to suit design (no rgba in IE8)
border-top-color: rgba(0,0,0,.3);
}
> li > li.menu-item-has-children > a:focus:after,
> li:hover > li.menu-item-has-children > a:after,
> .sfHover > li.menu-item-has-children > a:after {
border-top-color: white; // IE8 fallback colour
}
ul li.menu-item-has-children > a:after {
margin-top: -3px;
margin-right: 0px;
border-color: transparent;
border-left-color: #dddddd; // edit this to suit design (no rgba in IE8)
border-left-color: rgba(0,0,0,.2);
}
ul li > li.menu-item-has-children > a:focus:after,
ul li:hover > li.menu-item-has-children > a:after,
ul .sfHover > li.menu-item-has-children > a:after {
border-left-color: white;
}
}
}
/* Responsive Mobile Navigation
------------------------------*/
#nav-toggle {
display: none;
font-size: 22px;
cursor: pointer;
color: #222222;
line-height: 1;
margin-top: -1px;
position: absolute;
top: 23px;
right: 30px;
}
.nav-toggle-subarrow {
display: none;
}
@include for(screens-large) {
.main-navigation {
position: static;
}
.main-navigation .wpc-menu {
width: 100% !important;
display: none;
}
.wpc-menu.wpc-menu-mobile {
display: block !important;
position: absolute !important;
right: 0;
width: 100%;
background: transparent;
z-index: 100;
border-bottom: 1px solid $border;
> li > a {
padding: 12px 20px;
}
ul {
box-shadow: none;
padding-bottom: 0;
position:static!important;
display: none!important;
li:last-child {
border-bottom: none;
}
li a {
padding: 12px 35px;
&:hover {
background: transparent;
}
}
li li a {
padding: 12px 70px;
}
li li li a {
padding: 12px 105px;
}
}
> li > a {
//padding-left: 20px;
}
li {
background: #FFFFFF;
border-top: 1px solid $border;
float: none!important;
display: block!important;
width: 100%!important;
}
li.current-menu-item {
> a {
color: #000000;
background: #FFFFFF;
}
}
a {
color: $text;
&:hover {
color: #000000;
}
}
.nav-toggle-subarrow{
display: block;
color: #999999;
font-weight: normal;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
text-align: center;
padding: 6px 20px 7px;
z-index: 10;
font-size: 22px;
}
.nav-toggle-dropdown > .nav-toggle-subarrow .fa-angle-down:before {
content:"\f106" !important;
}
.nav-toggle-dropdown > ul{
display: block !important;
}
}
#nav-toggle {
display: inline-block;
}
.nav-toggle-active i {
color: $primary;
}
.nav-toggle-active i.fa-bars:before {
content:"\f00d" !important;
}
}
/*------------------------------
4.2 Content
------------------------------*/
/* Content elements
------------------------------*/
.blog .hentry, .archive .hentry, .search .hentry {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid $border;
}
.hentry.sticky {
padding: 30px;
background: $meta;
@include border-radius(3px);
.post-thumbnail img {
@include border-radius(3px);
}
}
.more-link {
font-size: 12px;
font-weight: bold;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
padding-top: 10px;
&:hover {
text-decoration: underline;
}
}
.single .hentry {
margin-bottom: $base;
}
.loop-pagination {
display: inline-block;
margin-bottom: 20px;
a, span {
padding: 6px 13px 7px;
background: #BBBBBB;
color: #FFFFFF !important;
@include border-radius(2px);
text-decoration: none;
&:hover{
background: $primary;
}
}
a.current, span.current {
background: $primary;
}
}
/* Page & Archive Title */
.page-header .page-title, .archive-title {
font-size: 25px;
padding-bottom: 20px;
margin-bottom: 40px;
border-bottom: 1px solid $border;
text-transform: uppercase;
}
/*------------------------------
4.3 Sidebar
------------------------------*/
.widget-area {
ul {
list-style: none;
padding-left: 0;
}
a {
text-decoration: none;
}
}
/*------------------------------
4.4 Footer
------------------------------*/
.site-footer {
padding: 0px 0 0px;
background: #111111;
color: #999999;
font-size: 13px;
a, .widget a {
color: #dddddd;
&:hover {
color: #FFFFFF;
text-decoration: underline;
}
}
.widget {
font-size: 13px;
line-height: 1.8;
}
table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > td, table > tbody > tr > td, table > tfoot > tr > td {
border-color: rgba( 255,255,255,0.3);
}
textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
border-color: rgba( 255,255,255,0.3);
}
}
.footer-1-columns .footer-column {
width: 100%;
}
.footer-2-columns {
.footer-column {
width: 100%;
}
@include for(medium-screens) {
.footer-column {
width: percentage( ( ( $width - $gutter ) / 2 ) / $width );
float: left;
margin-right: percentage($gutter / $width);
}
.footer-2 {
margin-right: 0;
}
}
}
.footer-3-columns {
.footer-column {
width: 100%;
}
@include for(medium-screens) {
.footer-column {
width: percentage( ( ( $width - $gutter ) / 2 ) / $width );
float: left;
margin-right: percentage($gutter / $width);
}
.footer-2 {
margin-right: 0;
}
}
@include for(large-screens) {
.footer-column {
width: percentage( ( ( $width - $gutter*2 ) / 3 ) / $width );
float: left;
margin-right: percentage($gutter / $width);
}
.footer-3 {
margin-right: 0;
}
}
}
.footer-4-columns {
.footer-column {
width: 100%;
}
@include for(medium-screens) {
.footer-column {
width: percentage( ( ( $width - $gutter ) / 2 ) / $width );
float: left;
margin-right: percentage($gutter / $width);
}
.footer-2, .footer-4 {
margin-right: 0;
}
}
@include for(large-screens) {
.footer-column {
width: percentage( ( ( $width - $gutter*3 ) / 4 ) / $width );
float: left;
margin-right: percentage($gutter / $width);
}
.footer-4 {
margin-right: 0;
}
}
}
.site-footer .footer-columns {
padding: 40px 0px;
.footer-column .widget {
padding-bottom: 0;
margin-bottom: 30px;
border: none;
@include for(medium-screens) {
margin-bottom: 30px;
&:last-child {
margin-bottom: 0px;
}
}
.widget-title {
color: #eeeeee;
font-size: 15px;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: -0.1px;
font-weight: 500;
}
}
.widget_nav_menu {
ul ul, ul ul ul {
padding: 0px;
}
ul li{
padding: 0;
a {
display: block;
padding: 5px 10px 9px 17px;
position: relative;
border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
&:before {
content: "\f105";
font-family: FontAwesome;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 8px;
}
}
}
}
.widget_nav_menu #menu-footer-widget-menu {
margin-top: -7px;
li {
float: left;
margin-bottom: 0;
width: 50%;
padding: 8px 0px;
a {
display: unset;
padding: 0;
border: none;
&:before {
content: none;
}
}
}
}
.widget_wpc_posts ul li {
background: rgba(255, 255, 255, 0.03);
}
.contact-info-item .contact-text {
width: 30px;
i {
font-size: 16px;
}
i.fa-envelope {
font-size: 12px;
position: relative;
top: -3px;
}
i.fa-fax {
font-size: 14px;
position: relative;
top: -3px;
}
}
.contact-info-item .contact-value {
margin-left: 35px;
}
.contact-info-box img {
margin-bottom: 30px;
}
ul.hours {
li {
border-top: 1px dotted rgba(255, 255, 255, 0.1);
}
li:first-child {
border-top: none;
//border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
}
span {
float: right;
font-weight: bold;
}
}
}
.site-info-wrapper {
background: #222222;
border-top: 1px solid #333333;
padding: 20px 0px;
font-size: 12px;
.site-info {
.copy_text {
float: none;
text-align: center;
font-size: 13px;
margin-bottom: 30px;
@include for(medium-screens) {
float: left;
margin-bottom: 0px;
text-align: left;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.footer-menu {
float: none;
text-align: center;
@include for(medium-screens) {
float: right;
text-align: left;
}
ul {
padding: 0;
margin: 0;
list-style: none;
li {
padding: 0;
margin: 0;
display: inline-block;
line-height: 1;
a {
float: left;
margin-left: 15px;
text-decoration: none;
font-size: 12px;
&:hover {
text-decoration: underline;
}
}
ul {
display: none;
}
}
}
}
}
}
.footer-social {
float: left;
padding: 10px 18.5px;
color: #FFFFFF;
background: $primary;
margin-top: -16px;
position: relative;
label {
font-size: 13px;
margin-right: 10px;
color: #222222;
}
&:after {
border-right: 9px solid #777777;
border-top: 16px solid transparent;
content: "";
display: block;
height: 0;
left: -9px;
position: absolute;
top: 0;
}
a {
margin-right: 3px;
i {
padding: 0;
border-radius: 50%;
font-size: 13px;
line-height: 1.6em;
height: 1.8em;
width: 1.8em;
text-align:center;
border: 1px solid #222222;
color: #222222;
&:hover {
color: #FFFFFF;
border-color: #FFFFFF;
}
}
}
}
/* Client Logo Grid
------------------------------*/
.client-logo img {
border: 1px solid $border;
}
.client-table img {
width: 100%;
&:hover {
opacity: 0.8;
}
}
/* Back To Top
------------------------------*/
#btt {
background: none repeat scroll #222222;
opacity: 0.8;
border: 1px solid #333333;
border-radius: 2px;
bottom: 21px;
cursor: pointer;
padding: 8px 15px;
position: fixed;
right: 20px;
z-index: 50;
}
/* Browser Suppport
------------------------------*/
.ie9, .ie10, .ie11 {
.site-header .header-right-wrap {
float: none;
}
}