You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/09/17 07:20:46 UTC

[royale-asjs] branch develop updated: invert buttons position in NumericStepper responsive mode. Left decrease, Right increase, and update jewel themes

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new bd669ea  invert buttons position in NumericStepper responsive mode. Left decrease, Right increase, and update jewel themes
bd669ea is described below

commit bd669ea4c25eb6401c69ab7408d0ad7d1f499c93
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Sep 17 09:20:39 2018 +0200

    invert buttons position in NumericStepper responsive mode. Left decrease, Right increase, and update jewel themes
---
 .../projects/Jewel/src/main/resources/defaults.css |  5 +++-
 .../src/main/sass/components/_numericstepper.sass  |  4 ++--
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../src/main/resources/defaults.css                | 28 +++++++++++-----------
 .../JewelTheme/src/main/resources/defaults.css     |  4 ++--
 .../sass/components-primary/_numericstepper.sass   |  4 ++--
 28 files changed, 346 insertions(+), 343 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index b599428..d3d5ba9 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -2978,8 +2978,11 @@ j|NumericStepper {
     width: 39px;
     height: 38px;
   }
+  .jewel.spinner .jewel.button.up {
+    left: 149px;
+  }
   .jewel.spinner .jewel.button.down {
-    left: 110px;
+    left: -39px;
   }
 }
 j|Spinner {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
index 084b6b1..59daacd 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
@@ -95,10 +95,10 @@ j|NumericStepper
         
             &.up
                 // position: absolute
-                // left: 20px
+                left: 149px 
             &.down
                 // position: absolute
-                left: 110px 
+                left: -39px
 
     
 j|Spinner
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index ba7d1c0..838cd53 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #b427b1 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index d759269..393c0b9 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #24a3ef !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index ff8936e..e7e744d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #7eb435 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index f826abf..c57f98a 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #34a241 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 68545fb..4251ec8 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #f28809 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index f4681fe..c6ede70 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #dc121a !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index a308535..5263a91 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #2767a9 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index b853cfb..0cdf259 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #f7a726 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 963bf6d..e8dddf8 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #ed4812 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 2cc2373..362d0b4 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #24948c !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index e83b769..20f5a9d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #58267c !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index c57e435..9e84436 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -425,18 +425,6 @@ j|Card {
   background: #cac00a !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #737373 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -453,6 +441,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #737373 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -492,11 +492,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #333333;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #333333;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 990b74d..a80f1d7 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #b427b1 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index fe60e39..7de8aad 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #24a3ef !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index d47d166..412c5a8 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #7eb435 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 7dd00de..c1ee37f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #34a241 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 642c659..1d6b025 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #f28809 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index a663764..a9506f6 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #dc121a !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index ed04383..ad0d3b3 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #2767a9 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 82eb6ce..252c04e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #f7a726 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index d67fe36..c0aef5e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #ed4812 !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 0111f32..8673f2e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #24948c !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 0547b00..ac26f5f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #58267c !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 0c212c1..8fe6d0e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
   background: #cac00a !important;
 }
 
-.jewel.navigationlink {
-  margin: 0;
-  padding: 0 16px;
-  font-family: "Lato", sans-serif;
-  font-size: 1em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
-  background: #f3f3f3 !important;
-}
-
 .jewel.label {
   font-family: "Lato", sans-serif;
   font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
   background-color: #ffffff;
 }
 
+.jewel.navigationlink {
+  margin: 0;
+  padding: 0 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+  background: #f3f3f3 !important;
+}
+
 .jewel.numericstepper .jewel.textinput input {
   width: 8em;
   border-radius: 0.25rem 0px 0px 0.25rem;
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 4e3f71d..e108359 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -491,11 +491,11 @@ j|Card {
 @media (max-width: 992px) {
   .jewel.spinner .jewel.button.up {
     border: 1px solid #b3b3b3;
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
     border: 1px solid #b3b3b3;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
   }
 }
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
index e003904..0495967 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
@@ -70,8 +70,8 @@ $numericstepper-border-radius: $border-radius
         .jewel.button
             &.up
                 border: 1px solid darken($default-color, 15%)
-                border-radius: $numericstepper-border-radius 0 0 $numericstepper-border-radius
+                border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
             &.down
                 border: 1px solid darken($default-color, 15%)
-                border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
+                border-radius: $numericstepper-border-radius 0 0 $numericstepper-border-radius
                 border-top-style: solid