fixes #974 - make the striped background on readonly an opt-out feature

yairEO · Feb 5, 2022 · 4894c53 · 4894c53
1 parent cf2be53
commit 4894c53
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -801,6 +801,7 @@ For a *live* example, see the [demos page](https://yaireo.github.io/tagify/#sect
 
 Name                            | Info
 ------------------------------- | --------------------------------
+--tags-disabled-bg              | Tag background color when *disabled*
 --tags-border-color             | The outer border color which surrounds tagify
 --tags-hover-border-color       | *hover* state
 --tags-focus-border-color       | *focus* state
@@ -818,11 +819,12 @@ Name                            | Info
 --tag-remove-btn-color          | Remove (`×`) button text color
 --tag-remove-btn-bg             | Remove (`×`) button background color
 --tag-remove-btn-bg--hover      | Remove (`×`) button hover background color
---loader-size                   | Loading animation size. `1em` is pretty big, default is a bit less.
+--input-color                   | Input text color
 --tag-hide-transition           | Controls the transition property when a tag is removed. default is '.3s'
 --placeholder-color             | Placeholder text color
 --placeholder-color-focus       | Placeholder text color when Tagify has focus and no input was typed
---input-color                   | Input text color
+--loader-size                   | Loading animation size. `1em` is pretty big, default is a bit less.
+--readonly-striped              | Either a value `1` or `0` can be used to toggle the striped diagonal background in *readonly*
 
 ### Full list of Tagify's [SCSS variables](https://github.com/yairEO/tagify/blob/master/src/tagify.scss#L9-L24)
 

diff --git a/src/tagify.scss b/src/tagify.scss
@@ -57,6 +57,7 @@
     --placeholder-color        : #{$placeholder-color};
     --placeholder-color-focus  : #{$placeholder-color-focus};
     --loader-size              : .8em;
+    --readonly-striped         : 1;
 
     @mixin firefox {
         @at-root {
@@ -94,15 +95,21 @@
     }
 
     @mixin tagReadonlyBG($size:5px){
-        background: linear-gradient(45deg, var(--tag-bg)  25%,
+        animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused;
+
+        @keyframes readonlyStyles {
+            0% {
+                background: linear-gradient(45deg, var(--tag-bg)  25%,
                                            transparent    25%,
                                            transparent    50%,
                                            var(--tag-bg)  50%,
                                            var(--tag-bg)  75%,
                                            transparent    75%,
                                            transparent)   0/#{$size} #{$size};
-        box-shadow: none;
-        filter: brightness(.95);
+                box-shadow: none;
+                filter: brightness(.95);
+            }
+        }
     }
 
     @keyframes tags--bump{