@holderSize: 4px; .z-index(@type) when (@type = 'toolbar') { z-index: 1010; } .z-index(@type) when (@type = 'witget') { z-index: 1000; } .z-index(@type) when (@type = 'element_animated') { z-index: 800; } .z-index(@type) when (@type = 'holder_animated') { z-index: 799; } .z-index(@type) when (@type = 'settings') { z-index: 103; } .z-index(@type) when (@type = 'change') { z-index: 101; } .z-index(@type) when (@type = 'change-column') { z-index: 102; } .z-index(@type) when (@type = 'element') { z-index: 10; } .z-index(@type) when (@type = 'grid_overlay') { z-index: 1; } .col-width(@row-width) { .generate-columns(@row-width); } .generate-columns(@row-width, @n: 24, @i: 1) when (@i =< @n) { &.size-@{i} { @w: floor(@row-width/(24/@i)); width: @w; .generate-sub-columns(@w); } .generate-columns(@row-width, @n, (@i + 1)); } .generate-sub-columns(@row-width, @n: 24, @i: 1) when (@i =< @n) { & > .s-row > .s-col.size-@{i} { @w: floor(@row-width/(24/@i)); width: @w; } .generate-sub-columns(@row-width, @n, (@i + 1)); } body.editor { background-color: #efefef; clear: both; overflow-x: hidden; // min-height: 100%; } body.hover { // .s-element { // outline: 1px solid rgba(0, 0, 0, 0.6); // outline-offset: 0; // } .s-col { // 009cff, #E75859 outline: 2px solid rgba(231, 88, 89, 0.2); outline-offset: -1px; & > .s-col-wrapper { & > .s-row { & > .s-col { outline: 2px solid rgba(0, 156, 255, 0.2); outline-offset: -1px; } } } // outline-offset: 0; } } .disable-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .product-params { font-size: 14px; position: absolute; right: 0; top: 0; z-index: 100; cursor: pointer; opacity: 0.5; &:hover { opacity: 1; } } #generate-panel-wrapper { width: 100%; // position: fixed; top: 0; left: 0; right: 0; bottom: auto; text-align: center; .z-index('witget'); } #generate-panel { display: block; width: auto; background-color: #efefef; padding: 15px 20px; text-align: left; // .box-shadow(0 1px 10px rgba(0, 0, 0, 0.4)); .border-radius(5px); & > div { vertical-align: middle; } } #generate-save-panel { position: fixed; top: 0; bottom: auto; left: 0; right: 0; background-color: #009cff; color: #fff; padding: 15px 0; line-height: 1.6; font-size: 16px; font-weight: 100; text-align: center; display: none; .z-index('witget'); & > * { vertical-align: middle; margin: 0 10px; } } #generate-save-panel-clone { display: none; // color: #fff; // background-color: #009cff; padding: 50px; margin: 0 20px; text-align: center; font-size: 16px; line-height: 1.6; font-weight: 300; .border-radius(5px); } .editing-page-block { border-bottom: none; padding: 15px 25px !important; display: block; & > .content { margin-top: 5px; float: left; width: 200px; } & > .buttons { float: right; width: 32px; overflow: hidden; .border-radius(5px); & > .button { padding: 0; i { font-size: 14px; margin: 8px 10px; } } } &:hover { background-color: transparent !important; color: default !important; } &.ab { padding-bottom: 5px !important; } } .icons-choose-block { & > .icons { height: 380px; display: block; overflow-y: scroll; position: relative; & > .header { margin: 20px 0 10px 20px; } font-size: 0; .image { width: 16.66%; padding: 20px; display: inline-block; .box-sizing(border-box); .transition(all 0.2s ease); min-height: 50px; img { max-width: 100%; } &:hover { cursor: pointer; background-color: #efefef; } } } } .style-preset-block { float: left; width: 101px; // min-height: 101px; border: 2px solid transparent; cursor: pointer; .border-radius(5px); .transition(all 0.2s ease); // &::before { // content: ' '; // display: inline-block; // height: 100%; // vertical-align: middle; // } img { width: 100%; height: auto; vertical-align: middle; display: inline-block; } &:hover { border: 2px solid #009cff; background-color: #009cff; } &.active { border: 2px solid #009cff; background-color: #009cff; } &.full { width: 100%; } } .editing-element { display: none; } .editing-field.form { & h1 { font-size: 56px; margin-bottom: 5px; } & h2 { font-size: 48px; margin-bottom: 5px; } & h3 { font-size: 36px; margin-bottom: 5px; } & h4 { font-size: 28px; margin-bottom: 5px; } & h5 { font-size: 24px; margin-bottom: 5px; } & h6 { font-size: 16px; font-weight: bold; margin-bottom: 5px; } } .editing-field { & b { font-weight: bold; } & h1, & h2, & h3, & h4 { font-weight: 300; } & h6 { font-weight: bold; } span { padding: 0 1px; } div { margin: 0; padding: 0; } a { text-decoration: underline; } b { font-weight: bold; } i { font-style: italic; } s { text-decoration: line-through; } u { text-decoration: underline; } a, b, i, s, u, span { background-color: inherit; color: inherit; } img { max-width: 100%; } blockquote, ol, ul { margin: 0 0 0 2em; padding: 0; } ol { list-style-type: decimal; display: inline-block; text-align: left; } ul { list-style-type: disc; display: inline-block; text-align: left; } .wysiwyg-text-align-right { text-align: right; } .wysiwyg-text-align-left { text-align: left; } .wysiwyg-text-align-center { text-align: center; } .wysiwyg-multi-text { display: inline; } } .editing-field.holder { color: #009cff; font-weight: bold; font-size: 10px; padding: 6px; top: 0; left: -35px; position: absolute; opacity: 1; vertical-align: top; display: block; line-height: 1; background-color: #009cff; color: #fff; .border-radius(3px); .box-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); } .editing-field.holders { & h1, & h2, & h3, & h4, & h5, & h6 { position: relative; &::before { content: 'H2'; .editing-field.holder; } } & h1::before { content: 'H1'; } & h2::before { content: 'H2'; } & h3::before { content: 'H3'; } & h4::before { content: 'H4'; } & h5::before { content: 'H5'; } & h6::before { content: 'H6'; } & p { position: relative; &::before { content: 'P'; .editing-field.holder; left: -33px; } } & .wysiwyg-multi-text { display: inline-block; position: relative; border-left: 2px solid #009cff; border-right: 2px solid #009cff; .border-radius(3px); padding: 0 3px; // background-color: #009cff; // color: #fff; &::before { .editing-field.holder; content: 'multi'; font-size: 8px; top: -6px; left: -2px; padding: 3px; .box-shadow(none); } } } .s-element, .s-grid, .s-col { outline-offset: -2px; & > .border-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; .box-sizing(border-box); .border-radius(5px); } // .transition(outline 0.1s ease); & > .settings { margin: 0 auto; left: 0; right: 0; top: 0; max-width: 170px; position: absolute; text-align: center; min-width: 162px; z-index: 88; &.left { left: 0; right: auto; min-width: auto; text-align: left; .buttons { .border-radius(0 0 5px 0); } } &.bottom { bottom: -32px; top: auto !important; .buttons { .border-radius(0 0 5px 5px) !important; } } &.right { left: auto; right: 0; min-width: auto; text-align: right; .buttons { .border-radius(0 0 0 5px); } } &.center { left: 0; right: 0; margin: 1px auto 0; width: 580px; } .buttons { overflow: hidden; background-color: #009cff; display: inline-block; .border-radius(0 0 5px 5px); a { .box-shadow(none); padding: 10px 13px !important; i { font-size: 16px !important; } } } } .change { .z-index('change'); display: block; position: absolute; bottom: 0; // overflow: hidden; .box { .transition(background-color 0.2s ease); } // background-color: red; &.height { left: 0; right: 0; padding: 5px 0; height: 10px; bottom: -10px; cursor: ns-resize; & > .box { position: absolute; display: block; background-color: #009cff; .border-radius(3px); width: 50px; height: 10px; left: 0; right: 0; margin: 0 auto; } } &.width { top: 0; width: 10px; padding: 0 5px; cursor: ew-resize; &.left { left: -9px; right: auto; } &.right { right: -9px; left: auto; } & > .box { position: absolute; top: 50%; margin-top: -25px; display: block; width: 10px; height: 50px; // height: 100%; vertical-align: middle; background-color: #009cff; .border-radius(3px); } } &:hover { .box { background-color: #0085d9; } } } } .s-element.hover { z-index: 150; & > .border-overlay { border: 2px solid #009cff; } } .s-col.hover { z-index: 99; & > .border-overlay { border: 2px solid #E75859; } & > .settings { top: -18px; text-align: left; max-width: none; .buttons { .border-radius(5px 5px 5px 0 ); background-color: #E75859; a { background-color: #E75859; i { color: #fff; } } a:hover { background-color: #D24B4C; i { color: #fff; } } } } & > .change { .box { background-color: #E75859; } &:hover .box { background-color: #D24B4C; } } } .s-grid.hover { & > .border-overlay { border: 2px solid #009cff; // z-index: 10; } // z-index: 2; .grid-add-slide { display: none; } .grid-remove-slide { display: none; } .grid-edit-slide { display: none; } & > .settings { top: -34px; max-width: none; .buttons { .border-radius(5px 5px 0 0); } &.slider { top: 10px; right: 10px; left: auto; bottom: auto; .buttons { font-size: 11px; i { font-size: 14px; padding: 2px 0; } .border-radius(5px); } } } } .button-index { position: absolute; height: 50%; width: 100%; display: block; font-size: 72px; color: #666; background-color: #efefef; text-align: center; } .button-index::before { content: ' '; display: inline-block; height: 100%; vertical-align: middle; } .button-index span { display: inline-block; vertical-align: middle; } .button-index.top { top: 0; left: 0; right: 0; bottom: auto; } .button-index.bottom { top: 50%; left: 0; right: 0; bottom: 0; } :hover.button-index { color: #666; background-color: #ccc; } #teach-layers { display: none; .layer { position: fixed; z-index: 9999; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; right: 0; bottom: 0; } } #preset-designs { .button { padding: 5px 0; border: none; background: none; text-align: center; .box-shadow(none); .border-radius(0); img { width: auto; max-width: 100%; height: auto; display: inline-block; } &:hover { background-color: #dfdfdf; } } } #editing-toolbar, .editing-toolbar { position: absolute; .z-index('toolbar'); display: none; // .border-radius(5px); button { padding: 12px 15px !important; i { font-size: 12px !important; } } button.save { padding: 10px 12px !important; i { font-size: 16px !important; } } } .editing-color, .editing-bgcolor { .boxInner { padding: 5px; width: 100px; float: left; overflow: hidden; } .color-block { width: 25px; height: 25px; margin: 0; float: left; cursor: pointer; &.bordered { border: 1px solid #ccc; width: 23px; height: 23px; } &:hover { opacity: 0.6; } } } .editor-hint { position: absolute; // top: 100px; // left: 100px; z-index: 50; display: none; // transform: translateY(-30px); // opacity: 0; // background-color: #009cff; color: #fff; font-size: 0; padding: 0; bottom: 10px; right: 12px; .box-shadow(0 1px 5px rgba(0, 0, 0, 0.2)); div { font-size: 14px; font-weight: 300; display: inline-block; } & > div.settings { display: none; background-color: #009cff; padding: 0 5px; & > div { padding: 7px 10px; border-right: 1px solid #0065A6; } & > div:last-child { border-right: none; } } div.name { background-color: #009cff; padding: 7px 15px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; .border-radius(5px); } & > div:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } // &::before { // content: ''; // position: absolute; // bottom: -5px; // margin: 0 auto; // left: 0; // right: 0; // width: 0; // height: 0; // line-height: 0; // border: 5px dashed #009cff; // border-top-style: solid; // border-bottom: none; // border-left-color: transparent; // border-right-color: transparent; // } &.active { // opacity: 1; } } #editor-loader { display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: #2c9ecc; opacity: 0.9; // background-image: radial-gradient(center bottom, ellipse cover, #fff, #2c9ecc); // background-image: -o-radial-gradient(center bottom, ellipse cover, #fff, #2c9ecc); // background-image: -ms-radial-gradient(center bottom, ellipse cover, #fff, #2c9ecc); // background-image: -moz-radial-gradient(center bottom, ellipse cover, #fff, #2c9ecc); // background-image: -webkit-radial-gradient(center bottom, ellipse cover, #fff, #2c9ecc); // background-image: radial-gradient(50% 50%, circle cover, #2c9ecc, #fff); // background-image: -o-radial-gradient(50% 50%, circle cover, #2c9ecc, #fff); // background-image: -ms-radial-gradient(50% 50%, circle cover, #2c9ecc, #fff); // background-image: -moz-radial-gradient(50% 50%, circle cover, #2c9ecc, #fff); // background-image: -webkit-radial-gradient(50% 50%, circle cover, #2c9ecc 28%, #6DCCF2); // background-image: radial-gradient(center center, circle cover, #2c9ecc, #fff); z-index: 9999; color: #fff; text-align: center; .logo { position: absolute; display: block; left: 0; right: 0; margin: 0 auto; opacity: 0.5; top: 20px; width: 150px; img { width: 100%; } } .content { width: 700px; display: inline-block; margin: auto; vertical-align: middle; height: 100%; } .content:after { content: ""; display: inline-block; vertical-align: middle; /* Align inline level elements vertically */ height: 100%; } .text, .loader { display: inline-block; width: 99%; letter-spacing: 1px; font-style: italic; } &.big { .content { width: 900px; } } } #editor-sub { position: fixed; height: 282px; right: 0; left: 0; bottom: 0; background-color: #efefef; z-index: 2000; color: #666; opacity: 1; .box-shadow(0 0 15px rgba(0, 0, 0, 0.5)); .row { font-size: 14px; } &.horizontal { height: auto; width: 250px; top: 0; right: auto; } } #editor-sub > .tabs { left: 0; top: 0; bottom: 0; width: 200px; background-color: #ddd; } #editor-sub > .grid.content { float: left; } #editor-sub { & .slider-block { width: 250px; display: inline-block; & > h6.header { margin-bottom: 5px; } & > .slider { margin-top: 3px; float: left; width: 200px; min-height: 30px; } & > .value { float: left; margin-left: 10px; font-size: 18px; } } & .effect-block { float: left; width: 46px; height: 46px; border: 1px solid transparent; margin: 10px 10px 0 0; line-height: 46px; text-align: center; font-size: 16px; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; &:hover { outline: 2px solid #009cff; outline-offset: -2px; cursor: pointer; } &.inline { float: none; } } } #editor-sub.horizontal { // border-right: 5px solid #009cff; .grid > .row { min-width: none; width: auto; max-width: none; & > p { line-height: 1.6; } } & > .title { text-transform: uppercase; padding: 15px 15px 5px 15px; font-size: 16px; } & > .header { // text-transform: uppercase; padding: 0; color: #999; // font-size: 16px; } & .property-name { color: #333; font-weight: 300; font-size: 14px; margin-top: 15px; margin-bottom: 5px; } #style-content { overflow: scroll; } #style-menu { // border-left: 5px solid #009cff; position: absolute; right: -45px; width: 45px; .border-radius(0 5px 5px 0); .box-shadow(3px 0 5px rgba(0, 0, 0, 0.5)); overflow: hidden; top: 40px; .button { display: block; margin-bottom: 0; background-color: #fff; border: none; color: #999; height: 50px; padding: 0; .border-radius(0); .box-shadow(none); i { font-size: 20px; vertical-align: middle; display: inline-block; margin-right: 3px; } img { vertical-align: middle; display: inline-block; height: auto; width: 21px; margin-right: 3px; } &::before { display: inline-block; vertical-align: middle; content: ' '; height: 50px; } &.active, &:hover { color: #666; background-color: #efefef; } } } & > #style-content > div > .list, & > #style-tabs > .list { .box-sizing(border-box); padding: 20px 15px; width: 100%; float: left; text-align: left; font-size: 18px; font-weight: 300; background-color: #E5E5E5; border-bottom: 1px solid #D8D8D8; cursor: pointer; &:hover { background-color: #D8D8D8; border-bottom: 1px solid #dfdfdf; } &.active { background-color: transparent; // padding: 20px 15px 5px 15px; border-bottom: none; &:hover { cursor: transparent; background-color: transparent; } } } & > #style-content .grid { display: none; &.active { display: block; // border-bottom: 1px solid #D8D8D8; } .clear { width: 100%; height: 20px; } } & .slider-block { width: 215px; overflow: hidden; margin: 0; & > h6.header { margin-bottom: 2px; font-size: 14px; } & > .icon { float: left; width: 25px; margin-top: 2px; img { width: 100%; height: auto; } } & > .slider { margin-left: 10px; margin-top: 9px; width: 140px; min-height: auto; } & > .value.input { margin-left: 5px; font-size: 12px; width: 60px; input { width: 35px; // display: inline-block; // vertical-align: middle; padding: 5px; margin: 0 3px 0 0; font-size: 12px; } } &.icon { & > .slider { width: 110px; margin-left: 15px; } } } & > .actions { // margin-top: 5px; margin-bottom: 5px; background-color: #dfdfdf; // position: absolute; // bottom: 0; } .choose-block { position: relative; float: left; width: 91px; height: 70px; background-color: #dfdfdf; border: 2px solid transparent; margin: 0 10px 10px 0; img { width: 100%; height: auto; } &:hover { cursor: pointer; border-color: #ccc; } &.active, &:hover.active { border-color: #009cff; } &.shadow { position: relative; &::after { bottom: 11px; right: 0; } &::before { left: 0; bottom: 11px; } } } } #editor-sub > .actions { width: 100%; display: block; background-color: #D8D8D8; overflow: hidden; & > .button { .border-radius(0); font-size: 14px; padding: 15px 25px; &.grey { background-color: transparent; &:hover { background-color: #ccc; } } } } body.editor #witgets { width: 100%; position: fixed; bottom: 20px; text-align: center; .z-index('witget'); } body.editor #witgets > .witget-block, #move-block { width: 55px; height: 55px; display: inline-block; cursor: move; background-color: #5C6166; margin: 0 5px; position: relative; vertical-align: middle; text-align: center; .border-radius(5px); .box-shadow(0 0 4px rgba(0, 0, 0, 0.4)); .z-index('witget'); .transition(background-color 0.2s ease); img { width: 25px; margin: 15px 10px; } &.dragging { position: absolute; display: block; } &:hover { background-color: #4C4C4C; .box-shadow(0 0 5px rgba(0, 0, 0, 0.8)); } } #witgets > .save { vertical-align: middle; display: inline-block; margin: 0 0 0 20px; opacity: 0; width: 0; overflow: hidden; .button { width: 235px; .box-shadow(0 1px 15px rgba(0, 0, 0, 0.3)); } } #witgets > .question { position: absolute; bottom: 0px; right: 20px; display: none; .block { background-color: #5C6166; color: #fff; height: 55px; width: 55px; font-size: 28px; .box-shadow(0 0 4px rgba(0, 0, 0, 0.4)); .z-index('witget'); .transition(background-color 0.2s ease); .border-radius(100%); i { margin-top: 15px; } } & > .all { position: absolute; width: 55px; height: 200px; top: -200px; .block { margin-bottom: 20px; } .name { text-align: left; font-weight: 300; font-size: 14px; // width: 200px; left: auto; position: absolute; margin-top: 5px; right: 65px; background-color: #5C6166; .border-radius(5px); padding: 5px 8px; } // display: none; } } #move-block { display: none; .z-index('witget'); } #editor-wrapper { display: block; padding: 0 0 200px 0; } #panel { display: block; margin: 15px 20px 0; & > .logo { float: left; margin-top: 4px; width: 110px; text-align: right; img { width: 100px; height: auto; display: inline-block; } } & > .name { margin: -5px 20px 0; float: left; .domain { margin-top: 2px; } // margin-top: -10px; } & > .autosave-block { .border-radius(5px); display: none; float: right; margin-top: -1px; // background-color: #dfdfdf; padding: 4px 10px 0; margin-right: 15px; font-size: 12px; height: 30px; position: relative; min-width: 25px; &.loading { background-color: transparent; } &.loading:after { content: ''; position: absolute; top: 7px; right: 7px; display: block; width: 25px; height: 25px; background: url('/view/images/icon/loader.black.gif') no-repeat; } } } body.editor #editor { .box-sizing(border-box); margin: 10px 20px 20px; display: block; background-color: #fff; position: relative; .transition(all 0.2s ease); &::before { content: ''; height: 25px; background-color: #ccc; width: 100%; display: block; .border-radius(5px 5px 0 0); } &::after { content: ''; position: absolute; top: 6px; left: 10px; width: 50px; height: 12px; background: url('/view/images/editor/browser.circles.png') no-repeat 0% 0%; } } .svg_round_bottom { z-index: 0; } #editor > .s-grid { margin: 0; padding: 0; width: 100%; display: block; text-align: center; background-color: #f9f9f9; position: relative; // letter-spacing: 0.0625em; &:hover { & > .overlay { opacity: 1; display: block; } } } #editor > .s-grid.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } #editor > .s-grid > .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; color: #fff; opacity: 0; display: block; .transition(opacity 0.2s ease); & > .content { position: absolute; top: 50%; left: 0; right: 0; margin: -65px auto 0 auto; } } #editor > .s-structure { text-align: center; position: relative; vertical-align: middle; padding: 20px 20px 20px 20px; border-bottom: 1px solid #efefef; .header { line-height: 1.6; } & > .s-holder { top: 10px !important; bottom: 10px !important; left: 20px !important; right: 20px !important; border: 10px solid #009cff; background-color: transparent !important; } & > .block { display: block; height: 300px; // background: #efefef; position: relative; & > .content { display: inline-block; width: 600px; margin: 70px; } } } #editor > .s-grid > .s-junction { position: absolute; left: 0; right: 0; z-index: 2; &.bottom { bottom: -100px; } &.top { top: -100px; } &.center { left: auto; right: auto; } } #editor > .s-grid > .s-grid-overlay { position: relative; width: 100%; z-index: 1; } #editor > .s-grid > .s-grid-background { position: absolute; width: 100%; height: 100%; z-index: 0; } #editor > .s-grid > .s-grid-overlay > .s-grid-wrapper { // padding: 80px 0; & > .s-holder { width: 1140px; height: @holderSize; left: 0 !important; right: 0 !important; margin: -@holderSize/2 auto 0 auto; background-color: #D95C5C; } & > .s-holder.append { top: 10px !important; bottom: 10px !important; left: 20px !important; right: 20px !important; border: 10px solid #009cff; background-color: transparent !important; height: auto; width: auto; margin: 0 auto; } } #editor > .s-grid.full-width> .s-grid-overlay > .s-grid-wrapper { // padding: 80px 0; & > .s-holder { width: 100%; } } // #editor > .s-grid.equal-height { // // } /** * OVERLAY * used for background video, editing bg image and slider effects */ .s-overlay { left: 0; top: 0; right: 0; bottom: 0; position: absolute; background-color: rgba(0, 0, 0, 0.5); .z-index('grid_overlay'); } // TABS #editor > .s-grid > .s-grid-overlay > .s-tabs { // width: 1170px; text-align: center; display: inline-block; overflow: hidden; .tab { vertical-align: top; display: inline-block; // font-size: 14px; cursor: pointer; .transition(all 0.2s ease); } &.bottom { margin: 40px auto 0 auto; } } // ARROWS SIDES #editor > .s-grid > .s-grid-overlay > .s-arrow { position: absolute; top: 0; bottom: 0; z-index: 0; vertical-align: middle; &.left { left: -2px; & > .arrow { .border-radius(0 5px 5px 0); } } &.right { right: 0; & > .arrow { .border-radius(5px 0 0 5px); } } & > .clear { display: inline-block; height: 100%; width: 1px; vertical-align: middle; } & > .arrow { display: inline-block; background-color: rgba(0, 0, 0, 0); vertical-align: middle; padding: 15px; opacity: 1; // 0.2 cursor: pointer; .transition(opacity 0.2s ease); img { height: 60px; width: auto; } &:hover { opacity: 1; } } } // ARROWS SIDE #editor > .s-grid > .s-grid-overlay > .s-arrows { width: 1170px; text-align: center; margin: 40px auto 0 auto; & > .arrow { display: inline-block; background-color: rgba(0, 0, 0, 0); vertical-align: middle; padding: 15px 20px; opacity: 0.4; // 0.2 cursor: pointer; .transition(opacity 0.2s ease); img { height: 30px; width: auto; } &:hover { opacity: 1; } } } // DOTS #editor > .s-grid > .s-grid-overlay > .s-dots { width: 1170px; text-align: center; margin: 40px auto 0 auto; & > div { height: 10px; width: 10px; cursor: pointer; display: inline-block; } } #editor .s-move-holder { background-color: red; } #editor .s-holder { position: absolute; background-color: #009cff; .border-radius(5px); .z-index('holder_animated'); & > .name { display: none; font-size: 8px; background-color: #009cff; color: #fff; padding: 2px 10px; margin-top: -9px; width: auto; float: left; text-transform: uppercase; .border-radius(2px); } } #editor .s-move-holder { border: 2px dashed rgba(0, 0, 0, 0.2); text-align: center; padding: 100px 0; margin: 0 40px; } #editor > .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-move-holder { margin: 0 100px; } #editor > .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row { // width: 970px; max-width: 1140px; // 1160px; // for col animation width: 100%; margin: 0 auto; padding: 0; position: relative; text-align: center; white-space: nowrap; word-spacing: -1; // display: table; & > .s-holder { width: @holderSize; height: 100%; margin-left: -@holderSize/2; background-color: #D95C5C; } // .transition(height 0.20s ease); } #editor > .s-grid.full-width > .s-grid-overlay > .s-grid-wrapper > .s-row { width: 100%; max-width: none; } #editor > .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row > .s-col { width: 0px; display: inline-block; margin: 0; position: relative; vertical-align: top; // display: table-cell; &.size-1, &.size-1 { width: 4.16%; } &.size-2, &.size-2 { width: 8.33%; } &.size-3, &.size-3 { width: 12.5%; } &.size-4, &.size-4 { width: 16.3%; } &.size-5, &.size-5 { width: 20.83%; } &.size-6, &.size-6 { width: 25%; } &.size-7, &.size-7 { width: 29.16%; } &.size-8, &.size-8 { width: 33.1%; } &.size-9, &.size-9 { width: 37.5%; } &.size-10, &.size-10 { width: 41.66%; } &.size-11, &.size-11 { width: 45.83%; } &.size-12, &.size-12 { width: 50%; } &.size-13, &.size-13 { width: 54.16%; } &.size-14, &.size-14 { width: 58.33%; } &.size-15, &.size-15 { width: 62.5%; } &.size-16, &.size-16 { width: 66.66%; } &.size-17, &.size-17 { width: 70.83%; } &.size-18, &.size-18 { width: 75%; } &.size-19, &.size-19 { width: 79.16%; } &.size-20, &.size-20 { width: 83.33%; } &.size-21, &.size-21 { width: 87.5%; } &.size-22, &.size-22 { width: 91.66%; } &.size-23, &.size-23 { width: 95.83%; } &.size-24, &.size-24 { width: 100%; } & > .settings { .buttons { a { .box-shadow(none); padding: 9px 13px !important; i { font-size: 16px !important; } } } } // .col-width(1140px); // .transition(height 0.20s ease); } #editor > .s-grid.vertical-align-middle > .s-grid-overlay > .s-grid-wrapper > .s-row > .s-col { vertical-align: middle; } #editor > .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row > .s-col > .s-col-wrapper { // width: calc(100% - 5px); // height: 100%; // display: inline-block; // .box-sizing(border-box); & > .s-holder { width: 100%; height: @holderSize; left: 0 !important; right: 0 !important; margin: -@holderSize/2 auto 0 auto; } } #editor > .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row > .s-col > .s-col-wrapper > .s-row { display: block; text-align: center; white-space: nowrap; word-spacing: -1; margin: 0; padding: 0; position: relative; & > .s-holder { width: @holderSize; height: 100%; margin-left: -@holderSize/2; } } #editor > .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row > .s-col > .s-col-wrapper > .s-row > .s-col { display: inline-block; margin: 0; padding: 0; position: relative; vertical-align: top; &.size-1, &.size-1 { width: 4.16%; } &.size-2, &.size-2 { width: 8.33%; } &.size-3, &.size-3 { width: 12.5%; } &.size-4, &.size-4 { width: 16.3%; } &.size-5, &.size-5 { width: 20.83%; } &.size-6, &.size-6 { width: 25%; } &.size-7, &.size-7 { width: 29.16%; } &.size-8, &.size-8 { width: 33.1%; } &.size-9, &.size-9 { width: 37.5%; } &.size-10, &.size-10 { width: 41.66%; } &.size-11, &.size-11 { width: 45.83%; } &.size-12, &.size-12 { width: 50%; } &.size-13, &.size-13 { width: 54.16%; } &.size-14, &.size-14 { width: 58.33%; } &.size-15, &.size-15 { width: 62.5%; } &.size-16, &.size-16 { width: 66.66%; } &.size-17, &.size-17 { width: 70.83%; } &.size-18, &.size-18 { width: 75%; } &.size-19, &.size-19 { width: 79.16%; } &.size-20, &.size-20 { width: 83.33%; } &.size-21, &.size-21 { width: 87.5%; } &.size-22, &.size-22 { width: 91.66%; } &.size-23, &.size-23 { width: 95.83%; } &.size-24, &.size-24 { width: 100%; } } /** * START MOBILE ADAPTIVE DESIGN */ #editor.mobile { min-width: 480px; width: 480px; margin: 20px auto !important; } #editor.tablet { min-width: 980px; width: 980px; margin: 20px auto !important; } #editor.desktop { min-width: 1180px; width: auto; } .desktop-version { .device-desktop { display: block; } .mobile-hide { display: auto; } .mobile-show { display: none; } } .tablet-version { .device-tablet { display: block; } .s-grid { background-attachment: scroll !important; } .mobile-show { display: auto; } .mobile-hide { display: none; } .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row { display: block; width: auto; padding: 0 20px; } .s-element > .witget-menu.fixed { text-align: right; .button { .border-radius(100%) !important; background-color: #000 !important; color: #fff !important; font-size: 24px !important; padding: 14px 16px !important; z-index: 100 !important; } } .s-element > .witget-text { -ms-word-break: keep-all; word-break: keep-all; word-wrap: normal; } .s-element > .witget-image { text-align: center; & > .image { width: auto !important; height: auto !important; max-width: 90% !important; img { width: auto !important; max-width: 100% !important; max-height: 100% !important; height: auto !important; margin: 0 auto !important; } } } } .mobile-version { .device-mobile { display: block; } .mobile-show { display: auto; } .mobile-hide { display: none; } font-size: 16px; .s-grid { background-attachment: scroll !important; overflow-x: hidden; } // h1 { font-size: 2em !important;; } // h2 { font-size: 1.5em !important;; } // h3 { font-size: 1.17em !important;; } // h5 { font-size: .83em !important;; } // h6 { font-size: .75em !important;; } .s-cart { width: 60px; height: 60px; img { width: 40px; margin-top: 18px; } .count { top: -7px; right: 0; } } .modal.cart { .item { position: relative; & > .image { vertical-align: top; } & > .name { width: 200px; margin-bottom: 20px; } & > .remove { position: absolute; right: 0; margin-top: 2px; } & > .count { text-align: left; } & > .price { text-align: right; float: right; margin-right: 40px; } } & > .action { padding: 0 40px 40px !important; & > .price { display: block; overflow: hidden; float: none; padding-top: 5px; margin-bottom: 20px; & > .text { float: left; } & > #s-cart-total { float: right; } } & > .button { display: block; float: none; width: 100%; } } } .s-grid > .s-grid-overlay { padding: 20px 0; } .s-grid > .s-junction { display: none; } .s-grid > .s-grid-overlay > .s-dots { width: 100%; } .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row { display: block; padding: 0; } .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row > .s-col { width: auto; display: block; margin: 0; } .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row > .s-col > .s-col-wrapper { padding-left: 5px !important; padding-right: 5px !important; margin: 0 5px !important; } .s-element > .witget-text { text-align: center; -ms-word-break: keep-all; word-break: keep-all; word-wrap: normal; .wysiwyg-text-align-right { text-align: center; } .wysiwyg-text-align-left { text-align: center; } .wysiwyg-text-align-center { text-align: center; } & h1 { font-size: 36px; margin-bottom: 5px; } & h2 { font-size: 30px; margin-bottom: 5px; } & h3 { font-size: 24px; margin-bottom: 5px; } & h4 { font-size: 18px; margin-bottom: 5px; } & h5 { font-size: 18px; margin-bottom: 5px; } & h6 { font-size: 18px; font-weight: bold; margin-bottom: 5px; } } .s-element > .witget-form > .inputs { padding: 0 20px !important; } .s-element > .witget-form > .inputs > .input.fluid { display: block !important; width: auto !important; } .s-element > .witget-form > .action.left, .s-element > .witget-form > .action.center, .s-element > .witget-form > .action.right { text-align: center !important; padding: 0 20px !important; button { display: block; width: 100%; padding-left: 0 !important; padding-right: 0 !important; } } .s-element > .witget-form > .footer { text-align: center !important; } .s-element > .witget-image { text-align: center; & > .image { width: auto !important; max-width: 90% !important; img { width: auto !important; max-width: 100% !important; max-height: 100% !important; height: auto !important; margin: 0 auto !important; } } &.strech { } &:not(.strech) { & > .image { height: auto !important; } } } .s-element > .witget-menu.fixed { text-align: right; .button { .border-radius(100%) !important; background-color: #000 !important; color: #fff !important; font-size: 24px !important; padding: 14px 16px !important; z-index: 100 !important; } } // .s-grid > .s-grid-overlay > .s-grid-wrapper > .s-row > .s-col > .s-col-wrapper > .s-row > .s-col.size-24 { // .s-element > .witget-image > .image { // img { // max-width: 80% !important; // } // } // } // ДЛЯ КНОПКИ В СУБ КОЛОНКЕ НУЖНО УБИРАТЬ ИКОНКУ, ОТСТУПЫ И РАСТЯГИВАТЬ МАКСИМУМ 100% .s-element > .witget-button { display: block; float: none; & > .button { margin: 10px !important; text-align: center !important; display: block; } } .s-element > .witget-blank { max-height: 10px; } .s-element > .witget-slideshow > .content.one { & > .image { width: 100% !important; height: auto !important; padding-left: 0 !important; padding-right: 0 !important; & > img, & > canvas { width: 100% !important; height: auto !important; margin: 0 !important; } } &:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } } .s-element > .witget-hr > .hr { white-space: normal; } .s-element > .witget-product > .product.quantity-1, .s-element > .witget-product > .product.quantity-2, .s-element > .witget-product > .product.quantity-3, .s-element > .witget-product > .product.quantity-4 { min-width: 0 !important; } .s-element > .witget-product > .product.quantity-1 > .product-wrapper > .column, .s-element > .witget-product > .product.quantity-2 > .product-wrapper > .column, .s-element > .witget-product > .product.quantity-3 > .product-wrapper > .column, .s-element > .witget-product > .product.quantity-4 > .product-wrapper > .column, { width: 100% !important; max-width: 100%; text-align: center; & > .name, & > .description { margin: 0; text-align: center; } & > .name { margin-top: 15px; font-size: 36px; line-height: 1.3; } & > .description { font-size: 18px; } & > .price { display: block; text-align: center; font-size: 42px; margin: 10px 0; & > .amount { margin: 0 4px 0 0; font-size: 100%; display: inline-block; // vertical-align: middle; } & > .currency { font-size: 50%; display: inline-block; // vertical-align: middle; } &.product-sell-amount-block { &.hide { font-size: 26px; margin-bottom: 0; line-height: 0; & > .amount, & > .currency { line-height: 1.2; text-decoration: line-through; } } } &.product-sale-amount-block { display: none; &.show { line-height: 0; display: block; font-size: 32px; & > .amount, & > .currency { line-height: 1.3; } } } } & > .params { margin: 30px 0; text-align: center; & > .param-buttons, & > .param-color, & > .param-select { display: block; margin: 0 0 20px 0; } & > .param-select { .select { width: 60%; span { font-size: 22px; } } } } & > .actions { text-align: center; .quantity, .add-to-cart, .pay-one-click { margin-bottom: 10px; margin-right: 10px; } } // end of css } // & > .actions { // text-align: left; // .quantity { // margin-right: 10px; // } // .add-to-cart { // // margin-left: 10px; // } // .quantity, .add-to-cart, .pay-one-click { // // width: 100%; // // display: table-cell; // vertical-align: top; // display: inline-block; // & > span, i, input { // display: inline-block; // } // &.wide { // display: inline-block; // clear: both; // width: auto; // margin: 10px 0 0 0; // } // } // } // } .s-element > .witget-product, .s-element > .witget-product.style-1, .s-element > .witget-product.style-2, .s-element > .witget-product.style-3, .s-element > .witget-product.style-4, { overflow: hidden; font-size: 0; & > .product { .box-sizing(border-box); width: 100%; float: left; } & > .product > .product-wrapper { & > .column { display: block; width: 100%; text-align: center; } & > .column.images { width: 100%; } & > .column.content { width: 100%; & > .action { .button { max-width: 250px; width: 100%; display: inline-block; float: none; margin-bottom: 10px; } .buy-add-to-cart { margin-right: 0; } } } } } } #editor.desktop { .desktop-version; } #editor.mobile, #editor.tablet { .tablet-version; } #editor.mobile { .mobile-version; } .mobile-modal { #modal > .content { width: auto; } #modal > .content > .modal { width: 100%; position: absolute; margin: 0 auto; left: 0; right: 0; background-color: #efefef; z-index: 6001; border-radius: 0; } #modal > .content > .modal > .header { border-bottom: none; padding: 35px 20px 50px 20px; text-align: center; } #modal > .content > .modal > .editing-inputs.menu > .button { padding: 20px 0; font-size: 18px; } #modal > .content > .modal > .header > .close { position: relative; display: inline-block; width: 40px; float: none; margin-left: 50px; } #modal > .content > .modal > .header > .close > img { width: 50px; height: auto; } #modal > .content > .modal > .content { padding: 0 20px 50px; } #modal > .content > .modal > .action { text-align: center; padding: 0 0 40px 0; } } .s-editor.mobile { @media (min-width: 768px) and (max-width: 1024px) { .tablet-version; .mobile-modal; } @media (max-width: 760px) { .mobile-version; .mobile-modal; } } .s-editor { &#landing-preview { text-align: center; background-color: rgb(0, 0, 0); #landing-content { background-color: #fff; } } &#landing-preview.preview-device-desktop { #landing-content { margin-top: 65px; } } &#landing-preview.preview-device-mobile { .mobile-version; .mobile-modal; #landing-content { margin: 100px 0 20px 0; display: inline-block; width: 500px; overflow: hidden; .border-radius(5px); } .modal { width: 500px !important; margin-top: 95px !important; } } &#landing-preview.preview-device-tablet { // .tablet-version; #landing-content { margin: 100px 0 20px 0; width: 1180px; display: inline-block; overflow: hidden; .border-radius(5px); } } .preview-menu { text-align: center; // background-color: #fff !important; padding-top: 100px; padding-left: 400px; .witget-menu.fixed { text-align: center !important; } } } /** * END MOBILE SECTION */ .s-element { float: left; width: 100%; margin: 0; padding: 0; position: relative; // border: 1px solid #999 !important; .z-index('element'); .box-sizing(border-box); &.dragging { .box-shadow(none); max-width: 400px; position: absolute; // opacity: 0.6; } &.draggable { opacity: 0.2; } &.selected { outline: 2px solid #009cff; } outline: 2px solid rgba(255, 255, 255, 0); & > .settings { display: none; left: 0; right: 0; top: 0px; width: auto; position: absolute; .z-index('settings'); .size-small { display: none; } &.small { .size-small { display: inline-block; } .size-big { display: none; } } .buttons { overflow: hidden; background-color: #009cff; .border-radius(0 0 5px 5px); a { .box-shadow(none); padding: 9px 13px !important; i { font-size: 16px !important; } } } } } .absolute { position: absolute !important; .z-index('element_animated'); } #lines > div { position: absolute; // opacity: 0.2; // outline: 1px solid red; z-index: 999; } .s-element div { white-space: normal; word-spacing: normal; // font-weight: 300; // letter-spacing: 0.6px; } // .s-element > div { // .box-sizing(border-box); // } // BLANK WITGET .s-element > .blank { display: block; text-align: center; background-color: #333; color: #ccc; padding: 40px 0; margin: 10px; overflow: hidden; .border-radius(5px); .image { display: block; font-size: 38px; } .text { display: inline-block; padding: 10px 15px 0 15px; } } .s-element > .blank.green { background-color: #5BBD72; color: #fff; } .s-element > .blank.red { background-color: #D95C5C; color: #fff; } // WITGET IMAGE .s-element > .witget-image { margin: 0; display: block; &.center { text-align: center; } &.left { float: none; text-align: left; } &.right { float: none; text-align: right; } } .s-element > .witget-image > .image > .hover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); color: #fff; opacity: 0; z-index: 1; .transition(opacity 0.20s ease); & > .content { display: inline-block; vertical-align: middle; max-width: 90%; img { max-width: 60px; margin-bottom: 10px; } } &::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } } .s-element > .witget-image > .image { width: auto; max-width: 100%; display: inline-block; overflow: hidden; text-align: inherit; .box-sizing(border-box); & > img, & > canvas { height: auto; width: auto; max-width: 100%; display: inline-block; .box-sizing(border-box); } &:hover { & > .hover { opacity: 1; } } } .s-element > .witget-image.strech { overflow: hidden; & > .image { width: 960px; margin-left: 0 !important; margin-right: 0 !important; & > img, & > canvas { max-width: none; width: auto; height: 100%; // height: auto; margin: 0; } } &.center { & > .image { width: 960px; & > img, & > canvas { max-width: none; width: auto; height: 100%; // height: auto; margin: 0 -480px; } } } } // WITGET form .s-element > .witget-form { padding: 0; display: block; background-color: #fff; text-align: center; // overflow: hidden; .box-sizing(border-box); } // .s-element > .witget-form.vertical { // width: 100%; // max-width: 600px; // margin: 0 auto; // } // .s-element > .witget-form > .overlay { // overflow: hidden; // } .s-element > .witget-form > .wrapper { } .s-element > .witget-form > .header { font-weight: 300; font-size: 28px; line-height: 1.1; .editing-field; // background-color: #ccc; } .s-element > .witget-form > .inputs { display: block; // overflow: hidden; padding: 0 50px; & > .input { margin-bottom: 20px; // float: left; vertical-align: bottom; display: inline-block; &.fluid { float: none; } & > .upload { .box-shadow(none); border: 1px solid #dfdfdf; & > i { margin-right: 10px; padding: 0; } & > span.placeholder { padding: 0; } // .box-shadow(none); } & > input, textarea { border: 1px solid #dfdfdf; } & > label.text { text-align: left; font-size: 12px; line-height: 1.4; font-style: italic; margin-top: 5px; } & > input[type="checkbox"] + label, & > input[type="radio"] + label { color: #666; cursor: pointer; display: inline-block; font-size: 16px; font-weight: 300; margin-top: 3px; line-height: 1.6; } & > .action { & > button { width: 100%; vertical-align: bottom; margin: 1px !important; cursor: pointer; .transition(all 0.20s ease); } } } } .s-element > .witget-form > .footer { display: block; padding: 15px 50px; font-size: 14px; color: #999; text-align: center; float: none; .editing-field; } .s-element > .witget-form > .action { text-align: center; display: block; padding: 0 50px; float: none; & button { cursor: pointer; } } .s-element > .witget-form > .action.left, .s-element > .witget-form > .footer.left { text-align: left; } .s-element > .witget-form > .action.right, .s-element > .witget-form > .footer.right { text-align: right; } .s-element > .witget-form > .footer.wide { width: auto; } .s-element > .witget-form > .action.wide { padding: 0; & > button { width: 100%; display: block; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; .border-radius(0 0 5px 5px); } } .s-element > .witget-form > .action > button { .transition(all 0.2s ease); .editing-field; } // WITGET VIDEO .s-element > .witget-video { margin: 10px; display: block; position: relative; } .s-element > .witget-video > img, .s-element > .witget-video > iframe, { max-width: 100%; width: auto; } .s-element > .witget-video > .icon { padding: 30px 30px; background-color: #fff; color: #333; display: inline-block; cursor: pointer; .border-radius(100%); .transition(all 0.2s ease); & > i { font-size: 46px; margin-left: 10px; } &:hover { background-color: #efefef; } } // WITGET VIDEO .s-element > .witget-button { display: block; text-align: center; overflow: hidden; } .s-element > .witget-button > .button { display: inline-block; .box-shadow(none); border: none; i, span { display: inline-block; vertical-align: middle; } } .s-element > .witget-button.left { text-align: left; } .s-element > .witget-button.right { text-align: right; } .s-element > .witget-button.wide > .button { display: block; } // WITGET menu .s-element > .witget-menu { display: block; text-align: center; overflow: hidden; } .s-element > .witget-menu > .button { display: inline-block; .box-shadow(none); .box-sizing(border-box); border: none; i, span { display: inline-block; vertical-align: middle; } } .s-element > .witget-menu.left { text-align: left; } .s-element > .witget-menu.right { text-align: right; } .s-element > .witget-menu.wide > .button { display: block; } // WITGET socials .s-element > .witget-socials { margin: 0; display: block; text-align: center; position: relative; } .s-element > .witget-socials > .share { display: inline-block; cursor: pointer; .transition(background-color 0.2s ease); i { .transition(color 0.2s ease); &.fa-facebook { padding: 0 5px; } } } .s-element > .witget-socials > .comment { display: inline-block; max-width: 600px; width: 100%; & > img { width: auto; max-width: 100%; } } // WITGET timer .s-element > .witget-timer { margin: 10px; display: block; text-align: center; position: relative; } .s-element > .witget-timer > .part { display: inline-block; line-height: 1.1; & > .digit { font-size: 1em; } & > .text { font-size: 0.5em; } &.end { padding: 25px 30px; font-size: 22px; font-weight: 300; color: #666; } } // WITGET hr .s-element > .witget-hr { margin: 10px; display: block; text-align: center; line-height: 1.4; position: relative; } .s-element > .witget-hr > .hr { display: block; width: 100%; text-align: center; overflow: hidden; white-space: nowrap; font-weight: 300; } .s-element > .witget-hr > .hr > span { position: relative; display: inline-block; } .s-element > .witget-hr > .hr > span:before { right: 100%; margin-right: 15px; } .s-element > .witget-hr > .hr > span:after { left: 100%; margin-left: 15px; } .s-element > .witget-hr > .hr > span:before, .s-element > .witget-hr > .hr > span:after { content: ""; position: absolute; top: 50%; height: 1px; width: 9999px; background-color: transparent; border-bottom: 0px; border-right: 0px; border-left: 0px; } .s-element > .witget-hr > .hr.empty { border-top: 1px solid #dfdfdf; &.double { border-top: 6px double #dfdfdf; } } // WITGET slideshow .s-element > .witget-slideshow { margin: 0; display: block; text-align: center; } .s-element > :hover.witget-slideshow { & > .content > .arrow-block > .arrow { opacity: 0.7; } } .s-element > .witget-slideshow > .content { display: inline-block; max-width: 100%; width: auto; position: relative; text-align: center; } .s-element > .witget-slideshow > .content > .arrow-block { position: absolute; top: 0; bottom: 0; z-index: 100; vertical-align: middle; &.left { left: 15px; & > .arrow { .border-radius(5px); } } &.right { right: 15px; & > .arrow { .border-radius(5px); } } & > .clear { display: inline-block; height: 100%; width: 1px; vertical-align: middle; } & > .arrow { display: inline-block; background-color: rgba(0, 0, 0, 1); vertical-align: middle; padding: 25px; opacity: 0; cursor: pointer; .transition(opacity 0.2s ease); img { height: 50px; width: auto; } &:hover { opacity: 1; } } } .s-element > .witget-slideshow > .content > .image { .box-sizing(border-box); display: inline-block; vertical-align: middle; padding: 0; width: auto; max-width: 100%; overflow: hidden; & > img { height: auto; max-height: 100%; width: auto; vertical-align: top; } } .s-element > .witget-slideshow > .content.one { overflow: hidden; & > .image { width: 2000px; height: 100%; & > img, & > canvas { max-width: none; width: auto; height: 100%; // height: auto; margin: 0 -1000px; } } &:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } } .s-element > .witget-slideshow > .content.two > .image { width: 50%; float: left; padding: 5px; } .s-element > .witget-slideshow > .content.three > .image { width: 33%; float: left; padding: 5px; } .s-element > .witget-slideshow > .content.four > .image { width: 25%; float: left; padding: 5px; } .s-element > .witget-slideshow > .thumbs { display: block; text-align: center; padding: 0; overflow: hidden; white-space: nowrap; margin-top: 10px; & > .image { width: auto; width: 55px; height: 55px; display: inline-block; border: 3px solid #fff; opacity: 0.6; & > img { width: 100%; } } & > .image.active { opacity: 1; border: 3px solid #333; } & > :hover.image { opacity: 1; cursor: pointer; } } .s-element > .witget-slideshow > .dots { display: block; text-align: center; margin-top: 10px; cursor: pointer; & > div { height: 10px; width: 10px; display: inline-block; } } .s-element > .witget-blank { border: 2px dashed rgba(0, 0, 0, 0.4); } // WITGET text .s-element.selected { & > .witget-text { .editing-field.holders; } } .s-element > .witget-text { display: block; text-align: left; line-height: 1.6; word-wrap: break-word; .editing-field; } // WITGET PRODUCTS; .s-element > .witget-product { margin: 0; display: block; text-align: center; position: relative; overflow: hidden; } .s-element > .witget-product > .product { .box-sizing(border-box); font-size: 0; display: inline-block; vertical-align: top; &.quantity-1 { width: 100%; min-width: 960px; } &.quantity-2 { width: 50%; min-width: 540px; } &.quantity-3 { width: 33.33%; min-width: 330px; } &.quantity-4 { width: 25%; min-width: 270px; } } .s-element > .witget-product > .product > .product-wrapper { // margin: 5px; } .s-element > .witget-product > .product > .product-wrapper > .column { .box-sizing(border-box); display: inline-block; width: 100%; margin: 0; padding: 0; vertical-align: middle; font-size: 14px; &.size-1 { width: 25%; } &.size-2 { width: 50%; } &.size-3 { width: 75%; } &.size-4 { width: 100%; } } .s-element > .witget-product > .product > .product-wrapper > .column { line-height: 1.6; font-weight: 300; & > .name { font-size: 20px; } & > .article { font-size: 12px; color: #999; } & > .description { font-size: 12px; color: #999; } & > .image { margin: 20px 0; overflow: hidden; text-align: center; cursor: pointer; .image-wrapper { width: 100%; height: 100%; display: inline-block; overflow: hidden; .product-zoom-tips { text-align: center; left: 0; right: 0; position: absolute; bottom: 20px; pointer-events: none; & > .content { text-transform: uppercase !important; font-size: 8px; padding: 3px 10px; display: inline-block; background-color: rgba(0, 0, 0, 0.6); color: #fff; .border-radius(15px); * { display: inline-block; vertical-align: middle; } i { margin-right: 3px; } } } img { max-width: none; width: auto; height: 100%; margin: 0 -480px; display: inline-block; } } } & > .price { font-size: 32px; margin-bottom: 5px; & > .amount { margin: 0 4px 0 0; font-size: 100%; display: inline-block; // vertical-align: middle; } & > .currency { font-size: 50%; display: inline-block; // vertical-align: middle; } &.product-sell-amount-block { &.hide { font-size: 18px; margin-bottom: 0; line-height: 0; & > .amount, & > .currency { line-height: 1.2; text-decoration: line-through; } } } &.product-sale-amount-block { display: none; &.show { line-height: 0; display: block; font-size: 24px; & > .amount, & > .currency { line-height: 1.3; } } } } & > .params { & > .param-buttons, & > .param-color, & > .param-select { width: 100%; margin-bottom: 10px; & > label.header { text-align: left; display: block; margin: 3px; font-size: 14px; font-weight: 300; } } & > .param-select { & > .select { display: inline-block; // border: 1px solid #dfdfdf; padding: 8px 35px 8px 15px; font-size: 14px; margin: 0; position: relative; cursor: pointer; .transition(all 0.2s ease); select { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; width: 100%; height: 100%; background-color: #fff; cursor: pointer; .appearance(none); } span { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; display: inline-block; vertical-align: middle; } i { right: 15px; top: 38%; position: absolute; font-size: 80%; vertical-align: middle; } &:hover { background-color: #dfdfdf; } } } & > .param-buttons { font-weight: 300; & > .param { display: inline-block; padding: 10px 15px; margin: 0 1px; // font-style: 16px; .transition(all 0.2s ease); &:hover { opacity: 1; cursor: pointer; } &.active { background-color: #efefef; opacity: 1; font-weight: 700; } } } & > .param-color { & > .param { display: inline-block; padding: 7px; margin: 10px 10px; background-color: #ccc; vertical-align: middle; .border-radius(100%); .transition(all 0.2s ease); &:hover { cursor: pointer; padding: 10px; } &.active { padding: 10px; // .box-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); } } } } & > .actions { margin-top: 20px; // background-color: #efefef; // border: 1px solid #ccc; // display: table; // table-layout: auto; font-size: 0; text-align: center; .quantity, .add-to-cart, .pay-one-click { // width: 100%; // display: table-cell; vertical-align: top; display: inline-block; & > span, i, input { display: inline-block; } &.wide { display: inline-block; clear: both; width: auto; margin: 10px 0 0; } &.hide { display: none !important; } } .quantity { position: relative; margin: 0 5px; input { background-color: #fff; width: 35px; // style border: none; // 1px solid #efefef; padding: 24px 35px 8px 10px; font-size: 16px; .border-radius(5px); } label.header { color: #ccc; display: inline-block; font-size: 12px; position: absolute; z-index: 2; top: 4px; left: 8px; } .arrows { width: 13px; position: absolute; top: 9px; right: 15px; & > .next, & > .prev { padding: 6px 0; img { width: 100%; height: auto; opacity: 0.6; } &:hover { cursor: pointer; img { opacity: 1; } } } } } .add-to-cart, .pay-one-click { // background-color: #fff; border: none; padding: 10px 15px; font-size: 20px; margin: 0 5px; .transition(all 0.2s ease); .border-radius(5px); span { font-size: 80%; margin: 0 10px; } &.small { i { margin: 6px 3px; } span { display: none; } } &:hover { cursor: pointer; background-color: #efefef; } } // .quantity { // display: none !important; // } // .pay-one-click { // margin-left: 5px; // i { display: none; } // font-size: 14px; // clear: both; // } } } .s-element > .witget-product > .product.quantity-2 > .product-wrapper > .column { & > .name, & > .description, & > .article { text-align: left; margin-left: 30px; } & > .price { text-align: right; margin-right: 30px; } & > .params { & > .param-buttons, & > .param-color, & > .param-select { width: auto; display: inline-block; margin: 5px 5px 10px; } } & > .actions { .quantity, .add-to-cart, .pay-one-click { // width: 100%; // display: table-cell; vertical-align: top; display: inline-block; & > span, i, input { display: inline-block; } &.wide { display: inline-block; clear: inherit; width: auto; margin: 0; } } } } .s-element > .witget-product > .product.quantity-1 > .product-wrapper > .column { text-align: left; & > .name, & > .description { text-align: left; } & > .price { margin: 20px 0 0 0; &.product-sell-amount-block { &.hide { margin-top: 20px; } } &.product-sale-amount-block { &.show { margin-top: 5px; } } } & > .params { margin: 30px 0; text-align: left; & > .param-buttons, & > .param-color, & > .param-select { width: auto; display: inline-block; margin: 0 50px 20px 0; } } & > .actions { text-align: left; .quantity { margin-right: 10px; } .add-to-cart { // margin-left: 10px; } .quantity, .add-to-cart, .pay-one-click { // width: 100%; // display: table-cell; vertical-align: top; display: inline-block; & > span, i, input { display: inline-block; } &.wide { display: inline-block; clear: both; width: auto; margin: 10px 0 0 0; } } } } .s-element > .witget-product > .product.quantity-3 > .product-wrapper > .column { & > .params { & > .param-buttons, & > .param-color, & > .param-select { & > label.header { text-align: center; } } } } .s-element > .witget-product > .product.quantity-4 > .product-wrapper > .column { & > .name { font-size: 16px; margin: 0 20px; } & > .description { font-size: 12px; color: #999; } & > .image { margin: 20px 0; } & > .price { font-size: 25px; } & > .params { & > .param-buttons, & > .param-color, & > .param-select { & > label.header { text-align: center; } } } & > .actions { margin-top: 0; } } /* OLD OLD OLD OLD */ .s-element > .witget-product.old > .product > .product-wrapper > .column { .box-sizing(border-box); width: 50%; display: inline-block; vertical-align: middle; font-size: 14px; padding: 20px; } .s-element > .witget-product.old.style-1 > .product { width: 100%; } .s-element > .witget-product.old > .product > .product-wrapper > .column.images { margin: 0; text-align: center; & > .image { display: block; overflow: hidden; .box-sizing(border-box); img { width: auto; max-width: 100%; height: auto; } } } // .s-element > .witget-product.old > .product > .product-wrapper > .column.content { text-align: left; & > .name { margin-bottom: 20px; } & > .description { margin-bottom: 20px; } & > .price { margin-bottom: 20px; .sale { display: none; margin-top: 15px; text-decoration: line-through; } } & > .params { margin-bottom: 5px; & > .input { margin-bottom: 15px; & > .button { max-width: 250px; // border: 2px solid #ccc; // .border-radius(0); & > span { text-transform: uppercase; // margin-top: 2px; } & > i { margin-top: -2px; color: #ccc; } } } } & > .action { .button { font-weight: 300; // padding: 15px 20px; span { display: inline-block; font-size: 16px; vertical-align: middle; } i { display: inline-block; vertical-align: middle; font-size: 22px; margin-right: 10px; } } .buy-add-to-cart { margin-right: 10px; } } } .s-element > .witget-product.old.style-2 { overflow: hidden; font-size: 0; & > .product { .box-sizing(border-box); width: 50%; float: left; } & > .product > .product-wrapper { & > .column.images { width: 40%; } & > .column.content { width: 60%; & > .action { .button { max-width: 250px; display: block; margin-bottom: 10px; } .buy-add-to-cart { margin-right: 0; } } } } } .s-element > .witget-product.old.style-3 { overflow: hidden; font-size: 0; & > .product { .box-sizing(border-box); width: 50%; float: left; } & > .product > .product-wrapper { & > .column { display: block; width: 100%; text-align: center; } & > .column.content { & > .params { & > .input { & > .button { max-width: 300px; } } } & > .action { .button { max-width: 300px; width: 100%; display: inline-block; float: none; clear: both; margin-bottom: 10px; } .buy-add-to-cart { margin-right: 0; } } } } } .s-element > .witget-product.old.style-4 { overflow: hidden; font-size: 0; & > .product { .box-sizing(border-box); width: 33%; float: left; } & > .product > .product-wrapper { & > .column { display: block; width: 100%; text-align: center; } & > .column.content { & > .action { .button { max-width: 250px; width: 100%; display: inline-block; float: none; margin-bottom: 10px; } .buy-add-to-cart { margin-right: 0; } } } } } // SHADOWS // SECTIONS .shadow-section-1 { overflow:hidden; } .shadow-section-1:after { content: ""; position:absolute; z-index: 1; width: 40%; top: -15px; height: 10px; right: 10%; .box-shadow(0 0 20px rgba(0,0,0,0.6)); .transform(rotate(-1deg)); } .shadow-section-1:before { content: ""; position:absolute; z-index: 1; width: 40%; top: -15px; height: 10px; left: 10%; .box-shadow(0 0 20px rgba(0,0,0,0.6)); .transform(rotate(1deg)); } .shadow-section-2 { overflow:hidden; } .shadow-section-2:after { content: ""; position:absolute; z-index: 1; width: 40%; bottom: -15px; height: 10px; left: 10%; .box-shadow(0 0 20px rgba(0,0,0,0.6)); .transform(rotate(-1deg)); } .shadow-section-2:before { content: ""; position:absolute; z-index: 1; width: 40%; bottom: -15px; height: 10px; right: 10%; .box-shadow(0 0 20px rgba(0,0,0,0.6)); .transform(rotate(1deg)); } /*================================================== * Effect 1 * ===============================================*/ .shadow-form-1 { -webkit-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.5); } /*================================================== * Effect 2 * ===============================================*/ .shadow-form-2 { position: relative; } .shadow-form-2:before, .shadow-form-2:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .shadow-form-2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } /*================================================== * Effect 3 * ===============================================*/ .shadow-form-3 { position: relative; } .shadow-form-3:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } /*================================================== * Effect 4 * ===============================================*/ .shadow-form-4 { position: relative; } .shadow-form-4:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } /*================================================== * Effect 5 * ===============================================*/ .shadow-form-5 { position: relative; } .shadow-form-5:before, .shadow-form-5:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width:300px; background: rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 35px 20px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 35px 20px rgba(0, 0, 0, 0.5); box-shadow: 0 35px 20px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } .shadow-form-5:after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; } /*================================================== * Effect 6 * ===============================================*/ .shadow-form-6 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .shadow-form-6:before, .shadow-form-6:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .shadow-form-6:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); } /*================================================== * Effect 7 * ===============================================*/ .shadow-form-7 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .shadow-form-7:before, .shadow-form-7:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .shadow-form-7:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); } /*================================================== * Effect 8 * ===============================================*/ .shadow-form-8 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .shadow-form-8:before, .shadow-form-8:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .shadow-form-8:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); } /*================================================== * Effect 9 * ===============================================*/ .shadow-form-9 { position:relative; .box-shadow(0 0 20px rgba(0, 0, 0, 0.3)); z-index: 1; } /*================================================== * Effect 10 * ===============================================*/ .shadow-form-10 { position:relative; .box-shadow(0 5px 40px rgba(0, 0, 0, 0.3)); z-index: 1; } /*================================================== * Effect 11 * ===============================================*/ .shadow-form-11 { position:relative; .box-shadow(0 15px 60px rgba(0, 0, 0, 0.3)); z-index: 1; }