Portfolio Section
parent
2a66c7f636
commit
da56d1080f
|
|
@ -0,0 +1,5 @@
|
|||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/FASHION.iml" filepath="$PROJECT_DIR$/.idea/FASHION.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
//
|
||||
// Background Styles //
|
||||
//
|
||||
.bg-image {
|
||||
position: relative;
|
||||
background-position: center center;
|
||||
background-attachment: scroll;
|
||||
@include background-size(cover);
|
||||
background-repeat: no-repeat;
|
||||
&[class^="bg-image-gradient-"], &[class*=" bg-image-gradient-"] {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.bg-image-gradient-top { &:before { background-image: linear-gradient(to top, $color-white, $color-white-02); } }
|
||||
&.bg-image-gradient-right { &:before { background-image: linear-gradient(to right, $color-white, $color-white-02); } }
|
||||
&.bg-image-gradient-bottom { &:before { background-image: linear-gradient(to bottom, $color-white, $color-white-02); } }
|
||||
&.bg-image-gradient-left { &:before { background-image: linear-gradient(to left, $color-white, $color-white-02); } }
|
||||
&.bg-image-gradient-black-top { &:before { background-image: linear-gradient(to top, $color-black, $color-black-02); } }
|
||||
&.bg-image-gradient-black-right { &:before { background-image: linear-gradient(to right, $color-black, $color-black-02); } }
|
||||
&.bg-image-gradient-black-bottom { &:before { background-image: linear-gradient(to bottom, $color-black, $color-black-02); } }
|
||||
&.bg-image-gradient-black-left { &:before { background-image: linear-gradient(to left, $color-black, $color-black-02); } }
|
||||
}
|
||||
|
||||
.bg-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
video {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,785 @@
|
|||
//
|
||||
// Base Styles //
|
||||
//
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
//
|
||||
// Container, Row //
|
||||
//
|
||||
.container, .container-fluid {
|
||||
position: relative;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.row {
|
||||
margin-bottom: -30px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.form-row {
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 0;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Column Spacing //
|
||||
//
|
||||
@include breakpoint-above(md) {
|
||||
.col-spacing-70,
|
||||
.col-spacing-60,
|
||||
.col-spacing-50,
|
||||
.col-spacing-40 {
|
||||
.row {
|
||||
&:not([class^="col-spacing-"], [class*=" col-spacing-"]) {
|
||||
margin-right: -15px;
|
||||
margin-bottom: -30px;
|
||||
margin-left: -15px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 30px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.col-spacing-70 {
|
||||
margin-right: -35px;
|
||||
margin-bottom: -70px;
|
||||
margin-left: -35px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 70px;
|
||||
padding: 0 35px;
|
||||
}
|
||||
}
|
||||
.col-spacing-60 {
|
||||
margin-right: -30px;
|
||||
margin-bottom: -60px;
|
||||
margin-left: -30px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 60px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
.col-spacing-50 {
|
||||
margin-right: -25px;
|
||||
margin-bottom: -50px;
|
||||
margin-left: -25px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 50px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
}
|
||||
.col-spacing-40 {
|
||||
margin-right: -20px;
|
||||
margin-bottom: -40px;
|
||||
margin-left: -20px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
.container-fluid {
|
||||
.col-spacing-70 {
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.col-spacing-60 {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.col-spacing-50 {
|
||||
margin-right: -5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
.col-spacing-40 {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-spacing-20,
|
||||
.col-spacing-10,
|
||||
.col-spacing-0 {
|
||||
.row {
|
||||
margin-right: -15px;
|
||||
margin-bottom: -30px;
|
||||
margin-left: -15px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 30px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col-spacing-20 {
|
||||
margin-right: -10px;
|
||||
margin-bottom: -20px;
|
||||
margin-left: -10px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.col-spacing-10 {
|
||||
margin-right: -5px;
|
||||
margin-bottom: -10px;
|
||||
margin-left: -5px;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
.col-spacing-0 {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.container-fluid {
|
||||
.col-spacing-20 {
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.col-spacing-10 {
|
||||
margin-right: -25px;
|
||||
margin-left: -25px;
|
||||
}
|
||||
.col-spacing-0 {
|
||||
margin-right: -30px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Positioning //
|
||||
//
|
||||
.position-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%,-50%));
|
||||
}
|
||||
.position-middle {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
margin: 0 auto;
|
||||
}
|
||||
.position-top, .position-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.position-top {
|
||||
top: 30px;
|
||||
}
|
||||
.position-bottom {
|
||||
bottom: 30px;
|
||||
}
|
||||
.container, .container-fluid {
|
||||
.position-top, .position-bottom {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Mark //
|
||||
//
|
||||
mark {
|
||||
background: $bg-grey;
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
//
|
||||
// iframe //
|
||||
//
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Pre(Preformatted text) //
|
||||
//
|
||||
pre {
|
||||
border: 1px solid $color-black-01;
|
||||
border-radius: 0.375em;
|
||||
padding: 6px 20px;
|
||||
color: $color-primary;
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
pre {
|
||||
border-color: $color-white-02;
|
||||
color: $color-white-06;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Badge Styles //
|
||||
//
|
||||
.badge { padding: 4px 6px; vertical-align: middle; }
|
||||
.badge-xs { padding: 4px 6px }
|
||||
.badge-sm { padding: 8px 12px }
|
||||
.badge-md { padding: 10px 16px; font-size: 80%; }
|
||||
.badge-lg { padding: 14px 20px; font-size: 90%; }
|
||||
.badge-xl { padding: 18px 30px; font-size: 100%; }
|
||||
|
||||
//
|
||||
// Blockquote Styles //
|
||||
//
|
||||
.blockquote {
|
||||
background: $bg-grey-lighter;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid $color-black-01;
|
||||
padding: 24px 30px;
|
||||
@include breakpoint-less(sm) {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
&.font-small {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
}
|
||||
&.font-large {
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
.blockquote-footer {
|
||||
margin-top: 10px;
|
||||
color: $color-dark;
|
||||
&:before {
|
||||
padding-right: 5px;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
background: transparent;
|
||||
padding: 16px 30px;
|
||||
@include breakpoint-less(sm) {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 20px 20px 20px 40px;
|
||||
@include breakpoint-less(sm) {
|
||||
padding: 16px 16px 16px 36px;
|
||||
}
|
||||
&:before {
|
||||
content: '\f10d';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: $color-black-01;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.blockquote {
|
||||
background: $color-white-01;
|
||||
border-color: $color-white-02;
|
||||
.blockquote-footer {
|
||||
color: $color-white;
|
||||
}
|
||||
&.style-2 {
|
||||
background: transparent;
|
||||
border-color: $color-white-02;
|
||||
}
|
||||
&.style-3 {
|
||||
background: transparent;
|
||||
&:before {
|
||||
color: $color-white-02;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Breadcrumb Styles //
|
||||
//
|
||||
.breadcrumb {
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
margin: 0 0 -10px;
|
||||
padding: 0;
|
||||
.breadcrumb-item {
|
||||
display: inline-block;
|
||||
font: 400 13px $font-family-primary;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
&:before {
|
||||
color: $color-black-02;
|
||||
}
|
||||
&.active {
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
a {
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.breadcrumb {
|
||||
.breadcrumb-item {
|
||||
&:before {
|
||||
color: $color-white-03;
|
||||
}
|
||||
&.active {
|
||||
color: $color-white-05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Card //
|
||||
//
|
||||
.card {
|
||||
border: 1px solid $color-black-01;
|
||||
}
|
||||
|
||||
//
|
||||
// Dropdown Styles //
|
||||
//
|
||||
.dropdown, .btn-group {
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@include box-shadow(0 6px 36px -4px rgba(22,24,26,0.14));
|
||||
padding: 15px 20px;
|
||||
.dropdown-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: $color-dark;
|
||||
font: 300 15px $font-family-primary;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
@include transition(linear 0.1s);
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
&:hover, &:focus, &:active {
|
||||
background: transparent;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Modal Styles //
|
||||
//
|
||||
.modal {
|
||||
&.fade {
|
||||
.modal-dialog {
|
||||
@include transition(ease-out 0.2s);
|
||||
@include transform(translate(0) scale(0.98));
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
@include transform(translate(0) scale(1.0));
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
@include box-shadow(0 6px 36px -4px rgba(22,24,26,0.3));
|
||||
border: 0;
|
||||
.modal-header { border-bottom: 1px solid $color-black-01; }
|
||||
.modal-footer { border-top: 1px solid $color-black-01; }
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Nav Styles //
|
||||
//
|
||||
.nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.nav-item {
|
||||
margin: 0 30px 0 0;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
color: $color-primary;
|
||||
@include transition(linear 0.1s);
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
color: $color-primary;
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
&.active, &:hover {
|
||||
color: $color-dark;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-tabs {
|
||||
border-bottom: 1px solid $border-grey;
|
||||
.nav-item {
|
||||
margin: 0 0 -1px;
|
||||
.nav-link {
|
||||
background: transparent;
|
||||
padding: 10px 20px;
|
||||
color: $color-primary;
|
||||
&:hover {
|
||||
border-color: $border-grey;
|
||||
}
|
||||
&.active {
|
||||
border-color: $border-grey $border-grey $color-white;
|
||||
color: $color-dark;
|
||||
}
|
||||
&.disabled {
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-pills {
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
.nav-link {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.nav-link.active,
|
||||
.show .nav-link {
|
||||
background: $color-dark;
|
||||
color: $color-white;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tabs {
|
||||
display: inline-block;
|
||||
border: 1px solid $border-grey;
|
||||
border-radius: 0.375em;
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
.nav-link {
|
||||
padding: 10px 20px;
|
||||
border-right: 1px solid $border-grey;
|
||||
}
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-custom {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
background: $color-dark;
|
||||
height: 1px;
|
||||
@include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||
}
|
||||
&.active {
|
||||
&:after {
|
||||
width: 100%;
|
||||
@include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $color-white-08;
|
||||
&.active, &:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-tabs {
|
||||
border-color: $color-white-02;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $color-white-08;
|
||||
&.active, &:hover {
|
||||
border-color: $color-white-02 $color-white-02 transparent;
|
||||
}
|
||||
&.active {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-pills {
|
||||
.nav-item {
|
||||
.nav-link.active,
|
||||
.show .nav-link {
|
||||
background: $color-white;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tabs {
|
||||
border: 1px solid $color-white-02;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
border-right: 1px solid $color-white-02;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-custom {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&:after { background: $color-white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Pagination Styles //
|
||||
//
|
||||
.pagination {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.page-item {
|
||||
margin: 0 6px 0 0;
|
||||
text-align: center;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.page-link {
|
||||
background: transparent;
|
||||
min-width: 31px;
|
||||
height: 31px;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
color: $color-primary;
|
||||
font-size: 14px;
|
||||
line-height: 31px;
|
||||
@include transition(ease-out 0.12s);
|
||||
&:hover {
|
||||
background: $button-grey;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background: $button-grey;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-sm {
|
||||
.page-item {
|
||||
.page-link {
|
||||
min-width: 27px;
|
||||
height: 27px;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-lg {
|
||||
.page-item {
|
||||
.page-link {
|
||||
min-width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Pagination - Hover style 2 //
|
||||
//
|
||||
&.hover-style-2 {
|
||||
.page-item {
|
||||
.page-link {
|
||||
&:hover {
|
||||
background: $border-grey;
|
||||
border-color: $border-grey;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background: $color-dark;
|
||||
border-color: $color-dark;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.pagination {
|
||||
.page-item {
|
||||
.page-link {
|
||||
color: $color-white-07;
|
||||
&:hover {
|
||||
background: $color-white-01;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background: $color-white-01;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.hover-style-2 {
|
||||
.page-item {
|
||||
.page-link {
|
||||
&:hover {
|
||||
background: $color-white;
|
||||
border-color: $color-white;
|
||||
color: $color-black-09;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background: $color-white;
|
||||
border-color: $color-white;
|
||||
color: $color-black-09;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Popover Styles //
|
||||
//
|
||||
.popover {
|
||||
border: 0;
|
||||
@include box-shadow(0 0 12px 0 rgba(0,0,0,0.08));
|
||||
.arrow {
|
||||
&:before { border: 0; }
|
||||
}
|
||||
.popover-header {
|
||||
background: transparent;
|
||||
padding: 15px 20px;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.popover-body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Table Styles //
|
||||
//
|
||||
.table {
|
||||
td, th { border-top: 1px solid $border-grey; }
|
||||
thead {
|
||||
th { border-bottom: 2px solid $border-grey; }
|
||||
}
|
||||
|
||||
&.table-dark {
|
||||
background: $bg-dark-lighter;
|
||||
thead {
|
||||
th { border-bottom: 2px solid $color-white-01; }
|
||||
}
|
||||
td, th { border-top: 1px solid $color-white-01; }
|
||||
}
|
||||
&.table-bordered {
|
||||
td, th { border: 1px solid $border-grey; }
|
||||
&.table-dark {
|
||||
td, th { border: 1px solid $color-white-01; }
|
||||
}
|
||||
}
|
||||
|
||||
.thead-dark {
|
||||
th { background: $bg-dark-lighter; border-color: $color-white-01; }
|
||||
}
|
||||
.thead-light {
|
||||
th { background: $button-grey-lighter; }
|
||||
}
|
||||
|
||||
.table-active {
|
||||
td, th { background: $button-grey-darker; }
|
||||
}
|
||||
.table-secondary {
|
||||
td, th { background: $button-grey; }
|
||||
}
|
||||
.table-light {
|
||||
td, th { background: $bg-grey-lighter; }
|
||||
}
|
||||
.table-dark {
|
||||
td, th { background: $button-grey; }
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Scroll To Top button //
|
||||
//
|
||||
.scrolltotop {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
@include transform(translateY(20px));
|
||||
z-index: 992;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
@include transition(ease-out 0.12s);
|
||||
&.scrolltotop-show {
|
||||
@include transform(translateY(0));
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Scroll Animations Libary //
|
||||
//
|
||||
[data-sal] {
|
||||
@include transition-duration(0.5s);
|
||||
}
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
//
|
||||
// Form Styles //
|
||||
//
|
||||
.form-row {
|
||||
margin-right: -8px;
|
||||
margin-left: -8px;
|
||||
div[class^="col-"], div[class*=" col-"], .col {
|
||||
margin: 0;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
border: 1px solid $color-black-01;
|
||||
margin-bottom: 1rem;
|
||||
padding: 15px 20px;
|
||||
box-shadow: none;
|
||||
font: 400 15px $font-family-primary;
|
||||
line-height: 1.4;
|
||||
@include transition(ease-out 0.16s);
|
||||
&:focus, &:active {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
height: 140px;
|
||||
}
|
||||
input, textarea, .form-control {
|
||||
color: $color-primary;
|
||||
&::-webkit-input-placeholder { color: $color-primary-lighter; }
|
||||
&::-moz-placeholder { color: $color-primary-lighter; }
|
||||
&:-ms-placeholder { color: $color-primary-lighter; }
|
||||
&::-ms-placeholder { color: $color-primary-lighter; }
|
||||
&::placeholder { color: $color-primary-lighter; }
|
||||
&:focus {
|
||||
border-color: $color-black-02;
|
||||
}
|
||||
}
|
||||
input {
|
||||
&[type="checkbox"],
|
||||
&[type="radio"] {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
background: transparent;
|
||||
height: auto;
|
||||
border: 1px solid $color-black-01;
|
||||
border-radius: 0;
|
||||
padding: 15px 20px;
|
||||
font: 400 15px $font-family-primary;
|
||||
line-height: 1.4;
|
||||
&:focus {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:read-only {
|
||||
background: $button-grey;
|
||||
border: 0;
|
||||
}
|
||||
&.form-control-sm {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
&.form-control-lg {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
.form-control-plaintext {
|
||||
border: 0;
|
||||
}
|
||||
.form-check-input:disabled ~ .form-check-label {
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
.required {
|
||||
&:after {
|
||||
content: '*';
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Select //
|
||||
//
|
||||
select {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.custom-select {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
min-width: 160px;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
padding: 15px 20px;
|
||||
border-color: $color-black-01;
|
||||
color: $color-primary;
|
||||
font: 400 15px $font-family-primary;
|
||||
line-height: 1.4;
|
||||
@include transition(ease-out 0.16s);
|
||||
&:focus {
|
||||
border-color: $color-black-02;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.custom-select-sm {
|
||||
height: auto;
|
||||
padding: 10px 15px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
&.custom-select-lg {
|
||||
height: auto;
|
||||
padding: 15px 20px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
&.select-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Form Styles 2,3,4 //
|
||||
//
|
||||
form.form-style-3, .form-style-3,
|
||||
form.form-style-4, .form-style-4 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 0 10px;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
form.form-style-2, .form-style-2,
|
||||
form.form-style-4, .form-style-4 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
&:focus {
|
||||
border-color: $color-black-09;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Form Style 5 //
|
||||
//
|
||||
form.form-style-5, .form-style-5 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
background: $bg-grey;
|
||||
border: 0;
|
||||
&:focus {
|
||||
background: $button-grey-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-grey'], div[class*=' bg-grey'] {
|
||||
form.form-style-5, .form-style-5 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
background: $color-white;
|
||||
&:focus {
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Forms on Dark background //
|
||||
//
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
input, textarea, .form-control {
|
||||
background: transparent;
|
||||
border-color: $color-white-02;
|
||||
color: $color-white-07;
|
||||
&::-webkit-input-placeholder { color: $color-white-05; }
|
||||
&::-moz-placeholder { color: $color-white-05; }
|
||||
&:-ms-placeholder { color: $color-white-05; }
|
||||
&::-ms-placeholder { color: $color-white-05; }
|
||||
&::placeholder { color: $color-white-05; }
|
||||
&:focus {
|
||||
border-color: $color-white-03;
|
||||
}
|
||||
}
|
||||
.custom-select {
|
||||
background: transparent;
|
||||
border-color: $color-white-02;
|
||||
color: $color-white-07;
|
||||
&:focus {
|
||||
border-color: $color-white-03;
|
||||
}
|
||||
}
|
||||
form.form-style-2, .form-style-2,
|
||||
form.form-style-4, .form-style-4 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
&:focus {
|
||||
border-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
form.form-style-5, .form-style-5 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
background: $color-white-01;
|
||||
border: 0;
|
||||
&:focus {
|
||||
background: $color-white-02;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
//
|
||||
// Image Styles //
|
||||
//
|
||||
img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
&[class^='img-circle'], &[class*=' img-circle'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.img-circle-xs {
|
||||
min-width: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
&.img-circle-sm {
|
||||
min-width: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
&.img-circle-md {
|
||||
min-width: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
&.img-circle-lg {
|
||||
min-width: 120px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
&.img-circle-xl {
|
||||
min-width: 140px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
&.img-circle-2xl {
|
||||
min-width: 160px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
&.img-circle-3xl {
|
||||
min-width: 180px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
//
|
||||
// List styles //
|
||||
//
|
||||
ul {
|
||||
margin: 0 0 -7px;
|
||||
li {
|
||||
margin: 0 0 7px;
|
||||
ul, ol {
|
||||
margin-top: 7px;
|
||||
}
|
||||
a {
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
}
|
||||
&[class*=' list-'], &[class^='list-'] {
|
||||
padding: 0;
|
||||
}
|
||||
&.list-unstyled,
|
||||
&.list-dash,
|
||||
&.list-icon {
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
&.list-dash {
|
||||
li {
|
||||
&:before {
|
||||
content: '-';
|
||||
padding-right: 7px;
|
||||
}
|
||||
a {
|
||||
&:hover {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Horizontal List //
|
||||
//
|
||||
&[class*=' list-inline'], &[class^='list-inline'] {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.list-inline {
|
||||
margin-right: -7px;
|
||||
margin-left: -7px;
|
||||
li {
|
||||
padding: 0 7px;
|
||||
}
|
||||
}
|
||||
&.list-inline-sm {
|
||||
margin-right: -3px;
|
||||
margin-left: -3px;
|
||||
li {
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
&.list-inline-lg {
|
||||
margin-right: -14px;
|
||||
margin-left: -14px;
|
||||
li {
|
||||
padding: 0 14px;
|
||||
}
|
||||
}
|
||||
&.list-inline-dash {
|
||||
li { &:after { content: '-'; } }
|
||||
}
|
||||
&.list-inline-slash {
|
||||
li { &:after { content: '/'; } }
|
||||
}
|
||||
&.list-inline-vbar {
|
||||
li { &:after { content: '|'; } }
|
||||
}
|
||||
&.list-inline-dash,
|
||||
&.list-inline-slash,
|
||||
&.list-inline-vbar {
|
||||
li {
|
||||
&:after {
|
||||
padding: 0 3px 0 6px;
|
||||
}
|
||||
&:last-child {
|
||||
&:after {
|
||||
content: '';
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Icon List //
|
||||
//
|
||||
&.list-icon {
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
a {
|
||||
&:hover {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
&.list-icon-check {
|
||||
li { &:before { content: "\f00c"; } }
|
||||
}
|
||||
&.list-icon-close {
|
||||
li { &:before { content: "\f00d"; } }
|
||||
}
|
||||
&.list-icon-plus {
|
||||
li { &:before { content: "\f067"; } }
|
||||
}
|
||||
&.list-icon-arrow {
|
||||
li { padding-left: 16px; &:before { content: "\f105"; } }
|
||||
}
|
||||
&.list-icon-caret {
|
||||
li { padding-left: 16px; &:before { content: "\f0da"; } }
|
||||
}
|
||||
&.list-icon-globe {
|
||||
li { &:before { content: "\f0ac"; } }
|
||||
}
|
||||
&.list-icon-circle-check {
|
||||
li { &:before { content: "\f058"; } }
|
||||
}
|
||||
&.list-icon-circle-plus {
|
||||
li { &:before { content: "\f055"; } }
|
||||
}
|
||||
&.list-icon-circle-arrow {
|
||||
li { &:before { content: "\f138"; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
ol {
|
||||
margin: 0 0 -7px;
|
||||
li {
|
||||
margin: 0 0 7px;
|
||||
}
|
||||
li {
|
||||
ul, ol {
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
&.list-ordered {
|
||||
list-style: none;
|
||||
counter-reset: custom-counter;
|
||||
padding-left: 0;
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 34px;
|
||||
counter-increment: custom-counter;
|
||||
&::before {
|
||||
content: counter(custom-counter);
|
||||
}
|
||||
ol {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&.style-2,
|
||||
&.style-3,
|
||||
&.style-4,
|
||||
&.style-5 {
|
||||
li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
li {
|
||||
&::before {
|
||||
background: $color-black-01;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
li {
|
||||
&::before {
|
||||
background: $color-black-09;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
li {
|
||||
&::before {
|
||||
border: 1px solid $color-black-02;
|
||||
color: $color-black-05;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-5 {
|
||||
li {
|
||||
&::before {
|
||||
border: 1px solid $color-black-09;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
ol {
|
||||
&.list-ordered {
|
||||
&.style-2 {
|
||||
li {
|
||||
&::before {
|
||||
background: $color-white-02;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
li {
|
||||
&::before {
|
||||
background: $color-white;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
li {
|
||||
&::before {
|
||||
border-color: $color-white-03;
|
||||
color: $color-white-06;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-5 {
|
||||
li {
|
||||
&::before {
|
||||
border-color: $color-white;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
ol {
|
||||
margin: 0 0 -5px;
|
||||
li {
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 0 0 -5px;
|
||||
li {
|
||||
margin: 0 0 5px;
|
||||
ul, ol {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
&.list-dash {
|
||||
li {
|
||||
&:before {
|
||||
content: '-';
|
||||
padding-right: 6px;
|
||||
}
|
||||
a {
|
||||
&:hover {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.list-inline-lg {
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
li {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
&.list-inline {
|
||||
margin-right: -6px;
|
||||
margin-left: -6px;
|
||||
li {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
&.list-inline-sm {
|
||||
margin-right: -2px;
|
||||
margin-left: -2px;
|
||||
li {
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
//
|
||||
// Typography Styles //
|
||||
//
|
||||
body {
|
||||
color: $color-primary;
|
||||
font-family: $font-family-primary;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
@include breakpoint-less(md) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0 0 10px;
|
||||
letter-spacing: -0.3px;
|
||||
color: $color-dark;
|
||||
font-family: $font-family-tertiary;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.66em; /* 40px */
|
||||
line-height: 1.5; /* 60px */
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.13em; /* 32px */
|
||||
line-height: 1.625; /* 52px */
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.86em; /* 28px */
|
||||
line-height: 1.65; /* 46px */
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.6em; /* 24px */
|
||||
line-height: 1.7; /* 40px */
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.33em; /* 20px */
|
||||
line-height: 1.8; /* 36px */
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.06em; /* 16px */
|
||||
line-height: 1.87; /* 30px */
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.86; /* 28px */
|
||||
@include breakpoint-less(md) {
|
||||
line-height: 1.75; /* 24.5px */
|
||||
}
|
||||
}
|
||||
|
||||
.display-1 { font-size: 6.4em; } /* 96px */
|
||||
.display-2 { font-size: 5.86em; } /* 88px */
|
||||
.display-3 { font-size: 4.8em; } /* 72px */
|
||||
.display-4 { font-size: 3.73em; } /* 56px */
|
||||
@include breakpoint-less(sm) {
|
||||
.display-1 { font-size: 5.73em; } /* 86px */
|
||||
.display-2 { font-size: 5.33em; } /* 80px */
|
||||
.display-3 { font-size: 4.26em; } /* 64px */
|
||||
.display-4 { font-size: 3.2em; } /* 48px */
|
||||
}
|
||||
@include breakpoint-less(xs) {
|
||||
.display-1 { font-size: 5.33em; } /* 80px */
|
||||
.display-2 { font-size: 4.8em; } /* 72px */
|
||||
.display-3 { font-size: 3.73em; } /* 56px */
|
||||
.display-4 { font-size: 3.2em; } /* 48px */
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.font-small {
|
||||
font-size: 0.875em; /* 13px */
|
||||
line-height: 1.85; /* 24px */
|
||||
@include breakpoint-less(md) {
|
||||
font-size: 0.85em; /* 12px */
|
||||
line-height: 1.66; /* 20px */
|
||||
}
|
||||
}
|
||||
.font-large {
|
||||
font-size: 1.13em; /* 17px */
|
||||
line-height: 1.8; /* 30px */
|
||||
@include breakpoint-less(md) {
|
||||
font-size: 1.145em; /* 16px */
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.font-lg-large {
|
||||
font-size: 1.13em; /* 17px */
|
||||
line-height: 1.8; /* 30px */
|
||||
}
|
||||
.font-lg-small {
|
||||
font-size: 0.875em; /* 13px */
|
||||
line-height: 1.85; /* 24px */
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Letter Spacing //
|
||||
//
|
||||
.letter-spacing-1, .letter-spacing-1px { letter-spacing: 1px; }
|
||||
.letter-spacing-2, .letter-spacing-2px { letter-spacing: 2px; }
|
||||
.letter-spacing-3, .letter-spacing-3px { letter-spacing: 3px; }
|
||||
.letter-spacing-4, .letter-spacing-4px { letter-spacing: 4px; }
|
||||
.letter-spacing-5, .letter-spacing-5px { letter-spacing: 5px; }
|
||||
|
||||
//
|
||||
// Line Heights //
|
||||
//
|
||||
.line-height-100 { line-height: 100%; }
|
||||
.line-height-110 { line-height: 110%; }
|
||||
.line-height-120 { line-height: 120%; }
|
||||
.line-height-130 { line-height: 130%; }
|
||||
.line-height-140 { line-height: 140%; }
|
||||
.line-height-150 { line-height: 150%; }
|
||||
.line-height-160 { line-height: 160%; }
|
||||
.line-height-170 { line-height: 170%; }
|
||||
.line-height-180 { line-height: 180%; }
|
||||
.line-height-190 { line-height: 190%; }
|
||||
.line-height-200 { line-height: 200%; }
|
||||
|
||||
//
|
||||
// Font Icon Styles //
|
||||
//
|
||||
i {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
//
|
||||
// Icon sizes //
|
||||
//
|
||||
.icon-5xl {
|
||||
i { font-size: 2.8em; } /* 42px */
|
||||
}
|
||||
.icon-4xl {
|
||||
i { font-size: 2.4em; } /* 36px */
|
||||
}
|
||||
.icon-3xl {
|
||||
i { font-size: 2.13em; } /* 32px */
|
||||
}
|
||||
.icon-2xl {
|
||||
i { font-size: 1.86em; } /* 28px */
|
||||
}
|
||||
.icon-xl {
|
||||
i { font-size: 1.6em; } /* 24px */
|
||||
}
|
||||
.icon-lg {
|
||||
i { font-size: 1.33em; } /* 20px */
|
||||
}
|
||||
.icon-sm {
|
||||
i { font-size: 0.86em; } /* 13px */
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
//
|
||||
// Blog Styles //
|
||||
//
|
||||
@include breakpoint-less(md) {
|
||||
.sidebar-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
border: 1px solid $border-grey;
|
||||
margin-bottom: 20px;
|
||||
padding: 30px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.list-category {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px solid $border-grey;
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
span {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.popular-post {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
img {
|
||||
float: left;
|
||||
width: 80px;
|
||||
}
|
||||
div {
|
||||
padding-left: 100px;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
text-align: left;
|
||||
}
|
||||
a {
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 3px 6px 0;
|
||||
a {
|
||||
display: inline-block;
|
||||
background: $button-grey-lighter;
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
&:hover, &:focus {
|
||||
background: $button-grey;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.sidebar-box {
|
||||
border-color: $color-white-02;
|
||||
.list-category {
|
||||
li {
|
||||
border-color: $color-white-02;
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
li {
|
||||
a {
|
||||
background: $color-black-08;
|
||||
color: $color-white-07;
|
||||
&:hover, &:focus {
|
||||
background: $color-black-09;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Comment box //
|
||||
//
|
||||
.comment-box {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
padding-left: 80px;
|
||||
.comment-user-avatar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $bg-grey;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.comment-content {
|
||||
position: relative;
|
||||
.comment-time {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
color: $color-primary-lighter;
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
//
|
||||
// Cookie Consent //
|
||||
//
|
||||
#cookie-consent {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 997;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
@include transition(ease-out 0.2s);
|
||||
&.consent-hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
//
|
||||
// Fullscreen Menu Styles //
|
||||
//
|
||||
.fm-toggle {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
@include transition(ease-out 0.2s);
|
||||
.lines {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: $color-black;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
@include transition(linear 0.12s);
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: $color-black;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
display: inline-block;
|
||||
@include transition(linear 0.12s);
|
||||
}
|
||||
&:before { top: -7px;}
|
||||
&:after { bottom: -7px;}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.lines {
|
||||
&:before { @include transform(scaleX(0.8)); @include transform-origin(100% 50%); }
|
||||
&:after { @include transform(scaleX(0.6)); @include transform-origin(100% 50%); }
|
||||
}
|
||||
&:hover {
|
||||
.lines {
|
||||
&:before { @include transform(scaleX(1)); }
|
||||
&:after { @include transform(scaleX(1)); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
&.dark, &.black, &.absolute-light {
|
||||
.fm-toggle {
|
||||
.lines, .lines:before, .lines:after { background: $color-white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Fullscreen Menu //
|
||||
//
|
||||
.fullscreen-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 996;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition(ease-out 0.2s);
|
||||
.fm-wrapper {
|
||||
@include transform(scale(0.98));
|
||||
height: 100%;
|
||||
@include transition(ease-out 0.2s);
|
||||
.position-top,
|
||||
.position-middle,
|
||||
.position-bottom {
|
||||
padding: 0 30px;
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
.position-top,
|
||||
.position-middle,
|
||||
.position-bottom {
|
||||
padding: 0 50px;
|
||||
}
|
||||
.position-top { top: 50px; }
|
||||
.position-bottom { bottom: 50px; }
|
||||
}
|
||||
.fm-close {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
opacity: 0.8;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
@include transition(ease-out 0.18s);
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
@include transition(ease-out 0.18s);
|
||||
}
|
||||
&:before { @include transform(translate(-50%, -50%) rotate(45deg)) }
|
||||
&:after { @include transform(translate(-50%, -50%) rotate(-45deg)) }
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
opacity: 1;
|
||||
&:before { @include transform(translate(-50%, -50%) rotate(180deg)) }
|
||||
&:after { @include transform(translate(-50%, -50%) rotate(180deg)) }
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
.fm-close {
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(sm) {
|
||||
.fm-close {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
span {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fm-show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
.fm-wrapper {
|
||||
@include transform(scale(1));
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
&.fullscreen-menu {
|
||||
.fm-wrapper {
|
||||
.fm-close {
|
||||
span {
|
||||
background: $color-white-01;
|
||||
&:before, &:after { background: $color-white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-grey, .bg-grey-lighter, .bg-grey-lightest, div[class^='bg-white'], div[class*=' bg-white'] {
|
||||
&.fullscreen-menu {
|
||||
.fm-wrapper {
|
||||
.fm-close {
|
||||
span {
|
||||
background: $color-black-01;
|
||||
&:before, &:after { background: $color-black; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
//
|
||||
// Gallery Styles //
|
||||
//
|
||||
.gallery-wrapper {
|
||||
margin: 0;
|
||||
div[class^="col-"], div[class*=" col-"] {
|
||||
margin: 0;
|
||||
}
|
||||
.gallery-box {
|
||||
.gallery-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
a {
|
||||
display: block;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
background: $color-white-01;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1));
|
||||
width: 100%;
|
||||
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
}
|
||||
.gallery-title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%,-50%));
|
||||
z-index: 2;
|
||||
background: $color-white;
|
||||
padding: 10px 20px;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Gallery box Spacings //
|
||||
//
|
||||
&.spacing-0, &.no-spacing {
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&.spacing-6 {
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 6px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
&.spacing-10 {
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
&.spacing-20 {
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
&.spacing-30 {
|
||||
div[class^="col-"]:not(.row) {
|
||||
margin-bottom: 30px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Gallery Image Hover Styles //
|
||||
//
|
||||
&.hover-style-2 {
|
||||
.gallery-box {
|
||||
.gallery-img {
|
||||
a {
|
||||
&:before { background: $color-black-01; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Gallery Image border-radius //
|
||||
//
|
||||
&[class*=' border-radius'], &[class^='border-radius'] {
|
||||
.gallery-box {
|
||||
.gallery-img {
|
||||
@include transform(translate3d(0,0,0));
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.border-radius-025 {
|
||||
.gallery-box .gallery-img { border-radius: 0.25em; }
|
||||
}
|
||||
&.border-radius-0375 {
|
||||
.gallery-box .gallery-img { border-radius: 0.375em; }
|
||||
}
|
||||
&.border-radius-05 {
|
||||
.gallery-box .gallery-img { border-radius: 0.5em; }
|
||||
}
|
||||
&.border-radius-10 {
|
||||
.gallery-box .gallery-img { border-radius: 1.0em; }
|
||||
}
|
||||
&.border-radius-15 {
|
||||
.gallery-box .gallery-img { border-radius: 1.5em; }
|
||||
}
|
||||
&.border-radius-20 {
|
||||
.gallery-box .gallery-img { border-radius: 2.0em; }
|
||||
}
|
||||
&.border-radius-25 {
|
||||
.gallery-box .gallery-img { border-radius: 2.5em; }
|
||||
}
|
||||
&.border-radius-30 {
|
||||
.gallery-box .gallery-img { border-radius: 3.0em; }
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.gallery-wrapper {
|
||||
&.spacing-0, &.no-spacing { margin: 0; }
|
||||
&.spacing-6 { margin: 0 -3px -6px; }
|
||||
&.spacing-10 { margin: 0 -5px -10px; }
|
||||
&.spacing-20 { margin: 0 -10px -20px; }
|
||||
&.spacing-30 { margin: 0 -15px -30px; }
|
||||
}
|
||||
}
|
||||
.container-fluid {
|
||||
.gallery-wrapper {
|
||||
&.spacing-0, &.no-spacing { margin: 0 -30px; }
|
||||
&.spacing-6 { margin: 0 -27px; }
|
||||
&.spacing-10 { margin: 0 -25px; }
|
||||
&.spacing-20 { margin: 0 -20px; }
|
||||
&.spacing-30 { margin: 0 -15px; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,772 @@
|
|||
//
|
||||
// Header Menu //
|
||||
//
|
||||
.header {
|
||||
top: 0;
|
||||
z-index: 993;
|
||||
overflow: visible;
|
||||
background: $color-white;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
@include transition(ease-in-out 0.2s);
|
||||
&.hide {
|
||||
@include transform(translateY(-100%));
|
||||
}
|
||||
.container, .container-fluid {
|
||||
@include display-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.header-logo {
|
||||
display: inline-block;
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
width: auto;
|
||||
height: 54px;
|
||||
max-height: 54px;
|
||||
}
|
||||
a {
|
||||
color: $color-dark;
|
||||
&:hover { color: $color-dark; }
|
||||
}
|
||||
}
|
||||
.header-toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@include transform(translateY(-50%));
|
||||
background: $color-dark;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
@include transition(linear 0.1s);
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: $color-dark;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
&:before { top: -7px; }
|
||||
&:after { bottom: -7px; }
|
||||
}
|
||||
&.toggle-close {
|
||||
span {
|
||||
background: transparent;
|
||||
&:before { top: 0; bottom: 0; @include transform(rotate(-45deg)); }
|
||||
&:after { top: 0; bottom: 0; @include transform(rotate(45deg)); }
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
z-index: 995;
|
||||
.nav {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav-item {
|
||||
text-align: left;
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
font-family: $font-family-tertiary;
|
||||
letter-spacing: -0.2px;
|
||||
color: $color-dark;
|
||||
&:hover, &.active {
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
.nav-dropdown-toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&:after {
|
||||
content: '\f107';
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.nav-dropdown {
|
||||
background: $color-white;
|
||||
h1,h2,h3,h4,h5,h6 { color: $color-dark; }
|
||||
a {
|
||||
&:not(.button, .button-circle) {
|
||||
color: $color-primary;
|
||||
&:hover, &:focus { color: $color-dark; }
|
||||
}
|
||||
}
|
||||
.nav-dropdown-item {
|
||||
.nav-subdropdown-toggle {
|
||||
position: absolute;
|
||||
&:after {
|
||||
content: '\f105';
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.font-2 {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu-extra {
|
||||
a {
|
||||
&:not(.button, .button-circle) {
|
||||
color: $color-dark;
|
||||
&:hover, &:focus { color: $color-dark; }
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Positions //
|
||||
//
|
||||
&.sticky-autohide, &.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@include box-shadow(0 0 36px 0 rgba(22,25,28,0.17));
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Header BG Colors //
|
||||
//
|
||||
.header {
|
||||
&.absolute-dark, &.absolute-light,
|
||||
&.absolute-dark.dark, &.absolute-light.dark,
|
||||
&.absolute-dark.black, &.absolute-light.black {
|
||||
&:not(.sticky-autohide, .sticky) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
background: transparent;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&.dark, &.black, &.absolute-light {
|
||||
&.border-top, &.border-bottom {
|
||||
border-color: $color-white-01;
|
||||
}
|
||||
}
|
||||
&.absolute-light {
|
||||
.header-logo {
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
.logo-light {
|
||||
display: inline-block;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 { color: $color-white; }
|
||||
a {
|
||||
color: $color-white;
|
||||
&:hover { color: $color-white; }
|
||||
}
|
||||
}
|
||||
.header-toggle {
|
||||
span {
|
||||
background: $color-white;
|
||||
&:before, &:after { background: $color-white; }
|
||||
}
|
||||
&.toggle-close {
|
||||
span {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.header-menu {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link, .nav-dropdown-toggle {
|
||||
color: $color-white;
|
||||
&:hover, &:focus, &.active { color: $color-white; }
|
||||
}
|
||||
.nav-link {
|
||||
&:before {
|
||||
background: $color-white-015;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu-extra {
|
||||
a {
|
||||
&:not(.button, .button-circle) {
|
||||
color: $color-white;
|
||||
&:hover, &:focus { color: $color-white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark, &.black {
|
||||
&:not(.absolute-dark) {
|
||||
.header-logo {
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
.logo-light {
|
||||
display: inline-block;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 { color: $color-white; }
|
||||
a {
|
||||
color: $color-white;
|
||||
&:hover { color: $color-white; }
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.header-menu {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link, .nav-dropdown-toggle {
|
||||
color: $color-white;
|
||||
&:hover, &:focus, &.active { color: $color-white; }
|
||||
}
|
||||
.nav-link {
|
||||
&:before {
|
||||
background: $color-white-015;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu-extra {
|
||||
a {
|
||||
&:not(.button, .button-circle) {
|
||||
color: $color-white;
|
||||
&:hover, &:focus { color: $color-white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-toggle {
|
||||
span {
|
||||
background: $color-white;
|
||||
&:before, &:after { background: $color-white; }
|
||||
}
|
||||
&.toggle-close {
|
||||
span {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark { background: $bg-dark; }
|
||||
&.black { background: $color-black; }
|
||||
}
|
||||
|
||||
@include breakpoint-above(lg) {
|
||||
.header {
|
||||
//
|
||||
// Sizes //
|
||||
//
|
||||
.header-menu {
|
||||
height: 80px;
|
||||
}
|
||||
&.header-lg {
|
||||
.header-logo {
|
||||
img {
|
||||
height: 64px;
|
||||
max-height: 64px;
|
||||
}
|
||||
}
|
||||
.header-menu {
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
&.header-xl {
|
||||
.header-logo {
|
||||
img {
|
||||
height: 74px;
|
||||
max-height: 74px;
|
||||
}
|
||||
}
|
||||
.header-menu {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Alignments //
|
||||
//
|
||||
&:not(.left, .center) {
|
||||
.header-menu {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
.header-logo {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.header-menu {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
&.center {
|
||||
.header-logo {
|
||||
margin-right: auto;
|
||||
}
|
||||
.header-menu {
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%));
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu {
|
||||
.nav {
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin: 0 0 0 20px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
line-height: 80px;
|
||||
&:before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 22px;
|
||||
left: 0;
|
||||
content: '';
|
||||
background: $bg-grey;
|
||||
height: 0;
|
||||
@include transition(all 0.14s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
&.d-toggle {
|
||||
padding-right: 14px;
|
||||
}
|
||||
}
|
||||
.nav-dropdown-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
@include transform(translateY(-50%));
|
||||
color: $color-dark;
|
||||
&:hover {
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: 83px;
|
||||
left: 0;
|
||||
@include transform(translateY(10px));
|
||||
z-index: 995;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background: $color-white;
|
||||
width: 240px;
|
||||
border-radius: 0.375em;
|
||||
@include box-shadow(0 10px 40px -4px rgba(22,25,28,0.17));
|
||||
padding: 15px 0;
|
||||
@include transition(ease-out 0.14s);
|
||||
.nav-dropdown-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
.nav-dropdown-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
border-radius: 0.375em;
|
||||
padding: 7px 15px;
|
||||
@include transition(linear 0.06s);
|
||||
&:hover {
|
||||
background: $bg-grey;
|
||||
}
|
||||
&.sd-toggle {
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
@include transform(translateY(-50%));
|
||||
content: '\f105';
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-subdropdown-toggle {
|
||||
display: none;
|
||||
}
|
||||
.nav-subdropdown {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 243px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background: $color-white;
|
||||
width: 240px;
|
||||
border-radius: 0.375em;
|
||||
@include box-shadow(0 10px 40px -4px rgba(22,25,28,0.17));
|
||||
padding: 15px;
|
||||
@include transition(linear 0.06s);
|
||||
.nav-subdropdown-item {
|
||||
display: block;
|
||||
margin: 0;
|
||||
.nav-subdropdown-link {
|
||||
display: block;
|
||||
border-radius: 0.375em;
|
||||
padding: 7px 15px;
|
||||
@include transition(linear 0.06s);
|
||||
&:hover {
|
||||
background: $bg-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.nav-subdropdown {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.nav-link {
|
||||
&:before {
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
.nav-dropdown {
|
||||
@include transform(translateY(0));
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dropdown-dark, &.dropdown-black {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-dropdown {
|
||||
h1,h2,h3,h4,h5,h6 { color: $color-white; }
|
||||
a {
|
||||
&:not(.button, .button-circle) {
|
||||
color: $color-white-08;
|
||||
&:hover, &:focus { color: $color-white; }
|
||||
}
|
||||
}
|
||||
.nav-dropdown-item {
|
||||
.nav-dropdown-link {
|
||||
&:hover {
|
||||
background: $color-white-01;
|
||||
}
|
||||
}
|
||||
.nav-subdropdown {
|
||||
.nav-subdropdown-item {
|
||||
.nav-subdropdown-link {
|
||||
&:hover {
|
||||
background: $color-white-01;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dropdown-dark {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-dropdown {
|
||||
background: $color-dark;
|
||||
.nav-dropdown-item {
|
||||
.nav-subdropdown {
|
||||
background: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dropdown-black {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-dropdown {
|
||||
background: $color-black;
|
||||
.nav-dropdown-item {
|
||||
.nav-subdropdown {
|
||||
background: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.absolute-dark {
|
||||
.header-menu {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&:before {
|
||||
background: $color-black-005;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu-extra {
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.header-toggle {
|
||||
display: none;
|
||||
}
|
||||
&:not(.center, .left) {
|
||||
.header-menu {
|
||||
.nav {
|
||||
.nav-item {
|
||||
&:last-child,
|
||||
&:nth-last-child(2) {
|
||||
.nav-dropdown {
|
||||
right: 0;
|
||||
left: auto;
|
||||
.nav-dropdown-item {
|
||||
.nav-subdropdown {
|
||||
right: 243px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container-fluid {
|
||||
.header-menu {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-dropdown {
|
||||
right: 0;
|
||||
left: auto;
|
||||
.nav-dropdown-item {
|
||||
.nav-subdropdown {
|
||||
right: 243px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
.header {
|
||||
height: 70px;
|
||||
.header-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
overflow-y: auto;
|
||||
background: $color-white;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
@include box-shadow(0 0 36px 0 rgba(22,25,28,0.17));
|
||||
padding: 20px 30px;
|
||||
@include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
&.show {
|
||||
left: 0;
|
||||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid $border-grey;
|
||||
padding: 14px 0;
|
||||
&:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: $color-primary;
|
||||
&:hover, &:focus, &.active { color: $color-dark; }
|
||||
}
|
||||
.nav-dropdown-toggle {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
text-align: right;
|
||||
&.active {
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
.nav-dropdown {
|
||||
display: none;
|
||||
background: $color-white;
|
||||
padding: 8px 0 0 20px;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
.nav-dropdown-item {
|
||||
position: relative;
|
||||
margin: 0 0 8px;
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
.nav-dropdown-link {
|
||||
&.active {
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
.nav-subdropdown-toggle {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
text-align: right;
|
||||
&:after {
|
||||
content: '\f107';
|
||||
}
|
||||
}
|
||||
.nav-subdropdown {
|
||||
display: none;
|
||||
padding: 8px 0 0 20px;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
margin: 0 0 8px;
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu-extra {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 80px;
|
||||
left: auto;
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Header Sizes //
|
||||
//
|
||||
@include breakpoint-above(lg) {
|
||||
.header-lg {
|
||||
height: 90px;
|
||||
.container-fluid {
|
||||
padding: 0 40px;
|
||||
}
|
||||
.header-menu {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
line-height: 90px;
|
||||
&:before {
|
||||
bottom: 27px;
|
||||
}
|
||||
}
|
||||
.nav-dropdown {
|
||||
top: 93px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-xl {
|
||||
height: 100px;
|
||||
.container-fluid {
|
||||
padding: 0 50px;
|
||||
}
|
||||
.header-menu {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
line-height: 100px;
|
||||
&:before {
|
||||
bottom: 32px;
|
||||
}
|
||||
}
|
||||
.nav-dropdown {
|
||||
top: 103px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Placeholders for Sticky Header //
|
||||
//
|
||||
.header-placeholder { height: 80px; }
|
||||
.header-placeholder-lg { height: 90px; }
|
||||
.header-placeholder-xl { height: 100px; }
|
||||
@include breakpoint-less(md) {
|
||||
.header-placeholder, .header-placeholder-lg, .header-placeholder-xl { height: 70px; }
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
//
|
||||
// Masonry Styles //
|
||||
//
|
||||
.masonry {
|
||||
margin: 0 -15px -30px;
|
||||
.masonry-item {
|
||||
margin-bottom: 30px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
//
|
||||
// Masonry - Columns //
|
||||
//
|
||||
&.masonry-column-1 {
|
||||
.masonry-item { width: 100%; }
|
||||
}
|
||||
&.masonry-column-2 {
|
||||
@include breakpoint-above(md) {
|
||||
.masonry-item { width: 50%; }
|
||||
}
|
||||
}
|
||||
&.masonry-column-3 {
|
||||
@include breakpoint-above(md) {
|
||||
.masonry-item { width: 50%; }
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.masonry-item { width: 33.33%; }
|
||||
}
|
||||
}
|
||||
&.masonry-column-4 {
|
||||
@include breakpoint-above(sm) {
|
||||
.masonry-item { width: 50%; }
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
.masonry-item { width: 33.33%; }
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.masonry-item { width: 25%; }
|
||||
}
|
||||
}
|
||||
&.masonry-column-5 {
|
||||
@extend .column-4;
|
||||
@include breakpoint-above(xl) {
|
||||
.masonry-item { width: 20%; }
|
||||
}
|
||||
}
|
||||
&.masonry-column-6 {
|
||||
@extend .column-4;
|
||||
@include breakpoint-above(xl) {
|
||||
.masonry-item { width: 16.66%; }
|
||||
}
|
||||
}
|
||||
//
|
||||
// Masonry - Item Spacings //
|
||||
//
|
||||
&.masonry-spacing-0 {
|
||||
margin: 0;
|
||||
.masonry-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&.masonry-spacing-6 {
|
||||
margin: 0 -3px -6px;
|
||||
.masonry-item {
|
||||
margin-bottom: 6px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
&.masonry-spacing-10 {
|
||||
margin: 0 -5px -10px;
|
||||
.masonry-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
&.masonry-spacing-20 {
|
||||
margin: 0 -10px -20px;
|
||||
.masonry-item {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
&.masonry-spacing-40 {
|
||||
margin: 0 -20px -40px;
|
||||
.masonry-item {
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
&.masonry-spacing-50 {
|
||||
margin: 0 -25px -50px;
|
||||
.masonry-item {
|
||||
margin-bottom: 50px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,563 @@
|
|||
//
|
||||
// Portfolio Styles //
|
||||
//
|
||||
.portfolio-wrapper {
|
||||
&.row {
|
||||
margin: 0;
|
||||
div[class^="col-"], div[class*=" col-"] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.portfolio-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
//
|
||||
// Portfolio Columns //
|
||||
//
|
||||
&.column-1 {
|
||||
.portfolio-item { width: 100%; }
|
||||
}
|
||||
&.column-2 {
|
||||
@include breakpoint-above(md) {
|
||||
.portfolio-item { width: 50%; }
|
||||
}
|
||||
}
|
||||
&.column-3 {
|
||||
@include breakpoint-above(md) {
|
||||
.portfolio-item { width: 50%; }
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.portfolio-item { width: 33.33%; }
|
||||
}
|
||||
}
|
||||
&.column-4 {
|
||||
@include breakpoint-above(sm) {
|
||||
.portfolio-item { width: 50%; }
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
.portfolio-item { width: 33.33%; }
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.portfolio-item { width: 25%; }
|
||||
}
|
||||
}
|
||||
&.column-5 {
|
||||
@extend .column-4;
|
||||
@include breakpoint-above(xl) {
|
||||
.portfolio-item { width: 20%; }
|
||||
}
|
||||
}
|
||||
&.column-6 {
|
||||
@extend .column-4;
|
||||
@include breakpoint-above(xl) {
|
||||
.portfolio-item { width: 16.66%; }
|
||||
}
|
||||
}
|
||||
//
|
||||
// Portfolio box spacings //
|
||||
//
|
||||
&.spacing-0, &.no-spacing {
|
||||
.portfolio-item { padding: 0; }
|
||||
}
|
||||
&.spacing-6 {
|
||||
.portfolio-item { padding: 3px; }
|
||||
}
|
||||
&.spacing-10 {
|
||||
.portfolio-item { padding: 5px; }
|
||||
}
|
||||
&.spacing-20 {
|
||||
.portfolio-item { padding: 10px; }
|
||||
}
|
||||
&.spacing-30 {
|
||||
.portfolio-item { padding: 15px; }
|
||||
}
|
||||
&.spacing-40 {
|
||||
.portfolio-item { padding: 20px; }
|
||||
}
|
||||
&.spacing-50 {
|
||||
.portfolio-item { padding: 25px; }
|
||||
}
|
||||
//
|
||||
// Portfolio box border-radius //
|
||||
//
|
||||
&[class*=' border-radius'], &[class^='border-radius'] {
|
||||
.portfolio-item {
|
||||
.portfolio-box {
|
||||
@include transform(translate3d(0,0,0));
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.border-radius-025 {
|
||||
.portfolio-item .portfolio-box { border-radius: 0.25em; }
|
||||
}
|
||||
&.border-radius-0375 {
|
||||
.portfolio-item .portfolio-box { border-radius: 0.375em; }
|
||||
}
|
||||
&.border-radius-05 {
|
||||
.portfolio-item .portfolio-box { border-radius: 0.5em; }
|
||||
}
|
||||
&.border-radius-10 {
|
||||
.portfolio-item .portfolio-box { border-radius: 1.0em; }
|
||||
}
|
||||
&.border-radius-15 {
|
||||
.portfolio-item .portfolio-box { border-radius: 1.5em; }
|
||||
}
|
||||
&.border-radius-20 {
|
||||
.portfolio-item .portfolio-box { border-radius: 2.0em; }
|
||||
}
|
||||
&.border-radius-25 {
|
||||
.portfolio-item .portfolio-box { border-radius: 2.5em; }
|
||||
}
|
||||
&.border-radius-30 {
|
||||
.portfolio-item .portfolio-box { border-radius: 3.0em; }
|
||||
}
|
||||
}
|
||||
.text-center {
|
||||
.portfolio-item { text-align: center; }
|
||||
}
|
||||
.text-right {
|
||||
.portfolio-item { text-align: right; }
|
||||
}
|
||||
|
||||
.container {
|
||||
.portfolio-wrapper {
|
||||
&.spacing-0, &.no-spacing { margin: 0; }
|
||||
&.spacing-6 { margin: -3px; }
|
||||
&.spacing-10 { margin: -5px; }
|
||||
&.spacing-20 { margin: -10px; }
|
||||
&.spacing-30 { margin: -15px; }
|
||||
&.spacing-40 { margin: -20px; }
|
||||
&.spacing-50 { margin: -25px; }
|
||||
}
|
||||
}
|
||||
.container-fluid {
|
||||
.portfolio-wrapper {
|
||||
margin: 0 -30px;
|
||||
&.spacing-0, &.no-spacing { margin: 0 -30px; }
|
||||
&.spacing-6 { margin: -3px -27px 3px; }
|
||||
&.spacing-10 { margin: -5px -25px 5px; }
|
||||
&.spacing-20 { margin: -10px -20px 10px; }
|
||||
&.spacing-30 { margin: -15px -15px 15px; }
|
||||
&.spacing-40 { margin: -20px -10px 20px; }
|
||||
&.spacing-50 { margin: -25px -5px 25px; }
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Portfolio Filter Styles //
|
||||
//
|
||||
.filter {
|
||||
margin-bottom: 70px;
|
||||
ul {
|
||||
margin: 0 -5px;
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
background: $button-grey-lighter;
|
||||
border-radius: 30px;
|
||||
margin: 0 5px;
|
||||
padding: 7px 15px;
|
||||
font: 400 13px $font-family-tertiary;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
@include transition(linear 0.1s);
|
||||
&:hover {
|
||||
background: $button-grey;
|
||||
}
|
||||
&.active, &.mixitup-control-active {
|
||||
background: $bg-dark;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Filter Font Styles //
|
||||
//
|
||||
&.filter-font-2 {
|
||||
ul {
|
||||
li {
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.2px;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Filter Styles //
|
||||
//
|
||||
&.filter-style-2 {
|
||||
ul {
|
||||
margin: 0 -2px;
|
||||
li {
|
||||
background: transparent;
|
||||
margin: 0 2px;
|
||||
color: $color-primary;
|
||||
&:hover, &.active, &.mixitup-control-active {
|
||||
color: $color-dark;
|
||||
}
|
||||
&.active, &.mixitup-control-active {
|
||||
background: $button-grey-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.filter-style-3 {
|
||||
ul {
|
||||
margin: 0 -14px -8px;
|
||||
li {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
margin: 0 14px 8px;
|
||||
padding: 0;
|
||||
color: $color-primary;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
background: $color-dark;
|
||||
height: 1px;
|
||||
@include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||
}
|
||||
&:hover, &.active, &.mixitup-control-active {
|
||||
color: $color-dark;
|
||||
}
|
||||
&.active, &.mixitup-control-active {
|
||||
&:after {
|
||||
width: 100%;
|
||||
@include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.filter-style-4 {
|
||||
ul {
|
||||
margin: 0 -14px -7px;
|
||||
li {
|
||||
background: transparent;
|
||||
margin: 0 14px 7px;
|
||||
padding: 0;
|
||||
color: $color-primary-lighter;
|
||||
&:hover, &.active, &.mixitup-control-active {
|
||||
background: transparent;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.filter {
|
||||
ul {
|
||||
li {
|
||||
background: transparent;
|
||||
color: $color-white-07;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: $color-white;
|
||||
}
|
||||
&.active, &.mixitup-control-active {
|
||||
background: $color-white;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.filter-style-2 {
|
||||
ul {
|
||||
li {
|
||||
color: $color-white-07;
|
||||
&:hover, &.active, &.mixitup-control-active {
|
||||
color: $color-white;
|
||||
}
|
||||
&.active, &.mixitup-control-active {
|
||||
background: $color-white;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.filter-style-3 {
|
||||
ul {
|
||||
li {
|
||||
color: $color-white-07;
|
||||
&:after {
|
||||
background: $color-white;
|
||||
}
|
||||
&:hover, &.active, &.mixitup-control-active {
|
||||
color: $color-white;
|
||||
}
|
||||
&.active, &.mixitup-control-active {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.filter-style-4 {
|
||||
ul {
|
||||
li {
|
||||
background: transparent;
|
||||
color: $color-white-07;
|
||||
&:hover, &.active, &.mixitup-control-active {
|
||||
background: transparent;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover Styles //
|
||||
//
|
||||
.portfolio-item {
|
||||
.portfolio-box {
|
||||
position: relative;
|
||||
.portfolio-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
img {
|
||||
@include transform(scale(1));
|
||||
width: 100%;
|
||||
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.portfolio-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
background: $color-black-04;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $color-white-07;
|
||||
@include transition(ease-out 0.12s);
|
||||
div {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
* {
|
||||
opacity: 0;
|
||||
@include transform(translateY(5px));
|
||||
margin-bottom: 7px;
|
||||
@include transition(ease-out 0.12s);
|
||||
&:first-child { @include transition-delay(0.05s); }
|
||||
&:last-child { @include transition-delay(0.10s); margin-bottom: 0; }
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-white;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.portfolio-img {
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
@include filter(blur(1.5px));
|
||||
}
|
||||
}
|
||||
.portfolio-title {
|
||||
opacity: 1;
|
||||
* {
|
||||
opacity: 1;
|
||||
@include transform(translateY(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover Style 2 //
|
||||
//
|
||||
.hover-style-2 {
|
||||
.portfolio-item {
|
||||
.portfolio-box {
|
||||
.portfolio-title {
|
||||
opacity: 1;
|
||||
background: $color-black-01;
|
||||
div {
|
||||
top: 30px;
|
||||
bottom: auto;
|
||||
* {
|
||||
opacity: 1;
|
||||
@include transform(translateY(0));
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
@include transform(translateY(5px));
|
||||
opacity: 0;
|
||||
color: $color-white;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.portfolio-title {
|
||||
background: $color-black-03;
|
||||
i {
|
||||
@include transform(translateY(0));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover Style 3 //
|
||||
//
|
||||
.hover-style-3 {
|
||||
.portfolio-item {
|
||||
.portfolio-box {
|
||||
overflow: hidden;
|
||||
.portfolio-title {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@include transform(translateY(100%));
|
||||
opacity: 1;
|
||||
background: $bg-dark;
|
||||
height: auto;
|
||||
padding: 15px 30px;
|
||||
@include transition(transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
div {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
* {
|
||||
@include transform(translateY(0));
|
||||
opacity: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
float: left;
|
||||
}
|
||||
span {
|
||||
float: right;
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.portfolio-img {
|
||||
img {
|
||||
@include transform(translateY(-20px));
|
||||
@include filter(blur(0));
|
||||
}
|
||||
}
|
||||
.portfolio-title {
|
||||
@include transform(translateY(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover Style 4 //
|
||||
//
|
||||
.hover-style-4 {
|
||||
.portfolio-item {
|
||||
.portfolio-box {
|
||||
overflow: hidden;
|
||||
.portfolio-title {
|
||||
background: $color-white-01;
|
||||
color: $color-primary;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
background: $color-white;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
div {
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
@include transform(translateY(-50%));
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
padding: 0 50px;
|
||||
text-align: center;
|
||||
@include transition(ease-out 0.12s);
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-dark;
|
||||
}
|
||||
span {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.portfolio-img {
|
||||
img {
|
||||
@include transform(scale(1));
|
||||
@include filter(blur(0));
|
||||
}
|
||||
}
|
||||
.portfolio-title {
|
||||
div {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover Style 5 //
|
||||
//
|
||||
.hover-style-5 {
|
||||
.portfolio-item {
|
||||
.portfolio-box {
|
||||
.portfolio-title {
|
||||
background: $color-white-09;
|
||||
color: $color-primary;
|
||||
div {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
bottom: auto;
|
||||
@include transform(translate(-50%,-50%));
|
||||
text-align: center;
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.portfolio-title {
|
||||
div {
|
||||
@include transform(translate(-50%,-50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
//
|
||||
// Preloader Styles //
|
||||
//
|
||||
body {
|
||||
&:after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 998;
|
||||
background: $color-white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.loaded {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
background: $color-white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
div {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%,-50%));
|
||||
}
|
||||
&.dark {
|
||||
background: $color-black;
|
||||
}
|
||||
}
|
||||
.loaded {
|
||||
.preloader {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
@include transition(ease-out 0.3s);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Preloader 1 //
|
||||
//
|
||||
.preloader-1 {
|
||||
div {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
.loader-circular {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform-origin: center center;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: auto;
|
||||
animation: loader-one-rotate 2s linear infinite;
|
||||
}
|
||||
.loader-path {
|
||||
fill: none;
|
||||
stroke: $color-dark;
|
||||
stroke-width: 2.5;
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
stroke-miterlimit: 10;
|
||||
animation: loader-one-dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
&.dark {
|
||||
div {
|
||||
.loader-path {
|
||||
stroke: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-one-rotate {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes loader-one-dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Preloader 2 //
|
||||
//
|
||||
.preloader-2 {
|
||||
div {
|
||||
span {
|
||||
display: inline-block;
|
||||
opacity: 0.2;
|
||||
background: $color-black;
|
||||
background: linear-gradient(to right, $color-black 10%, transparent 40%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
@include animation(loader-two 0.6s infinite linear);
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&:before {
|
||||
background: $color-black;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: 100% 0 0 0;
|
||||
}
|
||||
&:after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $color-white;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark {
|
||||
div {
|
||||
span {
|
||||
background: $color-white;
|
||||
background: linear-gradient(to right, $color-white 10%, transparent 40%);
|
||||
&:before {
|
||||
background: $color-white;
|
||||
}
|
||||
&:after {
|
||||
background: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes loader-two {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes loader-two {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
//
|
||||
// Preloader 3 //
|
||||
//
|
||||
.preloader-3 {
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $color-black-01;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:before { @include animation(loader-three-bounceIn 1.2s infinite ease-in-out); }
|
||||
&:after { @include animation(loader-three-bounceOut 1.2s infinite ease-in-out); }
|
||||
}
|
||||
}
|
||||
&.dark {
|
||||
div {
|
||||
span {
|
||||
&:before, &:after {
|
||||
background: $color-white-01;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes loader-three-bounceIn {
|
||||
0%, 100% { -webkit-transform: scale(0); }
|
||||
50% { -webkit-transform: scale(1.0); }
|
||||
}
|
||||
@keyframes loader-three-bounceIn {
|
||||
0%, 100% { -webkit-transform: scale(0); transform: scale(0); }
|
||||
50% { -webkit-transform: scale(1.0); transform: scale(1.0); }
|
||||
}
|
||||
@-webkit-keyframes loader-three-bounceOut {
|
||||
0%, 100% { -webkit-transform: scale(1.0); }
|
||||
50% { -webkit-transform: scale(0); }
|
||||
}
|
||||
@keyframes loader-three-bounceOut {
|
||||
0%, 100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
|
||||
50% { -webkit-transform: scale(0); transform: scale(0); }
|
||||
}
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
//
|
||||
// Sections Styles //
|
||||
//
|
||||
.section-xs {
|
||||
padding: 50px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 50px 30px; }
|
||||
}
|
||||
}
|
||||
.section-sm {
|
||||
padding: 70px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 70px 30px; }
|
||||
}
|
||||
}
|
||||
.section, .section-md {
|
||||
padding: 100px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 100px 30px; }
|
||||
}
|
||||
}
|
||||
.section-lg {
|
||||
padding: 160px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 160px 30px; }
|
||||
}
|
||||
}
|
||||
.section-xl {
|
||||
padding: 200px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 200px 30px; }
|
||||
}
|
||||
}
|
||||
.section-2xl {
|
||||
padding: 240px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 240px 30px; }
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(sm) {
|
||||
.section-xs {
|
||||
padding: 30px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 30px 30px; }
|
||||
}
|
||||
}
|
||||
.section-sm {
|
||||
padding: 50px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 50px 30px; }
|
||||
}
|
||||
}
|
||||
.section, .section-md {
|
||||
padding: 80px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 80px 30px; }
|
||||
}
|
||||
}
|
||||
.section-lg {
|
||||
padding: 120px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 120px 30px; }
|
||||
}
|
||||
}
|
||||
.section-xl {
|
||||
padding: 160px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 160px 30px; }
|
||||
}
|
||||
}
|
||||
.section-2xl {
|
||||
padding: 180px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 180px 30px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(xs) {
|
||||
.section, .section-md {
|
||||
padding: 70px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 70px 30px; }
|
||||
}
|
||||
}
|
||||
.section-lg {
|
||||
padding: 100px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 100px 30px; }
|
||||
}
|
||||
}
|
||||
.section-xl {
|
||||
padding: 140px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 120px 30px; }
|
||||
}
|
||||
}
|
||||
.section-2xl {
|
||||
padding: 160px 0;
|
||||
&.bg-image {
|
||||
.container, .container-fluid { padding: 140px 30px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-xs,
|
||||
.section-sm,
|
||||
.section, .section-md,
|
||||
.section-lg,
|
||||
.section-xl,
|
||||
.section-2xl {
|
||||
&.bg-image {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-fullscreen {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
div[class^='bg-black'], div[class*=' bg-black'],
|
||||
div[class^='bg-white'], div[class*=' bg-white'],
|
||||
div[class^='bg-dark'], div[class*=' bg-dark'],
|
||||
div[class^='bg-grey'], div[class*=' bg-grey'],
|
||||
.container, .container-fluid {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
//
|
||||
// Shop styles //
|
||||
//
|
||||
.product-box {
|
||||
.product-img {
|
||||
position: relative;
|
||||
@include transform(translate3d(0,0,0));
|
||||
overflow: hidden;
|
||||
.product-img-link {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1));
|
||||
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
.product-badge-left, .product-badge-right {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
z-index: 2;
|
||||
font-size: 14px;
|
||||
background: $color-black-04;
|
||||
padding: 8px 11px;
|
||||
border-radius: 40px;
|
||||
font: 500 12px $font-family-tertiary;
|
||||
line-height: 1;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
* {
|
||||
color: $color-white;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0;
|
||||
}
|
||||
&.red {
|
||||
background: $color-red;
|
||||
}
|
||||
&.green {
|
||||
background: $color-green;
|
||||
}
|
||||
}
|
||||
.product-badge-left {
|
||||
left: 16px;
|
||||
}
|
||||
.product-badge-right {
|
||||
right: 16px;
|
||||
}
|
||||
.add-to-cart {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
@include transform(translateY(4px));
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background: $color-white;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
@include transition(ease-out 0.16s);
|
||||
a {
|
||||
&:not([class*=' button'], [class^='button']) {
|
||||
color: $color-primary;
|
||||
font: 500 13px $font-family-tertiary;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
&:hover, &:focus { color: $color-dark; }
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
.add-to-cart {
|
||||
@include transform(translateY(0));
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-title {
|
||||
position: relative;
|
||||
padding: 24px 0 20px;
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.price {
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
del {
|
||||
opacity: 0.7;
|
||||
margin-right: 4px;
|
||||
}
|
||||
ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-carousel-thumbnails {
|
||||
padding: 6px 0 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
a {
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
@include transition(ease-out 0.16s);
|
||||
img {
|
||||
max-width: 100px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
del {
|
||||
opacity: 0.7;
|
||||
margin-right: 8px;
|
||||
}
|
||||
ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
.qnt {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: 30px;
|
||||
input {
|
||||
width: 100px;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
&[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
.dec, .inc {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: $bg-grey;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
@include transition(linear 0.1s);
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%,-50%));
|
||||
background: $color-dark;
|
||||
width: 11px;
|
||||
height: 1px;
|
||||
}
|
||||
&:hover {
|
||||
background: $button-grey;
|
||||
}
|
||||
}
|
||||
.dec {
|
||||
left: 0;
|
||||
}
|
||||
.inc {
|
||||
right: 0;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%,-50%));
|
||||
background: $color-dark;
|
||||
width: 1px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-info-box {
|
||||
border: 1px solid $border-grey;
|
||||
padding: 40px;
|
||||
@include breakpoint-less(md) {
|
||||
padding: 30px;
|
||||
}
|
||||
.nav {
|
||||
justify-content: center;
|
||||
margin: 0 -15px 30px;
|
||||
.nav-item {
|
||||
margin: 0 15px;
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding: 0 0 1px;
|
||||
font-weight: 400;
|
||||
font-family: $font-family-tertiary;
|
||||
letter-spacing: -0.2px;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: $color-dark;
|
||||
height: 1px;
|
||||
@include transition(ease-out 0.24s);
|
||||
@include animation(button-line-out 0.24s ease-out both);
|
||||
}
|
||||
&.active {
|
||||
color: $color-dark;
|
||||
&:before {
|
||||
width: 100%;
|
||||
@include animation(button-line-in 0.24s ease-out both);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table {
|
||||
margin: 0;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 0;
|
||||
font-size: 15px;
|
||||
tr {
|
||||
&:first-child {
|
||||
th, td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
border-top: 1px solid $border-grey;
|
||||
padding: 14px 20px 14px 0;
|
||||
}
|
||||
th {
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
td {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-table {
|
||||
margin: 0;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
thead {
|
||||
th,td {
|
||||
border-bottom: 1px solid $border-grey;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid $border-grey;
|
||||
padding: 20px 20px 20px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
th {
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
td {
|
||||
color: $color-primary;
|
||||
}
|
||||
.product-thumbnail {
|
||||
img {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
.product-quantity {
|
||||
.qnt {
|
||||
margin: 0;
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-totals {
|
||||
margin: 0;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
tr {
|
||||
&:first-child {
|
||||
th, td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
border-top: 1px solid $border-grey;
|
||||
padding: 20px 20px 20px 0;
|
||||
}
|
||||
th {
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
td {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
//
|
||||
// Accordion styles //
|
||||
//
|
||||
.accordion {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
li {
|
||||
border: 0;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
@include transition(linear 0.1s);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.accordion-title {
|
||||
position: relative;
|
||||
border: 1px solid $color-black-01;
|
||||
padding: 14px 24px;
|
||||
cursor: pointer;
|
||||
@include transition(linear 0.1s);
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
background: $color-black;
|
||||
}
|
||||
&:before {
|
||||
right: 24px;
|
||||
width: 11px;
|
||||
height: 1px;
|
||||
}
|
||||
&:after {
|
||||
right: 29px;
|
||||
width: 1px;
|
||||
height: 11px;
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0;
|
||||
}
|
||||
* {
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
}
|
||||
.accordion-content {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
padding: 0 25px;
|
||||
@include transition(ease-out 0.2s);
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
}
|
||||
ul, ol {
|
||||
li {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
&:last-child {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
ul { list-style-type: circle; }
|
||||
}
|
||||
ol {
|
||||
&.list-ordered {
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 34px;
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.accordion-title {
|
||||
border-color: $color-black-09;
|
||||
&:after {
|
||||
@include transform(translateY(-50%) rotate(-90deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Accordion - Style 2 //
|
||||
//
|
||||
&.style-2 {
|
||||
li {
|
||||
margin-bottom: 14px;
|
||||
padding: 0;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.accordion-title {
|
||||
border: 0;
|
||||
border-bottom: 1px solid $color-black-02;
|
||||
padding: 0 0 10px;
|
||||
@include transition(linear 0.1s);
|
||||
&:before, &:after {
|
||||
margin-top: -6px;
|
||||
}
|
||||
&:before { right: 0; }
|
||||
&:after { right: 5px; }
|
||||
}
|
||||
.accordion-content {
|
||||
padding: 0 20px;
|
||||
}
|
||||
&.active {
|
||||
.accordion-title {
|
||||
border-bottom-color: $color-black-09;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Accordion - Style 3 //
|
||||
//
|
||||
&.style-3 {
|
||||
li {
|
||||
.accordion-title {
|
||||
background: $bg-grey-lighter;
|
||||
border: 0;
|
||||
}
|
||||
.accordion-content {
|
||||
padding: 0 24px;
|
||||
}
|
||||
&.active {
|
||||
.accordion-title {
|
||||
background: $bg-dark;
|
||||
color: $color-white-08;
|
||||
&:before, &:after {
|
||||
background: $color-white;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Border Radius //
|
||||
//
|
||||
&.border-radius {
|
||||
&:not(.style-2) {
|
||||
li {
|
||||
.accordion-title {
|
||||
border-radius: 0.375em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.rounded {
|
||||
&:not(.style-2) {
|
||||
li {
|
||||
.accordion-title {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-gray, .bg-light-gray {
|
||||
.accordion {
|
||||
&.style-3 {
|
||||
li {
|
||||
.accordion-title {
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.accordion {
|
||||
li {
|
||||
.accordion-title {
|
||||
border-color: $color-white-02;
|
||||
&:before, &:after {
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.accordion-title {
|
||||
border-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
li {
|
||||
.accordion-title {
|
||||
background: $color-white-01;
|
||||
}
|
||||
&.active {
|
||||
.accordion-title {
|
||||
background: $color-white;
|
||||
color: $color-primary;
|
||||
&:before, &:after {
|
||||
background: $color-black;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
//
|
||||
// Box Styles //
|
||||
//
|
||||
.box-shadow {
|
||||
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.13));
|
||||
}
|
||||
.box-shadow-with-hover {
|
||||
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.13));
|
||||
@include transition(ease-out 0.16s);
|
||||
&:hover {
|
||||
@include box-shadow(0 10px 40px 0 rgba(22,24,26,0.19));
|
||||
}
|
||||
}
|
||||
.hover-shadow {
|
||||
@include transition(ease-out 0.16s);
|
||||
&:hover {
|
||||
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.13));
|
||||
}
|
||||
}
|
||||
.hover-float {
|
||||
@include transition(ease-out 0.16s);
|
||||
&:hover {
|
||||
@include transform(translateY(-4px));
|
||||
}
|
||||
}
|
||||
.hover-scale {
|
||||
@include transition(ease-out 0.16s);
|
||||
&:hover {
|
||||
@include transform(scale(1.015));
|
||||
}
|
||||
}
|
||||
.hover-shrink {
|
||||
@include transition(ease-out 0.16s);
|
||||
&:hover {
|
||||
@include transform(scale(0.985));
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Square box //
|
||||
//
|
||||
div[class^="square-box"], div[class*=" square-box"],
|
||||
div[class^="circle-box"], div[class*=" circle-box"] {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
* {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.square-box-xs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
* {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.square-box-sm {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
* {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
.square-box, .square-box-md {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
* {
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
.square-box-lg {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
* {
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
.square-box-xl {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
* {
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Circle Box //
|
||||
//
|
||||
div[class^="circle-box"], div[class*=" circle-box"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.circle-box-xs {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
* {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.circle-box-sm {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
* {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
.circle-box, .circle-box-md {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
* {
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
.circle-box-lg {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
* {
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
.circle-box-xl {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
* {
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Box border radius //
|
||||
//
|
||||
.border-radius, .border-radius-0375 { border-radius: 0.375em; }
|
||||
.border-radius-025 { border-radius: 0.25em; }
|
||||
.border-radius-05 { border-radius: 0.5em; }
|
||||
.border-radius-10 { border-radius: 1em; }
|
||||
.border-radius-15 { border-radius: 1.5em; }
|
||||
.border-radius-20 { border-radius: 2em; }
|
||||
.border-radius-25 { border-radius: 2.5em; }
|
||||
.border-radius-30 { border-radius: 3em; }
|
||||
|
||||
//
|
||||
// Move boxes //
|
||||
//
|
||||
.move-top-100 {
|
||||
@include transform(translateY(-100px));
|
||||
margin-bottom: -100px;
|
||||
}
|
||||
.move-top-90 {
|
||||
@include transform(translateY(-90px));
|
||||
margin-bottom: -90px;
|
||||
}
|
||||
.move-top-80 {
|
||||
@include transform(translateY(-80px));
|
||||
margin-bottom: -80px;
|
||||
}
|
||||
.move-top-70 {
|
||||
@include transform(translateY(-70px));
|
||||
margin-bottom: -70px;
|
||||
}
|
||||
.move-top-60 {
|
||||
@include transform(translateY(-60px));
|
||||
margin-bottom: -60px;
|
||||
}
|
||||
.move-top-50 {
|
||||
@include transform(translateY(-50px));
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
.move-top-40 {
|
||||
@include transform(translateY(-40px));
|
||||
margin-bottom: -40px;
|
||||
}
|
||||
.move-top-30 {
|
||||
@include transform(translateY(-30px));
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
.move-top-20 {
|
||||
@include transform(translateY(-20px));
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
.move-top-10 {
|
||||
@include transform(translateY(-10px));
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,132 @@
|
|||
//
|
||||
// Clients Styles //
|
||||
//
|
||||
.client-box {
|
||||
text-align: center;
|
||||
a {
|
||||
img {
|
||||
opacity: 0.4;
|
||||
@include transition(ease-out 0.16s);
|
||||
}
|
||||
&:hover, &:focus {
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.owl-carousel {
|
||||
.client-box {
|
||||
img { display: inline-block; }
|
||||
}
|
||||
}
|
||||
//
|
||||
// Clients Grid //
|
||||
//
|
||||
.clients-grid {
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
li {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 16.6%;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
left: -1px;
|
||||
height: 100%;
|
||||
border-left: 1px dashed $color-black-01;
|
||||
}
|
||||
&:after {
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px dashed $color-black-01;
|
||||
}
|
||||
a {
|
||||
img {
|
||||
opacity: 0.4;
|
||||
@include transition(ease-out 0.16s);
|
||||
}
|
||||
&:hover, &:focus {
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
li { width: 25%; }
|
||||
}
|
||||
@include breakpoint-less(sm) {
|
||||
li { width: 33.3%; }
|
||||
}
|
||||
@include breakpoint-less(xs) {
|
||||
li { width: 50%; }
|
||||
}
|
||||
&.column-5 {
|
||||
li { width: 20%; }
|
||||
@include breakpoint-less(md) {
|
||||
li { width: 25%; }
|
||||
}
|
||||
@include breakpoint-less(sm) {
|
||||
li { width: 33.3%; }
|
||||
}
|
||||
@include breakpoint-less(xs) {
|
||||
li { width: 50%; }
|
||||
}
|
||||
}
|
||||
&.column-4 {
|
||||
li { width: 25%; }
|
||||
@include breakpoint-less(sm) {
|
||||
li { width: 33.3%; }
|
||||
}
|
||||
@include breakpoint-less(xs) {
|
||||
li { width: 50%; }
|
||||
}
|
||||
}
|
||||
&.column-3 {
|
||||
li { width: 33.3%; }
|
||||
@include breakpoint-less(sm) {
|
||||
li { width: 50%; }
|
||||
}
|
||||
}
|
||||
&.column-2 {
|
||||
li { width: 50%; }
|
||||
}
|
||||
//
|
||||
// Border Style - Solid //
|
||||
//
|
||||
&.border-style-solid {
|
||||
border: 0;
|
||||
li {
|
||||
&:before { border-left-style: solid; }
|
||||
&:after { border-bottom-style: solid; }
|
||||
}
|
||||
}
|
||||
//
|
||||
// Border Style - Dotted //
|
||||
//
|
||||
&.border-style-dotted {
|
||||
border: 0;
|
||||
li {
|
||||
&:before { border-left-style: dotted; }
|
||||
&:after { border-bottom-style: dotted; }
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.clients-grid {
|
||||
li {
|
||||
&:before, &:after { border-color: $color-white-02; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
//
|
||||
// Contact Form Styles //
|
||||
//
|
||||
.submit-result {
|
||||
span {
|
||||
display: none;
|
||||
@include transition(ease-out 0.2s);
|
||||
&.show-result {
|
||||
margin-top: 30px;
|
||||
display: block;
|
||||
}
|
||||
&#success { color: $color-green; }
|
||||
&#error { color: $color-red; }
|
||||
.error-color { background: rgba(255, 0, 0, 0.1); }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
//
|
||||
// Countdown Styles //
|
||||
//
|
||||
.countdown {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
div { width: 25%; }
|
||||
}
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
//
|
||||
// Divider Style //
|
||||
//
|
||||
hr {
|
||||
background: $color-black-01;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.text-center {
|
||||
hr {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.text-right {
|
||||
hr {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Divider - Width //
|
||||
//
|
||||
.divider-width-10px {
|
||||
hr { width: 10px; }
|
||||
}
|
||||
.divider-width-20px {
|
||||
hr { width: 20px; }
|
||||
}
|
||||
.divider-width-30px {
|
||||
hr { width: 30px; }
|
||||
}
|
||||
.divider-width-40px {
|
||||
hr { width: 40px; }
|
||||
}
|
||||
.divider-width-50px {
|
||||
hr { width: 50px; }
|
||||
}
|
||||
.divider-width-60px {
|
||||
hr { width: 60px; }
|
||||
}
|
||||
.divider-width-70px {
|
||||
hr { width: 70px; }
|
||||
}
|
||||
|
||||
//
|
||||
// Divider - Height //
|
||||
//
|
||||
.divider-height-2px {
|
||||
hr { height: 2px; }
|
||||
}
|
||||
.divider-height-3px {
|
||||
hr { height: 3px; }
|
||||
}
|
||||
|
||||
//
|
||||
// Divider on dark //
|
||||
//
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
hr { background: $color-white-01; }
|
||||
}
|
||||
|
||||
//
|
||||
// Divider - Dots //
|
||||
//
|
||||
.divider-dots {
|
||||
span {
|
||||
display: inline-block;
|
||||
background: $color-black-01;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Sizes //
|
||||
//
|
||||
&.divider-dots-sm {
|
||||
span {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-right: 6px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.divider-dots-lg {
|
||||
span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.divider-dots {
|
||||
span {
|
||||
background: $color-white-01;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Divider - ZigZag //
|
||||
//
|
||||
.divider-zigzag {
|
||||
height: 16px;
|
||||
span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
height: 16px;
|
||||
margin-right: -3px;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
background: $color-black-02;
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
}
|
||||
&:before {
|
||||
left: 0;
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
&:after {
|
||||
right: 0;
|
||||
@include transform(rotate(-45deg));
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Sizes //
|
||||
//
|
||||
&.divider-zigzag-sm {
|
||||
height: 14px;
|
||||
span {
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
margin-right: -2px;
|
||||
&:before, &:after {
|
||||
width: 7px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.divider-zigzag-lg {
|
||||
height: 18px;
|
||||
span {
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
margin-right: -4px;
|
||||
&:before, &:after {
|
||||
width: 14px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// ZigZag Colors //
|
||||
//
|
||||
.divider-zigzag {
|
||||
&.divider-zigzag-color-black {
|
||||
span { &:before, &:after { background: $color-black; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-09 {
|
||||
span { &:before, &:after { background: $color-black-09; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-08 {
|
||||
span { &:before, &:after { background: $color-black-08; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-07 {
|
||||
span { &:before, &:after { background: $color-black-07; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-06 {
|
||||
span { &:before, &:after { background: $color-black-06; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-05 {
|
||||
span { &:before, &:after { background: $color-black-05; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-04 {
|
||||
span { &:before, &:after { background: $color-black-04; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-03 {
|
||||
span { &:before, &:after { background: $color-black-03; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-02 {
|
||||
span { &:before, &:after { background: $color-black-02; } }
|
||||
}
|
||||
&.divider-zigzag-color-black-01 {
|
||||
span { &:before, &:after { background: $color-black-01; } }
|
||||
}
|
||||
&.divider-zigzag-color-white {
|
||||
span { &:before, &:after { background: $color-white; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-09 {
|
||||
span { &:before, &:after { background: $color-white-09; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-08 {
|
||||
span { &:before, &:after { background: $color-white-08; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-07 {
|
||||
span { &:before, &:after { background: $color-white-07; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-06 {
|
||||
span { &:before, &:after { background: $color-white-06; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-05 {
|
||||
span { &:before, &:after { background: $color-white-05; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-04 {
|
||||
span { &:before, &:after { background: $color-white-04; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-03 {
|
||||
span { &:before, &:after { background: $color-white-03; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-02 {
|
||||
span { &:before, &:after { background: $color-white-02; } }
|
||||
}
|
||||
&.divider-zigzag-color-white-01 {
|
||||
span { &:before, &:after { background: $color-white-01; } }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
//
|
||||
// Feature box //
|
||||
//
|
||||
.feature-box {
|
||||
@include display-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
padding-left: 74px;
|
||||
@include breakpoint-less(md) {
|
||||
padding-left: 66px;
|
||||
}
|
||||
.feature-box-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $button-grey;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
@include transition(ease-out 0.16s);
|
||||
* {
|
||||
margin: 0;
|
||||
line-height: 50px;
|
||||
vertical-align: middle;
|
||||
color: $color-black-09;
|
||||
@include transition(ease-out 0.16s);
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
//
|
||||
// Positions //
|
||||
//
|
||||
&.middle {
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
.feature-box-icon {
|
||||
background: $button-grey-darker;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Sizes //
|
||||
//
|
||||
&.feature-box-xl {
|
||||
min-height: 70px;
|
||||
padding-left: 94px;
|
||||
@include breakpoint-less(md) {
|
||||
padding-left: 86px;
|
||||
}
|
||||
.feature-box-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
* {
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.feature-box-lg {
|
||||
min-height: 60px;
|
||||
padding-left: 84px;
|
||||
@include breakpoint-less(md) {
|
||||
padding-left: 80px;
|
||||
}
|
||||
.feature-box-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
* {
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.feature-box-sm {
|
||||
min-height: 40px;
|
||||
padding-left: 64px;
|
||||
@include breakpoint-less(md) {
|
||||
padding-left: 56px;
|
||||
}
|
||||
.feature-box-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
* {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.feature-box-xs {
|
||||
min-height: 32px;
|
||||
padding-left: 54px;
|
||||
@include breakpoint-less(md) {
|
||||
padding-left: 48px;
|
||||
}
|
||||
.feature-box-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
* {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Colors //
|
||||
//
|
||||
&.dark {
|
||||
.feature-box-icon {
|
||||
background: $button-dark-lighter;
|
||||
* {
|
||||
color: $color-white-09;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.feature-box-icon {
|
||||
background: $button-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.white {
|
||||
.feature-box-icon {
|
||||
background: $color-white;
|
||||
}
|
||||
&:hover {
|
||||
.feature-box-icon {
|
||||
background: $color-white-09;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.outline-gray, &.outline-grey {
|
||||
.feature-box-icon {
|
||||
background: transparent;
|
||||
border: 1px solid $button-grey;
|
||||
}
|
||||
&:hover {
|
||||
.feature-box-icon {
|
||||
background: $button-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.outline-dark {
|
||||
.feature-box-icon {
|
||||
background: transparent;
|
||||
border: 1px solid $color-black-08;
|
||||
}
|
||||
&:hover {
|
||||
.feature-box-icon {
|
||||
background: $color-dark;
|
||||
* {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.outline-white {
|
||||
.feature-box-icon {
|
||||
background: transparent;
|
||||
border: 1px solid $color-white-09;
|
||||
* {
|
||||
color: $color-white-09;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.feature-box-icon {
|
||||
background: $color-white;
|
||||
* {
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,482 @@
|
|||
//
|
||||
// Hover box Styles //
|
||||
//
|
||||
div[class^="hoverbox"] {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@include transform(translate3d(0,0,0));
|
||||
display: inline-block;
|
||||
img {
|
||||
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover box - Style 1, 2 //
|
||||
//
|
||||
.hoverbox-1,
|
||||
.hoverbox-2 {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background: $color-black-05;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
.hover-content {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
color: $color-white-07;
|
||||
@include transition(ease-out 0.12s);
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
&:before {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
.hover-content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hoverbox-1 {
|
||||
.hover-content {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
@include transform(translateY(-50%));
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
padding: 0 30px;
|
||||
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.hover-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hoverbox-2 {
|
||||
.hover-content {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@include transform(translateY(5px));
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.hover-content {
|
||||
@include transform(translateY(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover box - Style 3 //
|
||||
//
|
||||
.hoverbox-3 {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
@include transform(scale(0.99));
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background: $color-white;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
.hover-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
@include transform(translateY(-50%));
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
margin-top: 4px;
|
||||
padding: 0 30px;
|
||||
@include transition(ease-out 0.12s);
|
||||
@include breakpoint-less(md) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
&:before {
|
||||
@include transform(scale(1));
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
.hover-content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover box - Style 4 //
|
||||
//
|
||||
.hoverbox-4 {
|
||||
.hover-content {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
@include transform(translateY(4px));
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background: $color-white;
|
||||
padding: 30px;
|
||||
@include transition(ease-out 0.12s);
|
||||
@include breakpoint-less(md) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
.hover-content {
|
||||
@include transform(translateY(0));
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover box - Style 5, 6 //
|
||||
//
|
||||
.hoverbox-5,
|
||||
.hoverbox-6 {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $color-black-04;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
.content,
|
||||
.hover-content {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
color: $color-white-07;
|
||||
@include transition(ease-out 0.12s);
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
.hover-content {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
&:after {
|
||||
background: $color-black-05;
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
.content {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.hover-content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hoverbox-5 {
|
||||
.content,
|
||||
.hover-content {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@include transform(translateY(-50%));
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.hover-content {
|
||||
margin-top: 5px;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.content {
|
||||
margin-top: -5px;
|
||||
}
|
||||
.hover-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hoverbox-6 {
|
||||
.content,
|
||||
.hover-content {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
}
|
||||
.hover-content {
|
||||
@include transform(translateY(5px));
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.content {
|
||||
@include transform(translateY(-5px));
|
||||
}
|
||||
.hover-content {
|
||||
@include transform(translateY(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover box - Style 7 //
|
||||
//
|
||||
.hoverbox-7 {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $color-black-04;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
.content,
|
||||
.hover-content {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
color: $color-white-07;
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
top: 0;
|
||||
}
|
||||
.hover-content {
|
||||
bottom: 0;
|
||||
@include transform(translateY(5px));
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
&:hover, &:focus {
|
||||
&:after {
|
||||
background: $color-black-05;
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
.hover-content {
|
||||
@include transform(translateY(0));
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hover box - Style 8, 9, 10 //
|
||||
//
|
||||
.hoverbox-8,
|
||||
.hoverbox-9,
|
||||
.hoverbox-10 {
|
||||
a {
|
||||
display: block;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
background: $color-white-01;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
background: $color-white;
|
||||
padding: 10px 16px;
|
||||
color: $color-black-09;
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0;
|
||||
color: $color-black-09;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
a {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
}
|
||||
}
|
||||
.hoverbox-8 {
|
||||
.content {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%, -50%));
|
||||
}
|
||||
}
|
||||
.hoverbox-9 {
|
||||
.content {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
.hoverbox-10 {
|
||||
.content {
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.hoverbox-11 {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background: $color-black-05;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
.hover-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $color-white-07;
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $color-white;
|
||||
}
|
||||
.top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
-webkit-transform: translateY(5px);
|
||||
transform: translateY(5px);
|
||||
opacity: 0;
|
||||
padding: 30px;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-transform: translateY(5px);
|
||||
transform: translateY(5px);
|
||||
opacity: 0;
|
||||
padding: 30px;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
&:before {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
.hover-content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
.top, .bottom {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.top { @include transition-delay(0.05s); }
|
||||
.bottom { @include transition-delay(0.10s); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hoverbox-1,
|
||||
.hoverbox-2,
|
||||
.hoverbox-5,
|
||||
.hoverbox-6,
|
||||
.hoverbox-7,
|
||||
.hoverbox-11 {
|
||||
a {
|
||||
&:not(.button, .button-circle, .button-text) {
|
||||
color: $color-white-07;
|
||||
&:hover, &:focus { color: $color-white; }
|
||||
}
|
||||
}
|
||||
a {
|
||||
&.button-text-1,
|
||||
&.button-text-2,
|
||||
&.button-text-3 {
|
||||
color: $color-white-08;
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
&.button-text-1 {
|
||||
&:before { background: $color-white-03; }
|
||||
&:after { background: $color-white; }
|
||||
}
|
||||
&.button-text-2 {
|
||||
&:before { background: $color-white-04; }
|
||||
&:after { background: $color-white; }
|
||||
}
|
||||
&.button-text-3 {
|
||||
&:before { background: $color-white-08; }
|
||||
&:hover {
|
||||
&:before { background: $color-white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
//
|
||||
// Lightbox Styles //
|
||||
//
|
||||
.lightbox-image-box,
|
||||
.lightbox-media-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
&[class*=' border-radius-'], &[class^='border-radius-'] {
|
||||
@include transform(translate3d(0,0,0));
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
background: $color-black-01;
|
||||
@include transition(ease-out 0.12s);
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1));
|
||||
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
i {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%, -50%));
|
||||
background: $color-black-06;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
color: $color-white-09;
|
||||
@include transition(ease-out 0.16s);
|
||||
}
|
||||
&.icon-xl, &.icon-2xl {
|
||||
i {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
&.icon-3xl, &.icon-4xl, &.icon-5xl {
|
||||
i {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
i {
|
||||
@include transform(translate(-50%, -50%) scale(0.94));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-bg {
|
||||
background: $color-black;
|
||||
}
|
||||
.mfp-container,
|
||||
.mfp-bg {
|
||||
opacity: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transition(ease-out 0.16s);
|
||||
}
|
||||
.mfp-container {
|
||||
@include transform(scale(0.98));
|
||||
padding: 0 20px;
|
||||
}
|
||||
.mfp-ready {
|
||||
.mfp-container {
|
||||
@include transform(scale(1));
|
||||
opacity: 1;
|
||||
}
|
||||
&.mfp-bg {
|
||||
opacity: 0.97;
|
||||
}
|
||||
}
|
||||
.mfp-removing {
|
||||
.mfp-container,
|
||||
&.mfp-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
.mfp-container {
|
||||
@include transform(scale(0.98));
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&.mfp-close {
|
||||
display: block;
|
||||
top: -5px;
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: auto;
|
||||
font-size: 24px;
|
||||
@include transition(linear 0.1s);
|
||||
&:hover {
|
||||
top: -5px;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mfp-iframe-holder {
|
||||
.mfp-close {
|
||||
top: -45px;
|
||||
&:hover { top: -45px; }
|
||||
}
|
||||
}
|
||||
.mfp-close-btn-in {
|
||||
.mfp-close {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-arrow {
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
.mfp-arrow-left {
|
||||
&:before { border-right: 0; }
|
||||
}
|
||||
.mfp-arrow-right {
|
||||
&:before { border-left: 0; }
|
||||
}
|
||||
|
||||
@include breakpoint-less(xs) {
|
||||
button.mfp-arrow {
|
||||
background: $color-black-05;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-top: -35px;
|
||||
&:active {
|
||||
margin-top: -35px;
|
||||
}
|
||||
}
|
||||
button.mfp-arrow-left {
|
||||
margin-left: 20px;
|
||||
&:before, &:after {
|
||||
margin-top: 15px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
button.mfp-arrow-right {
|
||||
margin-right: 20px;
|
||||
&:before, &:after {
|
||||
margin-top: 15px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -30px;
|
||||
.mfp-title {
|
||||
color: $color-white-07;
|
||||
}
|
||||
.mfp-counter {
|
||||
color: $color-white-06;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-iframe-scaler iframe, .mfp-figure::after {
|
||||
@include box-shadow(0 0 14px 0 rgba(0,0,0,0.3));
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
//
|
||||
// Google Map Styles //
|
||||
//
|
||||
.gmap { width: 100%; }
|
||||
.gmap-xs { height: 300px; }
|
||||
.gmap-sm { height: 350px; }
|
||||
.gmap-md { height: 400px; }
|
||||
.gmap-lg { height: 470px; }
|
||||
.gmap-xl { height: 550px; }
|
||||
@include breakpoint-less(md) {
|
||||
.gmap-xs { height: 250px; }
|
||||
.gmap-sm { height: 300px; }
|
||||
.gmap-md { height: 350px; }
|
||||
.gmap-lg { height: 400px; }
|
||||
.gmap-xl { height: 450px; }
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
//
|
||||
// Pie Chart styles //
|
||||
//
|
||||
.pie-chart {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.pie-chart-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@include transform(translateY(-50%));
|
||||
width: 100%;
|
||||
margin-top: -3px;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.pie-chart-content .percent {
|
||||
&::after {
|
||||
content: '%';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
//
|
||||
// Prices Styles //
|
||||
//
|
||||
.prices-box {
|
||||
border: 1px solid $color-black-01;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
.price {
|
||||
margin: 20px 0;
|
||||
span {
|
||||
display: block;
|
||||
font: 300 14px $font-family-primary;
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
&:before {
|
||||
content: '\f155';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -10px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
font: 300 14px $font-family-primary;
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price-features {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.btn, .button, .button-circle, .button-text-1, .button-text-2, .button-text-3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
&.prices-box-recommended {
|
||||
border-color: $color-black;
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.prices-box {
|
||||
border-color: $color-white-02;
|
||||
color: $color-white-05;
|
||||
&.prices-box-recommended {
|
||||
border-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
//
|
||||
// Progress bar Styles //
|
||||
//
|
||||
.progress-box {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.progress,
|
||||
.progress-bar {
|
||||
height: 1px;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.progress {
|
||||
overflow: visible;
|
||||
background: $color-black-015;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.progress-bar {
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
background: $color-black-09;
|
||||
width: 30%;
|
||||
border: none;
|
||||
color: $color-black-09;
|
||||
span {
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
}
|
||||
&.progress-radius {
|
||||
border-radius: 10px;
|
||||
.progress-bar { border-radius: 10px; }
|
||||
}
|
||||
&.progress-height-2px {
|
||||
height: 2px;
|
||||
.progress-bar { height: 2px; }
|
||||
}
|
||||
&.progress-height-3px {
|
||||
height: 3px;
|
||||
.progress-bar { height: 3px; }
|
||||
}
|
||||
&.progress-height-4px {
|
||||
height: 4px;
|
||||
.progress-bar { height: 4px; }
|
||||
}
|
||||
&.progress-height-5px {
|
||||
height: 5px;
|
||||
.progress-bar { height: 5px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.progress-box {
|
||||
.progress {
|
||||
background: $color-white-02;
|
||||
.progress-bar {
|
||||
background: $color-white;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,713 @@
|
|||
//
|
||||
// Slider styles //
|
||||
//
|
||||
.owl-carousel {
|
||||
&[data-owl-nav="true"] {
|
||||
&:not(.owl-nav-left, .owl-nav-right, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
||||
padding: 0 56px;
|
||||
@include breakpoint-less(md) {
|
||||
padding: 0 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.owl-item {
|
||||
img { width: auto; }
|
||||
}
|
||||
.owl-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
@include transform(translateY(-50%));
|
||||
z-index: -1;
|
||||
height: 36px;
|
||||
button {
|
||||
&.owl-prev { left: 0; }
|
||||
&.owl-next { right: 0; }
|
||||
&.owl-next, &.owl-prev {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
color: $color-black-06;
|
||||
@include transition(ease-out 0.16s);
|
||||
i {
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: $bg-grey;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
height: 32px;
|
||||
button {
|
||||
&.owl-next, &.owl-prev {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
i {
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-left, &.owl-nav-right {
|
||||
.owl-nav {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
.owl-dots {
|
||||
margin-top: 20px;
|
||||
margin-right: -2px;
|
||||
margin-left: -2px;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
@include breakpoint-less(md) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.owl-dot {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 2px;
|
||||
vertical-align: middle;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
@include transition(ease-out 0.16s);
|
||||
}
|
||||
&:before {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
opacity: 0;
|
||||
background: transparent;
|
||||
border: 1px solid $color-black;
|
||||
}
|
||||
&:after {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%,-50%));
|
||||
opacity: 0.4;
|
||||
background: $color-black;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
&:hover, &:focus, &.active {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
&:before, &:after {
|
||||
opacity: 1;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not([data-owl-dots="false"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
||||
.owl-nav {
|
||||
margin-top: -20px;
|
||||
@include breakpoint-less(md) {
|
||||
margin-top: -18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-dark'], div[class*=' bg-dark'], div[class^='bg-black'], div[class*=' bg-black'] {
|
||||
.owl-carousel {
|
||||
.owl-nav {
|
||||
button {
|
||||
&.owl-next, &.owl-prev {
|
||||
color: $color-white-07;
|
||||
&:hover, &:focus {
|
||||
background: $color-white-015;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.owl-dots {
|
||||
.owl-dot {
|
||||
&:before { border-color: $color-white; }
|
||||
&:after { background: $color-white; }
|
||||
&:hover, &:focus, &.active {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-grey, .bg-grey-lighter, .bg-grey-lightest {
|
||||
.owl-carousel {
|
||||
.owl-nav {
|
||||
button {
|
||||
&.owl-next, &.owl-prev {
|
||||
&:hover, &:focus {
|
||||
background: $color-black-005;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Owl Nav - Left, Right //
|
||||
//
|
||||
.owl-carousel {
|
||||
&.owl-nav-left,
|
||||
&.owl-nav-right {
|
||||
.owl-nav {
|
||||
height: auto;
|
||||
button {
|
||||
position: static;
|
||||
display: block;
|
||||
margin: 8px 0;
|
||||
&.owl-prev, &.owl-next {
|
||||
right: auto;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-left {
|
||||
padding: 0 0 0 56px;
|
||||
@include breakpoint-less(md) {
|
||||
padding: 0 0 0 48px;
|
||||
}
|
||||
.owl-nav {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
&.owl-nav-right {
|
||||
padding: 0 56px 0 0;
|
||||
@include breakpoint-less(md) {
|
||||
padding: 0 48px 0 0;
|
||||
}
|
||||
.owl-nav {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Owl Nav Overlay //
|
||||
//
|
||||
.owl-carousel {
|
||||
&.owl-nav-overlay,
|
||||
&.owl-nav-overlay-left,
|
||||
&.owl-nav-overlay-right {
|
||||
.owl-nav {
|
||||
z-index: 1;
|
||||
padding-bottom: 0;
|
||||
button {
|
||||
&.owl-next, &.owl-prev {
|
||||
opacity: 1;
|
||||
background: $color-black-03;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: $color-white-08;
|
||||
text-align: center;
|
||||
i {
|
||||
line-height: 50px;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
background: $color-black-04;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.owl-nav {
|
||||
opacity: 0;
|
||||
@include transition(ease-out 0.16s);
|
||||
}
|
||||
&:hover {
|
||||
.owl-nav { opacity: 1; }
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
.owl-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlay {
|
||||
.owl-nav {
|
||||
height: 50px;
|
||||
button {
|
||||
&.owl-prev { left: 20px; }
|
||||
&.owl-next { right: 20px; }
|
||||
}
|
||||
}
|
||||
&:not([data-owl-dots="false"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
||||
.owl-nav {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlay-left,
|
||||
&.owl-nav-overlay-right {
|
||||
.owl-nav {
|
||||
height: auto;
|
||||
button {
|
||||
&.owl-next, &.owl-prev {
|
||||
position: static;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not([data-owl-dots="false"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
||||
.owl-nav {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlay-left {
|
||||
.owl-nav {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlay-right {
|
||||
.owl-nav {
|
||||
right: 20px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Owl Dots - Left, Right //
|
||||
//
|
||||
.owl-carousel {
|
||||
&.owl-dots-left {
|
||||
.owl-dots { text-align: left; }
|
||||
}
|
||||
&.owl-dots-right {
|
||||
.owl-dots { text-align: right; }
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Owl Dots Overlay //
|
||||
//
|
||||
.owl-carousel {
|
||||
&.owl-dots-overlay,
|
||||
&.owl-dots-overlay-left,
|
||||
&.owl-dots-overlay-right {
|
||||
.owl-dots {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
background: $color-black-03;
|
||||
border-radius: 20px;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
@include breakpoint-less(md) {
|
||||
bottom: 16px;
|
||||
}
|
||||
.owl-dot {
|
||||
&:before { border-color: $color-white; }
|
||||
&:after { background: $color-white; }
|
||||
&:hover, &:focus, &.active {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-dots-overlay {
|
||||
.owl-dots {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%));
|
||||
}
|
||||
&.owl-nav-overlap-right {
|
||||
.owl-dots {
|
||||
margin-left: -12.5px;
|
||||
}
|
||||
}
|
||||
&.owl-nav-left {
|
||||
.owl-dots {
|
||||
margin-left: 28px;
|
||||
}
|
||||
}
|
||||
&.owl-nav-right {
|
||||
.owl-dots {
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
&.owl-nav-overlap-left {
|
||||
.owl-dots {
|
||||
margin-left: 12.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
&.owl-nav-overlap-left, &.owl-nav-overlap-right {
|
||||
.owl-dots {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-dots-overlay-left {
|
||||
.owl-dots {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
@include breakpoint-less(md) {
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
&[data-owl-nav="true"], &.owl-nav-left {
|
||||
&:not(.owl-nav-right, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
||||
.owl-dots {
|
||||
left: 76px;
|
||||
@include breakpoint-less(md) {
|
||||
left: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlap {
|
||||
.owl-dots {
|
||||
left: 45px;
|
||||
@include breakpoint-less(md) {
|
||||
left: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
&.owl-nav-overlap-left {
|
||||
.owl-dots {
|
||||
left: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-dots-overlay-right {
|
||||
.owl-dots {
|
||||
right: 20px;
|
||||
left: auto;
|
||||
@include breakpoint-less(md) {
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
&[data-owl-nav="true"] {
|
||||
&:not(.owl-nav-left, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
||||
.owl-dots {
|
||||
right: 76px;
|
||||
@include breakpoint-less(md) {
|
||||
right: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlap, &.owl-nav-overlap-right {
|
||||
.owl-dots {
|
||||
right: 45px;
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
&.owl-nav-overlap-left {
|
||||
.owl-dots {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
&.owl-nav-overlap, &.owl-nav-overlap-left, &.owl-nav-overlap-right {
|
||||
.owl-dots {
|
||||
right: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Owl Dots Overlap //
|
||||
//
|
||||
.owl-carousel {
|
||||
&.owl-dots-overlap,
|
||||
&.owl-dots-overlap-left,
|
||||
&.owl-dots-overlap-right {
|
||||
.owl-dots {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: $color-black;
|
||||
border-radius: 20px;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
.owl-dot {
|
||||
&:before { border-color: $color-white; }
|
||||
&:after { background: $color-white; }
|
||||
&:hover, &:focus, &.active {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-dots-overlap {
|
||||
.owl-dots {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
@include transform(translateY(50%) translateX(-50%));
|
||||
}
|
||||
&.owl-nav-left {
|
||||
.owl-dots {
|
||||
margin-left: 28px;
|
||||
}
|
||||
}
|
||||
&.owl-nav-right {
|
||||
.owl-dots {
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlap-right {
|
||||
.owl-dots {
|
||||
margin-left: -12.5px;
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
&.owl-nav-overlap-left {
|
||||
.owl-dots {
|
||||
margin-left: 12.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.owl-dots-overlap-left,
|
||||
&.owl-dots-overlap-right {
|
||||
.owl-dots {
|
||||
@include transform(translateY(50%));
|
||||
}
|
||||
}
|
||||
&.owl-dots-overlap-left {
|
||||
.owl-dots {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
@include breakpoint-less(md) {
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
&[data-owl-nav="true"], &.owl-nav-left {
|
||||
&:not(.owl-nav-right, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
||||
.owl-dots {
|
||||
left: 76px;
|
||||
@include breakpoint-less(md) {
|
||||
left: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlap {
|
||||
.owl-dots {
|
||||
left: 45px;
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
&.owl-nav-overlap-left {
|
||||
.owl-dots {
|
||||
left: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-dots-overlap-right {
|
||||
.owl-dots {
|
||||
right: 20px;
|
||||
left: auto;
|
||||
@include breakpoint-less(md) {
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
&[data-owl-nav="true"], &.owl-nav-right {
|
||||
&:not(.owl-nav-left, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
||||
.owl-dots {
|
||||
right: 76px;
|
||||
@include breakpoint-less(md) {
|
||||
right: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlap, &.owl-nav-overlap-right {
|
||||
.owl-dots {
|
||||
right: 45px;
|
||||
@include breakpoint-less(md) {
|
||||
right: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Owl Nav Overlap //
|
||||
//
|
||||
.owl-carousel {
|
||||
&.owl-nav-overlap {
|
||||
padding: 0 25px;
|
||||
.owl-nav {
|
||||
right: 25px;
|
||||
left: 25px;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
button {
|
||||
opacity: 0.9;
|
||||
background: $color-black;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
color: $color-white;
|
||||
&.owl-prev {
|
||||
right: auto;
|
||||
left: 0;
|
||||
@include transform(translateX(-50%));
|
||||
}
|
||||
&.owl-next {
|
||||
right: 0;
|
||||
left: auto;
|
||||
@include transform(translateX(50%));
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
button {
|
||||
&:hover {
|
||||
&.owl-prev { @include transform(translateX(-50%) scale(0.94)); }
|
||||
&.owl-next { @include transform(translateX(50%) scale(0.94)); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not([data-owl-dots="false"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
||||
.owl-nav {
|
||||
margin-top: -20px;
|
||||
@include breakpoint-less(md) {
|
||||
margin-top: -18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
padding: 0 20px;
|
||||
.owl-nav {
|
||||
right: 20px;
|
||||
left: 20px;
|
||||
height: 40px;
|
||||
button.owl-prev,
|
||||
button.owl-next {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlap-left {
|
||||
@include breakpoint-above(lg) {
|
||||
padding: 0 0 0 25px;
|
||||
.owl-nav {
|
||||
left: 25px;
|
||||
right: auto;
|
||||
@include transform(translateY(-50%) translateX(-50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlap-right {
|
||||
padding: 0 25px 0 0;
|
||||
.owl-nav {
|
||||
left: auto;
|
||||
right: 25px;
|
||||
@include transform(translateY(-50%) translateX(50%));
|
||||
}
|
||||
}
|
||||
&.owl-nav-overlap-left,
|
||||
&.owl-nav-overlap-right {
|
||||
.owl-nav {
|
||||
z-index: 1;
|
||||
width: 50px;
|
||||
height: auto;
|
||||
padding-bottom: 0;
|
||||
button.owl-prev,
|
||||
button.owl-next {
|
||||
position: static;
|
||||
right: 0;
|
||||
left: 0;
|
||||
opacity: 0.9;
|
||||
background: $color-black;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 4px 0;
|
||||
border-radius: 50%;
|
||||
color: $color-white;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
button {
|
||||
&:hover {
|
||||
@include transform(scale(0.94));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not([data-owl-dots="false"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
||||
.owl-nav {
|
||||
margin-top: -20px;
|
||||
@include breakpoint-less(md) {
|
||||
margin-top: -18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
padding: 0 20px 0 0;
|
||||
.owl-nav {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
@include transform(translateY(-50%) translateX(50%));
|
||||
width: 40px;
|
||||
button.owl-prev,
|
||||
button.owl-next {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
//
|
||||
// Team Styles //
|
||||
//
|
||||
.team-wrapper {
|
||||
.team-box {
|
||||
text-align: center;
|
||||
.team-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
@include transform(scale(1));
|
||||
width: 100%;
|
||||
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
background: $color-black-04;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
@include transition(ease-out 0.12s);
|
||||
ul {
|
||||
list-style-type: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
@include transform(translateY(-50%) scale(0.96));
|
||||
margin: 0 -7px;
|
||||
padding: 0 30px;
|
||||
@include transition(ease-out 0.12s);
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 7px;
|
||||
a {
|
||||
&:not([class*=' button'], [class^='button']) {
|
||||
color: $color-white;
|
||||
&:hover {
|
||||
color: $color-white-07;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
@include filter(blur(1.5px));
|
||||
}
|
||||
div {
|
||||
opacity: 1;
|
||||
ul {
|
||||
@include transform(translateY(-50%) scale(1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
span {
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
}
|
||||
&.team-box-hover-2 {
|
||||
.team-box {
|
||||
.team-img {
|
||||
div {
|
||||
top: auto;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
@include transform(translateY(5px));
|
||||
background: $color-white;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 15px 20px;
|
||||
ul {
|
||||
position: static;
|
||||
top: auto;
|
||||
@include transform(translateY(0) scale(1));
|
||||
padding: 0;
|
||||
li {
|
||||
a {
|
||||
&:not([class*=' button'], [class^='button']) {
|
||||
color: $color-primary;
|
||||
&:hover, &:focus { color: $color-dark; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
@include filter(blur(0));
|
||||
}
|
||||
div {
|
||||
@include transform(translateY(0));
|
||||
ul {
|
||||
@include transform(translateY(0) scale(1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-left {
|
||||
.team-box { text-align: left; }
|
||||
}
|
||||
.text-right {
|
||||
.team-box { text-align: right; }
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
//
|
||||
// Testimonial Styles //
|
||||
//
|
||||
.testimonial-box {
|
||||
max-width: 730px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Testimonial Grid //
|
||||
//
|
||||
.testimonial-grid {
|
||||
overflow: hidden;
|
||||
|
||||
&.column-2 {
|
||||
@include breakpoint-above(lg) {
|
||||
.testimonial-grid-box {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.column-1 {
|
||||
.testimonial-grid-box {
|
||||
width: 100%;
|
||||
padding: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial-grid-box {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
padding: 30px;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
left: -1px;
|
||||
height: 100%;
|
||||
border-left: 1px dashed $color-black-01;
|
||||
}
|
||||
&:after {
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px dashed $color-black-01;
|
||||
}
|
||||
.testimonial-img {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.testimonial-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
.testimonial-grid-box {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(sm) {
|
||||
.testimonial-grid-box {
|
||||
width: 100%;
|
||||
padding: 30px 0;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Border Style - Solid //
|
||||
//
|
||||
&.border-style-solid {
|
||||
border: 0;
|
||||
.testimonial-grid-box {
|
||||
&:before { border-left-style: solid; }
|
||||
&:after { border-bottom-style: solid; }
|
||||
}
|
||||
}
|
||||
//
|
||||
// Border Style - Dotted //
|
||||
//
|
||||
&.border-style-dotted {
|
||||
border: 0;
|
||||
.testimonial-grid-box {
|
||||
&:before { border-left-style: dotted; }
|
||||
&:after { border-bottom-style: dotted; }
|
||||
}
|
||||
}
|
||||
//
|
||||
// Borderless //
|
||||
//
|
||||
&.border-0 {
|
||||
margin: -15px;
|
||||
.testimonial-grid-box {
|
||||
padding: 15px;
|
||||
&:before, &:after { border: 0; }
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(sm) {
|
||||
&.border-0 {
|
||||
margin: -15px 0;
|
||||
.testimonial-grid-box { padding: 15px 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.testimonial-grid-box {
|
||||
&:before, &:after { border-color: $color-white-02; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
//
|
||||
// Text Link Styles //
|
||||
//
|
||||
*[class^='text-link-'], *[class*=' text-link-'] {
|
||||
color: $color-black-09;
|
||||
&:hover, &:focus {
|
||||
color: $color-black-09;
|
||||
}
|
||||
}
|
||||
.text-link-1 {
|
||||
&:hover { text-decoration: underline; }
|
||||
}
|
||||
.text-link-2 {
|
||||
&:hover { text-decoration: line-through; }
|
||||
}
|
||||
.text-link-3 {
|
||||
&:hover { text-decoration: overline; }
|
||||
}
|
||||
.text-link-4 {
|
||||
&:hover { text-decoration: underline overline; }
|
||||
}
|
||||
.text-link-5,
|
||||
.text-link-6 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
background: $color-black-09;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-link-5 {
|
||||
&:before { left: 0; }
|
||||
}
|
||||
.text-link-6 {
|
||||
&:before { right: 0; }
|
||||
}
|
||||
.text-link-7 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
@include transform(translateY(3px));
|
||||
opacity: 0;
|
||||
background: $color-black-09;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
@include transform(translateY(0));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-link-8,
|
||||
.text-link-9 {
|
||||
position: relative;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
height: 1px;
|
||||
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
&:before {
|
||||
left: 0;
|
||||
background: $color-black-02;
|
||||
width: 100%;
|
||||
}
|
||||
&:after {
|
||||
background: $color-black-09;
|
||||
width: 0;
|
||||
}
|
||||
&:hover {
|
||||
&:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-link-8 {
|
||||
&:after { left: 0; }
|
||||
}
|
||||
.text-link-9 {
|
||||
&:after { right: 0; }
|
||||
}
|
||||
.text-link-10 {
|
||||
position: relative;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
&:before {
|
||||
background: $color-black-02;
|
||||
}
|
||||
&:after {
|
||||
opacity: 0;
|
||||
@include transform(translateY(3px));
|
||||
background: $color-black-09;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
&:after {
|
||||
@include transform(translateY(0));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-link-11 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
background: $color-black-02;
|
||||
width: 0;
|
||||
height: 6px;
|
||||
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
*[class^='text-link-'], *[class*=' text-link-'] {
|
||||
color: $color-white;
|
||||
&:hover, &:focus {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
.text-link-5, .text-link-6, .text-link-7 {
|
||||
&:before { background: $color-white; }
|
||||
}
|
||||
.text-link-8, .text-link-9, .text-link-10 {
|
||||
&:before { background: $color-white-03; }
|
||||
&:after { background: $color-white; }
|
||||
}
|
||||
.text-link-11 {
|
||||
&:before { background: $color-white-03; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
//
|
||||
// Timeline Styles //
|
||||
//
|
||||
.timeline-wrapper {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: $border-grey;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
.timeline {
|
||||
.timeline-date {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
background: $border-grey;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 37px;
|
||||
background: $color-dark;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.timeline-wrapper {
|
||||
position: relative;
|
||||
&:before {
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%));
|
||||
}
|
||||
.timeline {
|
||||
position: relative;
|
||||
.timeline-date, .timeline-content {
|
||||
width: 50%;
|
||||
padding: 30px;
|
||||
}
|
||||
.timeline-date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: right;
|
||||
&:before {
|
||||
right: -10px;
|
||||
}
|
||||
&:after {
|
||||
right: -4px;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.timeline-content {
|
||||
margin-left: 50%;
|
||||
}
|
||||
&:nth-child(even) {
|
||||
.timeline-date {
|
||||
left: 50%;
|
||||
text-align: left;
|
||||
&:before {
|
||||
right: auto;
|
||||
left: -10px;
|
||||
}
|
||||
&:after {
|
||||
right: auto;
|
||||
left: -4px;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.timeline-content {
|
||||
margin-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Timeline left //
|
||||
//
|
||||
&.timeline-left {
|
||||
&:before {
|
||||
left: 200px;
|
||||
@include transform(translateX(0));
|
||||
}
|
||||
.timeline {
|
||||
.timeline-date {
|
||||
width: 200px;
|
||||
padding: 30px 30px 0 0;
|
||||
}
|
||||
.timeline-content {
|
||||
width: auto;
|
||||
margin: 0 0 0 200px;
|
||||
padding: 30px 0 0 30px;
|
||||
text-align: left;
|
||||
}
|
||||
&:nth-child(even) {
|
||||
.timeline-date {
|
||||
left: auto;
|
||||
text-align: right;
|
||||
&:before {
|
||||
right: -10px;
|
||||
left: auto;
|
||||
}
|
||||
&:after {
|
||||
right: -4px;
|
||||
left: auto;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.timeline-date, .timeline-content {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Timeline Right //
|
||||
//
|
||||
&.timeline-right {
|
||||
&:before {
|
||||
right: 200px;
|
||||
left: auto;
|
||||
@include transform(translateX(0));
|
||||
}
|
||||
.timeline {
|
||||
.timeline-date {
|
||||
right: 0;
|
||||
left: auto;
|
||||
width: 200px;
|
||||
padding: 30px 0 0 30px;
|
||||
text-align: left;
|
||||
&:before {
|
||||
right: auto;
|
||||
left: -10px;
|
||||
}
|
||||
&:after {
|
||||
right: auto;
|
||||
left: -4px;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.timeline-content {
|
||||
width: auto;
|
||||
margin: 0 200px 0 0;
|
||||
padding: 30px 30px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
&:nth-child(even) {
|
||||
.timeline-date {
|
||||
left: auto;
|
||||
text-align: left;
|
||||
&:before {
|
||||
left: -10px;
|
||||
}
|
||||
&:after {
|
||||
left: -4px;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.timeline-date, .timeline-content {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
} // end Timeline Right //
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
.timeline-wrapper {
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
.timeline {
|
||||
margin-bottom: 30px;
|
||||
&:first-child {
|
||||
padding-top: 30px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.timeline-date {
|
||||
&:before {
|
||||
top: 1px;
|
||||
left: -40px;
|
||||
}
|
||||
&:after {
|
||||
top: 7px;
|
||||
left: -34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(xs) {
|
||||
.timeline-wrapper {
|
||||
padding-left: 20px;
|
||||
.timeline {
|
||||
.timeline-date {
|
||||
&:before { left: -30px; }
|
||||
&:after { left: -24px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.timeline-wrapper {
|
||||
&:before { background: $color-white-02; }
|
||||
.timeline {
|
||||
.timeline-date {
|
||||
&:before { background: $color-white-02; }
|
||||
&:after { background: $color-white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
//
|
||||
// Your Custom Styles //
|
||||
//
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
//
|
||||
// Mixins //
|
||||
//
|
||||
@mixin display-flex {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin background-size($background-size) {
|
||||
-webkit-background-size: $background-size;
|
||||
-moz-background-size: $background-size;
|
||||
background-size: $background-size;
|
||||
}
|
||||
|
||||
@mixin box-shadow($box-shadow) {
|
||||
-webkit-box-shadow: $box-shadow;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
@mixin text-shadow($text-shadow) {
|
||||
-webkit-text-shadow: $text-shadow;
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
|
||||
@mixin filter($filter) {
|
||||
-webkit-filter: $filter;
|
||||
filter: $filter;
|
||||
}
|
||||
|
||||
@mixin transition($transition) {
|
||||
-webkit-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
@mixin transition-delay($transition-delay) {
|
||||
-webkit-transition-delay: $transition-delay;
|
||||
transition-delay: $transition-delay;
|
||||
}
|
||||
@mixin transition-duration($transition-duration) {
|
||||
-webkit-transition-duration: $transition-duration;
|
||||
transition-duration: $transition-duration;
|
||||
}
|
||||
|
||||
@mixin transform($transform) {
|
||||
-webkit-transform: $transform;
|
||||
transform: $transform;
|
||||
}
|
||||
@mixin transform-origin($transform-origin) {
|
||||
-webkit-transform-origin: $transform-origin;
|
||||
transform-origin: $transform-origin;
|
||||
}
|
||||
|
||||
@mixin animation($animation) {
|
||||
-webkit-animation: $animation;
|
||||
animation: $animation;
|
||||
}
|
||||
@mixin animation-delay($animation-delay) {
|
||||
-webkit-animation-delay: $animation-delay;
|
||||
animation-delay: $animation-delay;
|
||||
}
|
||||
@mixin animation-fill-mode($animation-fill-mode) {
|
||||
-webkit-animation-fill-mode: $animation-fill-mode;
|
||||
animation-fill-mode: $animation-fill-mode;
|
||||
}
|
||||
|
||||
@mixin breakpoint-above($class) {
|
||||
@if $class == xs {
|
||||
@media (min-width: 0) { @content; }
|
||||
}
|
||||
@else if $class == sm {
|
||||
@media (min-width: 576px) { @content; }
|
||||
}
|
||||
@else if $class == md {
|
||||
@media (min-width: 768px) { @content; }
|
||||
}
|
||||
@else if $class == lg {
|
||||
@media (min-width: 992px) { @content; }
|
||||
}
|
||||
@else if $class == xl {
|
||||
@media (min-width: 1200px) { @content; }
|
||||
}
|
||||
}
|
||||
@mixin breakpoint-less($class) {
|
||||
@if $class == xs {
|
||||
@media (max-width: 575.98px) { @content; }
|
||||
}
|
||||
@else if $class == sm {
|
||||
@media (max-width: 767.98px) { @content; }
|
||||
}
|
||||
@else if $class == md {
|
||||
@media (max-width: 991.98px) { @content; }
|
||||
}
|
||||
@else if $class == lg {
|
||||
@media (max-width: 1199.98px) { @content; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,455 @@
|
|||
//
|
||||
// Background colors //
|
||||
//
|
||||
.bg-white { background: $color-white !important; }
|
||||
.bg-white-09 { background: $color-white-09 !important; }
|
||||
.bg-white-08 { background: $color-white-08 !important; }
|
||||
.bg-white-07 { background: $color-white-07 !important; }
|
||||
.bg-white-06 { background: $color-white-06 !important; }
|
||||
.bg-white-05 { background: $color-white-05 !important; }
|
||||
.bg-white-04 { background: $color-white-04 !important; }
|
||||
.bg-white-03 { background: $color-white-03 !important; }
|
||||
.bg-white-02 { background: $color-white-02 !important; }
|
||||
.bg-white-01 { background: $color-white-01 !important; }
|
||||
.bg-black { background: $color-black !important; }
|
||||
.bg-black-09 { background: $color-black-09 !important; }
|
||||
.bg-black-08 { background: $color-black-08 !important; }
|
||||
.bg-black-07 { background: $color-black-07 !important; }
|
||||
.bg-black-06 { background: $color-black-06 !important; }
|
||||
.bg-black-05 { background: $color-black-05 !important; }
|
||||
.bg-black-04 { background: $color-black-04 !important; }
|
||||
.bg-black-03 { background: $color-black-03 !important; }
|
||||
.bg-black-02 { background: $color-black-02 !important; }
|
||||
.bg-black-01 { background: $color-black-01 !important; }
|
||||
.bg-dark { background: $bg-dark !important; }
|
||||
.bg-dark-lighter { background: $bg-dark-lighter !important; }
|
||||
.bg-dark-lightest { background: $bg-dark-lightest !important; }
|
||||
.bg-dark-grey { background: $bg-dark-grey !important; }
|
||||
.bg-dark-grey-09 { background: $bg-dark-grey-09 !important; }
|
||||
.bg-dark-grey-08 { background: $bg-dark-grey-08 !important; }
|
||||
.bg-dark-grey-07 { background: $bg-dark-grey-07 !important; }
|
||||
.bg-dark-grey-06 { background: $bg-dark-grey-06 !important; }
|
||||
.bg-dark-grey-05 { background: $bg-dark-grey-05 !important; }
|
||||
.bg-dark-grey-04 { background: $bg-dark-grey-04 !important; }
|
||||
.bg-dark-grey-03 { background: $bg-dark-grey-03 !important; }
|
||||
.bg-dark-grey-02 { background: $bg-dark-grey-02 !important; }
|
||||
.bg-dark-grey-01 { background: $bg-dark-grey-01 !important; }
|
||||
.bg-grey { background: $bg-grey !important; }
|
||||
.bg-grey-lighter { background: $bg-grey-lighter !important; }
|
||||
.bg-grey-lightest { background: $bg-grey-lightest !important; }
|
||||
.bg-transparent { background: transparent !important; }
|
||||
|
||||
.bg-white-content {
|
||||
color: $color-primary;
|
||||
h1,h2,h3,h4,h5,h6 { color: $color-dark; }
|
||||
a {
|
||||
&:not([class*=' button'], [class^='button']) {
|
||||
color: $color-primary;
|
||||
&:hover, &:focus { color: $color-dark; }
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-dark-content {
|
||||
color: $color-white-07;
|
||||
h1, h2, h3, h4, h5, h6 { color: $color-white; }
|
||||
a {
|
||||
&:not([class*=' button'], [class^='button']) {
|
||||
color: $color-white-08;
|
||||
&:hover, &:focus { color: $color-white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-white'], div[class*=' bg-white'] {
|
||||
@extend .bg-white-content;
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
@extend .bg-dark-content;
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
div[class^='bg-white'], div[class*=' bg-white'] {
|
||||
@extend .bg-white-content;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Font Families //
|
||||
//
|
||||
.font-family-primary { font-family: $font-family-primary }
|
||||
.font-family-secondary, .font-family-playfair { font-family: $font-family-secondary }
|
||||
.font-family-tertiary { font-family: $font-family-tertiary }
|
||||
|
||||
//
|
||||
// Font Weights //
|
||||
//
|
||||
.font-weight-thin { font-weight: $font-weight-thin; }
|
||||
.font-weight-extra-light { font-weight: $font-weight-extra-light; }
|
||||
.font-weight-medium { font-weight: $font-weight-medium; }
|
||||
.font-weight-semi-bold { font-weight: $font-weight-semi-bold; }
|
||||
.font-weight-extra-bold { font-weight: $font-weight-extra-bold; }
|
||||
.font-weight-black { font-weight: $font-weight-black; }
|
||||
|
||||
//
|
||||
// Text Colors //
|
||||
//
|
||||
*.text-white-09 { color: $color-white-09; }
|
||||
*.text-white-08 { color: $color-white-08; }
|
||||
*.text-white-07 { color: $color-white-07; }
|
||||
*.text-white-06 { color: $color-white-06; }
|
||||
*.text-white-05 { color: $color-white-05; }
|
||||
*.text-white-04 { color: $color-white-04; }
|
||||
*.text-white-03 { color: $color-white-03; }
|
||||
*.text-white-02 { color: $color-white-02; }
|
||||
*.text-white-01 { color: $color-white-01; }
|
||||
|
||||
*.text-black { color: $color-black; }
|
||||
*.text-black-09 { color: $color-black-09; }
|
||||
*.text-black-08 { color: $color-black-08; }
|
||||
*.text-black-07 { color: $color-black-07; }
|
||||
*.text-black-06 { color: $color-black-06; }
|
||||
*.text-black-05 { color: $color-black-05; }
|
||||
*.text-black-04 { color: $color-black-04; }
|
||||
*.text-black-03 { color: $color-black-03; }
|
||||
*.text-black-02 { color: $color-black-02; }
|
||||
*.text-black-01 { color: $color-black-01; }
|
||||
|
||||
*.text-dark { color: $color-dark !important; }
|
||||
*.text-yellow { color: $color-warning-lighter; }
|
||||
*.text-red { color: $color-red-lighter; }
|
||||
*.text-green { color: $color-green-lighter; }
|
||||
*.text-blue { color: $color-blue; }
|
||||
|
||||
//
|
||||
// Text Decorations //
|
||||
//
|
||||
.text-decoration-overline { text-decoration: overline; }
|
||||
.text-decoration-line-through { text-decoration: line-through; }
|
||||
.text-decoration-underline { text-decoration: underline; }
|
||||
.text-decoration-underline-overline { text-decoration: underline overline; }
|
||||
a, button {
|
||||
&.text-decoration-overline {
|
||||
&:hover { text-decoration: overline; }
|
||||
}
|
||||
&.text-decoration-line-through {
|
||||
&:hover { text-decoration: line-through; }
|
||||
}
|
||||
&.text-decoration-underline {
|
||||
&:hover { text-decoration: underline; }
|
||||
}
|
||||
&.text-decoration-underline-overline {
|
||||
&:hover { text-decoration: underline overline; }
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Stroke Text //
|
||||
//
|
||||
.stroke-text {
|
||||
color: $color-dark;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke-width: 1.0px;
|
||||
-webkit-text-stroke-color: $color-dark;
|
||||
@include breakpoint-above(md) {
|
||||
-webkit-text-stroke-width: 1.2px;
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
-webkit-text-stroke-width: 1.4px;
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.stroke-text {
|
||||
color: $color-white;
|
||||
-webkit-text-stroke-color: $color-white;
|
||||
}
|
||||
div[class^='bg-white'], div[class*=' bg-white'] {
|
||||
color: $color-dark;
|
||||
-webkit-text-stroke-color: $color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Fancy Text //
|
||||
//
|
||||
.fancy-text {
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke-width: 1.0px;
|
||||
-webkit-text-stroke-color: $color-dark;
|
||||
@include text-shadow(3px 3px 0 rgb(219, 221, 223));
|
||||
@include breakpoint-above(md) { -webkit-text-stroke-width: 1.2px; }
|
||||
@include breakpoint-above(lg) { -webkit-text-stroke-width: 1.4px; }
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(5px 5px 0 rgb(219, 221, 223));
|
||||
}
|
||||
&.display-4 {
|
||||
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.fancy-text {
|
||||
color: $color-white;
|
||||
-webkit-text-stroke-color: $color-white;
|
||||
@include text-shadow(3px 3px 0 rgb(46, 48, 50));
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(4px 4px 0 rgb(46, 48, 50));
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(5px 5px 0 rgb(46, 48, 50));
|
||||
}
|
||||
&.display-4 {
|
||||
@include text-shadow(4px 4px 0 rgb(46, 48, 50));
|
||||
}
|
||||
}
|
||||
}
|
||||
div[class^='bg-white'], div[class*=' bg-white'] {
|
||||
.fancy-text {
|
||||
color: $color-dark;
|
||||
-webkit-text-stroke-color: $color-dark;
|
||||
@include text-shadow(3px 3px 0 rgb(219, 221, 223));
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(5px 5px 0 rgb(219, 221, 223));
|
||||
}
|
||||
&.display-4 {
|
||||
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Borders //
|
||||
//
|
||||
.border-all,
|
||||
.border-top,
|
||||
.border-right,
|
||||
.border-bottom,
|
||||
.border-left {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: $color-black-01 !important;
|
||||
}
|
||||
.border-all { border-width: 1px; }
|
||||
.border-top { border-top-width: 1px; }
|
||||
.border-right { border-right-width: 1px; }
|
||||
.border-bottom { border-bottom-width: 1px; }
|
||||
.border-left { border-left-width: 1px; }
|
||||
|
||||
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
||||
.border-all, .border-top, .border-right, .border-bottom, .border-left {
|
||||
border-color: $color-white-02 !important;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Border Styles //
|
||||
//
|
||||
.border-style-dotted { border-style: dotted !important; }
|
||||
.border-style-dashed { border-style: dashed !important; }
|
||||
|
||||
//
|
||||
// Spacing - Margin //
|
||||
//
|
||||
.margin-top-10 { margin-top: 10px; }
|
||||
.margin-top-20 { margin-top: 20px; }
|
||||
.margin-top-30 { margin-top: 30px; }
|
||||
.margin-top-40 { margin-top: 40px; }
|
||||
.margin-top-50 { margin-top: 50px; }
|
||||
.margin-top-60 { margin-top: 60px; }
|
||||
.margin-top-70 { margin-top: 70px; }
|
||||
.margin-right-10 { margin-right: 10px; }
|
||||
.margin-right-20 { margin-right: 20px; }
|
||||
.margin-right-30 { margin-right: 30px; }
|
||||
.margin-left-10 { margin-left: 10px; }
|
||||
.margin-left-20 { margin-left: 20px; }
|
||||
.margin-left-30 { margin-left: 30px; }
|
||||
.margin-bottom-10 { margin-bottom: 10px; }
|
||||
.margin-bottom-20 { margin-bottom: 20px; }
|
||||
.margin-bottom-30 { margin-bottom: 30px; }
|
||||
.margin-bottom-40 { margin-bottom: 40px; }
|
||||
.margin-bottom-50 { margin-bottom: 50px; }
|
||||
.margin-bottom-60 { margin-bottom: 60px; }
|
||||
.margin-bottom-70 { margin-bottom: 70px; }
|
||||
@include breakpoint-above(md) {
|
||||
.margin-md-top-10 { margin-top: 10px; }
|
||||
.margin-md-top-20 { margin-top: 20px; }
|
||||
.margin-md-top-30 { margin-top: 30px; }
|
||||
.margin-md-top-40 { margin-top: 40px; }
|
||||
.margin-md-top-50 { margin-top: 50px; }
|
||||
.margin-md-top-60 { margin-top: 60px; }
|
||||
.margin-md-top-70 { margin-top: 70px; }
|
||||
.margin-md-right-10 { margin-right: 10px; }
|
||||
.margin-md-right-20 { margin-right: 20px; }
|
||||
.margin-md-right-30 { margin-right: 30px; }
|
||||
.margin-md-left-10 { margin-left: 10px; }
|
||||
.margin-md-left-20 { margin-left: 20px; }
|
||||
.margin-md-left-30 { margin-left: 30px; }
|
||||
.margin-md-bottom-10 { margin-bottom: 10px; }
|
||||
.margin-md-bottom-20 { margin-bottom: 20px; }
|
||||
.margin-md-bottom-30 { margin-bottom: 30px; }
|
||||
.margin-md-bottom-40 { margin-bottom: 40px; }
|
||||
.margin-md-bottom-50 { margin-bottom: 50px; }
|
||||
.margin-md-bottom-60 { margin-bottom: 60px; }
|
||||
.margin-md-bottom-70 { margin-bottom: 70px; }
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.margin-lg-top-10 { margin-top: 10px; }
|
||||
.margin-lg-top-20 { margin-top: 20px; }
|
||||
.margin-lg-top-30 { margin-top: 30px; }
|
||||
.margin-lg-top-40 { margin-top: 40px; }
|
||||
.margin-lg-top-50 { margin-top: 50px; }
|
||||
.margin-lg-top-60 { margin-top: 60px; }
|
||||
.margin-lg-top-70 { margin-top: 70px; }
|
||||
.margin-lg-right-10 { margin-right: 10px; }
|
||||
.margin-lg-right-20 { margin-right: 20px; }
|
||||
.margin-lg-right-30 { margin-right: 30px; }
|
||||
.margin-lg-left-10 { margin-left: 10px; }
|
||||
.margin-lg-left-20 { margin-left: 20px; }
|
||||
.margin-lg-left-30 { margin-left: 30px; }
|
||||
.margin-lg-bottom-10 { margin-bottom: 10px; }
|
||||
.margin-lg-bottom-20 { margin-bottom: 20px; }
|
||||
.margin-lg-bottom-30 { margin-bottom: 30px; }
|
||||
.margin-lg-bottom-40 { margin-bottom: 40px; }
|
||||
.margin-lg-bottom-50 { margin-bottom: 50px; }
|
||||
.margin-lg-bottom-60 { margin-bottom: 60px; }
|
||||
.margin-lg-bottom-70 { margin-bottom: 70px; }
|
||||
}
|
||||
@include breakpoint-above(xl) {
|
||||
.margin-xl-top-10 { margin-top: 10px; }
|
||||
.margin-xl-top-20 { margin-top: 20px; }
|
||||
.margin-xl-top-30 { margin-top: 30px; }
|
||||
.margin-xl-top-40 { margin-top: 40px; }
|
||||
.margin-xl-top-50 { margin-top: 50px; }
|
||||
.margin-xl-top-60 { margin-top: 60px; }
|
||||
.margin-xl-top-70 { margin-top: 70px; }
|
||||
.margin-xl-right-10 { margin-right: 10px; }
|
||||
.margin-xl-right-20 { margin-right: 20px; }
|
||||
.margin-xl-right-30 { margin-right: 30px; }
|
||||
.margin-xl-left-10 { margin-left: 10px; }
|
||||
.margin-xl-left-20 { margin-left: 20px; }
|
||||
.margin-xl-left-30 { margin-left: 30px; }
|
||||
.margin-xl-bottom-10 { margin-bottom: 10px; }
|
||||
.margin-xl-bottom-20 { margin-bottom: 20px; }
|
||||
.margin-xl-bottom-30 { margin-bottom: 30px; }
|
||||
.margin-xl-bottom-40 { margin-bottom: 40px; }
|
||||
.margin-xl-bottom-50 { margin-bottom: 50px; }
|
||||
.margin-xl-bottom-60 { margin-bottom: 60px; }
|
||||
.margin-xl-bottom-70 { margin-bottom: 70px; }
|
||||
}
|
||||
.margin-0 { margin: 0 !important; }
|
||||
@include breakpoint-above(md) {
|
||||
.margin-md-0 { margin: 0 !important; }
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.margin-lg-0 { margin: 0 !important; }
|
||||
}
|
||||
@include breakpoint-above(xl) {
|
||||
.margin-xl-0 { margin: 0 !important; }
|
||||
}
|
||||
|
||||
//
|
||||
// Spacing - Padding //
|
||||
//
|
||||
.padding-10 { padding: 10px; }
|
||||
.padding-20 { padding: 20px; }
|
||||
.padding-30 { padding: 30px; }
|
||||
.padding-40 { padding: 40px; }
|
||||
.padding-50 { padding: 50px; }
|
||||
.padding-60 { padding: 60px; }
|
||||
.padding-70 { padding: 70px; }
|
||||
.padding-x-10 { padding-left: 10px; padding-right: 10px; }
|
||||
.padding-x-20 { padding-left: 20px; padding-right: 20px; }
|
||||
.padding-x-30 { padding-left: 30px; padding-right: 30px; }
|
||||
.padding-x-40 { padding-left: 40px; padding-right: 40px; }
|
||||
.padding-x-50 { padding-left: 50px; padding-right: 50px; }
|
||||
.padding-x-60 { padding-left: 60px; padding-right: 60px; }
|
||||
.padding-x-70 { padding-left: 70px; padding-right: 70px; }
|
||||
.padding-y-10 { padding-top: 10px; padding-bottom: 10px; }
|
||||
.padding-y-20 { padding-top: 20px; padding-bottom: 20px; }
|
||||
.padding-y-30 { padding-top: 30px; padding-bottom: 30px; }
|
||||
.padding-y-40 { padding-top: 40px; padding-bottom: 40px; }
|
||||
.padding-y-50 { padding-top: 50px; padding-bottom: 50px; }
|
||||
.padding-y-60 { padding-top: 60px; padding-bottom: 60px; }
|
||||
.padding-y-70 { padding-top: 70px; padding-bottom: 70px; }
|
||||
@include breakpoint-above(md) {
|
||||
.padding-md-10 { padding: 10px; }
|
||||
.padding-md-20 { padding: 20px; }
|
||||
.padding-md-30 { padding: 30px; }
|
||||
.padding-md-40 { padding: 40px; }
|
||||
.padding-md-50 { padding: 50px; }
|
||||
.padding-md-60 { padding: 60px; }
|
||||
.padding-md-70 { padding: 70px; }
|
||||
.padding-x-md-10 { padding-left: 10px; padding-right: 10px; }
|
||||
.padding-x-md-20 { padding-left: 20px; padding-right: 20px; }
|
||||
.padding-x-md-30 { padding-left: 30px; padding-right: 30px; }
|
||||
.padding-x-md-40 { padding-left: 40px; padding-right: 40px; }
|
||||
.padding-x-md-50 { padding-left: 50px; padding-right: 50px; }
|
||||
.padding-x-md-60 { padding-left: 60px; padding-right: 60px; }
|
||||
.padding-x-md-70 { padding-left: 70px; padding-right: 70px; }
|
||||
.padding-y-md-10 { padding-top: 10px; padding-bottom: 10px; }
|
||||
.padding-y-md-20 { padding-top: 20px; padding-bottom: 20px; }
|
||||
.padding-y-md-30 { padding-top: 30px; padding-bottom: 30px; }
|
||||
.padding-y-md-40 { padding-top: 40px; padding-bottom: 40px; }
|
||||
.padding-y-md-50 { padding-top: 50px; padding-bottom: 50px; }
|
||||
.padding-y-md-60 { padding-top: 60px; padding-bottom: 60px; }
|
||||
.padding-y-md-70 { padding-top: 70px; padding-bottom: 70px; }
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
.padding-lg-10 { padding: 10px; }
|
||||
.padding-lg-20 { padding: 20px; }
|
||||
.padding-lg-30 { padding: 30px; }
|
||||
.padding-lg-40 { padding: 40px; }
|
||||
.padding-lg-50 { padding: 50px; }
|
||||
.padding-lg-60 { padding: 60px; }
|
||||
.padding-lg-70 { padding: 70px; }
|
||||
.padding-x-lg-10 { padding-left: 10px; padding-right: 10px; }
|
||||
.padding-x-lg-20 { padding-left: 20px; padding-right: 20px; }
|
||||
.padding-x-lg-30 { padding-left: 30px; padding-right: 30px; }
|
||||
.padding-x-lg-40 { padding-left: 40px; padding-right: 40px; }
|
||||
.padding-x-lg-50 { padding-left: 50px; padding-right: 50px; }
|
||||
.padding-x-lg-60 { padding-left: 60px; padding-right: 60px; }
|
||||
.padding-x-lg-70 { padding-left: 70px; padding-right: 70px; }
|
||||
.padding-y-lg-10 { padding-top: 10px; padding-bottom: 10px; }
|
||||
.padding-y-lg-20 { padding-top: 20px; padding-bottom: 20px; }
|
||||
.padding-y-lg-30 { padding-top: 30px; padding-bottom: 30px; }
|
||||
.padding-y-lg-40 { padding-top: 40px; padding-bottom: 40px; }
|
||||
.padding-y-lg-50 { padding-top: 50px; padding-bottom: 50px; }
|
||||
.padding-y-lg-60 { padding-top: 60px; padding-bottom: 60px; }
|
||||
.padding-y-lg-70 { padding-top: 70px; padding-bottom: 70px; }
|
||||
}
|
||||
@include breakpoint-above(xl) {
|
||||
.padding-xl-10 { padding: 10px; }
|
||||
.padding-xl-20 { padding: 20px; }
|
||||
.padding-xl-30 { padding: 30px; }
|
||||
.padding-xl-40 { padding: 40px; }
|
||||
.padding-xl-50 { padding: 50px; }
|
||||
.padding-xl-60 { padding: 60px; }
|
||||
.padding-xl-70 { padding: 70px; }
|
||||
.padding-x-xl-10 { padding-left: 10px; padding-right: 10px; }
|
||||
.padding-x-xl-20 { padding-left: 20px; padding-right: 20px; }
|
||||
.padding-x-xl-30 { padding-left: 30px; padding-right: 30px; }
|
||||
.padding-x-xl-40 { padding-left: 40px; padding-right: 40px; }
|
||||
.padding-x-xl-50 { padding-left: 50px; padding-right: 50px; }
|
||||
.padding-x-xl-60 { padding-left: 60px; padding-right: 60px; }
|
||||
.padding-x-xl-70 { padding-left: 70px; padding-right: 70px; }
|
||||
.padding-y-xl-10 { padding-top: 10px; padding-bottom: 10px; }
|
||||
.padding-y-xl-20 { padding-top: 20px; padding-bottom: 20px; }
|
||||
.padding-y-xl-30 { padding-top: 30px; padding-bottom: 30px; }
|
||||
.padding-y-xl-40 { padding-top: 40px; padding-bottom: 40px; }
|
||||
.padding-y-xl-50 { padding-top: 50px; padding-bottom: 50px; }
|
||||
.padding-y-xl-60 { padding-top: 60px; padding-bottom: 60px; }
|
||||
.padding-y-xl-70 { padding-top: 70px; padding-bottom: 70px; }
|
||||
}
|
||||
.padding-0 { padding: 0 !important; }
|
||||
.padding-top-0 { padding-top: 0 !important; }
|
||||
.padding-right-0 { padding-right: 0 !important; }
|
||||
.padding-bottom-0 { padding-bottom: 0 !important; }
|
||||
.padding-left-0 { padding-left: 0 !important; }
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
//
|
||||
// Font //
|
||||
//
|
||||
$font-family-primary: 'Open Sans', sans-serif;
|
||||
$font-family-secondary: 'Playfair Display', serif;
|
||||
$font-family-tertiary: 'Poppins', sans-serif;
|
||||
$font-weight-black: 900;
|
||||
$font-weight-extra-bold: 800;
|
||||
$font-weight-bold: 700;
|
||||
$font-weight-semi-bold: 600;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-extra-light: 200;
|
||||
$font-weight-thin: 100;
|
||||
|
||||
//
|
||||
// Colors //
|
||||
//
|
||||
$color-white: #fff;
|
||||
$color-black: #000;
|
||||
$color-black-09: rgba(0, 0, 0, 0.9);
|
||||
$color-black-08: rgba(0, 0, 0, 0.8);
|
||||
$color-black-07: rgba(0, 0, 0, 0.7);
|
||||
$color-black-06: rgba(0, 0, 0, 0.6);
|
||||
$color-black-05: rgba(0, 0, 0, 0.5);
|
||||
$color-black-04: rgba(0, 0, 0, 0.4);
|
||||
$color-black-03: rgba(0, 0, 0, 0.3);
|
||||
$color-black-02: rgba(0, 0, 0, 0.2);
|
||||
$color-black-015: rgba(0, 0, 0, 0.15);
|
||||
$color-black-01: rgba(0, 0, 0, 0.1);
|
||||
$color-black-005: rgba(0, 0, 0, 0.05);
|
||||
$color-white-09: rgba(255, 255, 255, 0.9);
|
||||
$color-white-08: rgba(255, 255, 255, 0.8);
|
||||
$color-white-07: rgba(255, 255, 255, 0.7);
|
||||
$color-white-06: rgba(255, 255, 255, 0.6);
|
||||
$color-white-05: rgba(255, 255, 255, 0.5);
|
||||
$color-white-04: rgba(255, 255, 255, 0.4);
|
||||
$color-white-03: rgba(255, 255, 255, 0.3);
|
||||
$color-white-02: rgba(255, 255, 255, 0.2);
|
||||
$color-white-015: rgba(255, 255, 255, 0.15);
|
||||
$color-white-01: rgba(255, 255, 255, 0.1);
|
||||
$color-primary: #7C7C7C;
|
||||
$color-primary-lighter: #AAAAAA;
|
||||
$color-green: #24963e;
|
||||
$color-green-lighter: #28a745;
|
||||
$color-red: #c62f3e;
|
||||
$color-red-lighter: #dc3545;
|
||||
$color-warning: #e5ad06;
|
||||
$color-warning-lighter: #ffc107;
|
||||
$color-info: #1491a5;
|
||||
$color-info-lighter: #17a2b8;
|
||||
$color-dark: rgb(19, 21, 23);
|
||||
$color-dark-lighter: rgb(26, 28, 30);
|
||||
$color-blue: #007bff;
|
||||
|
||||
//
|
||||
// Background colors //
|
||||
//
|
||||
$bg-dark: rgb(19, 21, 23);
|
||||
$bg-dark-lighter: rgb(26, 28, 30);
|
||||
$bg-dark-lightest: rgb(33, 35, 37);
|
||||
$bg-dark-grey: rgb(48, 50, 52);
|
||||
$bg-dark-grey-09: rgba(48, 50, 52, 0.9);
|
||||
$bg-dark-grey-09: rgba(48, 50, 52, 0.9);
|
||||
$bg-dark-grey-08: rgba(48, 50, 52, 0.8);
|
||||
$bg-dark-grey-07: rgba(48, 50, 52, 0.7);
|
||||
$bg-dark-grey-06: rgba(48, 50, 52, 0.6);
|
||||
$bg-dark-grey-05: rgba(48, 50, 52, 0.5);
|
||||
$bg-dark-grey-04: rgba(48, 50, 52, 0.4);
|
||||
$bg-dark-grey-03: rgba(48, 50, 52, 0.3);
|
||||
$bg-dark-grey-02: rgba(48, 50, 52, 0.2);
|
||||
$bg-dark-grey-01: rgba(48, 50, 52, 0.1);
|
||||
$bg-grey: rgb(239, 242, 245);
|
||||
$bg-grey-lighter: rgb(242, 245, 248);
|
||||
$bg-grey-lightest: rgb(245, 248, 251);
|
||||
|
||||
//
|
||||
// Border colors //
|
||||
//
|
||||
$border-dark: $color-dark;
|
||||
$border-grey: rgb(227, 230, 233);
|
||||
|
||||
//
|
||||
// Button colors //
|
||||
//
|
||||
$button-dark: $color-dark;
|
||||
$button-dark-lighter: rgb(29, 32, 35);
|
||||
$button-grey: rgb(229, 232, 235);
|
||||
$button-grey-lighter: rgb(239, 242, 245);
|
||||
$button-grey-darker: rgb(221, 224, 227);
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
//
|
||||
// Import Helpers //
|
||||
//
|
||||
@import "helpers/variables";
|
||||
@import "helpers/mixins";
|
||||
|
||||
//
|
||||
// Import Google Fonts //
|
||||
//
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
|
||||
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');
|
||||
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
|
||||
|
||||
//
|
||||
// Import Basic styles //
|
||||
//
|
||||
@import "basic/base";
|
||||
@import "basic/background";
|
||||
@import "basic/form";
|
||||
@import "basic/image";
|
||||
@import "basic/list";
|
||||
@import "basic/typography";
|
||||
|
||||
//
|
||||
// Import Elements //
|
||||
//
|
||||
@import "elements/accordion";
|
||||
@import "elements/box";
|
||||
@import "elements/button";
|
||||
@import "elements/clients";
|
||||
@import "elements/contact-form";
|
||||
@import "elements/countdown";
|
||||
@import "elements/divider";
|
||||
@import "elements/feature-box";
|
||||
@import "elements/hoverbox";
|
||||
@import "elements/lightbox";
|
||||
@import "elements/map";
|
||||
@import "elements/pie-chart";
|
||||
@import "elements/prices";
|
||||
@import "elements/progress-bar";
|
||||
@import "elements/slider";
|
||||
@import "elements/team";
|
||||
@import "elements/testimonial";
|
||||
@import "elements/text-link";
|
||||
@import "elements/timeline";
|
||||
|
||||
//
|
||||
// Import Components //
|
||||
//
|
||||
@import "components/blog";
|
||||
@import "components/cookie-consent";
|
||||
@import "components/fullscreen-menu";
|
||||
@import "components/gallery";
|
||||
@import "components/header";
|
||||
@import "components/masonry";
|
||||
@import "components/portfolio";
|
||||
@import "components/preloader";
|
||||
@import "components/section";
|
||||
@import "components/shop";
|
||||
|
||||
//
|
||||
// Import Utilities //
|
||||
//
|
||||
@import "helpers/utilities";
|
||||
|
||||
//
|
||||
// Import Custom Styles //
|
||||
//
|
||||
@import "helpers/custom";
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 503 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 490 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 573 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue