@scaleflex/widget-core 4.0.7 → 4.3.0

package/lib/_common.scss

@@ -1,244 +1,244 @@
-/**
-* General Scaleflex styles that apply to everything inside the .filerobot-Root container
-*/
-
-.filerobot-Root {
-  overflow: hidden;
-  box-sizing: border-box;
-  font-family: $font-family-base;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: left;
-  position: relative;
-  color: $gray-800;
-
-  :disabled {
-    cursor: not-allowed;
-  }
-}
-
-
-.SfxModal-Wrapper, .filerobot-Root *, #SfxPopper * {
- font-family: $font-family-base;
-}
-
-#SfxPopper * {
-  box-sizing: border-box;
-}
-
-.SfxModal-Wrapper *, .filerobot-Root *, #SfxPopper * {
-  scrollbar-color: auto !important;
-
-  &::-webkit-scrollbar {
-    width: 12px !important;
-    height: 12px !important;
-  }
-
-  /* Track */
-  &::-webkit-scrollbar-track {
-    background: transparent !important;
-  }
-
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background: #CCD6DE;
-    border: 4px solid #FFFFFF;
-    border-radius: 99px;
-    padding: 4px 6px;
-  }
-}
-
-.filerobot-Root *, .filerobot-Root *:before, .filerobot-Root *:after {
-  box-sizing: inherit;
-}
-
-.filerobot-Root [hidden] {
-  display: none;
-}
-
-// Utilities
-
-// used in a few places
-.filerobot-u-reset {
-  -webkit-appearance: none;
-  line-height: 1;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: inherit;
-  backface-visibility: visible;
-  background: none;
-  border: medium none currentColor;
-  border-collapse: separate;
-  border-image: none;
-  border-radius: 0;
-  border-spacing: 0;
-  box-shadow: none;
-  clear: none;
-  cursor: auto;
-  display: inline;
-  empty-cells: show;
-  float: none;
-  font-family: inherit;
-  font-size: inherit;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  font-stretch: normal;
-  hyphens: none;
-  left: auto;
-  letter-spacing: normal;
-  list-style: none;
-  margin: 0;
-  max-height: none;
-  max-width: none;
-  min-height: 0;
-  min-width: 0;
-  opacity: 1;
-  outline: medium none invert;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  top: auto;
-  transform: none;
-  transform-origin: 50% 50% 0;
-  transform-style: flat;
-  transition: none 0s ease 0s;
-  unicode-bidi: normal;
-  vertical-align: baseline;
-  visibility: visible;
-  white-space: normal;
-  z-index: auto;
-
-  span {
-    max-width: 250px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    :not(:disabled) {
-      :active {
-        background-color: #eceef2;
-      }
-    }
-  }
-}
-
-//.filerobot-c-separator {
-//  height: 60%;
-//  border-left: 1px solid $border-primary-stateless;
-//  width: 1px;
-//  display: inline;
-//  margin: 0 8px;
-//}
-
-.filerobot-c-horizontal-separator {
-  width: 100%;
-  border-bottom: 1px solid $border;
-  height: 1px;
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-// Icon
-
-// https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
-// used in a few places
-.filerobot-c-icon {
-  max-width: 100%;
-  max-height: 100%;
-  fill: currentColor;
-  display: inline-block;
-  overflow: hidden;
-}
-
-// Buttons
-
-.filerobot-c-btn {
-  display: inline-block;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  font-family: inherit;
-  font-size: 16px;
-  line-height: 1;
-  font-weight: 500;
-  transition-property: background-color, color;
-  transition-duration: 0.3s;
-  user-select: none;
-}
-
-  .filerobot-c-btn:not(:disabled):not(.disabled) {
-    cursor: pointer;
-  }
-
-  .filerobot-c-btn::-moz-focus-inner {
-    border: 0;
-  }
-
-.filerobot-c-btn-primary {
-  font-size: 14px;
-  padding: 10px 18px;
-  border-radius: 4px;
-  background-color: $blue;
-  color: $white;
-
-  &:hover {
-    background-color: darken($blue, 10%);
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba($blue, 0.4);
-  }
-
-  .filerobot-size--md & {
-    padding: 13px 22px;
-  }
-
-  [data-filerobot-theme="dark"] & {
-    color: $gray-200;
-    @include blue-border-focus--dark;
-  }
-}
-
-.filerobot-c-empty {
-  &-wrapper {
-    display: flex;
-    height: 100%;
-  }
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column wrap;
-  flex: 1;
-  color: $gray-500;
-  background-color: #ffffff;
-  line-height: 14px;
-  font-size: 12px;
-
-  &.left {
-    align-items: flex-start;
-  }
-  &.right {
-    align-items: flex-end;
-  }
- }
-
-.filerobot-c-empty {
-  align-items: flex-start;
-  color: $light-txt-secondary;
-}
-
-svg {
-  outline: none;
+/**
+* General Scaleflex styles that apply to everything inside the .filerobot-Root container
+*/
+
+.filerobot-Root {
+  overflow: hidden;
+  box-sizing: border-box;
+  font-family: $font-family-base;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  position: relative;
+  color: $gray-800;
+
+  :disabled {
+    cursor: not-allowed;
+  }
+}
+
+
+.SfxModal-Wrapper, .filerobot-Root *, #SfxPopper * {
+ font-family: $font-family-base;
+}
+
+#SfxPopper * {
+  box-sizing: border-box;
+}
+
+.SfxModal-Wrapper *, .filerobot-Root *, #SfxPopper * {
+  scrollbar-color: auto !important;
+
+  &::-webkit-scrollbar {
+    width: 12px !important;
+    height: 12px !important;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: transparent !important;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: #CCD6DE;
+    border: 4px solid #FFFFFF;
+    border-radius: 99px;
+    padding: 4px 6px;
+  }
+}
+
+.filerobot-Root *, .filerobot-Root *:before, .filerobot-Root *:after {
+  box-sizing: inherit;
+}
+
+.filerobot-Root [hidden] {
+  display: none;
+}
+
+// Utilities
+
+// used in a few places
+.filerobot-u-reset {
+  -webkit-appearance: none;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  color: inherit;
+  backface-visibility: visible;
+  background: none;
+  border: medium none currentColor;
+  border-collapse: separate;
+  border-image: none;
+  border-radius: 0;
+  border-spacing: 0;
+  box-shadow: none;
+  clear: none;
+  cursor: auto;
+  display: inline;
+  empty-cells: show;
+  float: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  hyphens: none;
+  left: auto;
+  letter-spacing: normal;
+  list-style: none;
+  margin: 0;
+  max-height: none;
+  max-width: none;
+  min-height: 0;
+  min-width: 0;
+  opacity: 1;
+  outline: medium none invert;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  text-align: left;
+  text-decoration: none;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  top: auto;
+  transform: none;
+  transform-origin: 50% 50% 0;
+  transform-style: flat;
+  transition: none 0s ease 0s;
+  unicode-bidi: normal;
+  vertical-align: baseline;
+  visibility: visible;
+  white-space: normal;
+  z-index: auto;
+
+  span {
+    max-width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    :not(:disabled) {
+      :active {
+        background-color: #eceef2;
+      }
+    }
+  }
+}
+
+//.filerobot-c-separator {
+//  height: 60%;
+//  border-left: 1px solid $border-primary-stateless;
+//  width: 1px;
+//  display: inline;
+//  margin: 0 8px;
+//}
+
+.filerobot-c-horizontal-separator {
+  width: 100%;
+  border-bottom: 1px solid $border;
+  height: 1px;
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+// Icon
+
+// https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
+// used in a few places
+.filerobot-c-icon {
+  max-width: 100%;
+  max-height: 100%;
+  fill: currentColor;
+  display: inline-block;
+  overflow: hidden;
+}
+
+// Buttons
+
+.filerobot-c-btn {
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 1;
+  font-weight: 500;
+  transition-property: background-color, color;
+  transition-duration: 0.3s;
+  user-select: none;
+}
+
+  .filerobot-c-btn:not(:disabled):not(.disabled) {
+    cursor: pointer;
+  }
+
+  .filerobot-c-btn::-moz-focus-inner {
+    border: 0;
+  }
+
+.filerobot-c-btn-primary {
+  font-size: 14px;
+  padding: 10px 18px;
+  border-radius: 4px;
+  background-color: $blue;
+  color: $white;
+
+  &:hover {
+    background-color: darken($blue, 10%);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba($blue, 0.4);
+  }
+
+  .filerobot-size--md & {
+    padding: 13px 22px;
+  }
+
+  [data-filerobot-theme="dark"] & {
+    color: $gray-200;
+    @include blue-border-focus--dark;
+  }
+}
+
+.filerobot-c-empty {
+  &-wrapper {
+    display: flex;
+    height: 100%;
+  }
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column wrap;
+  flex: 1;
+  color: $gray-500;
+  background-color: #ffffff;
+  line-height: 14px;
+  font-size: 12px;
+
+  &.left {
+    align-items: flex-start;
+  }
+  &.right {
+    align-items: flex-end;
+  }
+ }
+
+.filerobot-c-empty {
+  align-items: flex-start;
+  color: $light-txt-secondary;
+}
+
+svg {
+  outline: none;
 }

package/lib/_utils.scss

@@ -1,38 +1,38 @@
-// Utility Mixins
-
-@mixin reset-button() {
-  background: none;
-  -webkit-appearance: none;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: inherit;
-}
-
-@mixin blue-border-focus() {
-  @include clear-focus();
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($blue, 0.5);
-  }
-}
-
-@mixin blue-border-focus--dark() {
-  @include clear-focus();
-
-  &:focus {
-    box-shadow: 0 0 0 2px rgba($lightblue, 0.85);
-  }
-}
-
-@mixin clear-focus() {
-  &:focus {
-    outline: none;
-  }
-  &::-moz-focus-inner {
-    border: 0;
-  }
-}
+// Utility Mixins
+
+@mixin reset-button() {
+  background: none;
+  -webkit-appearance: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  color: inherit;
+}
+
+@mixin blue-border-focus() {
+  @include clear-focus();
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($blue, 0.5);
+  }
+}
+
+@mixin blue-border-focus--dark() {
+  @include clear-focus();
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba($lightblue, 0.85);
+  }
+}
+
+@mixin clear-focus() {
+  &:focus {
+    outline: none;
+  }
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}

package/lib/_variables.scss

@@ -1,64 +1,64 @@
-// Fonts
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
-$font-family-base: 'Roboto', sans-serif, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-
-// Colors
-
-$white: #fff !default;
-$black: #000 !default;
-$red: #e32437 !default;
-$blue: #5282DB !default;
-$lightblue: #aae1ff !default;
-$darkgrey: #37414B !default;
-$light-icons-primary: #768A9F;
-$light-icons-secondary: #97A6B6 !default;
-$light-txt-secondary: #768A9F;
-
-$primary: #4D4E4E !default;
-$secondary: #768184 !default;
-$accent: #6879EB !default;
-$accent-hover: #606FD1 !default;
-$accent-active: #4958BC !default;
-$error: #E85B46 !default;
-
-$background-primary: #F8FAFB !default;
-$background-secondary: #FFFFFF !default;
-$background-light-hover: #F9FBFC !default;
-$background-light-active: #F3F7FA !default;
-$hover: #EFF3F6 !default;
-$active: #5D6D7E !default;
-$active-transition: #d9dde0 !default;
-$active-secondary: #E9EEF2 !default;
-$border: #DFE7ED !default;
-$border-primary-stateless: #CCD6DE;
-$link-active: #92A6BC !default;
-
-$gray-50: #fafafa !default;
-$gray-100: #f4f4f4 !default;
-$gray-100--highlighted: #f1f3f6 !default;
-$gray-200: #eaeaea !default;
-$gray-400: #bbb !default;
-$gray-500: #939393 !default;
-$gray-600: #757575 !default;
-$gray-800: #333 !default;
-$gray-900: #1f1f1f !default;
-
-$highlight: #eceef2;
-$highlight--dark: #02baf2;
-
-$shadow-color: rgba(0, 0, 0, 0.25);
-
-// Z-index
-
-$zIndex-0: 100 !default;
-$zIndex-1: 1001 !default;
-$zIndex-2: 1002 !default;
-$zIndex-3: 1003 !default;
-$zIndex-5: 1005 !default;
-$zIndex-highest-1: 1199 !default;
-$zIndex-highest: 1200 !default;
-$zIndex-modal: 100000 !default;
-
-// Media Queries
-$screen-medium: 'only screen and (min-width: 820px)' !default;
+// Fonts
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+$font-family-base: 'Roboto', sans-serif, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+
+// Colors
+
+$white: #fff !default;
+$black: #000 !default;
+$red: #e32437 !default;
+$blue: #5282DB !default;
+$lightblue: #aae1ff !default;
+$darkgrey: #37414B !default;
+$light-icons-primary: #768A9F;
+$light-icons-secondary: #97A6B6 !default;
+$light-txt-secondary: #768A9F;
+
+$primary: #4D4E4E !default;
+$secondary: #768184 !default;
+$accent: #6879EB !default;
+$accent-hover: #606FD1 !default;
+$accent-active: #4958BC !default;
+$error: #E85B46 !default;
+
+$background-primary: #F8FAFB !default;
+$background-secondary: #FFFFFF !default;
+$background-light-hover: #F9FBFC !default;
+$background-light-active: #F3F7FA !default;
+$hover: #EFF3F6 !default;
+$active: #5D6D7E !default;
+$active-transition: #d9dde0 !default;
+$active-secondary: #E9EEF2 !default;
+$border: #DFE7ED !default;
+$border-primary-stateless: #CCD6DE;
+$link-active: #92A6BC !default;
+
+$gray-50: #fafafa !default;
+$gray-100: #f4f4f4 !default;
+$gray-100--highlighted: #f1f3f6 !default;
+$gray-200: #eaeaea !default;
+$gray-400: #bbb !default;
+$gray-500: #939393 !default;
+$gray-600: #757575 !default;
+$gray-800: #333 !default;
+$gray-900: #1f1f1f !default;
+
+$highlight: #eceef2;
+$highlight--dark: #02baf2;
+
+$shadow-color: rgba(0, 0, 0, 0.25);
+
+// Z-index
+
+$zIndex-0: 100 !default;
+$zIndex-1: 1001 !default;
+$zIndex-2: 1002 !default;
+$zIndex-3: 1003 !default;
+$zIndex-5: 1005 !default;
+$zIndex-highest-1: 1199 !default;
+$zIndex-highest: 1200 !default;
+$zIndex-modal: 100000 !default;
+
+// Media Queries
+$screen-medium: 'only screen and (min-width: 820px)' !default;
 $screen-xxl: 'only screen and (min-width: 1601px)' !default;