// Fonts
@import "tygh/fonts.less";
// Mixins
@import "tygh/mixins.less";
// Reset
@import "tygh/reset.less";
// Plugins
@import "lib/ui/jqueryui.less";
// Core
@import "tygh/grid.less";
@import "tygh/icons.less";
@import "tygh/flags.less";
@media print {
@import "tygh/print.less";
}
// (1) Styles imports post hook
@import "hooks/styles/imports.post.less";
/* ==========================================================================
Base styles
========================================================================== */
.cm-dialog-opener {
-webkit-touch-callout:none; /* disable context menu when tapping an holding a link*/
}
* {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* disable highlighting when tapping a link*/
}
body {
background: @general_bg_color;
max-width: 100%;
padding-top: env(safe-area-inset-top); // iOS
padding-right: env(safe-area-inset-right); // iOS
padding-bottom: env(safe-area-inset-bottom); // iOS
padding-left: env(safe-area-inset-left); // iOS
}
body, p, div, li {
color: @font;
font-family: @body_font;
font-size: @body_font_size;
font-style: @body_font_style;
font-weight: @body_font_weight;
}
p {
margin: 0;
padding: 6px 0;
}
a {
font-family: @links_font;
font-size: @links_font_size;
font-weight: @links_font_weight;
font-style: @links_font_style;
text-decoration: @links_font_decoration;
outline: none;
color: @links;
cursor: pointer;
border-bottom: 0;
.transition(all 150ms);
}
a:hover {
color: darken(@links, 10%);
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ol {
padding: 0 0 0 15px;
}
li {
margin: 0;
padding: 2px 0;
text-indent: 0;
list-style: none;
}
hr {
border: 0;
border-bottom: 1px solid @base;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
font-size: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin:0 0 15px 0;
color: @font;
}
h1,
h2 {
text-decoration: @headings_font_decoration;
font-weight: @headings_font_weight;
font-style: @headings_font_style;
font-size: @headings_font_size;
font-family: @headings_font;
}
.ty-dl {
margin: 0;
}
.ty-dt {
margin: 0;
}
.ty-dd {
margin: 0;
}
.ty-blockquote {
margin: 0;
}
.ty-address {
font-style: normal;
}
/* ==========================================================================
Buttons
========================================================================== */
/*
* Template: templates/buttons/*
*/
.ty-btn {
display: inline-block;
margin-bottom: 0;
padding: 6px 14px;
outline: 0px;
border: 1px solid rgba(0, 0, 0, 0);
background: @btnBackground; // background: #BDC3C7;
background-image: none;
color: @btnColor; // color: #fff;
vertical-align: middle;
text-align: center;
line-height: 1.428571429;
cursor: pointer;
font-family: @buttons_font;
font-size: @buttons_font_size;
font-weight: @buttons_font_weight;
font-style: @buttons_font_style;
text-decoration: @buttons_font_decoration;
.rounded_corners(@baseBorderRadius);
.user-select(none);
.transition(background 200ms);
}
.ty-btn + .ty-btn {
margin-left: 10px;
}
.ty-btn i,
.ty-btn .ty-icon {
position: relative;
top: 2px;
margin-right: 5px;
}
.ty-btn.ty-btn-icon i,
.ty-btn.ty-btn-icon .ty-icon {
margin-left: 3px;
margin-right: 3px;
}
.ty-btn:hover {
color: @btnColorHighlight; // color: #fff;
text-decoration: none;
}
.ty-btn__big {
padding: 6px 17px;
text-transform: uppercase;
}
.ty-btn__text,
.ty-btn__text:hover {
padding: 0;
background: none !important;
color: @links;
}
.ty-btn__primary {
background: @primary_button;
color: @btnPrimaryColor; // color: #fff;
}
.ty-btn__primary:hover {
background: @primary_button_hover; // background: lighten(@primary_button, 6%);
color: @btnPrimaryColorHighlight; // color: #fff;
}
.ty-btn__primary.ty-btn__text {
color: @primary_button;
}
.ty-btn__secondary {
background: @secondary_button;
color: @btnSecondaryColor;
}
.ty-btn__secondary:hover {
background: @secondary_button_hover; // background: lighten(@secondary_button, 10%);
color: @btnSecondaryColorHighlight; // color: #fff;
}
.ty-btn__tertiary {
background: @tertiary_button;
color: @btnTertiaryColor;
}
.ty-btn__tertiary:hover {
background: @tertiary_button_hover; // background: lighten(@tertiary_button, 10%);
color: @btnTertiaryColorHighlight; // color: #fff;
}
.buttons-container .buttons-container {
margin-top: 0;
}
.ty-btn-go {
position: absolute;
top: 1px;
right: 1px;
padding: 0 10px;
min-width: 32px;
height: 30px;
border: 0px;
border-left: 1px solid #cdcdcd;
color: @font;
background: @base;
cursor: pointer;
box-sizing: border-box;
.rounded_corners(0px @inputBorderRadius @inputBorderRadius 0px); // .rounded_corners(0px 4px 4px 0px);
}
.ty-btn-go__icon {
position: absolute;
top: 5px;
left: 12px;
font-size: 20px;
line-height: 20px;
color: #808080;
}
.ty-btn-reset {
background: none;
border: 0;
padding: 0;
}
.ty-btn-group {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: -1px;
}
/* ==========================================================================
Helper Classes
========================================================================== */
.ty-float-left {
float: left;
}
.ty-float-right {
float: right;
}
.ty-clear-both {
clear: both;
}
.ty-valign {
vertical-align: middle;
}
.ty-valign-top {
vertical-align: top;
}
.ty-valign-bottom {
vertical-align: bottom;
}
.hidden {
display: none;
visibility: visible; /* hack for widget mode, should be removed when .hidden will be renamed*/
}
.ty-strong {
font-weight: bold;
}
.ty-italic {
font-style: italic;
}
.ty-lowercase {
text-transform: lowercase;
}
.ty-uppercase {
text-transform: uppercase;
}
.ty-left {
text-align: left;
}
.ty-right {
text-align: right;
}
.ty-center {
text-align: center;
}
.ty-justify {
text-align: justify;
}
.ty-strike {
text-decoration: line-through;
}
.ty-center-block {
margin: 0 auto;
}
.ty-inline {
display: inline;
}
.ty-block {
display: block;
}
.ty-inline-block {
display: inline-block;
}
.ty-scroll-x {
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 3px;
width: 100%;
height: 100%;
}
.ty-hand {
cursor: pointer;
}
.ty-nowrap {
white-space: nowrap;
}
.ty-overflow-hidden {
overflow: hidden;
}
.ty-width-full {
width: 100%;
}
.ty-p-none {
padding: 0 !important;
}
.ty-m-none {
margin: 0 !important;
}
.ty-mb-l {
margin-bottom: 30px;
}
.ty-mt-l {
margin-top: 30px;
}
.ty-mb-m {
margin-bottom: 20px;
}
.ty-mt-m {
margin-top: 20px;
}
.ty-mtb-s {
margin: 10px 0;
}
.ty-mtb-xs {
margin: 5px 0;
}
.ty-ml-s {
margin-left: 10px;
}
.ty-mlr-s {
margin: 0 10px;
}
.ty-mt-s {
margin-top: 10px;
}
.ty-mt-m {
margin-top: 20px;
}
.ty-mb-s {
margin-bottom: 10px;
}
.ty-position-relative {
position: relative;
}
.ty-muted {
color: @secondary_text;
}
.cm-opacity {
opacity: 0.3;
}
.cm-hint {
color: lighten(@font, 25%);
}
/* Form */
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
padding: 4px 8px;
border: 1px solid @inputBorder; // border: 1px solid darken(@base, 15%);
background: @inputBackground;
font-family: @body_font;
font-size: @body_font_size;
font-style: @body_font_style;
font-weight: @body_font_weight;
.box-sizing(border-box);
.rounded_corners(@inputBorderRadius); // .rounded_corners(4px);
}
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"] {
height: 32px;
-webkit-appearance: none;
border-radius: 0;
.rounded_corners(@inputBorderRadius); // .rounded_corners(4px);
}
.ty-input-height {
height: 32px;
}
select[multiple="multiple"] {
min-height: 80px;
}
.radio,
.checkbox,
input[type="radio"],
input[type="checkbox"] {
margin: -4px 6px 0 0;
padding: 0;
vertical-align: middle;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
outline: 0;
border-color: @links;
.transition(border 0.2s linear 0s);
}
// Accessible Checkbox
// Example with label:
//
//
// Example without label:
//
//
.radio,
.checkbox,
input[type="radio"],
input[type="checkbox"] {
&.ty-checkbox__input {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
}
.ty-checkbox__input + .ty-checkbox__label {
display: inline-flex;
position: relative;
min-height: 19px;
min-width: 28px;
padding-top: 4px;
padding-bottom: 5px;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
border: 1px solid @inputBorder; // border: 1px solid darken(@base, 15%);
background-color: #fff;
color: lighten(@font, 25%);
.transition(border 0.2s linear 0s);
}
&:after {
content: "\e008";
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
top: 0;
left: 0;
opacity: 0;
font-family: glyphs;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
font-size: 22px;
}
&:not(:empty):not(&--sr-only) {
padding-left: 38px;
}
&--sr-only {
height: 19px;
overflow: hidden;
position: absolute;
width: 28px;
white-space: nowrap;
}
}
.ty-checkbox__input:focus + label {
border-color: @links;
outline: 5px auto rgba(0, 150, 255, 1);
outline: 5px auto -webkit-focus-ring-color;
}
.ty-checkbox__input:checked + .ty-checkbox__label:after {
opacity: 1;
}
select {
padding: 4px 3px 3px;
min-width: 4em;
max-width: 100%;
height: 2.2em;
line-height: 2.2em;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ty-control-group {
margin: 0 0 12px 0;
vertical-align: top;
.clearfix();
}
.ty-control-group__label {
float: left;
padding: 6px 0;
margin-right: 10px;
width: 110px;
color: darken(@font, 10%);
}
.ty-control-group__title {
display: block;
padding: 6px 0;
font-weight: bold;
}
.ty-control-group__price {
width: 115px;
}
.ty-control-group__item {
display: inline-block;
padding: 6px 0;
vertical-align: middle;
.word-break();
}
.ty-control-group label.hidden {
display: none;
}
.ty-input-append {
position: relative;
margin: 10px 0 0 0;
}
.ty-input-append .ty-input-text {
width: 100%;
padding-right: 35px;
}
.ty-select-field {
padding: 3px 0;
}
.ty-select-field__label {
display: block;
padding: 3px 0;
margin-right: 10px;
font-size: 90%;
}
.ty-select-field__checkbox {
vertical-align: middle;
}
label.cm-failed-label {
color: #bf4d4d;
}
label.cm-required:after {
padding-left: 3px;
color: #ea7162;
content: "*";
font-size: 13px;
line-height: 1px;
}
input[type="text"].cm-failed-field,
input[type="password"].cm-failed-field,
input[type="email"].cm-failed-field,
input[type="tel"].cm-failed-field,
input[type="number"].cm-failed-field,
select.cm-failed-field,
textarea.cm-failed-field,
.cm-field-container.cm-failed-field input[type="text"],
.cm-field-container.cm-failed-field input[type="password"],
.cm-field-container.cm-failed-field input[type="email"],
.cm-field-container.cm-failed-field input[type="tel"],
.cm-field-container.cm-failed-field input[type="number"] {
border: 1px solid #bf4d4d;
background: #fff;
}
.ty-error-text {
color: #b94a48;
}
.disabled,
select.disabled {
background: #e3e3e3;
}
.ty-input-text {
width: auto;
}
.ty-input-text-medium {
width: 300px;
}
.ty-input-text-large {
width: 550px;
}
.ty-input-text-short {
width: 50px;
}
.ty-input-text-full {
width: 100%;
}
.ty-input-textarea {
resize: vertical;
}
.ty-input-textarea--limit {
min-height: 7em;
max-height: 28em;
}
.ty-input-phone-container--default {
max-width: 266px;
}
.ty-input-phone-container--large {
max-width: 550px;
}
/* Form */
/* Table */
.ty-table {
width: 100%;
margin-top: 30px;
border: 1px solid @base;
border-width: 1px 0px 1px 1px;
border-bottom: none;
}
.ty-table th {
padding: 12px;
border-right: 1px solid @base;
border-bottom: 1px solid @base;
background: lighten(@base, 4%);
text-align: left;
text-transform: none;
white-space: nowrap;
font-weight: bold;
line-height: normal;
}
.ty-table th i,
.ty-table th .ty-icon {
margin-left: 5px;
position: relative;
top: 3px;
font-size: 16px;
color: #BDC3C7;
}
.ty-table tr,
.table .table tr {
background-color: #fff;
}
.ty-table table tr {
background-color: transparent;
}
.ty-table td,
.ty-table .table td {
padding: 13px;
border-right: 1px solid #ECF0F1;
border-bottom: 1px solid #ECF0F1;
}
.ty-table tbody tr:nth-child(2n) {
background: lighten(@base, 4%);
}
.ty-table th,
.ty-table th a {
color: #404040;
font-weight: bold;
}
.ty-table__responsive-header {
display: none;
}
/* Error message core.js */
.help-inline {
display: block;
}
.help-inline p {
padding: 4px 0px 0px 0px;
color: #b94a48 !important;
}
.ty-dir-list {
display: inline-block;
width: 7px;
font-size: 15px;
margin-right: 5px;
cursor: pointer;
}
.ty-extra-link {
border-bottom: 1px dotted #4d4d4d;
padding: 0;
text-decoration: none;
color: darken(@font, 10%);
cursor: pointer;
}
.ty-dashed-link {
border-bottom-width: 1px;
border-bottom-style: dotted;
text-decoration: none;
}
.ty-login-form__wrong-credentials-container {
padding: 10px 0;
text-align: center;
}
/* Remove button */
.ty-remove {
position: relative;
display: inline-block;
width: auto;
white-space: nowrap;
text-decoration: none;
}
.ty-remove:hover {
text-decoration: none;
}
.ty-remove__icon {
vertical-align: middle;
}
.ty-remove__txt {
padding-left: 5px;
font-size: 12px;
color: darken(@base, 20%);
vertical-align: middle;
}
.ty-remove:hover .ty-remove__txt,
.ty-remove:hover .ty-remove__icon {
color: darken(@base, 20%);
}
.ty-delete-big,
.ty-delete-icon {
vertical-align: middle;
}
.ty-delete-big:hover,
.ty-delete-icon:hover {
text-decoration: none;
}
.ty-delete-big__icon {
font-size: 19px;
color: darken(@base, 20%);
}
/* /Remove button */
.ty-caret {
position: absolute;
top: -16px;
left: 14px;
float: left;
overflow: hidden;
width: 16px;
height: 16px;
}
.ty-caret .ty-caret-outer,
.ty-caret .ty-caret-inner {
position: absolute;
top: 0;
left: 0;
display: inline-block;
margin-left: -1px;
}
.ty-caret .ty-caret-outer {
width:0;
height:0;
border-top: 16px solid transparent;
border-right: 16px solid @base;
}
.ty-caret .ty-caret-inner {
top: 2px;
left: 1px;
width:0;
height:0;
border-top: 14px solid transparent;
border-right: 14px solid #fff;
}
.ty-caret-bottom {
position: absolute;
bottom: -16px;
left: 14px;
float: left;
overflow: hidden;
width: 16px;
height: 16px;
}
.ty-caret-bottom .ty-caret-outer,
.ty-caret-bottom .ty-caret-inner {
position: absolute;
top: 0;
left: 0;
display: inline-block;
margin-left: -1px;
}
.ty-caret-bottom .ty-caret-outer {
width: 0;
height: 0;
border-bottom: 16px solid transparent;
border-left: 16px solid @base;
}
.ty-caret-bottom .ty-caret-inner {
top: -1px;
left: 2px;
width: 0;
height: 0;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
}
.ty-caret-info {
position: absolute;
top: -7px;
left: 12px;
float: left;
overflow: hidden;
width: 12px;
height: 7px;
}
.ty-caret-info .ty-caret-outer,
.ty-caret-info .ty-caret-inner {
position: absolute;
top: 0;
left: 0;
display: inline-block;
margin-left: -1px;
}
.ty-caret-info .ty-caret-outer {
border-right: 7px solid transparent;
border-bottom: 7px solid #bdc3c7;
border-left: 7px solid transparent;
}
.ty-caret-info .ty-caret-inner {
top: 1px;
left: 1px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
}
// Dialog caret
.ty-dialog-caret {
position: relative;
margin-top: var(--space-s);
padding: var(--space-s);
border: 1px solid @decorative;
}
.ty-dialog-caret:before,
.ty-dialog-caret:after {
content: '';
position: absolute;
left: var(--space-s);
bottom: 100%;
border-top: var(--width-s) solid transparent;
border-left: var(--width-s) solid @decorative;
}
.ty-dialog-caret:after {
border-left-color: #fff;
transform: scale(0.9);
transform-origin: bottom;
}
// /Dialog caret
.ty-no-items {
padding: 60px 20px;
background: #F8F9F9;
color: #BDC3C7;
text-align: center;
font-size: 115%;
margin-bottom: 20px;
&--extended {
display: flex;
flex-direction: column;
align-items: center;
}
}
.ty-icon-cancel-circle {
font-size: 16px;
line-height: 16px;
color: darken(@base, 30%);
}
/* ==========================================================================
Menus
========================================================================== */
/*
* Template: templates/blocks/menu/*
* Template: templates/blocks/topmenu_dropdown.tpl
* Template: templates/blocks/categories/categories_dropdown_horizontal.tpl
* Template: templates/blocks/categories/categories_dropdown_vertical.tpl
* Template: templates/blocks/pages/pages_dropdown.tpl
* Template: templates/blocks/pages/pages_emenu.tpl
*/
.ty-menu {
.user-select(none);
.clearfix();
}
.ty-menu__items {
background: @menu;
position: relative;
.clearfix();
.rounded_corners(6px);
}
.ty-menu__item {
padding: 0px;
display: block;
float: left;
}
.ty-menu-rounded();
.ty-menu__item-active .ty-menu__item-link {
background: darken(@menu, 5%)
}
.no-touch .ty-menu__item:hover .ty-menu__submenu-items,
.is-hover-menu .ty-menu__submenu-items {
display: block;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link {
background: darken(@menu, 3%);
color: white;
text-shadow: none;
}
.ty-menu__item .ty-menu__item-link {
color: @menu_links;
position: relative;
padding: 13px 20px;
display: block;
min-height: 46px;
cursor: pointer;
.box-sizing(border-box);
}
.ty-menu__item .ty-menu__item-link .ty-icon-down-micro {
position: absolute;
font-size: 20px;
right: 12px;
top: 13px;
}
.ty-menu__submenu-items {
min-width: 200px;
display: none;
position: absolute;
background: white;
z-index: 200;
border: 1px solid darken(@menu, 4%);
border-top: 0;
padding: 15px 16px;
}
.ty-menu__submenu-items .ty-menu__submenu-item {
margin-bottom: 10px;
}
.ty-menu__submenu-items .ty-menu__submenu-link {
color: @links;
}
.ty-menu__submenu-items .ty-top-mine__submenu-col {
margin: 0px 10px 0px 0px;
display: inline-block;
vertical-align: top;
min-width: 139px;
}
.ty-menu__submenu-items .ty-top-mine__submenu-col:last-child {
margin-right: 1px;
}
.ty-menu__submenu-item-header {
min-height: 25px;
margin-bottom: 10px;
padding-bottom: 2px;
border-bottom: 1px solid #e5e5e5;
}
.ty-menu__submenu-item-header .ty-menu__submenu-link {
font-weight: bold;
color: @links;
}
.ty-menu__submenu .ty-menu__submenu-items .ty-menu__submenu-item-active a {
color: #FFF;
background: @links;
padding: 2px 6px;
}
.ty-menu__submenu-dropdown-bottom {
display: block;
background: #ECF0F1;
margin: 0px -16px -15px;
padding: 10px;
text-align: right;
}
.ty-menu-rounded() when (@rounded_corners = true) {
.ty-menu__item:nth-child(2) .ty-menu__item-link {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.ty-menu__submenu-items {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
}
// Vertical menu
.ty-menu-vertical .ty-menu__items {
border-bottom: 1px solid #34495E;
z-index: 30;
}
.ty-menu-vertical .ty-menu__item {
float: none;
position: relative;
}
.ty-menu-vertical .ty-menu__item .ty-menu__submenu {
display: none;
right: 0;
left: auto;
top: 0;
position: absolute;
z-index: 6;
}
.ty-menu-vertical .ty-menu__submenu-items {
padding: 0;
border: 1px solid darken(@menu, 4%);
}
.no-touch .ty-menu-vertical .ty-menu__submenu .ty-menu__item:hover > .ty-menu__submenu-item-header .ty-menu__item-link,
.ty-menu-vertical .ty-menu__submenu .is-hover-menu > .ty-menu__submenu-item-header .ty-menu__item-link {
background: @links;
color: @menu_links;
}
.no-touch .ty-menu-vertical .ty-menu__submenu .ty-menu__item:hover i,
.ty-menu-vertical .ty-menu__submenu .is-hover-menu i,
.no-touch .ty-menu-vertical .ty-menu__submenu .ty-menu__item:hover .ty-icon,
.ty-menu-vertical .ty-menu__submenu .is-hover-menu .ty-icon {
color: #fff;
}
.ty-menu-vertical .ty-menu__item .ty-menu__submenu .ty-menu__item-link {
color: @links;
background: white;
padding: 14px 20px;
}
.no-touch .ty-menu-vertical .ty-menu__item:hover > .ty-menu__submenu,
.ty-menu-vertical .is-hover-menu > .ty-menu__submenu {
display: block;
}
.no-touch .ty-menu-vertical .ty-menu__item .ty-menu__submenu .ty-menu__item:hover > .ty-menu__item-link {
background: @links;
color: white;
}
.ty-menu-vertical .ty-menu__item .ty-icon-left-open {
display: none;
}
.ty-menu__item-arrow i,
.ty-menu__item-arrow .ty-icon {
position: absolute;
z-index: 5;
right: 15px;
top: 17px;
color: #a1a6aa;
}
.ty-menu-vertical .ty-menu__submenu-item-header {
margin-bottom: 0px;
padding-bottom: 0px;
border: 0px;
}
// rtl
.ty-menu-vertical .ty-menu__items.rtl {
text-align: right;
}
.ty-menu-vertical .ty-menu__items.rtl .ty-icon-right-open {
display: none;
}
.ty-menu-vertical .ty-menu__items.rtl .ty-icon-left-open {
left: 15px;
right: auto;
display: block;
}
.ty-menu-vertical .ty-menu__items.rtl .ty-menu__submenu {
width: 202px;
right: 100%;
left: auto;
}
.ty-menu-vertical .ty-menu__items.rtl .ty-menu__submenu-items {
width: 200px;
}
.ty-menu__submenu {
left: 0;
}
.ty-menu__submenu-reverse-direction {
right: 0px;
}
.ty-menu__submenu-reverse-direction .ty-menu__submenu-items {
right: 0px;
}
//FIXME: '.ty-menu__submenu-to-right' is deprecated className, will be removed in future release
.ty-menu__submenu-to-right {
right: 0px;
}
.ty-menu__submenu-to-right .ty-menu__submenu-items {
right: 0px;
}
// Custom menu classes
.ty-menu-item__sale .ty-menu__item-link,
.no-touch .ty-menu-item__sale .ty-menu__item-link:hover,
.ty-menu-item__promotions .ty-menu__item-link,
.no-touch .ty-menu-item__promotions .ty-menu__item-link:hover {
color: yellow;
}
/* /Menus */
/* ==========================================================================
Modals dialogs
========================================================================== */
html.dialog-is-open {
overflow: hidden;
body {
overflow: scroll;
}
}
.ui-widget, .ui-widget button {
font-family: @modalFontFamily; // font-family: 'Open Sans', 'Helvetica Neue', -apple-system, sans-serif;
}
.object-container {
padding: 10px 20px 0px 20px;
background: #fff;
overflow: auto;
}
@media (max-width: 767px) {
html.dialog-is-open.dialog--no-scroll .object-container:after {
--cs-button-height: 32px; // 6px * 2 + 1.428571429 * 13px + 1px * 2
--cs-buttons-container-padding: 36px;
content: "";
display: block;
padding-bottom: ~"calc(var(--cs-button-height) + var(--cs-buttons-container-padding) + 32px)";
}
}
.notification-container-dialog {
top: 11px;
right: 20px;
min-width: 260px;
max-width: ~"calc(100% - 40px)";
position: absolute;
z-index: 1510;
}
.ui-widget select,
.ui-widget textarea {
font-weight: normal;
}
.ui-dialog-content {
overflow: visible;
display: block !important;
}
.ui-widget-content.ui-dialog {
margin-top: -1px;
padding: 0;
border: none;
max-width: 930px;
}
.object-container .ty-control-group__label {
float: none;
width: auto;
display: inline-block;
min-width: 120px;
vertical-align: top;
}
.ui-dialog .ui-dialog-content {
overflow: visible;
padding: 0;
padding-bottom: env(safe-area-inset-bottom); // iOS
min-height: 120px !important;
.border-radius(0 0 5px 5px);
.box-shadow(none);
}
.ui-widget-content.ui-dialog {
.rounded_corners(6px);
overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
padding: 13px 20px 10px;
border:none;
border-bottom: 1px solid darken(@base, 10%);
background: lighten(@base, 3%);
.border-radius(0);
}
.ui-corner-all {
.border-radius(0);
}
.ui-dialog .ui-resizable-se {
right: 1px;
bottom: 1px;
}
.ui-widget-overlay {
position: fixed;
overflow: hidden;
margin: 0;
padding: 0;
background: url("../media/images/picker_bg_outside.png") repeat-x 0 -100% scroll #000;
opacity: 0.7;
filter: alpha(opacity=70);
}
div.ui-dialog .ui-dialog-title {
width: auto;
margin: 0;
color: #2c3e50;
font-weight: normal;
font-size: 18px;
padding-right: 20px;
}
.ui-dialog .ui-dialog-titlebar-close {
top: 27px;
right: 13px;
padding: 0;
}
.ui-dialog .ui-button-icon-only {
text-indent: -9999px;
border: none;
background-color: transparent;
}
.ui-dialog .ui-button-icon-only:focus {
outline: none;
}
.ui-dialog .ui-button-icon-only:hover {
opacity: 0.7;
}
.ui-draggable .ui-dialog-titlebar {
cursor: url(../media/images/icons/openhand.cur), move;
}
.ui-dialog .buttons-container {
margin: 0px -20px;
}
@media (max-width: 767px) {
html.dialog-is-open.dialog--no-scroll .ui-dialog .buttons-container {
margin-left: 0;
margin-right: 0;
}
}
.ui-dialog .buttons-container.picker {
padding: 13px 0;
width: 100%;
border-top: 1px solid lighten(@base, 42%);
background-color: #f9f9f9;
}
.buttons-container-picker {
padding: 0;
width: 100%;
}
.buttons-container-picker {
.box-sizing(border-box);
padding: 15px 20px;
border: 1px solid #e3e3e3;
}
.ui-dialog .buttons-container.picker > div {
margin: 0 15px;
}
.ui-widget-header .ui-icon-closethick {
color: darken(@base, 10%);
background: none;
margin: -10px 0 0 -10px;
text-indent: 0;
font: 13px/1 'glyphs';
speak: none;
-webkit-font-smoothing: antialiased;
opacity: 0.7;
}
.ui-widget-header .ui-icon-closethick.ui-state-hover {
opacity: 1;
}
.ui-widget-header .ui-icon-closethick:before {
font-family: 'glyphs';
content: "\e009";
speak: none;
-webkit-font-smoothing: antialiased;
}
.ui-widget-header .ui-dialog-titlebar-close.ui-state-hover {
border: none;
background: none;
}
.ui-widget-header .ui-dialog-titlebar-close.ui-state-hover span:before {
color: lighten(@menu, 50%);
}
.ui-widget-header .ui-state-default {
background: none;
border: 0;
outline: none;
}
.ui-dialog-dragging {
background: #f7f7e7 none;
opacity: 0.6;
}
.ui-dialog-dragging .ui-resizable-handle {
display: none;
}
.ui-dialog-dragging .ui-dialog-content {
visibility: hidden;
}
/* Modals dialogs */
/* ==========================================================================
WYSIWYG
========================================================================== */
.ty-wysiwyg-content h1 {
font-size: 36px;
font-weight: bold;
}
.ty-wysiwyg-content h2 {
font-weight: bold;
font-size: 30px;
}
.ty-wysiwyg-content h3 {
font-weight: bold;
font-size: 24px;
}
.ty-wysiwyg-content h4 {
font-weight: bold;
font-size: 18px;
}
.ty-wysiwyg-content h5 {
font-weight: bold;
font-size: 14px;
}
.ty-wysiwyg-content h6 {
font-weight: bold;
font-size: 12px;
}
.ty-wysiwyg-content h1,
.ty-wysiwyg-content h2,
.ty-wysiwyg-content h3 {
margin-top: 20px;
margin-bottom: 10px;
}
.ty-wysiwyg-content h4,
.ty-wysiwyg-content h5,
.ty-wysiwyg-content h6 {
margin-top: 10px;
margin-bottom: 10px;
}
.ty-wysiwyg-content td,
.ty-wysiwyg-content th {
padding: 5px;
}
.ty-wysiwyg-content ul.ty-select-block__list {
padding: 0;
margin: 0;
li {
list-style-type: none;
}
}
.ty-wysiwyg-content, .ty-wysiwyg-list {
ul,
ol,
ul ul,
ol ol,
ul ol,
ol ul {
margin: 0 0 0 24px;
}
ul {
list-style-type: disc;
}
ul ul {
list-style-type: circle;
}
ul ul ul li,
ul ol ul li,
ol ol ul li {
list-style-type: square;
}
ol {
list-style-type: decimal;
}
ul li, ol li {
list-style-type: inherit;
}
ol ol li {
list-style-type: lower-alpha;
}
ol ol ol li {
list-style-type: lower-roman;
}
}
.ty-product-block__description {
word-wrap: break-word;
}
.ty-product-block__description ul {
padding: 0 0 0 20px;
list-style-type: disc;
}
.ty-product-block__description ul > li {
list-style-type: inherit;
}
.ty-product-block__description ol {
padding: 0 0 0 20px;
list-style-type: decimal;
}
.ty-product-block__description ol > li {
list-style-type: inherit;
}
.ty-product-list__description ul {
padding: 0 0 0 20px;
list-style-type: disc;
}
.ty-product-list__description ul > li {
list-style-type: inherit;
}
.ty-product-list__description ol {
padding: 0 0 0 20px;
list-style-type: decimal;
}
.ty-product-list__description ol > li {
list-style-type: inherit;
}
.ty-wysiwyg-content iframe{
max-width: 100%;
}
.ty-wysiwyg-content .no-border td {
border: 0;
}
.redactor-box ol li {
list-style-type: decimal;
}
.redactor-box ul li {
list-style-type: disc;
}
.ty-wysiwyg-content [class*="ty-column"] {
margin-bottom: 20px;
box-sizing: border-box;
padding: 0px 10px;
}
.ty-wysiwyg-content .ty-notice {
padding: 10px 25px;
background: lighten(@base, 3%);
color: @font;
border-radius: 4px;
display: inline-block;
}
.ty-wysiwyg-content .ty-image {
padding: 10px;
border: 4px solid #ffffff;
outline: 2px solid @base;
box-sizing: border-box;
}
.ty-wysiwyg-content {
word-wrap: break-word;
h1 {
&.ty-main-title {
margin-top: 10px;
padding-bottom: 10px;
font-size: 36px;
text-transform: uppercase;
line-height: 155%;
font-weight: normal;
}
&.ty-main-title2 {
margin-top: 45px;
font-weight: normal;
font-size: 37px;
}
@media (max-width: 767px) {
&.ty-main-title2,
&.ty-main-title {
font-size: 24px;
}
}
}
h3 {
&.ty-main-title2 {
margin: 78px 0 32px;
font-size: 22px;
font-weight: normal;
}
}
}
.ty-list-container, .ty-items-container {
margin: 20px 0;
line-height: 140%;
&.ty-decimal {
.ty-list-text {
padding-left: 40px;
}
.ty-list-item {
position: absolute;
margin-top: 7px;
margin-left: -40px;
font-size: 60px;
color: #00ccff;
}
}
}
.ty-list-container {
.ty-column4 {
.ty-company__item, .ty-gift-certificate__item {
padding-right: 10%;
@media (max-width: 478px) {
padding-right: 0;
}
}
}
.ty-company__item {
padding-right: 10%;
}
.ty-list-image {
margin: 17px 0;
text-align: center;
&.ty-left {
text-align: left;
}
&.ty-right {
text-align: right;
}
}
.ty-list-text {
padding-top: 8px;
font-family: Arial;
font-size: 12px;
line-height: 150%;
&.big {
font-size: 16px;
}
.ty-header {
display: block;
font-size: 21px;
.ty-big {
font-size: 218%;
font-weight: bold;
line-height: normal;
}
}
}
&.with-shadow {
.ty-list-image {
padding: 10px;
margin-bottom: 14px;
.box-shadow (0px 0px 5px 0px rgba(0, 0, 0, 0.3));
}
.ty-list-text {
padding-top: 0;
margin-bottom: 27px;
}
}
.ty-list-header {
display: block;
padding-bottom: 6px;
font-size: 22px;
line-height: normal;
}
}
.ty-items-container {
.item {
padding-right: 4%;
}
@media screen and (max-width: 480px) {
text-align: center;
.item {
padding-right: 0;
}
}
}
/* Columns
========================================================================== */
@columns: 10;
.ty-columns (@index) when (@index > 0) {
.ty-columns(@index - 1);
.ty-column@{index} {
display: inline-block;
width: percentage((100 / @index) * 0.01);
vertical-align: top;
margin-right: -0.25em;
}
}
.ty-columns(0) { }
.ty-columns(@columns);
@media (max-width: 979px) {
.ty-columns(@columns);
.ty-columns (@index) when (@index > 1) {
.ty-columns(@index - 1);
.ty-column@{index} {
width: percentage((100 / (@index - 1)) * 0.01);
}
}
.ty-columns(0) { }
} // media 979
@media (max-width: 767px) {
.ty-columns(@columns);
.ty-columns (@index) when (@index > 1) {
.ty-columns(@index - 1);
.ty-column@{index} {
width: percentage((100 / 2) * 0.01);
}
}
.ty-columns(0) { }
} // media 767
@media screen and (max-width: 480px) {
.ty-columns(@columns);
.ty-columns (@index) when (@index > 0) {
.ty-columns(@index - 1);
.ty-column@{index} {
width: 100%;
}
}
.ty-columns(0) { }
} // media 480
/* Custom
========================================================================== */
.tygh-top-panel-bg-is-transparent() when(@top_panel_bg_transparent = true) {
filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
background-color: transparent;
background-image: none;
}
.tygh-top-panel-bg() when(@top_panel_bg_full = true) {
.tygh-top-panel {
#gradient .vertical(@top_panel_bg, @top_panel_bg_grad_stop);
.tygh-top-panel-bg-is-transparent();
}
}
.tygh-top-panel-bg() when(@top_panel_bg_full = false) {
.tygh-top-panel > div {
#gradient .vertical(@top_panel_bg, @top_panel_bg_grad_stop);
.tygh-top-panel-bg-is-transparent();
}
}
.tygh-top-panel-bg();
.tygh-top-panel {
.ty-text-links-wrapper {
@media (max-width: 1024px) {
border: none;
}
}
}
.top-links-grid {
.ty-float-left,
.ty-float-right {
max-width: 100%;
}
@media (max-width: 1024px) {
float: none !important;
width: auto !important;
> .ty-geo-maps__geolocation {
float: right;
}
.ty-geo-maps__geolocation {
.ty-geo-maps__geolocation__opener {
padding: 10px 11px 11px 8px;
color: @dropdownTitleLinkColor; // color: darken(@base, 40%);
&:hover {
background: darken(@base, 4%);
}
}
.ty-geo-maps__geolocation__location {
display: none;
}
}
.ty-text-links-btn.visible-phone {
display: inherit !important;
}
}
}
.top-menu-grid {
padding-top: 38px;
}
.ty-text-links_show_inline > .ty-text-links__item {
display: inline-block;
}
/* User-defined CSS class for "Quick links" block
========================================================================== */
.top-quick-links {
max-width: 100%;
}
.top-quick-links a {
color: @top_panel_links;
}
.ty-text-links__a--submenu {
display: block;
}
.ty-text-links__item--inline {
padding-top: 0;
padding-bottom: 0;
}
@media (max-width: 1024px) {
.ty-text-links_show_inline > .ty-text-links__item.ty-text-links__item--inline {
display: block;
}
}
/* User-defined CSS class for top links grid
========================================================================== */
.top-links-grid .ty-text-links {
margin-bottom: 0;
}
.top-links-grid .ty-text-links__item--submenu {
margin: 0;
padding: 0;
}
.top-links-grid .ty-text-links .ty-text-links__item--submenu {
margin-left: 0;
}
.top-links-grid .ty-text-links__a--submenu {
padding: 8px;
}
.top-links-grid .ty-text-links__a--submenu.ty-text-links__a--level-1 {
padding-left: 14px;
}
.top-links-grid .ty-text-links__a--submenu.ty-text-links__a--level-2 {
padding-left: 28px;
}
.top-links-grid .ty-text-links__a--submenu.ty-text-links__a--level-3 {
padding-left: 42px;
}
.top-links-grid .ty-text-links__a--submenu.ty-text-links__a--level-4 {
padding-left: 56px;
}
.no-touch .top-links-grid .ty-text-links__a--submenu:hover {
background: @links;
color: #fff;
}
.top-links-grid .ty-text-links__item--inline {
margin-right: 0;
}
.top-links-grid .ty-text-links_show_inline .ty-level-0 > .ty-text-links {
padding: 2px 0;
}
@media (max-width: 1024px) {
.top-links-grid .ty-text-links_show_inline .ty-text-links__a--inline {
padding: 8px;
}
}
@media (min-width: 1025px) {
.top-links-grid .ty-text-links__a--inline {
display: inline-block;
padding: 8px;
}
.top-links-grid .ty-text-links__a--inline.ty-text-links__a--active,
.no-touch .top-links-grid .ty-text-links__a--inline:hover,
.no-touch .top-links-grid .ty-text-links__subitems:hover .ty-text-links__a--subitems {
background: darken(@base, 4%);
}
}
.our-brands-grid {
margin-bottom: 80px;
}
.ty-order-summary {
margin-top: 66px;
}
.tygh-header > div {
padding-top: 39px;
}
.header-widget-grid .top-menu-grid {
padding-top: 15px;
}
.search-widget-block-grid {
padding: 15px 0;
}
.tygh-header-bg-is-transparent() when(@header_bg_transparent = true) {
filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
background-color: transparent;
background-image: none;
}
.tygh-header-bg() when(@header_bg_full = true) {
.tygh-header {
#gradient .vertical(@header_bg, @header_bg_grad_stop);
.tygh-header-bg-is-transparent();
}
}
.tygh-header-bg() when(@header_bg_full = false) {
.tygh-header > div {
#gradient .vertical(@header_bg, @header_bg_grad_stop);
.tygh-header-bg-is-transparent();
}
}
.tygh-header-bg();
.tygh-content > div {
padding-bottom: 40px;
}
.tygh-content-bg-is-transparent() when(@content_bg_transparent = true) {
filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
background-color: transparent;
background-image: none;
}
.tygh-content-bg() when(@content_bg_full = true) {
.tygh-content {
background-color: @content_bg;
.tygh-content-bg-is-transparent();
}
}
.tygh-content-bg() when(@content_bg_full = false) {
.tygh-content > div {
background-color: @content_bg;
.tygh-content-bg-is-transparent();
}
}
.tygh-content-bg();
/* hidden icon in sidebar */
.side-grid .ty-account-info__user-arrow {
display: none;
}
.side-grid .ty-dropdown-box__content {
right: auto;
left: 0;
}
.main-content-grid {
width: 100%;
}
.footer-content-grid {
margin: 30px 0px;
}
.ty-holiday-gift-banner {
margin-top: -20px;
width: 100%;
}
.top-my-account {
margin-left: 22px;
}
/* Mainbox wrapper
========================================================================== */
.buttons-container {
padding: 17px 20px;
background: lighten(@base, 3%);
.clearfix();
.rounded_corners(6px);
}
.ty-mainbox-body .buttons-container {
.ui-dialog .buttons-container {
margin: 0px -20px;
}
margin: 25px 0px;
}
.ty-mainbox-title {
margin-bottom: 10px;
.clearfix();
}
.ty-mainbox-title__left {
float: left;
}
.ty-mainbox-title__right {
display: block;
float: right;
margin-top: 7px;
font-weight: normal;
font-size: 70%;
}
.ty-mainbox-title .ty-status {
float: right;
padding-top: 10px;
color: #404040;
font-style: normal;
font-size: 14px;
}
.ty-mainbox-title .ty-date {
font-style: normal;
font-size: 70%;
}
.ty-mainbox-container.ty-float-right,
.ty-mainbox-container.ty-float-left {
width: inherit;
}
.ty-subheaders-group {
margin: 0 15px 21px 15px;
}
.ty-subheader {
margin: 0;
padding: 7px 0 10px 0;
font-size: 18px;
color: #34495E;
}
.ty-subheader__tooltip {
font-size: inherit;
}
.ty-mainbox-simple-title {
margin-bottom: 10px;
.clearfix();
}
/* Important sidebox
========================================================================== */
.ty-sidebox-important {
margin-bottom: 15px;
}
.ty-sidebox-important__title {
width: 100%;
}
.ty-sidebox-important__title-wrapper {
font-size: 13px;
font-weight: normal;
color: #909598;
padding: 4px 14px 8px;
background: #ECF0F1;
float: left;
width: 100%;
box-sizing: border-box;
}
.ty-sidebox-important__body {
.border-radius(0 0 5px 5px);
}
/* Text links
========================================================================== */
.ty-text-links {
margin: 0 0 6px 0;
}
.ty-text-links:first-child {
padding-top: 0;
}
.ty-text-links .ty-level-0 {
margin-left: 0px;
}
.ty-text-links .ty-level-1 {
margin-left: 10px;
}
.ty-text-links .ty-level-2 {
margin-left: 20px;
}
.ty-text-links .ty-level-3 {
margin-left: 30px;
}
.ty-text-links .ty-level-4 {
margin-left: 40px;
}
.ty-text-links__active > .ty-text-links__a,
.no-touch .ty-text-links__a:hover {
color: darken(@links, 10%);
}
.ty-text-links__item {
position: relative;
display: block;
margin-right: 15px;
}
.ty-text-links-wrapper {
@media (max-width: 1024px) {
border-bottom: 1px solid @base;
}
}
.ty-text-links-btn {
@media (max-width: 1024px) {
display: inline-block;
padding: 9px 10px 7px 10px;
color: @dropdownTitleLinkColor; // color: darken(@base, 40%);
cursor: pointer;
}
}
.ty-text-links-btn.open {
@media (max-width: 1024px) {
z-index: 650;
background: darken(@base, 40%);
color: #fff;
}
}
.ty-text-links-btn__arrow {
@media (max-width: 1024px) {
font-size: 20px;
line-height: 0;
position: relative;
top: 5px;
width: 7px;
vertical-align: super;
}
}
/* Text links inline (Menus block) */
.ty-text-links_show_inline {
@media (max-width: 1024px) {
position: absolute;
min-width: 170px;
left: 15px;
right: 15px;
display: none;
background: #fff;
border: 1px solid darken(@base, 34%);
padding: 7px 14px;
z-index: 5;
margin: 0;
}
.ty-level-0 > .ty-text-links {
display: none;
position: absolute;
min-width: 200px;
background: #fff;
border: 1px solid darken(@base, 34%);
z-index: 10;
padding: 5px;
margin: 0;
.rounded_corners(4px);
@media (max-width: 1024px) {
display: block;
background: none;
border: 0 none;
padding: 0;
position: relative;
}
}
.ty-text-links__item {
@media (max-width: 1024px) {
margin-right: 0;
}
&:before {
content: none;
}
.ty-text-links__a {
@media (max-width: 1024px) {
display: block;
}
}
}
.ty-text-links {
@media (max-width: 1024px) {
margin: 0;
}
}
}
.ty-text-links_show_inline > .ty-text-links__item {
display: inline-block;
}
.no-touch .ty-text-links_show_inline .ty-level-0:hover .ty-text-links {
display: block;
}
.ty-text-links_show_inline .ty-level-0.is-hover-link > .ty-text-links {
display: block;
}
/* */
.ty-dropdown-box .ty-text-links__item {
margin: 0;
padding: 7px 14px;
}
/* ==========================================================================
Jquery ui
========================================================================== */
.ui-datepicker {
width: unset !important;
min-width: 17em !important;
}
/* Accordion
========================================================================== */
.ty-accordion {
margin-top: 20px;
.ui-accordion-header-icon {
position: absolute;
top: 5px;
right: 10px;
background: none;
text-indent: 0;
overflow: visible;
}
.ui-accordion-header-icon:before {
font-family: 'glyphs';
font-size: 25px;
content: "\e019";
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ui-accordion-header {
position: relative;
color: #7c7e80;
margin-top: 5px;
padding: 8px 12px;
border: 0px;
border-radius: 0px;
background: #e5ebec;
background-image: none;
font-family: @links_font;
font-size: @links_font_size;
font-weight: @links_font_weight;
font-style: @links_font_style;
text-decoration: @links_font_decoration;
cursor: pointer;
.rounded_corners(4px);
.user-select(none);
&.ui-state-active {
background: #bdc3c7;
color: white;
.ui-accordion-header-icon:before {
content: "\e01c";
}
}
}
.ui-accordion-content {
border: 0;
}
}
// (2) Styles common post hook
@import "hooks/styles/common.post.less";
/* ==========================================================================
Main styles
========================================================================== */
.ty-logo-container {
position: relative;
margin-top: 2px;
}
.ty-logo-container__image {
display: inline-block;
text-decoration: none;
}
.ty-logo-container__image.vertical-middle {
visibility: hidden;
}
/* ==========================================================================
Product temlates
========================================================================== */
/* Grid list
========================================================================== */
.ty-grid-list__item {
padding: 10px 10px 25px 10px;
position: relative;
border: 1px solid transparent;
.clearfix();
&--overlay:hover {
border-color: #acbdcd;
}
&:hover {
.ty-grid-list__control {
display: block;
position: absolute;
z-index: 110;
background: #fff;
border: 1px solid #acbdcd;
border-top: 0;
margin-left: -11px;
padding: 0px 10px 25px 10px;
}
}
}
.ty-grid-list__item:hover .ty-icon-left-circle,
.ty-grid-list__item:hover .ty-icon-right-circle {
visibility: visible;
}
.ty-grid-list__image {
position: relative;
padding: 18px 0;
border: 1px solid #ebebeb;
background: #fff; //background of the thumb
text-align: center;
min-height: 50px;
}
.ty-grid-list__image .ty-no-image {
border: 0px;
}
.ty-grid-list__price {
display: block;
text-align: left;
vertical-align: top;
overflow: hidden;
word-break: break-all;
}
.ty-grid-list__no-price {
text-align: left;
width: auto;
}
.ty-grid-list__item-name {
margin-top: 10px;
margin-bottom: 5px;
display: block;
width: 100%;
overflow: hidden;
}
.ty-grid-list__item-name .product-title {
display: block;
color: lighten(@font, 35%);
word-wrap: break-word;
}
.ty-grid-list__control {
display: none;
width: 100%;
width: ~"calc(100% - 20px)";
padding-top: 5px;
.ty-btn {
margin-bottom: 10px;
margin-right: 10px;
}
}
/* Product empty */
.ty-product-empty {
background: #F8F9F9;
margin: 28px 10px 0 10px;
height: 190px;
text-align: center;
}
.ty-product-empty__text {
color: #cdcdcd;
font-size: 115%;
line-height: 190px;
}
/* Product list
========================================================================== */
.ty-product-list {
padding: 35px 0;
}
.ty-product-list__image {
position: relative;
float: left;
margin: 0 25px 20px 0;
border: 1px solid #ebebeb;
}
.ty-product-list__content {
overflow: hidden;
}
.ty-product-list__info {
overflow-x: auto;
overflow-y: hidden;
}
.ty-product-list__control .ty-btn {
margin-bottom: 10px;
margin-right: 10px;
&.ty-btn-icon {
margin-right: 10px;
&~.ty-btn.ty-btn-icon {
margin-left: 5px;
}
}
}
.ty-product-list__control .ty-product-coming-soon {
margin: 10px 0px;
}
.ty-product-list__item-name .product-title {
font-size: 130%;
word-wrap: break-word;
}
.ty-product-list__price .ty-price-num {
font-size: 120%;
}
.ty-product-list__price {
padding: 10px 0px;
}
.ty-product-list__description {
line-height: 170%;
}
.ty-product-list .ty-qty-out-of-stock {
margin-right: 20px;
padding: 2px 0px 0px 0px;
vertical-align: top;
}
/* Compact list
========================================================================== */
.ty-compact-list__item {
.clearfix();
padding: 10px 0;
border-bottom: 1px solid #dfdfdf;
position: relative;
}
.ty-compact-list__content {
.clearfix();
}
.ty-compact-list__item .ty-discount-label {
top: auto;
right: auto;
bottom: 5px;
}
.ty-compact-list__item .ty-qty {
margin: 0;
}
.ty-compact-list__check {
float: left;
padding-top: 4px;
padding-bottom: 4px;
}
.ty-compact-list__image {
float: left;
width: 13%;
padding: 0px 25px;
text-align: center;
}
.ty-compact-list__image .ty-discount-label {
position: static;
float: none;
display: inline-block;
margin-top: 5px;
}
.ty-compact-list__title {
float: left;
width: 30%;
margin: 0 10px 0 0;
word-wrap: break-word;
}
.ty-compact-list__controls {
float: right;
position: relative;
padding-bottom: 30px;
width: 40%;
text-align: right;
}
.ty-compact-list__controls .ty-btn__add-to-cart {
margin: 0 0 0 10px;
}
.ty-compact-list__controls .ty-qty-out-of-stock {
margin-right: 0;
}
.ty-compact-list__controls .ty-product-coming-soon {
width: 100%;
right: 0px;
padding-top: 12px;
text-align: right;
position: absolute;
}
.ty-product-coming-soon {
color: #767676;
}
.ty-compact-list__controls > div {
display: inline-block;
vertical-align: middle;
}
.ty-compact-list__controls .qty {
padding-top: 0;
}
.ty-compact-list__price {
margin-right: 10px;
}
.ty-compact-list__price .ty-list-price {
margin-right: 4px;
}
.ty-compact-list__item .ty-control-group__label {
width: auto;
}
/* Thumbnail list
========================================================================== */
.ty-thumbnail-list__item {
margin-bottom: 20px;
text-align: center;
}
.ty-thumbnail-list__img-block {
display: inline-block;
}
.ty-thumbnail-list__name {
padding: 6px 0;
}
.ty-thumbnail-list__butons {
padding: 10px 0;
}
/* /Thumbnail list */
/* Recently viewed
========================================================================== */
/*
* Template: templates/blocks/list_templates/small_items.tpl
*/
.ty-template-small__item {
padding: 10px 0;
border-bottom: 1px dotted #ebebeb;
}
.ty-template-small__item:last-child {
border: 0;
}
.ty-template-small__item-img {
float: left;
margin-right: 10px;
vertical-align: top;
}
.ty-template-small__item-price {
margin-top: 5px;
}
.ty-template-small__item-description {
overflow: hidden;
}
/* Product scroller
========================================================================== */
/*
* Template: templates/blocks/products/products_scroller.tpl
*/
.ty-scroller-list__item {
padding-top: 20px;
padding-bottom: 40px;
text-align: center;
.ty-grid-list__item {
padding-bottom: 0;
.ty-grid-list__control {
display: block;
position: static;
padding-top: 5px;
padding-bottom: 0;
width: 100%;
border-bottom: 0;
}
}
}
.ty-scroller-list__description .product-title {
display: inline-block;
overflow: hidden;
padding-top: 5px;
width: 90%;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
}
.ty-scroller-list__item:hover .ty-quick-view-button {
visibility: visible;
text-align: center;
}
.ty-simple-list__buttons {
padding: 17px 20px;
}
.ty-simple-list .ty-discount-label {
top: 1px;
right: 1px;
}
.ty-simple-list .ty-discount-label:before,
.ty-simple-list .ty-discount-label:after {
content: "";
position: absolute;
}
.ty-simple-list .ty-discount-label:before {
top: -1px;
right: 0;
bottom: 0;
width: 1px;
height: 150px;
background-image: -webkit-linear-gradient(bottom, transparent, @base);
background-image: -moz-linear-gradient(bottom, transparent, @base);
background-image: -o-linear-gradient(bottom, transparent, @base);
}
.ty-simple-list .ty-discount-label:after {
top: 0;
right: 1px;
width: 150px;
height: 1px;
background-image: -webkit-linear-gradient(right, @base, transparent);
background-image: -moz-linear-gradient(right, @base, transparent);
background-image: -o-linear-gradient(right, @base, transparent);
}
/* /Product scroller */
/* Text links list
========================================================================== */
/*
* Template: templates/blocks/products/products_text_links.tpl
*/
ol.text-link-list .text-link-list__item {
list-style: decimal;
}
/* ==========================================================================
Profile field
========================================================================== */
/*
* Url: dispatch=profiles.update
* Template: templates/views/profiles/update.tpl
* Template: templates/views/profiles/components/profile_fields.tpl
* Template: templates/views/profiles/components/profiles_account.tpl
*/
.ty-profile-field {
margin-top: 30px;
}
.ty-profile-field .ty-input-text {
width: 100%;
}
.ty-profile-field__switch {
margin: 25px 0px;
padding: 15px 20px;
border: 2px solid darken(@base, 18%);
background: white;
.border-radius(3px);
}
.ty-profile-field__switch-label {
float: left;
}
.ty-profile-field__switch-actions {
float: right;
}
.ty-profile-field__switch-actions label {
padding-right: 15px;
}
.ty-profile-field__select-country,
.ty-profile-field__select-state,
.ty-profile-field__select {
width: 100%;
}
.ty-billing-zip-code,
.ty-shipping-zip-code {
clear: both;
width: 120px;
}
.company .buttons-container {
border-top: 1px solid #ddd;
.border-radius(0px 0px 3px 3px);
margin: 30px 0px 28px -21px;
padding: 17px 20px 17px 20px;
width: 100%;
}
.ty-billing-first-name,
.ty-billing-last-name,
.ty-shipping-first-name,
.ty-shipping-last-name,
.ty-billing-country,
.ty-billing-state,
.ty-shipping-country,
.ty-shipping-state,
.ty-first-name,
.ty-last-name {
display: inline-block;
width: 47%;
}
.ty-billing-first-name + .ty-billing-last-name,
.ty-billing-country + .ty-billing-state,
.ty-shipping-first-name + .ty-shipping-last-name,
.ty-shipping-country + .ty-shipping-state,
.ty-first-name + .ty-last-name {
margin-left: 4.8%;
}
.billing-last-name,
.shipping-last-name {
margin-right: 0;
}
.ty-company-description textarea {
width: 100%;
}
/* Account detail (Block)
========================================================================== */
.ty-account {
margin-top: 30px;
}
.ty-account--nopadding {
margin: 0;
}
.ty-account .ty-input-text {
width: 100%;
}
.ty-account-detail {
margin: 45px 0 0 58px;
color: #BDC3C7;
}
.ty-account-detail__image {
text-align: center;
margin-top: 60px;
}
.ty-account-detail h4 {
font-size: 19px;
padding-bottom: 10px;
}
.ty-account-detail ul li {
list-style-type: disc;
margin: 15px 0 0 17px;
}
/* Account benefits (Block)
========================================================================== */
.ty-account-benefits {
margin: 47px 0 0 60px;
color: #BDC3C7;
}
.ty-account-benefits h4 {
padding-bottom: 22px;
font-size: 19px;
}
.ty-account-benefits ul li {
list-style-type: disc;
margin-bottom: 11px;
margin-left: 17px;
}
/* ==========================================================================
Select languages and currencies
========================================================================== */
.ty-languages {
margin: 0 15px 0 0;
}
.ty-languages__item {
float: left;
display: inline-block;
padding: 8px 6px;
}
.ty-languages__icon-link .ty-flag {
margin-right: 0;
}
.ty-languages__active {
background: #dfe4e4;
color: black;
}
.ty-currencies__txt {
float: left;
padding: 8px 5px 8px 0;
}
.ty-currencies__item {
float: left;
padding: 8px 13px;
.rounded_corners(4px);
color: @top_panel_links;
}
.ty-currencies__item:hover {
background: darken(@base, 4%);
color: @top_panel_links_hover; // color: darken(@top_panel_links, 10%);
}
.ty-currencies__active {
background: darken(@base, 4%);
color: @top_panel_links_hover; // color: darken(@top_panel_links, 10%);
}
/* ==========================================================================
Sidebox
========================================================================== */
.ty-sidebox {
margin-bottom: 44px;
word-wrap: break-word;
background: @sidebar;
}
.ty-sidebox__title {
position: relative;
padding: 0px 30px 9px 0px;
border-bottom: 1px solid @base;
}
.touch .ty-sidebox__title {
cursor: pointer;
}
.ty-sidebox__title-toggle {
position: absolute;
top: 0px;
right: 0px;
z-index: 100;
float: left;
width: 35px;
color: darken(@base, 20%);
text-align: center;
font-size: 25px;
cursor: pointer;
}
.ty-sidebox__icon-hide {
display: none;
}
.ty-sidebox__title.open .ty-sidebox__icon-open {
display: none;
}
.ty-sidebox__title.open .ty-sidebox__icon-hide {
display: block;
}
.ty-sidebox__title-wrapper,
.ty-sidebox__title span,
.ty-sidebox__title a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: @body_font_size;
color: #A1A6AA;
padding: 0;
}
.ty-sidebox .buttons-container {
background: none;
padding: 20px 0px;
}
/* ==========================================================================
Compare products
========================================================================== */
/*
* Url: dispatch=product_features.compare
* Template: templates/views/product_features/compare.tpl
*/
/* Compare */
.ty-compare {
position: relative;
}
.ty-compare__wrapper {
overflow-x: auto;
overflow-y: hidden;
}
/* Compare menu */
.ty-compare-menu {
width: 150px;
}
.ty-compare-menu__a {
padding: 8px 16px 7px;
display: block;
}
.ty-compare-menu__a:hover {
background: #eff0f2;
color: #34495e;
text-decoration: none;
}
.ty-compare-menu__elem {
display: block;
padding: 8px 16px 7px;
color: #fff;
background: #1abc9c;
word-break: break-all;
word-break: break-word;
}
.ty-compare-products {
width: 100%;
table-layout: fixed;
}
.ty-compare-products__product {
padding: 0 10px;
width: 215px;
vertical-align: top;
text-align: center;
}
.ty-compare-products__item {
padding: 5px 0;
}
.ty-compare-products__menu {
vertical-align: top;
padding: 0 10px;
width: 150px;
}
.ty-compare-products__product .buttons-container {
margin: 0;
}
.no-touch .ty-compare-products__product .ty-qty .ty-control-group__label {
display: inline-block;
float: none;
width: 90px;
}
.touch .ty-compare-products__product .ty-qty .ty-control-group__label {
display: block;
width: 100%;
}
.ty-compare-products__delete {
position: relative;
visibility: hidden;
padding-bottom: 2px;
}
.touch .ty-compare-products__delete,
.ty-compare-products__product:hover .ty-compare-products__delete {
visibility: visible;
}
.ty-compare-feature {
position: relative;
z-index: 20;
margin-bottom: 10px;
}
.ty-compare-feature__table {
width: 100%;
table-layout: fixed;
}
.ty-compare-feature__row:nth-child(odd) {
background-color: lighten(@base, 47%);
}
.ty-compare-feature__item {
padding: 10px;
border: 1px solid #ebebeb;
vertical-align: middle;
text-align: left;
}
.ty-compare-feature_item_size {
padding: 0 10px;
width: 215px;
}
.ty-compare-sort {
width: 150px;
text-align: left;
}
.ty-compare-sort__a {
visibility: hidden;
margin-left: 3px;
vertical-align: middle;
}
.touch .ty-compare-sort__a,
.ty-compare-sort:hover .ty-compare-sort__a {
visibility: visible;
}
.ty-compare-list__item {
text-align: left;
}
.ty-compare-checkbox {
position: relative;
top: 2px;
display: inline-block;
margin-right: 5px;
width: 13px;
height: 13px;
border: 1px solid #4d4d4d;
background-color: #fff;
color: lighten(@font, 25%);
text-align: left;
}
.ty-compare-checkbox__icon {
position: relative;
top: -2px;
left: 1px;
font-size: 11px;
}
/* /Compare */
/* ==========================================================================
Common
========================================================================== */
/* Product data
========================================================================== */
/*
* Template: templates/common/product_data.tpl
*/
.ty-price-num {
font-size: 15px;
font-weight: bold;
}
.ty-sku {
padding: 0;
font-size: 90%;
}
.ty-price,
.ty-sub-price,
.ty-list-price {
font-size: 100%;
}
.ty-price {
margin: 6px 0;
color: @price;
}
.ty-sub-price {
color: darken(@price, 10%);
}
.ty-list-price {
color: darken(@price, 10%);
line-height: 100%;
font-size: 13px;
}
.ty-tax-include {
display: block;
padding-bottom: 5px;
}
.ty-price-update {
display:inline-block;
font-size: 13px;
}
.ty-qty {
margin-bottom: 15px;
}
.ty-qty-in-stock,
.ty-qty-out-of-stock {
font-weight: bold;
}
.ty-qty-in-stock {
color: @in_stock;
}
.ty-qty-out-of-stock {
color: #e74c3c;
}
.ty-min-qty-description {
font-size: 12px;
padding-top: 0;
color: darken(@base, 25%);
}
.ty-price-curency {
display: inline-block;
}
.ty-price-curency__title {
display: inline-block;
float: left;
margin: 5px 0;
}
input.ty-price-curency__input {
margin-left: 5px;
width: 80px;
height: 35px;
font-size: 140%;
}
.ty-no-price {
display: block;
padding: 0px;
color: #E74C3C;
}
.ty-product-notify-email {
width: 200px;
margin-bottom: 15px;
}
.ty-product-notify-email__input {
width: 100%;
}
.ty-product-labels {
position: absolute;
display: flex;
flex-wrap: wrap;
margin-left: -3px;
margin-bottom: -3px;
z-index: 1;
max-width: 100%;
max-height: 100%;
overflow: hidden;
&__item {
display: flex;
background-color: @product_label;
padding: 5px 10px;
margin-left: 3px;
margin-bottom: 3px;
overflow: hidden;
&--link {
&:hover {
opacity: 0.7;
}
}
&--discount {
background-color: @discount_label;
}
&--shipping {
background-color: @shipping_label;
}
&--mini {
@media (min-width: 481px) {
margin-bottom: 1px;
margin-left: 1px;
padding: 2px 7px;
font-size: 0.9em;
}
}
&--rounded {
border-radius: 3px;
}
}
&__content {
color: #fff;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&__icon {
display: flex;
align-items: center;
margin-right: 0.5rem;
}
&--top-right {
top: 0;
right: 0;
justify-content: flex-end;
}
&--top-left {
top: 0;
flex-direction: row-reverse;
justify-content: flex-end;
}
&--bottom-right {
bottom: 0;
right: 0;
justify-content: flex-end;
}
&--bottom-left {
bottom: 0;
flex-direction: row-reverse;
justify-content: flex-end;
}
&--mini {
@media (min-width: 481px) {
margin-bottom: -1px;
margin-left: -1px;
}
}
&--static {
position: static;
}
}
.ty-discount-label {
position: absolute;
right: 0;
top: 0;
background: @discount_label;
color: white;
list-style: none;
}
.ty-discount-label__item {
float: left;
height: 28px;
font-size: @body_font_size;
white-space: nowrap;
line-height: 28px;
padding: 0 10px 0 12px;
color: #fff;
}
/* Quantity changer */
.ty-value-changer {
display: inline-block;
vertical-align: top;
// width: 61px; or width: 63px;
width: 2 * @body_font_size + 18px + 17px; // Width + (Border + Padding) + Increase/Decrease
}
input.ty-value-changer__input {
float: left;
// width: 44px; or width: 46px;
width: 2 * @body_font_size + 18px; // ~3.5 characters: Width + (Border + Padding)
height: 33px;
text-align: center;
}
.touch input.ty-value-changer__input {
height: 34px;
}
.ty-value-changer__increase,
.ty-value-changer__decrease {
position: relative;
float: right;
width: 14px;
height: 14px;
border: 1px solid @inputBorder; // border: 1px solid darken(@base, 15%);
color: @inputMutedText; // color: darken(@base, 15%);
font-size: 16px;
line-height: 13px;
cursor: pointer;
background: #fff;
.rounded_corners(3px);
.user-select(none);
}
.ty-value-changer__increase {
margin-bottom: 1px;
}
.ty-value-changer__increase:hover,
.ty-value-changer__decrease:hover {
color: @inputMutedText; // color: darken(@base, 15%);
text-decoration: none;
}
.no-touch .ty-value-changer__increase:hover,
.no-touch .ty-value-changer__decrease:hover {
background: @inputBorder; // background: darken(@base, 15%);
color: #fff;
text-decoration: none;
}
.touch .ty-value-changer {
// width: 118px; or width: 120px;
width: 2 * @body_font_size + 18px + (17px + 57px); // Width + (Border + Padding) + Increase/Decrease mobile
}
.touch .ty-value-changer__input {
float: right;
}
.touch .ty-value-changer__increase,
.touch .ty-value-changer__decrease {
float: left;
width: 36px;
height: 32px;
font-size: 22px;
line-height: 27px;
background: @inputBorder; // background: darken(@base, 15%);
color: #fff;
}
.touch .ty-value-changer__increase {
border-right: 0;
float: right;
}
.touch .ty-value-changer__decrease {
border-left: 0;
}
/* /Quantity changer */
/* Period-select */
/*
* Template: templates/common/period_selector.tpl
*/
.ty-period {
clear: both;
}
.ty-period__wrapper {
float: left;
padding-right: 20px;
}
.ty-period__select {
width: 180px;
}
.ty-period__dash {
padding: 0 3px;
}
/* /Period-select */
/* Calendar */
/*
* Template: templates/common/calendar.tpl
*/
.ty-calendar__block {
width: 115px;
display: inline-block;
position: relative;
}
.ty-calendar__button {
position: absolute;
top: 15px;
right: 2px;
margin-top: -10px;
margin-right: 8px;
color: darken(@base, 25%);
vertical-align: middle;
font-size: 155%;
}
.ty-calendar__input {
width: 100%;
}
.ty-calendar-link:hover {
text-decoration: none;
}
/* /Calendar */
/* Quantity discounts */
/*
* Template: templates/views/products/components/products_qty_discounts.tpl
*/
.ty-qty-discount {
overflow-x: auto;
margin-bottom: 15px;
}
.ty-qty-discount__table {
margin-top: 10px;
min-width: 200px;
padding: 0;
border: 1px solid @base;
}
.ty-qty-discount__table .ty-qty-discount__td {
border: 0 none;
border-right: 1px solid @base;
padding: 8px 12px;
}
/* /Quantity discounts */
/* Tooltip */
/*
* Template: templates/common/tooltip.tpl
*/
.tooltip {
display: none;
max-width: 200px;
z-index: 10000;
padding: 9px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: left;
font-weight: normal;
opacity: 1;
filter: alpha(opacity=100);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.ty-tooltip--mobile {
position: fixed !important;
top: auto !important;
bottom: 25px;
left: 20px !important;
width: ~"calc(100% - 40px)";
max-width: none;
.tooltip-arrow {
display: none;
}
}
.ty-tooltip--link {
border: 0;
}
.ty-tooltip--filter:not(.ty-tooltip--mobile) {
margin-left: 20px;
}
.ty-tooltip--filter.arrow-left:not(.ty-tooltip--mobile) {
margin-left: -20px;
}
[dir='rtl'] .ty-tooltip--filter.arrow-left:not(.ty-tooltip--mobile) {
margin-right: 20px;
}
.ty-tooltip--link:hover,
.ty-tooltip--link:focus {
color: #fff;
outline: none;
}
.tooltip p {
color: #fff;
padding: 0px;
}
.tooltip li{
color: #fff;
}
.tooltip-arrow {
position: absolute;
top: -10px;
right: 3px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}
.tooltip.arrow-top .tooltip-arrow {
top: auto;
left: auto;
bottom: -10px;
right: 3px;
border-width: 0 10px 10px 0;
border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
}
.tooltip.right {
padding: 9px;
text-align: left !important;
}
.ty-tooltip--mobile.right {
text-align: center !important;
}
.arrow-top.right .tooltip-arrow {
left: 3px;
right: auto;
border-width: 10px 10px 0 0;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}
.arrow-down.right .tooltip-arrow {
right: auto;
top: -10px;
left: 3px;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
}
.arrow-down.top .tooltip-arrow {
top: auto;
bottom: -10px;
border-width: 10px 0 0 10px;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}
.arrow-down.right.top .tooltip-arrow {
right: auto;
top: auto;
bottom: -10px;
left: 3px;
border-width: 10px 10px 0 0;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}
.arrow-right .tooltip-arrow {
top: 50%;
margin-top: -5px;
right: 100%;
border-width: 5px 5px 5px 0;
border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
}
.arrow-left .tooltip-arrow {
top: 50%;
margin-top: -5px;
left: 100%;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
}
/* width image */
.tooltip img {
max-width: 100%;
}
.touchevents body {
cursor: pointer;
}
.touchevents.mouseevents body {
cursor: initial;
}
.ty-tooltip-block {
vertical-align: middle;
cursor: pointer;
}
/* /Tooltip */
/* Images */
/*
* Template: templates/common/image.tpl
*/
.ty-no-image {
position: relative;
display: block;
border: 1px solid #ebebeb;
background: #fcfcfc;
color: #c8c8c8;
cursor: default;
max-width: 100%;
min-width: 100%;
.box-sizing(border-box);
}
.ty-no-image__icon {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
margin: -16px 0 0 -16px;
width: 32px;
height: 32px;
font-size: 32px;
line-height: 32px;
}
.ty-spinner {
background: url('../media/images/spinner.gif') no-repeat center center;
}
.ty-grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
}
.ty-grayscale:hover {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
}
/* /Images */
/* Status */
/*
* Template: templates/common/status.tpl
*/
.ty-status-info label {
display: block;
margin: 0 20px 10px 0;
}
/* /Status */
/* Ajax popups (Vendors, languages, currencies)
========================================================================== */
/*
* Template: templates/common/ajax_select_object.tpl
* Template: templates/common/select_object.tpl
*/
.ty-select-block {
position: absolute;
top: 33px;
left: 0;
z-index: 1022;
min-width: 50px;
border: 1px solid darken(@base, 34%);
background-color: #fff;
}
.ty-select-block-rounded() when (@rounded_corners = true) {
.ty-select-block {
border-bottom-left-radius: @inputBorderRadius; // border-bottom-left-radius: 4px;
border-bottom-right-radius: @inputBorderRadius; // border-bottom-right-radius: 4px;
}
}
.ty-dropleft .ty-select-block {
right: 0px;
left: auto;
}
.ty-select-block-rounded();
.ty-select-wrapper {
position: relative;
}
.ty-select-block__a {
cursor: pointer;
display: block;
padding: 7px 13px 4px;
color: @dropdownTitleLinkStyle2Color; // color: darken(@base, 45%);
border: 1px solid transparent;
}
.ty-select-block__a:hover {
background: darken(@base, 4%);
color: @dropdownTitleLinkStyle2Color; // color: darken(@base, 45%);
text-decoration: none;
}
.ty-select-block__a.open, .ty-select-block__a.open:hover {
background: darken(@base, 34%);
color: white;
}
.ty-select-block__a.open .ty-select-block__arrow {
color: white;
}
.ty-select-block__a-item {
display: inline-block;
vertical-align: top;
}
.ty-select-block__arrow {
margin-left: 3px;
font-size: 140%;
color: @dropdownTitleLinkColor; // color: darken(@base, 40%);
}
input.ty-select-block__input {
margin: 5px 10px;
width: 220px;
}
.ty-select-block__list-item .ty-select-block__list-a {
text-decoration: none;
}
.ty-select-block__list-a:hover {
background: @dropdownLinkBackgroundHover; // background: @links;
color: @dropdownLinkColorHover; // color: white;
}
.ty-select-block__list-a {
display: block;
padding: 7px 14px 7px 14px;
white-space: nowrap;
cursor: pointer;
.clearfix();
}
.ty-select-block__txt {
float: left;
padding: 8px 5px 8px 0;
}
/* /Ajax popups */
/* Dropdown box (Login, basket)
========================================================================== */
/*
* Template: templates/blocks/wrappers/onclick_dropdown.tpl
* Template: templates/eblocks/wrappers/onclick_dropdown.tpl
*/
.ty-dropdown-box {
display: inline-block;
position: relative;
color: #34495E;
}
.ty-dropdown-box .ty-icon-down-micro {
position: relative;
top: 5px;
width: 7px;
color: @dropdownTitleLinkColor; // color: darken(@base, 40%);
font-size: 20px;
line-height: 0;
}
.ty-dropdown-box__title {
position: relative;
display: inline-block;
padding: 7px 11px 7px 8px;
border: 1px solid transparent;
}
.ty-dropdown-box__title a {
color: @dropdownTitleLinkColor; // color: darken(@base, 40%);
}
.ty-dropdown-box__title a:hover {
text-decoration: none;
}
.ty-dropdown-box__title:hover {
background: darken(@base, 4%);
}
.ty-dropdown-box__title .ty-account-info__title {
text-decoration: none;
white-space: nowrap;
}
.ty-dropdown-box__title.open {
z-index: 650;
background: darken(@base, 40%);
}
.ty-dropdown-box__title.open a,
.ty-dropdown-box__title.open i,
.ty-dropdown-box__title.open .ty-icon,
.ty-dropdown-box__title.open .ty-minicart-title {
color: white;
}
.ty-dropdown-box__content {
position: absolute;
top: 100%;
right: 0;
z-index: 600;
margin-top: -1px;
min-width: 220px;
border: 1px solid darken(@base, 34%);
background: #fff;
text-align: left;
}
.ty-dropdown-box__content-rounded() when (@rounded_corners = true) {
.ty-dropdown-box__content {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.ty-account-info__buttons {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.top-cart-content .ty-dropdown-box__content {
border-top-left-radius: 6px;
}
.top-cart-content .ty-dropdown-box__title {
border-radius: 6px;
}
.top-cart-content .ty-dropdown-box__title.open {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.ty-dropdown-box__content .buttons-container {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
.ty-dropdown-box__content-rounded();
.ty-dropdown-box__content .ty-dropdown-box__item {
display: block;
margin-bottom: 0px;
padding: 7px 14px;
}
.ty-dropdown-box__content .ty-dropdown-box__item:hover {
background: @dropdownLinkBackgroundHover; // background: @links;
color: @dropdownLinkColorHover; // color: white;
a {
display: block;
color: @dropdownLinkColorHover; // color: white;
}
}
.ty-dropdown-box__content .ty-account-info__orders {
padding: 14px 14px 7px 14px;
margin-top: 20px;
background: lighten(@base, 3%);
}
.ty-dropdown-box__content .ty-account-info__buttons {
padding: 15px 14px 16px 14px;
margin-top: -6px;
background: lighten(@base, 3%);
}
.ty-dropdown-box__content .ty-account-info__name:hover {
background: none;
color: #34495e;
}
.ty-minicart__icon {
color: darken(@base, 45%);
top: 7px;
font-size: 14px;
position: absolute;
&.ty-icon-cart {
font-size: 16px;
top: 8px;
}
}
/* /Dropdown box */
/* Account
========================================================================== */
/*
* Template: templates/blocks/my_account.tpl
*/
.ty-account-info {
padding-top: 2px;
}
.ty-account-info__title {
padding: 0 5px;
}
.ty-account-info__user-arrow {
position: relative;
top: 5px;
width: 7px;
color: #34495E;
font-size: 20px;
line-height: 0;
}
.logged.ty-sidebox__title .ty-account-info__user-arrow {
display: none;
}
.logged .ty-account-info__title,
.logged .ty-account-info__user-arrow {
color: darken(@base, 45%);
}
.ty-account-info__item {
padding: 0;
margin-bottom: 12px;
}
.ty-account-info__item .ty-account-info__a {
text-decoration: none;
}
.ty-account-info__name {
padding-bottom: 10px;
}
.ty-account-info__orders {
padding: 15px 0 4px;
}
.ty-account-info__orders-txt {
color: #6c6c6c;
}
.ty-account-info__orders-input {
margin: 5px 0 0;
}
.ty-dropdown-box__content .ty-account-info__buttons .ty-btn {
display: block;
width: 100%;
.box-sizing(border-box);
}
.ty-dropdown-box__content .ty-account-info__buttons .ty-btn + .ty-btn {
margin: 10px 0 0;
}
/* Account */
/* ==========================================================================
Login
========================================================================== */
/* Login form
========================================================================== */
/*
* Url dispatch=auth.login_form
* Template: templates/views/auth/login_form.tpl
*/
.ty-login {
margin-top: 30px;
min-height: 200px;
}
.ty-login__input {
margin: 0;
width: 100%;
}
.ty-login__remember-me {
padding: 6px 0;
}
.ty-login__filed-label {
width: auto;
color: darken(@font, 10%);
}
.ty-password-forgot__label {
float: left;
}
a.ty-password-forgot__a {
float: right;
padding: 6px 0;
}
.ty-recover-password {
margin-top: 30px;
}
.ty-login-reglink__a {
display: inline-block;
padding: 0 0 10px;
}
/* Login popup
========================================================================== */
/*
* Template: templates/blocks/my_account.tpl
* Template: templates/views/auth/login_form.tpl
*/
.ty-login-popup {
min-width: 295px;
max-width: 310px;
font-family: @body_font;
font-size: @body_font_size;
}
.ty-login-popup .ty-login__input {
margin: 0;
padding: 8px 5px 7px;
height: 36px;
font-size: 115%;
}
.ty-login-popup__description {
margin: 0 0 15px 0;
color: #2e3a47;
font-size: 1.17em;
}
.ty-login-popup__description--bold {
font-weight: bold;
}
/* Login popup */
/* Captcha
========================================================================== */
/*
* Template: templates/common/image_verification.tpl
*/
.ty-captcha__img {
border: 1px solid #C7C7C7;
cursor: pointer;
}
.ty-captcha__label {
display: inline-block;
margin-bottom: 5px;
}
.ty-captcha__code {
display: inline-block;
min-width: 130px;
vertical-align: top;
}
.ty-captcha__refresh {
position: relative;
vertical-align: middle;
margin-left: 7px;
color: #8D8D8D;
font-size: 14px;
cursor: pointer;
}
.ty-captcha__input {
margin: 0;
margin-right: 10px;
padding: 3px 3px;
width: 120px;
vertical-align: top;
}
.ty-checkout__login .ty-captcha__input {
width: 110px;
margin-bottom: 5px;
}
.ty-checkout__login .buttons-container {
background: none;
margin: 0px;
}
.ty-login-popup .ty-captcha__input {
width: 140px;
margin-bottom: 6px;
}
.ty-captcha__txt {
clear: both;
padding-top: 3px;
color: @font;
}
/* /Captcha */
/* Login information
========================================================================== */
/*
* Url dispatch=auth.login_form
* Template: templates/blocks/static_templates/auth_info.tpl
*/
.ty-login-info {
margin: 46px 0 0 59px;
}
.ty-login-info__title,
.ty-login-info h4 {
padding-bottom: 10px;
margin: 0;
font-size: 19px;
color: #BDC3C7;
}
.ty-login-info__txt {
color: #BDC3C7;
}
/* Login information */
/* Success registration
========================================================================== */
/*
* Url: dispatch=profiles.success_add
* Template: templates/views/profiles/success_add.tpl
*/
.ty-success-registration__text {
display: block;
padding: 7px 0 40px;
line-height: 170%;
}
.ty-success-registration__item {
display: inline-block;
vertical-align: top;
margin-bottom: 30px;
padding-left: 17px;
min-height: 60px;
width: 48%;
border-left: 1px solid darken(@base, 5%);
.box-sizing(border-box);
}
.success-registration__a {
font-weight: bold;
}
.ty-success-registration__info {
display: block;
margin-top: 10px;
color: darken(@base, 25%);
}
/* Success registration */
/* /Login */
/* ==========================================================================
Breadcrumbs
========================================================================== */
/*
* Template: templates/common/breadcrumbs.tpl
*/
.ty-breadcrumbs {
position: relative;
margin-bottom: 14px;
padding: 20px 105px 10px 0px;
color: lighten(@base, 10%);
}
.ty-breadcrumbs__arrow,
.ty-breadcrumbs__a,
.ty-breadcrumbs__current {
display: inline-block;
padding: 2px;
}
.ty-breadcrumbs__current {
color: @links;
}
.ty-breadcrumbs__a {
display: inline-block;
color: darken(@base, 25%);
}
.ty-breadcrumbs__slash {
display: inline-block;
margin: 0px 6px;
padding: 2px 0;
color: darken(@base, 25%);
}
.ty-breadcrumbs__a:hover {
color: darken(@base, 25%);
}
@media (max-width: 767px) {
.ty-breadcrumbs__slash--hide-mobile,
.ty-breadcrumbs__a--hide-mobile,
.ty-breadcrumbs__current--hide-mobile {
display: none;
}
}
.breadcrumbs__back-button {
box-sizing: border-box;
min-width: 34px;
min-height: 34px;
margin-right: 20px;
}
@media (min-width: 768px) {
.breadcrumbs__back-button--hide-desktop {
display: none;
}
}
.ty-product-switcher {
position: absolute;
top: 25px;
right: 0;
padding: 0 24px;
}
.ty-product-switcher__a {
display: inline-block;
position: absolute;
cursor: pointer;
top: -2px;
padding: 0;
font-size: 18px;
}
.ty-product-switcher__a:hover {
text-decoration: none;
}
.ty-product-switcher__a-left {
float: left;
left: 0;
}
.ty-product-switcher__a-right {
float: right;
right: 0;
}
.ty-product-switcher__icon {
color: darken(@base, 30%);
}
.ty-product-switcher__a:hover .ty-product-switcher__icon {
color: darken(@base, 20%);
}
.ty-product-switcher__a.disabled,
.ty-product-switcher__a.disabled .ty-product-switcher__icon,
.ty-product-switcher__a.disabled:hover .ty-product-switcher__icon {
background: none;
color: darken(@base, 10%);
cursor: default;
}
.ty-product-switcher span {
float: left;
font-size: 85%;
padding: 2px;
color: darken(@base, 10%);
}
/* ==========================================================================
Section
========================================================================== */
/*
* Template: templates/common/section.tpl
*/
.ty-section {
margin: 20px 0 15px 0;
}
.ty-section__title {
padding: 13px 15px 11px 15px;
cursor: pointer;
background: #ecf0f1;
.user-select(none);
}
.ty-section__switch {
float: right;
}
.ty-section__arrow {
padding-left: 6px;
}
.open .ty-section_switch_off,
.ty-section_switch_on {
display: block;
}
.open .ty-section_switch_on,
.ty-section_switch_off {
display: none;
}
.ty-section__body {
overflow: hidden;
padding: 20px 20px 0 20px;
border: 1px solid #ECF0F1;
border-top: none;
}
.ty-section__body .buttons-container {
margin: 30px 0 0 -20px;
padding: 15px 20px 15px 20px;
width: 100%;
background: @base;
}
/* /Section */
/* ==========================================================================
Search
========================================================================== */
/* Search result
========================================================================== */
/*
* Template: templates/views/products/components/products_search_form.tpl
*/
.ty-search-result {
padding: 12px 7px;
}
.ty-search-form__inline-input {
width: 190px;
}
.ty-search-result:hover {
background: @base;
}
.ty-search-form__input {
width: 170px;
}
.ty-search-form__input-large {
width: 200px;
}
.ty-subcategories-field {
float: left;
margin-left: 10px;
}
.ty-search-form .ty-search-form__buttons-container {
margin-bottom: 0;
}
/* /Search result */
/* Search form
========================================================================== */
/*
* Template: templates/buttons/magnifier.tpl
* Template: templates/common/search.tpl
*/
.ty-search-block {
position: relative;
}
.ty-search-magnifier {
position: absolute;
top: 5px;
right: 5px;
padding: 0;
width: 20px;
height: 26px;
border: none;
background: none;
color: @inputMutedText; // color: darken(@base, 15%);
font-size: 145%;
cursor: pointer;
}
input.ty-search-block__input {
display: block;
padding: 7px 30px 7px 10px;
width: 100%;
height: 33px;
border: 1px solid @inputBorder; // border: 1px solid darken(@base, 15%);
.rounded_corners(25px);
.box-sizing(border-box);
.transition(all .2s ease-in-out);
}
.ty-search-block__input:focus {
outline: 0;
border: 1px solid @links;
background-color: #fff;
}
/* /Search form */
/* Stores block */
.vendor-stores-block-grid h2 {
margin: 0px;
font-size: 25px;
text-align: center;
}
/* /Stores block */
/* Sort
========================================================================== */
/*
* Template: templates/views/companies/components/sorting.tpl
* Template: templates/views/common/sorting.tpl
*/
.ty-sort-container {
padding-left: 10px;
background: @base;
margin: 28px 0px;
display: inline-block;
box-sizing: border-box;
width: 100%;
.rounded_corners(4px);
}
.ty-sort-container__views-icons {
display: inline-block;
float: right;
}
.ty-sort-container__views-a {
display: block;
color: darken(@base, 25%);
float: left;
padding: 10px 11px;
width: 15px;
height: 17px;
font-size: 125%;
}
.ty-sort-container__views-a:hover {
text-decoration: none;
}
.ty-sort-container__views-a.active {
background: darken(@base, 5%);
}
.ty-sort-dropdown {
display: inline-block;
position: relative;
}
.ty-sort-dropdown .ty-sort-dropdown__wrapper {
text-decoration: none;
}
.ty-sort-dropdown__wrapper {
padding: 5px 7px 9px 7px;
display: inline-block;
color: #34495e;
cursor: pointer;
}
.ty-sort-dropdown__icon {
font-size: 20px;
position: relative;
padding-left: 10px;
top: 5px;
}
.ty-sort-dropdown__wrapper:hover {
background: darken(@base, 3%);
}
.ty-sort-dropdown__wrapper.open {
background: darken(@base, 45%);
color: white;
}
.ty-sort-dropdown__content {
position: absolute;
z-index: 100;
border: 1px solid #97a0a5;
background: #fff;
min-width: 200px;
}
.ty-wysiwyg-content .ty-sort-dropdown__content {
padding: 0;
list-style-type: none;
}
.ty-sort-dropdown__content .ty-sort-dropdown__content-item-a {
text-decoration: none;
}
.ty-sort-dropdown__content-item-a {
padding: 7px 14px;
color: @links;
display: block;
}
.ty-sort-dropdown__content-item-a:hover {
background: @links;
color: #fff;
}
/* Subcategories
========================================================================== */
/*
* Template: templates/views/categories/components/categories_multicolumns.tpl
*/
.ty-subcategories__item {
display: inline-block;
margin: 5px 20px 5px 0px;
}
.ty-subcategories-img {
display: block;
margin: auto;
padding-bottom: 10px;
}
/* Subcategories block */
/*
* Template: templates/views/categories/view.tpl
*/
.ty-subcategories-block {
margin: 10px 0;
display: inline-block;
min-width: 350px;
vertical-align: top;
width:100%;
}
.ty-subcategories-block__item {
padding-bottom: 10px;
text-align: center;
}
.ty-subcategories-block__a {
font-weight: bold;
}
/* /Subcategories */
/* Features
========================================================================== */
/*
* Template: templates/views/product_features/view.tpl
*/
.ty-feature {
margin: 30px 0px;
.clearfix();
}
.ty-feature__image {
float: left;
margin: 0 25px 10px 0;
}
.ty-feature__description {
line-height: 1.4;
overflow: hidden;
}
/* Product features */
/*
* Template: templates/views/products/components/product_features.tpl
*/
.ty-product-feature {
padding: 10px;
}
.ty-product-feature:nth-child(2n) {
background: lighten(@base, 4%);
}
.ty-product-feature__label {
display: inline-block;
width: 280px;
vertical-align: top;
}
.ty-help-info {
display: inline;
}
.ty-product-feature__value {
display: inline-block;
margin-left: 5px;
}
.ty-product-feature .ty-product-feature__multiple {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.ty-product-feature .ty-product-feature__multiple-item {
list-style: none;
margin-bottom: 5px;
}
.ty-product-feature-group {
margin-bottom: 10px;
}
.ty-product-feature-group .ty-subheader {
padding: 15px 0 6px 0;
margin: 0;
font-size: 120%;
}
/* Features All */
/*
* Template: templates/views/product_features/view_all.tpl
*/
.ty-features-all__group {
margin-bottom: 50px;
}
.ty-features-all__list {
}
.ty-features-all__list-item {
padding-bottom: 8px;
}
.ty-features-all__list-a {
font-size: 110%;
}
/* /Features All */
/* Features list */
/*
* Template: templates/views/products/components/product_features_short_list.tpl
*/
.ty-features-list {
padding: 3px 0;
&__item-prefix {
margin-right: 5px;
}
&__item-suffix {
margin-left: 5px;
}
}
/* /Features */
/* ==========================================================================
Layout
========================================================================== */
.ty-tygh {
.box-sizing(border-box);
}
.ty-helper-container {
position: relative;
}
.ty-helper-container-bg() when not(@general_bg_image = false) {
.ty-helper-container {
background: @general_bg_image @general_bg_position @general_bg_repeat @general_bg_scroll;
}
}
.ty-helper-container-bg();
/* bootstrap style */
.container {
min-height: 0;
min-width: 0;
}
.container-fluid {
max-width: @fluidContainerMaxWidth;
min-width: @fluidContainerMinWidth;
margin: 0 auto;
}
/* Footer
========================================================================== */
/*
* Template: Custom html block
*/
.tygh-footer {
min-height: 36px;
}
.bottom-copyright {
margin-top: 15px;
color: @footer_text;
font-size: 13px;
}
.ty-payment-icons {
margin: 10px 0px;
}
.footer-no-wysiwyg ul {
margin: 10px 0 0 0px;
padding-left: 0px;
}
.footer-no-wysiwyg ul li {
list-style-type: none;
}
.ty-social-link-block {
margin-top: 13px;
margin-right: 30px;
margin-bottom: 25px;
font-size: 0;
}
.ty-social-link {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 10px;
position: relative;
vertical-align: bottom;
position: relative;
top: 7px;
@media (min-width: 980px) {
margin-right: 3px;
}
}
.ty-social-link a {
color: white;
display: block;
}
.ty-social-link i,
.ty-social-link .ty-icon {
display: inline-block;
vertical-align: middle;
padding-right: 6px;
font-size: 38px;
color: #fff;
}
.ty-social-link span {
display: inline-block;
vertical-align: middle;
}
h3.ty-social-link__title {
display: inline-block;
vertical-align: middle;
font-size: 22px;
font-weight: normal;
margin: 0px 15px 5px 0px;
color: #fff;
}
.ty-social-link__text {
color: #fff;
}
.ty-social-link:last-child {
margin-right: 0px
}
.ty-footer-menu__icon-open,
.ty-footer-menu__icon-hide {
display: none;
color: @footer_text;
}
.footer-stay-connected {
background: @links;
color: #fff;
min-height: 84px !important;
}
.ty-footer-menu {
color: #9ba1a7;
}
.ty-footer-menu > .row {
padding: 30px 0px 15px 0px;
}
.ty-footer-menu-bg-is-transparent() when(@footer_bg_transparent = true) {
filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
background-color: transparent;
background-image: none;
}
.ty-footer-menu-bg() when(@footer_bg_full = true) {
.tygh-footer > div {
#gradient .vertical(@footer_bg, @footer_bg_grad_stop);
width: auto;
max-width: none;
padding: 0;
.ty-footer-menu-bg-is-transparent();
}
.tygh-footer .ty-footer-grid__full-width {
float: none;
width: auto;
}
.container-fluid .ty-footer-grid__full-width {
padding-left: 15px;
padding-right: 15px;
}
.footer-copyright {
background-color: lighten(@footer_bg, 5%);
.ty-footer-menu-bg-is-transparent();
}
}
.ty-footer-menu-bg() when(@footer_bg_full = false) {
.tygh-footer > div {
#gradient .vertical(@footer_bg, @footer_bg_grad_stop);
.ty-footer-menu-bg-is-transparent();
}
.footer-copyright {
background-color: lighten(@footer_bg, 5%);
.ty-footer-menu-bg-is-transparent();
}
.footer-stay-connected, .footer-copyright {
margin-left: -20px !important;
.box-sizing(content-box) !important;
padding: 0 20px !important;
}
}
.ty-footer-menu-bg();
.ty-footer-menu__header, // Backward compatibility 4.2.4
.ty-footer-general__header {
position: relative;
color: @footer_text;
font-weight: bold;
font-size: 19px;
padding-top: 20px;
margin-bottom: 0;
cursor: pointer;
}
.ty-footer-menu__items, // Backward compatibility 4.2.4
.ty-footer-general__body {
margin: 10px 0 20px;
}
.ty-footer-menu__item {
margin-bottom: 8px;
}
.ty-footer-menu__item a {
color: @footer_text;
}
.ty-footer-menu__item a:hover {
color: @footer_text_hover;
}
/* /Footer */
/* ==========================================================================
Product detail
========================================================================== */
/*
* Template: templates/blocks/product_templates/default_template.tpl
*/
.ty-product-block {
margin: 5px 0 30px 0;
margin-top: 5px;
position: relative;
display: table;
width: 100%;
table-layout: fixed;
}
.ty-product-block-title {
margin-bottom: 10px;
font-size: @headings_font_size;
color: @font;
word-wrap: break-word;
}
.ty-brand {
margin: 5px 0;
}
.ty-product-block__img-wrapper {
position: relative;
float: left;
margin-right: 20px;
padding: 0 0 10px;
max-width: 100%;
}
@media (max-width: 767px) {
.ty-product-block__img-wrapper {
max-width: 100%;
}
}
.ty-product-block__img-wrapper img {
display: block;
margin: 0 auto;
}
.ty-product-block__left {
overflow: hidden;
}
.ty-product-block__note-wrapper {
position: relative;
}
.ty-product-block__note {
position: absolute;
right: 0;
padding: 21px 0 0;
width: 200px;
line-height: 140%;
color: #798d8e;
word-wrap: break-word;
.ty-wysiwyg-list;
}
.ty-product-block__note-inner {
right: -200px;
}
.ty-product-prices {
margin: 20px 0px;
}
.ty-product-block__note .product-promo-header {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.ty-product-block__price-actual {
margin: 10px 0px;
}
.ty-product-block__price-actual .ty-price-num {
font-family: @price_font;
font-size: @price_font_size;
font-weight: @price_font_weight;
font-style: @price_font_style;
text-decoration: @price_font_decoration;
}
.ty-product-block__option .help-inline {
margin-left: 120px;
display: block;
text-align: left;
}
.ty-product-block__option,
.ty-product-block__advanced-option,
.ty-product-block__field-group {
margin-bottom: 10px;
}
.ty-product-block__field-group .ty-control-group {
margin-bottom: 0;
}
.ty-product-block__sku .ty-control-group {
margin: 0px;
}
.ty-product-block__description-title {
margin: 20px 0 5px 0;
font-size: 130%;
font-weight: normal;
}
.ty-product-block__button {
margin-top: 20px;
}
.ty-product-block__button .ty-btn {
margin-right: 20px;
margin-bottom: 10px;
& ~ .ty-btn {
margin-left: 10px;
}
&.ty-btn-icon {
margin-right: 10px;
& ~ .ty-btn.ty-btn-icon {
margin-left: 5px;
}
}
}
.ty-product-block__button .button-container {
display: inline-block;
}
.content-description {
line-height: 1.4;
word-wrap: break-word;
}
.ty-product-block .ty-discount-label {
z-index: 1;
}
/*
* Template: templates/blocks/product_templates/landing_template.tpl
*/
.ty-product-bigpicture__img {
position: relative;
padding-top: 20px;
.clearfix();
}
.ty-product-bigpicture__img .ty-pict {
max-height: 420px;
width: auto;
margin: 0 auto;
}
.ty-product-bigpicture__as-thumbs .ty-product-thumbnails {
float: left;
margin: 0 -60px 0 0;
width: 55px !important;
position: relative;
z-index: 5;
}
.ty-product-bigpicture .ty-product-img {
border: 0;
float: right;
width: 100%;
}
.ty-product-bigpicture .ty-previewer:not(.ty-previewer-only) {
text-align: center;
}
.ty-product-bigpicture__no-thumbs .ty-previewer:not(.ty-previewer-only) {
margin-left: 0px;
}
.ty-product-bigpicture .ty-product-thumbnails__item {
margin: 0 10px 10px 0;
}
.ty-product-bigpicture__left {
width: 100%;
float: left;
text-align: center;
}
.ty-product-bigpicture__left-wrapper {
margin: 20px 350px 0 0;
}
.ty-product-bigpicture .ty-product-block-title {
font-size: 28px; /* @headings_font_size */
margin-bottom: 20px;
}
.ty-product-bigpicture__right {
float: left;
margin-left: -320px;
width: 318px;
margin-top: 15px;
padding-bottom: 15px;
background: lighten(@base, 3%);
border: 1px solid #ebebeb;
text-align: center;
box-sizing: border-box;
}
.ty-product-bigpicture .ty-product-block__note {
position: static;
width: auto;
}
.ty-product-bigpicture__brand .ty-features-list {
padding: 16px 0;
border-bottom: 1px solid #dddfdf;
box-shadow: 0 1px 0 #fff;
background: #fff;
}
.ty-product-bigpicture__prices {
padding: 20px 0;
margin: 0 10px 20px;
border-bottom: 1px solid #dddfdf;
box-shadow: 0 1px 0 #fff;
}
.ty-product-bigpicture__prices .ty-list-price {
font-size: 14px;
}
.ty-product-bigpicture__prices .ty-product-block__price-actual .ty-price-num {
font-size: 30px;
}
.ty-product-bigpicture__prices .ty-product-block__price-old {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
> span > .ty-list-price {
margin-right: 5px;
}
}
.ty-product-bigpicture__prices .ty-save-price {
color: darken(@product_label, 5%);
}
.ty-product-bigpicture__prices .ty-save-price__percent {
display: none;
}
.ty-product-bigpicture__sidebar-bottom {
width: 230px;
padding: 0 20px;
margin: 0 auto;
text-align: left;
}
.ty-product-bigpicture .ty-control-group__label {
display: inline-block;
float: none;
width: 95px;
text-align: left;
vertical-align: middle;
}
.ty-product-bigpicture .ty-product-block__note,
.ty-product-bigpicture .ty-product-block__button {
text-align: center;
}
.ty-product-bigpicture .ty-product-block__note {
padding-top: 8px;
}
.ty-product-bigpicture .ty-product-block__button .ty-btn {
margin-right: 0;
}
.ty-product-bigpicture .ty-product-options__description,
.ty-product-bigpicture .ty-product-variant-image {
margin-left: 0;
}
.ty-product-bigpicture .ty-product-options .ty-input-text {
width: auto;
max-width: 105px;
}
.ty-product-bigpicture .ty-product-options {
margin-bottom: 10px;
}
.ty-product-bigpicture .ty-product-block__option .help-inline {
margin: 0 0 12px;
}
/* Product option */
/*
* Template: templates/views/products/components/product_options.tpl
*/
.ty-product-options__title {
padding-right: 5px;
font-weight: bold;
}
.ty-product-options .ty-table {
margin-top: 10px;
}
.ty-product-options .ty-input-text {
width: 240px;
}
.ty-product-options__item-label {
font-weight: bold;
}
.ty-product-options__description {
margin: 5px 0 0 120px;
padding: 0;
color: darken(@base, 20%);
font-size: 85%;
}
.ty-product-options__image {
display: inline-block;
margin: 2px 0;
border: 2px solid lighten(@base, 30%);
cursor: pointer;
}
.ty-product-options__image--wrapper {
display: inline-block;
vertical-align: middle;
margin: 2px 0;
border: 2px solid lighten(@base, 30%);
&--active {
border-color: darken(@base, 20%);
}
.ty-product-options__image {
margin: 0;
border: 0;
}
.ty-no-image {
cursor: unset;
}
}
.ty-product-options__radio {
display: none;
&--label {
display: inline-block;
margin: 2px 8px 2px 0;
border: 2px solid @base;
cursor: pointer;
padding: 6px 10px;
}
&:checked + &--label,
&--label:not(&--label--disabled):hover,
&--label:not(&--label--disabled):active {
border-color: darken(@base, 20%);
}
&--label--disabled {
opacity: 0.3;
cursor: default;
}
}
/* js/tygh/exceptions.js */
.product-variant-image-selected {
border-color: darken(@base, 20%);
}
.ty-product-options__elem {
display: inline-block;
}
.ty-product-options__fileuploader .help-inline {
margin-left: 0;
}
.ty-product-options__box {
display: inline-block;
padding: 6px 0;
}
.ty-product-options__box .help-inline {
margin-left: 0;
}
.ty-product-variant-image {
margin-left: 120px;
padding: 10px 0;
}
.ui-dialog .ty-product-variant-image {
margin-left: 134px;
}
.ty-product-options__textarea {
min-width: 240px;
min-height: 60px;
resize: vertical;
}
.ty-product-options__no-combinations {
padding-top: 0;
color: #b94a48;
}
@media (max-width: 979px) {
.ty-tooltip-block--options-desktop {
display: none;
}
.ty-tooltip-block--options-mobile:after {
content: '\a';
white-space: pre;
}
// More: design/themes/responsive/css/tygh/responsive.less
}
@media (min-width: 980px) {
.ty-tooltip-block--options-mobile {
display: none;
}
}
/* /Product option */
/* Product image */
/*
* Template: templates/views/products/components/product_images.tpl
* Template: templates/common/image.tpl (Preview)
*/
.ty-product-img {
border: 1px solid @base;
position: relative;
}
.ty-product-img .ty-no-image {
border: 0px;
}
.ty-product-thumbnails {
margin-top: 10px;
max-width: 100%;
text-align: left;
}
.ty-product-option-container {
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.ty-product-option-container--feature-style-images {
padding: 6px 0;
}
.ty-product-option-child {
display: inline-block;
margin: auto 2px;
max-width: 100%;
}
.ty-product-option-checkbox {
margin: auto 2px;
}
.ty-product-thumbnails__item {
display: block;
float: left;
margin: 0 5px 5px 0;
border: 1px solid @base;
}
.ty-product-thumbnails__item.active {
border-color: #888;
}
.ty-previewer {
position: relative;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.ty-previewer:hover .previewer__icon {
visibility: visible;
}
.ty-previewer__icon {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: block;
visibility: hidden;
margin: -18px 0 0 -18px;
padding: 0;
width: 37px;
height: 39px;
background: url(../media/images/icons/zoom_icon.png) no-repeat;
opacity: 0.7;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.ty-previewer__icon {
background-image: url(../media/images/icons/zoom_icon@2x.png);
background-size: 37px, 39px;
}
}
.ty-previewer__icon:hover {
opacity: 1;
}
/* /Product image */
/* Product icon */
/*
* Template: templates/views/products/components/product_icon.tpl
*/
.ty-thumbs-wrapper {
position: relative;
}
.ty-thumbs-wrapper .ty-icon-left-circle,
.ty-thumbs-wrapper .ty-icon-right-circle {
position: absolute;
top: 50%;
visibility: hidden;
margin-top: -10px;
width: 20px;
height: 20px;
font-size: 20px;
cursor: pointer;
.user-select(none);
}
.touch .ty-grid-list__item .ty-icon-left-circle,
.touch .ty-grid-list__item .ty-icon-right-circle {
visibility: visible;
}
.ty-thumbs-wrapper .ty-icon-left-circle {
left: 3px;
}
.ty-thumbs-wrapper .ty-icon-right-circle {
right: 3px;
}
/* /Product icon */
/* Product popup */
/*
* Template: templates/views/tabs/components/product_popup_tabs.tpl
*/
.ty-popup-tabs {
padding-top: 25px;
margin-top: 25px;
border-top: 1px dotted #dedede;
}
.ty-popup-tabs__item {
display: inline-block;
padding: 2px 15px 2px 0;
text-transform: uppercase;
font-size: 85%;
cursor: pointer;
}
.ty-popup-tabs__icon {
margin-right: 3px;
font-size: 14px;
}
/* /Product popup */
/* File uploader
========================================================================== */
/*
* Template: templates/common/fileuploader.tpl
*/
.ty-fileuploader {
padding: 6px 0 0;
}
.ty-fileuploader__file-section {
overflow: hidden;
}
.ty-fileuploader__file-local {
position: relative;
overflow: hidden;
cursor: pointer;
}
.ty-fileuploader__file-input {
position: absolute;
top: 0;
left: 0;
padding: 0;
width: 100%;
height: 300px;
border: 0;
opacity: 0;
cursor: pointer;
}
span.ty-fileuploader__filename {
padding: 0 0 0 5px;
position: relative;
top: -2px;
}
.ty-fileuploader__icon {
position: relative;
top: 2px;
margin-right: 5px;
cursor: pointer;
}
.ty-fileuploader.cm-failed-field .ty-fileuploader__a {
color: #B94A48;
font-weight: bold;
}
/* File uploader */
/* ==========================================================================
Quick view
========================================================================== */
/*
* Template: templates/views/products/components/quick_view_template.tpl
*/
.ty-quick-view__wrapper {
width: 700px;
}
.ty-quick-view__wrapper .ty-product-block__left {
max-width: 450px;
padding-left: 20px;
}
a.ty-quick-view__title {
font-size: 24px;
font-weight: bold;
color: @font;
}
.ty-quick-view__title .ty-product-block-title {
margin-bottom: 0;
}
.ty-quick-view-tools {
position: relative;
height: 20px;
}
.ty-quick-view-tools .ty-product-switcher {
top: 0;
}
.ty-quick-view__wrapper .ty-product-block__img {
margin-right: 20px;
position: relative;
}
.ty-quick-view__wrapper .ty-product-img {
margin-bottom: 15px;
}
.ty-quick-view__wrapper .ty-product-block__description {
word-wrap: break-word;
}
.ty-quick-view__wrapper .ty-product-block__note {
position: static;
padding-top: 10px;
width: 100%;
}
/* Quick view button */
.ty-quick-view-button {
padding-top: 5px;
text-align: center;
}
.ty-quick-view-button__wrapper {
text-align: center;
}
.touchevents .ty-mainbox-container .ty-grid-list__control,
.touchevents .ty-grid-list__item:hover .ty-quick-view-button,
.touchevents .ty-grid-list__item .ty-quick-view-button {
display: none;
}
.touchevents .ty-grid-list__item--overlay {
&:hover {
border-color: transparent;
}
.ty-grid-list__control {
display: none;
}
}
/* /Quick view */
/* ==========================================================================
Product notification
========================================================================== */
/*
* Template: templates/views/products/components/notification.tpl
* Template: templates/views/products/components/product_notification_items.tpl
* Template: templates/views/checkout/components/product_notification.tpl
*/
.ty-product-notification__body {
padding: 15px 20px;
min-height: 72px;
}
.ty-product-notification__body .ty-product-options {
display: block;
padding: 0;
}
.ty-product-notification__body .ty-control-group__label {
display: none;
}
.ty-product-notification__body .ty-product-options__info {
margin-top: 30px;
padding-left: 0;
max-height: 420px;
overflow-y: auto;
width: 100%;
}
.ty-product-notification__body .ty-product-options-name {
width: 110px;
padding: 6px 0;
float: left;
}
.ty-product-notification__body .ty-product-options-content {
width: 378px;
padding: 6px 0;
float: left;
}
.ty-product-notification__item {
margin-bottom: 20px;
}
.ty-product-notification__content {
overflow: hidden;
}
.ty-product-notification__product-name {
float: left;
display: block;
margin-bottom: 7px;
}
.ty-product-notification__price {
float: right;
margin-left: 25px;
}
.ty-product-notification__image,
.ty-product-notification__body .ty-no-image {
float: left;
margin-right: 20px;
padding: 10px;
min-width: 0px;
}
.ty-product-notification__divider {
margin: 0 0 10px 0;
}
.ty-product-notification__amount {
width: 46%;
}
.ty-product-notification__subtotal {
font-weight: bold;
width: 46%;
text-align: right;
}
.ty-product-notification__body ul ul {
border-left: 1px solid @base;
margin-left: 70px;
}
.ty-product-notification__buttons {
padding: 15px 20px;
background: #ECF0F1;
}
/* /Product notification */
/* ==========================================================================
Product filter (Block)
========================================================================== */
/*
* Template: templates/blocks/product_filters/*
*/
.ty-product-filters__wrapper {
background: @base;
.rounded_corners(6px);
}
.ty-product-filters {
padding-top: 5px;
line-height: 140%;
margin-left: 7px;
margin-bottom: 15px;
}
.ty-product-filters__variants {
position: relative;
overflow-y: auto;
line-height: 1.4em;
margin-bottom: 7px;
}
.ty-product-filters__group {
padding: 2px 0;
margin: 5px 3px;
}
.ty-product-filters__group label {
font-weight: initial;
}
.ty-product-filters__group label,
.ty-product-filters__group label > input {
cursor: pointer;
}
.ty-product-filters__group label.disabled,
.ty-product-filters__group label.disabled > input {
background-color: transparent;
color: lighten(@font, 55%);
cursor: default;
}
.ty-product-filters__tooltip {
float: right;
}
.ty-product-filters__tooltip--right {
float: left;
}
.ty-product-filters__item-more {
margin-bottom: -9px;
}
.ty-product-filters__tools {
padding: 10px 12px;
}
.ty-product-filters__extra-block {
margin-top: -3px;
}
.ty-product-filters__extra-link {
border-color: darken(@base, 20%);
cursor: pointer;
}
.ty-product-filters__color {
&-list-item {
display: inline-block;
padding: 0;
margin: 3px;
}
&-filter {
position: relative;
.ty-product-filters__tooltip {
position: absolute;
width: 100%;
left: 0;
z-index: -1;
}
}
&-filter-item {
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
position: relative;
&:hover {
cursor: pointer;
}
&--disabled {
opacity: 0.3;
&:hover {
cursor: auto;
}
}
&--selected {
opacity: 0.3;
}
}
&-filter-item:hover &-filter-check,
&-filter-item:focus &-filter-check {
opacity: 1;
}
&-filter-item--disabled:hover &-filter-check {
opacity: 0;
}
&-filter-check {
position: absolute;
color: #fff;
opacity: 0;
&--invert {
color: #555;
}
&--selected {
opacity: 1;
}
}
&-filter-checkbox {
position: absolute;
opacity: 0;
}
&-filter-swatch {
width: 26px;
height: 26px;
border-radius: 13px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
&--selected {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
}
&-filter-checkbox:focus + &-filter-item &-filter-swatch {
box-shadow: inset 0 0 0 1px @primary_button, inset 0 0 0 3px #fff;
}
}
.ty-product-filters__empty-result span {
opacity: 0.5;
}
.ty-filter-icon {
position: absolute;
top: 3px;
left: 0;
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #cccccc;
.border-radius(2px);
font-size: 70%;
background: #fff;
}
.ty-filter-icon__check,
.ty-filter-icon__delete {
position: absolute;
top: 50%;
left: 50%;
margin: -3px 0 0 -3px;
width: 8px;
height: 8px;
font-size: 8px;
}
.ty-filter-icon__check,
.ty-filter-icon__delete {
display: none;
}
.ty-product-filters__title {
color: lighten(@font, 22%);
font-weight: bold;
}
.ty-product-filters__title .ty-icon-cancel-circle {
position: relative;
font-size: 16px;
top: 4px;
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
&:hover {
color: @links;
}
}
.ty-product-filters__switch {
display: flex;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid lighten(@font, 63%);
}
.ty-product-filters__switch-right,
.ty-product-filters__switch-down {
margin-left: auto;
margin-right: 5px;
color: darken(@base, 20%);
float: right;
font-size: 115%;
}
.ty-product-filters__switch-down {
margin-right: 4px;
}
.open.ty-product-filters__switch .ty-product-filters__switch-down,
.ty-product-filters__switch-right {
display: none;
}
.open.ty-product-filters__switch .ty-product-filters__switch-right,
.ty-product-filters__switch-down {
position: relative;
display: inline-block;
top: 2px;
}
.ty-product-filters__advanced-button,
.ty-product-filters__reset-button {
position: relative;
color: lighten(@font, 20%);
font-size: 85%;
}
.ty-product-filters__reset-button {
float: right;
}
.ty-product-filters__reset-icon {
position: absolute;
left: -14px;
font-size: 130%;
}
.ty-product-filters__search {
position: relative;
padding: 10px 10px 0 3px;
}
.ty-product-filters__search .ty-input-text-medium {
padding-right: 28px;
width: 100%;
}
.ty-product-filters__search-icon {
position: absolute;
right: 18px;
top: 18px;
}
.ty-product-filters__no-items-found {
margin-bottom: 20px;
margin-right: 10px;
}
/* /Product filter */
/* ==========================================================================
Horizontal product filters (Block)
========================================================================== */
/*
* Template: templates/blocks/product_filters/horizontal_filters.tpl
*/
.ty-horizontal-product-filters {
padding-left: 10px;
background: @base;
margin: 0 0 30px;
}
.ty-horizontal-product-filters-dropdown {
display: inline-block;
position: relative;
}
.ty-horizontal-product-filters-dropdown .ty-horizontal-product-filters-dropdown__wrapper {
text-decoration: none;
}
.ty-horizontal-product-filters-dropdown__wrapper {
padding: 5px 7px 9px 7px;
display: inline-block;
color: #34495e;
cursor: pointer;
&.active {
background: darken(@base, 3%);
}
}
.ty-horizontal-product-filters-dropdown__icon {
font-size: 20px;
position: relative;
padding-left: 10px;
top: 5px;
}
.ty-horizontal-product-filters-dropdown__wrapper:hover {
background: darken(@base, 3%);
}
.ty-horizontal-product-filters-dropdown__wrapper.open {
background: darken(@base, 45%);
color: white;
}
.ty-horizontal-product-filters-dropdown__content {
position: absolute;
z-index: 101;
border: 1px solid #97a0a5;
background: #fff;
min-width: 255px;
}
.ty-horizontal-filters-content-to-right {
left: 0;
}
.ty-horizontal-product-filters-dropdown__content .ty-horizontal-product-filters-dropdown__content-item-a {
text-decoration: none;
}
.ty-horizontal-product-filters-dropdown__content-item-a {
padding: 7px 14px;
color: @links;
display: block;
}
.ty-horizontal-product-filters-dropdown__content-item-a:hover {
background: @links;
color: #fff;
}
.ty-horizontal-product-filters-dropdown a .ty-icon-cancel-circle {
position: relative;
font-size: 16px;
top: 3px;
padding-left: 5px;
&:hover {
color: @links;
}
}
.ty-horizontal-product-filters .ty-range-slider,
.ty-horizontal-product-filters .ty-range-slider .ui-slider-range,
.ty-horizontal-product-filters .ty-range-slider .ui-slider-handle {
z-index: 101;
}
.ty-horizontal-product-filters-dropdown__content .ty-product-filters__tools {
background-color: @base;
}
.ty-horizontal-product-filters.ty-selected-product-filters {
margin-bottom: 25px;
}
/* /Horizontal product filters */
/* Date range picker
========================================================================== */
/*
* Template: templates/blocks/product_filters/components/product_filter_datepicker.tpl
*/
.cm-date-range {
display: inline-block;
padding: 15px 10px 15px;
margin-bottom: 10px;
a {
color: @font;
}
}
.ty-date-range .ty-icon-calendar {
position: relative;
color: @font;
font-size: 16px;
margin-right: 3px;
top: 2px;
}
.daterangepicker.opensright,
.daterangepicker.opensleft {
.border-radius(0);
border: 1px solid #97a0a5;
padding: 10px 8px;
}
.daterangepicker.opensright:before,
.daterangepicker.opensleft:before,
.daterangepicker.opensright:after,
.daterangepicker.opensleft:after {
display: none;
}
.daterangepicker > .ranges > ul > li {
color: @links;
}
.daterangepicker > .ranges > ul > li.active,
.daterangepicker > .ranges > ul > li:hover {
background: @links;
border: 1px solid @links;
color: #fff;
}
.daterangepicker button.btn.btn-primary {
.ty-btn;
.ty-btn__secondary;
margin-right: 5px;
}
.daterangepicker button.btn.btn-default {
.ty-btn;
}
.daterangepicker .drp-calendar.drp-calendar {
max-width: none;
}
.daterangepicker .drp-calendar td.active,
.daterangepicker .drp-calendar td.active:hover {
background-color: @links;
#gradient .vertical(@links, @links);
}
.daterangepicker .drp-buttons.drp-buttons {
padding-top: 18px;
}
@media (max-width: 729px) {
.daterangepicker {
&.show-ranges.ltr .drp-calendar.drp-calendar.left,
&.show-ranges.ltr .drp-calendar.drp-calendar.right {
margin-top: 10px;
border-left: 0;
border-top: 1px solid #ddd;
}
}
}
@media (max-width: 563px) {
.daterangepicker {
.drp-buttons {
.drp-selected.drp-selected,
.btn.btn {
display: block;
margin-left: 0;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
}
}
}
/* /Date range picker */
/* Price slider
========================================================================== */
/*
* Template: templates/blocks/product_filters/components/product_filter_slider.tpl
*/
.ty-price-slider {
padding: 10px;
margin-bottom: 20px;
color: rgb(144, 149, 152);
}
.ty-price-slider__inputs {
padding: 0;
color: rgb(144, 149, 152);
}
.ty-price-slider__input-text {
width: 74px;
}
.ty-range-slider__wrapper {
color: darken(@base, 10%);
}
.ty-range-slider__item {
position: absolute;
top: -5px;
width: 1px;
height: 10px;
background: darken(@base, 10%);
}
.ty-range-slider__num {
// Prevent RTL flip by CSSJanus
--ty-force-range-slider-num-start: -6px;
--ty-force-range-slider-num-end: auto;
--ty-force-ltr: ltr;
left: var(--ty-force-range-slider-num-start);
right: var(--ty-force-range-slider-num-end);
direction: var(--ty-force-ltr);
position: absolute;
top: 21px;
display: block;
max-width: 74px;
font-size: 75%;
cursor: pointer;
color: #909598;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
// Prevent RTL flip by CSSJanus
html[dir="rtl"] .ty-range-slider__num {
--ty-force-range-slider-num-start: auto;
--ty-force-range-slider-num-end: -6px;
}
.ty-range-slider__item:last-child .ty-range-slider__num {
left: var(--ty-force-range-slider-num-end);
right: var(--ty-force-range-slider-num-start);
}
.ty-range-slider {
position: relative;
margin: 20px 12px 15px 12px;
height: 5px;
border: 1px solid darken(@base, 10%);
background: #ecf0f1;
border-left: none;
border-right: none;
.border-radius(0);
}
.ty-range-slider .ui-slider-range {
background: darken(@base, 10%);
border: 0px;
margin-top: -1px;
height: 7px;
}
.ty-range-slider .ui-slider-handle {
--ty-force-translate-x: translateX(-50%);
transform: var(--ty-force-translate-x); // Prevent RTL flip by CSSJanus
top: -9px;
margin-left: 0;
width: 12px;
height: 20px;
background: @menu;
border-radius: 0px;
border: 0px;
cursor: col-resize;
}
.ty-range-slider .ui-slider-handle {
outline: 0 none;
-ms-touch-action: none;
touch-action: none;
}
.ty-range-slider.ui-state-disabled .ui-slider-handle {
cursor: not-allowed;
}
/* /Price slider */
/* ==========================================================================
Cart contents
========================================================================== */
/*
* Template: templates/common/mainbox_cart.tpl
* Template: templates/views/checkout/components/cart_items.tpl
* Template: templates/views/checkout/components/cart_content.tpl
*/
.ty-cart-content {
margin-top: 30px;
border: 1px solid lighten(@base, 42%);
}
.ty-cart-content__title {
padding: 12px;
border: 1px solid lighten(@base, 39%);
border-right: 0 none;
border-left: 0 none;
text-align: center;
white-space: nowrap;
font-weight: bold;
background: #EDEFF1;
}
.ty-cart-content__title.ty-left {
text-align: left;
}
.ty-cart-content__title.ty-center {
text-align: center;
}
.ty-cart-content__title.ty-right {
text-align: right;
}
.ty-cart-content__product-elem {
padding: 17px 10px;
border: none;
border-top: 1px solid lighten(@base, 39%);
vertical-align: top;
}
.ty-cart-content__image {
float: left;
}
.ty-cart-content__image-block {
padding-left: 20px;
}
td.ty-cart-content__image-block {
padding-top: 7px;
padding-bottom: 7px;
}
.ty-cart-content__product-title {
font-size: 115%;
word-wrap: break-word;
}
.ty-cart-content__qty {
padding: 12px 30px 0;
text-align: center;
}
.ty-cart-content__sku {
padding: 5px 0;
.word-break();
}
td.ty-cart-content__description {
padding-bottom: 10px;
}
.ty-cart-content__price {
padding-right: 20px;
text-align: right;
}
.ty-cart-content__detailed-link {
display: inline-block;
margin: 10px 0 10px;
border-bottom: 1px dotted transparent;
text-decoration: none;
cursor: pointer;
}
.ty-cart-content__detailed-link.open,
.ty-cart-content__detailed-link:hover {
border-color: @links;
text-decoration: none;
}
.ty-cart-content__product-delete {
margin: 0 0 0 6px;
vertical-align: middle;
}
.ty-cart-content__product-delete:hover {
text-decoration: none;
}
.ty-cart-content__options {
margin-top: 5px;
}
.ty-cart-content .ty-product-options {
padding-top: 5px;
padding-bottom: 5px;
}
.ty-cart-content .ty-control-group {
margin-bottom: 5px;
}
.ty-cart-content .ty-control-group__label {
@media (min-width: 1200px) {
width: 200px;
}
}
.ty-cart-content .ty-product-options .ty-group-block__arrow .ty-caret-info {
top: -13px;
}
.ty-cart-content__more-info {
margin-top: 0;
}
.ty-cart-content__more-info-title {
padding: 12px;
}
.ty-cart-content__clear-button {
margin-left: 10px;
}
.ty-cart-content__payment-methods {
float: right;
margin: 30px 0 0;
border-top: 1px solid @decorative;
-webkit-box-shadow: inset 0 70px 70px -30px lighten(@decorative, 8%);
-moz-box-shadow: inset 0 70px 70px -30px lighten(@decorative, 8%);
box-shadow: inset 0 70px 70px -30px lighten(@decorative, 8%);
text-align: center;
}
.ty-cart-content__payment-methods-item {
padding: 20px 10px 0;
}
.ty-cart-content__payment-methods-title {
display: inline-block;
margin: 0 auto;
margin-bottom: -30px;
padding: 10px;
color: #737373;
text-transform: uppercase;
font-weight: bold;
font-size: 85%;
}
.ty-cart-content__buttons {
padding: 18px 22px;
background: lighten(@base, 3%);
}
.ty-cart-content__top-buttons,
.ty-cart-content__bottom-buttons {
padding-top: 10px;
padding-bottom: 10px;
}
.ty-cart-content__bottom-buttons {
border-top: 2px solid #fff;
@media (min-width: 1200px) {
position: sticky;
bottom: 0;
}
}
.ty-cart-content__left-buttons {
float: left;
}
.ty-cart-content__right-buttons {
float: right;
}
.ty-cart-items {
overflow: auto;
padding: 10px 22px;
max-height: 400px;
width: 256px;
@media (min-width: 375px) {
width: 311px;
}
@media (min-width: 481px) {
width: 320px;
}
}
.ty-cart-items__list-item {
padding: 10px 0px;
position: relative;
border-bottom: 1px solid #ecf0f1;
}
.ty-cart-items__list-item .ty-icon-cancel-circle {
color: darken(@base, 30%);
}
.ty-cart-items__list-item:last-child {
border-bottom: 0px;
}
.ty-cart-items__list-item:hover .ty-cart-items__list-item-tools {
display: block;
}
.ty-cart-items__list-item-tools a:hover {
text-decoration: none;
}
.ty-cart-items__list-item-image {
float: left;
margin-right: 25px;
}
.ty-cart-items__list-item-desc {
--ty-cart-items-list-item-desc-width: 187px;
overflow: hidden;
width: var(--ty-cart-items-list-item-desc-width);
}
@media (min-width: 375px) {
.ty-cart-items__list-item-desc {
--ty-cart-items-list-item-desc-width: 240px;
}
}
.ty-cart-items__list-item-desc--text {
--ty-cart-items-list-item-desc-width: 252px;
}
@media (min-width: 375px) {
.ty-cart-items__list-item-desc--text {
--ty-cart-items-list-item-desc-width: 305px;
}
}
.ty-cart-items__list-item-tools {
position: absolute;
top: 10px;
right: 0px;
display: none;
}
.ty-cart-items__empty {
margin: 15px 0;
color: darken(@base, 20%);
}
.ty-minicart-title {
padding-left: 20px;
display: inline-block;
text-decoration: none;
}
/* Cart contents total */
/*
* Template: templates/views/checkout/components/checkout_totals.tpl
* Template: templates/views/checkout/components/applied_promotions.tpl
* Template: templates/views/checkout/components/checkout_totals_info.tpl
*/
.ty-cart-total {
background: #EDEFF1;
.rounded_corners(6px);
}
.ty-cart-total__wrapper {
padding: 17px 20px;
border: 1px solid lighten(@base, 42%);
border-top: none;
}
.ty-cart-statistic {
float: right;
padding-top: 10px;
}
.ty-cart-statistic__item {
clear: both;
overflow: hidden;
padding: 0 0 15px 0;
color: darken(@base, 30%);
}
.ty-cart-statistic__title {
position: relative;
float: left;
margin-right: 20px;
width: 220px;
text-align: right;
white-space: normal;
word-break: break-all;
word-break: break-word;
}
.ty-cart-statistic_title_main {
font-weight: bold;
}
.ty-statistic-list-subtotal-discount,
.ty-statistic-list-discount {
color: #e74c3c;
}
.ty-cart-statistic__value {
position: relative;
display: inline-block;
width: 140px;
text-align: right;
}
.ty-cart-statistic__total-title {
margin-right: 10px;
}
.ty-cart-statistic__total-value {
display: inline-block;
width: 140px;
}
.ty-cart-statistic__group {
padding-bottom: 5px;
}
.ty-cart-statistic__total-list {
border-top: 1px solid #e0e0e0;
margin-top: 15px;
}
.ty-cart-statistic__total {
padding: 9px 0 0 0;
text-align: right;
font-weight: bold;
font-size: 138%;
}
.ty-cart-total__a-estimation {
display: inline-block;
margin: 0 2px 0 3px;
text-transform: uppercase;
font-size: 85%;
line-height: 130%;
border-bottom: 1px solid transparent;
}
.ty-cart-total__a-estimation:hover {
border-bottom: 1px dotted @links;
text-decoration: none;
}
.ty-cart-total__icon-estimation {
padding: 0 2px;
}
.ty-cart-content__estimation {
display: inline-block;
width: 100%;
max-width: 440px;
height: 100%;
box-sizing: content-box;
.ty-estimation-buttons {
max-width: inherit;
min-width: 100%;
}
}
.ty-sidebox .ty-input-text-medium {
width: 100%;
}
.ty-estimation__title {
margin-top: 15px;
font-weight: bold;
font-size: 16px;
color: darken(@base, 30%);
}
.ty-estimation-buttons__rate {
float: none;
}
.ty-estimation-buttons .ty-btn + .ty-btn {
margin-left: 0;
}
.ty-estimation-buttons .ty-btn {
vertical-align: top;
}
.ty-cart-content-products {
margin-bottom: 6px;
position: relative;
padding: 0 10px;
border: 1px solid #bdc3c7;
background: #fff;
}
.ty-cart-content-products__item {
padding-top: 15px;
border-bottom: 1px solid #bdc3c7;
}
.ty-cart-content-products__item:last-child {
border: 0;
}
/* Discount coupon */
/*
* Template: templates/views/checkout/components/promotion_coupon.tpl
* Template: templates/views/checkout/components/applied_promotions.tpl
*/
.ty-discount-info {
position: relative;
margin-top: 7px;
padding: 10px;
border: 1px solid #bdc3c7;
background: #fff;
font-size: 90%;
}
.ty-discount-coupon__ty-control-group {
margin: 5px 0;
}
.ty-coupons__container {
float: left;
padding-right: 25px;
width: 260px;
}
.ty-coupons__item {
padding: 0 0 5px;
}
.ty-coupons__item:last-child {
padding-bottom: 0;
}
.ty-coupons__item-delete, .ty-coupons__item-delete:hover {
text-decoration: none;
}
/* Group block */
.ty-group-block {
padding: 10px;
border: 1px solid @base;
border-radius: 3px;
}
.ty-group-block__arrow {
position: relative;
}
.ty-group-block__arrow .ty-caret-info {
top: -17px;
}
.ty-group-block .ty-caret-outer {
border-bottom: 7px solid @base;
border-bottom-color: rgba(0, 0, 0, .1);
}
.ty-group-block .ty-caret-inner {
border-bottom-color: lighten(@base, 5%);
}
/* /Cart page styles */
/* ==========================================================================
Checkout
========================================================================== */
.ty-checkout__title {
display: inline-block;
margin: 30px 0 0;
text-decoration: @headings_font_decoration;
font-weight: @headings_font_weight;
font-style: @headings_font_style;
font-size: @headings_font_size;
font-family: @headings_font;
}
.ty-checkout__title-icon {
color: darken(@base, 18%);
vertical-align: middle;
font-size: 27px;
}
.checkout__block {
padding: 0 20px;
}
.ty-checkout-buttons {
margin-top: 15px;
padding: 17px 25px 0px 25px;
border-top: 1px solid darken(@base, 10%);
background: @base;
}
.ty-checkout__terms {
margin: 25px 20px;
padding: 15px 20px;
border: 2px solid #bdc3c7;
border-radius: 3px;
background: #fff;
font-weight: bold;
}
.ty-checkout__shipping-tips {
color: #7f7f7f;
margin-bottom: 40px;
}
/* One page checkout
========================================================================== */
/*
* Template: templates/views/checkout/components/steps/*
*/
.ty-step__container {
margin: 0 0 5px 0;
position: relative;
}
.ty-step__container .ty-icon-down-micro {
display: none;
}
.ty-step__container-active {
margin: 0 0 45px 0;
background: @base;
}
.ty-step__container-active .ty-tabs {
margin-top: 5px;
padding: 0px 10px;
}
.ty-step__container-active .ty-tabs__content {
padding: 0;
}
.ty-step__body-active .ty-address-switch {
margin: 25px 20px;
}
.ty-step__container-active .ty-step__title-txt {
margin-left: 32px;
}
.ty-step__container-active .ty-step__title-left {
background: #FFF;
color: darken(@base, 18%);
margin-top: -1px;
}
.ty-step__container {
background: @base;
.border-radius(2px);
}
.ty-step__title,
.ty-step__title-active,
.ty-step__title-complete {
position: relative;
padding: 10px 14px 9px 14px;
}
.ty-step__title-complete {
padding-right: 110px;
}
.ty-step__title-complete .ty-step__title-left {
position: static;
padding: 0px;
background: none;
color: darken(@base, 25%);
display: inline;
}
.ty-step__title-complete .ty-step__title-txt {
margin-left: 30px;
color: darken(@base, 25%);
}
.ty-step__title-complete .ty-step__title-right .ty-btn {
position: absolute;
right: 8px;
top: 8px;
}
.ty-step__title-active {
background: darken(@base, 18%);
.border-radius(2px);
}
.ty-step__title-arrow {
display: block;
width: 35px;
height: 18px;
position: absolute;
font-size: 80px;
line-height: 0;
bottom: -30px;
color: darken(@base, 18%);
left: 35px;
}
.ty-step__title-txt {
color: white;
font-size: 20px;
font-weight: normal;
}
.ty-step__title .ty-step__title-txt {
font-weight: normal;
color: darken(@base, 25%);
margin-left: 36px;
}
.ty-step__title-icon {
position: absolute;
top: 14px;
left: 16px;
}
.ty-step-one .ty-checkout-buttons {
border: 0;
margin-top: 6px;
}
.ty-step-one .buttons-container {
border: 0;
padding-left: 0;
padding-right: 0;
}
.ty-step__title-left {
font-weight: normal;
font-size: 18px;
position: absolute;
display: inline-block;
color: #fff;
padding: 2px 9px;
background: darken(@base, 18%);
border-radius: 50px;
}
.ty-step__title-right {
float: right;
padding: 4px 0 0 0;
}
.ty-step__body-active {
padding: 20px 0;
}
.ty-step__body-active .select-profile label {
display: none;
}
.ty-step__body-active .ty-control-group .ty-input-text {
width: 100%;
}
/* Sheckout step one */
.ty-checkout__relogin {
display: inline-block;
padding: 10px 10px 20px;
}
/* Checkout auth */
/*
* Template: templates/views/checkout/components/checkout_login.tpl
*/
.ty-checkout__login {
float: left;
padding-right: 3%;
padding-left: 3%;
width: 46%;
}
.ty-checkout__login .ty-login {
margin-top: 0;
}
.ty-checkout__register {
position: relative;
float: left;
margin: 0 0 0 3%;
width: 45%;
#anonymous_checkout .ty-control-group {
margin-bottom: 0;
margin-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
}
.ty-anonymous_checkout {
padding: 0 25px;
margin-top: 20px;
}
.ty-anonymous_checkout__field {
padding: 0 25px;
margin-top: 20px;
}
.ty-checkout__register-content {
padding-left: 20px;
}
.ty-checkout__register-cancel {
margin-left: 15px;
}
.ty-checkout__register-methods {
margin: 0;
padding: 0;
}
.ty-checkout__register-methods-item {
margin: 0px;
padding: 15px 0 0;
}
input.ty-checkout__register-methods-radio {
float: left;
margin-top: 2px;
}
.ty-checkout__register-methods-title {
display: block;
padding-bottom: 5px;
overflow: hidden;
}
.ty-checkout__register-methods-hint {
display: inline-block;
padding-left: 20px;
color: #7f7f7f;
font-size: 95%;
}
/* /Login */
/* Checkout step two */
/*
* Template: templates/views/checkout/components/shipping_rates.tpl
*/
.ty-shipping-options__vendor-name {
display: inline-block;
padding: 15px 0 10px;
font-weight: bold;
}
.ty-shipping-options__products {
margin-left: 15px;
}
.ty-shipping-options__total {
margin-top: 15px;
padding: 15px 0;
border-top: 1px solid #e5e5e5;
}
.ty-shipping-options__image {
max-width: 120px;
}
input.ty-shipping-options__checkbox {
margin: 2px 0 0 0;
vertical-align: middle;
display: inline-block;
width: 10%;
max-width: 13px;
}
.ty-shipping-options__group {
padding-left: 20px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
width: 90%;
}
.ty-shipping-options__method {
margin: 20px 0 5px;
font-size: 0;
}
/* Customer notes */
/*
* Template: templates/views/checkout/components/customer_notes.tpl
*/
.ty-customer-notes {
padding: 15px 20px;
}
.ty-customer-notes__title {
font-weight: bold;
}
.ty-customer-notes__text {
width: 100%;
height: 100px;
resize: vertical;
}
/* /Checkout two one */
/* Checkout four two */
.ty-checkout__billing-options {
padding: 20px 20px 0;
.ty-customer-notes,
.ty-license-agreement__checkbox,
.ty-company__termsf {
padding-left: 0;
padding-right: 0;
}
.ty-checkout__terms {
margin-left: 0;
margin-right: 0;
}
}
.ty-checkout__billing-options.ty-notab {
padding: 0px 20px 0;
}
.ty-checkout__billing-tabs .ty-tabs {
padding-left: 20px;
}
/* Credit Card */
/*
* Template: templates/views/orders/components/payments/cc.tpl
*/
.ty-credit-card {
display: inline-block;
float: left;
.box-sizing(border-box);
padding: 15px 22px;
max-width: 363px;
border: 1px solid #f2f2f2;
.border-radius(5px);
background: white;
@media (max-width: 480px) {
max-width: 100%;
}
}
.ty-credit-card__control-group {
position: relative;
}
input.ty-credit-card__input {
padding: 8px;
padding-right: 54px;
width: 100%;
height: 40px;
font-size: 18px;
}
input.ty-credit-card__input-short {
margin: 0;
width: 50px;
}
.ty-credit-card__ty-control-group {
position: relative;
}
.ty-credit-card .help-inline {
display: none;
}
.ty-credit-card__cvv-field {
display: inline-block;
margin: 17px 15px;
max-width: 190px;
}
.ty-credit-card__cvv-field-input {
width: 65px;
font-size: 18px;
height: 38px !important;
}
.ty-cc-icons {
position: absolute;
right: 57px;
bottom: 25px;
display: inline-block;
margin: 0 0 15px;
}
.ty-cc-icons__item {
position: absolute;
z-index: 10;
display: inline-block;
visibility: hidden;
padding: 2px;
.border-radius(4px);
}
.ty-cc-icons__icon {
display: inline-block;margin: 0;
width: 51px;
height: 32px;
background: url(../media/images/icons/payments.png) no-repeat;
}
.ty-cc-icons__item.cc-default,
.ty-cc-icons__item.active {
visibility: visible;
}
.ty-cc-icons__item .default {
background-position: -300px 0px;
}
.ty-cc-icons__item .visa-electron {
background-position: -200px -100px;
}
.ty-cc-icons__item .maestro {
background-position: 0 -200px;
}
.ty-cc-icons__item .american-express {
background-position: -100px -200px;
}
.ty-cc-icons__item .discover {
background-position: -200px -200px;
}
.ty-cc-icons__item .mastercard {
background-position: 0px -100px;
}
.ty-cc-icons__item .visa {
background-position: -200px 0px;
}
.ty-cvv2-about {
display: inline-block;
margin-left: 10px;
}
.touch .ty-cvv2-about {
display: none;
}
.ty-cvv2-about:hover {
position: relative;
text-decoration: none;
}
.ty-cvv2-about__title {
cursor: pointer;
color: @links;
}
.ty-cvv2-about__note {
display: none;
padding: 15px 5px;
width: 340px;
border: 1px solid lighten(@base, 20%);
background-color: #fff;
.border-radius(6px 6px 6px 6px);
.box-shadow (0 2px 4px rgba(0, 0, 0, 0.2));
}
.ty-cvv2-about:hover .ty-cvv2-about__note {
position: absolute;
bottom: 0;
left: 100%;
z-index: 100;
display: block;
}
.ty-cvv2-about__image {
float: left;
padding: 0 15px;
}
.ty-cvv2-about__description {
float: left;
width: 240px;
}
.ty-cvv2-about__description-title {
margin: 0;
}
/* /Credit card */
/* Payments icon */
.ty-payment-icons {
margin: 5px 0;
}
.ty-payment-icons__item {
display: inline-block;
margin: 5px;
width: 51px;
height: 32px;
background: url(../media/images/icons/payments.png) no-repeat;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
.ty-payment-icons__item.twocheckout {
background-position: 0 0;
}
.ty-payment-icons__item.mastercard {
background-position: 0px -100px;
}
.ty-payment-icons__item.paypal {
background-position: -100px -100px;
}
.ty-payment-icons__item.visa {
background-position: -200px 0px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.ty-payment-icons__item {
background-image: url(../media/images/icons/payments@2x.png);
background-size: 400px, 400px;
}
}
/* /Payments icon */
/* /Checkout four two */
/* Checkout sidebox
========================================================================== */
/*
* Template: templates/blocks/checkout/summary.tpl
* Template: templates/blocks/checkout/order_info.tpl
* Template: templates/blocks/checkout/products_in_cart.tpl
*/
.ty-checkout-summary__block {
margin-top: 20px;
width: 100%;
}
.ty-checkout-summary__item {
padding-bottom: 15px;
}
.ty-checkout-summary__total {
text-align: left;
}
.ty-checkout-summary__total-sum {
display: inline-block;
float: right;
}
.ty-checkout-summary__taxes {
padding-bottom: 2px;
font-weight: bold;
}
.ty-checkout-summary__taxes-name {
word-break: break-all;
word-break: break-word;
}
.ty-checkout-summary__order_discount {
color: #E74C3C;
}
.ty-order-products__list {
padding: 0px 0px;
}
.ty-order-products__list .ty-product-options {
display: block;
padding: 6px 0 0;
color: lighten(@font, 25%);
margin-bottom: 0;
}
.ty-order-products__item {
padding: 14px 0;
border-bottom: 1px solid #ecf0f1;
}
.ty-order-products__item:last-child {
padding-bottom: 5px;
border: none;
}
.ty-order-products__item:first-child {
padding-top: 0;
}
.ty-order-products__item-delete {
visibility: hidden;
float: right;
margin: 2px 0 0 0;
}
.ty-order-products__item-delete:hover {
text-decoration: none;
}
.ty-order-products__item:hover .ty-order-products__item-delete {
visibility: visible;
}
.ty-order-products__price {
color: darken(@font, 10%);
}
.ty-order-products__a {
display: inline-block;
margin: 2px 0 5px;
max-width: 235px;
}
.ty-order-products__buttons {
padding: 14px 0px;
}
.ty-order-products__buttons .text-button {
color: #E74C3C;
}
/* Order info */
.ty-order-info {
color: darken(@font, 10%);
}
.ty-order-info__title {
font-weight: bold;
}
.shipping-adress__delim {
margin-bottom: 15px;
padding-top: 10px;
border-bottom: 1px solid #ECF0F1;
}
.ty-order-info__profile-field {
padding: 10px;
background: @base;
.border-radius(3px);
}
.ty-order-info__profile-field-item {
float: none;
clear: left;
word-break: break-all;
word-break: break-word;
}
.ty-order-info__profile-field .b-firstname,
.ty-order-info__profile-field .b-lastname,
.ty-order-info__profile-field .b-address,
.ty-order-info__profile-field .b-city,
.ty-order-info__profile-field .b-country,
.ty-order-info__profile-field .b-state,
.ty-order-info__profile-field .b-zipcode,
.ty-order-info__profile-field .s-firstname,
.ty-order-info__profile-field .s-lastname,
.ty-order-info__profile-field .s-address,
.ty-order-info__profile-field .s-city,
.ty-order-info__profile-field .s-country,
.ty-order-info__profile-field .s-state,
.ty-order-info__profile-field .s-zipcode {
float: left;
clear: none;
padding-right: 5px;
}
.ty-order-info__profile-field .b-address,
.ty-order-info__profile-field .s-address {
clear: left;
}
/* Checkout complete */
.ty-checkout-complete__create-account {
width: 49%;
display: inline-block;
}
.ty-checkout-complete__buttons {
.clearfix();
}
.ty-checkout-complete__buttons-left {
float: left;
}
.ty-checkout-complete__buttons-right {
float: right;
}
.ty-checkout-complete__login-info {
width: 45%;
margin-left: 5%;
display: inline-block;
vertical-align: top;
}
.ty-checkout-complete_width_full {
width: 100%;
margin:0 0 45px 0;
}
.ty-checkout-complete__order-success {
margin-bottom: 20px;
}
.ty-checkout-complete__button-vmid {
display: inline-block;
margin-top: 8px;
}
/* /Checkout complete */
/* /One page checkout styles */
/* Payment methods
========================================================================== */
/*
* Template: templates/views/checkout/components/payments/payment_methods.tpl
*/
.ty-other-pay {
margin-top: 20px;
}
.ty-payments-list {
float: left;
margin: 0;
padding-right: 60px;
}
.ty-payments-list__item {
padding: 0px 0px 20px 0;
font-size: 0;
}
input.ty-payments-list__checkbox {
margin: 2px 0 0 0;
display: inline-block;
vertical-align: middle;
width: 10%;
max-width: 13px;
}
.ty-payments-list__checkbox:checked + .ty-payments-list__item-group {
font-weight: bold;
}
.ty-payments-list__item-group {
padding-left: 20px;
color: darken(@base, 30%);
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
width: 90%;
}
.ty-payments-list__description {
padding-top: 5px;
margin-bottom: 10px;
font-weight: normal;
}
.ty-payments-list__instruction {
display: inline-block;
width: 255px;
margin-bottom: 10px;
color: @font;
}
.ty-payments-list__instruction h2 {
font-weight: bold;
font-size: 135%;
line-height: 130%;
}
.ty-payments-list__instruction p {
padding-top: 10px;
line-height: 150%;
}
.ty-payments-list__image {
max-width: 120px;
}
/* Payment iFrame box */
.ty-payment-method-iframe {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 700px;
background: #c0c0c0;
opacity: 0.9;
}
.ty-payment-method-iframe__label {
position: relative;
top: 350px;
padding: 10px;
height: 50px;
}
.ty-payment-method-iframe__text {
position: relative;
top: 20px;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
.ty-payment-method-iframe__box {
position: relative;
z-index: 10;
overflow:hidden;
height: 700px;
width: 100%;
}
/* /Payment iFrame box */
/* Repay */
.ty-repay .ty-tabs {
margin-top: 5px;
}
.ty-repay-button {
padding-bottom: 20px;
}
/* /Repay */
/* /Payment methods */
/* ==========================================================================
Order
========================================================================== */
/*
* Template: templates/views/orders/details.tpl
* Template: templates/views/orders/search.tpl
* Template: templates/views/orders/components/order_repay.tpl
*/
.ty-orders-detail {
position: relative;
}
.ty-orders-detail .tabs {
margin-top: 20px;
}
.ty-orders-detail .ty-subheaders-group {
margin: 0;
}
.ty-orders__actions {
margin: 25px 0;
}
.ty-orders__actions .ty-btn + .ty-btn {
margin-left: 30px;
}
.ty-orders__actions-right {
float: right;
}
.ty-orders__actions-right-item {
float: left;
margin-left: 25px;
}
.ty-profiles-info {
margin-top: 20px;
vertical-align: top;
.clearfix();
}
.ty-profiles-info__item {
float: left;
margin-right: 3%;
width: 30%;
}
.ty-profiles-info__title {
margin-bottom: 5px;
font-size: 15px;
}
.ty-profiles-info__field {
padding-top: 12px;
}
.ty-profiles-info__field .ty-info-field {
margin-bottom: 5px;
word-break: break-all;
word-break: break-word;
.clearfix();
}
.ty-orders-detail__products {
margin-top: 25px;
}
.ty-orders-detail__table {
width: 100%;
margin-top: 10px;
}
.ty-orders-detail__table-description {
margin-left: 20px;
}
.ty-orders-detail__table-product {
width: 65%;
}
.ty-orders-detail__table-price {
width: 15%;
text-align: right;
}
.ty-orders-detail__table-quantity {
width: 10%;
}
.ty-orders-detail__table-subtotal {
text-align: right;
}
.ty-orders-detail__table-code {
.word-break();
}
.ty-orders-notes {
margin-top: 28px;
}
.ty-orders-notes__body {
position: relative;
margin-top: 10px;
padding: 15px;
border: 1px solid @base;
line-height: 150%;
.border-radius(5px);
}
.ty-orders-summary {
margin-top: 28px;
}
.ty-orders-summary__wrapper {
float: left;
margin-top: 10px;
padding: 4px 20px;
min-width: 52%;
background: lighten(@base, 4%);
border: 1px solid @base;
.border-radius(5px);
}
.ty-orders-summary__table {
width: 100%;
}
.ty-orders-summary__row {
border-bottom: 1px solid #E3E9EC;
}
.ty-orders-summary__row:last-child {
border-bottom: 0px;
}
.ty-orders-summary__total {
font-weight: bold;
}
.ty-orders-summary__wrapper td {
padding: 13px 10px 11px 0;
vertical-align: top;
}
.ty-orders-summary__taxes-description {
padding-top: 5px;
}
.ty-orders-summary__right {
float: right;
}
.ty-orders-shipment {
.ty-subheader {
font-size: 22px;
font-weight: bold;
margin-top: 40px;
&:first-child {
margin-top: 0px;
}
}
}
.ty-orders-shipment__info {
p {
padding-top: 0px;
}
}
.ty-orders-shipment__table {
width: 100%;
margin-top: 10px;
}
.ty-orders-shipment-notes__header {
font-size: 14px;
float: left;
padding-right: 10px;
display: table-cell;
}
.ty-orders-shipment-notes__body {
display: table-cell;
}
.ty-orders-shipment-notes__info {
padding-top: 20px;
}
.ty-orders-shipment-notes_body {
float: left;
display: table-cell;
}
.ty-orders-search {
position: relative;
width: 100%;
}
.ty-orders-search__item {
vertical-align: top;
}
.ty-orders-search {
&__header--actions {
width: 25%;
@media (min-width: 1024px) {
width: 18%;
}
}
&__item&__item--actions {
.ty-table__responsive-header {
padding-top: 7px;
padding-right: 5px;
}
.ty-btn-icon {
background: none;
color: #465f73;
}
@media (min-width: 768px) {
padding-top: 5px;
}
}
}
.ty-orders-search-options {
.ty-period {
clear: none;
margin-left: 2.1276595744681%;
float: left;
}
.ty-period__wrapper {
padding-right: 10px;
margin-bottom: 12px;
}
.ty-period__select-date {
margin-bottom: 12px;
float: left;
.ty-control-group__title {
visibility: hidden;
}
}
.ty-period__dash {
padding: 0;
}
.ty-status-info {
font-size: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
label {
display: inline-block;
margin-right: 0;
font-size: 0.875rem;
width: 25%;
word-break: break-word;
}
input[type='checkbox'] {
margin-left: 0px;
}
}
.ty-orders-search__options-status {
margin-left: 25px;
}
}
.ty-orders-search__user-info {
margin: 0;
padding: 0;
}
.ty-orders-repay {
margin-top: 30px;
.tabs-content {
padding-left: 20px;
padding-top: 20px;
}
.ty-customer-notes {
padding-right: 0px;
padding-left: 0px;
}
.ty-other-pay {
margin-top: 0px;
}
}
.ty-order-status {
margin: 5% auto;
padding: 15px 15px 15px 40px;
width: 920px;
border: 1px solid #e5e5e5;
background: #f7f7f7 url(../media/images/icons/ajax.gif) no-repeat 15px center;
.border-radius(6px);
}
.ty-checkout-block-terms {
padding: 0;
}
.ty-license-agreement__checkbox {
padding: 0 20px;
}
.ty-license-agreement__checkbox__checkbox {
display: block;
font-weight: bold;
}
/* Order promotions */
/*
* Template: templates/views/orders/components/promotions.tpl
*/
.ty-orders-promotion {
margin-top: 30px;
}
.ty-orders-promotion__coupon-title {
}
.ty-orders-promotion__title {
font-size: 16px;
}
.ty-orders-promotion__description {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 10px;
padding: 10px;
}
/* /Order promotions */
/* /Orders */
/* ==========================================================================
Page 404
========================================================================== */
/*
* Template: templates/blocks/static_templates/404.tpl
*/
.ty-exception {
position: relative;
margin: 50px 0px 30px 0px;
padding: 40px 0px 70px 0px;
}
.ty-exception__code {
top: 92px;
left: 63px;
display: inline-block;
width: 300px;
color: #E74C3C;
text-align: center;
font-weight: bold;
font-size: 86px;
line-height: 70px;
}
.ty-exception__code-txt {
display: block;
text-align: center;
font-weight: normal;
font-style: normal;
font-size: 26px;
}
.ty-exception__title-info {
display: inline-block;
padding-left: 30px;
}
.ty-exception__title {
padding: 0px 0px 25px 0px;
font-size: 25px;
font-weight: normal;
color: #34495E;
}
.ty-exception__info {
padding: 0px 0px 30px 0px;
color: #BDC3C7;
font-size: 110%;
}
.ty-exception__links {
margin: 0px 20px 0px 0px;
}
.ty-exception__links-item {
float: left;
list-style-type: none;
float: left;
margin-right: 20px;
}
.ty-exception__links-a {
text-decoration: underline;
cursor: pointer;
}
/* /Page 404 */
/* ==========================================================================
Sitemap
========================================================================== */
/*
* Url: dispatch=sitemap.view
* Template: templates/views/sitemap/view.tpl
* Template: templates/views/sitemap/components/categories_tree.tpl
*/
.ty-sitemap {
margin-bottom: 10px;
}
.ty-sitemap__section-title {
display: block;
padding: 10px 0 7px 0;
border-color: lighten(@base, 42%);
border-bottom: 1px solid #ebebeb;
font-size: 16px;
}
.ty-sitemap__section-wrapper {
float: left;
margin-top: 20px;
margin-bottom: 30px;
width: 33%;
}
.ty-sitemap__tree {
margin: 20px 0 15px 0;
}
.ty-sitemap__tree-section-list {
display: inline-block;
float: left;
margin-bottom: 30px;
min-height: 165px;
width: 33%;
font-size: 12px;
}
.ty-sitemap__section-sub-title {
font-weight: bold;
font-size: 120%;
}
.ty-sitemap__tree-list-item {
font-size: 12px;
line-height: 17px;
padding: 5px 0;
}
.ty-sitemap__tree-list-item {
padding: 5px 0;
}
/* /Sitemap */
/* ==========================================================================
Company
========================================================================== */
/*
* Template: templates/views/companies/apply_for_vendor.tpl
* Template: templates/views/companies/view.tpl
* Template: templates/views/companies/catalog.tpl
*/
.ty-company-fields {
margin-bottom: 50px;
}
.ty-company-fields .ty-input-text,
.ty-company-fields .ty-input-textarea-long {
width: 100%;
}
.ty-company-fields select {
width: 100%;
}
.ty-companies {
.clearfix();
padding: 20px 0;
border-bottom: 1px solid #ebebeb;
}
.ty-companies__info {
overflow: hidden;
padding-left: 25px;
}
.ty-companies__img {
float: left;
text-align: center;
}
.ty-company-title {
display: inline-block;
padding: 5px 0;
}
.ty-company-detail__top-links {
line-height: 20px;
}
.ty-company-detail__view-products {
display: inline-block;
margin-top: 5px;
margin-right: 15px;
cursor: pointer;
}
.ty-company-detail__categories {
margin-top: 10px;
}
.ty-company-detail__table {
width: 100%;
margin-top: 10px;
}
.ty-company-detail__info-title {
margin-bottom: 0;
padding-bottom: 5px;
color: #404040;
font-weight: bold;
font-size: 115%;
}
.ty-company-detail__logo {
float: left;
overflow: hidden;
margin: 0 100px 20px 0;
width: 160px;
height: 100px;
border: 1px solid #ddd;
text-align: center;
line-height: 100px;
.clearfix();
}
.ty-company-detail__logo .ty-no-image {
width: 160px !important;
height: 100px !important;
}
.ty-company-detail__info {
overflow: hidden;
margin-top: 25px;
.clearfix();
}
.ty-company-image {
vertical-align: middle;
}
.ty-company-detail__info-list {
float: left;
margin-bottom: 20px;
max-width: 320px;
word-break: break-all;
}
.ty-company-detail_info-first {
margin-right: 10%;
}
.ty-company-detail__ty-control-group {
padding-top: 3px;
}
.ty-company-detail__control-label {
display: inline-block;
width: 95px;
word-break: break-word;
vertical-align: top;
}
.ty-company__terms {
margin: 25px 20px;
padding: 15px 20px;
border: 2px solid #bdc3c7;
border-radius: 3px;
background: #fff;
font-weight: bold;
}
/* Company information (Block) */
.ty-company-info {
margin: 45px 0 0 58px;
padding-bottom: 280px;
background: url('../media/images/company_vendor.png') no-repeat bottom center;
}
.ty-company-info h4 {
padding-bottom: 10px;
font-size: 19px;
}
.ty-company-info ul li {
margin-bottom: 11px;
margin-left: 17px;
padding: 2px 0;
list-style-type: disc;
}
/* /Company */
/* Vendor information (Block) */
.ty-grid-vendors {
.ty-grid-list__company-logo .ty-company-image-wrapper {
display: block;
text-align: center;
line-height: 100px;
}
.ty-grid-list__item-location .company-location {
display: block;
text-align: center;
color: lighten(@font, 35%);
word-wrap: break-word;
}
.ty-grid-list__total-products .ty-company-total-products {
display: block;
text-align: center;
color: lighten(@font, 35%);
word-wrap: break-word;
text-transform: lowercase;
}
}
/* /Vendor */
/* ==========================================================================
Vendor page
========================================================================== */
.vendor-info-grid {
border-top: 1px solid @base;
border-bottom: 1px solid @base;
margin: 30px 0 3px;
padding: 35px 0;
}
/* ==========================================================================
Entry page
========================================================================== */
/*
* Template: templates/views/companies/components/entry_page.tpl
*/
.ty-entry-page__item {
margin: 3px 0;
padding: 8px;
}
.ty-entry-page__a {
display: block;
}
#entry_page {
overflow: auto;
}
/* /Entry page */
/* ==========================================================================
Promotions
========================================================================== */
/*
* Template: templates/views/promotions/list.tpl
*/
.ty-grid-promotions {
margin-left: -10px;
margin-right: -10px;
}
.ty-grid-promotions__item {
border: 1px solid #ebebeb;
margin: 10px 10px 25px 10px;
padding: 0;
}
.ty-grid-promotions__content {
padding: 20px 20px 25px 20px;
}
.ty-grid-promotions__subtitle {
margin-left: 10px;
margin-right: 10px;
}
.ty-grid-list__available {
margin-bottom: 7px;
color: #adadad;
font-size: 13px;
}
.ty-grid-promotions__company {
margin-bottom: 7px;
}
.ty-grid-promotions__header {
margin-bottom: 7px;
line-height: 1.2;
}
.ty-grid-promotions__description table {
display: block;
overflow-x: auto;
max-width: 100%;
}
/* /Promotions */
/* ==========================================================================
Categories picker
========================================================================== */
/*
* Template: templates/views/categories/components/categories_tree_simple.tpl
* Template: templates/pickers/categories/picker_contents.tpl
*/
.ty-categories-picker {
margin-top: -1px;
width: 100%;
}
.ty-categories-picker__title,
.ty-categories-picker__item {
padding: 12px;
border: 1px solid #ecf0f1;
text-align: left;
}
.ty-categories-picker .ty-dir-list {
color: #b3b3b3;
}
.ty-tree-space {
display: inline-block;
width: 10px;
}
/* /Categories picker */
/* ==========================================================================
Download
========================================================================== */
/*
* Template: templates/views/orders/downloads.tpl
* Template: templates/views/products/download.tpl
* Template: templates/views/products/components/file_tree.tpl
*/
.download {
margin-top: 20px;
}
.ty-download__table {
width: 100%;
margin: 11px 0 35px 0;
}
.ty-download-icon {
margin-right: 5px;
color: #BDC3C7;
}
.ty-download__empty {
color: @base;
}
.ty-download__icon {
margin-left: 5px;
font-size: 120%;
}
.ty-download__size-col {
width: 20%;
}
.ty-download__nostyle {
padding: 0 !important;
border: 0 !important;
}
.ty-download__table-nomargin {
width: 100%;
}
/* /Download */
/* ==========================================================================
Theme editor
========================================================================== */
/* Theme editor mode, these styles should be placed here to avoid flickering */
.te-mode {
margin-left: 300px;
}
.te-mode .ty-ajax-loading-box {
margin-left: 156px;
}
/* /Theme editor */
/* ==========================================================================
Lightbox previewer
========================================================================== */
/* More z-index for lightbox*/
html #jquery-overlay {
z-index: 1160;
}
html #jquery-lightbox {
z-index: 1170;
}
/* /Lightbox previewer */
/* ==========================================================================
Special user-defined styles (Block class)
========================================================================== */
.homepage-banners {
margin-top: 25px;
}
.ty-homepage-vendors {
margin-top: 35px;
}
.ty-homepage-vendors ul {
margin: 15px 15px 0 0;
}
.ty-homepage-vendors ul li {
padding: 5px 0;
}
.ty-homepage-vendors__devider {
border-top: 1px solid @base;
padding: 10px 0;
margin-top: 15px;
}
/* /Special user-defined styles */
/* ==========================================================================
Pagination
========================================================================== */
/*
* Template: templates/common/pagination.tpl
*/
.ty-pagination {
margin: 10px 0 10px;
padding: 10px 0 10px 0;
}
.ty-pagination__items {
display: inline-block;
color: darken(@base, 35%);
}
.ty-pagination__bottom {
border-top: 1px solid #dedede;
}
.ty-pagination__item,
.ty-pagination__selected {
color: white;
display: inline-block;
padding: 3px 7px;
min-width: 12px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
.border-radius(3px);
.transition(all 200ms);
}
.ty-pagination__item {
color: darken(@base, 35%);
}
.ty-pagination__item:hover {
background: @base;
color: darken(@base, 35%);
padding: 4px 7px;
}
.ty-pagination__selected {
color: #fff;
font-size: @links_font_size;
background: @links;
}
.ty-pagination__range,
.ty-pagination__btn {
margin: 0 4px;
padding: 5px 7px;
width: auto;
color: darken(@base, 35%);
}
.ty-pagination__btn:hover {
color: darken(@base, 35%);
}
.ty-pagination__prev,
.ty-pagination__next {
color: darken(@base, 35%);
}
.ty-pagination__prev:hover,
.ty-pagination__next:hover {
color: darken(@base, 35%);
background: @base;
cursor: pointer
}
.ty-pagination__text {
text-transform: uppercase;
}
.ty-pagination__text-arrow {
font-size: 16px;
line-height: 10px;
font-style: normal;
}
.ty-pagination__text-arrow:before {
content: "←";
}
.ty-pagination__right-arrow .ty-pagination__text-arrow:before {
content: "→";
}
/* /pagination */
/* ==========================================================================
Tabs
========================================================================== */
.ty-tabs {
margin-top: 30px;
vertical-align: bottom;
border-bottom: 1px solid darken(@base, 7%);
}
.ty-tabs__list {
vertical-align: bottom;
}
.ty-tabs__item,
.ty-tabs .subtab {
float: left;
vertical-align: bottom;
white-space: nowrap;
cursor: pointer;
border-radius: 0;
margin: 2px 2px 0 0;
padding: 0 0 0 3px;
position: relative;
background: darken(@base, 5%);
.transition(all 200ms);
}
.ty-tabs__item:hover,
.ty-tabs .subtab:hover {
background: darken(@base, 2%);
}
.ty-tabs__item.active,
.ty-tabs .subtab.active {
background: darken(@base, 20%);
}
.ty-tabs__a,
.ty-tabs .subtab a {
display: block;
padding: 8px 21px 2px 18px;
height: 23px;
color: #7c7e80;
text-decoration: none;
}
.ty-tabs__item.active .ty-tabs__a {
color: #fff;
}
.ty-tabs .subtab .ty-tabs__item.active .ty-tabs__a {
color: #7C7E80;
}
.ty-tabs__a:hover,
.ty-tabs .subtab a:hover {
text-decoration: none;
color: #7c7e80;
}
.ty-tabs__content {
padding: 15px 5px;
}
/* if no tabs */
.tab-list-title {
margin: 50px 0 15px 0px;
padding-bottom: 8px;
border-bottom: 1px solid @base;
font-size: 22px;
}
/* tabs dropdown */
.ty-tabs .open .dropdown-menu {
display: block;
}
.ty-tabs .dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
min-width: 160px;
padding: 5px 0;
margin: 0;
list-style: none;
background-color: #fff;
border: 1px solid #dcdcdc;
.border-radius(3px);
.border-top-right-radius(0px);
.border-top-left-radius(0px);
.box-shadow(0 5px 10px rgba(0,0,0,0.2));
.background-clip(padding-box);
}
.ty-tabs .dropdown-menu li.active {
float: none;
border: 0;
margin: 0;
}
.ty-tabs .dropdown-menu li {
display: block;
margin: 0;
float: none;
background: none;
border: 0px;
}
.ty-tabs .subtab {
float: right !important;
}
.ty-tabs .ty-icon-down-dir {
position: relative;
float: none;
top: 0;
left: 0;
margin: 0 2px;
}
.ty-tabs-rounded() when (@rounded_corners = true) {
.ty-tabs__item {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
}
.ty-tabs-rounded();
/* /Tabs */
/* ==========================================================================
Alerts & Notifications
========================================================================== */
/*
* Template: templates/common/notification.tpl
* Template: mail/templates/common/notification.tpl
* Template: /js/tygh/core.js
*/
.ty-ajax-loading-box__inner {
display: none;
margin: 0 10px 0 5px;
padding: 6px 0 6px 27px;
color: #fff;
font-weight: bold;
}
.ty-ajax-loading-box {
display: none;
position: fixed;
background: black;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 100001;
overflow: visible;
opacity: 0.8;
border-radius: 5px;
width: 52px;
min-height: 52px;
.ajax-loader;
.ajax-loader--vertical-top;
.ajax-loader--horizontal-center;
}
.ty-ajax-loading-box {
&_text_block {
min-width: 120px;
min-height: 76px;
background-position: 44px 10px;
}
&-with__text-wrapper {
color: #fff;
margin-top: 50px;
display: block;
margin-left: 0px;
width: 100%;
padding: 0px 5px 5px 5px;
text-align: center;
box-sizing: border-box;
}
}
.ty-ajax-overlay {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 10000;
display: none;
}
/* Core.js */
.notification-content-extended {
position: fixed;
top: 50%;
left: 50%;
z-index: 1101;
margin: -40px 0 0 -320px;
min-height: 140px;
width: 640px;
color: #000;
background-color: #fff;
border: 1px solid gray;
}
.notification-content-extended-rounded() when (@rounded_corners = true) {
.notification-content-extended {
.border-radius(6px);
}
.notification-content-extended h1 {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.ty-product-notification__buttons {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
}
.notification-content-extended-rounded();
.notification-content-extended .ty-product-notification__body {
//max-height: 450px;
overflow: auto;
}
.notification-body-extended {
color: #000;
overflow-x: hidden;
overflow-y: auto;
}
.notification-container {
position: fixed;
top: 0;
right: 40px;
z-index: 1022;
min-width: 300px;
width: 40%;
}
.notification-container-top {
top: 10px;
}
.notification-content {
position: relative;
.box-sizing(border-box);
padding: 10px 35px 10px 18px;
line-height: 150%;
border-radius: 2px;
.rounded_corners(4px);
}
.notification-content strong {
margin-right: 7px;
}
.notification-content-extended h1 {
position: relative;
padding: 13px 30px 10px 20px;
border: none;
border-bottom: 1px solid #bdc3c7;
background: #f8f9f9;
font-weight: normal;
font-size: 18px;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
.box-sizing(border-box);
.border-radius(0px);
}
.notification-content-extended h1 span {
position: absolute;
top: 15px;
right: 14px;
width: 16px;
height: 16px;
color: #acacac;
text-shadow: none;
font: 13px/1 'glyphs';
opacity: 1;
cursor: pointer;
speak: none;
-webkit-font-smoothing: antialiased;
}
.notification-content-extended h1 span:before {
font-family: 'glyphs';
content: "\e009";
speak: none;
-webkit-font-smoothing: antialiased;
}
.notification-content-extended h1 span:hover {
color: #dfdfdf;
opacity: 1;
}
.close {
position: absolute;
top: 5px;
right: 7px;
float: right;
padding: 0;
border: 0;
background: transparent;
font-size: 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 15px;
cursor: pointer;
-webkit-appearance: none;
}
.close:hover {
text-decoration: none;
cursor: pointer;
}
.alert-success, .alert-warning, .alert-error {
position: relative;
margin: 7px 0 7px 0;
border: 1px solid;
font-size: 100%;
opacity: 0.96;
}
.alert-success {
border-color: #8bc045;
background: #d0eaae;
color: #496e16;
}
.alert-success .close {
color: #8bc045;
}
.alert-warning {
border-color: #f39c12;
background: #f5e08c;
color: #ac6e0b;
}
.alert-warning .close {
color: #f39c12;
}
.alert-error {
border-color: #c0392b;
background: #eb7064;
color: white;
}
.alert-error .close {
color: #c0392b;
}
.alert-error a {
color: #fff;
text-decoration: underline;
}
/* ==========================================================================
Carousel
========================================================================== */
/*
* Template: templates/blocks/products/products_scroller.tpl
* Template: templates/blocks/our_brands.tpl
*/
/* clearfix */
.owl-item {
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* hotfix blink problem, see: https://www.chromestatus.com/features/5093566007214080 */
}
.owl-carousel .owl-wrapper:after {
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel {
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper {
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
display: flex !important;
align-content: center;
}
.owl-carousel .owl-wrapper-outer {
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoheight {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item {
float: left;
min-height: 32px;
}
.owl-buttons {
color: darken(@base, 55%);
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div {
cursor: pointer;
}
.owl-controls {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
.user-select(none);
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}
/* css3 transitions */
.owl-origin {
-webkit-perspective: 1200px;
-webkit-perspective-origin-x : 50%;
-webkit-perspective-origin-y : 50%;
-moz-perspective : 1200px;
-moz-perspective-origin-x : 50%;
-moz-perspective-origin-y : 50%;
perspective : 1200px;
}
/* fade */
.owl-fade-out {
z-index: 10;
-webkit-animation: fadeout .7s both ease;
-moz-animation: fadeout .7s both ease;
animation: fadeout .7s both ease;
}
.owl-fade-in {
-webkit-animation: fadein .7s both ease;
-moz-animation: fadein .7s both ease;
animation: fadein .7s both ease;
}
/* backslide */
.owl-backslide-out {
-webkit-animation: backslideout 1s both ease;
-moz-animation: backslideout 1s both ease;
animation: backslideout 1s both ease;
}
.owl-backslide-in {
-webkit-animation: backslidein 1s both ease;
-moz-animation: backslidein 1s both ease;
animation: backslidein 1s both ease;
}
/* godown */
.owl-godown-out {
-webkit-animation: scaletofade .7s ease both;
-moz-animation: scaletofade .7s ease both;
animation: scaletofade .7s ease both;
}
.owl-godown-in {
-webkit-animation: godown .6s ease both;
-moz-animation: godown .6s ease both;
animation: godown .6s ease both;
}
/* scaleup */
.owl-fadeup-in {
-webkit-animation: scaleupfrom .5s ease both;
-moz-animation: scaleupfrom .5s ease both;
animation: scaleupfrom .5s ease both;
}
.owl-fadeup-out {
-webkit-animation: scaleupto .5s ease both;
-moz-animation: scaleupto .5s ease both;
animation: scaleupto .5s ease both;
}
/* keyframes */
/*empty*/
@-webkit-keyframes empty {
0% {opacity: 1}
}
@-moz-keyframes empty {
0% {opacity: 1}
}
@keyframes empty {
0% {opacity: 1}
}
@-webkit-keyframes fadein {
0% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes fadein {
0% { opacity:0; }
100% { opacity:1; }
}
@keyframes fadein {
0% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadeout {
0% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes fadeout {
0% { opacity:1; }
100% { opacity:0; }
}
@keyframes fadeout {
0% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes backslideout {
25% { opacity: .5; -webkit-transform: translatez(-500px); }
75% { opacity: .5; -webkit-transform: translatez(-500px) translatex(-200%); }
100% { opacity: .5; -webkit-transform: translatez(-500px) translatex(-200%); }
}
@-moz-keyframes backslideout {
25% { opacity: .5; -moz-transform: translatez(-500px); }
75% { opacity: .5; -moz-transform: translatez(-500px) translatex(-200%); }
100% { opacity: .5; -moz-transform: translatez(-500px) translatex(-200%); }
}
@keyframes backslideout {
25% { opacity: .5; transform: translatez(-500px); }
75% { opacity: .5; transform: translatez(-500px) translatex(-200%); }
100% { opacity: .5; transform: translatez(-500px) translatex(-200%); }
}
@-webkit-keyframes backslidein {
0%, 25% { opacity: .5; -webkit-transform: translatez(-500px) translatex(200%); }
75% { opacity: .5; -webkit-transform: translatez(-500px); }
100% { opacity: 1; -webkit-transform: translatez(0) translatex(0); }
}
@-moz-keyframes backslidein {
0%, 25% { opacity: .5; -moz-transform: translatez(-500px) translatex(200%); }
75% { opacity: .5; -moz-transform: translatez(-500px); }
100% { opacity: 1; -moz-transform: translatez(0) translatex(0); }
}
@keyframes backslidein {
0%, 25% { opacity: .5; transform: translatez(-500px) translatex(200%); }
75% { opacity: .5; transform: translatez(-500px); }
100% { opacity: 1; transform: translatez(0) translatex(0); }
}
@-webkit-keyframes scaletofade {
to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaletofade {
to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaletofade {
to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes godown {
from { -webkit-transform: translatey(-100%); }
}
@-moz-keyframes godown {
from { -moz-transform: translatey(-100%); }
}
@keyframes godown {
from { transform: translatey(-100%); }
}
@-webkit-keyframes scaleupfrom {
from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleupfrom {
from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleupfrom {
from { opacity: 0; transform: scale(1.5); }
}
@-webkit-keyframes scaleupto {
to { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleupto {
to { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleupto {
to { opacity: 0; transform: scale(1.5); }
}
/* owl theme */
.owl-theme {
margin: 0;
}
.ty-owl-controls {
padding-bottom: 10px;
float: right;
position: relative;
z-index: 100;
}
.ty-sidebox .ty-owl-controls {
margin: -50px 0 0 0;
}
.owl-theme .owl-controls {
margin-top: 10px;
text-align: center;
}
.owl-theme .owl-controls-outside {
margin-top: 0;
text-align: center;
}
/* styling next and prev buttons */
.owl-theme .owl-controls .owl-buttons div {
display: inline-block;
margin: 5px;
padding: 3px 10px;
height: 28px;
font-size: 12px;
.border-radius(30px);
filter: alpha(opacity=70);/*ie7 fix*/
opacity: 0.7;
}
.ty-owl-previewer__container .ty-owl-previewer__prev-icon,
.ty-owl-previewer__container .ty-owl-previewer__next-icon {
display: inline-block;
width: 15px;
line-height: 28px;
}
.ty-owl-previewer__container .ty-owl-previewer__prev-icon {
margin-left: 7px;
}
.ty-owl-previewer__container .ty-owl-previewer__next-icon {
margin-right: 7px;
}
.owl-theme .owl-controls-outside .owl-buttons div {
float: left;
font-size: 15px;
padding: 2px 9px;
height: 20px;
width: 6px;
margin-top: 3px;
margin-bottom: 0;
}
.owl-theme .owl-controls-outside .owl-buttons div:last-child {
margin-right: 0;
}
/* clickable class fix problem with hover on touch devices */
/* use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover {
filter: alpha(opacity=100);/*ie7 fix*/
opacity: 1;
text-decoration: none;
}
/* styling pagination*/
.owl-theme .owl-controls .owl-page {
display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
display: block;
width: 12px;
height: 12px;
margin: 5px 7px;
filter: alpha(opacity=50);/*ie7 fix*/
opacity: 0.5;
.border-radius(20px);
background: #A9B0B4;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
filter: alpha(opacity=100);/*ie7 fix*/
opacity: 1;
}
/* if paginationnumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers {
height: auto;
width: auto;
color: #fff;
padding: 2px 10px;
font-size: 12px;
.border-radius(30px);
}
/* preloading images */
.owl-item.loading {
.ajax-loader;
.ajax-loader--vertical-center;
.ajax-loader--horizontal-center;
}
.owl-more-theme .owl-controls {
width: 100%;
position: absolute;
top: 50%;
margin-top: -18px;
}
.owl-more-theme .owl-prev,
.owl-more-theme .owl-next {
position: absolute;
padding: 3px 8px 0 8px;
}
.owl-more-theme .owl-prev i,
.owl-more-theme .owl-next i,
.owl-more-theme .owl-prev .ty-icon,
.owl-more-theme .owl-next .ty-icon {
font-size: 30px;
}
.owl-more-theme .owl-prev {
left: -35px;
.border-radius(4px 0 0 4px);
}
.owl-more-theme .owl-next {
right: -35px;
.border-radius(0 4px 4px 0);
}
/* /owlcarousel */
/* lightbox tuning */
#lightbox-container-image-box {
height: 100% !important;
}
#lightbox-container-image,
#lightbox-container-image-data-box,
#lightbox-container-image-box,
#lightbox-image,
#lightbox-nav {
max-width: 100vw;
}
#lightbox-image {
max-height: 80vh;
}
@media (max-width: 767px) {
#jquery-lightbox {
overflow: hidden;
}
}
/* /lightbox tuning */
/* prettyphoto tuning */
@media (max-width: 767px) {
.pp_pic_holder.pp_default {
max-width: 100vw;
overflow: hidden;
position: fixed;
top: 0% !important;
}
#pp_full_res, .pp_content, .ppt {
max-width: 100vw;
}
.pp_details {
max-width: 100%;
}
#pp_full_res img,
.pp_hoverContainer,
.pp_content {
max-width: 100%;
height: auto !important;
}
a.pp_close {
top: -35px !important;
}
}
/* /prettyphoto tuning */
.ty-owl-previewer {
.object-container,
.ty-owl-previewer__container,
.owl-wrapper-outer,
.owl-wrapper,
&__image-container {
height: 100vh !important;
max-height: 100%;
}
.object-container {
overflow-x: hidden;
}
&__image--flex-fix-wrapper {
max-height: 100%;
max-width: 100%;
width: 100%;
height: ~"calc(100% - 30px)";
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.owl-pagination {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.owl-buttons {
position: absolute;
left: 0;
right: 0;
height: 0px;
bottom: ~"calc(50% + 60px)";
display: flex;
justify-content: space-between;
@media (max-width: 480px) {
display: none;
}
}
.owl-next {
transform: scale(3);
&:before {
border: 0 !important;
}
}
.owl-prev {
transform: scale(3);
&:after {
border: 0 !important;
}
}
}
.ty-owl-previewer__image-container {
display: flex;
align-items: start;
justify-content: center;
}
.ty-owl-previewer__image {
display: inline;
max-width: 100%;
width: auto;
max-height: 100%;
}
.ty-owl-previewer__dialog {
height: 80vh !important;
width: 80vw !important;
top: 10vh !important;
left: 10vw !important;
max-height: none;
max-width: 80vw !important;
position: fixed;
@media (max-width: 767px) {
height: 100vh !important;
width: 100vw !important;
top: 0vh !important;
left: 0vw !important;
max-width: 100vw !important;
}
}
.ty-owl-previewer__dialog .ui-dialog-titlebar {
background: white;
border: none;
}
.ty-owl-previewer.ui-dialog-content {
height: ~"calc(100% - 48px)" !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.ty-owl-previewer.ui-dialog-content .object-container {
padding: 4px;
display: block;
width: 100%;
}
// Carousel loading state scroller_init.tpl
// Up to 10 elements are supported.
.ty-scroller {
display: flex;
}
.ty-scroller > .ty-scroller__item {
width: 100%;
}
// Desktop
@media (min-width: 980px) {
.ty-scroller[data-ca-scroller-item-desktop="1"] > .ty-scroller__item:nth-child(n + 2),
.ty-scroller[data-ca-scroller-item-desktop="2"] > .ty-scroller__item:nth-child(n + 3),
.ty-scroller[data-ca-scroller-item-desktop="3"] > .ty-scroller__item:nth-child(n + 4),
.ty-scroller[data-ca-scroller-item-desktop="4"] > .ty-scroller__item:nth-child(n + 5),
.ty-scroller[data-ca-scroller-item-desktop="5"] > .ty-scroller__item:nth-child(n + 6),
.ty-scroller[data-ca-scroller-item-desktop="6"] > .ty-scroller__item:nth-child(n + 7),
.ty-scroller[data-ca-scroller-item-desktop="7"] > .ty-scroller__item:nth-child(n + 8),
.ty-scroller[data-ca-scroller-item-desktop="8"] > .ty-scroller__item:nth-child(n + 9),
.ty-scroller[data-ca-scroller-item-desktop="9"] > .ty-scroller__item:nth-child(n + 10),
.ty-scroller[data-ca-scroller-item-desktop="10"] > .ty-scroller__item:nth-child(n + 11) {
display: none;
}
}
// Desktop small
@media (min-width: 769px) and (max-width: 979px) {
.ty-scroller[data-ca-scroller-item-desktop-small="1"] > .ty-scroller__item:nth-child(n + 2),
.ty-scroller[data-ca-scroller-item-desktop-small="2"] > .ty-scroller__item:nth-child(n + 3),
.ty-scroller[data-ca-scroller-item-desktop-small="3"] > .ty-scroller__item:nth-child(n + 4),
.ty-scroller[data-ca-scroller-item-desktop-small="4"] > .ty-scroller__item:nth-child(n + 5),
.ty-scroller[data-ca-scroller-item-desktop-small="5"] > .ty-scroller__item:nth-child(n + 6),
.ty-scroller[data-ca-scroller-item-desktop-small="6"] > .ty-scroller__item:nth-child(n + 7),
.ty-scroller[data-ca-scroller-item-desktop-small="7"] > .ty-scroller__item:nth-child(n + 8),
.ty-scroller[data-ca-scroller-item-desktop-small="8"] > .ty-scroller__item:nth-child(n + 9),
.ty-scroller[data-ca-scroller-item-desktop-small="9"] > .ty-scroller__item:nth-child(n + 10),
.ty-scroller[data-ca-scroller-item-desktop-small="10"] > .ty-scroller__item:nth-child(n + 11) {
display: none;
}
}
// Tablet
@media (min-width: 480px) and (max-width: 768px) {
.ty-scroller[data-ca-scroller-item-tablet="1"] > .ty-scroller__item:nth-child(n + 2),
.ty-scroller[data-ca-scroller-item-tablet="2"] > .ty-scroller__item:nth-child(n + 3),
.ty-scroller[data-ca-scroller-item-tablet="3"] > .ty-scroller__item:nth-child(n + 4),
.ty-scroller[data-ca-scroller-item-tablet="4"] > .ty-scroller__item:nth-child(n + 5),
.ty-scroller[data-ca-scroller-item-tablet="5"] > .ty-scroller__item:nth-child(n + 6),
.ty-scroller[data-ca-scroller-item-tablet="6"] > .ty-scroller__item:nth-child(n + 7),
.ty-scroller[data-ca-scroller-item-tablet="7"] > .ty-scroller__item:nth-child(n + 8),
.ty-scroller[data-ca-scroller-item-tablet="8"] > .ty-scroller__item:nth-child(n + 9),
.ty-scroller[data-ca-scroller-item-tablet="9"] > .ty-scroller__item:nth-child(n + 10),
.ty-scroller[data-ca-scroller-item-tablet="10"] > .ty-scroller__item:nth-child(n + 11) {
display: none;
}
}
// Mobile
@media (max-width: 479px) {
.ty-scroller[data-ca-scroller-item-mobile="1"] > .ty-scroller__item:nth-child(n + 2),
.ty-scroller[data-ca-scroller-item-mobile="2"] > .ty-scroller__item:nth-child(n + 3),
.ty-scroller[data-ca-scroller-item-mobile="3"] > .ty-scroller__item:nth-child(n + 4),
.ty-scroller[data-ca-scroller-item-mobile="4"] > .ty-scroller__item:nth-child(n + 5),
.ty-scroller[data-ca-scroller-item-mobile="5"] > .ty-scroller__item:nth-child(n + 6),
.ty-scroller[data-ca-scroller-item-mobile="6"] > .ty-scroller__item:nth-child(n + 7),
.ty-scroller[data-ca-scroller-item-mobile="7"] > .ty-scroller__item:nth-child(n + 8),
.ty-scroller[data-ca-scroller-item-mobile="8"] > .ty-scroller__item:nth-child(n + 9),
.ty-scroller[data-ca-scroller-item-mobile="9"] > .ty-scroller__item:nth-child(n + 10),
.ty-scroller[data-ca-scroller-item-mobile="10"] > .ty-scroller__item:nth-child(n + 11) {
display: none;
}
}
// /Carousel loading state scroller_init.tpl
/* ==========================================================================
Footer form block
========================================================================== */
.ty-footer-form-block {
margin: 27px 0px 0px 0px;
color: white;
}
.ty-footer-form-block__title {
display: inline-block;
padding-right: 30px;
font-size: 22px;
color: white;
font-weight: normal;
}
.ty-footer-form-block__form {
display: inline-block;
margin: 0 0 10px 0 !important;
width: 300px;
}
.ty-footer-form-block__form .cm-hint {
color: #c9c9c9;
}
/* /Footer form block */
/* ==========================================================================
Date range picker
========================================================================== */
.dropdown-menu {
display: none;
}
/* /Date range picker */
/* ==========================================================================
Redactor II: align styles
========================================================================== */
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
/* /Redactor II: align styles */
/* ==========================================================================
Accessibility
========================================================================== */
.ty-visually-hidden, .ty-visually-hidden-focusable:not(:focus) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.radio,
.checkbox,
input[type="radio"],
input[type="checkbox"] {
&.ty-visually-hidden, &.ty-visually-hidden-focusable:not(:focus) {
margin: -1px;
}
}
// (3) Styles main post hook
@import "hooks/styles/main.post.less";
// Checkout
@import "tygh/lite_checkout.less";
@import "tygh/default_variables.less";
// Components
@import "tygh/components/tiles.less";
@import "tygh/components/table_sorter.less";
@import "../../../backend/css/tygh/bottom_panel/index.less";
@import "tygh/components/previewer.less";
@import "tygh/components/spinner.less";
@import "tygh/components/content_more.less";
@import "tygh/components/phone.less";
@import "tygh/components/video.less";
// (4) Styles index post hook
@import "hooks/styles/index.post.less";