fixed checkboxes, radi buttons & other stuff

smakosh · smakosh · commit b901b0b482b1 · 2018-02-01T18:41:18.000Z
diff --git a/sass/colors.scss b/sass/colors.scss
@@ -1,28 +1,12 @@
-// colors =================================================
-
-//gradient 1 colors
+// colors
 $green: #1fdeb3;
 $blue: #12c3d2;
-//gradient 1 colors
-
-//=========================================================
-
-//gradient 2 colors
 $yellow: #FFE53B;
 $orange: #FF2525;
-
 $orange-btn: #ff9f33;
-//=========================================================
-
-//gradient 3 colors
 $dark-blue: #21D4FD;
 $purple: #B721FF;
-
 $purple-btn: #7274ff;
-//=========================================================
-
-// other colors============================================
 $red: #f44336;
 $black: #212121;
 $disabled: #fa5151;
-//=========================================================
diff --git a/sass/default.scss b/sass/default.scss
@@ -10,4 +10,10 @@ button  {
   background-color: unset;
   border: none;
   -webkit-appearance:none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
diff --git a/sass/forms.scss b/sass/forms.scss
@@ -89,7 +89,7 @@ label  {
       padding: .4rem .4rem;
       border-radius: 2px;
       transition: .2s;
-      color: #fff;
+      color: rgba(255, 255, 255, 0);
       font-size: 16px;
     }
   }
@@ -114,7 +114,7 @@ label  {
       padding: .3rem .4rem;
       border-radius: 100%;
       transition: .2s;
-      color: #fff;
+      color: rgba(255, 255, 255, 0);
       font-size: 14px;
     }
   }
@@ -226,7 +226,7 @@ label  {
 .green-checkbox  {
   + span:before  {
     border-color: $green !important;
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0) !important;
   }
 }
 .green-checkbox:checked + span:before  {
@@ -237,7 +237,7 @@ label  {
 .black-checkbox  {
   + span:before  {
     border-color: $black !important;
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0) !important;
   }
 }
 .black-checkbox:checked + span:before  {
@@ -248,7 +248,7 @@ label  {
 .orange-checkbox  {
   + span:before  {
     border-color: $orange-btn !important;
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0) !important;
   }
 }
 .orange-checkbox:checked + span:before  {
@@ -260,7 +260,7 @@ label  {
   + span:before  {
 
     border-color: $purple-btn !important;
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0) !important;
   }
 }
 .purple-checkbox:checked + span:before  {
diff --git a/sass/gradient.scss b/sass/gradient.scss
@@ -49,32 +49,32 @@
 .gradient-green {
   @include linear-gradient($green, $blue);
   box-shadow: 0px 4px 7px 0px rgba(18, 194, 211, 0.48);
-  transition: all 0.5s;
+  transition: all .2s;
   &:hover {
 
     box-shadow: 0px 7px 13px 0px rgba(18, 194, 211, 0.80);
-    transition: all 0.5s;
+    transition: all .2s;
   }
 }
 
 .gradient-orange {
   @include linear-gradient($yellow, $orange);
   box-shadow: 0px 4px 7px 0px rgba(255, 50, 39, 0.48);
-  transition: all 0.5s;
+  transition: all .2s;
   &:hover {
 
     box-shadow: 0px 7px 13px 0px rgba(255, 50, 39, 0.80);
-    transition: all 0.5s;
+    transition: all .2s;
   }
 }
 
 .gradient-purple {
   @include linear-gradient($dark-blue, $purple);
   box-shadow: 0px 4px 7px 0px rgba(170, 49, 255, 0.48);
-  transition: all 0.5s;
+  transition: all .2s;
   &:hover {
 
     box-shadow: 0px 7px 13px 0px rgba(170, 49, 255, 0.80);
-    transition: all 0.5s;
+    transition: all .2s;
   }
 }
diff --git a/source/app/styles/colors.scss b/source/app/styles/colors.scss
@@ -1,28 +1,12 @@
-// colors =================================================
-
-//gradient 1 colors
+// colors
 $green: #1fdeb3;
 $blue: #12c3d2;
-//gradient 1 colors
-
-//=========================================================
-
-//gradient 2 colors
 $yellow: #FFE53B;
 $orange: #FF2525;
-
 $orange-btn: #ff9f33;
-//=========================================================
-
-//gradient 3 colors
 $dark-blue: #21D4FD;
 $purple: #B721FF;
-
 $purple-btn: #7274ff;
-//=========================================================
-
-// other colors============================================
 $red: #f44336;
 $black: #212121;
 $disabled: #fa5151;
-//=========================================================
diff --git a/source/app/styles/default.scss b/source/app/styles/default.scss
@@ -10,4 +10,10 @@ button  {
   background-color: unset;
   border: none;
   -webkit-appearance:none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
diff --git a/source/app/styles/forms.scss b/source/app/styles/forms.scss
@@ -89,7 +89,7 @@ label  {
       padding: .4rem .4rem;
       border-radius: 2px;
       transition: .2s;
-      color: #fff;
+      color: rgba(255, 255, 255, 0);
       font-size: 16px;
     }
   }
@@ -114,7 +114,7 @@ label  {
       padding: .3rem .4rem;
       border-radius: 100%;
       transition: .2s;
-      color: #fff;
+      color: rgba(255, 255, 255, 0);
       font-size: 14px;
     }
   }
@@ -226,7 +226,7 @@ label  {
 .green-checkbox  {
   + span:before  {
     border-color: $green !important;
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0) !important;
   }
 }
 .green-checkbox:checked + span:before  {
@@ -237,7 +237,7 @@ label  {
 .black-checkbox  {
   + span:before  {
     border-color: $black !important;
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0) !important;
   }
 }
 .black-checkbox:checked + span:before  {
@@ -248,7 +248,7 @@ label  {
 .orange-checkbox  {
   + span:before  {
     border-color: $orange-btn !important;
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0) !important;
   }
 }
 .orange-checkbox:checked + span:before  {
@@ -260,7 +260,7 @@ label  {
   + span:before  {
 
     border-color: $purple-btn !important;
-    color: #fff !important;
+    color: rgba(255, 255, 255, 0) !important;
   }
 }
 .purple-checkbox:checked + span:before  {
diff --git a/source/app/styles/gradient.scss b/source/app/styles/gradient.scss
@@ -49,32 +49,32 @@
 .gradient-green {
   @include linear-gradient($green, $blue);
   box-shadow: 0px 4px 7px 0px rgba(18, 194, 211, 0.48);
-  transition: all 0.5s;
+  transition: all .2s;
   &:hover {
 
     box-shadow: 0px 7px 13px 0px rgba(18, 194, 211, 0.80);
-    transition: all 0.5s;
+    transition: all .2s;
   }
 }
 
 .gradient-orange {
   @include linear-gradient($yellow, $orange);
   box-shadow: 0px 4px 7px 0px rgba(255, 50, 39, 0.48);
-  transition: all 0.5s;
+  transition: all .2s;
   &:hover {
 
     box-shadow: 0px 7px 13px 0px rgba(255, 50, 39, 0.80);
-    transition: all 0.5s;
+    transition: all .2s;
   }
 }
 
 .gradient-purple {
   @include linear-gradient($dark-blue, $purple);
   box-shadow: 0px 4px 7px 0px rgba(170, 49, 255, 0.48);
-  transition: all 0.5s;
+  transition: all .2s;
   &:hover {
 
     box-shadow: 0px 7px 13px 0px rgba(170, 49, 255, 0.80);
-    transition: all 0.5s;
+    transition: all .2s;
   }
 }
diff --git a/source/yarn.lock b/source/yarn.lock
diff --git a/unnamed.css b/unnamed.css
diff --git a/unnamed.min.css b/unnamed.min.css

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ label {`
`89`	`89`	`padding: .4rem .4rem;`
`90`	`90`	`border-radius: 2px;`
`91`	`91`	`transition: .2s;`
`92`		`- color: #fff;`
	`92`	`+ color: rgba(255, 255, 255, 0);`
`93`	`93`	`font-size: 16px;`
`94`	`94`	`}`
`95`	`95`	`}`
`@@ -114,7 +114,7 @@ label {`
`114`	`114`	`padding: .3rem .4rem;`
`115`	`115`	`border-radius: 100%;`
`116`	`116`	`transition: .2s;`
`117`		`- color: #fff;`
	`117`	`+ color: rgba(255, 255, 255, 0);`
`118`	`118`	`font-size: 14px;`
`119`	`119`	`}`
`120`	`120`	`}`
`@@ -226,7 +226,7 @@ label {`
`226`	`226`	`.green-checkbox {`
`227`	`227`	`+ span:before {`
`228`	`228`	`border-color: $green !important;`
`229`		`- color: #fff !important;`
	`229`	`+ color: rgba(255, 255, 255, 0) !important;`
`230`	`230`	`}`
`231`	`231`	`}`
`232`	`232`	`.green-checkbox:checked + span:before {`
`@@ -237,7 +237,7 @@ label {`
`237`	`237`	`.black-checkbox {`
`238`	`238`	`+ span:before {`
`239`	`239`	`border-color: $black !important;`
`240`		`- color: #fff !important;`
	`240`	`+ color: rgba(255, 255, 255, 0) !important;`
`241`	`241`	`}`
`242`	`242`	`}`
`243`	`243`	`.black-checkbox:checked + span:before {`
`@@ -248,7 +248,7 @@ label {`
`248`	`248`	`.orange-checkbox {`
`249`	`249`	`+ span:before {`
`250`	`250`	`border-color: $orange-btn !important;`
`251`		`- color: #fff !important;`
	`251`	`+ color: rgba(255, 255, 255, 0) !important;`
`252`	`252`	`}`
`253`	`253`	`}`
`254`	`254`	`.orange-checkbox:checked + span:before {`
`@@ -260,7 +260,7 @@ label {`
`260`	`260`	`+ span:before {`
`261`	`261`
`262`	`262`	`border-color: $purple-btn !important;`
`263`		`- color: #fff !important;`
	`263`	`+ color: rgba(255, 255, 255, 0) !important;`
`264`	`264`	`}`
`265`	`265`	`}`
`266`	`266`	`.purple-checkbox:checked + span:before {`
Original file line number	Diff line number	Diff line change
`@@ -49,32 +49,32 @@`
`49`	`49`	`.gradient-green {`
`50`	`50`	`@include linear-gradient($green, $blue);`
`51`	`51`	`box-shadow: 0px 4px 7px 0px rgba(18, 194, 211, 0.48);`
`52`		`- transition: all 0.5s;`
	`52`	`+ transition: all .2s;`
`53`	`53`	`&:hover {`
`54`	`54`
`55`	`55`	`box-shadow: 0px 7px 13px 0px rgba(18, 194, 211, 0.80);`
`56`		`- transition: all 0.5s;`
	`56`	`+ transition: all .2s;`
`57`	`57`	`}`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`.gradient-orange {`
`61`	`61`	`@include linear-gradient($yellow, $orange);`
`62`	`62`	`box-shadow: 0px 4px 7px 0px rgba(255, 50, 39, 0.48);`
`63`		`- transition: all 0.5s;`
	`63`	`+ transition: all .2s;`
`64`	`64`	`&:hover {`
`65`	`65`
`66`	`66`	`box-shadow: 0px 7px 13px 0px rgba(255, 50, 39, 0.80);`
`67`		`- transition: all 0.5s;`
	`67`	`+ transition: all .2s;`
`68`	`68`	`}`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`.gradient-purple {`
`72`	`72`	`@include linear-gradient($dark-blue, $purple);`
`73`	`73`	`box-shadow: 0px 4px 7px 0px rgba(170, 49, 255, 0.48);`
`74`		`- transition: all 0.5s;`
	`74`	`+ transition: all .2s;`
`75`	`75`	`&:hover {`
`76`	`76`
`77`	`77`	`box-shadow: 0px 7px 13px 0px rgba(170, 49, 255, 0.80);`
`78`		`- transition: all 0.5s;`
	`78`	`+ transition: all .2s;`
`79`	`79`	`}`
`80`	`80`	`}`