From 1a7a4cd90e8ef6df49c7eb53c7c0d485ac7467bb Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 1 Nov 2022 19:12:27 +0300 Subject: [PATCH] Added scss styles --- src/style/main.scss | 133 +++++++++++++++++++++++++++++++++++-- src/style/nativSelect.scss | 5 ++ src/style/svgStyle.scss | 9 +++ 3 files changed, 140 insertions(+), 7 deletions(-) diff --git a/src/style/main.scss b/src/style/main.scss index 69c2869..b09c917 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -14,11 +14,22 @@ body { .container { margin: 0 auto; - display: flex; - align-items: baseline; - justify-content: space-between; - flex-wrap: wrap; width: 900px; + + display: -webkit-box; + display: -ms-flexbox; + display: flex; + + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + + -ms-flex-wrap: wrap; + flex-wrap: wrap; } // ----Layout---- @@ -29,33 +40,65 @@ body { margin: 0; padding: 0; border: none; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; } .cg-select { - padding: 5px; + -webkit-box-flex: 1; + -ms-flex-positive: 1; flex-grow: 1; + min-height: 50px; color: #fff; + padding: 5px; + + display: -webkit-box; + display: -ms-flexbox; display: flex; + + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; + + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; text-overflow: ellipsis; background: #2a2f3b; + border: none; cursor: pointer; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + transition: 0.5s; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; .selected { max-width: 195px; - margin: 5px; } &:hover { transition: 0.5s; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; + background: #394050; } } @@ -67,11 +110,25 @@ body { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; + transition: 0.5s; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; &_rotate { transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transition: 0.5s; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; } } @@ -88,24 +145,55 @@ body { color: white; background: #2a2f3b; border: 1px #0a0b0e solid; - box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + + box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); + transition: 0.5s; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; opacity: 0; display: none; z-index: 1; &__item { + display: -webkit-box; + display: -ms-flexbox; display: flex; + + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; + + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; transition: 0.5s; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; + padding: 15px; &:hover { + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; transition: 0.5s; + cursor: pointer; background: #8282822c; } @@ -126,9 +214,20 @@ body { } .multiselect-tag { + display: -webkit-box; + display: -ms-flexbox; display: flex; + + -ms-flex-wrap: wrap; flex-wrap: wrap; + + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; + + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; list-style-type: none; @@ -141,12 +240,22 @@ body { height: 20px; margin: 0 5px 5px 0; + display: -webkit-box; + display: -ms-flexbox; display: flex; + + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; position: relative; border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; } + &__button { width: 15px; height: 16px; @@ -160,7 +269,12 @@ body { font-size: 17px; border-bottom: 1px solid; + display: -webkit-box; + display: -ms-flexbox; display: flex; + + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } @@ -179,6 +293,11 @@ input[type='checkbox'] { .open { transition: 0.5s; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; + display: block; opacity: 1; diff --git a/src/style/nativSelect.scss b/src/style/nativSelect.scss index 7bd7bbb..cbdd06e 100644 --- a/src/style/nativSelect.scss +++ b/src/style/nativSelect.scss @@ -5,7 +5,12 @@ color: white; background: #2a2f3b; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; margin: 0; &__nativOption { diff --git a/src/style/svgStyle.scss b/src/style/svgStyle.scss index d6ad5dd..934f4f6 100644 --- a/src/style/svgStyle.scss +++ b/src/style/svgStyle.scss @@ -5,10 +5,18 @@ background-color: #bebebc; border-radius: 5px; cursor: pointer; + -webkit-transition: 1s; transition: 1s; + -moz-transition: 1s; + -ms-transition: 1s; + -o-transition: 1s; &:hover { + -webkit-transition: 1s; transition: 1s; + -moz-transition: 1s; + -ms-transition: 1s; + -o-transition: 1s; background-color: #ffffff; } } @@ -17,5 +25,6 @@ color: black; stroke: currentcolor; transition: 0.2s; + -webkit-transition: 0.2s; stroke-width: 0.5; }