added more preview pages and more templates
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
//
|
||||
// Custom Alert
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Snackbars
|
||||
// -------------------------
|
||||
|
||||
.snackbars {
|
||||
max-width: 280px;
|
||||
padding: 9px 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: $white;
|
||||
text-align: left;
|
||||
background-color: $gray-darker;
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: $shadow-area-xs;
|
||||
|
||||
.icon-xxs {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
// padding on text
|
||||
p span:last-child {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
// snackbar icon on the left side
|
||||
&-left {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// snackbar link or button on the right side
|
||||
&-right {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
max-width: 380px;
|
||||
padding: 14px 17px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
//
|
||||
// Animation
|
||||
// --------------------------------------------------
|
||||
|
||||
// Custom FadeInUp Keyframes Animation
|
||||
// -------------------------
|
||||
|
||||
@include keyframes(fadeInUpSm){
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 50%, 0);
|
||||
transform: translate3d(0, 50%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUpSm{
|
||||
-webkit-animation-name: fadeInUpSm;
|
||||
animation-name: fadeInUpSm;
|
||||
animation-duration: .4s;
|
||||
}
|
||||
|
||||
//Custom animation
|
||||
//--------------------------------------------
|
||||
.view-animate{
|
||||
opacity: 0;
|
||||
}
|
||||
.view-animate.active {
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
|
||||
.fadeInRightSm{
|
||||
&.active {
|
||||
-webkit-animation-name: fadeInRightSm;
|
||||
animation-name: fadeInRightSm;
|
||||
}
|
||||
}
|
||||
.fadeInLeftSm{
|
||||
&.active {
|
||||
-webkit-animation-name: fadeInLeftSm;
|
||||
animation-name: fadeInLeftSm;
|
||||
}
|
||||
}
|
||||
.fadeInUpSmall{
|
||||
&.active {
|
||||
-webkit-animation-name: fadeInUpSmall;
|
||||
animation-name: fadeInUpSmall;
|
||||
}
|
||||
}
|
||||
.fadeInUpBigger{
|
||||
&.active {
|
||||
-webkit-animation-name: fadeInUpBigger;
|
||||
animation-name: fadeInUpBigger;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInSmall {
|
||||
&.active {
|
||||
-webkit-animation-name: zoomInSmall;
|
||||
animation-name: zoomInSmall;
|
||||
}
|
||||
}
|
||||
|
||||
.delay-1 {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.delay-08 {
|
||||
animation-delay: .8s;
|
||||
}
|
||||
.delay-06 {
|
||||
animation-delay: .6s;
|
||||
}
|
||||
.delay-04 {
|
||||
animation-delay: .4s;
|
||||
}
|
||||
|
||||
|
||||
// Custom FadeOutDown Keyframes Animation
|
||||
// -------------------------
|
||||
|
||||
@include keyframes(fadeOutDownSm){
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -50%, 0);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutDownSm{
|
||||
-webkit-animation-name: fadeOutDownSm;
|
||||
animation-name: fadeOutDownSm;
|
||||
animation-duration: .4s;
|
||||
}
|
||||
|
||||
|
||||
// Bg gradient animation
|
||||
// -------------------------
|
||||
|
||||
@include keyframes(fadeBoth){
|
||||
0%,
|
||||
100%{
|
||||
opacity: 0;
|
||||
}
|
||||
50%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeInLeftSm {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-150px) scale(0.8);
|
||||
}
|
||||
70%{
|
||||
transform: translateX(10px) scale(1.02);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRightSm {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(150px) scale(0.8);
|
||||
}
|
||||
70%{
|
||||
transform: translateX(-10px) scale(1.02);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUpSmall {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(50px) scale(0.8);
|
||||
}
|
||||
70%{
|
||||
transform: translateY(10px) scale(1.02);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUpBigger {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(150px);
|
||||
}
|
||||
70%{
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomInSmall {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
70%{
|
||||
transform: scale(1.02);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
//
|
||||
// Box Comment
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base styles
|
||||
// -------------------------
|
||||
|
||||
.box-comment {
|
||||
&-meta {
|
||||
margin-bottom: $box-comment-meta-offset-top;
|
||||
font-size: $box-comment-meta-size;
|
||||
|
||||
a:hover {
|
||||
color: $box-comment-meta-link-hover;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: $box-comment-meta-icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: $box-comment-title-offset-top;
|
||||
font-size: $box-comment-title-size;
|
||||
font-weight: $box-comment-title-weight;
|
||||
//text-transform: uppercase;
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
&-img {
|
||||
width: $box-comment-img-width;
|
||||
height: $box-comment-img-height;
|
||||
//border-radius: $box-comment-img-border-radius;
|
||||
}
|
||||
|
||||
&-body {
|
||||
font-size: $box-comment-body-size;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs-min) {
|
||||
&-img {
|
||||
width: $box-comment-img-xs-width;
|
||||
height: $box-comment-img-xs-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Classic Comments
|
||||
// -------------------------
|
||||
|
||||
.box-comment-classic {
|
||||
position: relative;
|
||||
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: $box-comment-classic-before-after-position-left;
|
||||
background: $box-comment-classic-before-after-background;
|
||||
width: $box-comment-classic-before-after-width;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: $box-comment-classic-before-position-top;
|
||||
bottom: $box-comment-classic-before-position-bottom;
|
||||
}
|
||||
|
||||
&:last-child:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-xs-min) {
|
||||
> .box-comment {
|
||||
.box-comment-img {
|
||||
width: $box-comment-classic-xs-width;
|
||||
height: $box-comment-classic-xs-height;
|
||||
margin-top: $box-comment-classic-xs-offset-top;
|
||||
margin-left: $box-comment-classic-xs-offset-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs-min) {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& + .box-comment-classic:after,
|
||||
.media + .box-comment-classic:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media + .box-comment-classic:after {
|
||||
bottom: auto;
|
||||
top: $box-comment-classic-xs-after-position-top;
|
||||
right: $box-comment-classic-xs-after-position-right;
|
||||
left: $box-comment-classic-xs-after-position-left;
|
||||
height: $box-comment-classic-xs-after-height;
|
||||
margin-right: $box-comment-classic-xs-after-offset-right;
|
||||
width: $box-comment-classic-xs-after-width;
|
||||
}
|
||||
|
||||
.box-comment-header {
|
||||
margin-top: $box-comment-classic-xs-header-offset-top;
|
||||
}
|
||||
|
||||
> .box-comment {
|
||||
margin-left: $box-comment-classic-xs-box-inside-offset-left;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: $box-comment-classic-xs-before-offset-top;
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
left: $box-comment-classic-xs-before-after-position-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-comment-classic + .box-comment-classic,
|
||||
.box-comment-classic > .box-comment {
|
||||
margin-top: $box-comment-classic-offset-top;
|
||||
}
|
||||
|
||||
// Boxed Comments
|
||||
// -------------------------
|
||||
|
||||
.box-comment-boxed {
|
||||
.box-comment-img{
|
||||
margin-top: $box-comment-boxed-img-offset-top;
|
||||
border: $box-comment-boxed-img-border;
|
||||
background: $box-comment-boxed-img-background;
|
||||
padding: $box-comment-boxed-img-padding;
|
||||
margin-right: $box-comment-boxed-img-offset-right;
|
||||
}
|
||||
|
||||
.box-comment-body{
|
||||
margin-top: $box-comment-boxed-body-offset-top;
|
||||
}
|
||||
|
||||
.media-body{
|
||||
padding: $box-comment-boxed-media-body-padding;
|
||||
border-radius: $box-comment-boxed-media-body-border-radius;
|
||||
border: $box-comment-boxed-media-body-border;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs-min) {
|
||||
.box-comment-img{
|
||||
margin-right: $box-comment-boxed-img-xs-offset-right;
|
||||
padding: $box-comment-boxed-img-xs-padding;
|
||||
}
|
||||
.media-body{
|
||||
padding: $box-comment-boxed-media-body-xs-padding;
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-lg-min) {
|
||||
> .box-comment-boxed{
|
||||
margin-left: $box-comment-boxed-lg-offset-left;
|
||||
}
|
||||
.box-comment-meta{
|
||||
float: right;
|
||||
}
|
||||
> .box-comment-outboxed{
|
||||
margin-left: $box-comment-outboxed-lg-offset-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-comment-boxed + .box-comment-boxed,
|
||||
.box-comment-boxed > .box-comment {
|
||||
margin-top: $box-comment-boxed-offset-top;
|
||||
}
|
||||
|
||||
// Outbox Comments
|
||||
// -------------------------
|
||||
|
||||
.box-comment-outboxed {
|
||||
.box-comment-body{
|
||||
margin-top: $box-comment-outlined-body-offset-top;
|
||||
}
|
||||
.media{
|
||||
padding: $box-comment-boxed-media-body-xs-padding;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
.box-comment-body{
|
||||
margin-top: $box-comment-outlined-body-lg-offset-top;
|
||||
}
|
||||
|
||||
.box-comment-img{
|
||||
margin-top: $box-comment-outlined-img-lg-offset-top;
|
||||
}
|
||||
|
||||
.media{
|
||||
padding: $box-comment-outlined-media-body-lg-padding;
|
||||
border: $box-comment-outlined-media-body-lg-border;
|
||||
}
|
||||
|
||||
|
||||
> .box-comment-outboxed{
|
||||
margin-left: $box-comment-outlined-body-lg-offset-left;
|
||||
}
|
||||
}
|
||||
.icon-xs {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-comment-outboxed + .box-comment-outboxed,
|
||||
.box-comment-outboxed > .box-comment {
|
||||
margin-top: 35px;
|
||||
@media (min-width: $screen-lg-min) {
|
||||
margin-top: $box-comment-outlined-offset-top;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
/* Breadcrumb*/
|
||||
|
||||
.breadcrumb {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
font-weight: 300;
|
||||
|
||||
> li {
|
||||
color: $white;
|
||||
font-size: 24px;
|
||||
a{
|
||||
color: $white;
|
||||
font-size: 24px;
|
||||
&:hover{
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: '/';
|
||||
padding-left: 5px;
|
||||
padding-right: 3px;
|
||||
color: $white;
|
||||
font-family: $fa;
|
||||
font-size: 24px;
|
||||
}
|
||||
&:last-of-type{
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& + li {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
.btn-group-variant{
|
||||
@include transform(translateY(-30px));
|
||||
margin-bottom: -30px;
|
||||
margin-left: -30px;
|
||||
|
||||
.btn {
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
.btn-group-variant-1{
|
||||
@include transform(translateY(-10px));
|
||||
margin-bottom: -10px;
|
||||
margin-left: -10px;
|
||||
|
||||
.btn {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.btn-group-variant-2{
|
||||
@include transform(translateY(-16px));
|
||||
margin-bottom: -16px;
|
||||
margin-left: -16px;
|
||||
|
||||
.btn {
|
||||
margin-top: 16px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-isotope{
|
||||
@include transform(translateY(-15px));
|
||||
margin-bottom: -15px;
|
||||
margin-left: -45px;
|
||||
|
||||
.btn {
|
||||
margin-top: 15px;
|
||||
margin-left: 45px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
//
|
||||
// Custom Buttons Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn {
|
||||
transition: .3s ease-out;
|
||||
//text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
border-width: 1px;
|
||||
border-radius: 25px;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus,
|
||||
&.focus {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Alternate buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-default {
|
||||
border-width: 1px;
|
||||
@include button-variant-custom($gray-darker, transparent, $gray-base, $white, $gray-darker, $gray-darker);
|
||||
}
|
||||
.btn-dark {
|
||||
border-width: 1px;
|
||||
@include button-variant-custom($white, $gray-dark, $gray-dark, $white, $brand-primary, $brand-primary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include button-variant-custom($white, $brand-primary, $brand-primary, $white, darken($brand-primary, 15%), darken($brand-primary, 15%));
|
||||
}
|
||||
|
||||
.btn-white-variant-1 {
|
||||
@include button-variant-custom($white, transparent, $white, $brand-primary, $white, $white);
|
||||
}
|
||||
|
||||
.btn-white-variant-2 {
|
||||
@include button-variant-custom($brand-primary, $white, $white, $white, $brand-primary, $brand-primary);
|
||||
}
|
||||
|
||||
.btn-primary-variant-1 {
|
||||
@include button-variant-custom($brand-primary, transparent, $brand-primary, $white, $brand-primary, $brand-primary);
|
||||
|
||||
&.btn.text-white {
|
||||
&:focus {
|
||||
color: $white;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
@include button-variant-custom($white, #2f6890, #2f6890, $white, darken(#2f6890, 15%), darken(#2f6890, 15%));
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
@include button-variant-custom($white, #14a5eb, #14a5eb, $white, darken(#14a5eb, 15%), darken(#14a5eb, 15%));
|
||||
}
|
||||
|
||||
.btn-google-plus {
|
||||
@include button-variant-custom($white, #e75854, #e75854, $white, darken(#e75854, 15%), darken(#e75854, 15%));
|
||||
}
|
||||
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
|
||||
}
|
||||
|
||||
// Info appears as blue-green
|
||||
.btn-info {
|
||||
|
||||
}
|
||||
|
||||
// Warning appears as orange
|
||||
.btn-warning {
|
||||
|
||||
}
|
||||
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
|
||||
}
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-xs {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 3px 17px 3px;
|
||||
border-radius: $border-radius-large;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 7px 37px;
|
||||
}
|
||||
|
||||
.btn-md {
|
||||
font-size: 14px;
|
||||
padding: 13px 40px 13px;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-size: 18px;
|
||||
padding: 13px 36px;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
|
||||
.font-size-36 {
|
||||
font-size: 18px;
|
||||
}
|
||||
border-radius: 45px;
|
||||
@media (min-width: $screen-xs-min) {
|
||||
.font-size-36 {
|
||||
font-size: 36px;
|
||||
}
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.btn-tags {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 7px 18px 7px;
|
||||
border-radius: $border-radius-small;
|
||||
}
|
||||
|
||||
.btn-min-width {
|
||||
min-width: 154px;
|
||||
}
|
||||
|
||||
.btn-min-width-xs {
|
||||
min-width: 154px;
|
||||
}
|
||||
|
||||
.btn-min-width-sm {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.btn-min-width-contact {
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
.btn-min-width-md {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.btn-min-width-lg {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.btn-min-width-icon {
|
||||
min-width: 167px;
|
||||
}
|
||||
|
||||
.btn-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Button Shapes
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-rect {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-shape-default {
|
||||
border-radius: $border-radius-large;
|
||||
}
|
||||
|
||||
.btn-shape-round {
|
||||
border-radius: $border-radius-xl;
|
||||
}
|
||||
|
||||
.btn-shape-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-shape-circle {
|
||||
border-radius: 50%;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
line-height: 62px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-shadow {
|
||||
box-shadow: $shadow-area-ambient;
|
||||
}
|
||||
|
||||
// Button Icon styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn {
|
||||
|
||||
&.btn-icon {
|
||||
padding-left: 21px;
|
||||
padding-right: 21px;
|
||||
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
line-height: 17px;
|
||||
transition: 0s;
|
||||
}
|
||||
.icon-md {
|
||||
line-height: 22px;
|
||||
}
|
||||
.icon-xs {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&-left {
|
||||
.icon {
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
.icon {
|
||||
float: right;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
&.btn-md {
|
||||
padding-top: 14px;
|
||||
}
|
||||
&.btn-facebook,
|
||||
&.btn-twitter,
|
||||
&.btn-google-plus {
|
||||
padding-left: 35px;
|
||||
padding-right: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// button link
|
||||
//--------------------------------------------------------
|
||||
.btn-link {
|
||||
text-transform: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
transition: 250ms;
|
||||
}
|
||||
|
||||
.btn-link-primary {
|
||||
color: $brand-primary;
|
||||
&:hover {
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
.btn-link-white {
|
||||
color: $white;
|
||||
&:focus, &:hover {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
.btn-link {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
//
|
||||
// Dividers
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Hr
|
||||
// --------------------------------------------------
|
||||
|
||||
.hr {
|
||||
height: $hr-height;
|
||||
padding: $hr-padding;
|
||||
margin-top: $hr-offset-top;
|
||||
//margin-bottom: $hr-offset-bottom;
|
||||
background: $gray-lightest;
|
||||
border: none;
|
||||
width: 100%;
|
||||
&.bg-gray-light{
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.hr-dashed{
|
||||
height: $hr-dashed-height;
|
||||
border-bottom: $hr-dashed-border-bottom;
|
||||
background-color: $hr-dashed-background;
|
||||
}
|
||||
|
||||
//.hr-gradient{
|
||||
// @include divider-gradient($white, $gray);
|
||||
//}
|
||||
.hr-gray-light{
|
||||
border-top-color: $gray-light;
|
||||
}
|
||||
|
||||
|
||||
// Text Subline
|
||||
// --------------------------------------------------
|
||||
|
||||
.text-subline {
|
||||
position: relative;
|
||||
height: $text-subline-height;
|
||||
padding: $text-subline-padding;
|
||||
background: $text-subline-background;
|
||||
border: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: $text-subline-before-position-top;
|
||||
left: $text-subline-before-position-left;
|
||||
height: $text-subline-before-height;
|
||||
width: $text-subline-before-width;
|
||||
background: $text-subline-before-background;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Divider
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base Styles
|
||||
|
||||
.divider{
|
||||
width: $divider-width;
|
||||
height: $divider-height;
|
||||
padding: $divider-padding;
|
||||
margin: $divider-offsets;
|
||||
background: $divider-background;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
width: $divider-vertical-width;
|
||||
height: $divider-vertical-height;
|
||||
background: $divider-vertical-background;
|
||||
}
|
||||
|
||||
// Sizing
|
||||
|
||||
.divider-xs {
|
||||
width: $divider-xs-width;
|
||||
}
|
||||
|
||||
.divider-sm {
|
||||
width: $divider-sm-width;
|
||||
}
|
||||
.divider-md {
|
||||
width: $divider-md-width;
|
||||
}
|
||||
|
||||
.divider-lg {
|
||||
width: $divider-lg-width;
|
||||
height: $divider-lg-height;
|
||||
}
|
||||
|
||||
.divider-footer {
|
||||
width: 100px;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
// Styles
|
||||
|
||||
@include indent-responsive(hr, null, (margin-left, margin-right), (0: null, $screen-xs-min : xs, $screen-sm-min : sm, $screen-md-min : md, $screen-lg-min : lg, $screen-xl-min : xl), auto);
|
||||
@include indent-responsive(hr, left, margin-left, (0: null, $screen-xs-min : xs, $screen-sm-min : sm, $screen-md-min : md, $screen-lg-min : lg, $screen-xl-min : xl), 0);
|
||||
@include indent-responsive(hr, right, margin-right, (0: null, $screen-xs-min : xs, $screen-sm-min : sm, $screen-md-min : md, $screen-lg-min : lg, $screen-xl-min : xl), 0);
|
||||
@@ -0,0 +1,25 @@
|
||||
// Element groups
|
||||
// --------------------------------------------------
|
||||
|
||||
html .element-groups-5 {
|
||||
@include element-groups(5px, 5px);
|
||||
}
|
||||
|
||||
html .element-groups-10 {
|
||||
@include element-groups(10px, 10px);
|
||||
}
|
||||
|
||||
html .element-groups-15{
|
||||
@include element-groups(15px, 15px);
|
||||
}
|
||||
|
||||
html .element-groups-20 {
|
||||
@include element-groups(20px, 20px);
|
||||
}
|
||||
|
||||
html .element-groups-30 {
|
||||
@include element-groups(30px, 30px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,369 @@
|
||||
/**
|
||||
* Title: Great icon set Flaticon Pack
|
||||
* Author: Taras Shypka
|
||||
* Source: http://www.flaticon.com/packs/great-icon-set
|
||||
* License: CC BY 3.0 (http://creativecommons.org/licenses/by/3.0/)
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "fl-great-icon-set";
|
||||
src: url("../fonts/fl-great-icon-set.eot");
|
||||
src: url("../fonts/fl-great-icon-set.eot#iefix") format("embedded-opentype"),
|
||||
url("../fonts/fl-great-icon-set.woff") format("woff"),
|
||||
url("../fonts/fl-great-icon-set.ttf") format("truetype"),
|
||||
url("../fonts/fl-great-icon-set.svg") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.fl-great-icon-set-ico,
|
||||
[class^="fl-great-icon-set-"]:before, [class*=" fl-great-icon-set-"]:before,
|
||||
[class^="fl-great-icon-set-"]:after, [class*=" fl-great-icon-set-"]:after {
|
||||
font-family: 'fl-great-icon-set';
|
||||
font-size: inherit;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.fl-great-icon-set-actualization:before {
|
||||
content: "\e000";
|
||||
}
|
||||
.fl-great-icon-set-add177:before {
|
||||
content: "\e001";
|
||||
}
|
||||
.fl-great-icon-set-alarm49:before {
|
||||
content: "\e002";
|
||||
}
|
||||
.fl-great-icon-set-arrow626:before {
|
||||
content: "\e003";
|
||||
}
|
||||
.fl-great-icon-set-arrow627:before {
|
||||
content: "\e004";
|
||||
}
|
||||
.fl-great-icon-set-ball38:before {
|
||||
content: "\e005";
|
||||
}
|
||||
.fl-great-icon-set-band14:before {
|
||||
content: "\e006";
|
||||
}
|
||||
.fl-great-icon-set-battery149:before {
|
||||
content: "\e007";
|
||||
}
|
||||
.fl-great-icon-set-bell44:before {
|
||||
content: "\e008";
|
||||
}
|
||||
.fl-great-icon-set-bluetooth20:before {
|
||||
content: "\e009";
|
||||
}
|
||||
.fl-great-icon-set-book207:before {
|
||||
content: "\e00a";
|
||||
}
|
||||
.fl-great-icon-set-bottle38:before {
|
||||
content: "\e00b";
|
||||
}
|
||||
.fl-great-icon-set-button10:before {
|
||||
content: "\e00c";
|
||||
}
|
||||
.fl-great-icon-set-button9:before {
|
||||
content: "\e00d";
|
||||
}
|
||||
.fl-great-icon-set-cassette17:before {
|
||||
content: "\e00e";
|
||||
}
|
||||
.fl-great-icon-set-chat73:before {
|
||||
content: "\e00f";
|
||||
}
|
||||
.fl-great-icon-set-checkmark22:before {
|
||||
content: "\e010";
|
||||
}
|
||||
.fl-great-icon-set-chronometer24:before {
|
||||
content: "\e011";
|
||||
}
|
||||
.fl-great-icon-set-circular264:before {
|
||||
content: "\e012";
|
||||
}
|
||||
.fl-great-icon-set-cloud301:before {
|
||||
content: "\e013";
|
||||
}
|
||||
.fl-great-icon-set-code42:before {
|
||||
content: "\e014";
|
||||
}
|
||||
.fl-great-icon-set-coffee66:before {
|
||||
content: "\e015";
|
||||
}
|
||||
.fl-great-icon-set-compass105:before {
|
||||
content: "\e016";
|
||||
}
|
||||
.fl-great-icon-set-configuration20:before {
|
||||
content: "\e017";
|
||||
}
|
||||
.fl-great-icon-set-credit95:before {
|
||||
content: "\e018";
|
||||
}
|
||||
.fl-great-icon-set-crescent32:before {
|
||||
content: "\e019";
|
||||
}
|
||||
.fl-great-icon-set-cross100:before {
|
||||
content: "\e01a";
|
||||
}
|
||||
.fl-great-icon-set-crosshair15:before {
|
||||
content: "\e01b";
|
||||
}
|
||||
.fl-great-icon-set-design31:before {
|
||||
content: "\e01c";
|
||||
}
|
||||
.fl-great-icon-set-diamond37:before {
|
||||
content: "\e01d";
|
||||
}
|
||||
.fl-great-icon-set-digital22:before {
|
||||
content: "\e01e";
|
||||
}
|
||||
.fl-great-icon-set-disc29:before {
|
||||
content: "\e01f";
|
||||
}
|
||||
.fl-great-icon-set-dislike15:before {
|
||||
content: "\e020";
|
||||
}
|
||||
.fl-great-icon-set-down102:before {
|
||||
content: "\e021";
|
||||
}
|
||||
.fl-great-icon-set-download161:before {
|
||||
content: "\e022";
|
||||
}
|
||||
.fl-great-icon-set-electrical27:before {
|
||||
content: "\e023";
|
||||
}
|
||||
.fl-great-icon-set-electrical28:before {
|
||||
content: "\e024";
|
||||
}
|
||||
.fl-great-icon-set-equalizer32:before {
|
||||
content: "\e025";
|
||||
}
|
||||
.fl-great-icon-set-fast41:before {
|
||||
content: "\e026";
|
||||
}
|
||||
.fl-great-icon-set-favorites5:before {
|
||||
content: "\e027";
|
||||
}
|
||||
.fl-great-icon-set-file93:before {
|
||||
content: "\e028";
|
||||
}
|
||||
.fl-great-icon-set-flash24:before {
|
||||
content: "\e029";
|
||||
}
|
||||
.fl-great-icon-set-folder213:before {
|
||||
content: "\e02a";
|
||||
}
|
||||
.fl-great-icon-set-games37:before {
|
||||
content: "\e02b";
|
||||
}
|
||||
.fl-great-icon-set-ghost7:before {
|
||||
content: "\e02c";
|
||||
}
|
||||
.fl-great-icon-set-glass49:before {
|
||||
content: "\e02d";
|
||||
}
|
||||
.fl-great-icon-set-global39:before {
|
||||
content: "\e02e";
|
||||
}
|
||||
.fl-great-icon-set-house139:before {
|
||||
content: "\e02f";
|
||||
}
|
||||
.fl-great-icon-set-ice78:before {
|
||||
content: "\e030";
|
||||
}
|
||||
.fl-great-icon-set-image84:before {
|
||||
content: "\e031";
|
||||
}
|
||||
.fl-great-icon-set-ink16:before {
|
||||
content: "\e032";
|
||||
}
|
||||
.fl-great-icon-set-key170:before {
|
||||
content: "\e033";
|
||||
}
|
||||
.fl-great-icon-set-keyword5:before {
|
||||
content: "\e034";
|
||||
}
|
||||
.fl-great-icon-set-lantern19:before {
|
||||
content: "\e035";
|
||||
}
|
||||
.fl-great-icon-set-left204:before {
|
||||
content: "\e036";
|
||||
}
|
||||
.fl-great-icon-set-lifesaver8:before {
|
||||
content: "\e037";
|
||||
}
|
||||
.fl-great-icon-set-light87:before {
|
||||
content: "\e038";
|
||||
}
|
||||
.fl-great-icon-set-lightbulb52:before {
|
||||
content: "\e039";
|
||||
}
|
||||
.fl-great-icon-set-like76:before {
|
||||
content: "\e03a";
|
||||
}
|
||||
.fl-great-icon-set-like77:before {
|
||||
content: "\e03b";
|
||||
}
|
||||
.fl-great-icon-set-link59:before {
|
||||
content: "\e03c";
|
||||
}
|
||||
.fl-great-icon-set-liquid13:before {
|
||||
content: "\e03d";
|
||||
}
|
||||
.fl-great-icon-set-list87:before {
|
||||
content: "\e03e";
|
||||
}
|
||||
.fl-great-icon-set-locked55:before {
|
||||
content: "\e03f";
|
||||
}
|
||||
.fl-great-icon-set-menu54:before {
|
||||
content: "\e040";
|
||||
}
|
||||
.fl-great-icon-set-microphone83:before {
|
||||
content: "\e041";
|
||||
}
|
||||
.fl-great-icon-set-mobile226:before {
|
||||
content: "\e042";
|
||||
}
|
||||
.fl-great-icon-set-monitor85:before {
|
||||
content: "\e043";
|
||||
}
|
||||
.fl-great-icon-set-monthly5:before {
|
||||
content: "\e044";
|
||||
}
|
||||
.fl-great-icon-set-more19:before {
|
||||
content: "\e045";
|
||||
}
|
||||
.fl-great-icon-set-more20:before {
|
||||
content: "\e046";
|
||||
}
|
||||
.fl-great-icon-set-mouse48:before {
|
||||
content: "\e047";
|
||||
}
|
||||
.fl-great-icon-set-musical115:before {
|
||||
content: "\e048";
|
||||
}
|
||||
.fl-great-icon-set-network38:before {
|
||||
content: "\e049";
|
||||
}
|
||||
.fl-great-icon-set-new99:before {
|
||||
content: "\e04a";
|
||||
}
|
||||
.fl-great-icon-set-nine19:before {
|
||||
content: "\e04b";
|
||||
}
|
||||
.fl-great-icon-set-notebook69:before {
|
||||
content: "\e04c";
|
||||
}
|
||||
.fl-great-icon-set-pause43:before {
|
||||
content: "\e04d";
|
||||
}
|
||||
.fl-great-icon-set-pencil107:before {
|
||||
content: "\e04e";
|
||||
}
|
||||
.fl-great-icon-set-pendrive8:before {
|
||||
content: "\e04f";
|
||||
}
|
||||
.fl-great-icon-set-photo208:before {
|
||||
content: "\e050";
|
||||
}
|
||||
.fl-great-icon-set-placeholder34:before {
|
||||
content: "\e051";
|
||||
}
|
||||
.fl-great-icon-set-portfolio36:before {
|
||||
content: "\e052";
|
||||
}
|
||||
.fl-great-icon-set-print40:before {
|
||||
content: "\e053";
|
||||
}
|
||||
.fl-great-icon-set-rectangle19:before {
|
||||
content: "\e054";
|
||||
}
|
||||
.fl-great-icon-set-recycle74:before {
|
||||
content: "\e055";
|
||||
}
|
||||
.fl-great-icon-set-rewind43:before {
|
||||
content: "\e056";
|
||||
}
|
||||
.fl-great-icon-set-right204:before {
|
||||
content: "\e057";
|
||||
}
|
||||
.fl-great-icon-set-save19:before {
|
||||
content: "\e058";
|
||||
}
|
||||
.fl-great-icon-set-searching40:before {
|
||||
content: "\e059";
|
||||
}
|
||||
.fl-great-icon-set-share37:before {
|
||||
content: "\e05a";
|
||||
}
|
||||
.fl-great-icon-set-shield91:before {
|
||||
content: "\e05b";
|
||||
}
|
||||
.fl-great-icon-set-shuffle21:before {
|
||||
content: "\e05c";
|
||||
}
|
||||
.fl-great-icon-set-speaker110:before {
|
||||
content: "\e05d";
|
||||
}
|
||||
.fl-great-icon-set-sportive64:before {
|
||||
content: "\e05e";
|
||||
}
|
||||
.fl-great-icon-set-sun90:before {
|
||||
content: "\e05f";
|
||||
}
|
||||
.fl-great-icon-set-tag70:before {
|
||||
content: "\e060";
|
||||
}
|
||||
.fl-great-icon-set-text149:before {
|
||||
content: "\e061";
|
||||
}
|
||||
.fl-great-icon-set-thermometer53:before {
|
||||
content: "\e062";
|
||||
}
|
||||
.fl-great-icon-set-traffic20:before {
|
||||
content: "\e063";
|
||||
}
|
||||
.fl-great-icon-set-tree108:before {
|
||||
content: "\e064";
|
||||
}
|
||||
.fl-great-icon-set-trophy70:before {
|
||||
content: "\e065";
|
||||
}
|
||||
.fl-great-icon-set-two373:before {
|
||||
content: "\e066";
|
||||
}
|
||||
.fl-great-icon-set-two374:before {
|
||||
content: "\e067";
|
||||
}
|
||||
.fl-great-icon-set-up154:before {
|
||||
content: "\e068";
|
||||
}
|
||||
.fl-great-icon-set-upload117:before {
|
||||
content: "\e069";
|
||||
}
|
||||
.fl-great-icon-set-upper12:before {
|
||||
content: "\e06a";
|
||||
}
|
||||
.fl-great-icon-set-user156:before {
|
||||
content: "\e06b";
|
||||
}
|
||||
.fl-great-icon-set-video172:before {
|
||||
content: "\e06c";
|
||||
}
|
||||
.fl-great-icon-set-visible11:before {
|
||||
content: "\e06d";
|
||||
}
|
||||
.fl-great-icon-set-volume45:before {
|
||||
content: "\e06e";
|
||||
}
|
||||
.fl-great-icon-set-wallet32:before {
|
||||
content: "\e06f";
|
||||
}
|
||||
.fl-great-icon-set-washing14:before {
|
||||
content: "\e070";
|
||||
}
|
||||
.fl-great-icon-set-wifi80:before {
|
||||
content: "\e071";
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
//
|
||||
// Flex Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base Grid Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.shell,
|
||||
.shell-wide,
|
||||
.shell-fluid{
|
||||
@include make-shell($cell-spacing);
|
||||
}
|
||||
|
||||
.shell,
|
||||
.shell-wide{
|
||||
min-width: $shell-width;
|
||||
max-width: $shell-xs-width;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
max-width: $shell-sm-width;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
max-width: $shell-md-width;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
max-width: $shell-lg-width;
|
||||
}
|
||||
}
|
||||
|
||||
.shell-wide {
|
||||
@media (min-width: $screen-xl-min) {
|
||||
max-width: $shell-xl-width;
|
||||
}
|
||||
}
|
||||
|
||||
.range {
|
||||
@include make-range($cell-spacing);
|
||||
|
||||
> .range{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.range-spacer{
|
||||
@include flex-basis(100%);
|
||||
}
|
||||
|
||||
[class*="cell-"] {
|
||||
@include make-cell-spacing($cell-spacing);
|
||||
}
|
||||
|
||||
// Create IE 9 and below degradation styles
|
||||
html.lt-ie-10 * + .range,
|
||||
* + .range {
|
||||
margin-top: $range-ws;
|
||||
}
|
||||
|
||||
html.lt-ie-10 * + [class*='cell-'],
|
||||
* + [class*='cell-'],
|
||||
html.lt-ie-10 * + .range-sm,
|
||||
* + .range-sm {
|
||||
margin-top: $range-ws-sm;
|
||||
}
|
||||
|
||||
html.lt-ie-10 * + .range-lg,
|
||||
* + .range-lg {
|
||||
margin-top: $range-ws-lg;
|
||||
}
|
||||
|
||||
html.lt-ie-10 .range-condensed,
|
||||
.range-condensed {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
> [class*='cell'] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> * + [class*='cell'] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html.lt-ie-10 .range-narrow,
|
||||
.range-narrow {
|
||||
@include make-range($cell-spacing-narrow);
|
||||
|
||||
> [class*='cell'] {
|
||||
@include make-cell-spacing($cell-spacing-narrow);
|
||||
}
|
||||
|
||||
> * + [class*='cell'] {
|
||||
@include make-cell-spacing($cell-spacing-narrow);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flex Grid Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (min-width: $screen-xs-min) {
|
||||
.range {
|
||||
@include display-flex();
|
||||
@include flex(0 1 auto);
|
||||
@include flex-direction(row);
|
||||
@include flex-wrap(wrap);
|
||||
|
||||
> .range{
|
||||
@include flex-basis(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.range-vertical{
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
.range > [class*='cell'] {
|
||||
@include flex(0 0 auto);
|
||||
@include flex-basis(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@each $resolution, $alias in ($screen-xs-min : xs, $screen-sm-min : sm, $screen-md-min : md, $screen-lg-min : lg, $screen-xl-min : xl) {
|
||||
@media (min-width: $resolution) {
|
||||
* + [class*='cell-#{$alias}-'] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include make-grid-system($alias, $cell-count);
|
||||
}
|
||||
}
|
||||
|
||||
html.lt-ie-10 {
|
||||
.range > {
|
||||
@include make-fallback($cell-count);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.flickr {
|
||||
margin-left: -4px;
|
||||
margin-bottom: -4px;
|
||||
@include transform(translateY(-4px));
|
||||
|
||||
.flickr-item {
|
||||
display: inline-block;
|
||||
width: 84px;
|
||||
height: 83px;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,647 @@
|
||||
//
|
||||
// Custom form styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.rd-mailform {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Normalize non-controls
|
||||
// --------------------------------------------------
|
||||
|
||||
label {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Common form controls
|
||||
// --------------------------------------------------
|
||||
|
||||
.input-sm,
|
||||
.input-lg,
|
||||
.form-control {
|
||||
font-size: $input-font-size;
|
||||
|
||||
&, &:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
height: $textarea-default-height;
|
||||
min-height: $textarea-default-min-height;
|
||||
max-height: $textarea-default-max-height;
|
||||
resize: vertical;
|
||||
line-height: 1.5;
|
||||
padding-top: 13px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
-webkit-appearance: none;
|
||||
line-height: $input-height-base - ($padding-base-vertical + 1px)*2;
|
||||
font-weight: 700;
|
||||
border-radius: 25px;
|
||||
padding: 11px 25px;
|
||||
@include placeholder($gray-base);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
.form-control[readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Form groups
|
||||
// -------------------------
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
// Form labels
|
||||
// -------------------------
|
||||
|
||||
.form-label {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 0;
|
||||
font-size: $input-font-size;
|
||||
//color: $input-color-placeholder;
|
||||
pointer-events: none;
|
||||
z-index: 9;
|
||||
transition: .3s;
|
||||
@include transform(translateY(-50%));
|
||||
|
||||
&.focus {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.auto-fill {
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label-outside {
|
||||
//@media (min-width: $screen-sm-min) {
|
||||
position: static;
|
||||
&, &.focus, &.auto-fill {
|
||||
@include transform(none);
|
||||
color: $input-color-placeholder;
|
||||
opacity: 1;
|
||||
font-size: 18px;
|
||||
}
|
||||
//}
|
||||
}
|
||||
|
||||
// Form validation
|
||||
// -------------------------
|
||||
.form-validation {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 35px;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
color: $brand-danger;
|
||||
margin-top: 2px;
|
||||
transition: .3s;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
// Error Styling
|
||||
//
|
||||
.has-error {
|
||||
@include form-control-validation-custom($state-danger-text, $state-danger-bg, $state-danger-bg);
|
||||
.input-group-addon{
|
||||
background: transparent;
|
||||
border-color: $state-danger-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Success Styling
|
||||
//
|
||||
.has-success {
|
||||
@include form-control-validation-custom($state-success-text, $state-success-bg, $state-success-bg);
|
||||
.input-group-addon{
|
||||
background: transparent;
|
||||
border-color: $state-success-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Warning Styling
|
||||
//
|
||||
.has-warning {
|
||||
@include form-control-validation-custom($state-warning-text, $state-warning-bg, $state-warning-bg);
|
||||
.input-group-addon{
|
||||
background: transparent;
|
||||
border-color: $state-warning-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Info Styling
|
||||
//
|
||||
.has-info {
|
||||
@include form-control-validation-custom($state-info-text, $state-info-bg, $state-info-bg);
|
||||
.input-group-addon{
|
||||
background: transparent;
|
||||
border-color: $state-info-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form output
|
||||
// -------------------------
|
||||
|
||||
#form-output-global {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 15px;
|
||||
visibility: hidden;
|
||||
@include transform(translateX(-500px));
|
||||
transition: .3s all ease;
|
||||
z-index: 9999999;
|
||||
|
||||
&.active {
|
||||
@include transform(translateX(0));
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-output {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 15px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
margin-top: 2px;
|
||||
transition: .3s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
&.error {
|
||||
color: $brand-danger;
|
||||
}
|
||||
&.success {
|
||||
color: $brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
// Radio and Checkbox Custom
|
||||
// -------------------------
|
||||
|
||||
// Base Styles
|
||||
//
|
||||
.radio .radio-custom,
|
||||
.radio-inline .radio-custom,
|
||||
.checkbox .checkbox-custom,
|
||||
.checkbox-inline .checkbox-custom {
|
||||
opacity: 0;
|
||||
|
||||
&, &-dummy {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: -20px;
|
||||
margin-top: 5px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-dummy {
|
||||
pointer-events: none;
|
||||
background: $gray-lighter;
|
||||
box-shadow: inset $shadow-area-xxs;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
label.checkbox{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio-custom:checked + .radio-custom-dummy:after,
|
||||
.checkbox-custom:checked + .checkbox-custom-dummy:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Custom Radio Styles
|
||||
//
|
||||
.radio,
|
||||
.radio-inline {
|
||||
.radio-custom-dummy {
|
||||
border-radius: 50%;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
left: 3px;
|
||||
background: $gray-darker;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Checkbox Styles
|
||||
//
|
||||
.checkbox,
|
||||
.checkbox-inline {
|
||||
padding-left: 30px;
|
||||
.checkbox-custom-dummy {
|
||||
pointer-events: none;
|
||||
border-radius: $border-radius-small;
|
||||
margin-left: 0;
|
||||
left: 0;
|
||||
|
||||
&:after {
|
||||
content: '\e5ca';
|
||||
font-family: 'Material Icons';
|
||||
font-size: 20px;
|
||||
line-height: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: $gray-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group{
|
||||
.input-group-icon{
|
||||
font-size: 18px;
|
||||
color: $gray-dark;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// input group addon
|
||||
|
||||
.input-group{
|
||||
width: 100%;
|
||||
.form-control{
|
||||
padding-left: 33px;
|
||||
}
|
||||
|
||||
&.has-error{
|
||||
.input-group-addon{
|
||||
background: transparent;
|
||||
border-color: $state-danger-bg;
|
||||
}
|
||||
}
|
||||
&:focus{
|
||||
.input-group-addon{
|
||||
background: transparent;
|
||||
border-color: $state-info-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon.input-sm,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .input-group-addon.btn {
|
||||
padding: 11.8px 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid $input-border;
|
||||
border-radius: $border-radius-base;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
//subscribe
|
||||
//-------------------------------
|
||||
|
||||
.form-subscribe {
|
||||
max-width: 480px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.form-control {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
@media (min-width: $screen-lg-min) {
|
||||
input {
|
||||
}
|
||||
}
|
||||
.form-validation {
|
||||
top: 2px;
|
||||
}
|
||||
.btn-md {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-subscribe-footer-2 {
|
||||
position: relative;
|
||||
.btn{
|
||||
position: absolute;
|
||||
top: calc(50% - 23px);
|
||||
right: 18px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
min-width: auto;
|
||||
}
|
||||
.btn-primary {
|
||||
@include button-variant-custom($white, transparent, transparent, $brand-primary, transparent, transparent);
|
||||
}
|
||||
.form-control{
|
||||
padding-right: 100px;
|
||||
}
|
||||
.form-validation {
|
||||
top: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
//search
|
||||
//----------------------------------
|
||||
|
||||
.form-search.rd-search{
|
||||
position: relative;
|
||||
.form-control{
|
||||
border: 1px solid $input-border;
|
||||
padding-left: 15px;
|
||||
padding-right: 50px;
|
||||
color: $gray-dark;
|
||||
}
|
||||
.form-label{
|
||||
left: 15px;
|
||||
top: 23px;
|
||||
}
|
||||
}
|
||||
.form-search-submit {
|
||||
position: absolute;
|
||||
font-size: $form-search-btn-size;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $form-search-btn-color;
|
||||
transition: .3s all ease;
|
||||
&:hover, &:focus {
|
||||
color: $form-search-btn-focus-color;
|
||||
outline: none;
|
||||
}
|
||||
&.text-primary:hover {
|
||||
color: $form-search-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
// comment form
|
||||
//----------------------------------
|
||||
|
||||
.form-comment{
|
||||
.form-label{
|
||||
&.focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.form-control{
|
||||
border: 1px solid $input-border;
|
||||
padding-left: 15px;
|
||||
padding-right: 50px;
|
||||
border-radius: $border-radius-small;
|
||||
color: $gray-dark;
|
||||
|
||||
@include placeholder($gray-dark);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
border-radius: 15px;
|
||||
}
|
||||
.form-validation{
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// form inline
|
||||
//--------------------------------------
|
||||
@media (min-width: $screen-xs-min) {
|
||||
.form-inline-flex-xs {
|
||||
@include display-flex;
|
||||
@include flex-direction(row);
|
||||
@include justify-content(space-between);
|
||||
@include align-content(stretch);
|
||||
@include align-items(center);
|
||||
@include flex-wrap(nowrap);
|
||||
|
||||
.form-group {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
& + .form-group {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-top: 0;
|
||||
margin-left: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-xs-min) {
|
||||
.form-inline {
|
||||
@include display-flex;
|
||||
@include justify-content(space-between);
|
||||
margin-left: -12px;
|
||||
margin-bottom: -15px;
|
||||
@include transform(translateY(-15px));
|
||||
text-align: left;
|
||||
.form-group{
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.form-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-xs-min) {
|
||||
.page{
|
||||
.form-inline-login {
|
||||
@include display-flex;
|
||||
@include justify-content(space-between);
|
||||
@include align-items(flex-end);
|
||||
margin-left: -5px;
|
||||
margin-bottom: -5px;
|
||||
@include transform(translateY(-5px));
|
||||
text-align: left;
|
||||
> * {
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> .form-group {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page{
|
||||
.form-inline-login-md{
|
||||
margin-left: -30px;
|
||||
margin-bottom: -30px;
|
||||
@include transform(translateY(-30px));
|
||||
> * {
|
||||
margin-left: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.form-inline-sm {
|
||||
@include display-flex;
|
||||
@include justify-content(space-between);
|
||||
@include align-items(flex-end);
|
||||
margin-left: -15px;
|
||||
margin-bottom: -15px;
|
||||
@include transform(translateY(-15px));
|
||||
text-align: left;
|
||||
.form-group{
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
> * {
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form control border
|
||||
//------------------------------------
|
||||
|
||||
.form-control-border {
|
||||
border: 1px solid $input-border;
|
||||
border-radius: $border-radius-large;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// form booking
|
||||
//-----------------------------------
|
||||
|
||||
.form-booking {
|
||||
.form-inline-sm {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.form-group:first-of-type{
|
||||
max-width: 175px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.font-size-30 {
|
||||
font-size: 30px;
|
||||
line-height: 0;
|
||||
}
|
||||
.ie-11 &,
|
||||
.ie-edge & {
|
||||
.form-inline-sm {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.form-group:first-of-type{
|
||||
min-width: 175px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-booking-variant-1 {
|
||||
max-width: 470px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: $border-radius-large;
|
||||
padding: 45px 15px;
|
||||
background-color: $brand-primary;
|
||||
|
||||
h3{
|
||||
font-size: 30px;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding-left: 38px;
|
||||
font-weight: 400;
|
||||
border-color: rgba($white,.2);
|
||||
background-color: #f23d4d;
|
||||
@include placeholder($white);
|
||||
color: $white;
|
||||
}
|
||||
.input-group-icon {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-validation {
|
||||
top: 1px;
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
.select-custom {
|
||||
.select2-container--bootstrap {
|
||||
.select2-selection--single {
|
||||
background-color: #f23d4d;
|
||||
border-color: rgba($white,.2);
|
||||
color: $white;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
color: $white;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
b {
|
||||
&:before{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #f23d4d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-white-variant-2 {
|
||||
@include button-variant-custom($brand-primary, $white, $white, $white, transparent, $white);
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
padding: 45px 40px 53px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
// Element groups
|
||||
// --------------------------------------------------
|
||||
|
||||
html{
|
||||
.group{
|
||||
@include element-groups-custom(15px, 15px);
|
||||
}
|
||||
|
||||
.group-xs{
|
||||
@include element-groups-custom(5px, 7px);
|
||||
}
|
||||
|
||||
.group-sm{
|
||||
@include element-groups-custom(10px, 10px);
|
||||
}
|
||||
|
||||
.group-lg{
|
||||
@include element-groups-custom(20px, 25px);
|
||||
}
|
||||
|
||||
.group-xl{
|
||||
@include element-groups-custom(30px, 30px);
|
||||
}
|
||||
|
||||
.group-top{
|
||||
> *, > *:first-child {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.group-middle{
|
||||
> *, > *:first-child {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.group-bottom{
|
||||
> *, > *:first-child {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
//
|
||||
// Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition:250ms;
|
||||
&:before {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
speak: none;
|
||||
text-transform: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate icons
|
||||
// --------------------------------------------------
|
||||
|
||||
.icon-default {
|
||||
|
||||
}
|
||||
|
||||
.icon-primary {
|
||||
color: $brand-primary;
|
||||
|
||||
path{
|
||||
fill: $brand-primary;
|
||||
}
|
||||
|
||||
&.icon-circle {
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
|
||||
&.icon-social {
|
||||
background-color: transparent;
|
||||
color: $brand-primary;
|
||||
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon-warning{
|
||||
color: $brand-warning;
|
||||
}
|
||||
|
||||
.icon-dark{
|
||||
color: $gray-dark;
|
||||
&:hover{
|
||||
color: $brand-primary
|
||||
}
|
||||
}
|
||||
|
||||
.icon-white{
|
||||
color: $white;
|
||||
|
||||
&.icon-circle.icon-bordered {
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
border-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.icon-white {
|
||||
&:hover{
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-lightener {
|
||||
color: $gray-lightener;
|
||||
}
|
||||
|
||||
.icon-darkener {
|
||||
background-color: $gray-darkener;
|
||||
color: $white;
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-gray {
|
||||
&.icon-circle {
|
||||
background-color: $gray;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.page{
|
||||
.icon-xxs{
|
||||
font-size: 17px;
|
||||
}
|
||||
.icon-xs {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.icon-md{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-circle{
|
||||
width: 71px;
|
||||
height: 71px;
|
||||
line-height: 69px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.icon-foot{
|
||||
background-color: #393941;
|
||||
color: $white;
|
||||
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&.icon-sm {
|
||||
font-size: 36px;
|
||||
}
|
||||
&.icon-lg{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 78px;
|
||||
}
|
||||
&.icon-xs{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
&.icon-xxs {
|
||||
font-size: 14px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
&.icon-bordered {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
&.icon-md {
|
||||
font-size: 24px;
|
||||
width: 57px;
|
||||
height: 57px;
|
||||
line-height: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bordered{
|
||||
border: 2px solid $gray-lightest;
|
||||
}
|
||||
|
||||
.list-icon{
|
||||
.icon-short-code{
|
||||
margin-bottom: 25px;
|
||||
> div {
|
||||
|
||||
}
|
||||
}
|
||||
.media-body{
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
color: $gray-dark;
|
||||
|
||||
> span{
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: $gray-base;
|
||||
}
|
||||
}
|
||||
.media-left {
|
||||
.icon {
|
||||
font-size: 36px;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//comment icon
|
||||
span.box-comment-icon{
|
||||
font-size: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.jumbotron-custom {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 15;
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
|
||||
> .shell {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
overflow: hidden;
|
||||
span{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.page-head-hamburger & {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include align-items(flex-end);
|
||||
padding-bottom: 16.5vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-custom-variant-1 {
|
||||
@media (min-width: $screen-md-min) {
|
||||
padding: 0;
|
||||
border-style: solid;
|
||||
border-width: 27px;
|
||||
-moz-border-image: url(../images/border-image.png) 27 ;
|
||||
-webkit-border-image: url(../images/border-image.png) 27 ;
|
||||
-o-border-image: url(../images/border-image.png) 27 ;
|
||||
border-image: url(../images/border-image.png) 27 ;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-custom-variant-2 {
|
||||
padding: 50px 0;
|
||||
border-top: 4px solid $white;
|
||||
border-bottom: 4px solid $white;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
//
|
||||
// Labels
|
||||
// --------------------------------------------------
|
||||
|
||||
.label {
|
||||
padding: $label-padding;
|
||||
}
|
||||
|
||||
// Labels styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.label-custom {
|
||||
display: inline-block;
|
||||
padding: $label-custom-padding;
|
||||
font-size: $label-custom-size;
|
||||
font-weight: $label-custom-weight;
|
||||
line-height: $label-custom-line-height;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
//text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
//letter-spacing: .06em;
|
||||
transition: .3s;
|
||||
|
||||
h1 &, h2 &, h3 &, h4 &, h5 &, h6 &, p &{
|
||||
margin-left: $label-custom-title-offset-left;
|
||||
}
|
||||
|
||||
&,&:hover,&:focus{
|
||||
color: $label-custom-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.label-ellipsis-custom {
|
||||
border-radius: $label-ellipsis-custom-border-radius;
|
||||
}
|
||||
|
||||
.label-rounded-custom {
|
||||
border-radius: $label-rounded-custom;
|
||||
}
|
||||
|
||||
// Labels sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.label-xs-custom {
|
||||
padding: $label-xs-custom-padding;
|
||||
}
|
||||
|
||||
.label-sm-custom {
|
||||
padding: $label-sm-custom-padding;
|
||||
}
|
||||
|
||||
.label-md-custom{
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.label-lg-custom {
|
||||
font-size: $label-lg-custom-size;
|
||||
padding: $label-lg-custom-padding;
|
||||
}
|
||||
|
||||
.label-xl-custom {
|
||||
font-size: $label-xl-custom-size;
|
||||
padding: $label-xl-custom-padding;
|
||||
}
|
||||
|
||||
|
||||
// Labels colors
|
||||
// --------------------------------------------------
|
||||
|
||||
//.label-deluge{
|
||||
// @include label-variant($label-deluge-bg);
|
||||
//}
|
||||
|
||||
.label-default {
|
||||
@include label-variant($label-default-bg);
|
||||
}
|
||||
|
||||
.label-primary {
|
||||
@include label-variant($label-primary-bg);
|
||||
}
|
||||
|
||||
.label-success {
|
||||
@include label-variant($label-success-bg);
|
||||
}
|
||||
|
||||
.label-info {
|
||||
@include label-variant($label-info-bg);
|
||||
}
|
||||
|
||||
.label-warning {
|
||||
@include label-variant($label-warning-bg);
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
@include label-variant($label-danger-bg);
|
||||
}
|
||||
.label-coral {
|
||||
@include label-variant($label-coral-bg);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,90 @@
|
||||
.media {
|
||||
.media-left,
|
||||
.media-right{
|
||||
|
||||
img { max-width: none; }
|
||||
@media (min-width: 768px) {
|
||||
padding-right: 22px;
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.media-body {
|
||||
&-inset-1 { padding-top: 9px; }
|
||||
.h6 {margin-top: 0;}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mod-1 {
|
||||
.media-body {
|
||||
p {
|
||||
display: inline-block;
|
||||
max-height: 71px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mod-2 {
|
||||
.media-left {
|
||||
@media (min-width: 768px) {
|
||||
padding-right: 25px;
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
}
|
||||
.media-body {
|
||||
position: relative;
|
||||
padding: 30px 30px 70px 30px;
|
||||
@media (min-width: $screen-sm-min) {
|
||||
padding-left: 0;
|
||||
.list-inline {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mod-3 {
|
||||
.media-left,
|
||||
.media-right {
|
||||
text-align: center;
|
||||
img {
|
||||
max-width: none;
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.media-left{
|
||||
@media (min-width: 768px) {
|
||||
padding-right: 97px;
|
||||
}
|
||||
@media(max-width: 1199px) {
|
||||
display: block;
|
||||
padding-bottom: 30px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-right {
|
||||
@media (min-width: 768px) {
|
||||
padding-left: 97px;
|
||||
}
|
||||
@media(max-width: 1199px) {
|
||||
display: block;
|
||||
padding-top: 35px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// Custom Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
// Utilities
|
||||
@import "mixins/functions";
|
||||
@import "mixins/flex";
|
||||
@import "mixins/vendors-custom";
|
||||
@import "mixins/text-utilities";
|
||||
@import "mixins/pull-utilities";
|
||||
@import "mixins/visibility-utilities";
|
||||
@import "mixins/backgrounds";
|
||||
@import "mixins/indent-utilities";
|
||||
@import "mixins/unit-utilities";
|
||||
@import "mixins/element-groups";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/forms-custom";
|
||||
@import "mixins/divider-gradient";
|
||||
@import "mixins/rules-utilities";
|
||||
@import "mixins/triangle";
|
||||
// Grid Framework
|
||||
@import "mixins/flex-grid-framework";
|
||||
@@ -0,0 +1,146 @@
|
||||
// Modal window
|
||||
//-------------------------------------
|
||||
|
||||
.modal {
|
||||
background: rgba($black,.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
border:none;
|
||||
@media (min-width: $screen-sm-min) {
|
||||
box-shadow: 2px 38px 44px -15px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body,
|
||||
.modal-header {
|
||||
padding: 0;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
.modal-dialog {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@include transform(translate(-50%,-50%)!important);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.close{
|
||||
color: $white;
|
||||
opacity: 1;
|
||||
transition:250ms;
|
||||
&:hover {
|
||||
color: $brand-primary;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#appointment {
|
||||
.modal {
|
||||
background: rgba($white,1);
|
||||
|
||||
}
|
||||
.modal-content {
|
||||
background-color: $white;
|
||||
border-radius: $border-radius-large;
|
||||
}
|
||||
.modal-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $gray-dark;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
span{
|
||||
color: $gray-base;
|
||||
}
|
||||
|
||||
&:hover span{
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
.modal-dialog {
|
||||
max-width: 370px;
|
||||
box-shadow: $shadow-area-xs;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.radio {
|
||||
label {
|
||||
input[type="radio"] {
|
||||
margin-top: 8px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-header {
|
||||
padding: 42px 30px 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.radio-custom-dummy {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: 5px;
|
||||
&:after {
|
||||
background: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 15px 30px 30px;
|
||||
p + * {
|
||||
margin-top: 20px;
|
||||
}
|
||||
* + .register-form,
|
||||
* + .login-form {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.register-form {
|
||||
.btn-sm {
|
||||
padding: 11px 12px;
|
||||
@media (min-width: $screen-md-min) {
|
||||
padding: 11px 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
form {
|
||||
.form-group {
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
display: none;
|
||||
}
|
||||
.icon{
|
||||
font-size: 17px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
//
|
||||
// Offsets
|
||||
// --------------------------------------------------
|
||||
h1 + p,
|
||||
h2 + p {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
h3 + p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h4 + p,
|
||||
h5 + p,
|
||||
h6 + p {
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
// Insets
|
||||
// -------------------------
|
||||
|
||||
$insets: (0, 10px, 15px, 20px, 25px, 30px, 38px, 50px,55px, 60px,65px, 70px,75px,80px, 100px, 110px);
|
||||
|
||||
html .page{
|
||||
@include indent-responsive(inset, left, padding-left, $medias, $insets);
|
||||
@include indent-responsive(inset, right, padding-right, $medias, $insets);
|
||||
}
|
||||
|
||||
|
||||
// Elements
|
||||
// -------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
// Grid
|
||||
// -------------------------
|
||||
|
||||
.shell-fluid-custom{
|
||||
@media (min-width: $screen-lg-min) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Sections
|
||||
// -------------------------
|
||||
|
||||
|
||||
// Responsive
|
||||
// -------------------------
|
||||
|
||||
$offsets: (-66px,-10px,-7px,0,2px,3px, 5px,7px, 9px, 10px, 12px,14px, 15px, 17px,18px, 20px,21px, 22px,24px, 25px,26px, 27px,29px, 30px,33px, 35px, 40px, 45px, 47px, 50px, 56px, 60px, 65px, 70px,75px, 80px, 85px, 90px, 110px, 114px, 133px, 147px);
|
||||
|
||||
html .page{
|
||||
@include indent-responsive(offset, top, margin-top, $medias, $offsets);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
//
|
||||
// Pager pagination
|
||||
// --------------------------------------------------
|
||||
|
||||
.pager {
|
||||
li {
|
||||
> a,
|
||||
> span {
|
||||
transition: .3s;
|
||||
padding: 5.5px 16.4px 4.5px;
|
||||
font-weight: $btn-font-weight-small;
|
||||
font-size: $btn-font-size-small;
|
||||
line-height: $btn-lh-size-small;
|
||||
color: $gray-base;
|
||||
border-radius: 25px;
|
||||
min-width: 95px;
|
||||
}
|
||||
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
> a:active,
|
||||
> a:active:focus{
|
||||
color: $pager-hover-color;
|
||||
background-color: $pager-hover-bg;
|
||||
border-color: $pager-hover-border;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-left,
|
||||
.icon-right{
|
||||
font-size: 18px;
|
||||
line-height: $btn-lh-size-small;
|
||||
}
|
||||
|
||||
.icon-left{
|
||||
float: left;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.icon-right{
|
||||
float: right;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
> span {
|
||||
color: $pager-disabled-color;
|
||||
background-color: $pager-disabled-bg;
|
||||
border-color: $pager-disabled-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager-sm{
|
||||
li {
|
||||
> a,
|
||||
> span {
|
||||
padding: $padding-xs-vertical $padding-xs-horizontal/2;
|
||||
font-weight: $btn-font-weight-xs;
|
||||
font-size: $btn-font-size-xs;
|
||||
line-height: $btn-lh-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-left,
|
||||
.icon-right{
|
||||
line-height: $btn-lh-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.pager-lg{
|
||||
li {
|
||||
> a,
|
||||
> span {
|
||||
padding: $padding-base-vertical $padding-base-horizontal;
|
||||
font-weight: $btn-font-weight;
|
||||
font-size: $btn-font-size;
|
||||
line-height: $btn-lh-size;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-left,
|
||||
.icon-right{
|
||||
font-size: $btn-font-size;
|
||||
line-height: $btn-lh-size;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
.pagination-classic {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
a,
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
font-weight: 600;
|
||||
font-family: $font-family-base;
|
||||
background-color: $body-bg;
|
||||
border: 1px solid $gray-lightest;
|
||||
color: $gray-dark;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
&.active a,
|
||||
&.active a:hover,
|
||||
a:focus,
|
||||
a:hover {
|
||||
background-color: $brand-primary;
|
||||
border-color: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
&.active span,
|
||||
&.active span:hover{
|
||||
background-color: $brand-primary;
|
||||
border-color: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.disabled a,
|
||||
&.disabled a:hover,
|
||||
&.disabled span,
|
||||
&.disabled span:hover{
|
||||
background-color: $body-bg;
|
||||
}
|
||||
& + li { margin-left: -5px; }
|
||||
}
|
||||
li:nth-child(2){
|
||||
a,
|
||||
span{
|
||||
border-radius: $border-radius-small 0 0 $border-radius-small;
|
||||
}
|
||||
}
|
||||
li:nth-last-child(2){
|
||||
a,
|
||||
span{
|
||||
border-radius: 0 $border-radius-small $border-radius-small 0;
|
||||
}
|
||||
}
|
||||
li:first-of-type,
|
||||
li:last-of-type {
|
||||
a,
|
||||
span{
|
||||
border-radius: $border-radius-small;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
padding: 0 13px;
|
||||
width: auto;
|
||||
text-indent: -9999px;
|
||||
&:before,
|
||||
&:after {
|
||||
display: inline-block;
|
||||
font-family: $material;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
li:last-of-type{
|
||||
float: right;
|
||||
}
|
||||
li:first-of-type{
|
||||
float: left;
|
||||
}
|
||||
li:last-of-type a:after,
|
||||
li:last-of-type span:after{
|
||||
content: "\f14f";
|
||||
}
|
||||
li:first-of-type a:before,
|
||||
li:first-of-type span:before{
|
||||
content: "\f14a";
|
||||
}
|
||||
@media (min-width: $screen-xs-min) {
|
||||
li:first-of-type,
|
||||
li:last-of-type {
|
||||
a,
|
||||
span{
|
||||
min-width: 98px;
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
li:last-of-type a:after,
|
||||
li:last-of-type span:after {
|
||||
margin-left: 20px;
|
||||
float: none;
|
||||
}
|
||||
li:first-of-type a:before,
|
||||
li:first-of-type span:before {
|
||||
margin-right: 20px;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// variant-2
|
||||
//--------------------------------------------------------
|
||||
.pagination-classic-variant-2 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
a,
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 51px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
font-weight: 600;
|
||||
font-family: $font-family-base;
|
||||
background-color: $body-bg;
|
||||
border: none;
|
||||
|
||||
color: $brand-primary;
|
||||
transition: .4s;
|
||||
|
||||
}
|
||||
&.pagination-nav {
|
||||
a,
|
||||
span{
|
||||
&:before{
|
||||
content: "0";
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
& + li.pagination-nav {
|
||||
a,
|
||||
span {
|
||||
border-left: 2px solid $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active a,
|
||||
&.active a:hover,
|
||||
a:focus,
|
||||
a:hover {
|
||||
background-color: transparent;
|
||||
color: $gray-base;
|
||||
}
|
||||
&.active span,
|
||||
&.active span:hover{
|
||||
background-color: transparent;
|
||||
color: $gray-base;
|
||||
}
|
||||
|
||||
&.disabled a,
|
||||
&.disabled a:hover,
|
||||
&.disabled span,
|
||||
&.disabled span:hover{
|
||||
color: $gray-base;
|
||||
background-color: $body-bg;
|
||||
}
|
||||
& + li { margin-left: -5px; }
|
||||
}
|
||||
li:first-of-type{
|
||||
a,
|
||||
span{
|
||||
border: none
|
||||
}
|
||||
}
|
||||
li:last-of-type{
|
||||
a,
|
||||
span{
|
||||
&:before{
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
li:first-of-type,
|
||||
li:last-of-type {
|
||||
a,
|
||||
span{
|
||||
width: 15px;
|
||||
&:before,
|
||||
&:after {
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
font-family: $material;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,911 @@
|
||||
//
|
||||
// Posts
|
||||
// --------------------------------------------------
|
||||
|
||||
// Post Common Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.post {
|
||||
&-meta {
|
||||
.icon-xxs {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title + &-meta {
|
||||
//margin-top: ;
|
||||
}
|
||||
}
|
||||
|
||||
// Post default
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-default {
|
||||
.post-controls {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-controls + .post-title {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Post widget
|
||||
// --------------------------------------------------
|
||||
|
||||
.widget-post {
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
time {
|
||||
@include transform(translate(10px, -1px));
|
||||
}
|
||||
.icon{
|
||||
@include transform(translate(0, -1px));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.h6 {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h6,
|
||||
time {
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
.icon-xxs {
|
||||
font-size: 14px;
|
||||
}
|
||||
.icon{
|
||||
@include transform(translate(-10px, -1px));
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
time {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
@include transform(translate(-17px, -1px));
|
||||
}
|
||||
}
|
||||
|
||||
& + .widget-post {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Post Wide
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-wide {
|
||||
.post-content {
|
||||
padding-top: 41px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xl-min) {
|
||||
.post-body {
|
||||
height: $post-wide-body-xl-height;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
.post-media {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-top: 0;
|
||||
padding: $post-wide-body-xl-padding;
|
||||
border-top: $post-wide-body-xl-border-top;
|
||||
border-bottom: $post-wide-body-xl-border-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile, .tablet {
|
||||
.post-wide-horizontal .thumbnail-classic:hover > figure > img {
|
||||
@include transform(scale(1));
|
||||
}
|
||||
}
|
||||
|
||||
// Post Boxed
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-boxed {
|
||||
position: relative;
|
||||
|
||||
.post-media {
|
||||
background: $post-boxed-media-background;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: .3s;
|
||||
will-change: opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.post-media + .post-content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
z-index: 1;
|
||||
|
||||
.btn-link-primary:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
* {
|
||||
&:after {
|
||||
opacity: 0.22;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.post-media {
|
||||
img {
|
||||
opacity: .95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $screen-sm-min - 1) {
|
||||
.post-title {
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.post-title {
|
||||
position: relative;
|
||||
max-height: 86px;
|
||||
min-height: 30px;
|
||||
overflow: hidden;
|
||||
-ms-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.post-media + .post-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
padding: 0;
|
||||
color: $post-boxed-content-sm-color;
|
||||
}
|
||||
|
||||
//&:after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// @include gradient-directional(#191919, transparent, 0deg);
|
||||
//}
|
||||
|
||||
.post-body {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
left: 32px;
|
||||
bottom: 28px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Modern
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-modern {
|
||||
border-radius: $border-radius-large;
|
||||
overflow: hidden;
|
||||
border: 1px solid $gray-light;
|
||||
.post-inset,
|
||||
.post-content {
|
||||
padding: 30px 15px 24px;
|
||||
}
|
||||
|
||||
.post-inset {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.post-media {
|
||||
margin: -1px;
|
||||
}
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.post-content {
|
||||
padding: $post-modern-content-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-modern-2 {
|
||||
position: relative;
|
||||
border:none;
|
||||
.group-tags{
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 20px;
|
||||
.btn-sm{
|
||||
padding-left: 23px;
|
||||
padding-right: 23px;
|
||||
}
|
||||
}
|
||||
.list-inline {
|
||||
li{
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
.text-dark {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
@media (max-width: $screen-md-min - 1) {
|
||||
.border-right {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
.bg-primary & {
|
||||
.text-dark {
|
||||
color: $gray-base;
|
||||
}
|
||||
a.text-dark {
|
||||
color: $brand-primary;
|
||||
&:hover{
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
cite.text-dark{
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-modern-3 {
|
||||
@extend .post-modern-2;
|
||||
|
||||
section.post-content{
|
||||
position: absolute;
|
||||
bottom: 17px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.border-right{
|
||||
border-right: 1px solid rgba($white,.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Box shadow fix for IE Edge
|
||||
.ie-edge .post-modern {
|
||||
box-shadow: $post-modern-box-shadow;
|
||||
}
|
||||
|
||||
// Post Timeline (horizontal "divider")
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-timeline {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -33px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: $post-timeline-border-color;
|
||||
}
|
||||
|
||||
& + .post-timeline {
|
||||
margin-top: 66px;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
&:first-child {
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
width: 86.5%;
|
||||
height: 1px;
|
||||
background: $post-timeline-border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 14px;
|
||||
width: 47px;
|
||||
height: 1px;
|
||||
background: $post-timeline-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
& + .post-timeline {
|
||||
border-top: 1px solid $post-timeline-border-color;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
& + .post-timeline {
|
||||
border: none;
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
width: 86.5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
&:before {
|
||||
top: -25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// delete first blog divider
|
||||
.blog-archive-year:first-child {
|
||||
.post-timeline:first-child:before,
|
||||
.post-timeline:first-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-timeline:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Post Modern Timeline
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-modern-timeline {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
.post-author {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.post-media {
|
||||
border-radius: $border-radius-large $border-radius-large 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.post-author-img,
|
||||
.post-author-name {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.post-author-img {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
& + .post-modern-timeline {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
& + .post-modern-timeline {
|
||||
&:before {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
width: 1px;
|
||||
height: 34px;
|
||||
content: '';
|
||||
background: $post-modern-timeline-sm-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 95px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
content: '';
|
||||
background: $post-modern-timeline-sm-border-color;
|
||||
}
|
||||
|
||||
.post-author-img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.post-author-name {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -12px;
|
||||
transition: .3s;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
padding: $post-modern-timeline-sm-author-name-padding;
|
||||
font-size: $post-modern-timeline-sm-author-name-size;
|
||||
color: $post-modern-timeline-sm-author-name-color;
|
||||
white-space: nowrap;
|
||||
background: $post-modern-timeline-sm-author-name-background;
|
||||
border-radius: $border-radius-small;
|
||||
}
|
||||
|
||||
.post-author {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-top: 22px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
margin-bottom: 5px;
|
||||
height: 18px;
|
||||
width: 1px;
|
||||
background: $post-modern-timeline-sm-border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
width: 22px;
|
||||
height: 1px;
|
||||
background: $post-modern-timeline-sm-border-color;;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.post-author-name {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.post-author:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.post-author-none {
|
||||
&:after {
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
}
|
||||
.post-author {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
@media (min-width: $screen-md-min) {
|
||||
margin-left: 100px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
left: -65px;
|
||||
}
|
||||
|
||||
.post-author {
|
||||
right: 100%;
|
||||
margin-right: 30px;
|
||||
|
||||
&:before {
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 100%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-author-name {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-right: 0;
|
||||
@include transform(translate(-50%, -180%));
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -4px;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-lg-min) {
|
||||
.post-author-name {
|
||||
right: 100%;
|
||||
margin-right: 10px;
|
||||
left: auto;
|
||||
@include transform(translateX(-10px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
@media (min-width: $screen-md-min) {
|
||||
margin-right: 100px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
right: -65px;
|
||||
}
|
||||
|
||||
.post-author {
|
||||
left: 100%;
|
||||
margin-left: 30px;
|
||||
|
||||
&:before {
|
||||
right: 35px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 100%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-author-name {
|
||||
left: 50%;
|
||||
margin-left: 0;
|
||||
@include transform(translateX(-50%));
|
||||
top: -15px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -4px;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-lg-min) {
|
||||
.post-author-name {
|
||||
left: 100%;
|
||||
margin-left: 10px;
|
||||
top: 50%;
|
||||
@include transform(translateX(-10px));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-modern-timeline-date {
|
||||
display: block;
|
||||
margin: $post-modern-timeline-date-offsets;
|
||||
font-size: $post-modern-timeline-date-size;
|
||||
font-weight: $post-modern-timeline-date-weight;
|
||||
overflow: hidden;
|
||||
|
||||
time {
|
||||
position: relative;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
width: 2000px;
|
||||
background: $gray;
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: 100%;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 100%;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
time:before,
|
||||
time:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Event
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-event {
|
||||
position: relative;
|
||||
|
||||
.post-meta {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
z-index: 2;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
|
||||
&-day {
|
||||
background: $post-event-meta-day-background;
|
||||
display: block;
|
||||
height: $post-event-meta-day-height;
|
||||
font-size: $post-event-meta-day-size;
|
||||
line-height: $post-event-meta-day-line-height;
|
||||
border-radius: $post-event-meta-day-border-radius;
|
||||
box-shadow: $post-event-meta-day-box-shadow;
|
||||
}
|
||||
|
||||
&-month {
|
||||
display: block;
|
||||
height: $post-event-meta-month-height;
|
||||
margin-top: 5px;
|
||||
font-size: $post-event-meta-month-size;
|
||||
line-height: $post-event-meta-month-line-height;
|
||||
background: $post-event-meta-month-background;
|
||||
border-radius: $border-radius-small;
|
||||
box-shadow: $post-event-meta-month-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.post-event-right {
|
||||
.post-meta {
|
||||
left: auto;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
padding-left: 100px;
|
||||
|
||||
.post-meta {
|
||||
width: $post-event-meta-month-sm-width;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: auto;
|
||||
|
||||
&-day {
|
||||
height: $post-event-meta-day-sm-height;
|
||||
line-height: $post-event-meta-day-sm-line-height;
|
||||
}
|
||||
|
||||
&-month {
|
||||
font-size: $post-event-meta-month-sm-size;
|
||||
height: $post-event-meta-month-sm-height;
|
||||
line-height: $post-event-meta-month-sm-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.post-event-right {
|
||||
padding-left: 0;
|
||||
padding-right: 100px;
|
||||
|
||||
.post-meta {
|
||||
left: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Event Type 2
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-event-type-2 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: $post-event-type-2-max-width;
|
||||
|
||||
.post-meta {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: $post-event-type-2-post-meta-padding;
|
||||
text-align: center;
|
||||
background: $post-event-type-2-post-meta-background;
|
||||
|
||||
&-day {
|
||||
display: block;
|
||||
font-size: $post-event-type-2-post-meta-day-font-size;
|
||||
line-height: $post-event-type-2-post-meta-day-line-height;
|
||||
}
|
||||
|
||||
&-month {
|
||||
display: block;
|
||||
font-size: $post-event-type-2-post-meta-month-font-size;
|
||||
line-height: $post-event-type-2-post-meta-month-line-height;
|
||||
}
|
||||
|
||||
&-time {
|
||||
font-size: $post-event-type-2-post-meta-time-font-size;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.post-media {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
background: $post-event-type-2-overlay-background;
|
||||
transition: .3s opacity ease;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $post-event-type-2-post-media-icon-width;
|
||||
height: $post-event-type-2-post-media-icon-height;
|
||||
font-size: $post-event-type-2-post-media-icon-font-size;
|
||||
line-height: $post-event-type-2-post-media-icon-line-height;
|
||||
opacity: 0;
|
||||
color: $post-event-type-2-post-media-icon-color;
|
||||
@include transform(translate(-50%, 100%));
|
||||
transition: .3s all ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.icon {
|
||||
opacity: 1;
|
||||
@include transform(translate(-50%, -50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Vacation
|
||||
// --------------------------------------------------
|
||||
|
||||
.post-vacation {
|
||||
display: block;
|
||||
padding: $post-vacation-padding;
|
||||
background: $post-vacation-background;
|
||||
box-shadow: $post-vacation-box-shadow;
|
||||
@include transition(0.35s all ease);
|
||||
|
||||
h3 {
|
||||
@include transition(0.35s all ease);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $post-vacation-hover-background;
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Box shadow fix for IE Edge
|
||||
.ie-edge .post-vacation {
|
||||
box-shadow: $post-modern-box-shadow;
|
||||
}
|
||||
|
||||
// Widget Event
|
||||
// --------------------------------------------------
|
||||
|
||||
.widget-event {
|
||||
display: block;
|
||||
|
||||
h6 {
|
||||
@include transition(0.35s all ease);
|
||||
}
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
h6 {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
.icon-xxs {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
time {
|
||||
display: inline-block;
|
||||
font-size: $widget-event-meta-time-size;
|
||||
}
|
||||
}
|
||||
|
||||
& + .widget-event {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.soundcloud-player-classic iframe {
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.group-tags,
|
||||
.post-tags {
|
||||
* {
|
||||
&:after {
|
||||
content: '|';
|
||||
color: $gray-light;
|
||||
padding-left: 7px;
|
||||
}
|
||||
&:last-of-type {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Post classic
|
||||
//--------------------
|
||||
|
||||
.post-classic {
|
||||
cite{
|
||||
display: inline-block;
|
||||
max-width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,472 @@
|
||||
//
|
||||
// Product
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.product {
|
||||
position: relative;
|
||||
|
||||
&, &:before, &-thumbnails, &-image-area {
|
||||
transition: .3s all ease;
|
||||
}
|
||||
|
||||
.label-lg-custom {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
&-image {
|
||||
position: relative;
|
||||
background: $product-image-background;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&-thumbnails {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
background: $product-thumbnail-background;
|
||||
box-shadow: $product-thumbnail-box-shadow;
|
||||
|
||||
&.active {
|
||||
background: $product-thumbnail-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-label {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-brand {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&-rating {
|
||||
font-size: $product-rating-size;
|
||||
color: $product-rating-color;
|
||||
}
|
||||
|
||||
&-review-count {
|
||||
margin-left: 16px;
|
||||
font-size: $product-review-count-size;
|
||||
}
|
||||
|
||||
&-radio-wrap {
|
||||
.radio-custom-dummy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-custom:checked ~ .product-radio {
|
||||
color: $product-radio-custom-color;
|
||||
background: $product-radio-custom-background;
|
||||
@include transform(scale(0.9));
|
||||
}
|
||||
|
||||
.radio-inline {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
> * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-radio-title {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
+ .product-radio {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&-radio {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: $product-radio-width;
|
||||
height: $product-radio-height;
|
||||
font-weight: $product-radio-weight;
|
||||
line-height: $product-radio-line-height;
|
||||
background: $gray-lighter;
|
||||
border-radius: $product-radio-border-radius;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transition: .3s all ease;
|
||||
|
||||
&:hover {
|
||||
color: $product-radio-hover-color;
|
||||
background: $product-radio-hover-background;
|
||||
}
|
||||
}
|
||||
|
||||
&-number {
|
||||
white-space: nowrap;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.stepper {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.stepper-input{
|
||||
background-color: $gray-lighten;
|
||||
box-shadow: inset 0 1px 1px rgba($black,.15);
|
||||
border-bottom-color: $gray-lighten;
|
||||
padding: 6px 20px ;
|
||||
height: 40px;
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&-price-old {
|
||||
text-decoration: line-through;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Product List\Grid Styles
|
||||
// --------------------------------------------------
|
||||
.product-list, .product-grid {
|
||||
z-index: 0;
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
background: $product-list-grid-background;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -15px;
|
||||
right: -15px;
|
||||
bottom: -15px;
|
||||
z-index: -1;
|
||||
//border: $product-list-grid-hover-border;
|
||||
border-radius: $product-list-grid-hover-border-radius;
|
||||
content: '';
|
||||
background: $product-list-grid-hover-background;
|
||||
}
|
||||
|
||||
.product-thumbnails {
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
top: 11px;
|
||||
|
||||
li {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: $border-radius-small;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-width: 150%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
+ li {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-price {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-price-old {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg) {
|
||||
.product-thumbnails {
|
||||
li {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
img {
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-thumbnails {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&:before {
|
||||
//border-color: $gray;
|
||||
box-shadow: 0 0 15px rgba($black,.3);
|
||||
}
|
||||
|
||||
.product-thumbnails {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Product Grid Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.product-grid {
|
||||
@media (min-width: $screen-lg) {
|
||||
.product-block-hover {
|
||||
position: absolute;
|
||||
bottom: 21px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 83px;
|
||||
margin-bottom: -118px;
|
||||
z-index: 4;
|
||||
|
||||
.product-block-hover {
|
||||
transition: .3s all ease .2s;
|
||||
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Product Grid Type 2
|
||||
// --------------------------------------------------
|
||||
@media (min-width: $screen-lg-min) {
|
||||
.product-grid.product-grid-type-2 {
|
||||
&:before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.product-title a {
|
||||
transition: .3s all ease;
|
||||
|
||||
&:hover {
|
||||
color: $product-grid-type-2-title-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
box-shadow: $product-grid-type-2-title-hover-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Product List Styles
|
||||
// --------------------------------------------------
|
||||
.product-list {
|
||||
|
||||
.product-image {
|
||||
min-width: 30%;
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
}
|
||||
&.unit-xs-top{
|
||||
@include align-items(stretch);
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
.product-btn, .product-number {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
margin-top: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Product List Wide
|
||||
// --------------------------------------------------
|
||||
|
||||
.product-list-wide {
|
||||
.product-list-right {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
min-width: 30%;
|
||||
}
|
||||
|
||||
.product-image + .unit-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
.product-image + .unit-body {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-md) {
|
||||
.product-image {
|
||||
min-width: 23%;
|
||||
}
|
||||
|
||||
.product-image + .unit-body {
|
||||
width: 77%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $screen-lg) {
|
||||
.product-desc {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg) {
|
||||
.product-list-right {
|
||||
min-width: 31%;
|
||||
border-left: 1px solid $gray;
|
||||
padding: 13px 30px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
@include button-size($padding-base-vertical, $padding-base-horizontal, $btn-font-size, $btn-lh-size, $border-radius-small);
|
||||
margin-left: 0;
|
||||
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Single Product
|
||||
// --------------------------------------------------
|
||||
|
||||
.product-single {
|
||||
.product-thumbnails {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
li {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
will-change: transform;
|
||||
border-radius: $border-radius-small;
|
||||
|
||||
&, img {
|
||||
transition: .3s all ease;
|
||||
}
|
||||
|
||||
img {
|
||||
//opacity: .6;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@include transform(scale(1.1));
|
||||
will-change: contents;
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
+ li {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
.product-btn, .product-number {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoomWindow {
|
||||
background: $gray-lighter;
|
||||
}
|
||||
|
||||
.animateImageIn {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.animateImageOut {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.product-border{
|
||||
border: 1px solid $gray-lighten;
|
||||
}
|
||||
|
||||
.product-price-single {
|
||||
.product-price-new {
|
||||
font-size: 30px;
|
||||
}
|
||||
.product-price-old {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
//
|
||||
// Pull Responsive
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $resolution, $alias in ($screen-xs-min : xs, $screen-sm-min : sm, $screen-md-min : md, $screen-lg-min : lg, $screen-xl-min : xl){
|
||||
@media (min-width: $resolution) {
|
||||
@include make-pull-alignment($alias);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Reset Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Remove leading spacing of element
|
||||
html {
|
||||
*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
//
|
||||
// Scaffolding
|
||||
// --------------------------------------------------
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Page styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.page {
|
||||
overflow: hidden;
|
||||
background-color: $content-bg;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
a.hover,
|
||||
a.active {
|
||||
color: $black;
|
||||
}
|
||||
// Links
|
||||
|
||||
a {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.img-fullwidth {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Horizontal rules
|
||||
|
||||
hr {
|
||||
width:100px;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-top: 2px solid $hr-border;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
|
||||
h1 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
> section {
|
||||
@include display-flex;
|
||||
@include justify-content(center);
|
||||
@include align-items(flex-end);
|
||||
@include flex-direction(column);
|
||||
.shell {
|
||||
width: 100%;
|
||||
}
|
||||
h1 + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-head-default{
|
||||
position: relative;
|
||||
.rd-navbar-wrap{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.desktop & {
|
||||
@media (min-width: $screen-md-min) {
|
||||
.rd-navbar-wrap {
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-head-hamburger {
|
||||
.icon-bordered {
|
||||
border-width: 1px;
|
||||
border-color: rgba($white,.2);
|
||||
}
|
||||
}
|
||||
|
||||
.page-foot {
|
||||
|
||||
.form-subscribe{
|
||||
.form-control {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
max-width: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.bg-dark {
|
||||
.form-subscribe{
|
||||
.form-control {
|
||||
background-color: $gray-dark;
|
||||
border-color: rgba($white,.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.list {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// Sections
|
||||
// --------------------------------------------------
|
||||
|
||||
// Section Spacing
|
||||
// -------------------------
|
||||
|
||||
$insets: (0,15px,25px,35px,40px,48px,50px,54px,60px,64px,66px,75px,80px,85px,90px,95px,98px,105px, 115px, 120px, 125px,180px);
|
||||
|
||||
@include indent-responsive(section, '', (padding-top, padding-bottom), $medias, $insets);
|
||||
@include indent-responsive(section, top, padding-top, $medias, $insets);
|
||||
@include indent-responsive(section, bottom, padding-bottom, $medias, $insets);
|
||||
@@ -0,0 +1,56 @@
|
||||
//
|
||||
// Stucktable
|
||||
// --------------------------------------------------
|
||||
|
||||
.stacktable {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: $gray-dark;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.st-head-row {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.st-head-row.st-head-row-main {
|
||||
font-size: 1.5em;
|
||||
//padding-top: 0;
|
||||
}
|
||||
|
||||
.st-key {
|
||||
width: 49%;
|
||||
text-align: left;
|
||||
padding-right: 1%;
|
||||
}
|
||||
|
||||
.st-val {
|
||||
width: 49%;
|
||||
padding-left: 1%;
|
||||
}
|
||||
|
||||
.stacktable.large-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stacktable.small-only {
|
||||
display: table;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.stacktable.large-only {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.stacktable.small-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
.st-head-row.st-head-row-main {
|
||||
background-color: $gray-dark;
|
||||
color: $white;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,440 @@
|
||||
// Zebra-striping
|
||||
//
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
//color: $gray-dark;
|
||||
border-collapse: separate;
|
||||
|
||||
// Cells
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: $table-cell-padding 25px;
|
||||
line-height: $line-height-base;
|
||||
border: none;
|
||||
vertical-align: middle;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
padding-left: 63px;
|
||||
padding-right: 25px;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
padding-top: 27px;
|
||||
padding-bottom: 27px;
|
||||
empty-cells: hide;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
&:first-of-type {
|
||||
border-radius: 10px 0 0 0;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-radius: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tfoot {
|
||||
tr td{
|
||||
@media (min-width: $screen-sm-min) {
|
||||
&:first-of-type {
|
||||
border-radius: 0 0 0 10px;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-radius: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> tbody,
|
||||
> tfoot{
|
||||
@media (min-width: $screen-sm-min) {
|
||||
tr td:first-of-type {
|
||||
border-left: 1px solid $table-border-color;
|
||||
}
|
||||
tr td:last-of-type {
|
||||
border-right: 1px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
tfoot {
|
||||
tr td {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
label{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.icon{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//pricing table
|
||||
//---------------------
|
||||
|
||||
.pricing-table-programs{
|
||||
// Cells
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> td {
|
||||
vertical-align: top;
|
||||
@media (min-width: $screen-lg-min) {
|
||||
padding-left: 25px;
|
||||
|
||||
&:nth-child(2){
|
||||
min-width: 450px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
thead{
|
||||
.icon{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.st-key {
|
||||
position: relative;
|
||||
|
||||
.icon{
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.st-head-row-wrap + .table-click-element {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list,
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list{
|
||||
margin-left: -50%;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-md-min) {
|
||||
.list {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-click-element {
|
||||
span{
|
||||
transition: 250ms;
|
||||
}
|
||||
&.opened {
|
||||
|
||||
.icon {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-sm-min) {
|
||||
cursor: pointer;
|
||||
|
||||
td:first-of-type{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
|
||||
//border-radius: $border-radius-large $border-radius-large 0;
|
||||
|
||||
> tbody > tr:nth-of-type(even) {
|
||||
background-color: $table-bg-accent;
|
||||
}
|
||||
|
||||
> tbody > tr:nth-of-type(odd) {
|
||||
background-color: transparent;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
border-top: none;
|
||||
}
|
||||
td:first-of-type {
|
||||
//text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
//background-color: $table-bg-accent;
|
||||
//box-shadow: 0 1px 3px rgba($gray, .8);
|
||||
&.bg-primary {
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Bordered version
|
||||
//
|
||||
// Add borders all around the table and between all the columns.
|
||||
|
||||
.table-bordered {
|
||||
border: none;
|
||||
|
||||
//> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
> thead > tr {
|
||||
> th,
|
||||
> td {
|
||||
//border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
//
|
||||
// Placed here since it has to come after the potential zebra striping
|
||||
|
||||
.table-hover {
|
||||
thead {
|
||||
tr {
|
||||
//box-shadow: 0 1px 3px rgba($gray, .8);
|
||||
}
|
||||
}
|
||||
//> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
> tbody > tr:hover {
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
background-color: $table-bg-hover;
|
||||
//color: $white;
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-primary {
|
||||
thead {
|
||||
color: $white;
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
.table-dark {
|
||||
thead {
|
||||
color: $white;
|
||||
background-color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.table-light {
|
||||
thead {
|
||||
background-color: $gray-light;
|
||||
color: $gray-dark;
|
||||
|
||||
.h6{
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-silk {
|
||||
thead {
|
||||
background-color: $brand-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-mobile{
|
||||
tr:last-of-type {
|
||||
td {
|
||||
//font-family: $font-family-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $screen-sm-min - 1) {
|
||||
.table-mobile {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
tr {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
&:first-of-type {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
&:nth-child(n+2) {
|
||||
width: 50%;
|
||||
}
|
||||
&:last-of-type {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%));
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: solid transparent;
|
||||
//border-color: rgba(112, 34, 213, 0);
|
||||
border-top-color: $table-border-color;
|
||||
border-width: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%));
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: solid transparent;
|
||||
border-top-color: $body-bg;
|
||||
border-width: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-primary {
|
||||
tr {
|
||||
td:first-of-type {
|
||||
color: $white;
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-dark {
|
||||
tr {
|
||||
td:first-of-type {
|
||||
color: $white;
|
||||
background-color: $gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-light {
|
||||
tr {
|
||||
td:first-of-type {
|
||||
//color: $gray-base;
|
||||
background-color: $gray-light;
|
||||
}
|
||||
td:last-of-type {
|
||||
&:before { border-top-color: $table-border-color; }
|
||||
}
|
||||
&:hover { background-color: inherit; }
|
||||
}
|
||||
}
|
||||
.table-silk {
|
||||
tr {
|
||||
td:first-of-type {
|
||||
color: $white;
|
||||
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
td{ border-bottom: 1px solid $table-border-color; }
|
||||
&:nth-of-type(even){
|
||||
td{
|
||||
&:after{ border-top-color: $gray-lighter; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-striped {
|
||||
&.table > tbody{
|
||||
> tr > td:last-of-type{
|
||||
border-top: 1px solid $gray-light;
|
||||
}
|
||||
> tr:nth-of-type(even) > td:last-of-type {
|
||||
border-top: 1px solid $white;
|
||||
&:after{
|
||||
border-top-color: $gray-light;
|
||||
}
|
||||
&:before{
|
||||
border-top-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-shopping-cart {
|
||||
tbody{
|
||||
tr{
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
}
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: 11px 25px;
|
||||
|
||||
&:last-of-type,
|
||||
&:nth-last-child(2) {
|
||||
padding: 11px;
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
//
|
||||
// Text Alignment
|
||||
// --------------------------------------------------
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-middle{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.text-bottom{
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.text-top{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@mixin make-text-alignment($resolution){
|
||||
.text-#{$resolution}-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-#{$resolution}-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-#{$resolution}-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-#{$resolution}-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.lt-ie10) {
|
||||
@media (min-width: $screen-xs) {
|
||||
@include make-text-alignment("xs");
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include make-text-alignment("sm");
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
@include make-text-alignment("md");
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
@include make-text-alignment("lg");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
//
|
||||
// Text Responsive
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $resolution, $alias in ($screen-xs-min : xs, $screen-sm-min : sm, $screen-md-min : md, $screen-lg-min : lg, $screen-xl-min : xl){
|
||||
@media (min-width: $resolution) {
|
||||
@include make-text-alignment($alias);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
//
|
||||
// Text styling
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Text style
|
||||
//
|
||||
|
||||
.text-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.text-normal {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
// Text decoration
|
||||
//
|
||||
|
||||
.text-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text-strike {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
// Text weight
|
||||
//
|
||||
|
||||
.text-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.text-regular{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.text-medium{
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-sbold{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-bold, strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.text-ebold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.text-ubold {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
// Text spacing
|
||||
//
|
||||
|
||||
.text-spacing-0{
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.text-spacing-40 {
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.text-spacing-120{
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
@@ -0,0 +1,344 @@
|
||||
//
|
||||
// Custom Thumbnails
|
||||
// --------------------------------------------------
|
||||
|
||||
.thumbnail{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
.caption{
|
||||
padding: 0;
|
||||
color: $gray-base;
|
||||
}
|
||||
}
|
||||
|
||||
.img-thumbnail,
|
||||
.thumbnail{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Make thumbnails to fit entire container width
|
||||
.thumbnail-block {
|
||||
display: block;
|
||||
|
||||
> img,
|
||||
a > img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-classic{
|
||||
figure{
|
||||
transition: 300ms;
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
figure {
|
||||
box-shadow: 0 12px 36px rgba($black,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//thumbnail icons
|
||||
.thumbnail-max-width-370{
|
||||
max-width: 370px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.thumbnail-max-width-270{
|
||||
max-width: 270px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.thumbnail-variant-1{
|
||||
.caption{
|
||||
padding: 29px 0 0;
|
||||
}
|
||||
|
||||
.img-wrap{
|
||||
position: relative;
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
bottom: 2%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
border:2px solid $brand-primary;
|
||||
transition: 350ms ease;
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
@media (min-width: $screen-lg-min) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h4{
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.img-wrap{
|
||||
&:before{
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//.thumbnail-variant-2{
|
||||
// position: relative;
|
||||
// max-width: 352px;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
// img{
|
||||
// display: inline-block;
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// box-shadow: 0 16px 32px 8px rgba($black,.2);
|
||||
// }
|
||||
// .fa-facebook{
|
||||
// &:before{
|
||||
// left: -1px;
|
||||
// }
|
||||
// }
|
||||
// .list-inline{
|
||||
// padding-left: 5px;
|
||||
// }
|
||||
// .caption{
|
||||
// position: relative;
|
||||
// padding: 22px 15px 26px 15px;
|
||||
// max-height: 159px;
|
||||
// background-color: $white;
|
||||
//
|
||||
// hr{
|
||||
// margin: 10px 0 13px;
|
||||
// }
|
||||
//
|
||||
// * + p{
|
||||
// margin-top: 5px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
// @media (min-width: $screen-lg-min) {
|
||||
// img{
|
||||
// width: auto;
|
||||
// }
|
||||
// .caption {
|
||||
// position: absolute;
|
||||
// bottom: -52px;
|
||||
// right: 0;
|
||||
// @include display-flex;
|
||||
// @include flex-direction(column);
|
||||
// @include justify-content(center);
|
||||
// width: 263px;
|
||||
// padding: 22px 15px 26px 40px;
|
||||
//
|
||||
// .caption-inner {
|
||||
// @include transform(translateY(20px));
|
||||
// transition: 250ms;
|
||||
// .list-inline{
|
||||
// visibility: hidden;
|
||||
// opacity: 0;
|
||||
// transition: 250ms;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &:hover{
|
||||
// .caption-inner {
|
||||
// @include transform(translateY(0));
|
||||
// .list-inline{
|
||||
// visibility: visible;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
//thumbnail img
|
||||
|
||||
.thumbnail-img {
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.caption{
|
||||
margin-top: 20px;
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//img-thumbnail
|
||||
|
||||
.img-thumbnail{
|
||||
border: 13px solid $gray-darken;
|
||||
padding: 0;
|
||||
box-shadow: 0 16px 32px 8px rgba($black,.2);
|
||||
|
||||
img{
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrap-1{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrap-2{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.icon{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@include transform(translate(-50%,-50%));
|
||||
display: inline-block;
|
||||
width: 77px;
|
||||
height: 77px;
|
||||
line-height: 74px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
border:2px solid $white;
|
||||
font-size: 60px;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
transition:250ms;
|
||||
&:hover {
|
||||
@include transform(translate(-50%,-50%) scale(1.1));
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-wrap-3{
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: $screen-md-min) {
|
||||
.img-wrap-3{
|
||||
display: block;
|
||||
img{
|
||||
float: right;
|
||||
margin-top: -183px;
|
||||
margin-bottom: -125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
.img-wrap-3 {
|
||||
img {
|
||||
margin-top: -205px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.img-wrap-mod-2 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
background-color: rgba($black, .5);
|
||||
opacity: 0;
|
||||
transition: 250ms;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
@include transform(translate(-50%, -50%) scale(0));
|
||||
transition: 250ms;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.icon {
|
||||
@include transform(translate(-50%, -50%) scale(1));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-thumbnail-variant-3 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&:before{
|
||||
content: "\f2fd";
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-family: $material;
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: .3s;
|
||||
background-color: rgba($black,.78);
|
||||
}
|
||||
&:hover{
|
||||
&:before {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//thumbnail gallery
|
||||
//-----------------------------
|
||||
.thumbnail-gallery {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img{
|
||||
position: relative;
|
||||
transition: 350ms;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
box-shadow: 0 5px 23px 0 rgba(0, 0, 0, 0.15);
|
||||
@include transform(scale(1.05));
|
||||
will-change: contents;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
//
|
||||
// Toolbar Shop
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-shop {
|
||||
@include display-flex;
|
||||
@include justify-content(flex-end);
|
||||
width: 100%;
|
||||
background: $toolbar-shop-bg;
|
||||
|
||||
&-icon {
|
||||
display: inline-block;
|
||||
height: $toolbar-shop-icon-height;
|
||||
padding: $toolbar-shop-icon-padding;
|
||||
line-height: $toolbar-shop-icon-line-height;
|
||||
border-right: $toolbar-shop-icon-border-right;
|
||||
transition: .3s all ease;
|
||||
color: $toolbar-shop-icon-color;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
color: $toolbar-shop-icon-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
&-sorter{
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-pager{
|
||||
@include display-flex();
|
||||
@include justify-content(space-between);
|
||||
@include align-items(center);
|
||||
width: 100%;
|
||||
|
||||
> *{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label,select {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label{
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.select2-container{
|
||||
width: 118px!important;
|
||||
}
|
||||
|
||||
.select2-container--bootstrap .select2-selection{
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-left: 1px solid $gray-lightest;
|
||||
}
|
||||
|
||||
.select2-selection__arrow{
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered{
|
||||
color: $gray-darker;
|
||||
}
|
||||
.select2-container--bootstrap .select2-selection--single {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.select2-container--bootstrap{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.toolbar-shop-current{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
@include justify-content(space-between);
|
||||
|
||||
&-sorter{
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-pager{
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.toolbar-shop-current{
|
||||
margin-left: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Responsive unit
|
||||
// --------------------------------------------------
|
||||
|
||||
@include unit-responsive($medias, 4px, 4px);
|
||||
|
||||
// Unit Spacing
|
||||
//
|
||||
|
||||
.unit-spacing-xs {
|
||||
@include unit-spacing($medias, 7px, 12px);
|
||||
}
|
||||
.unit-spacing-md {
|
||||
@include unit-spacing($medias, 15px, 28px);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
//
|
||||
// Visibility Responsive
|
||||
// --------------------------------------------------
|
||||
|
||||
@include make-visible(block);
|
||||
@include make-visible(inline-block);
|
||||
@include make-visible(inline);
|
||||
@include make-visible(flex);
|
||||
@include make-hidden();
|
||||
|
||||
@each $alias, $resolution in (xs : ($screen-xs-min), sm : ($screen-sm-min), md : ($screen-md-min), lg : ($screen-lg-min), xl : $screen-xl-min){
|
||||
@if (length($resolution) == 2) {
|
||||
@media (min-width: nth($resolution, 1)) and (max-width: nth($resolution, 2)) {
|
||||
@include make-visible(block, $alias);
|
||||
@include make-visible(inline-block, $alias);
|
||||
@include make-visible(inline, $alias);
|
||||
@include make-visible(flex, $alias);
|
||||
@include make-hidden($alias);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media (min-width: nth($resolution, 1)) {
|
||||
@include make-visible(block, $alias);
|
||||
@include make-visible(inline-block, $alias);
|
||||
@include make-visible(inline, $alias);
|
||||
@include make-visible(flex, $alias);
|
||||
@include make-hidden($alias);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// Gradient background
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin bg-variant-custom($color, $fallback: null) {
|
||||
& {
|
||||
@if (str_index($color, linear-gradient) == null){
|
||||
background: $color;
|
||||
fill: $color;
|
||||
}
|
||||
@else{
|
||||
fill: $fallback;
|
||||
background: $fallback;
|
||||
background: -moz-#{$color};
|
||||
background: -webkit-#{$color};
|
||||
background: -o-#{$color};
|
||||
background: -ms-#{$color};
|
||||
background: #{$color};
|
||||
}
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
// Custom button variants
|
||||
//
|
||||
|
||||
@mixin button-variant-custom($clr, $bg, $bd, $clr-hover, $bg-hover, $bd-hover) {
|
||||
color: $clr;
|
||||
background-color: $bg;
|
||||
border-color: $bd;
|
||||
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: $clr-hover;
|
||||
background-color: $bg-hover;
|
||||
border-color: $bd-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
@include box-shadow($shadow-area-sm);
|
||||
|
||||
// TODO Optimize css export
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $clr-hover;
|
||||
background-color: $bg-hover;
|
||||
border-color: $bd-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
pointer-events: none;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $bg;
|
||||
background-color: $clr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
// Divider-gradient
|
||||
|
||||
@mixin divider-gradient($color-1, $color-2) {
|
||||
background: rgba($color-1,1);
|
||||
background: -moz-linear-gradient(left, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
background: -webkit-gradient(left top, right top, color-stop(0%, rgba($color-1,1)), color-stop(50%, rgba($color-2,1)), color-stop(100%, rgba($color-1,1)));
|
||||
background: -webkit-linear-gradient(left, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
background: -o-linear-gradient(left, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
background: -ms-linear-gradient(left, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
background: linear-gradient(to right, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// Element-groups
|
||||
|
||||
@mixin element-groups-custom($offset, $translate-offset) {
|
||||
-webkit-transform: translateY(-$offset);
|
||||
transform: translateY(-$offset);
|
||||
margin-bottom: -$offset;
|
||||
margin-left: -$translate-offset;
|
||||
|
||||
> *, > *:first-child {
|
||||
display: inline-block;
|
||||
margin-top: $offset;
|
||||
margin-left: $translate-offset;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
// CSS Flex Grid Framework
|
||||
|
||||
@mixin make-shell($gutter: 30px) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
|
||||
@mixin make-range($gutter: 30px) {
|
||||
margin-left: ceil(($gutter / -2));
|
||||
margin-right: floor(($gutter / -2));
|
||||
}
|
||||
|
||||
@mixin make-cell-spacing($gutter: 30px) {
|
||||
padding-left: ceil(($gutter / 2));
|
||||
padding-right: floor(($gutter / 2));
|
||||
}
|
||||
|
||||
@mixin make-cell($resolution, $count: 12) {
|
||||
.cell-#{$resolution}-preffix-0 {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.cell-#{$resolution}-#{$i} {
|
||||
@include flex-basis(percentage($i / $count));
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-preffix-#{$i} {
|
||||
margin-left: percentage($i / $count);
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-push-#{$i} {
|
||||
@include order($i);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-1-5 {
|
||||
@include flex-basis(percentage(0.2));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-fallback($resolution, $count: 12) {
|
||||
@for $i from 1 through $count {
|
||||
.cell-xs-#{$i}{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage($i / $count);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-xs-1-5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage(0.2);
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.cell-sm-#{$i}{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage($i / $count);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-sm-1-5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage(0.2);
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.cell-md-#{$i}{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage($i / $count);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-md-1-5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage(0.2);
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.cell-lg-#{$i} {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage($i / $count);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-lg-1-5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage(0.2);
|
||||
}
|
||||
|
||||
[class*="cell-xs-preffix-"],
|
||||
[class*="cell-sm-preffix-"],
|
||||
[class*="cell-md-preffix-"],
|
||||
[class*="cell-lg-preffix-"]{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-grid-system($resolution, $cell-count) {
|
||||
.range-#{$resolution}-center {
|
||||
@include justify-content(center);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-left {
|
||||
@include justify-content(flex-start);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-right {
|
||||
@include justify-content(flex-end);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-justify {
|
||||
@include justify-content(space-between);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-around {
|
||||
@include justify-content(space-around);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-top {
|
||||
@include align-items(flex-start);
|
||||
}
|
||||
|
||||
.range-#{$resolution} {
|
||||
@include flex-direction(row);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-reverse {
|
||||
@include flex-direction(row-reverse);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-middle {
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-bottom {
|
||||
@include align-items(flex-end);
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-top {
|
||||
@include align-self(flex-start);
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-middle {
|
||||
@include align-self(center);
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-bottom {
|
||||
@include align-self(flex-end);
|
||||
}
|
||||
|
||||
.range > {
|
||||
@include make-cell($resolution, $cell-count);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// CSS Flex
|
||||
|
||||
@mixin display-flex() {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flex($grow-shrink-basis) {
|
||||
-ms-flex: $grow-shrink-basis;
|
||||
-webkit-flex: $grow-shrink-basis;
|
||||
flex: $grow-shrink-basis;
|
||||
}
|
||||
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin flex-wrap($wrap) {
|
||||
-webkit-flex-wrap: $wrap;
|
||||
-ms-flex-wrap: $wrap;
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
|
||||
@mixin flex-grow($grow) {
|
||||
-webkit-flex-grow: $grow;
|
||||
-ms-flex-positive: $grow;
|
||||
flex-grow: $grow;
|
||||
}
|
||||
|
||||
@mixin flex-basis($basis) {
|
||||
-webkit-flex-basis: $basis;
|
||||
-ms-flex-preferred-size: $basis;
|
||||
flex-basis: $basis;
|
||||
max-width: $basis;
|
||||
}
|
||||
|
||||
@mixin justify-content($align) {
|
||||
-webkit-justify-content: $align;
|
||||
@if ($align == "flex-start") {
|
||||
-ms-flex-pack: start;
|
||||
} @else if ($align == "flex-end") {
|
||||
-ms-flex-pack: end;
|
||||
} @else if ($align == "space-around") {
|
||||
-ms-flex-pack: distribute;
|
||||
} @else if ($align == "space-between") {
|
||||
-ms-flex-pack: justify;
|
||||
} @else {
|
||||
-ms-flex-pack: $align;
|
||||
}
|
||||
justify-content: $align;
|
||||
}
|
||||
|
||||
@mixin align-content($align){
|
||||
-webkit-align-content: $align;
|
||||
@if ($align == "flex-start") {
|
||||
-ms-flex-pack: start;
|
||||
} @else if ($align == "flex-end") {
|
||||
-ms-flex-pack: end;
|
||||
} @else if ($align == "space-around") {
|
||||
-ms-flex-pack: distribute;
|
||||
} @else if ($align == "space-between") {
|
||||
-ms-flex-pack: justify;
|
||||
} @else if ($align == "center") {
|
||||
-ms-flex-pack: center;
|
||||
} @else if ($align == "stretch") {
|
||||
-ms-flex-pack: stretch;
|
||||
} @else {
|
||||
-ms-flex-pack: $align;
|
||||
}
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
@mixin align-items($valign) {
|
||||
-webkit-align-items: $valign;
|
||||
@if ($valign == "flex-start") {
|
||||
-ms-flex-align: start;
|
||||
} @else if ($valign == "flex-end") {
|
||||
-ms-flex-align: end;
|
||||
} @else {
|
||||
-ms-flex-align: $valign;
|
||||
}
|
||||
align-items: $valign;
|
||||
}
|
||||
|
||||
@mixin align-self($valign) {
|
||||
-webkit-align-self: $valign;
|
||||
@if ($valign == "flex-start") {
|
||||
-ms-flex-item-align: start;
|
||||
} @else if ($valign == "flex-end") {
|
||||
-ms-flex-item-align: end;
|
||||
} @else {
|
||||
-ms-flex-item-align: $valign;
|
||||
}
|
||||
align-self: $valign;
|
||||
}
|
||||
|
||||
@mixin order($order) {
|
||||
-webkit-order: $order;
|
||||
-ms-flex-order: $order;
|
||||
order: $order
|
||||
}
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
// Form validation states
|
||||
//
|
||||
@mixin form-control-validation-custom($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
|
||||
// Color the label and help text
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline,
|
||||
&.radio label,
|
||||
&.checkbox label,
|
||||
&.radio-inline label,
|
||||
&.checkbox-inline label {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control:not(.form-control-impressed) {
|
||||
&, &:focus {
|
||||
border-color: $border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-impressed{
|
||||
&, &:focus{
|
||||
box-shadow: inset 0 0 0 1px $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Set validation states also for addons
|
||||
.input-group-addon {
|
||||
color: $white;
|
||||
border-color: $border-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
// Set validation states also for buttons
|
||||
.input-group-btn{
|
||||
> .btn{
|
||||
border-color: $border-color;
|
||||
background: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Set validation states also for validation message
|
||||
.form-validation{
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
//
|
||||
// Functions
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@function rem($px-size) {
|
||||
@return str-replace(#{($px-size/100)}, px, rem);
|
||||
}
|
||||
|
||||
@function remove($list, $value, $recursive: false) {
|
||||
$result: ();
|
||||
|
||||
@for $i from 1 through length($list) {
|
||||
@if type-of(nth($list, $i)) == list and $recursive {
|
||||
$result: append($result, remove(nth($list, $i), $value, $recursive));
|
||||
} @else if nth($list, $i) != $value {
|
||||
$result: append($result, nth($list, $i));
|
||||
}
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
@function sort($list) {
|
||||
$sortedlist: ();
|
||||
@while length($list) > 0 {
|
||||
$value: nth($list, 1);
|
||||
@each $item in $list {
|
||||
@if $item < $value {
|
||||
$value: $item;
|
||||
}
|
||||
}
|
||||
$sortedlist: append($sortedlist, $value, 'space');
|
||||
$list: remove($list, $value);
|
||||
}
|
||||
@return $sortedlist;
|
||||
}
|
||||
|
||||
@function average($list) {
|
||||
$sum: 0;
|
||||
|
||||
@each $i in $list {
|
||||
$sum: $sum + $i;
|
||||
}
|
||||
|
||||
@return $sum / length($list);
|
||||
}
|
||||
|
||||
@function headings() {
|
||||
@return unquote("h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,.h5, .h6");
|
||||
}
|
||||
|
||||
@function cols($resolution) {
|
||||
$selector: ();
|
||||
@each $j in 1, 2, 3, 4, 6, 12 {
|
||||
$selector: append($selector, "> .col-#{$resolution}-#{$j}:nth-child(n + #{(12/$j)+1})", comma);
|
||||
}
|
||||
|
||||
$selector: append($selector, "> .col-#{$resolution}-8.col-#{$resolution}-preffix-2");
|
||||
|
||||
@return $selector;
|
||||
}
|
||||
|
||||
@function cells($resolution) {
|
||||
$selector: ();
|
||||
@each $j in 1, 2, 3, 4, 6, 12 {
|
||||
$selector: append($selector, "> .cell-#{$resolution}-#{$j}:nth-child(n + #{(12/$j)+1})", comma);
|
||||
}
|
||||
|
||||
$selector: append($selector, "> .cell-#{$resolution}-8.cell-#{$resolution}-preffix-2");
|
||||
|
||||
@return $selector;
|
||||
}
|
||||
|
||||
@function cols-full($resolution) {
|
||||
$selector: ();
|
||||
@for $j from 1 through 12 {
|
||||
$selector: append($selector, "> .col-#{$resolution}-#{$j}:nth-child(n)", comma);
|
||||
}
|
||||
|
||||
@return $selector;
|
||||
}
|
||||
@function cells-full($resolution) {
|
||||
$selector: ();
|
||||
@for $j from 1 through 12 {
|
||||
$selector: append($selector, "> .cell-#{$resolution}-#{$j}:nth-child(n)", comma);
|
||||
}
|
||||
|
||||
@return $selector;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the unit of a length
|
||||
// @param {Number} $number - Number to remove unit from
|
||||
// @return {Number} - Unitless number
|
||||
@function strip-unit($number) {
|
||||
@if type-of($number) == 'number' and not unitless($number) {
|
||||
@return $number / ($number * 0 + 1);
|
||||
}
|
||||
|
||||
@return $number;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// Indent Utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin indent-responsive($preffix, $postfix, $rules, $medias, $offsets) {
|
||||
@if ($postfix != '' and $postfix != null) {
|
||||
$postfix: #{$postfix}-;
|
||||
}
|
||||
|
||||
@if ($preffix != '' and $preffix != null) {
|
||||
$preffix: #{$preffix}-;
|
||||
}
|
||||
|
||||
@each $resolution, $alias in $medias {
|
||||
@if ($resolution == 0) {
|
||||
@each $offset in $offsets {
|
||||
.#{$preffix}#{$postfix}#{strip-unit($offset)} {
|
||||
@each $rule in $rules {
|
||||
#{$rule}: $offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@media (min-width: $resolution) {
|
||||
@each $offset in $offsets {
|
||||
.#{$preffix}#{$alias}-#{$postfix}#{strip-unit($offset)} {
|
||||
@each $rule in $rules {
|
||||
#{$rule}: $offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
// Pull Utilities
|
||||
|
||||
@mixin make-pull-alignment($resolution: null) {
|
||||
@if ($resolution == null) {
|
||||
$resolution: ''
|
||||
} @else {
|
||||
$resolution: str_insert($resolution, '-', str_length($resolution) + 1);
|
||||
}
|
||||
.pull-#{$resolution}left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-#{$resolution}base {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.pull-#{$resolution}right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
//
|
||||
// Rules Utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin rules-responsive($preffix, $medias, $postfix) {
|
||||
@if ($preffix != '' and $preffix != null) {
|
||||
$preffix: #{$preffix}-;
|
||||
}
|
||||
|
||||
@each $resolution, $alias in $medias {
|
||||
@if ($resolution == 0) {
|
||||
@each $offset in $offsets {
|
||||
.#{$preffix}#{$postfix} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@media (min-width: $resolution) {
|
||||
@each $offset in $offsets {
|
||||
.#{$preffix}#{$alias}-#{$postfix} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// Text Utilities
|
||||
|
||||
@mixin make-text-alignment($resolution: null) {
|
||||
@if ($resolution == null) {
|
||||
$resolution: ''
|
||||
} @else {
|
||||
$resolution: str_insert($resolution, '-', str_length($resolution) + 1);
|
||||
}
|
||||
.text-#{$resolution}left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-#{$resolution}center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-#{$resolution}right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-#{$resolution}justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.text-#{$resolution}nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-#{$resolution}normal {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// Triangle
|
||||
|
||||
@mixin triangle($dir, $w, $h, $clr) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
|
||||
@if $dir == top {
|
||||
border-width: 0 ceil($w/2) $h ceil($w/2);
|
||||
border-color: transparent transparent $clr transparent;
|
||||
} @else if $dir == bottom {
|
||||
border-width: $h ceil($w/2) 0 ceil($w/2);
|
||||
border-color: $clr transparent transparent transparent;
|
||||
} @else if $dir == left {
|
||||
border-width: ceil($h/2) $w ceil($h/2) 0;
|
||||
border-color: transparent $clr transparent transparent;
|
||||
} @else if $dir == right {
|
||||
border-width: ceil($h/2) 0 ceil($h/2) $w;
|
||||
border-color: transparent transparent transparent $clr;
|
||||
} @else if $dir == top_left {
|
||||
border-width: $w $w 0 0;
|
||||
border-color: $clr transparent transparent transparent;
|
||||
} @else if $dir == top_right {
|
||||
border-width: 0 $w $w 0;
|
||||
border-color: transparent $clr transparent transparent;
|
||||
} @else if $dir == bottom_right {
|
||||
border-width: 0 0 $w $w;
|
||||
border-color: transparent transparent $clr transparent;
|
||||
} @else if $dir == bottom_left {
|
||||
border-width: $w 0 0 $w;
|
||||
border-color: transparent transparent transparent $clr;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
// Unit Utilities
|
||||
@mixin unit-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint){
|
||||
.unit#{$breakpoint}-align-center {
|
||||
@include justify-content(center);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-align-left {
|
||||
@include justify-content(flex-start);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-align-right {
|
||||
@include justify-content(flex-end);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-align-justify {
|
||||
@include justify-content(space-between);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-align-around {
|
||||
@include justify-content(space-around);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-top{
|
||||
@include align-items(flex-start);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-middle{
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-bottom{
|
||||
@include align-items(flex-end);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-grow-1{
|
||||
@include flex-grow(1);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-grow-2{
|
||||
@include flex-grow(2);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-grow-3{
|
||||
@include flex-grow(3);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-top{
|
||||
@include align-self(flex-start);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-middle{
|
||||
@include align-self(center);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-bottom{
|
||||
@include align-self(flex-end);
|
||||
}
|
||||
.unit-item#{$breakpoint}-narrow{
|
||||
@include flex-grow(0);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-standart{
|
||||
@include flex-grow(1);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-wide{
|
||||
@include flex-grow(2);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint},
|
||||
.unit#{$breakpoint}-vertical {
|
||||
@include flex-direction(column);
|
||||
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
> .unit-left + .unit-right,
|
||||
> .unit-left + .unit-body {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-t;
|
||||
}
|
||||
|
||||
> .unit-body + .unit-right {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-b;
|
||||
}
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-horizontal {
|
||||
@include flex-direction(row);
|
||||
|
||||
> .unit-left + .unit-right,
|
||||
> .unit-left + .unit-body {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-l;
|
||||
}
|
||||
|
||||
> .unit-body + .unit-right {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-r;
|
||||
}
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-inverse {
|
||||
@include flex-direction(column-reverse);
|
||||
|
||||
&,
|
||||
&.unit#{$breakpoint}-vertical {
|
||||
@include flex-direction(column-reverse);
|
||||
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: $spacing-t;
|
||||
}
|
||||
|
||||
> [class*='unit-']:last-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.unit#{$breakpoint}-horizontal {
|
||||
@include flex-direction(row-reverse);
|
||||
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-l;
|
||||
}
|
||||
|
||||
> [class*='unit-']:last-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unit-spacing-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint){
|
||||
&.unit#{$breakpoint},
|
||||
&.unit#{$breakpoint}-vertical {
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
> .unit-left + .unit-right,
|
||||
> .unit-left + .unit-body {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-t;
|
||||
}
|
||||
|
||||
> .unit-body + .unit-right {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-b;
|
||||
}
|
||||
}
|
||||
|
||||
&.unit#{$breakpoint}-horizontal {
|
||||
> .unit-left + .unit-right,
|
||||
> .unit-left + .unit-body {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-l;
|
||||
}
|
||||
|
||||
> .unit-body + .unit-right {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-r;
|
||||
}
|
||||
}
|
||||
|
||||
&.unit#{$breakpoint}-inverse {
|
||||
&,
|
||||
&.unit#{$breakpoint}-vertical {
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: $spacing-t;
|
||||
}
|
||||
|
||||
> [class*='unit-']:last-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.unit#{$breakpoint}-horizontal {
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-l;
|
||||
}
|
||||
|
||||
> [class*='unit-']:last-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unit-spacing($medias, $spacing-t, $spacing-r:$spacing-t, $spacing-b:$spacing-t, $spacing-l:$spacing-r){
|
||||
@each $resolution, $alias in $medias {
|
||||
@if ($alias != '' and $alias != null) {
|
||||
$breakpoint: -#{$alias};
|
||||
@media (min-width: $resolution) {
|
||||
@include unit-spacing-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint);
|
||||
}
|
||||
} @else {
|
||||
$breakpoint: '';
|
||||
@include unit-spacing-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unit-responsive($medias, $spacing-t, $spacing-r:$spacing-t, $spacing-b:$spacing-t, $spacing-l:$spacing-r) {
|
||||
.unit {
|
||||
@include display-flex();
|
||||
@include flex(0 1 100%);
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
.unit-body{
|
||||
@include flex(0 1 auto);
|
||||
}
|
||||
|
||||
.unit-left,
|
||||
.unit-right{
|
||||
@include flex(0 0 auto);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $resolution, $alias in $medias {
|
||||
@if ($alias != '' and $alias != null) {
|
||||
$breakpoint: -#{$alias};
|
||||
@media (min-width: $resolution) {
|
||||
@include unit-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint);
|
||||
}
|
||||
} @else {
|
||||
$breakpoint: '';
|
||||
@include unit-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
// Custom CSS Vendors
|
||||
|
||||
@mixin transform($trfm) {
|
||||
-webkit-transform: $trfm;
|
||||
transform: $trfm;
|
||||
}
|
||||
|
||||
@mixin animation($anim) {
|
||||
-webkit-animation: $anim;
|
||||
animation: $anim;
|
||||
}
|
||||
|
||||
@mixin keyframes($name) {
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sprite-animation() {
|
||||
@include keyframes(sprite-animation) {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// Visibility Utilities
|
||||
|
||||
@mixin make-visible( $type: block, $resolution: null){
|
||||
@if ($resolution == null) {
|
||||
$resolution: ''
|
||||
} @else {
|
||||
$resolution: str_insert($resolution, '-', str_length($resolution) + 1);
|
||||
}
|
||||
|
||||
@if ($type == flex) {
|
||||
.reveal-#{$resolution}#{$type}{
|
||||
display: -ms-flexbox !important;
|
||||
display: -webkit-flex !important;
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
.reveal-#{$resolution}#{$type}{
|
||||
display: $type !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-hidden($resolution: null){
|
||||
@if ($resolution == null) {
|
||||
$resolution: ''
|
||||
} @else {
|
||||
$resolution: str_insert($resolution, '-', 0);
|
||||
}
|
||||
|
||||
.veil#{$resolution}{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user