File: /var/www/dhoistage.concertium.com/wp-content/themes/vantage/less/widgets.less
/* =Widgets
----------------------------------------------- */
.widget {
margin: 0 0 1.5em;
}
/* Make sure select elements fit in widgets */
.widget select {
max-width: 100%;
font-size: 1em;
outline: none;
}
/* Search widget */
#searchsubmit {
display: none;
}
.widget .searchform input {
width: 100%;
padding: 5px;
outline: none;
}
.textwidget p:first-child{
margin-top:0;
}
.textwidget p:last-child{
margin-bottom:0;
}
.tagcloud a {
text-decoration: none;
}
/* =Sidebar widget styling
----------------------------------------------- */
#secondary, #footer-widgets, #masthead-widgets {
.widget {
margin-bottom: 40px;
font-size: 13px;
color: #5e5e5e;
&:last-child {
margin-bottom: 0;
}
.widget-title {
font-size: 15px;
color: #3b3b3b;
font-weight: bold;
margin-bottom: 15px;
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
ul, ol {
margin-left: 1em;
}
li {
padding-bottom: 7px;
a {
text-decoration: none;
}
ul.children {
padding-top: 7px;
margin-bottom: -7px;
}
}
}
}
}
#footer-widgets {
.clearfix();
margin: 0 -5px;
max-width: 100%;
.widget {
.box-sizing(border-box);
float: left;
padding: 0 15px;
margin-bottom:0;
color: #b9b9b9;
&.panel, &.widget_siteorigin-panels-builder {
padding: 0;
}
a {
color: #cccccc;
}
.widget-title {
color: #e2e2e2;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
}
}
#masthead-widgets {
.clearfix();
.widget {
.box-sizing(border-box);
margin-bottom: 0;
float: left;
padding-right: 25px;
&:last-child {
padding-right: 0;
}
.widget-title {
color: #3b3b3b;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
}
}
.vertical-footer #footer-widgets .widget {
margin-bottom: 25px;
width: 100%;
&:last-child {
margin-bottom: 0;
}
}
/* =General Widget Styling
----------------------------------------------- */
.widget {
img, iframe, object, select, input {
max-width: 100%;
}
img {
height: auto;
}
a.button {
display:inline-block;
padding: 9px 26px;
.rounded(4px);
font-size: 0.875em;
text-decoration:none;
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,05);
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)");
.button-style(#107fc9);
}
.button-container.align-center{
text-align: center;
}
.button-container.align-left{
text-align: left;
}
.button-container.align-right{
text-align: right;
}
.button-container.align-full .button{
display: block;
text-align: center;
}
}
#wp-calendar {
border: none;
margin: 0;
caption {
font-weight: 600;
text-align: right;
padding-bottom: 0.4286em;
}
th,
td {
border: none;
padding: 0.2143em 0.2143em 0.1429em !important;
}
thead th {
text-align: center;
padding-bottom: 0.4286em !important;
}
tbody {
.pad {
background: none;
}
td {
background: #ddd;
border: 0.1429em solid #fff;
text-align: center;
&:hover {
background: #fff;
}
a {
border-bottom: none !important;
display: block;
text-decoration: none;
&:hover {
border-bottom: none !important;
text-decoration: none;
}
}
}
}
tfoot {
#prev,
#next {
padding-top: 0.4286em !important;
}
#next {
text-align: right;
}
}
}
/* Footer Calendar styling: colors assume the original theme footer background color. */
.site-footer #wp-calendar {
tbody td {
background: #434447;
border-color: #2f3033;
a {
color: #fff;
&:hover {
color: #b9b9b9;
}
}
}
tfoot #prev,
tfoot #next {
a:hover {
color: #fff;
}
}
}
.widget_call-to-action {
position: relative;
padding: 25px 30px 23px 30px;
h2.cta-headline{
margin:0 0 0.35em 0;
color: #333;
}
p.cta-sub-text{
margin:0;
color: #666;
}
a.button {
position: absolute;
top: 50%;
right: 30px;
margin-top: -20px; /* This should be half the height of the button */
}
}
/* Responsive styles for the call to action widget */
@media (max-width:680px) {
body.responsive .widget_call-to-action {
a.button {
position: static;
margin-top: 25px;
display:block;
text-align:center;
}
}
}
.widget_siteorigin-list {
ul {
li {
margin-bottom: 0.4em;
}
li:last-child {
margin-bottom: 0;
}
}
}
.widget_icon-text {
font-size: 0.95em;
text-align:center;
.feature-icon {
display: inline-block;
line-height: 0;
}
.widget-title {
margin: 15px 0;
}
}
.widget_circleicon-widget {
@icon_size: 65px;
@icon_font_size: 24px;
clear:both;
.circle-icon-box {
text-align: center;
&.circle-icon-show-box {
border: 1px solid #dddddd;
background: #f6f6f6;
.box-shadow(~"0 2px 2px rgba(0,0,0,0.05)");
padding: 24px;
}
&.circle-icon-hide-box {
padding: 5px;
}
position: relative;
.link-icon, .link-title {
text-decoration: none;
display: block;
}
.circle-icon {
position: absolute;
background-color: #3a3b3e;
display: inline-block;
width: @icon_size;
height: @icon_size;
.rounded(@icon_size*2);
.transition(0.5s);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
[class^="fa fa-"] {
display: block;
font-size: @icon_font_size;
width: 100%;
height: 1em;
text-align: center;
color: #ffffff;
line-height: 1.1em;
position: absolute;
top: 50%;
left: 0;
margin-top: -0.5em;
}
}
h4 {
color: #3b3b3b;
font-weight: bold;
font-size: 17px;
margin-bottom: 0.8em;
margin-top: 0;
}
p.text {
margin: 0;
color: #5e5e5e;
font-size: 13px;
margin-bottom: 10px;
}
p.text:last-child {
margin-bottom: 0;
}
a.more-button {
display: block;
text-decoration: none;
color: #3b3b3b;
font-weight: bold;
font-size: 13px;
i {
display: inline-block;
width: 5px;
height: 8px;
margin-left: 3px;
background: url(images/sprites/more-icon.png) no-repeat;
@media screen and (-webkit-min-device-pixel-ratio: 2) {
& {
background: url(./images/retina/more-icon.png);
background-size: 5px 8px;
}
}
}
}
/* The different icon positions */
&.circle-icon-position-top {
padding-top: @icon_size + 10px;
.circle-icon {
top: 0;
left: 50%;
margin-left: -(@icon_size)/2;
}
}
&.circle-icon-position-bottom {
padding-bottom: (@icon_size) + 10px;
.circle-icon {
bottom: 0;
left: 50%;
margin-left: -(@icon_size)/2;
}
}
&.circle-icon-position-left {
text-align: left;
padding-left: (@icon_size) + 10px;
.circle-icon {
left: 0;
top: 50%;
margin-top: -(@icon_size)/2;
}
}
&.circle-icon-position-right {
text-align: left;
padding-right: (@icon_size) + 10px;
.circle-icon {
right: 0;
top: 50%;
margin-top: -(@icon_size)/2;
}
}
}
/* A medium sized icon */
.circle-icon-box.circle-icon-size-medium {
@icon_size: 81.25px;
@icon_font_size: 30px;
.circle-icon {
width: @icon_size;
height: @icon_size;
.rounded(@icon_size*2);
.transition(0.5s);
[class^="fa fa-"] {
font-size: 36px;
line-height: 1.1em;
}
}
/* The different icon positions */
&.circle-icon-position-top {
padding-top: @icon_size + 10px;
.circle-icon {
top: 0;
left: 50%;
margin-left: -(@icon_size)/2;
}
}
&.circle-icon-position-bottom {
padding-bottom: (@icon_size) + 10px;
.circle-icon {
bottom: 0;
left: 50%;
margin-left: -(@icon_size)/2;
}
}
&.circle-icon-position-left {
text-align: left;
padding-left: (@icon_size) + 10px;
.circle-icon {
left: 0;
top: 50%;
margin-top: -(@icon_size)/2;
}
}
&.circle-icon-position-right {
text-align: left;
padding-right: (@icon_size) + 10px;
.circle-icon {
right: 0;
top: 50%;
margin-top: -(@icon_size)/2;
}
}
}
.circle-icon-box.circle-icon-size-large {
@icon_size: 100px;
@icon_font_size: 38px;
.circle-icon {
width: @icon_size;
height: @icon_size;
.rounded(@icon_size*2);
.transition(0.5s);
[class^="fa fa-"] {
font-size: 44px;
line-height: 1.1em;
}
}
/* The different icon positions */
&.circle-icon-position-top {
padding-top: @icon_size + 10px;
.circle-icon {
top: 0;
left: 50%;
margin-left: -(@icon_size)/2;
}
}
&.circle-icon-position-bottom {
padding-bottom: (@icon_size) + 10px;
.circle-icon {
bottom: 0;
left: 50%;
margin-left: -(@icon_size)/2;
}
}
&.circle-icon-position-left {
text-align: left;
padding-left: (@icon_size) + 10px;
.circle-icon {
left: 0;
top: 50%;
margin-top: -(@icon_size)/2;
}
}
&.circle-icon-position-right {
text-align: left;
padding-right: (@icon_size) + 10px;
.circle-icon {
right: 0;
top: 50%;
margin-top: -(@icon_size)/2;
}
}
}
}
.widget_headline-widget {
text-align: center;
h1 {
padding-top: 20px;
margin: 0;
font-size: 26px;
line-height: 36px;
text-transform: uppercase;
color: #444444;
letter-spacing: 1px;
}
h3 {
padding-bottom: 20px;
margin: 0;
font-size: 14px;
color: #666666;
font-weight: 200;
}
.decoration {
border-top: 1px solid #EEE;
position: relative;
height: 1px;
margin: 20px 60px 20px 60px;
}
}
/* =Custom Menu Widget in Header Area
----------------------------------------------- */
#header-sidebar,
#masthead-widgets {
.widget_nav_menu {
ul.menu {
margin: 0;
> li{
list-style: none;
display: inline-block;
margin-right: 20px;
position: relative;
&:last-child {
margin-right: 0;
}
> a {
display: block;
text-decoration: none;
color: #555555;
font-weight: 500;
padding: 0.75em 0;
line-height: 1em;
}
ul.sub-menu {
display: none;
position: absolute;
margin: 0;
z-index: 10000;
border: 1px solid #e6e6e6;
.box-shadow(~"0 1px 1px rgba(0,0,0,0.1)");
top: 2.5em;
left: -10px;
background: white;
li {
position: relative;
list-style: none;
width: 160px;
.box-sizing(border-box);
padding: 10px 10px;
a {
display: block;
text-decoration: none;
color: #777777;
}
}
ul {
display: none;
top: -1px;
left: 160px;
}
}
> ul.sub-menu {
border-top: 2px solid #00bcff;
}
}
li:hover {
> ul.sub-menu {
display: block;
}
}
}
}
}
/* =Custom Menu Widget in Footer Area
----------------------------------------------- */
#colophon {
.widget_nav_menu {
.sub-menu {
margin-left: 0;
}
.menu-item {
padding-bottom: 0;
a {
display: block;
padding-bottom: 3px;
margin-bottom: 3px;
border-bottom: 1px solid #b9b9b9;
}
}
}
}
/* =Some row styling for page builder
----------------------------------------------- */
.panel-row-style{
margin: 0 -20px;
padding: 25px 20px;
background-position: center center;
background-repeat: no-repeat;
.panel-row-style {
margin: 0;
}
}
.panel-row-style-wide-grey,
.wide-grey.panel-row-style {
background: #f6f6f6;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.layout-full .panel-row-style.panel-row-style-wide-grey,
.layout-full .wide-grey.panel-row-style,
.layout-full .panel-row-style.panel-row-style-full-width,
.layout-full.panels-style-force-full .panel-row-style{
margin: 0 -1000px;
padding: 25px 1000px 25px 1000px;
}
.layout-boxed {
.panel-row-style{
padding: 25px 35px;
&.panel-row-style-wide-grey, .wide-grey.panel-row-style {
margin: 0 -20px;
}
}
}
@media (max-width:680px) {
body.responsive.layout-boxed {
.panel-row-style {
margin: 0 -35px;
padding: 25px 35px;
&.panel-row-style-wide-grey, .wide-grey.panel-row-style {
margin: 0 -20px;
}
}
}
}
.panel-grid-cell .flexslider {
margin-bottom: 0;
}
/* =Styling for the Polylang widget in masthead
----------------------------------------------- */
#masthead .widget_polylang {
ul {
list-style: none;
li {
display: block;
float: left;
margin-left: 10px;
}
}
}