@festo-ui/web-essentials 10.0.1-dev.844 → 10.0.1-dev.846

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.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v10.0.1-dev.844 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v10.0.1-dev.846 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v10.0.1-dev.844 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v10.0.1-dev.846 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */.fng-flatpickr span{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flatpickr-calendar{display:none;text-align:center;animation:none;direction:ltr;border:0;font-size:var(--fwe-font-size-md);line-height:font-size-md10px;position:absolute;box-sizing:border-box;touch-action:manipulation}.flatpickr-calendar.open{max-height:640px;width:324px;background:var(--fwe-white);box-shadow:0 1px 8px rgba(0,0,0,.3);border-radius:8px;padding:12px;padding-bottom:48px;display:inline-block;z-index:var(--fwe-z-index-dropdown)}.flatpickr-calendar.animate.open{animation:none}.flatpickr-calendar.inline{display:block;position:relative;top:2px;box-shadow:none;background:inherit}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:var(--fwe-z-index-dropdown);display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 var(--fwe-gray-200),5px 0 0 var(--fwe-gray-200)}.flatpickr-calendar .hasTime .dayContainer,.flatpickr-calendar .hasWeeks .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:40px;border-top:1px solid var(--fwe-gray-200)}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:unset;height:0;width:0;left:32px}.flatpickr-calendar.rightMost:after,.flatpickr-calendar.rightMost:before{left:auto;right:32px}.flatpickr-calendar:before{border-width:7px;margin:0 -7px}.flatpickr-calendar:after{border-width:6px;margin:0 -6px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:rgba(0,0,0,.15)}.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--fwe-white)}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:var(--fwe-border)}.flatpickr-calendar.arrowBottom:after{border-top-color:var(--fwe-white)}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:0 0;color:var(--fwe-text);fill:var(--fwe-text);height:42px;margin-top:12px;line-height:24px;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;flex:1}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:42px;z-index:3;color:var(--fwe-text)}.flatpickr-months .flatpickr-next-month i,.flatpickr-months .flatpickr-prev-month i{position:relative}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-next-month svg path,.flatpickr-months .flatpickr-prev-month svg path{transition:fill .1s;fill:inherit}.flatpickr-months .flatpickr-next-month.flatpickr-disabled,.flatpickr-months .flatpickr-prev-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:var(--fwe-text-light)}.flatpickr-months .flatpickr-next-month:hover svg,.flatpickr-months .flatpickr-prev-month:hover svg{fill:var(--fwe-hero)}.flatpickr-months .flatpickr-next-month{padding:24px 20px 0 0;right:0}.flatpickr-months .flatpickr-prev-month{left:0;padding:24px 0 0 20px}.numInputWrapper{position:relative;height:auto}.numInputWrapper input::-webkit-inner-spin-button,.numInputWrapper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.numInputWrapper input[type=number]{-moz-appearance:textfield}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%;font-weight:var(--fwe-font-weight-bold)}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper span{position:absolute;right:-8px;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;box-sizing:border-box}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid var(--fwe-text);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--fwe-text);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:var(--fwe-font-size-base);font-weight:var(--fwe-font-weight-normal);position:absolute;width:75%;left:12.5%;padding:7px 0 0 0;line-height:calc(var(--fwe-font-size-base) + 8px);height:34px;display:inline-block;text-align:center;transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:var(--fwe-font-weight-bold);color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{color:var(--fwe-hero)}.flatpickr-current-month select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;background-image:url("data:image/svg+xml;utf8,<svg height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><g><polygon points='8,10.7 3.6,6.4 4.4,5.6 8,9.3 11.6,5.6 12.4,6.4'/></g></svg>");background-repeat:no-repeat;background-position-x:100%;background-position-y:70%;border:none;color:inherit;cursor:pointer;line-height:24px;margin:-1px 0 0 0;outline:0;padding-left:8px;padding-right:16px}.flatpickr-current-month select:hover{color:var(--fwe-hero);background-image:url("data:image/svg+xml;utf8,<svg fill='rgb(0, 145, 220)' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><g><polygon points='8,10.7 3.6,6.4 4.4,5.6 8,9.3 11.6,5.6 12.4,6.4'/></g></svg>")}.flatpickr-current-month select option{color:var(--fwe-text)!important}.flatpickr-current-month .numInputWrapper{width:60px;display:inline-block}.flatpickr-current-month .numInputWrapper input{background:0 0;box-sizing:border-box;color:inherit;cursor:text;margin-left:16px;display:inline-block;line-height:24px;border:0;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month .numInputWrapper:hover{color:var(--fwe-hero)}.flatpickr-current-month .numInputWrapper .arrowUp:hover:after{border-bottom-color:var(--fwe-hero)}.flatpickr-current-month .numInputWrapper .arrowDown:hover:after{border-top-color:var(--fwe-hero)}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,.5);background:0 0;pointer-events:none}.flatpickr-monthDropdown-months{font-weight:var(--fwe-font-weight-bold)}.flatpickr-current-month .flatpickr-monthDropdown-months:active,.flatpickr-current-month .flatpickr-monthDropdown-months:focus{outline:0}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:0;padding:0}.flatpickr-weekdays{border-bottom:1px solid var(--fwe-border);background:0 0;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:48px;margin-bottom:4px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:var(--fwe-font-size-md);background:0 0;color:var(--fwe-text-light);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:var(--fwe-font-weight-normal)}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:304px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:304px;min-width:304px;max-width:304px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;justify-content:space-around;transform:translate3d(0,0,0);opacity:1}.dayContainer+.dayContainer{box-shadow:-1px 0 0 var(--fwe-gray-200)}.flatpickr-day{background:0 0;border:2px;border-radius:150px;box-sizing:border-box;color:var(--fwe-text);cursor:pointer;font-weight:var(--fwe-font-weight-normal);width:14.2857143%;flex-basis:14.2857143%;max-width:33px;height:33px;line-height:33px;margin:4px;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus{cursor:pointer;outline:0;background:var(--fwe-gray-200);border-color:var(--fwe-gray-200);font-weight:var(--fwe-font-weight-bold)}.flatpickr-day:hover{cursor:pointer;outline:0;color:var(--fwe-hero-hover)}.flatpickr-day.today{background-color:inherit;font-weight:var(--fwe-font-weight-bold);text-decoration:underline}.flatpickr-day.today:hover{color:var(--fwe-hero-hover)}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover{background:var(--fwe-white);box-shadow:none;color:var(--fwe-hero);border:2px solid var(--fwe-hero);font-weight:var(--fwe-font-weight-bold);line-height:28px}.flatpickr-day.endRange.flatpickr-disabled,.flatpickr-day.endRange.inRange.flatpickr-disabled,.flatpickr-day.endRange.nextMonthDay.flatpickr-disabled,.flatpickr-day.endRange.prevMonthDay.flatpickr-disabled,.flatpickr-day.endRange:focus.flatpickr-disabled,.flatpickr-day.endRange:hover.flatpickr-disabled,.flatpickr-day.selected.flatpickr-disabled,.flatpickr-day.selected.inRange.flatpickr-disabled,.flatpickr-day.selected.nextMonthDay.flatpickr-disabled,.flatpickr-day.selected.prevMonthDay.flatpickr-disabled,.flatpickr-day.selected:focus.flatpickr-disabled,.flatpickr-day.selected:hover.flatpickr-disabled,.flatpickr-day.startRange.flatpickr-disabled,.flatpickr-day.startRange.inRange.flatpickr-disabled,.flatpickr-day.startRange.nextMonthDay.flatpickr-disabled,.flatpickr-day.startRange.prevMonthDay.flatpickr-disabled,.flatpickr-day.startRange:focus.flatpickr-disabled,.flatpickr-day.startRange:hover.flatpickr-disabled{color:var(--fwe-text-disabled);background:var(--fwe-control-disabled)}.flatpickr-day.startRange.startRange{border-radius:50px;box-shadow:none}.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px;box-shadow:10px 0 0 var(--fwe-hero)}.flatpickr-day.selected.startRange{border-radius:50px;box-shadow:none}.flatpickr-day.endRange:not(.inRange):not(.startRange),.flatpickr-day.selected.endRange:not(.inRange):not(.startRange){border-radius:50px;position:relative}.flatpickr-day.endRange:not(.inRange):not(.startRange)::before,.flatpickr-day.selected.endRange:not(.inRange):not(.startRange)::before{content:"";position:absolute;height:calc(100% + 4px);z-index:-1;width:42px;background-color:var(--fwe-gray-200);left:-26px;top:-2px}.flatpickr-day.endRange:not(.inRange):not(.startRange).flatpickr-disabled::before,.flatpickr-day.selected.endRange:not(.inRange):not(.startRange).flatpickr-disabled::before{background-color:var(--fwe-gray-200)}.flatpickr-day.endRange.endRange,.flatpickr-day.startRange.endRange{border-radius:50px}.flatpickr-day.startRange:not(:hover):not(.endRange):nth-child(7n)::before{content:"";position:absolute;height:100%;z-index:-1;width:24px;background-color:var(--fwe-gray-200);left:16px}.flatpickr-day.startRange:not(:hover):not(.endRange):nth-child(7n).flatpickr-disabled::before{background-color:var(--fwe-gray-200)}.flatpickr-day.endRange.startRange.endRange,.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange:not(.startRange){box-shadow:none;position:relative}.flatpickr-day.inRange:not(.startRange):not(.endRange):nth-child(7n){border-radius:0;box-shadow:-10px 0 0 var(--fwe-gray-200),24px 0 0 var(--fwe-gray-200)}.flatpickr-day.inRange:not(.startRange):not(.endRange):nth-child(7n).flatpickr-disabled{box-shadow:-10px 0 0 var(--fwe-gray-100),24px 0 0 var(--fwe-gray-100)}.flatpickr-day.inRange:not(.startRange)::before{content:"";position:absolute;height:100%;z-index:-1;width:48px;background-color:var(--fwe-gray-200);left:-28px}.flatpickr-day.inRange:not(.startRange).flatpickr-disabled::before{background-color:var(--fwe-gray-100)}.flatpickr-day.inRange~.flatpickr-day.inRange:not(.selected){border-radius:0;box-shadow:-10px 0 0 var(--fwe-gray-200),24px 0 0 var(--fwe-gray-200)}.flatpickr-day.inRange~.flatpickr-day.inRange:not(.selected).flatpickr-disabled{box-shadow:-10px 0 0 var(--fwe-gray-100),24px 0 0 var(--fwe-gray-100);background:var(--fwe-gray-100)}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:rgba(57,57,57,.3);background:0 0;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,.1)}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 var(--fwe-hero),5px 0 0 var(--fwe-hero)}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 var(--fwe-gray-200)}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,.3);background:0 0;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:var(--fwe-control-border)}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:var(--fwe-control-border)}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:0 0;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:var(--fwe-text);font-size:var(--fwe-font-size-md);position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:var(--fwe-font-weight-bold)}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:var(--fwe-font-weight-normal)}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{height:inherit;float:left;line-height:inherit;color:var(--fwe-text);font-weight:var(--fwe-font-weight-bold);width:2%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:var(--fwe-font-weight-normal)}.flatpickr-time .flatpickr-am-pm:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time input:hover{background:var(--fwe-white)}.flatpickr-input[readonly]{cursor:pointer}@keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@@ -1,4 +1,3 @@
1
- @use "rfs";
2
1
  @use "variables";
3
2
 
4
3
  // Normalization of HTML elements, manually forked from Normalize.css to remove
@@ -124,7 +123,7 @@ code,
124
123
  kbd,
125
124
  samp {
126
125
  font-family: variables.$font-family-monospace;
127
- @include rfs.font-size(1em); /* 2 */
126
+ font-size: 1em; /* 2 */
128
127
  }
129
128
 
130
129
  /**
@@ -1,10 +1,9 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v10.0.1-dev.844 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v10.0.1-dev.846 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
6
6
 
7
- @use "rfs";
8
7
  @use "variables";
9
8
  @use "mixins";
10
9
  @use "fonts";
@@ -4,7 +4,6 @@
4
4
  * Licensed under Apache-2.0
5
5
  */
6
6
 
7
- @use "../rfs";
8
7
  @use "../variables";
9
8
  @use "../mixins";
10
9
  @use "../fonts";
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v10.0.1-dev.844 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v10.0.1-dev.846 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/web-essentials",
3
- "version": "10.0.1-dev.844",
3
+ "version": "10.0.1-dev.846",
4
4
  "description": "CSS framework and utils to build FESTO web applications",
5
5
  "keywords": [
6
6
  "css",
@@ -1,4 +1,3 @@
1
- @use "rfs";
2
1
  @use "variables";
3
2
 
4
3
  // Normalization of HTML elements, manually forked from Normalize.css to remove
@@ -124,7 +123,7 @@ code,
124
123
  kbd,
125
124
  samp {
126
125
  font-family: variables.$font-family-monospace;
127
- @include rfs.font-size(1em); /* 2 */
126
+ font-size: 1em; /* 2 */
128
127
  }
129
128
 
130
129
  /**
@@ -4,7 +4,6 @@
4
4
  * Licensed under Apache-2.0
5
5
  */
6
6
 
7
- @use "rfs";
8
7
  @use "variables";
9
8
  @use "mixins";
10
9
  @use "fonts";
@@ -4,7 +4,6 @@
4
4
  * Licensed under Apache-2.0
5
5
  */
6
6
 
7
- @use "../rfs";
8
7
  @use "../variables";
9
8
  @use "../mixins";
10
9
  @use "../fonts";
@@ -1,177 +0,0 @@
1
- @use "sass:meta";
2
- // SCSS RFS mixin
3
- // Automated responsive font sizes
4
- // Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
5
-
6
- // Configuration
7
-
8
- // Base font size
9
- @use "sass:math";
10
-
11
- $rfs-base-font-size: 1.25rem !default;
12
- $rfs-font-size-unit: rem !default;
13
-
14
- @if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
15
- @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
16
- }
17
-
18
- // Breakpoint at where font-size starts decreasing if screen width is smaller
19
- $rfs-breakpoint: 1200px !default;
20
- $rfs-breakpoint-unit: px !default;
21
-
22
- @if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
23
- @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
24
- }
25
-
26
- // Resize font size based on screen height and width
27
- $rfs-two-dimensional: false !default;
28
-
29
- // Factor of decrease
30
- $rfs-factor: 10 !default;
31
-
32
- @if meta.type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
33
- @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
34
- }
35
-
36
- // Generate enable or disable classes. Possibilities: false, "enable" or "disable"
37
- $rfs-class: false !default;
38
-
39
- // 1 rem = $rfs-rem-value px
40
- $rfs-rem-value: 16 !default;
41
-
42
- // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
43
- $rfs-safari-iframe-resize-bug-fix: false !default;
44
-
45
- // Disable RFS by setting $enable-responsive-font-sizes to false
46
- $enable-responsive-font-sizes: true !default;
47
-
48
- // Cache $rfs-base-font-size unit
49
- $rfs-base-font-size-unit: math.unit($rfs-base-font-size);
50
-
51
- // Remove px-unit from $rfs-base-font-size for calculations
52
- @if $rfs-base-font-size-unit == "px" {
53
- $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
54
- } @else if $rfs-base-font-size-unit == "rem" {
55
- $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + math.div(1, $rfs-rem-value));
56
- }
57
-
58
- // Cache $rfs-breakpoint unit to prevent multiple calls
59
- $rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
60
-
61
- // Remove unit from $rfs-breakpoint for calculations
62
- @if $rfs-breakpoint-unit-cache == "px" {
63
- $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
64
- } @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
65
- $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
66
- }
67
-
68
- // Internal mixin that adds disable classes to the selector if needed.
69
- @mixin _rfs-disable-class {
70
- @if $rfs-class == "disable" {
71
- // Adding an extra class increases specificity, which prevents the media query to override the font size
72
- &,
73
- .disable-responsive-font-size &,
74
- &.disable-responsive-font-size {
75
- @content;
76
- }
77
- } @else {
78
- @content;
79
- }
80
- }
81
-
82
- // Internal mixin that adds enable classes to the selector if needed.
83
- @mixin _rfs-enable-class {
84
- @if $rfs-class == "enable" {
85
- .enable-responsive-font-size &,
86
- &.enable-responsive-font-size {
87
- @content;
88
- }
89
- } @else {
90
- @content;
91
- }
92
- }
93
-
94
- // Internal mixin used to determine which media query needs to be used
95
- @mixin _rfs-media-query($mq-value) {
96
- @if $rfs-two-dimensional {
97
- @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
98
- @content;
99
- }
100
- } @else {
101
- @media (max-width: #{$mq-value}) {
102
- @content;
103
- }
104
- }
105
- }
106
-
107
- // Responsive font size mixin
108
- @mixin rfs($fs, $important: false) {
109
- // Cache $fs unit
110
- $fs-unit: if(meta.type-of($fs) == "number", math.unit($fs), false);
111
-
112
- // Add !important suffix if needed
113
- $rfs-suffix: if($important, " !important", "");
114
-
115
- // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
116
- @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
117
- font-size: #{$fs}#{$rfs-suffix};
118
- } @else {
119
- // Remove unit from $fs for calculations
120
- @if $fs-unit == "px" {
121
- $fs: math.div($fs, $fs * 0 + 1);
122
- } @else if $fs-unit == "rem" {
123
- $fs: math.div($fs, $fs * 0 + math.div(1, $rfs-rem-value));
124
- }
125
-
126
- // Set default font size
127
- $rfs-static: if($rfs-font-size-unit == rem, #{math.div($fs, $rfs-rem-value)}rem, #{$fs}px);
128
-
129
- // Only add the media query if the font size is bigger than the minimum font size
130
- @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
131
- font-size: #{$rfs-static}#{$rfs-suffix};
132
- } @else {
133
- // Calculate the minimum font size for $fs
134
- $fs-min: $rfs-base-font-size + math.div($fs - $rfs-base-font-size, $rfs-factor);
135
-
136
- // Calculate difference between $fs and the minimum font size
137
- $fs-diff: $fs - $fs-min;
138
-
139
- // Base font-size formatting
140
- $min-width: if($rfs-font-size-unit == rem, #{math.div($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
141
-
142
- // Use `vmin` if two-dimensional is enabled
143
- $variable-unit: if($rfs-two-dimensional, vmin, vw);
144
-
145
- // Calculate the variable width between 0 and $rfs-breakpoint
146
- $variable-width: #{math.div($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
147
-
148
- // Set the calculated font-size
149
- $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
150
-
151
- // Breakpoint formatting
152
- $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
153
-
154
- @include _rfs-disable-class {
155
- font-size: #{$rfs-static}#{$rfs-suffix};
156
- }
157
-
158
- @include _rfs-media-query($mq-value) {
159
- @include _rfs-enable-class {
160
- font-size: $rfs-fluid;
161
- }
162
-
163
- // Include safari iframe resize fix if needed
164
- min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
165
- }
166
- }
167
- }
168
- }
169
-
170
- // The font-size & responsive-font-size mixins use RFS to rescale the font size
171
- @mixin font-size($fs, $important: false) {
172
- @include rfs($fs, $important);
173
- }
174
-
175
- @mixin responsive-font-size($fs, $important: false) {
176
- @include rfs($fs, $important);
177
- }
package/scss/_rfs.scss DELETED
@@ -1,177 +0,0 @@
1
- @use "sass:meta";
2
- // SCSS RFS mixin
3
- // Automated responsive font sizes
4
- // Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
5
-
6
- // Configuration
7
-
8
- // Base font size
9
- @use "sass:math";
10
-
11
- $rfs-base-font-size: 1.25rem !default;
12
- $rfs-font-size-unit: rem !default;
13
-
14
- @if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
15
- @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
16
- }
17
-
18
- // Breakpoint at where font-size starts decreasing if screen width is smaller
19
- $rfs-breakpoint: 1200px !default;
20
- $rfs-breakpoint-unit: px !default;
21
-
22
- @if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
23
- @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
24
- }
25
-
26
- // Resize font size based on screen height and width
27
- $rfs-two-dimensional: false !default;
28
-
29
- // Factor of decrease
30
- $rfs-factor: 10 !default;
31
-
32
- @if meta.type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
33
- @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
34
- }
35
-
36
- // Generate enable or disable classes. Possibilities: false, "enable" or "disable"
37
- $rfs-class: false !default;
38
-
39
- // 1 rem = $rfs-rem-value px
40
- $rfs-rem-value: 16 !default;
41
-
42
- // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
43
- $rfs-safari-iframe-resize-bug-fix: false !default;
44
-
45
- // Disable RFS by setting $enable-responsive-font-sizes to false
46
- $enable-responsive-font-sizes: true !default;
47
-
48
- // Cache $rfs-base-font-size unit
49
- $rfs-base-font-size-unit: math.unit($rfs-base-font-size);
50
-
51
- // Remove px-unit from $rfs-base-font-size for calculations
52
- @if $rfs-base-font-size-unit == "px" {
53
- $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
54
- } @else if $rfs-base-font-size-unit == "rem" {
55
- $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + math.div(1, $rfs-rem-value));
56
- }
57
-
58
- // Cache $rfs-breakpoint unit to prevent multiple calls
59
- $rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
60
-
61
- // Remove unit from $rfs-breakpoint for calculations
62
- @if $rfs-breakpoint-unit-cache == "px" {
63
- $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
64
- } @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
65
- $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
66
- }
67
-
68
- // Internal mixin that adds disable classes to the selector if needed.
69
- @mixin _rfs-disable-class {
70
- @if $rfs-class == "disable" {
71
- // Adding an extra class increases specificity, which prevents the media query to override the font size
72
- &,
73
- .disable-responsive-font-size &,
74
- &.disable-responsive-font-size {
75
- @content;
76
- }
77
- } @else {
78
- @content;
79
- }
80
- }
81
-
82
- // Internal mixin that adds enable classes to the selector if needed.
83
- @mixin _rfs-enable-class {
84
- @if $rfs-class == "enable" {
85
- .enable-responsive-font-size &,
86
- &.enable-responsive-font-size {
87
- @content;
88
- }
89
- } @else {
90
- @content;
91
- }
92
- }
93
-
94
- // Internal mixin used to determine which media query needs to be used
95
- @mixin _rfs-media-query($mq-value) {
96
- @if $rfs-two-dimensional {
97
- @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
98
- @content;
99
- }
100
- } @else {
101
- @media (max-width: #{$mq-value}) {
102
- @content;
103
- }
104
- }
105
- }
106
-
107
- // Responsive font size mixin
108
- @mixin rfs($fs, $important: false) {
109
- // Cache $fs unit
110
- $fs-unit: if(meta.type-of($fs) == "number", math.unit($fs), false);
111
-
112
- // Add !important suffix if needed
113
- $rfs-suffix: if($important, " !important", "");
114
-
115
- // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
116
- @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
117
- font-size: #{$fs}#{$rfs-suffix};
118
- } @else {
119
- // Remove unit from $fs for calculations
120
- @if $fs-unit == "px" {
121
- $fs: math.div($fs, $fs * 0 + 1);
122
- } @else if $fs-unit == "rem" {
123
- $fs: math.div($fs, $fs * 0 + math.div(1, $rfs-rem-value));
124
- }
125
-
126
- // Set default font size
127
- $rfs-static: if($rfs-font-size-unit == rem, #{math.div($fs, $rfs-rem-value)}rem, #{$fs}px);
128
-
129
- // Only add the media query if the font size is bigger than the minimum font size
130
- @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
131
- font-size: #{$rfs-static}#{$rfs-suffix};
132
- } @else {
133
- // Calculate the minimum font size for $fs
134
- $fs-min: $rfs-base-font-size + math.div($fs - $rfs-base-font-size, $rfs-factor);
135
-
136
- // Calculate difference between $fs and the minimum font size
137
- $fs-diff: $fs - $fs-min;
138
-
139
- // Base font-size formatting
140
- $min-width: if($rfs-font-size-unit == rem, #{math.div($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
141
-
142
- // Use `vmin` if two-dimensional is enabled
143
- $variable-unit: if($rfs-two-dimensional, vmin, vw);
144
-
145
- // Calculate the variable width between 0 and $rfs-breakpoint
146
- $variable-width: #{math.div($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
147
-
148
- // Set the calculated font-size
149
- $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
150
-
151
- // Breakpoint formatting
152
- $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
153
-
154
- @include _rfs-disable-class {
155
- font-size: #{$rfs-static}#{$rfs-suffix};
156
- }
157
-
158
- @include _rfs-media-query($mq-value) {
159
- @include _rfs-enable-class {
160
- font-size: $rfs-fluid;
161
- }
162
-
163
- // Include safari iframe resize fix if needed
164
- min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
165
- }
166
- }
167
- }
168
- }
169
-
170
- // The font-size & responsive-font-size mixins use RFS to rescale the font size
171
- @mixin font-size($fs, $important: false) {
172
- @include rfs($fs, $important);
173
- }
174
-
175
- @mixin responsive-font-size($fs, $important: false) {
176
- @include rfs($fs, $important);
177
- }