fixes #1082 - add an easy was to set tags border-radius using CSS v…

…ariables
yairEO · Jul 27, 2022 · 8b6e00c · 8b6e00c
1 parent 2246bc4
commit 8b6e00c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -586,6 +586,7 @@ <h3>CSS</h3>
   --tag-hover               : #CE0078;
   --tag-text-color          : #FFF;
   --tags-border-color       : silver;
+  --tag-border-radius       : 25px;
   --tag-text-color--edit    : #111;
   --tag-remove-bg           : var(--tag-hover);
   --tag-pad                 : .6em 1em;
@@ -601,10 +602,6 @@ <h3>CSS</h3>
   margin-top: 0;
 }
 
-.customLook .tagify__tag > div{
-  border-radius: 25px;
-}
-
 /* Do not show the "remove tag" (x) button when only a single tag remains */
 .customLook .tagify__tag:only-of-type .tagify__tag__removeBtn{
   display: none;
@@ -2335,6 +2332,12 @@ <h3>JAVASCRIPT</h3>
                     type: 'range',
                     value: .5, min: 0, max: 1.5, step: 0.01,
                 },
+                {
+                    cssVar: ['tag-border-radius', 'px'],
+                    label: 'tag-border-radius',
+                    type: 'range',
+                    value: 3, min: 0, max: 25
+                },
                 {
                     cssVar: ['tag-inset-shadow-size', 'em'],
                     label: 'tag-inset-shadow-size',

diff --git a/src/tagify.scss b/src/tagify.scss
@@ -40,6 +40,7 @@
     --tags-border-color        : #{$tags-border-color};
     --tags-hover-border-color  : #{$tags-hover-border-color};
     --tags-focus-border-color  : #{$tags-focus-border-color};
+    --tag-border-radius        : 3px;
     --tag-bg                   : #{$tag-bg};
     --tag-hover                : #{$tag-hover};
     --tag-text-color           : #{$tag-text-color};
@@ -215,7 +216,7 @@
             padding        : var(--tag-pad);
             color          : var(--tag-text-color);
             line-height    : inherit;
-            border-radius  : 3px;
+            border-radius  : var(--tag-border-radius);
          // user-select    : none;  // should allow selecting text if the user wishes to copy something
             white-space    : nowrap;
             transition     : .13s ease-out;