@ulu/frontend 0.6.14 → 0.6.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mcp-data.json +114 -86
- package/dist/umd/frontend.css +1 -1
- package/lib/scss/components/_badge.scss +5 -1
- package/package.json +1 -1
package/dist/mcp-data.json
CHANGED
|
@@ -1272,6 +1272,12 @@
|
|
|
1272
1272
|
"description": "Width of badge (default size)",
|
|
1273
1273
|
"default": "10rem"
|
|
1274
1274
|
},
|
|
1275
|
+
{
|
|
1276
|
+
"name": "transition-duration",
|
|
1277
|
+
"type": "Time",
|
|
1278
|
+
"description": "Transition duration amount for transitioned properties",
|
|
1279
|
+
"default": "110ms"
|
|
1280
|
+
},
|
|
1275
1281
|
{
|
|
1276
1282
|
"name": "hover-scale",
|
|
1277
1283
|
"type": "Number",
|
|
@@ -13857,8 +13863,8 @@
|
|
|
13857
13863
|
"name": "set",
|
|
13858
13864
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
13859
13865
|
"line": {
|
|
13860
|
-
"start":
|
|
13861
|
-
"end":
|
|
13866
|
+
"start": 69,
|
|
13867
|
+
"end": 71
|
|
13862
13868
|
}
|
|
13863
13869
|
}
|
|
13864
13870
|
},
|
|
@@ -13869,8 +13875,8 @@
|
|
|
13869
13875
|
"name": "set",
|
|
13870
13876
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
13871
13877
|
"line": {
|
|
13872
|
-
"start":
|
|
13873
|
-
"end":
|
|
13878
|
+
"start": 69,
|
|
13879
|
+
"end": 71
|
|
13874
13880
|
}
|
|
13875
13881
|
}
|
|
13876
13882
|
},
|
|
@@ -13881,8 +13887,8 @@
|
|
|
13881
13887
|
"name": "get",
|
|
13882
13888
|
"code": "\n $value: utils.require-map-get($config, $name, \"badge [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
13883
13889
|
"line": {
|
|
13884
|
-
"start":
|
|
13885
|
-
"end":
|
|
13890
|
+
"start": 78,
|
|
13891
|
+
"end": 81
|
|
13886
13892
|
}
|
|
13887
13893
|
}
|
|
13888
13894
|
},
|
|
@@ -16715,10 +16721,10 @@
|
|
|
16715
16721
|
"context": {
|
|
16716
16722
|
"type": "mixin",
|
|
16717
16723
|
"name": "styles",
|
|
16718
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16724
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16719
16725
|
"line": {
|
|
16720
|
-
"start":
|
|
16721
|
-
"end":
|
|
16726
|
+
"start": 99,
|
|
16727
|
+
"end": 169
|
|
16722
16728
|
}
|
|
16723
16729
|
}
|
|
16724
16730
|
},
|
|
@@ -16727,10 +16733,10 @@
|
|
|
16727
16733
|
"context": {
|
|
16728
16734
|
"type": "mixin",
|
|
16729
16735
|
"name": "styles",
|
|
16730
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16736
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16731
16737
|
"line": {
|
|
16732
|
-
"start":
|
|
16733
|
-
"end":
|
|
16738
|
+
"start": 99,
|
|
16739
|
+
"end": 169
|
|
16734
16740
|
}
|
|
16735
16741
|
}
|
|
16736
16742
|
},
|
|
@@ -16739,10 +16745,10 @@
|
|
|
16739
16745
|
"context": {
|
|
16740
16746
|
"type": "mixin",
|
|
16741
16747
|
"name": "styles",
|
|
16742
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16748
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16743
16749
|
"line": {
|
|
16744
|
-
"start":
|
|
16745
|
-
"end":
|
|
16750
|
+
"start": 99,
|
|
16751
|
+
"end": 169
|
|
16746
16752
|
}
|
|
16747
16753
|
}
|
|
16748
16754
|
},
|
|
@@ -16751,10 +16757,10 @@
|
|
|
16751
16757
|
"context": {
|
|
16752
16758
|
"type": "mixin",
|
|
16753
16759
|
"name": "styles",
|
|
16754
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16760
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16755
16761
|
"line": {
|
|
16756
|
-
"start":
|
|
16757
|
-
"end":
|
|
16762
|
+
"start": 99,
|
|
16763
|
+
"end": 169
|
|
16758
16764
|
}
|
|
16759
16765
|
}
|
|
16760
16766
|
},
|
|
@@ -16763,10 +16769,10 @@
|
|
|
16763
16769
|
"context": {
|
|
16764
16770
|
"type": "mixin",
|
|
16765
16771
|
"name": "styles",
|
|
16766
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16772
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16767
16773
|
"line": {
|
|
16768
|
-
"start":
|
|
16769
|
-
"end":
|
|
16774
|
+
"start": 99,
|
|
16775
|
+
"end": 169
|
|
16770
16776
|
}
|
|
16771
16777
|
}
|
|
16772
16778
|
},
|
|
@@ -16775,10 +16781,10 @@
|
|
|
16775
16781
|
"context": {
|
|
16776
16782
|
"type": "mixin",
|
|
16777
16783
|
"name": "styles",
|
|
16778
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16784
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16779
16785
|
"line": {
|
|
16780
|
-
"start":
|
|
16781
|
-
"end":
|
|
16786
|
+
"start": 99,
|
|
16787
|
+
"end": 169
|
|
16782
16788
|
}
|
|
16783
16789
|
}
|
|
16784
16790
|
},
|
|
@@ -16787,10 +16793,10 @@
|
|
|
16787
16793
|
"context": {
|
|
16788
16794
|
"type": "mixin",
|
|
16789
16795
|
"name": "styles",
|
|
16790
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16796
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16791
16797
|
"line": {
|
|
16792
|
-
"start":
|
|
16793
|
-
"end":
|
|
16798
|
+
"start": 99,
|
|
16799
|
+
"end": 169
|
|
16794
16800
|
}
|
|
16795
16801
|
}
|
|
16796
16802
|
},
|
|
@@ -16799,10 +16805,10 @@
|
|
|
16799
16805
|
"context": {
|
|
16800
16806
|
"type": "mixin",
|
|
16801
16807
|
"name": "styles",
|
|
16802
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16808
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16803
16809
|
"line": {
|
|
16804
|
-
"start":
|
|
16805
|
-
"end":
|
|
16810
|
+
"start": 99,
|
|
16811
|
+
"end": 169
|
|
16806
16812
|
}
|
|
16807
16813
|
}
|
|
16808
16814
|
},
|
|
@@ -16811,10 +16817,10 @@
|
|
|
16811
16817
|
"context": {
|
|
16812
16818
|
"type": "mixin",
|
|
16813
16819
|
"name": "styles",
|
|
16814
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16820
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16815
16821
|
"line": {
|
|
16816
|
-
"start":
|
|
16817
|
-
"end":
|
|
16822
|
+
"start": 99,
|
|
16823
|
+
"end": 169
|
|
16818
16824
|
}
|
|
16819
16825
|
}
|
|
16820
16826
|
},
|
|
@@ -16823,10 +16829,10 @@
|
|
|
16823
16829
|
"context": {
|
|
16824
16830
|
"type": "mixin",
|
|
16825
16831
|
"name": "styles",
|
|
16826
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16832
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16827
16833
|
"line": {
|
|
16828
|
-
"start":
|
|
16829
|
-
"end":
|
|
16834
|
+
"start": 99,
|
|
16835
|
+
"end": 169
|
|
16830
16836
|
}
|
|
16831
16837
|
}
|
|
16832
16838
|
},
|
|
@@ -16835,10 +16841,10 @@
|
|
|
16835
16841
|
"context": {
|
|
16836
16842
|
"type": "mixin",
|
|
16837
16843
|
"name": "styles",
|
|
16838
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16844
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16839
16845
|
"line": {
|
|
16840
|
-
"start":
|
|
16841
|
-
"end":
|
|
16846
|
+
"start": 99,
|
|
16847
|
+
"end": 169
|
|
16842
16848
|
}
|
|
16843
16849
|
}
|
|
16844
16850
|
},
|
|
@@ -16847,10 +16853,10 @@
|
|
|
16847
16853
|
"context": {
|
|
16848
16854
|
"type": "mixin",
|
|
16849
16855
|
"name": "styles",
|
|
16850
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16856
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16851
16857
|
"line": {
|
|
16852
|
-
"start":
|
|
16853
|
-
"end":
|
|
16858
|
+
"start": 99,
|
|
16859
|
+
"end": 169
|
|
16854
16860
|
}
|
|
16855
16861
|
}
|
|
16856
16862
|
},
|
|
@@ -16859,10 +16865,10 @@
|
|
|
16859
16865
|
"context": {
|
|
16860
16866
|
"type": "mixin",
|
|
16861
16867
|
"name": "styles",
|
|
16862
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16868
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16863
16869
|
"line": {
|
|
16864
|
-
"start":
|
|
16865
|
-
"end":
|
|
16870
|
+
"start": 99,
|
|
16871
|
+
"end": 169
|
|
16866
16872
|
}
|
|
16867
16873
|
}
|
|
16868
16874
|
},
|
|
@@ -16871,10 +16877,10 @@
|
|
|
16871
16877
|
"context": {
|
|
16872
16878
|
"type": "mixin",
|
|
16873
16879
|
"name": "styles",
|
|
16874
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16880
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16875
16881
|
"line": {
|
|
16876
|
-
"start":
|
|
16877
|
-
"end":
|
|
16882
|
+
"start": 99,
|
|
16883
|
+
"end": 169
|
|
16878
16884
|
}
|
|
16879
16885
|
}
|
|
16880
16886
|
},
|
|
@@ -16883,10 +16889,10 @@
|
|
|
16883
16889
|
"context": {
|
|
16884
16890
|
"type": "mixin",
|
|
16885
16891
|
"name": "styles",
|
|
16886
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16892
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16887
16893
|
"line": {
|
|
16888
|
-
"start":
|
|
16889
|
-
"end":
|
|
16894
|
+
"start": 99,
|
|
16895
|
+
"end": 169
|
|
16890
16896
|
}
|
|
16891
16897
|
}
|
|
16892
16898
|
},
|
|
@@ -16895,10 +16901,10 @@
|
|
|
16895
16901
|
"context": {
|
|
16896
16902
|
"type": "mixin",
|
|
16897
16903
|
"name": "styles",
|
|
16898
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16904
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16899
16905
|
"line": {
|
|
16900
|
-
"start":
|
|
16901
|
-
"end":
|
|
16906
|
+
"start": 99,
|
|
16907
|
+
"end": 169
|
|
16902
16908
|
}
|
|
16903
16909
|
}
|
|
16904
16910
|
},
|
|
@@ -16907,10 +16913,10 @@
|
|
|
16907
16913
|
"context": {
|
|
16908
16914
|
"type": "mixin",
|
|
16909
16915
|
"name": "styles",
|
|
16910
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16916
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16911
16917
|
"line": {
|
|
16912
|
-
"start":
|
|
16913
|
-
"end":
|
|
16918
|
+
"start": 99,
|
|
16919
|
+
"end": 169
|
|
16914
16920
|
}
|
|
16915
16921
|
}
|
|
16916
16922
|
},
|
|
@@ -16919,10 +16925,10 @@
|
|
|
16919
16925
|
"context": {
|
|
16920
16926
|
"type": "mixin",
|
|
16921
16927
|
"name": "styles",
|
|
16922
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16928
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16923
16929
|
"line": {
|
|
16924
|
-
"start":
|
|
16925
|
-
"end":
|
|
16930
|
+
"start": 99,
|
|
16931
|
+
"end": 169
|
|
16926
16932
|
}
|
|
16927
16933
|
}
|
|
16928
16934
|
},
|
|
@@ -16931,10 +16937,10 @@
|
|
|
16931
16937
|
"context": {
|
|
16932
16938
|
"type": "mixin",
|
|
16933
16939
|
"name": "styles",
|
|
16934
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16940
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16935
16941
|
"line": {
|
|
16936
|
-
"start":
|
|
16937
|
-
"end":
|
|
16942
|
+
"start": 99,
|
|
16943
|
+
"end": 169
|
|
16938
16944
|
}
|
|
16939
16945
|
}
|
|
16940
16946
|
},
|
|
@@ -16943,10 +16949,10 @@
|
|
|
16943
16949
|
"context": {
|
|
16944
16950
|
"type": "mixin",
|
|
16945
16951
|
"name": "styles",
|
|
16946
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16952
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16947
16953
|
"line": {
|
|
16948
|
-
"start":
|
|
16949
|
-
"end":
|
|
16954
|
+
"start": 99,
|
|
16955
|
+
"end": 169
|
|
16950
16956
|
}
|
|
16951
16957
|
}
|
|
16952
16958
|
},
|
|
@@ -16955,10 +16961,22 @@
|
|
|
16955
16961
|
"context": {
|
|
16956
16962
|
"type": "mixin",
|
|
16957
16963
|
"name": "styles",
|
|
16958
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
16964
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16959
16965
|
"line": {
|
|
16960
|
-
"start":
|
|
16961
|
-
"end":
|
|
16966
|
+
"start": 99,
|
|
16967
|
+
"end": 169
|
|
16968
|
+
}
|
|
16969
|
+
}
|
|
16970
|
+
},
|
|
16971
|
+
{
|
|
16972
|
+
"description": "Output badge component styles\n",
|
|
16973
|
+
"context": {
|
|
16974
|
+
"type": "mixin",
|
|
16975
|
+
"name": "styles",
|
|
16976
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
16977
|
+
"line": {
|
|
16978
|
+
"start": 99,
|
|
16979
|
+
"end": 169
|
|
16962
16980
|
}
|
|
16963
16981
|
}
|
|
16964
16982
|
},
|
|
@@ -32752,16 +32770,16 @@
|
|
|
32752
32770
|
"description": "Module Settings\n",
|
|
32753
32771
|
"commentRange": {
|
|
32754
32772
|
"start": 21,
|
|
32755
|
-
"end":
|
|
32773
|
+
"end": 36
|
|
32756
32774
|
},
|
|
32757
32775
|
"context": {
|
|
32758
32776
|
"type": "variable",
|
|
32759
32777
|
"name": "config",
|
|
32760
|
-
"value": "(\n \"background-color\": rgb(205, 205, 205),\n \"background-color-hover\": null,\n \"border-radius\": 50%,\n \"color\": black,\n \"color-hover\": null,\n \"box-shadow\" : null,\n \"box-shadow-hover\" : null,\n \"font-size\": 1.5rem,\n \"font-weight\": bold,\n \"font-family\": true,\n \"width\": 7rem,\n \"hover-scale\": 1.2,\n \"sizes\" : (\n \"small\" : (\n \"font-size\" : 1.2rem,\n \"width\" : 4rem\n ),\n \"large\" : (\n \"font-size\" : 2.75rem,\n \"width\" : 9rem\n )\n )\n)",
|
|
32778
|
+
"value": "(\n \"background-color\": rgb(205, 205, 205),\n \"background-color-hover\": null,\n \"border-radius\": 50%,\n \"color\": black,\n \"color-hover\": null,\n \"box-shadow\" : null,\n \"box-shadow-hover\" : null,\n \"font-size\": 1.5rem,\n \"font-weight\": bold,\n \"font-family\": true,\n \"width\": 7rem,\n \"hover-scale\": 1.2,\n \"transition-duration\" : 110ms,\n \"sizes\" : (\n \"small\" : (\n \"font-size\" : 1.2rem,\n \"width\" : 4rem\n ),\n \"large\" : (\n \"font-size\" : 2.75rem,\n \"width\" : 9rem\n )\n )\n)",
|
|
32761
32779
|
"scope": "default",
|
|
32762
32780
|
"line": {
|
|
32763
|
-
"start":
|
|
32764
|
-
"end":
|
|
32781
|
+
"start": 38,
|
|
32782
|
+
"end": 62
|
|
32765
32783
|
}
|
|
32766
32784
|
},
|
|
32767
32785
|
"type": "Map",
|
|
@@ -32832,6 +32850,12 @@
|
|
|
32832
32850
|
"default": "10rem",
|
|
32833
32851
|
"description": "Width of badge (default size)"
|
|
32834
32852
|
},
|
|
32853
|
+
{
|
|
32854
|
+
"type": "Time",
|
|
32855
|
+
"name": "transition-duration",
|
|
32856
|
+
"default": "110ms",
|
|
32857
|
+
"description": "Transition duration amount for transitioned properties"
|
|
32858
|
+
},
|
|
32835
32859
|
{
|
|
32836
32860
|
"type": "Number",
|
|
32837
32861
|
"name": "hover-scale",
|
|
@@ -32861,16 +32885,16 @@
|
|
|
32861
32885
|
"path": "/sass/components/badge/#mixin-set",
|
|
32862
32886
|
"description": "Change modules $config\n",
|
|
32863
32887
|
"commentRange": {
|
|
32864
|
-
"start":
|
|
32865
|
-
"end":
|
|
32888
|
+
"start": 64,
|
|
32889
|
+
"end": 67
|
|
32866
32890
|
},
|
|
32867
32891
|
"context": {
|
|
32868
32892
|
"type": "mixin",
|
|
32869
32893
|
"name": "set",
|
|
32870
32894
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
32871
32895
|
"line": {
|
|
32872
|
-
"start":
|
|
32873
|
-
"end":
|
|
32896
|
+
"start": 69,
|
|
32897
|
+
"end": 71
|
|
32874
32898
|
}
|
|
32875
32899
|
},
|
|
32876
32900
|
"parameter": [
|
|
@@ -32912,16 +32936,16 @@
|
|
|
32912
32936
|
"path": "/sass/components/badge/#function-get",
|
|
32913
32937
|
"description": "Get a config option\n",
|
|
32914
32938
|
"commentRange": {
|
|
32915
|
-
"start":
|
|
32916
|
-
"end":
|
|
32939
|
+
"start": 73,
|
|
32940
|
+
"end": 76
|
|
32917
32941
|
},
|
|
32918
32942
|
"context": {
|
|
32919
32943
|
"type": "function",
|
|
32920
32944
|
"name": "get",
|
|
32921
32945
|
"code": "\n $value: utils.require-map-get($config, $name, \"badge [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
32922
32946
|
"line": {
|
|
32923
|
-
"start":
|
|
32924
|
-
"end":
|
|
32947
|
+
"start": 78,
|
|
32948
|
+
"end": 81
|
|
32925
32949
|
}
|
|
32926
32950
|
},
|
|
32927
32951
|
"parameter": [
|
|
@@ -32959,16 +32983,16 @@
|
|
|
32959
32983
|
"path": "/sass/components/badge/#mixin-styles",
|
|
32960
32984
|
"description": "Output badge component styles\n",
|
|
32961
32985
|
"commentRange": {
|
|
32962
|
-
"start":
|
|
32963
|
-
"end":
|
|
32986
|
+
"start": 83,
|
|
32987
|
+
"end": 97
|
|
32964
32988
|
},
|
|
32965
32989
|
"context": {
|
|
32966
32990
|
"type": "mixin",
|
|
32967
32991
|
"name": "styles",
|
|
32968
|
-
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition: transform
|
|
32992
|
+
"code": "\n $prefix: selector.class(\"badge\");\n // Badge content can be text, image, icon, or background-image\n #{ $prefix } {\n display: block;\n width: get(\"width\");\n max-width: 100%;\n flex: 0 0 get(\"width\");\n font-size: get(\"font-size\");\n font-weight: get(\"font-weight\");\n font-family: get(\"font-family\");\n }\n #{ $prefix }__inner {\n display: block;\n padding-bottom: 100%;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n text-align: center;\n border-radius: get(\"border-radius\");\n transition-property: transform, color, box-shadow, background-color;\n transition-duration: get(\"transition-duration\");\n transition-timing-function: ease-in-out;\n box-shadow: get(\"box-shadow\");\n // In case this is used as a link or router-link\n &,\n &:hover,\n &:focus,\n &:visited {\n background-color: color.get(get(\"background-color\"));\n color: color.get(get(\"color\"));\n }\n }\n #{ $prefix }--clickable,\n button#{ $prefix },\n a#{ $prefix } {\n &:hover,\n &:focus {\n #{ $prefix }__inner {\n color: color.get(get(\"color-hover\"));\n background-color: color.get(get(\"background-color-hover\"));\n box-shadow: get(\"box-shadow-hover\");\n transform: scale(get(\"hover-scale\"));\n }\n }\n }\n #{ $prefix }__inner > * {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #{ $prefix }__inner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: 0 !important;\n }\n\n @each $name, $props in get(\"sizes\") {\n #{ $prefix }--#{ $name } {\n width: map.get($props, \"width\");\n font-size: map.get($props, \"font-size\");\n flex-basis: map.get($props, \"width\");\n }\n }\n",
|
|
32969
32993
|
"line": {
|
|
32970
|
-
"start":
|
|
32971
|
-
"end":
|
|
32994
|
+
"start": 99,
|
|
32995
|
+
"end": 169
|
|
32972
32996
|
}
|
|
32973
32997
|
},
|
|
32974
32998
|
"example": [
|
|
@@ -33068,6 +33092,10 @@
|
|
|
33068
33092
|
"type": "function",
|
|
33069
33093
|
"name": "get"
|
|
33070
33094
|
},
|
|
33095
|
+
{
|
|
33096
|
+
"type": "function",
|
|
33097
|
+
"name": "get"
|
|
33098
|
+
},
|
|
33071
33099
|
{
|
|
33072
33100
|
"type": "function",
|
|
33073
33101
|
"name": "get"
|