From a2f2507e3b6bcf9c87aee17e4fdc31bd5b735d5a Mon Sep 17 00:00:00 2001 From: Noufal21 Date: Sat, 18 Apr 2015 20:08:07 +0500 Subject: [PATCH 01/32] Component: Meter Styling Initial Styling for Meter --- scss/atoms/typography/_typography.scss | 17 +++++++++++++++++ scss/atoms/typography/index.html | 12 ++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 scss/atoms/typography/index.html diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 7fd9b32..4ac8bea 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -5,3 +5,20 @@ @import "variables", "functions"; + +meter { + -webkit-appearance: none; + width: 550px; + height: 25px; +} + +meter::-webkit-meter-bar { + width: 550px; + height: 25px; + box-shadow: inset 0px 0px 7px -2px rgba(0,0,0,0.35); + background:#f1f1f1; +} + +meter::-webkit-meter-optimum-value { + background: #37BFC9; +} diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html new file mode 100644 index 0000000..24a5361 --- /dev/null +++ b/scss/atoms/typography/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file From 9a3af8b38716434ac277fd3ec1c82a7e5fa7fde5 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Sat, 18 Apr 2015 20:23:58 +0500 Subject: [PATCH 02/32] Component: Meter Styling Initial Styling for Meter --- scss/atoms/typography/_typography.scss | 17 +++++++++++++++++ scss/atoms/typography/index.html | 12 ++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 scss/atoms/typography/index.html diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 7fd9b32..4ac8bea 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -5,3 +5,20 @@ @import "variables", "functions"; + +meter { + -webkit-appearance: none; + width: 550px; + height: 25px; +} + +meter::-webkit-meter-bar { + width: 550px; + height: 25px; + box-shadow: inset 0px 0px 7px -2px rgba(0,0,0,0.35); + background:#f1f1f1; +} + +meter::-webkit-meter-optimum-value { + background: #37BFC9; +} diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html new file mode 100644 index 0000000..24a5361 --- /dev/null +++ b/scss/atoms/typography/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file From 82732e513dc929b6d0df561f46b5b556b258024a Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Sat, 18 Apr 2015 22:52:11 +0500 Subject: [PATCH 03/32] Component: Meter Multicolor value bar. --- scss/atoms/typography/_typography.scss | 46 +++++++++++++++++++++----- scss/atoms/typography/index.html | 8 +++-- 2 files changed, 42 insertions(+), 12 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 4ac8bea..66b07f3 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -7,18 +7,46 @@ "functions"; meter { - -webkit-appearance: none; - width: 550px; - height: 25px; + /* Reset the default appearence */ + -webkit-appearance: none; + width: 550px; + height: 25px; } -meter::-webkit-meter-bar { - width: 550px; - height: 25px; - box-shadow: inset 0px 0px 7px -2px rgba(0,0,0,0.35); +.meter::-webkit-meter-bar,.MultiColor::-webkit-meter-bar { + box-shadow: inset 0px 0px 7px -2px rgba(0,0,0,0.35); background:#f1f1f1; } -meter::-webkit-meter-optimum-value { - background: #37BFC9; +.meter::-webkit-meter-optimum-value { + background: #37BFC9; } + + +.MultiColor::-webkit-meter-optimum-value { + /* Reset each sub-category to 20% */ + background-image: linear-gradient( + 90deg, + #3ee3ef 10%, + #3ad5e0 10%, + #3ad5e0 20%, + #34cdd8 20%, + #34cdd8 30%, + #36c6d1 30%, + #36c6d1 40%, + #30bfc9 40%, + #30bfc9 50%, + #2ebac1 50%, + #2ebac1 60%, + #2fb8bf 60%, + #2fb8bf 70%, + #2eb3ba 70%, + #2eb3ba 80%, + #30abb2 80%, + #30abb2 90%, + #2ea7ad 90%, + #2ea7ad 100% + ); + + background-size: 100% 100%; +} \ No newline at end of file diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html index 24a5361..d7d185a 100644 --- a/scss/atoms/typography/index.html +++ b/scss/atoms/typography/index.html @@ -6,7 +6,9 @@ - - + +
+
+ - \ No newline at end of file + From 5b44e949c88fa301a82710627fa23806e64f32e0 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Sat, 18 Apr 2015 22:56:35 +0500 Subject: [PATCH 04/32] Component: Meter MultiColor value bar. --- scss/atoms/typography/_typography.scss | 3 ++- scss/atoms/typography/index.html | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 66b07f3..68fb271 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -49,4 +49,5 @@ meter { ); background-size: 100% 100%; -} \ No newline at end of file +} + \ No newline at end of file diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html index d7d185a..a4bc1a0 100644 --- a/scss/atoms/typography/index.html +++ b/scss/atoms/typography/index.html @@ -6,9 +6,11 @@ - + +

+ \ No newline at end of file From 05b7cef3160c938d08885311ea717a81f7cc0d3c Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Sat, 18 Apr 2015 22:59:32 +0500 Subject: [PATCH 05/32] Component: Meter 1) Add new line at the end 2) MultiColor value bar. --- scss/atoms/typography/_typography.scss | 1 - scss/atoms/typography/index.html | 1 - 2 files changed, 2 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 68fb271..a2264c5 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -50,4 +50,3 @@ meter { background-size: 100% 100%; } - \ No newline at end of file diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html index a4bc1a0..75b8a8a 100644 --- a/scss/atoms/typography/index.html +++ b/scss/atoms/typography/index.html @@ -13,4 +13,3 @@ - \ No newline at end of file From 6834d280b233d11e738271a295fed1ca0721a826 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Sat, 18 Apr 2015 23:12:30 +0500 Subject: [PATCH 06/32] Component: Meter New line at the end of the file is added. --- scss/atoms/typography/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index a2264c5..19926c1 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -49,4 +49,4 @@ meter { ); background-size: 100% 100%; -} +} From f4d3b387aeca6bb43c434f998237a94a899ea7a3 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 21 Apr 2015 22:09:04 +0500 Subject: [PATCH 07/32] Component: Meter change to lowercase as mention in the HTML styling guide. --- scss/atoms/typography/_typography.scss | 56 +++++++++++++------------- scss/atoms/typography/index.html | 4 +- 2 files changed, 29 insertions(+), 31 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 19926c1..3c026e0 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -6,11 +6,10 @@ "variables", "functions"; -meter { - /* Reset the default appearence */ - -webkit-appearance: none; - width: 550px; - height: 25px; +meter { + -webkit-appearance: none; + width: 550px; + height: 25px; } .meter::-webkit-meter-bar,.MultiColor::-webkit-meter-bar { @@ -19,34 +18,33 @@ meter { } .meter::-webkit-meter-optimum-value { - background: #37BFC9; + background: #37BFC9; } .MultiColor::-webkit-meter-optimum-value { - /* Reset each sub-category to 20% */ - background-image: linear-gradient( - 90deg, - #3ee3ef 10%, - #3ad5e0 10%, - #3ad5e0 20%, - #34cdd8 20%, - #34cdd8 30%, - #36c6d1 30%, - #36c6d1 40%, - #30bfc9 40%, - #30bfc9 50%, - #2ebac1 50%, - #2ebac1 60%, - #2fb8bf 60%, - #2fb8bf 70%, - #2eb3ba 70%, - #2eb3ba 80%, - #30abb2 80%, - #30abb2 90%, - #2ea7ad 90%, - #2ea7ad 100% + background-image: linear-gradient( + 90deg, + #3ee3ef 10%, + #3ad5e0 10%, + #3ad5e0 20%, + #34cdd8 20%, + #34cdd8 30%, + #36c6d1 30%, + #36c6d1 40%, + #30bfc9 40%, + #30bfc9 50%, + #2ebac1 50%, + #2ebac1 60%, + #2fb8bf 60%, + #2fb8bf 70%, + #2eb3ba 70%, + #2eb3ba 80%, + #30abb2 80%, + #30abb2 90%, + #2ea7ad 90%, + #2ea7ad 100% ); - background-size: 100% 100%; + background-size: 100% 100%; } diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html index 75b8a8a..f659982 100644 --- a/scss/atoms/typography/index.html +++ b/scss/atoms/typography/index.html @@ -1,5 +1,5 @@ - - + + From c6d38bc3ebc2fcb99f1c5f4842376ab27f7b4cb2 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 21 Apr 2015 22:27:06 +0500 Subject: [PATCH 08/32] Component: Meter Solve all the issue. --- scss/atoms/typography/_typography.scss | 47 +++++++++++++------------- scss/atoms/typography/index.html | 3 +- 2 files changed, 24 insertions(+), 26 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 3c026e0..9b3f0fd 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -12,9 +12,9 @@ meter { height: 25px; } -.meter::-webkit-meter-bar,.MultiColor::-webkit-meter-bar { +.meter::-webkit-meter-bar, .MultiColor::-webkit-meter-bar { box-shadow: inset 0px 0px 7px -2px rgba(0,0,0,0.35); - background:#f1f1f1; + background: #f1f1f1; } .meter::-webkit-meter-optimum-value { @@ -24,27 +24,26 @@ meter { .MultiColor::-webkit-meter-optimum-value { background-image: linear-gradient( - 90deg, - #3ee3ef 10%, - #3ad5e0 10%, - #3ad5e0 20%, - #34cdd8 20%, - #34cdd8 30%, - #36c6d1 30%, - #36c6d1 40%, - #30bfc9 40%, - #30bfc9 50%, - #2ebac1 50%, - #2ebac1 60%, - #2fb8bf 60%, - #2fb8bf 70%, - #2eb3ba 70%, - #2eb3ba 80%, - #30abb2 80%, - #30abb2 90%, - #2ea7ad 90%, - #2ea7ad 100% - ); - + 90deg, + #3ee3ef 10%, + #3ad5e0 10%, + #3ad5e0 20%, + #34cdd8 20%, + #34cdd8 30%, + #36c6d1 30%, + #36c6d1 40%, + #30bfc9 40%, + #30bfc9 50%, + #2ebac1 50%, + #2ebac1 60%, + #2fb8bf 60%, + #2fb8bf 70%, + #2eb3ba 70%, + #2eb3ba 80%, + #30abb2 80%, + #30abb2 90%, + #2ea7ad 90%, + #2ea7ad 100% + ); background-size: 100% 100%; } diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html index f659982..9e20f90 100644 --- a/scss/atoms/typography/index.html +++ b/scss/atoms/typography/index.html @@ -2,8 +2,7 @@ - - + Meter Styling From 4f6d7baf25b75b78b9f70b179ce228554399e9d0 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 21 Apr 2015 23:47:02 +0500 Subject: [PATCH 09/32] Component: Meter Solve all the issue. --- scss/atoms/typography/_typography.scss | 40 +++++++++++++------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 9b3f0fd..2f7847b 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -24,26 +24,26 @@ meter { .MultiColor::-webkit-meter-optimum-value { background-image: linear-gradient( - 90deg, - #3ee3ef 10%, - #3ad5e0 10%, - #3ad5e0 20%, - #34cdd8 20%, - #34cdd8 30%, - #36c6d1 30%, - #36c6d1 40%, - #30bfc9 40%, - #30bfc9 50%, - #2ebac1 50%, - #2ebac1 60%, - #2fb8bf 60%, - #2fb8bf 70%, - #2eb3ba 70%, - #2eb3ba 80%, - #30abb2 80%, - #30abb2 90%, - #2ea7ad 90%, - #2ea7ad 100% + 90deg, + #3ee3ef 10%, + #3ad5e0 10%, + #3ad5e0 20%, + #34cdd8 20%, + #34cdd8 30%, + #36c6d1 30%, + #36c6d1 40%, + #30bfc9 40%, + #30bfc9 50%, + #2ebac1 50%, + #2ebac1 60%, + #2fb8bf 60%, + #2fb8bf 70%, + #2eb3ba 70%, + #2eb3ba 80%, + #30abb2 80%, + #30abb2 90%, + #2ea7ad 90%, + #2ea7ad 100% ); background-size: 100% 100%; } From 3fe19f4b4945d0474ad0e54b3d885d129acf1489 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Wed, 22 Apr 2015 21:37:03 +0500 Subject: [PATCH 10/32] Component: Meter Style new meter name as StripMeter --- scss/atoms/typography/_typography.scss | 22 ++++++++++++++++++---- scss/atoms/typography/index.html | 7 +++++-- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 2f7847b..87b4c1b 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -6,23 +6,23 @@ "variables", "functions"; -meter { +meter { -webkit-appearance: none; width: 550px; height: 25px; } -.meter::-webkit-meter-bar, .MultiColor::-webkit-meter-bar { +.meter::-webkit-meter-bar, .multiColor::-webkit-meter-bar, .stripMeter::-webkit-meter-bar { box-shadow: inset 0px 0px 7px -2px rgba(0,0,0,0.35); background: #f1f1f1; } .meter::-webkit-meter-optimum-value { - background: #37BFC9; + background: #37bfc9; } -.MultiColor::-webkit-meter-optimum-value { +.multiColor::-webkit-meter-optimum-value { background-image: linear-gradient( 90deg, #3ee3ef 10%, @@ -45,5 +45,19 @@ meter { #2ea7ad 90%, #2ea7ad 100% ); + background-size: 100% 100%; } + +.stripMeter::-webkit-meter-optimum-value{ + background-image: linear-gradient( + 135deg, + transparent, + transparent 33%, + #37bfc9 33%, + #37bfc9 66%, + transparent 66% + ); + background-size: 50px 25px; +} + diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html index 9e20f90..67102b8 100644 --- a/scss/atoms/typography/index.html +++ b/scss/atoms/typography/index.html @@ -9,6 +9,9 @@

- - + +
+
+ + From 657c890fc993a151ef46616bdb1024e3995056c9 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Wed, 22 Apr 2015 21:45:18 +0500 Subject: [PATCH 11/32] Component: Meter Do changes according to Jqueru CSS guide. --- scss/atoms/typography/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 87b4c1b..ff75009 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -13,7 +13,7 @@ meter { } .meter::-webkit-meter-bar, .multiColor::-webkit-meter-bar, .stripMeter::-webkit-meter-bar { - box-shadow: inset 0px 0px 7px -2px rgba(0,0,0,0.35); + box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); background: #f1f1f1; } From f8edb9987a2391940fa81fda98e9f54d5c67ef3f Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Wed, 22 Apr 2015 21:46:28 +0500 Subject: [PATCH 12/32] Component:Meter Do changes according to CSS styling guide. --- scss/atoms/typography/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index ff75009..75055e8 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -13,7 +13,7 @@ meter { } .meter::-webkit-meter-bar, .multiColor::-webkit-meter-bar, .stripMeter::-webkit-meter-bar { - box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); + box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); background: #f1f1f1; } From 8736b7fc67d79cfd6b23559f7bb42ff5ddd32a4f Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 28 Apr 2015 22:17:00 +0500 Subject: [PATCH 13/32] component: meter --- demo/index.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 demo/index.html diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..0fa7867 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,17 @@ + + + + + Meter Styling + + + + +
+
+ +
+
+ + + From cdbe43bb4c71541fd395642e61de93391e1fe02a Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 28 Apr 2015 22:19:07 +0500 Subject: [PATCH 14/32] component: Meter --- scss/atoms/typography/index.html | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 scss/atoms/typography/index.html diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html deleted file mode 100644 index 67102b8..0000000 --- a/scss/atoms/typography/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - Meter Styling - - - - -
-
- -
-
- - - From e60d8201c53e14c70a25d38757afffddf537f04e Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 28 Apr 2015 22:36:57 +0500 Subject: [PATCH 15/32] component: Meter --- demo/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/index.html b/demo/index.html index 0fa7867..5e2cd33 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,7 +3,7 @@ Meter Styling - + From 61bb3b4e114e15a16bc73daf036cb7fb980d09f7 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Thu, 30 Apr 2015 13:30:11 +0500 Subject: [PATCH 16/32] Component: Meter --- demo/Meter.html | 17 +++++++++++++ scss/atoms/_Meter.scss | 58 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 demo/Meter.html create mode 100644 scss/atoms/_Meter.scss diff --git a/demo/Meter.html b/demo/Meter.html new file mode 100644 index 0000000..0fa7867 --- /dev/null +++ b/demo/Meter.html @@ -0,0 +1,17 @@ + + + + + Meter Styling + + + + +
+
+ +
+
+ + + diff --git a/scss/atoms/_Meter.scss b/scss/atoms/_Meter.scss new file mode 100644 index 0000000..cec1cae --- /dev/null +++ b/scss/atoms/_Meter.scss @@ -0,0 +1,58 @@ +// ========================================================================== +// Meter +// ========================================================================== +meter { + -webkit-appearance: none; + width: 550px; + height: 25px; +} + +.meter::-webkit-meter-bar, .multiColor::-webkit-meter-bar, .stripMeter::-webkit-meter-bar { + box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); + background: #f1f1f1; +} + +.meter::-webkit-meter-optimum-value { + background: #37bfc9; +} + + +.multiColor::-webkit-meter-optimum-value { + background-image: linear-gradient( + 90deg, + #3ee3ef 10%, + #3ad5e0 10%, + #3ad5e0 20%, + #34cdd8 20%, + #34cdd8 30%, + #36c6d1 30%, + #36c6d1 40%, + #30bfc9 40%, + #30bfc9 50%, + #2ebac1 50%, + #2ebac1 60%, + #2fb8bf 60%, + #2fb8bf 70%, + #2eb3ba 70%, + #2eb3ba 80%, + #30abb2 80%, + #30abb2 90%, + #2ea7ad 90%, + #2ea7ad 100% + ); + + background-size: 100% 100%; +} + +.stripMeter::-webkit-meter-optimum-value{ + background-image: linear-gradient( + 135deg, + transparent, + transparent 33%, + #37bfc9 33%, + #37bfc9 66%, + transparent 66% + ); + background-size: 50px 25px; +} + From ca93823703e9b4f6d1b8b616d85b16d71a328b81 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Thu, 30 Apr 2015 13:32:02 +0500 Subject: [PATCH 17/32] Component: Meter --- scss/atoms/typography/_typography.scss | 56 -------------------------- 1 file changed, 56 deletions(-) diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index 75055e8..7fd9b32 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -5,59 +5,3 @@ @import "variables", "functions"; - -meter { - -webkit-appearance: none; - width: 550px; - height: 25px; -} - -.meter::-webkit-meter-bar, .multiColor::-webkit-meter-bar, .stripMeter::-webkit-meter-bar { - box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); - background: #f1f1f1; -} - -.meter::-webkit-meter-optimum-value { - background: #37bfc9; -} - - -.multiColor::-webkit-meter-optimum-value { - background-image: linear-gradient( - 90deg, - #3ee3ef 10%, - #3ad5e0 10%, - #3ad5e0 20%, - #34cdd8 20%, - #34cdd8 30%, - #36c6d1 30%, - #36c6d1 40%, - #30bfc9 40%, - #30bfc9 50%, - #2ebac1 50%, - #2ebac1 60%, - #2fb8bf 60%, - #2fb8bf 70%, - #2eb3ba 70%, - #2eb3ba 80%, - #30abb2 80%, - #30abb2 90%, - #2ea7ad 90%, - #2ea7ad 100% - ); - - background-size: 100% 100%; -} - -.stripMeter::-webkit-meter-optimum-value{ - background-image: linear-gradient( - 135deg, - transparent, - transparent 33%, - #37bfc9 33%, - #37bfc9 66%, - transparent 66% - ); - background-size: 50px 25px; -} - From 42cf9ef852338a3daae79630d19939008b482802 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 01:49:05 +0500 Subject: [PATCH 18/32] Component:Meter --- demo/Meter.html | 2 +- demo/index.html | 17 ----------------- scss/atoms/{ => Meter}/_Meter.scss | 0 scss/atoms/typography/index.html | 0 4 files changed, 1 insertion(+), 18 deletions(-) delete mode 100644 demo/index.html rename scss/atoms/{ => Meter}/_Meter.scss (100%) create mode 100644 scss/atoms/typography/index.html diff --git a/demo/Meter.html b/demo/Meter.html index 0fa7867..5e2cd33 100644 --- a/demo/Meter.html +++ b/demo/Meter.html @@ -3,7 +3,7 @@ Meter Styling - + diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index 5e2cd33..0000000 --- a/demo/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - Meter Styling - - - - -
-
- -
-
- - - diff --git a/scss/atoms/_Meter.scss b/scss/atoms/Meter/_Meter.scss similarity index 100% rename from scss/atoms/_Meter.scss rename to scss/atoms/Meter/_Meter.scss diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html new file mode 100644 index 0000000..e69de29 From b791b9136cd6300d1755e4427f12273c06c80d20 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 02:34:54 +0500 Subject: [PATCH 19/32] component:meter --- scss/lint.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/lint.scss b/scss/lint.scss index 186712c..ff2c802 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -12,7 +12,8 @@ @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography"; + "atoms/Meter/Meter"; @import "views/main"; From 0e866ff09bcef71a6af18787870ac7cedf5380a5 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 07:14:55 +0500 Subject: [PATCH 20/32] Component: Meter Resolve all the isssue --- demo/Meter.html | 23 +++--- scss/atoms/Meter/_Meter.scss | 124 +++++++++++++++++++++++-------- scss/atoms/Meter/_variables.scss | 20 +++++ scss/atoms/typography/index.html | 0 scss/lint.scss | 2 +- 5 files changed, 123 insertions(+), 46 deletions(-) create mode 100644 scss/atoms/Meter/_variables.scss delete mode 100644 scss/atoms/typography/index.html diff --git a/demo/Meter.html b/demo/Meter.html index 5e2cd33..5e2b10c 100644 --- a/demo/Meter.html +++ b/demo/Meter.html @@ -1,17 +1,14 @@ - - - Meter Styling - - - - -
-
- -
-
- + + + Meter Styling + + + + + + + diff --git a/scss/atoms/Meter/_Meter.scss b/scss/atoms/Meter/_Meter.scss index cec1cae..b09a898 100644 --- a/scss/atoms/Meter/_Meter.scss +++ b/scss/atoms/Meter/_Meter.scss @@ -1,58 +1,118 @@ -// ========================================================================== -// Meter -// ========================================================================== +/* +* ========================================================================== +* meter +* ========================================================================== +*/ + +@import + "variables", + "functions"; + +.meter{ + margin:10px; +} meter { -webkit-appearance: none; + -moz-appearance: none; width: 550px; - height: 25px; + height: 25px; + margin:10px; + display:block; + box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); + background: $meterbar-backgroundcolor; } -.meter::-webkit-meter-bar, .multiColor::-webkit-meter-bar, .stripMeter::-webkit-meter-bar { +.meter-simple::-webkit-meter-bar, +.meter-multicolor::-webkit-meter-bar, +.meter-strip::-webkit-meter-bar { box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); - background: #f1f1f1; + background: $meterbar-backgroundcolor; } -.meter::-webkit-meter-optimum-value { - background: #37bfc9; +.meter-simple::-webkit-meter-optimum-value { + background: $chassis-blue; } -.multiColor::-webkit-meter-optimum-value { +.meter-multicolor::-webkit-meter-optimum-value { background-image: linear-gradient( 90deg, - #3ee3ef 10%, - #3ad5e0 10%, - #3ad5e0 20%, - #34cdd8 20%, - #34cdd8 30%, - #36c6d1 30%, - #36c6d1 40%, - #30bfc9 40%, - #30bfc9 50%, - #2ebac1 50%, - #2ebac1 60%, - #2fb8bf 60%, - #2fb8bf 70%, - #2eb3ba 70%, - #2eb3ba 80%, - #30abb2 80%, - #30abb2 90%, - #2ea7ad 90%, - #2ea7ad 100% + adjust-saturation($color , $percentage) 10%, + adjust-saturation($color , $percentage - 5%) 10%, + adjust-saturation($color , $percentage - 5%) 20%, + adjust-saturation($color , $percentage - 10%) 20%, + adjust-saturation($color , $percentage - 10%) 30%, + adjust-saturation($color , $percentage - 15%) 30%, + adjust-saturation($color , $percentage - 15%) 40%, + adjust-saturation($color , $percentage - 20%) 40%, + adjust-saturation($color , $percentage - 20%) 50%, + adjust-saturation($color , $percentage - 25%) 50%, + adjust-saturation($color , $percentage - 25%) 60%, + adjust-saturation($color , $percentage - 30%) 60%, + adjust-saturation($color , $percentage - 30%) 70%, + adjust-saturation($color , $percentage - 35%) 70%, + adjust-saturation($color , $percentage - 35%) 80%, + adjust-saturation($color , $percentage - 40%) 80%, + adjust-saturation($color , $percentage - 40%) 90%, + adjust-saturation($color , $percentage - 45%) 90%, + adjust-saturation($color , $percentage - 45%) 100% ); - background-size: 100% 100%; } -.stripMeter::-webkit-meter-optimum-value{ +.meter-strip::-webkit-meter-optimum-value{ background-image: linear-gradient( 135deg, transparent, transparent 33%, - #37bfc9 33%, - #37bfc9 66%, + $chassis-blue 33%, + $chassis-blue 66%, transparent 66% ); background-size: 50px 25px; } + + +.meter-simple:-moz-meter-optimum::-moz-meter-bar { + background: $chassis-blue; +} + + +.meter-multicolor:-moz-meter-optimum::-moz-meter-bar { + background-image: linear-gradient( + 90deg, + adjust-saturation($color , $percentage) 10%, + adjust-saturation($color , $percentage - 5%) 10%, + adjust-saturation($color , $percentage - 5%) 20%, + adjust-saturation($color , $percentage - 10%) 20%, + adjust-saturation($color , $percentage - 10%) 30%, + adjust-saturation($color , $percentage - 15%) 30%, + adjust-saturation($color , $percentage - 15%) 40%, + adjust-saturation($color , $percentage - 20%) 40%, + adjust-saturation($color , $percentage - 20%) 50%, + adjust-saturation($color , $percentage - 25%) 50%, + adjust-saturation($color , $percentage - 25%) 60%, + adjust-saturation($color , $percentage - 30%) 60%, + adjust-saturation($color , $percentage - 30%) 70%, + adjust-saturation($color , $percentage - 35%) 70%, + adjust-saturation($color , $percentage - 35%) 80%, + adjust-saturation($color , $percentage - 40%) 80%, + adjust-saturation($color , $percentage - 40%) 90%, + adjust-saturation($color , $percentage - 45%) 90%, + adjust-saturation($color , $percentage - 45%) 100% + ); + background-size: 100% 100%; +} + +.meter-strip:-moz-meter-optimum::-moz-meter-bar { + background-image: linear-gradient( + 135deg, + transparent, + transparent 33%, + $chassis-blue 33%, + $chassis-blue 66%, + transparent 66% + ); + background-size: 50px 25px; +} diff --git a/scss/atoms/Meter/_variables.scss b/scss/atoms/Meter/_variables.scss new file mode 100644 index 0000000..61ba432 --- /dev/null +++ b/scss/atoms/Meter/_variables.scss @@ -0,0 +1,20 @@ +/* +* ========================================================================== +* meter variables +* ========================================================================== +*/ +$chassis-blue: #37bfc9; +$meterbar-backgroundcolor: #f1f1f1; + + +/* +* For multi color Meter bar +* Scales $color's saturation value by $amount. $amount can be negative. +* scale-saturation($color, $amount) +*/ + +/* This is the staring color. */ +$color: #3ee3ef ; + +/* The starting percentage */ +$percentage: 0; diff --git a/scss/atoms/typography/index.html b/scss/atoms/typography/index.html deleted file mode 100644 index e69de29..0000000 diff --git a/scss/lint.scss b/scss/lint.scss index ff2c802..b4aab62 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -13,7 +13,7 @@ @import "atoms/icons/icons", "atoms/typography/typography"; - "atoms/Meter/Meter"; + "atoms/meter/meter"; @import "views/main"; From 4608cdce052405b9f40b86d93cf20a110fb6823d Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 07:17:37 +0500 Subject: [PATCH 21/32] Component: Meter --- scss/lint.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/lint.scss b/scss/lint.scss index b4aab62..1482361 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -12,7 +12,7 @@ @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography";, "atoms/meter/meter"; @import From 5dbdef66bf1cb56a7ab6d6a3dfcd5f3b6065b84f Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 07:19:52 +0500 Subject: [PATCH 22/32] Component: Meter --- scss/lint.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/lint.scss b/scss/lint.scss index 1482361..c4d405e 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -12,7 +12,7 @@ @import "atoms/icons/icons", - "atoms/typography/typography";, + "atoms/typography/typography", "atoms/meter/meter"; @import From 3565924129ab9007641738c9f3a10bf77d67bc06 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 07:28:37 +0500 Subject: [PATCH 23/32] component: Meter --- scss/atoms/Meter/_Meter.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scss/atoms/Meter/_Meter.scss b/scss/atoms/Meter/_Meter.scss index b09a898..b3b68a2 100644 --- a/scss/atoms/Meter/_Meter.scss +++ b/scss/atoms/Meter/_Meter.scss @@ -5,8 +5,7 @@ */ @import - "variables", - "functions"; + "variables"; .meter{ margin:10px; From a11187076457a9c04ee88fe2e63c5d612a00c4f4 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 08:14:53 +0500 Subject: [PATCH 24/32] Update Meter.html --- demo/Meter.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/Meter.html b/demo/Meter.html index 5e2b10c..c6ee5b9 100644 --- a/demo/Meter.html +++ b/demo/Meter.html @@ -6,9 +6,9 @@ - - - + + + From 3f04bfc1f9b26679b8fc260ac378fcde5e1c762e Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 08:15:25 +0500 Subject: [PATCH 25/32] Component:Meter --- demo/Meter.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/Meter.html b/demo/Meter.html index c6ee5b9..ed80f09 100644 --- a/demo/Meter.html +++ b/demo/Meter.html @@ -8,7 +8,7 @@ - + From ab7a73106b2f0dc0e839e4632d1392de2ca937be Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 08:16:21 +0500 Subject: [PATCH 26/32] Update Meter.html --- demo/Meter.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/Meter.html b/demo/Meter.html index ed80f09..32d0724 100644 --- a/demo/Meter.html +++ b/demo/Meter.html @@ -7,7 +7,7 @@ - + From 6cc28a703efb2675e5a3a1ee3b133baa50cf401b Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 08:18:12 +0500 Subject: [PATCH 27/32] Rename _Meter.scss to _meter.scss --- scss/atoms/Meter/{_Meter.scss => _meter.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename scss/atoms/Meter/{_Meter.scss => _meter.scss} (100%) diff --git a/scss/atoms/Meter/_Meter.scss b/scss/atoms/Meter/_meter.scss similarity index 100% rename from scss/atoms/Meter/_Meter.scss rename to scss/atoms/Meter/_meter.scss From 7345eb9a604506cbfea7838e3498254db7c7f779 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 08:49:19 +0500 Subject: [PATCH 28/32] Component: Meter --- scss/atoms/{Meter => meterr}/_meter.scss | 2 +- scss/atoms/{Meter => meterr}/_variables.scss | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename scss/atoms/{Meter => meterr}/_meter.scss (99%) rename scss/atoms/{Meter => meterr}/_variables.scss (100%) diff --git a/scss/atoms/Meter/_meter.scss b/scss/atoms/meterr/_meter.scss similarity index 99% rename from scss/atoms/Meter/_meter.scss rename to scss/atoms/meterr/_meter.scss index b3b68a2..b9a92ff 100644 --- a/scss/atoms/Meter/_meter.scss +++ b/scss/atoms/meterr/_meter.scss @@ -8,7 +8,7 @@ "variables"; .meter{ - margin:10px; + margin: 10px; } meter { -webkit-appearance: none; diff --git a/scss/atoms/Meter/_variables.scss b/scss/atoms/meterr/_variables.scss similarity index 100% rename from scss/atoms/Meter/_variables.scss rename to scss/atoms/meterr/_variables.scss From 189024d6e176996d9a4e28fc0297d1837c44d209 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Mon, 4 May 2015 08:50:13 +0500 Subject: [PATCH 29/32] Component: Meter --- scss/atoms/{meterr => meter}/_meter.scss | 0 scss/atoms/{meterr => meter}/_variables.scss | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename scss/atoms/{meterr => meter}/_meter.scss (100%) rename scss/atoms/{meterr => meter}/_variables.scss (100%) diff --git a/scss/atoms/meterr/_meter.scss b/scss/atoms/meter/_meter.scss similarity index 100% rename from scss/atoms/meterr/_meter.scss rename to scss/atoms/meter/_meter.scss diff --git a/scss/atoms/meterr/_variables.scss b/scss/atoms/meter/_variables.scss similarity index 100% rename from scss/atoms/meterr/_variables.scss rename to scss/atoms/meter/_variables.scss From f95e6834afc3cb5b121024f97f790cad85b45fc6 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 5 May 2015 22:33:53 +0500 Subject: [PATCH 30/32] Component: Meter Meter.html => meter.html --- demo/{Meter.html => meter.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename demo/{Meter.html => meter.html} (100%) diff --git a/demo/Meter.html b/demo/meter.html similarity index 100% rename from demo/Meter.html rename to demo/meter.html From 00ac522c165aa7c03442347939a0155eebb1d545 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 5 May 2015 22:43:09 +0500 Subject: [PATCH 31/32] Component:Meter change all the nutpicks. :) --- demo/meter.html | 3 +- scss/atoms/meter/_meter.scss | 55 +++----------------------------- scss/atoms/meter/_variables.scss | 8 ++--- 3 files changed, 10 insertions(+), 56 deletions(-) diff --git a/demo/meter.html b/demo/meter.html index 32d0724..3cff232 100644 --- a/demo/meter.html +++ b/demo/meter.html @@ -2,7 +2,7 @@ - Meter Styling + CSS Chassis - Meter @@ -11,4 +11,3 @@ - diff --git a/scss/atoms/meter/_meter.scss b/scss/atoms/meter/_meter.scss index b9a92ff..a73c215 100644 --- a/scss/atoms/meter/_meter.scss +++ b/scss/atoms/meter/_meter.scss @@ -7,9 +7,6 @@ @import "variables"; -.meter{ - margin: 10px; -} meter { -webkit-appearance: none; -moz-appearance: none; @@ -18,66 +15,23 @@ meter { margin:10px; display:block; box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); - background: $meterbar-backgroundcolor; + background: $meterbar-background-color; } .meter-simple::-webkit-meter-bar, .meter-multicolor::-webkit-meter-bar, .meter-strip::-webkit-meter-bar { box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35); - background: $meterbar-backgroundcolor; -} - -.meter-simple::-webkit-meter-optimum-value { - background: $chassis-blue; + background: $meterbar-background-color; } - -.meter-multicolor::-webkit-meter-optimum-value { - background-image: linear-gradient( - 90deg, - adjust-saturation($color , $percentage) 10%, - adjust-saturation($color , $percentage - 5%) 10%, - adjust-saturation($color , $percentage - 5%) 20%, - adjust-saturation($color , $percentage - 10%) 20%, - adjust-saturation($color , $percentage - 10%) 30%, - adjust-saturation($color , $percentage - 15%) 30%, - adjust-saturation($color , $percentage - 15%) 40%, - adjust-saturation($color , $percentage - 20%) 40%, - adjust-saturation($color , $percentage - 20%) 50%, - adjust-saturation($color , $percentage - 25%) 50%, - adjust-saturation($color , $percentage - 25%) 60%, - adjust-saturation($color , $percentage - 30%) 60%, - adjust-saturation($color , $percentage - 30%) 70%, - adjust-saturation($color , $percentage - 35%) 70%, - adjust-saturation($color , $percentage - 35%) 80%, - adjust-saturation($color , $percentage - 40%) 80%, - adjust-saturation($color , $percentage - 40%) 90%, - adjust-saturation($color , $percentage - 45%) 90%, - adjust-saturation($color , $percentage - 45%) 100% - ); - background-size: 100% 100%; -} - -.meter-strip::-webkit-meter-optimum-value{ - background-image: linear-gradient( - 135deg, - transparent, - transparent 33%, - $chassis-blue 33%, - $chassis-blue 66%, - transparent 66% - ); - background-size: 50px 25px; -} - - - +.meter-simple::-webkit-meter-optimum-value, .meter-simple:-moz-meter-optimum::-moz-meter-bar { background: $chassis-blue; } +.meter-multicolor::-webkit-meter-optimum-value, .meter-multicolor:-moz-meter-optimum::-moz-meter-bar { background-image: linear-gradient( 90deg, @@ -104,6 +58,7 @@ meter { background-size: 100% 100%; } +.meter-strip::-webkit-meter-optimum-value, .meter-strip:-moz-meter-optimum::-moz-meter-bar { background-image: linear-gradient( 135deg, diff --git a/scss/atoms/meter/_variables.scss b/scss/atoms/meter/_variables.scss index 61ba432..e500ecf 100644 --- a/scss/atoms/meter/_variables.scss +++ b/scss/atoms/meter/_variables.scss @@ -4,7 +4,7 @@ * ========================================================================== */ $chassis-blue: #37bfc9; -$meterbar-backgroundcolor: #f1f1f1; +$meterbar-background-color: #f1f1f1; /* @@ -13,8 +13,8 @@ $meterbar-backgroundcolor: #f1f1f1; * scale-saturation($color, $amount) */ -/* This is the staring color. */ -$color: #3ee3ef ; +/* This is the staring color, whose the saturation increse with percentage. */ +$color: #3ee3ef; -/* The starting percentage */ +/* The starting percentage, which increse the saturation of the color. */ $percentage: 0; From ff4266cb73f595642bc311e62bf726593e155c97 Mon Sep 17 00:00:00 2001 From: Muhammad Noufal Date: Tue, 5 May 2015 22:58:21 +0500 Subject: [PATCH 32/32] Component:Meter --- scss/atoms/meter/_meter.scss | 48 +++++++++++++++++++++++++++++++++--- 1 file changed, 45 insertions(+), 3 deletions(-) diff --git a/scss/atoms/meter/_meter.scss b/scss/atoms/meter/_meter.scss index a73c215..e742717 100644 --- a/scss/atoms/meter/_meter.scss +++ b/scss/atoms/meter/_meter.scss @@ -25,13 +25,56 @@ meter { background: $meterbar-background-color; } -.meter-simple::-webkit-meter-optimum-value, +.meter-simple::-webkit-meter-optimum-value { + background: $chassis-blue; +} + + +.meter-multicolor::-webkit-meter-optimum-value { + background-image: linear-gradient( + 90deg, + adjust-saturation($color , $percentage) 10%, + adjust-saturation($color , $percentage - 5%) 10%, + adjust-saturation($color , $percentage - 5%) 20%, + adjust-saturation($color , $percentage - 10%) 20%, + adjust-saturation($color , $percentage - 10%) 30%, + adjust-saturation($color , $percentage - 15%) 30%, + adjust-saturation($color , $percentage - 15%) 40%, + adjust-saturation($color , $percentage - 20%) 40%, + adjust-saturation($color , $percentage - 20%) 50%, + adjust-saturation($color , $percentage - 25%) 50%, + adjust-saturation($color , $percentage - 25%) 60%, + adjust-saturation($color , $percentage - 30%) 60%, + adjust-saturation($color , $percentage - 30%) 70%, + adjust-saturation($color , $percentage - 35%) 70%, + adjust-saturation($color , $percentage - 35%) 80%, + adjust-saturation($color , $percentage - 40%) 80%, + adjust-saturation($color , $percentage - 40%) 90%, + adjust-saturation($color , $percentage - 45%) 90%, + adjust-saturation($color , $percentage - 45%) 100% + ); + background-size: 100% 100%; +} + +.meter-strip::-webkit-meter-optimum-value { + background-image: linear-gradient( + 135deg, + transparent, + transparent 33%, + $chassis-blue 33%, + $chassis-blue 66%, + transparent 66% + ); + background-size: 50px 25px; +} + + + .meter-simple:-moz-meter-optimum::-moz-meter-bar { background: $chassis-blue; } -.meter-multicolor::-webkit-meter-optimum-value, .meter-multicolor:-moz-meter-optimum::-moz-meter-bar { background-image: linear-gradient( 90deg, @@ -58,7 +101,6 @@ meter { background-size: 100% 100%; } -.meter-strip::-webkit-meter-optimum-value, .meter-strip:-moz-meter-optimum::-moz-meter-bar { background-image: linear-gradient( 135deg,