Merge pull request #19 from apuc/add-default-style

Added styles for cross-browser compatibility

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;
 

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 {

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;
 }