Merge pull request #352 from PatrykLucka/enhance/341

Style Input type=color (#341)
ConsenSysMesh · Nov 20, 2019 · d24ebe9 · d24ebe9
2 parents 365a770 + 1aaa8ce
commit d24ebe9
Show file tree

Hide file tree

Showing 7 changed files with 518 additions and 0 deletions.
diff --git a/src/EthAddress/__snapshots__/EthAddress.test.js.snap b/src/EthAddress/__snapshots__/EthAddress.test.js.snap
@@ -336,6 +336,44 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }
@@ -789,6 +827,44 @@ exports[`EthAddress component sanity matches default snapshot textLabels 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }
@@ -1216,6 +1292,44 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }
@@ -1669,6 +1783,44 @@ exports[`EthAddress component sanity matches themed snapshot textLabels 1`] = `
   pointer-events: none;
 }
 
+.c2[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c2[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c2[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c2:valid {
   border-color: #28C081;
 }

diff --git a/src/Field/__snapshots__/Field.test.js.snap b/src/Field/__snapshots__/Field.test.js.snap
@@ -76,6 +76,44 @@ exports[`Field component sanity matches default snapshot 1`] = `
   pointer-events: none;
 }
 
+.c4[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c4[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c4[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c4[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c4:valid {
   border-color: #28C081;
 }
@@ -190,6 +228,44 @@ exports[`Field component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c4[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c4[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c4[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c4[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c4:valid {
   border-color: #28C081;
 }

diff --git a/src/Form/__snapshots__/form.test.js.snap b/src/Form/__snapshots__/form.test.js.snap
@@ -115,6 +115,44 @@ exports[`Form component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
+.c6[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c6[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c6[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c6[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c6:valid {
   border-color: #28C081;
 }
@@ -483,6 +521,44 @@ exports[`Form component sanity renders children elements 1`] = `
   pointer-events: none;
 }
 
+.c6[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c6[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c6[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c6[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
 .was-validated .c6:valid {
   border-color: #28C081;
 }