From 1b9fee8dca317f74c26fc197a7200a784bb760c2 Mon Sep 17 00:00:00 2001 From: A1Gard Date: Mon, 12 Jun 2023 10:51:42 +0330 Subject: [PATCH] optimize scss --- public/css/theme.css | 1014 ++++++++++++++++++------------------ resources/sass/card.scss | 405 ++++++++++++++ resources/theme/card.scss | 54 -- resources/theme/theme.scss | 356 +------------ 4 files changed, 919 insertions(+), 910 deletions(-) create mode 100644 resources/sass/card.scss delete mode 100644 resources/theme/card.scss diff --git a/public/css/theme.css b/public/css/theme.css index 65af1b6..9238206 100755 --- a/public/css/theme.css +++ b/public/css/theme.css @@ -11126,644 +11126,648 @@ tr.border-bottom td { display: block; } -.x-mega-menu { - background: #eeeeee; - display: grid; - grid-auto-columns: minmax(0, 1fr); - grid-auto-flow: column; +.product-info { + padding: 0; list-style: none; - box-shadow: 0 1px 4px #aaaaaa; -} -.x-mega-menu > li { - transition: 300ms; - font-size: 12pt; - font-weight: 100; - text-align: center; - color: #0085a7; - cursor: pointer; - grid-column: span 2; -} -.x-mega-menu > li.x-has-sub-menu a:after, .x-mega-menu > li.x-has-sub-menu span:after { - content: "⌄"; - position: relative; - top: -3px; -} -.x-mega-menu > li.x-has-image span, .x-mega-menu > li.x-has-image a { - padding: 1px; - height: 49px; } -.x-mega-menu > li.x-has-image img { - max-height: 40px; - max-width: 100vh; - display: block; - margin: 2px auto; +.product-info li { + border-top: 1px solid #ddd; + padding: 7px; } -.x-mega-menu > li.x-small { - grid-column: span 1; +.product-info li:last-child { + border-bottom: 1px solid #ddd; } -.x-mega-menu > li:hover, .x-mega-menu > li.x-active { - background: #ffffff; +.product-info li i { + margin-top: 3px; + margin-left: 10px; + float: right; + color: #0c63e4; } -.x-mega-menu > li:hover a:before, .x-mega-menu > li:hover span:before, .x-mega-menu > li.x-active a:before, .x-mega-menu > li.x-active span:before { - width: 100%; - opacity: 1; +.product-info li b { + color: #0c63e4; + float: left; } -.x-mega-menu > li ul { - display: none; + +/*-768px width*/ +@media (max-width: 768px) { + #customer label { + text-align: start !important; + } } -.x-mega-menu > li a, .x-mega-menu > li span { - position: relative; - text-decoration: none; - color: #0085a7; - padding: 1em; - display: block; +/*-1000px width*/ +@media (max-width: 1000px) { + #top .logo { + max-height: 40px; + } + + #main-container { + padding-top: 20px; + } } -.x-mega-menu > li a:before, .x-mega-menu > li span:before { - height: 2px; - content: " "; - position: absolute; - right: 0; - width: 0; - bottom: 0px; - transition: 400ms; - transition-delay: 100ms; - opacity: 0.5; - background: linear-gradient(90deg, #0085a7 0%, #0eceff 100%); +.product-count { + font-size: 0; } - -.x-sub-menu { - background: #eeeeee; - width: 100%; - border: 1px solid silver; - transform: scaleY(0) translateY(-50%); - transition-timing-function: ease-out; - transition: 700ms; - opacity: 0; - position: absolute; - z-index: 999; - box-shadow: 0 3px 7px #999999; +.product-count :first-child { + color: white; + border-radius: 0 7px 7px 0; } -.x-sub-menu h3 { - border-bottom: 1px solid #eee; - margin-bottom: 12px; - color: #222222; - transition: 333ms; +.product-count :last-child { + border-radius: 7px 0 0 7px; + color: white; } -.x-sub-menu h3:hover { - color: #151515; +.product-count * { + display: inline-block; } -.x-sub-menu li { +.product-count input { + text-align: center; + -moz-appearance: textfield; + width: 50px; + border-radius: 0; + font-size: 16px; position: relative; + top: 4px; } -.x-sub-menu li li { - border-bottom: rgba(34, 34, 34, 0.15) 1px solid; -} -.x-sub-menu li li a, .x-sub-menu li li span { - padding: 8.5px 5.5px; - transition: 400ms; - display: block; +.product-count input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; } -.x-sub-menu li li a:hover, .x-sub-menu li li span:hover { - transform: translateX(-20px); + +#card .table { + vertical-align: middle; } -.x-sub-menu li li ul { + +#sms-code { display: none; } -.x-sub-menu li a { - padding: 1.2em; - color: #222222; - transition: 333ms; -} -.x-sub-menu li.x-has-sub-menu { - position: relative; + +#card .meta { + border: 1px solid gray; + margin-bottom: 2px; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 3px; } -.x-sub-menu li.x-has-sub-menu:before { - content: "〉"; - position: absolute; - right: 0; - top: 7px; +#card .quantity { + cursor: pointer; + border: 1px solid gray; + margin-bottom: 2px; + border-radius: 5px; + padding: 3px; } -.x-sub-menu li.x-has-sub-menu.x-right:before { - right: auto; - left: 0; +#card .quantity.active { + background: #0c63e4; + color: white; } -.x-sub-menu li:hover a { - color: #2f2f2f; +#card .quantity hr { + margin-top: 3px; + margin-bottom: 3px; } -.x-sub-menu.x-active { - transform: scaleY(1) translateY(0); - opacity: 0.9; +#card .quantity input { + visibility: hidden; } -.x-sub-menu > ul { - display: grid; - grid-auto-columns: minmax(0, 1fr); - grid-auto-flow: column; + +.preline { + white-space: pre-line; } -.x-sub-menu > ul > li { - border-right: 1px solid silver; + +.border-x { + border: 2px solid gray; padding: 1em; - color: #0085a7; } -.x-sub-menu > ul > li.x-highlight { - background: #0085a7; + +.ribbon { + position: absolute !important; + text-transform: uppercase; color: white; + z-index: 99; + top: -36px; } -.x-sub-menu > ul > li.x-highlight h3 { +.ribbon .ribbon1 { + position: absolute; + right: 10px; color: white; } -.x-sub-menu > ul img { - width: 80%; - display: block; - margin: 1em auto; +.ribbon .ribbon1:after { + position: absolute; + content: ""; + width: 0; + height: 0; + bottom: 0; + left: 0; + z-index: 999; + border-left: 25px solid transparent; + border-right: 25px solid transparent; + border-top: 15px solid #F8463F; } -.x-sub-menu .x-main-section-menu { +.ribbon .ribbon1 span { position: relative; + display: block; + text-align: center; + background: #F8463F; + font-size: 18px; + font-weight: 600; + line-height: 0; + padding: 18px 5px 12px 8px; + border-top-right-radius: 8px; + width: 50px; } -.x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop { - position: absolute; - left: 15px; - right: 15px; +.ribbon .ribbon1 span:before { + height: 6px; + width: 6px; + left: -5px; top: 0; - bottom: 0; - background: #eeeeee; + background: #F8463F; } -.x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop .x-back-btn { - cursor: pointer; +.ribbon .ribbon1 span:after { + height: 6px; + width: 8px; + left: -8px; + top: 0; + border-radius: 8px 8px 0 0; + background: #C02031; } -.x-sub-menu p { - line-height: 1.7em; +.ribbon .ribbon1 span:before, .ribbon .ribbon1 span:after { + position: absolute; + content: ""; } -#x-toggle { - display: none; +.trust { + box-shadow: 0 5px 5px rgba(134, 134, 134, 0.5333333333); + border: 1px solid rgba(134, 134, 134, 0.5333333333); + list-style: none; + border-radius: 4px; + margin-right: 2em; + width: calc(100% - 4em); } - -#x-side-menu { - transition: 500ms; - transition-timing-function: linear; - width: 0; - overflow: hidden; - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 999999; +.trust li { + display: flex; + align-items: center; + font-size: 14px; } -#x-side-menu.x-active { - width: 100%; +.trust i { + color: #0a53be; + margin-left: 10px; } -#x-side-menu h2, #x-side-menu h3, #x-side-menu h4, #x-side-menu h5 { - padding: 0.75em; - text-align: center; - background: #0091b6; - font-size: 18px; + +.sizeInfo { + width: 100%; + padding: 10px 0; + display: inline-block; + transition: 300ms; + border: 1px solid #f5f5f5; } -#x-side-menu .x-side-menu { - z-index: 9; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - box-shadow: -1px 0 7px #111, 1px 0 7px #111; - background: #0085a7; - width: 300px; - overflow-y: auto; - color: white; - height: 100vh; - box-sizing: border-box; - position: relative; +.sizeInfo:hover { + box-shadow: initial; + border: 1px solid #868686; } -#x-side-menu .x-side-menu > li { - background: #0099c1; - border-top: 1px solid #00718e; - position: relative; - color: gray; +.sizeInfo img { + width: 20px; + height: 20px; } -#x-side-menu .x-side-menu > li:last-child { - border-bottom: 1px solid #00718e; +.sizeInfo a { + line-height: 60px; + color: #868686 !important; } -#x-side-menu .x-side-menu > li.x-small, #x-side-menu .x-side-menu > li.x-has-image { - display: none; + +#child { + height: 80vh; + overflow: hidden; + padding-top: 0; + position: relative; + background: #fdd6ff; } -#x-side-menu .x-side-menu > li ul { - display: none; +#child .particles { + width: 10px; + height: 10px; + background: #f00; + border-radius: 50%; + box-shadow: 0 0 4px #f00, 0 0 8px #f00; + position: absolute; + top: -10vh; + opacity: 0.6; } -#x-side-menu .x-side-menu > li a, #x-side-menu .x-side-menu > li span { - display: block; - padding: 1em; - color: white; - text-decoration: none; +#child .active h1, #child .active h2, #child .active h3, #child .active h4, #child .active h5, #child .active h6 { + -webkit-animation: pulse 1.6s infinite; + animation: pulse 1.6s infinite; + line-height: 2em; } -#x-side-menu .x-side-menu .x-close { - float: right; - padding: 10px 0.46em; - font-size: 30px; - cursor: pointer; - background: #007593; +#child .owl-carousel { + padding: 0; + margin: 0; } -#x-side-menu .x-has-sub-menu .x-next { - border-bottom: 0; - border-top: 0; - transition: 300ms; - right: 0; +#child .item { + position: absolute; + left: 0; top: 0; bottom: 0; - position: absolute; - width: 45px; - padding-left: 5px; - display: flex; - align-items: center; - justify-content: center; - font-size: 20px; - border: 1px solid #00718e; - background: #007998; - cursor: pointer; - color: white; -} -#x-side-menu .x-has-sub-menu .x-next:hover { - background: #0089ac; + right: 0; } -#x-side-menu .x-has-sub-menu .x-next a { - display: block; - padding-top: 15px; +#child .item .text { + margin-top: 15vh; + float: left; + padding: 3em; + text-align: center; + width: 50%; } -#x-side-menu .x-has-sub-menu.x-right .x-next { - right: auto; - left: 0; +#child .item img { + opacity: 0; + max-height: 80vh; + width: auto !important; + position: absolute; + bottom: 0; + right: -1000px; + transition: 1000ms; } -.x-responsive #x-toggle { - display: block; - grid-column: span 1; +#child .active img { + opacity: 1; + right: 5% !important; } -.x-responsive.x-mega-menu { - grid-auto-columns: 1fr; +#child .owl-item { + height: 80vh; + position: relative; } -.x-responsive.x-mega-menu > li { - display: none; +#child .owl-odd { + height: 80vh; + background: rgba(29, 211, 176, 0.6666666667); } -.x-responsive.x-mega-menu > li:before { - display: none !important; +#child .owl-odd img { + opacity: 1; + right: 65%; } -.x-responsive.x-mega-menu > li.x-has-image, .x-responsive.x-mega-menu > li.x-always-show { - display: block; - grid-column: span 6; +#child .owl-dots { + position: absolute; + bottom: 10px; + z-index: 9; + left: 0; + right: 0; } -.x-responsive.x-mega-menu > li.x-small { - grid-column: span 1; +#child .owl-dots .owl-dot span { + border-radius: 0 !important; + height: 3px; + width: 20px !important; } -.x-multi-level-menu { - position: absolute; - top: 0; - width: 290px; - background: #0085a7; - height: 100vh; - box-shadow: -1px 0 7px #111, 1px 0 7px #111; - overflow-y: auto; +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } } -.x-multi-level-menu li { - padding: 0; +.x-mega-menu { + background: #eeeeee; + display: grid; + grid-auto-columns: minmax(0, 1fr); + grid-auto-flow: column; list-style: none; + box-shadow: 0 1px 4px #aaaaaa; } -.x-multi-level-menu li.x-list { - background: #0099c1; - border-top: 1px solid #00718e; - background: #0085a7; +.x-mega-menu > li { + transition: 300ms; + font-size: 12pt; + font-weight: 100; + text-align: center; + color: #0085a7; + cursor: pointer; + grid-column: span 2; +} +.x-mega-menu > li.x-has-sub-menu a:after, .x-mega-menu > li.x-has-sub-menu span:after { + content: "⌄"; position: relative; + top: -3px; } -.x-multi-level-menu li.x-list ul { - display: none; +.x-mega-menu > li.x-has-image span, .x-mega-menu > li.x-has-image a { + padding: 1px; + height: 49px; } -.x-multi-level-menu li.x-list a, .x-multi-level-menu li.x-list span { +.x-mega-menu > li.x-has-image img { + max-height: 40px; + max-width: 100vh; display: block; - padding: 1em; - color: white; - text-decoration: none; + margin: 2px auto; } -.x-multi-level-menu .x-back { - padding: 0.75em; - text-align: center; - border-bottom: 1px solid #007593; - cursor: pointer; +.x-mega-menu > li.x-small { + grid-column: span 1; } -.x-multi-level-menu .x-back .x-back-btn { - float: right; - padding: 10px 0.46em; - font-size: 20px; - cursor: pointer; - margin: -0.75em; - text-align: left; - width: 15px; +.x-mega-menu > li:hover, .x-mega-menu > li.x-active { + background: #ffffff; } - -.x-blur { - filter: blur(5px) grayscale(0.75); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - transition: 100ms; +.x-mega-menu > li:hover a:before, .x-mega-menu > li:hover span:before, .x-mega-menu > li.x-active a:before, .x-mega-menu > li.x-active span:before { + width: 100%; + opacity: 1; +} +.x-mega-menu > li ul { + display: none; +} +.x-mega-menu > li a, .x-mega-menu > li span { + position: relative; + text-decoration: none; + color: #0085a7; + padding: 1em; + display: block; +} +.x-mega-menu > li a:before, .x-mega-menu > li span:before { + height: 2px; + content: " "; + position: absolute; + right: 0; + width: 0; + bottom: 0px; + transition: 400ms; transition-delay: 100ms; + opacity: 0.5; + background: linear-gradient(90deg, #0085a7 0%, #0eceff 100%); } -@-webkit-keyframes border-color-play {} - -@keyframes border-color-play {} -.product-info { - padding: 0; - list-style: none; +.x-sub-menu { + background: #eeeeee; + width: 100%; + border: 1px solid silver; + transform: scaleY(0) translateY(-50%); + transition-timing-function: ease-out; + transition: 700ms; + opacity: 0; + position: absolute; + z-index: 999; + box-shadow: 0 3px 7px #999999; } -.product-info li { - border-top: 1px solid #ddd; - padding: 7px; +.x-sub-menu h3 { + border-bottom: 1px solid #eee; + margin-bottom: 12px; + color: #222222; + transition: 333ms; } -.product-info li:last-child { - border-bottom: 1px solid #ddd; +.x-sub-menu h3:hover { + color: #151515; } -.product-info li i { - margin-top: 3px; - margin-left: 10px; - float: right; - color: #0c63e4; +.x-sub-menu li { + position: relative; } -.product-info li b { - color: #0c63e4; - float: left; +.x-sub-menu li li { + border-bottom: rgba(34, 34, 34, 0.15) 1px solid; } - -/*-768px width*/ -@media (max-width: 768px) { - #customer label { - text-align: start !important; - } +.x-sub-menu li li a, .x-sub-menu li li span { + padding: 8.5px 5.5px; + transition: 400ms; + display: block; } -/*-1000px width*/ -@media (max-width: 1000px) { - #top .logo { - max-height: 40px; - } - - #main-container { - padding-top: 20px; - } +.x-sub-menu li li a:hover, .x-sub-menu li li span:hover { + transform: translateX(-20px); } -.product-count { - font-size: 0; +.x-sub-menu li li ul { + display: none; } -.product-count :first-child { - color: white; - border-radius: 0 7px 7px 0; +.x-sub-menu li a { + padding: 1.2em; + color: #222222; + transition: 333ms; } -.product-count :last-child { - border-radius: 7px 0 0 7px; - color: white; +.x-sub-menu li.x-has-sub-menu { + position: relative; } -.product-count * { - display: inline-block; +.x-sub-menu li.x-has-sub-menu:before { + content: "〉"; + position: absolute; + right: 0; + top: 7px; } -.product-count input { - text-align: center; - -moz-appearance: textfield; - width: 50px; - border-radius: 0; - font-size: 16px; - position: relative; - top: 4px; +.x-sub-menu li.x-has-sub-menu.x-right:before { + right: auto; + left: 0; } -.product-count input::-webkit-inner-spin-button { - margin: 0; - -webkit-appearance: none; +.x-sub-menu li:hover a { + color: #2f2f2f; } - -#card .table { - vertical-align: middle; +.x-sub-menu.x-active { + transform: scaleY(1) translateY(0); + opacity: 0.9; } - -#sms-code { - display: none; +.x-sub-menu > ul { + display: grid; + grid-auto-columns: minmax(0, 1fr); + grid-auto-flow: column; } - -#card .meta { - border: 1px solid gray; - margin-bottom: 2px; - border-radius: 5px; - display: flex; - align-items: center; - justify-content: space-between; - padding: 3px; +.x-sub-menu > ul > li { + border-right: 1px solid silver; + padding: 1em; + color: #0085a7; } -#card .quantity { - cursor: pointer; - border: 1px solid gray; - margin-bottom: 2px; - border-radius: 5px; - padding: 3px; +.x-sub-menu > ul > li.x-highlight { + background: #0085a7; + color: white; } -#card .quantity.active { - background: #0c63e4; +.x-sub-menu > ul > li.x-highlight h3 { color: white; } -#card .quantity hr { - margin-top: 3px; - margin-bottom: 3px; +.x-sub-menu > ul img { + width: 80%; + display: block; + margin: 1em auto; } -#card .quantity input { - visibility: hidden; +.x-sub-menu .x-main-section-menu { + position: relative; } - -.preline { - white-space: pre-line; +.x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop { + position: absolute; + left: 15px; + right: 15px; + top: 0; + bottom: 0; + background: #eeeeee; } - -.border-x { - border: 2px solid gray; - padding: 1em; +.x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop .x-back-btn { + cursor: pointer; } - -.ribbon { - position: absolute !important; - text-transform: uppercase; - color: white; - z-index: 99; - top: -36px; +.x-sub-menu p { + line-height: 1.7em; } -.ribbon .ribbon1 { - position: absolute; - right: 10px; - color: white; + +#x-toggle { + display: none; } -.ribbon .ribbon1:after { - position: absolute; - content: ""; + +#x-side-menu { + transition: 500ms; + transition-timing-function: linear; width: 0; - height: 0; - bottom: 0; + overflow: hidden; + position: fixed; left: 0; - z-index: 999; - border-left: 25px solid transparent; - border-right: 25px solid transparent; - border-top: 15px solid #F8463F; + right: 0; + top: 0; + bottom: 0; + z-index: 999999; } -.ribbon .ribbon1 span { - position: relative; - display: block; +#x-side-menu.x-active { + width: 100%; +} +#x-side-menu h2, #x-side-menu h3, #x-side-menu h4, #x-side-menu h5 { + padding: 0.75em; text-align: center; - background: #F8463F; + background: #0091b6; font-size: 18px; - font-weight: 600; - line-height: 0; - padding: 18px 5px 12px 8px; - border-top-right-radius: 8px; - width: 50px; } -.ribbon .ribbon1 span:before { - height: 6px; - width: 6px; - left: -5px; - top: 0; - background: #F8463F; +#x-side-menu .x-side-menu { + z-index: 9; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-shadow: -1px 0 7px #111, 1px 0 7px #111; + background: #0085a7; + width: 300px; + overflow-y: auto; + color: white; + height: 100vh; + box-sizing: border-box; + position: relative; } -.ribbon .ribbon1 span:after { - height: 6px; - width: 8px; - left: -8px; - top: 0; - border-radius: 8px 8px 0 0; - background: #C02031; +#x-side-menu .x-side-menu > li { + background: #0099c1; + border-top: 1px solid #00718e; + position: relative; + color: gray; } -.ribbon .ribbon1 span:before, .ribbon .ribbon1 span:after { - position: absolute; - content: ""; +#x-side-menu .x-side-menu > li:last-child { + border-bottom: 1px solid #00718e; } - -.trust { - box-shadow: 0 5px 5px rgba(134, 134, 134, 0.5333333333); - border: 1px solid rgba(134, 134, 134, 0.5333333333); - list-style: none; - border-radius: 4px; - margin-right: 2em; - width: calc(100% - 4em); +#x-side-menu .x-side-menu > li.x-small, #x-side-menu .x-side-menu > li.x-has-image { + display: none; } -.trust li { - display: flex; - align-items: center; - font-size: 14px; +#x-side-menu .x-side-menu > li ul { + display: none; } -.trust i { - color: #0a53be; - margin-left: 10px; +#x-side-menu .x-side-menu > li a, #x-side-menu .x-side-menu > li span { + display: block; + padding: 1em; + color: white; + text-decoration: none; } - -.sizeInfo { - width: 100%; - padding: 10px 0; - display: inline-block; +#x-side-menu .x-side-menu .x-close { + float: right; + padding: 10px 0.46em; + font-size: 30px; + cursor: pointer; + background: #007593; +} +#x-side-menu .x-has-sub-menu .x-next { + border-bottom: 0; + border-top: 0; transition: 300ms; - border: 1px solid #f5f5f5; + right: 0; + top: 0; + bottom: 0; + position: absolute; + width: 45px; + padding-left: 5px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + border: 1px solid #00718e; + background: #007998; + cursor: pointer; + color: white; } -.sizeInfo:hover { - box-shadow: initial; - border: 1px solid #868686; +#x-side-menu .x-has-sub-menu .x-next:hover { + background: #0089ac; } -.sizeInfo img { - width: 20px; - height: 20px; +#x-side-menu .x-has-sub-menu .x-next a { + display: block; + padding-top: 15px; } -.sizeInfo a { - line-height: 60px; - color: #868686 !important; +#x-side-menu .x-has-sub-menu.x-right .x-next { + right: auto; + left: 0; } - -#child { - height: 80vh; - overflow: hidden; - padding-top: 0; - position: relative; - background: #fdd6ff; +.x-responsive #x-toggle { + display: block; + grid-column: span 1; } -#child .particles { - width: 10px; - height: 10px; - background: #f00; - border-radius: 50%; - box-shadow: 0 0 4px #f00, 0 0 8px #f00; - position: absolute; - top: -10vh; - opacity: 0.6; +.x-responsive.x-mega-menu { + grid-auto-columns: 1fr; } -#child .active h1, #child .active h2, #child .active h3, #child .active h4, #child .active h5, #child .active h6 { - -webkit-animation: pulse 1.6s infinite; - animation: pulse 1.6s infinite; - line-height: 2em; +.x-responsive.x-mega-menu > li { + display: none; } -#child .owl-carousel { - padding: 0; - margin: 0; +.x-responsive.x-mega-menu > li:before { + display: none !important; } -#child .item { - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; +.x-responsive.x-mega-menu > li.x-has-image, .x-responsive.x-mega-menu > li.x-always-show { + display: block; + grid-column: span 6; } -#child .item .text { - margin-top: 15vh; - float: left; - padding: 3em; - text-align: center; - width: 50%; +.x-responsive.x-mega-menu > li.x-small { + grid-column: span 1; } -#child .item img { - opacity: 0; - max-height: 80vh; - width: auto !important; + +.x-multi-level-menu { position: absolute; - bottom: 0; - right: -1000px; - transition: 1000ms; + top: 0; + width: 290px; + background: #0085a7; + height: 100vh; + box-shadow: -1px 0 7px #111, 1px 0 7px #111; + overflow-y: auto; } -#child .active img { - opacity: 1; - right: 5% !important; +.x-multi-level-menu li { + padding: 0; + list-style: none; } -#child .owl-item { - height: 80vh; +.x-multi-level-menu li.x-list { + background: #0099c1; + border-top: 1px solid #00718e; + background: #0085a7; position: relative; } -#child .owl-odd { - height: 80vh; - background: rgba(29, 211, 176, 0.6666666667); +.x-multi-level-menu li.x-list ul { + display: none; } -#child .owl-odd img { - opacity: 1; - right: 65%; +.x-multi-level-menu li.x-list a, .x-multi-level-menu li.x-list span { + display: block; + padding: 1em; + color: white; + text-decoration: none; } -#child .owl-dots { - position: absolute; - bottom: 10px; - z-index: 9; - left: 0; - right: 0; +.x-multi-level-menu .x-back { + padding: 0.75em; + text-align: center; + border-bottom: 1px solid #007593; + cursor: pointer; } -#child .owl-dots .owl-dot span { - border-radius: 0 !important; - height: 3px; - width: 20px !important; +.x-multi-level-menu .x-back .x-back-btn { + float: right; + padding: 10px 0.46em; + font-size: 20px; + cursor: pointer; + margin: -0.75em; + text-align: left; + width: 15px; } -@keyframes pulse { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } - 100% { - transform: scale(1); - } +.x-blur { + filter: blur(5px) grayscale(0.75); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: 100ms; + transition-delay: 100ms; } + +@-webkit-keyframes border-color-play {} + +@keyframes border-color-play {} +a { + text-decoration: none !important; +} + .page-item.active .page-link { background: #f9247a; border-color: #f9247a; diff --git a/resources/sass/card.scss b/resources/sass/card.scss new file mode 100644 index 0000000..bb81f37 --- /dev/null +++ b/resources/sass/card.scss @@ -0,0 +1,405 @@ +.progress-step{ + display: grid; + grid-template-columns: repeat(3,1fr); + .step{ + text-align: center; + margin-bottom: 35px; + position: relative; + z-index: 9 ; + &.done{ + i,img{ + border-color: black; + color: black; + } + } + i,img{ + font-size: 45px; + width: 75px; + height: 75px; + border-radius: 50%; + border: 2px solid gray; + display: flex; + align-items: center; + justify-content: center; + color: gray; + margin: 15px auto; + background: #ffffff; + position: relative; + z-index: 10; + cursor: pointer; + } + } + .step:before{ + height: 2px; + background: silver; + top: calc(50% - 15px); + position: absolute; + left: 0; + right: 0; + content: ' '; + transform: translateY(-50%); + } + .step.done:before{ + background: black; + } +} + +#card-steps { + .step{ + display: none; + &.active{ + display: block; + } + } +} + +.product-info { + padding: 0; + list-style: none; + + li { + border-top: 1px solid #ddd; + padding: 7px; + + &:last-child { + border-bottom: 1px solid #ddd; + } + + i { + margin-top: 3px; + margin-left: 10px; + float: right; + color: #0c63e4; + } + + b { + color: #0c63e4; + float: left; + } + } +} + +/*-768px width*/ +@media (max-width: 768px) { + #customer label { + text-align: start !important; + } +} + +/*-1000px width*/ +@media (max-width: 1000px) { + #top .logo { + max-height: 40px; + } + + #main-container { + padding-top: 20px; + } +} + +.product-count { + font-size: 0; + + :first-child { + color: white; + border-radius: 0 7px 7px 0; + } + + :last-child { + border-radius: 7px 0 0 7px; + color: white; + } + + * { + display: inline-block; + } + + input { + //font-size: initial; + text-align: center; + -moz-appearance: textfield; + width: 50px; + border-radius: 0; + font-size: 16px; + position: relative; + top: 4px; + } + + input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + } +} + +#card { + .table { + vertical-align: middle; + } +} + +#sms-code { + display: none; +} + +#card { + .meta { + border: 1px solid gray; + margin-bottom: 2px; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 3px; + } + + .quantity { + &.active { + background: #0c63e4; + color: white; + } + + cursor: pointer; + border: 1px solid gray; + margin-bottom: 2px; + border-radius: 5px; + padding: 3px; + + hr { + margin-top: 3px; + margin-bottom: 3px; + } + + input { + visibility: hidden; + } + } +} + +//@import "css/dark"; + +.preline { + white-space: pre-line; +} + +.border-x { + border: 2px solid gray; + padding: 1em; +} + + +.ribbon { + position: absolute !important; + text-transform: uppercase; + color: white; + z-index: 99; + top: -36px; + + .ribbon1 { + position: absolute; + right: 10px; + color: white; + + &:after { + position: absolute; + content: ""; + width: 0; + height: 0; + bottom: 0; + left: 0; + z-index: 999; + border-left: 25px solid transparent; + border-right: 25px solid transparent; + border-top: 15px solid #F8463F; + } + + span { + position: relative; + display: block; + text-align: center; + background: #F8463F; + font-size: 18px; + font-weight: 600; + line-height: 0; + padding: 18px 5px 12px 8px; + border-top-right-radius: 8px; + width: 50px; + + &:before { + height: 6px; + width: 6px; + left: -5px; + top: 0; + background: #F8463F; + } + + &:after { + height: 6px; + width: 8px; + left: -8px; + top: 0; + border-radius: 8px 8px 0 0; + background: #C02031; + } + + &:before, + &:after { + position: absolute; + content: ""; + } + } + } + +} + +.trust { + box-shadow: 0 5px 5px #86868688; + border: 1px solid #86868688; + list-style: none; + border-radius: 4px; + margin-right: 2em; + width: calc(100% - 4em); + + li { + display: flex; + align-items: center; + font-size: 14px; + } + + i { + color: #0a53be; + margin-left: 10px; + + } +} + +.sizeInfo { + width: 100%; + padding: 10px 0; + display: inline-block; + transition: 300ms; + border: 1px solid #f5f5f5; + + &:hover { + box-shadow: initial; + border: 1px solid #868686; + } + + img { + width: 20px; + height: 20px; + } + + a { + line-height: 60px; + color: #868686 !important; + } +} + +#child { + height: 80vh; + overflow: hidden; + padding-top: 0; + position: relative; + background: #fdd6ff; + + .particles { + width: 10px; + height: 10px; + background: #f00; + border-radius: 50%; + box-shadow: 0 0 4px #f00, + 0 0 8px #f00; + position: absolute; + top: -10vh; + opacity: .6; + } + + .active { + h1, h2, h3, h4, h5, h6 { + animation: pulse 1.6s infinite; + line-height: 2em; + } + } + + + .owl-carousel { + padding: 0; + margin: 0; + } + + .item { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + + .text { + margin-top: 15vh; + float: left; + padding: 3em; + text-align: center; + width: 50%; + } + + img { + opacity: 0; + max-height: 80vh; + width: auto !important; + position: absolute; + bottom: 0; + right: -1000px; + transition: 1000ms; + } + } + + .active { + img { + opacity: 1; + right: 5% !important; + } + } + + + .owl-item { + height: 80vh; + position: relative; + } + + .owl-odd { + height: 80vh; + background: #1dd3b0aa; + + + img { + opacity: 1; + right: 65%; + } + } + + .owl-dots { + position: absolute; + bottom: 10px; + z-index: 9; + left: 0; + right: 0; + + .owl-dot span { + border-radius: 0 !important; + height: 3px; + width: 20px !important; + } + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} diff --git a/resources/theme/card.scss b/resources/theme/card.scss deleted file mode 100644 index e262248..0000000 --- a/resources/theme/card.scss +++ /dev/null @@ -1,54 +0,0 @@ -.progress-step{ - display: grid; - grid-template-columns: repeat(3,1fr); - .step{ - text-align: center; - margin-bottom: 35px; - position: relative; - z-index: 9 ; - &.done{ - i,img{ - border-color: black; - color: black; - } - } - i,img{ - font-size: 45px; - width: 75px; - height: 75px; - border-radius: 50%; - border: 2px solid gray; - display: flex; - align-items: center; - justify-content: center; - color: gray; - margin: 15px auto; - background: #ffffff; - position: relative; - z-index: 10; - cursor: pointer; - } - } - .step:before{ - height: 2px; - background: silver; - top: calc(50% - 15px); - position: absolute; - left: 0; - right: 0; - content: ' '; - transform: translateY(-50%); - } - .step.done:before{ - background: black; - } -} - -#card-steps { - .step{ - display: none; - &.active{ - display: block; - } - } -} diff --git a/resources/theme/theme.scss b/resources/theme/theme.scss index b5aa209..62951ea 100755 --- a/resources/theme/theme.scss +++ b/resources/theme/theme.scss @@ -11,7 +11,7 @@ @import "css/icofont/icofont.min.css"; @import "../sass/preloader"; @import "css/style.css"; -@import "card"; +@import "../sass/card"; $main-color: #0085a7; $invert-text-color: white; @@ -21,6 +21,10 @@ $main-menu-bg: #eeeeee; $is-dark: 'false'; @import "~x-mega-menu/src/main-x-mega-menu"; + +a{ + text-decoration: none !important; +} // //a { // color: #ea4c89; @@ -84,356 +88,6 @@ $is-dark: 'false'; // background-color: darkmagenta; // border-color: dodgerblue; //} -.product-info { - padding: 0; - list-style: none; - - li { - border-top: 1px solid #ddd; - padding: 7px; - - &:last-child { - border-bottom: 1px solid #ddd; - } - - i { - margin-top: 3px; - margin-left: 10px; - float: right; - color: #0c63e4; - } - - b { - color: #0c63e4; - float: left; - } - } -} - -/*-768px width*/ -@media (max-width: 768px) { - #customer label { - text-align: start !important; - } -} - -/*-1000px width*/ -@media (max-width: 1000px) { - #top .logo { - max-height: 40px; - } - - #main-container { - padding-top: 20px; - } -} - -.product-count { - font-size: 0; - - :first-child { - color: white; - border-radius: 0 7px 7px 0; - } - - :last-child { - border-radius: 7px 0 0 7px; - color: white; - } - - * { - display: inline-block; - } - - input { - //font-size: initial; - text-align: center; - -moz-appearance: textfield; - width: 50px; - border-radius: 0; - font-size: 16px; - position: relative; - top: 4px; - } - - input::-webkit-inner-spin-button { - margin: 0; - -webkit-appearance: none; - } -} - -#card { - .table { - vertical-align: middle; - } -} - -#sms-code { - display: none; -} - -#card { - .meta { - border: 1px solid gray; - margin-bottom: 2px; - border-radius: 5px; - display: flex; - align-items: center; - justify-content: space-between; - padding: 3px; - } - - .quantity { - &.active { - background: #0c63e4; - color: white; - } - - cursor: pointer; - border: 1px solid gray; - margin-bottom: 2px; - border-radius: 5px; - padding: 3px; - - hr { - margin-top: 3px; - margin-bottom: 3px; - } - - input { - visibility: hidden; - } - } -} - -//@import "css/dark"; - -.preline { - white-space: pre-line; -} - -.border-x { - border: 2px solid gray; - padding: 1em; -} - - -.ribbon { - position: absolute !important; - text-transform: uppercase; - color: white; - z-index: 99; - top: -36px; - - .ribbon1 { - position: absolute; - right: 10px; - color: white; - - &:after { - position: absolute; - content: ""; - width: 0; - height: 0; - bottom: 0; - left: 0; - z-index: 999; - border-left: 25px solid transparent; - border-right: 25px solid transparent; - border-top: 15px solid #F8463F; - } - - span { - position: relative; - display: block; - text-align: center; - background: #F8463F; - font-size: 18px; - font-weight: 600; - line-height: 0; - padding: 18px 5px 12px 8px; - border-top-right-radius: 8px; - width: 50px; - - &:before { - height: 6px; - width: 6px; - left: -5px; - top: 0; - background: #F8463F; - } - - &:after { - height: 6px; - width: 8px; - left: -8px; - top: 0; - border-radius: 8px 8px 0 0; - background: #C02031; - } - - &:before, - &:after { - position: absolute; - content: ""; - } - } - } - -} - -.trust { - box-shadow: 0 5px 5px #86868688; - border: 1px solid #86868688; - list-style: none; - border-radius: 4px; - margin-right: 2em; - width: calc(100% - 4em); - - li { - display: flex; - align-items: center; - font-size: 14px; - } - - i { - color: #0a53be; - margin-left: 10px; - - } -} - -.sizeInfo { - width: 100%; - padding: 10px 0; - display: inline-block; - transition: 300ms; - border: 1px solid #f5f5f5; - - &:hover { - box-shadow: initial; - border: 1px solid #868686; - } - - img { - width: 20px; - height: 20px; - } - - a { - line-height: 60px; - color: #868686 !important; - } -} - -#child { - height: 80vh; - overflow: hidden; - padding-top: 0; - position: relative; - background: #fdd6ff; - - .particles { - width: 10px; - height: 10px; - background: #f00; - border-radius: 50%; - box-shadow: 0 0 4px #f00, - 0 0 8px #f00; - position: absolute; - top: -10vh; - opacity: .6; - } - - .active { - h1, h2, h3, h4, h5, h6 { - animation: pulse 1.6s infinite; - line-height: 2em; - } - } - - - .owl-carousel { - padding: 0; - margin: 0; - } - - .item { - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - - .text { - margin-top: 15vh; - float: left; - padding: 3em; - text-align: center; - width: 50%; - } - - img { - opacity: 0; - max-height: 80vh; - width: auto !important; - position: absolute; - bottom: 0; - right: -1000px; - transition: 1000ms; - } - } - - .active { - img { - opacity: 1; - right: 5% !important; - } - } - - - .owl-item { - height: 80vh; - position: relative; - } - - .owl-odd { - height: 80vh; - background: #1dd3b0aa; - - - img { - opacity: 1; - right: 65%; - } - } - - .owl-dots { - position: absolute; - bottom: 10px; - z-index: 9; - left: 0; - right: 0; - - .owl-dot span { - border-radius: 0 !important; - height: 3px; - width: 20px !important; - } - } -} - -@keyframes pulse { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } - 100% { - transform: scale(1); - } -} .page-item.active .page-link {