Close #382: make sure sketchy's check/radio styles get applied

rstudio · Oct 25, 2021 · 3b45c9a · 3b45c9a
1 parent e89f267
commit 3b45c9a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 23 deletions.
diff --git a/R/sysdata.rda b/R/sysdata.rda
diff --git a/inst/lib/bsw4/dist/sketchy/_bootswatch.scss b/inst/lib/bsw4/dist/sketchy/_bootswatch.scss
@@ -154,8 +154,8 @@ select.form-control {
   border-radius: $border-radius-lg-sketchy !important;
 }
 
-[type="checkbox"] {
-  position: relative !important;
+#{$shiny-check} input, #{$shiny-check-inline} input, [type="checkbox"] {
+  position: relative;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -195,8 +195,8 @@ select.form-control {
   }
 }
 
-[type="radio"] {
-  position: relative !important;
+#{$shiny-radio} input, #{$shiny-radio-inline} input, [type="radio"] {
+  position: relative;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;

diff --git a/inst/lib/bsw5/dist/sketchy/_bootswatch.scss b/inst/lib/bsw5/dist/sketchy/_bootswatch.scss
@@ -159,8 +159,8 @@ select.form-control {
   border-radius: $border-radius-lg-sketchy !important;
 }
 
-[type="checkbox"] {
-  position: relative !important;
+#{$shiny-check} input, #{$shiny-check-inline} input, [type="checkbox"] {
+  position: relative;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -200,8 +200,8 @@ select.form-control {
   }
 }
 
-[type="radio"] {
-  position: relative !important;
+#{$shiny-radio} input, #{$shiny-radio-inline} input, [type="radio"] {
+  position: relative;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -235,6 +235,10 @@ select.form-control {
   }
 }
 
+#{$shiny-check}, #{$shiny-check-inline}, #{$shiny-radio}, #{$shiny-radio-inline} {
+  span { padding-left: 1rem; }
+}
+
 .form-check-input {
   &:focus {
     box-shadow: none;

diff --git a/tools/patches/008-bootswatch-sketchy-bs5.patch b/tools/patches/008-bootswatch-sketchy-bs5.patch
@@ -1,22 +1,35 @@
 diff --git a/inst/lib/bsw5/dist/sketchy/_bootswatch.scss b/inst/lib/bsw5/dist/sketchy/_bootswatch.scss
-index 561162b..2925c84 100644
+index 0b2fd6c0..344a014c 100644
 --- a/inst/lib/bsw5/dist/sketchy/_bootswatch.scss
 +++ b/inst/lib/bsw5/dist/sketchy/_bootswatch.scss
-@@ -160,7 +160,7 @@ select.form-control {
+@@ -159,8 +159,8 @@ select.form-control {
+   border-radius: $border-radius-lg-sketchy !important;
  }
 
- [type="checkbox"] {
--  position: relative;
-+  position: relative !important;
+-[type="checkbox"] {
++#{$shiny-check} input, #{$shiny-check-inline} input, [type="checkbox"] {
+   position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
-@@ -201,7 +201,7 @@ select.form-control {
+@@ -200,8 +200,8 @@ select.form-control {
+   }
  }
 
- [type="radio"] {
--  position: relative;
-+  position: relative !important;
+-[type="radio"] {
++#{$shiny-radio} input, #{$shiny-radio-inline} input, [type="radio"] {
+   position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
+@@ -235,6 +235,10 @@ select.form-control {
+   }
+ }
+
++#{$shiny-check}, #{$shiny-check-inline}, #{$shiny-radio}, #{$shiny-radio-inline} {
++  span { padding-left: 1rem; }
++}
++
+ .form-check-input {
+   &:focus {
+     box-shadow: none;
diff --git a/tools/patches/008-bootswatch-sketchy.patch b/tools/patches/008-bootswatch-sketchy.patch
@@ -5,18 +5,18 @@ index 1edca30..1c108e9 100644
 @@ -155,7 +155,7 @@ select.form-control {
  }
 
- [type="checkbox"] {
--  position: relative;
-+  position: relative !important;
+-[type="checkbox"] {
++#{$shiny-check} input, #{$shiny-check-inline} input, [type="checkbox"] {
+   position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
 @@ -196,7 +196,7 @@ select.form-control {
  }
 
- [type="radio"] {
--  position: relative;
-+  position: relative !important;
+-[type="radio"] {
++#{$shiny-radio} input, #{$shiny-radio-inline} input, [type="radio"] {
+   position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;