first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,156 @@
|
||||
/**
|
||||
* About Me Widget
|
||||
*/
|
||||
.oceanwp-about-me {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.oceanwp-about-me-avatar,
|
||||
.oceanwp-about-me-social {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.oceanwp-about-me-avatar img {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.oceanwp-about-me-name {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin: 16px 0 10px;
|
||||
text-transform: uppercase;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.oceanwp-about-me-social {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-color li a, &.style-color li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.style-color li {
|
||||
&.facebook a {
|
||||
background-color: #37589b;
|
||||
|
||||
&:hover {
|
||||
background-color: #4e7ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter a {
|
||||
background-color: #46d4fe;
|
||||
|
||||
&:hover {
|
||||
background-color: #7ee1fe;
|
||||
}
|
||||
}
|
||||
|
||||
&.google-plus a {
|
||||
background-color: #de5a49;
|
||||
|
||||
&:hover {
|
||||
background-color: #fc7a69;
|
||||
}
|
||||
}
|
||||
|
||||
&.instagram a {
|
||||
background-color: #5996c7;
|
||||
|
||||
&:hover {
|
||||
background-color: #69b4f0;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin a {
|
||||
background-color: #419cca;
|
||||
|
||||
&:hover {
|
||||
background-color: #52c3fc;
|
||||
}
|
||||
}
|
||||
|
||||
&.pinterest a {
|
||||
background-color: #cb2027;
|
||||
|
||||
&:hover {
|
||||
background-color: #f7555c;
|
||||
}
|
||||
}
|
||||
|
||||
&.youtube a {
|
||||
background-color: #dd4646;
|
||||
|
||||
&:hover {
|
||||
background-color: #ff6262;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-light li a {
|
||||
color: #aaa;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&.style-dark li a {
|
||||
color: $color-4;
|
||||
border: 1px solid $color-11;
|
||||
}
|
||||
|
||||
&.style-light li, &.style-dark li {
|
||||
&.facebook a:hover {
|
||||
color: #37589b;
|
||||
border-color: #37589b;
|
||||
}
|
||||
|
||||
&.twitter a:hover {
|
||||
color: #46d4fe;
|
||||
border-color: #46d4fe;
|
||||
}
|
||||
|
||||
&.google-plus a:hover {
|
||||
color: #de5a49;
|
||||
border-color: #de5a49;
|
||||
}
|
||||
|
||||
&.instagram a:hover {
|
||||
color: #5996c7;
|
||||
border-color: #5996c7;
|
||||
}
|
||||
|
||||
&.linkedin a:hover {
|
||||
color: #419cca;
|
||||
border-color: #419cca;
|
||||
}
|
||||
|
||||
&.pinterest a:hover {
|
||||
color: #cb2027;
|
||||
border-color: #cb2027;
|
||||
}
|
||||
|
||||
&.youtube a:hover {
|
||||
color: #dd4646;
|
||||
border-color: #dd4646;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* Calendar Widget
|
||||
*/
|
||||
#wp-calendar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
caption {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
padding-bottom: 10px;
|
||||
padding: 0 0 10px 0;
|
||||
background-color: transparent;
|
||||
color: $color-5;
|
||||
border-width: 0 0 3px 0;
|
||||
border-style: solid;
|
||||
border-color: $border-color;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
td, th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding: 13px 0px 14px 0px;
|
||||
background-color: transparent;
|
||||
color: #777;
|
||||
border-width: 0 0 1px 0;
|
||||
border-style: solid;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
tbody {
|
||||
border-width: 0 0 3px 0;
|
||||
border-style: solid;
|
||||
border-color: $border-color;
|
||||
|
||||
td,
|
||||
td:hover,
|
||||
td.pad:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 12px;
|
||||
color: $color-4;
|
||||
width: 14.2857%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: 400;
|
||||
padding: 5px 0 0 0;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
a, #today {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#today {
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
td {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr td {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background-color: transparent !important;
|
||||
font-size: 11px;
|
||||
padding-top: 10px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&#prev, &#next {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid;
|
||||
|
||||
&:hover {
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
/**
|
||||
* Contact Info Widget
|
||||
*/
|
||||
.contact-info-widget {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-info-wrap,
|
||||
span.oceanwp-contact-title,
|
||||
span.oceanwp-contact-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span.oceanwp-contact-title {
|
||||
color: #777;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
span.oceanwp-contact-text {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
li.skype {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
background-color: #0ca5de;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
padding: 12px 15px;
|
||||
|
||||
&:hover {
|
||||
background-color: #0581af;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Default style */
|
||||
.contact-info-widget.default {
|
||||
i {
|
||||
float: left;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border: 1px solid $border-color;
|
||||
color: $color-5;
|
||||
margin-right: 15px;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.oceanwp-info-wrap {
|
||||
padding-left: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Big icons style */
|
||||
.contact-info-widget.big-icons {
|
||||
li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
float: left;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
font-size: 30px;
|
||||
margin-right: 20px;
|
||||
color: $color-5;
|
||||
border: 1px solid $border-color;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
-webkit-transition: all .3s ease;
|
||||
-moz-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
li:hover i {
|
||||
background-color: $color-5;
|
||||
color: #fff;
|
||||
border-color: $color-5;
|
||||
}
|
||||
|
||||
.oceanwp-info-wrap {
|
||||
|
||||
}
|
||||
|
||||
span.oceanwp-contact-title {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
li.skype a {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* No icons style */
|
||||
.contact-info-widget.no-icons {
|
||||
li .oceanwp-contact-title {
|
||||
display: inline-block;
|
||||
min-width: 70px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
li.skype {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* Custom Links Widget
|
||||
*/
|
||||
.oceanwp-custom-links {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: 2px 0;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
color: $color-2;
|
||||
|
||||
&:before {
|
||||
content: '\f111';
|
||||
display: inline-block;
|
||||
color: $color-4;
|
||||
font-size: 10px;
|
||||
margin-right: 10px;
|
||||
margin-top: -2px;
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
margin-left: 8px;
|
||||
color: $color-5;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* Custom Menu Widget
|
||||
*/
|
||||
.oceanwp-custom-menu {
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: $color-11;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
&:hover {
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-menu-widget .oceanwp-custom-menu {
|
||||
|
||||
> ul > li {
|
||||
display: block;
|
||||
border-bottom: 1px solid $color-7;
|
||||
|
||||
> a {
|
||||
padding: 8px 0;
|
||||
|
||||
.nav-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
-ms-transform: translateY( -50% );
|
||||
-webkit-transform: translateY( -50% );
|
||||
transform: translateY( -50% );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right > ul > li > a .nav-arrow {
|
||||
right: auto;
|
||||
left: 0;
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu .sub-menu {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
background-color: transparent;
|
||||
border-top: 0;
|
||||
min-width: 100%;
|
||||
margin: 10px 0 0 12px;
|
||||
line-height: 1;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
[dir="rtl"] & {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: block;
|
||||
border-bottom: 1px solid $color-7;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a.menu-link {
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: $color-11;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> ul.click-menu {
|
||||
li a {
|
||||
position: relative;
|
||||
|
||||
.nav-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.open-this {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 36px;
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
[dir="rtl"] & {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
i {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li.opened > a > .open-this i:before {
|
||||
content: '\f106';
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
border-top: 1px solid #e9e9e9;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Flickr Widget
|
||||
*/
|
||||
.oceanwp-flickr-wrap .flickr_badge_image {
|
||||
float: left;
|
||||
margin: 0 4% 10px 0;
|
||||
width: 30.6%;
|
||||
transition: all .3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&#flickr_badge_image3,
|
||||
&#flickr_badge_image6,
|
||||
&#flickr_badge_image9 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
p.flickr_stream_wrap {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
font-size: 90%;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
background-image: url('../../assets/img/flickr.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
/* flickr widget */
|
||||
.oceanwp-flickr-wrap .flickr_badge_image {
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,345 @@
|
||||
/**
|
||||
* Instagram Widget
|
||||
*/
|
||||
.oceanwp-instagram-pics li {
|
||||
display: block;
|
||||
float: left;
|
||||
height: 100%;
|
||||
-webkit-transition: all .3s ease;
|
||||
-moz-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics.margin li {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics li a {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics li img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics li:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/*header*/
|
||||
.oceanwp-instagram-header {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-header.oceanwp-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-header.oceanwp-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-header.oceanwp-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*header avatar*/
|
||||
.oceanwp-instagram-avatar {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-header.oceanwp-left .oceanwp-instagram-avatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-header.oceanwp-right .oceanwp-instagram-avatar {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-header.oceanwp-center .oceanwp-instagram-avatar {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-avatar a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-avatar.square a,
|
||||
.oceanwp-instagram-avatar.square a img {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-avatar.rounded a,
|
||||
.oceanwp-instagram-avatar.rounded a img {
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-avatar a img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
-webkit-transition: all .3s ease;
|
||||
-moz-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-avatar a:hover img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-follow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition: all ease-out .2s;
|
||||
-moz-transition: all ease-out .2s;
|
||||
-o-transition: all ease-out .2s;
|
||||
transition: all ease-out .2s;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-follow span {
|
||||
display: inline-block;
|
||||
padding: 4px 6px;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
background-color: #47bc60;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#47bc60),to(#39a64e));
|
||||
background-image: -webkit-linear-gradient(top,#47bc60,#39a64e);
|
||||
background-image: -moz-linear-gradient(top,#47bc60,#39a64e);
|
||||
background-image: -o-linear-gradient(top,#47bc60,#39a64e);
|
||||
background-image: -ms-linear-gradient(top,#47bc60,#39a64e);
|
||||
background-image: linear-gradient(top,#47bc60,#39a64e);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#47bc60',EndColorStr='#39a64e');
|
||||
color: #fff;
|
||||
border: 1px solid #329345;
|
||||
text-shadow: 0 1px 1px #2c803c;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-avatar a:hover .oceanwp-instagram-follow {
|
||||
top: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*header info*/
|
||||
.oceanwp-instagram-info .oceanwp-instagram-username {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin: 0 0 4px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-info .oceanwp-instagram-desc {
|
||||
display: block;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*style 1*/
|
||||
.oceanwp-instagram-pics.style-one li:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics.style-one li {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
/*style 2*/
|
||||
.oceanwp-instagram-pics.style-two li:nth-child(1),
|
||||
.oceanwp-instagram-pics.style-two li:nth-child(2) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics.style-two li {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/*style 3*/
|
||||
.oceanwp-instagram-pics.style-three li:nth-child(4n+1) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics.style-three li {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
/*style 4*/
|
||||
.oceanwp-style-four-wrap {
|
||||
background: #f6f6f6;
|
||||
border-bottom: 3px solid #eee;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-bar {
|
||||
background-color: #6f97b6;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#6f97b6),to(#3f729b));
|
||||
background-image: -webkit-linear-gradient(top,#6f97b6,#3f729b);
|
||||
background-image: -moz-linear-gradient(top,#6f97b6,#3f729b);
|
||||
background-image: -ms-linear-gradient(top,#6f97b6,#3f729b);
|
||||
background-image: -o-linear-gradient(top,#6f97b6,#3f729b);
|
||||
background-image: linear-gradient(top,#6f97b6,#3f729b);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6f97b6',EndColorStr='#3f729b');
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-bar .instagram-logo {
|
||||
display: block;
|
||||
margin: 8px auto 6px;
|
||||
width: 96px;
|
||||
height: 29px;
|
||||
background: url( '../../assets/img/instagram-logo.png' ) no-repeat;
|
||||
}
|
||||
|
||||
.oceanwp-style-four-wrap .oceanwp-instagram-header {
|
||||
background-color: #fff;
|
||||
padding: 20px 15px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #eaeaea;
|
||||
}
|
||||
|
||||
.oceanwp-style-four-wrap .oceanwp-instagram-header.oceanwp-after {
|
||||
border-top: 1px solid #eaeaea;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics.style-four.margin li img {
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics.style-four {
|
||||
padding: 10px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #eaeaea;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-pics.style-four li {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
/*two columns*/
|
||||
.oceanwp-instagram-pics.two-columns li {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/*three columns*/
|
||||
.oceanwp-instagram-pics.three-columns li {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
/*four columns*/
|
||||
.oceanwp-instagram-pics.four-columns li {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/*five columns*/
|
||||
.oceanwp-instagram-pics.five-columns li {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
/*six columns*/
|
||||
.oceanwp-instagram-pics.six-columns li {
|
||||
width: 16.66%;
|
||||
}
|
||||
|
||||
/*seven columns*/
|
||||
.oceanwp-instagram-pics.seven-columns li {
|
||||
width: 14.28%;
|
||||
}
|
||||
|
||||
/*eight columns*/
|
||||
.oceanwp-instagram-pics.eight-columns li {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
/*nine columns*/
|
||||
.oceanwp-instagram-pics.nine-columns li {
|
||||
width: 11.11%;
|
||||
}
|
||||
|
||||
/*ten columns*/
|
||||
.oceanwp-instagram-pics.ten-columns li {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
/*link*/
|
||||
.oceanwp-instagram-link {
|
||||
display: block;
|
||||
margin: 10px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.oceanwp-instagram-link a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.8px;
|
||||
padding: 0 0 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*style four link*/
|
||||
.oceanwp-style-four-wrap .oceanwp-instagram-link {
|
||||
padding: 3px 0 16px;
|
||||
margin: 0;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #eaeaea;
|
||||
}
|
||||
|
||||
.oceanwp-style-four-wrap .oceanwp-instagram-link a {
|
||||
display: block;
|
||||
background-color: #5582A7;
|
||||
color: #fff;
|
||||
padding: 12px 8px;
|
||||
margin: 0 auto;
|
||||
font-weight: 600;
|
||||
border: 0;
|
||||
width: 80%;
|
||||
max-width: 300px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.04),0 1px 3px rgba(0,0,0,0.1);
|
||||
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.04),0 1px 3px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.04),0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.oceanwp-style-four-wrap .oceanwp-instagram-link a:hover {
|
||||
background-color: #3f729b;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* MailChimp Widget
|
||||
*/
|
||||
.oceanwp-newsletter-form-wrap {
|
||||
position: relative;
|
||||
|
||||
.oceanwp-mail-text {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
height: 50px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
padding: 0 15px;
|
||||
height: 60%;
|
||||
border-radius: 3px;
|
||||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
#mc-embedded-subscribe-form {
|
||||
.email-wrap {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.gdpr-wrap {
|
||||
label,
|
||||
.err-msg{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.err-msg,
|
||||
.res-msg {
|
||||
display: block;
|
||||
padding: 3px 13px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.err-msg,
|
||||
.failed.res-msg {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
|
||||
.success.res-msg {
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
border-color: #d6e9c6;
|
||||
}
|
||||
|
||||
.success.res-msg,
|
||||
.failed.res-msg {
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent conflict with woocommerce */
|
||||
body.woocommerce .oceanwp-newsletter-form-wrap button {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
/**
|
||||
* Recent Posts Widget
|
||||
*/
|
||||
.oceanwp-recent-posts {
|
||||
li {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
line-height: 1.6;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-posts-thumbnail {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
min-width: 68px;
|
||||
margin-right: 4%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
opacity: 0;
|
||||
text-align: center;
|
||||
transition: all .3s ease;
|
||||
-webkit-transition: all .3s ease;
|
||||
-moz-transition: all .3s ease;
|
||||
-o-transition: all .3s ease;
|
||||
-ms-transition: all .3s ease;
|
||||
}
|
||||
|
||||
&:hover .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-posts-details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.recent-posts-title {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.recent-posts-info {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
margin-top: 6px;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2px;
|
||||
|
||||
.sep {
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-posts-date,
|
||||
.recent-posts-comments {
|
||||
display: inline-block;
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-posts-comments a {
|
||||
color: #999;
|
||||
|
||||
&:hover {
|
||||
color: #32b6c0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* recent posts widget */
|
||||
.oceanwp-recent-posts {
|
||||
.recent-posts-thumbnail {
|
||||
width: 15%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
/* recent posts widget */
|
||||
.oceanwp-recent-posts {
|
||||
.recent-posts-thumbnail {
|
||||
width: 25%;
|
||||
margin-right: 4%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
/**
|
||||
* Social Icons Widget
|
||||
*/
|
||||
.oceanwp-social-icons {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.rotate a:hover {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
&.zoomout a:hover {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
&.float a:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-light li a,
|
||||
&.style-dark li a,
|
||||
&.style-colored li a {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
font-size: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&.style-light li {
|
||||
a {
|
||||
color: $color-13;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a:hover { color: #46d4fe !important; border-color: #46d4fe !important; }
|
||||
&.oceanwp-facebook a:hover { color: #37589b !important; border-color: #37589b !important; }
|
||||
&.oceanwp-google-plus a:hover { color: #de5a49 !important; border-color: #de5a49 !important; }
|
||||
&.oceanwp-pinterest a:hover { color: #cb2027 !important; border-color: #cb2027 !important; }
|
||||
&.oceanwp-dribbble a:hover { color: #ea4c89 !important; border-color: #ea4c89 !important; }
|
||||
&.oceanwp-vk a:hover { color: #597BA5 !important; border-color: #597BA5 !important; }
|
||||
&.oceanwp-instagram a:hover { color: #3F729B !important; border-color: #3F729B !important; }
|
||||
&.oceanwp-linkedin a:hover { color: #3399CC !important; border-color: #3399CC !important; }
|
||||
&.oceanwp-tumblr a:hover { color: #2C4762 !important; border-color: #2C4762 !important; }
|
||||
&.oceanwp-github a:hover { color: #60b044 !important; border-color: #60b044 !important; }
|
||||
&.oceanwp-flickr a:hover { color: #fa4086 !important;border-color: #fa4086 !important; }
|
||||
&.oceanwp-skype a:hover { color: #00AFF0 !important; border-color: #00AFF0 !important; }
|
||||
&.oceanwp-trello a:hover { color: #0079bf !important; border-color: #0079bf !important; }
|
||||
&.oceanwp-foursquare a:hover { color: #2d5be3 !important; border-color: #2d5be3 !important; }
|
||||
&.oceanwp-youtube a:hover { color: #C4302B !important; border-color: #C4302B !important; }
|
||||
&.oceanwp-vimeo a:hover { color: #1ab7ea !important; border-color: #1ab7ea !important; }
|
||||
&.oceanwp-vine a:hover { color: #00bf8f !important; border-color: #00bf8f !important; }
|
||||
&.oceanwp-xing a:hover { color: #006464 !important; border-color: #006464 !important; }
|
||||
&.oceanwp-yelp a:hover { color: #C41200 !important; border-color: #C41200 !important; }
|
||||
&.oceanwp-tripadvisor a:hover { color: #589442 !important; border-color: #589442 !important; }
|
||||
&.oceanwp-rss a:hover { color: #ff7900 !important; border-color: #ff7900 !important; }
|
||||
&.oceanwp-email a:hover { color: #13aff0 !important; border-color: #13aff0 !important; }
|
||||
}
|
||||
|
||||
&.style-dark li {
|
||||
a {
|
||||
color: $color-2;
|
||||
border: 1px solid $color-2;
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a:hover { color: #46d4fe !important; border-color: #46d4fe !important; }
|
||||
&.oceanwp-facebook a:hover { color: #37589b !important; border-color: #37589b !important; }
|
||||
&.oceanwp-google-plus a:hover { color: #de5a49 !important; border-color: #de5a49 !important; }
|
||||
&.oceanwp-pinterest a:hover { color: #cb2027 !important; border-color: #cb2027 !important; }
|
||||
&.oceanwp-dribbble a:hover { color: #ea4c89 !important; border-color: #ea4c89 !important; }
|
||||
&.oceanwp-vk a:hover { color: #597BA5 !important; border-color: #597BA5 !important; }
|
||||
&.oceanwp-instagram a:hover { color: #3F729B !important; border-color: #3F729B !important; }
|
||||
&.oceanwp-linkedin a:hover { color: #3399CC !important; border-color: #3399CC !important; }
|
||||
&.oceanwp-tumblr a:hover { color: #2C4762 !important; border-color: #2C4762 !important; }
|
||||
&.oceanwp-github a:hover { color: #60b044 !important; border-color: #60b044 !important; }
|
||||
&.oceanwp-flickr a:hover { color: #fa4086 !important;border-color: #fa4086 !important; }
|
||||
&.oceanwp-skype a:hover { color: #00AFF0 !important; border-color: #00AFF0 !important; }
|
||||
&.oceanwp-trello a:hover { color: #0079bf !important; border-color: #0079bf !important; }
|
||||
&.oceanwp-foursquare a:hover { color: #2d5be3 !important; border-color: #2d5be3 !important; }
|
||||
&.oceanwp-youtube a:hover { color: #C4302B !important; border-color: #C4302B !important; }
|
||||
&.oceanwp-vimeo a:hover { color: #1ab7ea !important; border-color: #1ab7ea !important; }
|
||||
&.oceanwp-vine a:hover { color: #00bf8f !important; border-color: #00bf8f !important; }
|
||||
&.oceanwp-xing a:hover { color: #006464 !important; border-color: #006464 !important; }
|
||||
&.oceanwp-yelp a:hover { color: #C41200 !important; border-color: #C41200 !important; }
|
||||
&.oceanwp-tripadvisor a:hover { color: #589442 !important; border-color: #589442 !important; }
|
||||
&.oceanwp-rss a:hover { color: #ff7900 !important; border-color: #ff7900 !important; }
|
||||
&.oceanwp-email a:hover { color: #13aff0 !important; border-color: #13aff0 !important; }
|
||||
}
|
||||
|
||||
&.style-colored li {
|
||||
a {
|
||||
color: $color-1;
|
||||
|
||||
&:hover {
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a { background-color: #46d4fe; }
|
||||
&.oceanwp-twitter a:hover { background-color: #39b4d8; }
|
||||
&.oceanwp-facebook a { background-color: #37589b; }
|
||||
&.oceanwp-facebook a:hover{ background-color: #2d477c; }
|
||||
&.oceanwp-google-plus a { background-color: #de5a49; }
|
||||
&.oceanwp-google-plus a:hover { background-color: #bb4c3e; }
|
||||
&.oceanwp-pinterest a { background-color: #cb2027; }
|
||||
&.oceanwp-pinterest a:hover { background-color: #a91d23; }
|
||||
&.oceanwp-dribbble a { background-color: #ea4c89; }
|
||||
&.oceanwp-dribbble a:hover { background-color: #c64174; }
|
||||
&.oceanwp-vk a { background-color: #597BA5; }
|
||||
&.oceanwp-vk a:hover { background-color: #486384; }
|
||||
&.oceanwp-instagram a { background-color: #3F729B; }
|
||||
&.oceanwp-instagram a:hover { background-color: #315a7c; }
|
||||
&.oceanwp-linkedin a { background-color: #3399CC; }
|
||||
&.oceanwp-linkedin a:hover { background-color: #2678a1; }
|
||||
&.oceanwp-tumblr a { background-color: #2C4762; }
|
||||
&.oceanwp-tumblr a:hover { background-color: #1d3042; }
|
||||
&.oceanwp-github a { background-color: #60b044; }
|
||||
&.oceanwp-github a:hover { background-color: #4f9237; }
|
||||
&.oceanwp-flickr a { background-color: #fa4086; }
|
||||
&.oceanwp-flickr a:hover { background-color: #c63169; }
|
||||
&.oceanwp-skype a { background-color: #00AFF0; }
|
||||
&.oceanwp-skype a:hover { background-color: #0291c6; }
|
||||
&.oceanwp-trello a { background-color: #0079bf; }
|
||||
&.oceanwp-trello a:hover { background-color: #0079bf; }
|
||||
&.oceanwp-foursquare a { background-color: #2d5be3; }
|
||||
&.oceanwp-foursquare a:hover { background-color: #2d5be3; }
|
||||
&.oceanwp-youtube a { background-color: #C4302B; }
|
||||
&.oceanwp-youtube a:hover { background-color: #982420; }
|
||||
&.oceanwp-vimeo a { background-color: #1ab7ea; }
|
||||
&.oceanwp-vimeo a:hover { background-color: #1494bd; }
|
||||
&.oceanwp-vine a { background-color: #00bf8f; }
|
||||
&.oceanwp-vine a:hover { background-color: #01906c; }
|
||||
&.oceanwp-xing a { background-color: #006464; }
|
||||
&.oceanwp-xing a:hover { background-color: #014646; }
|
||||
&.oceanwp-yelp a { background-color: #C41200; }
|
||||
&.oceanwp-yelp a:hover { background-color: #940f01; }
|
||||
&.oceanwp-tripadvisor a { background-color: #589442; }
|
||||
&.oceanwp-tripadvisor a:hover { background-color: #426f32; }
|
||||
&.oceanwp-rss a { background-color: #ff7900; }
|
||||
&.oceanwp-rss a:hover { background-color: #d46603; }
|
||||
&.oceanwp-email a { background-color: #13aff0; }
|
||||
&.oceanwp-email a:hover { background-color: #0f8dc2; }
|
||||
}
|
||||
|
||||
&.style-simple li {
|
||||
margin: 0 6px;
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
// Transition
|
||||
@mixin transition( $args ) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
// Display inline flex
|
||||
@mixin display-inline-flex() {
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
// Display flex
|
||||
@mixin display-flex() {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Flex wrap
|
||||
@mixin flex-wrap( $args ) {
|
||||
-webkit-flex-wrap: $args;
|
||||
-ms-flex-wrap: $args;
|
||||
flex-wrap: $args;
|
||||
}
|
||||
|
||||
// Align items
|
||||
@mixin align-items( $args ) {
|
||||
-webkit-align-items: $args;
|
||||
-ms-flex-align: $args;
|
||||
align-items: $args;
|
||||
}
|
||||
|
||||
// Justify content
|
||||
@mixin justify-content( $args ) {
|
||||
-webkit-justify-content: $args;
|
||||
-ms-flex-pack: $args;
|
||||
justify-content: $args;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity( $args ) {
|
||||
-moz-opacity: $args;
|
||||
-webkit-opacity: $args;
|
||||
opacity: $args;
|
||||
}
|
||||
|
||||
/**
|
||||
* Social Share Widget
|
||||
*/
|
||||
.owp-social-share {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
margin: 0 8px 8px 0;
|
||||
|
||||
a {
|
||||
@include display-inline-flex();
|
||||
@include align-items( center );
|
||||
@include justify-content( center );
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 1;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
.owpss-icon{
|
||||
fill: #fff;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@include transition( all 0.3s ease );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Minimal style
|
||||
.owp-social-share.style-minimal {
|
||||
li {
|
||||
a {
|
||||
border: 1px solid #e9e9e9;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter a:hover {
|
||||
color: #00aced;
|
||||
border-color: #00aced;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #00aced;
|
||||
}
|
||||
}
|
||||
|
||||
&.facebook a:hover {
|
||||
color: #3b5998;
|
||||
border-color: #3b5998;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #3b5998;
|
||||
}
|
||||
}
|
||||
|
||||
&.googleplus a:hover {
|
||||
color: #dd4b39;
|
||||
border-color: #dd4b39;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #dd4b39;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin a:hover {
|
||||
color: #3399CC;
|
||||
border-color: #3399CC;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #3399CC;
|
||||
}
|
||||
}
|
||||
|
||||
&.pinterest a:hover {
|
||||
color: #cb2027;
|
||||
border-color: #cb2027;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #cb2027;
|
||||
}
|
||||
}
|
||||
|
||||
&.viber a:hover {
|
||||
color: #9d62cc;
|
||||
border-color: #9d62cc;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #9d62cc;
|
||||
}
|
||||
}
|
||||
|
||||
&.vk a:hover {
|
||||
color: #3673be;
|
||||
border-color: #3673be;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #3673be;
|
||||
}
|
||||
}
|
||||
|
||||
&.reddit a:hover {
|
||||
color: #ff5c1f;
|
||||
border-color: #ff5c1f;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #ff5c1f;
|
||||
}
|
||||
}
|
||||
|
||||
&.tumblr a:hover {
|
||||
color: #35465c;
|
||||
border-color: #35465c;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #35465c;
|
||||
}
|
||||
}
|
||||
|
||||
&.viadeo a:hover {
|
||||
color: #ff7452;
|
||||
border-color: #ff7452;
|
||||
|
||||
.owpss-icon {
|
||||
fill: #ff7452;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colored style
|
||||
.owp-social-share.style-colored {
|
||||
li {
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
@include opacity( .8 );
|
||||
}
|
||||
|
||||
.owpss-icon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter a {
|
||||
background-color: #00aced;
|
||||
}
|
||||
|
||||
&.facebook a {
|
||||
background-color: #3b5998;
|
||||
}
|
||||
|
||||
&.googleplus a {
|
||||
background-color: #dd4b39;
|
||||
}
|
||||
|
||||
&.linkedin a {
|
||||
background-color: #3399CC;
|
||||
}
|
||||
|
||||
&.pinterest a {
|
||||
background-color: #cb2027;
|
||||
}
|
||||
|
||||
&.viber a {
|
||||
background-color: #9d62cc;
|
||||
}
|
||||
|
||||
&.vk a {
|
||||
background-color: #3673be;
|
||||
}
|
||||
|
||||
&.reddit a {
|
||||
background-color: #ff5c1f;
|
||||
}
|
||||
|
||||
&.tumblr a {
|
||||
background-color: #35465c;
|
||||
}
|
||||
|
||||
&.viadeo a {
|
||||
background-color: #ff7452;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark style
|
||||
.owp-social-share.style-dark {
|
||||
li {
|
||||
a {
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
@include opacity( .8 );
|
||||
}
|
||||
|
||||
.owpss-icon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.name-shown .owp-icon-wrap {
|
||||
background-color: rgba(255,255,255,.08);
|
||||
}
|
||||
}
|
||||
|
||||
// Name Show and Hidden
|
||||
.owp-social-share.name-shown{
|
||||
li{
|
||||
a{
|
||||
min-width: 144px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owp-social-share.name-shown {
|
||||
ul {
|
||||
@include display-flex();
|
||||
@include flex-wrap( wrap );
|
||||
@include justify-content( space-between );
|
||||
|
||||
li {
|
||||
margin: 6px;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
a {
|
||||
min-width: 144px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owp-icon-wrap {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@include display-inline-flex();
|
||||
@include align-items( center );
|
||||
@include justify-content( center );
|
||||
background-color: rgba(0,0,0,.08);
|
||||
padding: 0 12px;
|
||||
@include transition( all 0.3s ease );
|
||||
}
|
||||
|
||||
.owp-social-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0 10px 0 50px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.style-minimal li {
|
||||
a:hover .owpss-icon {
|
||||
fill: #fff !important;
|
||||
}
|
||||
|
||||
&.twitter a:hover .owp-icon-wrap {
|
||||
background-color: #00aced;
|
||||
}
|
||||
|
||||
&.facebook a:hover .owp-icon-wrap {
|
||||
background-color: #3b5998;
|
||||
}
|
||||
|
||||
&.googleplus a:hover .owp-icon-wrap {
|
||||
background-color: #dd4b39;
|
||||
}
|
||||
|
||||
&.linkedin a:hover .owp-icon-wrap {
|
||||
background-color: #3399CC;
|
||||
}
|
||||
|
||||
&.pinterest a:hover .owp-icon-wrap {
|
||||
background-color: #cb2027;
|
||||
}
|
||||
|
||||
&.viber a:hover .owp-icon-wrap {
|
||||
background-color: #9d62cc;
|
||||
}
|
||||
|
||||
&.vk a:hover .owp-icon-wrap {
|
||||
background-color: #3673be;
|
||||
}
|
||||
|
||||
&.reddit a:hover .owp-icon-wrap {
|
||||
background-color: #ff5c1f;
|
||||
}
|
||||
|
||||
&.tumblr a:hover .owp-icon-wrap {
|
||||
background-color: #35465c;
|
||||
}
|
||||
|
||||
&.viadeo a:hover .owp-icon-wrap {
|
||||
background-color: #ff7452;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Tags Widget
|
||||
*/
|
||||
.tagcloud a {
|
||||
display: inline-block;
|
||||
background-color: $color-8;
|
||||
color: $color-2;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 12px !important;
|
||||
line-height: 1;
|
||||
padding: 8px 12px;
|
||||
margin: 0 2px 5px 0;
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-9;
|
||||
color: $color-2;
|
||||
border-color: $color-10;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Video Widget
|
||||
*/
|
||||
#sidebar .video-widget .responsive-video-wrap iframe {
|
||||
min-height: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user