fcr-ui-scene 3.8.1-alpha → 3.8.1

package/lib/modules/whiteboard/components/pagination/index.css

@@ -1,228 +1,228 @@
-.fcr-pagination {
-  background: var(--fcr_web_ui_scene_fill2);
-  box-shadow: var(--fcr_dark_s_shadow);
-  border-radius: 8px;
-  border-width: 1px;
-  border-style: solid;
-  display: inline-flex;
-  padding: 0 4px;
-  font-size: 14px;
-  height: 36px;
-}
-
-.fcr-pagination .fcr-pagination__prev,
-.fcr-pagination .fcr-pagination__next,
-.fcr-pagination .fcr-pagination__expansion {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fcr-pagination .fcr-pagination__prev {
-  padding-right: 4px;
-}
-.fcr-pagination .fcr-pagination__next {
-  padding-left: 4px;
-}
-
-.fcr-pagination .fcr-pagination__btn {
-  border-radius: 6px;
-  height: 26px;
-  width: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-}
-
-.fcr-pagination .fcr-pagination__btn:hover:not(.fcr-pagination_btn--disabled) {
-  cursor: pointer;
-  color: var(--color-icon-2);
-  background: var(--color-hover);
-}
-
-.fcr-pagination .fcr-pagination__btn:active:not(.fcr-pagination_btn--disabled) {
-  @apply fcr-bg-brand-8;
-}
-
-.fcr-pagination .fcr-pagination__page {
-  @apply fcr-text-1;
-  text-align: center;
-  width: 58px;
-  font-weight: 700;
-  align-self: center;
-}
-
-.fcr-pagination-small {
-  height: 32px;
-}
-.fcr-pagination-small .fcr-pagination__page {
-  width: 40px;
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.fcr-pagination.fcr-pagination-half-r {
-  @apply fcr-rounded-8;
-  height: 32px;
-  min-width: 40px;
-  font-size: 16px;
-  padding: 5px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border: none;
-  justify-content: center;
-}
-
-.fcr-pagination-half-r .fcr-pagination__extra .fcr-clickabel-icon {
-  @apply fcr-rounded-4;
-  width: 30px;
-  height: 22px;
-}
-
-.fcr-pagination-half-r .fcr-pagination__next .fcr-pagination__btn,
-.fcr-pagination-half-r .fcr-pagination__prev .fcr-pagination__btn {
-  @apply fcr-rounded-4;
-  width: 22px;
-  height: 22px;
-}
-
-.fcr-pagination-half-r .fcr-pagination__page {
-  flex-shrink: 0;
-  width: fit-content;
-  min-width: 35px;
-}
-
-.fcr-pagination-mask {
-  display: inline-flex;
-  width: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: 0.3s all;
-}
-
-.fcr-pagination-mask--expanded {
-  opacity: 1;
-  width: 148px;
-}
-
-.fcr-pagination__expansion {
-  width: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: 0.3s all;
-  cursor: pointer;
-}
-
-.fcr-pagination__expansion--expanded {
-  opacity: 1;
-  width: 30px;
-}
-
-.fcr-pagination-half-r .fcr-pagination__extra {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-right: 9px;
-}
-
-.fcr-pagination-half-r .fcr-pagination__btn {
-  @apply fcr-rounded-10;
-  height: 30px;
-  width: 30px;
-}
-
-.fcr-pagination-half-r .fcr-pagination__prev {
-  padding-left: 13px;
-}
-
-.fcr-pagination_btn--disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.fcr-pagination-float {
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  --effect-color: theme(colors.brand.4);
-}
-
-.fcr-pagination-float .fcr-pagination-float__prev,
-.fcr-pagination-float .fcr-pagination-float__next {
-  @apply fcr-bg-4 fcr-rounded-8;
-  pointer-events: all;
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 12px;
-}
-.fcr-pagination-float .fcr-pagination-float__prev {
-  left: 10px;
-}
-
-.fcr-pagination-float .fcr-pagination-float__next {
-  right: 10px;
-}
-.fcr-pagination-float .fcr-pagination-float__btn,
-.fcr-pagination-list-view .fcr-pagination-float__btn {
-  @apply fcr-rounded-8 fcr-bg-2;
-  width: 40px;
-  height: 40px;
-  /* Note: backdrop-filter has minimal browser support */
-  backdrop-filter: blur(25px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-}
-.fcr-pagination-float .fcr-pagination-float__btn:hover:not(.fcr-pagination_btn--disabled),
-.fcr-pagination-list-view .fcr-pagination-float__btn:hover:not(.fcr-pagination_btn--disabled) {
-  @apply fcr-bg-brand-6;
-  cursor: pointer;
-  color: var(--color-icon-2);
-}
-
-.fcr-pagination-float .fcr-pagination-float__btn:active:not(.fcr-pagination_btn--disabled),
-.fcr-pagination-list-view .fcr-pagination-float__btn:active:not(.fcr-pagination_btn--disabled) {
-  @apply fcr-bg-brand-8;
-}
-
-.fcr-pagination-float__page {
-  @apply fcr-text-1;
-  padding: 3px 0 5px;
-}
-.fcr-pagination-list-view {
-  --effect-color: theme(colors.brand.4);
-  display: flex;
-  gap: 4px;
-}
-.fcr-pagination-list-view-col {
-  flex-direction: column;
-}
-.fcr-pagination-list-view .fcr-pagination-float__btn {
-  @apply fcr-rounded-4;
-}
-.fcr-pagination-list-view-row .fcr-pagination-float__btn {
-  width: 30px;
-  height: 114px;
-}
-.fcr-pagination-list-view-row .fcr-pagination-list-view__next svg {
-  transform: rotate(180deg);
-}
-.fcr-pagination-list-view-col .fcr-pagination-float__btn {
-  width: 192px;
-  height: 30px;
-}
-.fcr-pagination-list-view-col .fcr-pagination-list-view__prev svg {
-  transform: rotate(90deg);
-}
-.fcr-pagination-list-view-col .fcr-pagination-list-view__next svg {
-  transform: rotate(270deg);
-}
-.fcr-pagination-list-view .fcr-pagination-list-view__prev .fcr-pagination-float__btn,
-.fcr-pagination-list-view .fcr-pagination-list-view__next .fcr-pagination-float__btn {
-  @apply fcr-bg-2-a70;
-}
+.fcr-pagination {
+  background: var(--fcr_web_ui_scene_fill2);
+  box-shadow: var(--fcr_dark_s_shadow);
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+  display: inline-flex;
+  padding: 0 4px;
+  font-size: 14px;
+  height: 36px;
+}
+
+.fcr-pagination .fcr-pagination__prev,
+.fcr-pagination .fcr-pagination__next,
+.fcr-pagination .fcr-pagination__expansion {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.fcr-pagination .fcr-pagination__prev {
+  padding-right: 4px;
+}
+.fcr-pagination .fcr-pagination__next {
+  padding-left: 4px;
+}
+
+.fcr-pagination .fcr-pagination__btn {
+  border-radius: 6px;
+  height: 26px;
+  width: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+.fcr-pagination .fcr-pagination__btn:hover:not(.fcr-pagination_btn--disabled) {
+  cursor: pointer;
+  color: var(--color-icon-2);
+  background: var(--color-hover);
+}
+
+.fcr-pagination .fcr-pagination__btn:active:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-8;
+}
+
+.fcr-pagination .fcr-pagination__page {
+  @apply fcr-text-1;
+  text-align: center;
+  width: 58px;
+  font-weight: 700;
+  align-self: center;
+}
+
+.fcr-pagination-small {
+  height: 32px;
+}
+.fcr-pagination-small .fcr-pagination__page {
+  width: 40px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.fcr-pagination.fcr-pagination-half-r {
+  @apply fcr-rounded-8;
+  height: 32px;
+  min-width: 40px;
+  font-size: 16px;
+  padding: 5px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border: none;
+  justify-content: center;
+}
+
+.fcr-pagination-half-r .fcr-pagination__extra .fcr-clickabel-icon {
+  @apply fcr-rounded-4;
+  width: 30px;
+  height: 22px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__next .fcr-pagination__btn,
+.fcr-pagination-half-r .fcr-pagination__prev .fcr-pagination__btn {
+  @apply fcr-rounded-4;
+  width: 22px;
+  height: 22px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__page {
+  flex-shrink: 0;
+  width: fit-content;
+  min-width: 35px;
+}
+
+.fcr-pagination-mask {
+  display: inline-flex;
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: 0.3s all;
+}
+
+.fcr-pagination-mask--expanded {
+  opacity: 1;
+  width: 148px;
+}
+
+.fcr-pagination__expansion {
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: 0.3s all;
+  cursor: pointer;
+}
+
+.fcr-pagination__expansion--expanded {
+  opacity: 1;
+  width: 30px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__extra {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: 9px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__btn {
+  @apply fcr-rounded-10;
+  height: 30px;
+  width: 30px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__prev {
+  padding-left: 13px;
+}
+
+.fcr-pagination_btn--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.fcr-pagination-float {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  --effect-color: theme(colors.brand.4);
+}
+
+.fcr-pagination-float .fcr-pagination-float__prev,
+.fcr-pagination-float .fcr-pagination-float__next {
+  @apply fcr-bg-4 fcr-rounded-8;
+  pointer-events: all;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+}
+.fcr-pagination-float .fcr-pagination-float__prev {
+  left: 10px;
+}
+
+.fcr-pagination-float .fcr-pagination-float__next {
+  right: 10px;
+}
+.fcr-pagination-float .fcr-pagination-float__btn,
+.fcr-pagination-list-view .fcr-pagination-float__btn {
+  @apply fcr-rounded-8 fcr-bg-2;
+  width: 40px;
+  height: 40px;
+  /* Note: backdrop-filter has minimal browser support */
+  backdrop-filter: blur(25px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+.fcr-pagination-float .fcr-pagination-float__btn:hover:not(.fcr-pagination_btn--disabled),
+.fcr-pagination-list-view .fcr-pagination-float__btn:hover:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-6;
+  cursor: pointer;
+  color: var(--color-icon-2);
+}
+
+.fcr-pagination-float .fcr-pagination-float__btn:active:not(.fcr-pagination_btn--disabled),
+.fcr-pagination-list-view .fcr-pagination-float__btn:active:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-8;
+}
+
+.fcr-pagination-float__page {
+  @apply fcr-text-1;
+  padding: 3px 0 5px;
+}
+.fcr-pagination-list-view {
+  --effect-color: theme(colors.brand.4);
+  display: flex;
+  gap: 4px;
+}
+.fcr-pagination-list-view-col {
+  flex-direction: column;
+}
+.fcr-pagination-list-view .fcr-pagination-float__btn {
+  @apply fcr-rounded-4;
+}
+.fcr-pagination-list-view-row .fcr-pagination-float__btn {
+  width: 30px;
+  height: 114px;
+}
+.fcr-pagination-list-view-row .fcr-pagination-list-view__next svg {
+  transform: rotate(180deg);
+}
+.fcr-pagination-list-view-col .fcr-pagination-float__btn {
+  width: 192px;
+  height: 30px;
+}
+.fcr-pagination-list-view-col .fcr-pagination-list-view__prev svg {
+  transform: rotate(90deg);
+}
+.fcr-pagination-list-view-col .fcr-pagination-list-view__next svg {
+  transform: rotate(270deg);
+}
+.fcr-pagination-list-view .fcr-pagination-list-view__prev .fcr-pagination-float__btn,
+.fcr-pagination-list-view .fcr-pagination-list-view__next .fcr-pagination-float__btn {
+  @apply fcr-bg-2-a70;
+}

package/lib/modules/whiteboard/components/progress/style.css

@@ -1,51 +1,51 @@
-.progress-dialog-frame {
-  width: 290px;
-  min-height: 58px;
-  padding: 10px 0;
-  border-radius: var(--fcr_cornerradius_s);
-  background: var(--fcr_ui_scene_white6);
-  box-shadow: var(--fcr_web_light_dropup);
-  display: flex;
-  align-items: center;
-  z-index: 1000;
-  position: absolute;
-  top: calc(100% - 98px);
-  left: calc(100vw - 310px);
-}
-.progress-dialog-icon {
-  width: 32px;
-  height: 32px;
-  margin: 0 18px;
-}
-.progress-dialog-icon svg {
-  width: 32px;
-  height: 32px;
-}
-.progress-dialog-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  padding-right: 18px;
-}
-.progress-dialog-title {
-  font-size: 13px;
-  color: var(--fcr_ui_scene_icontext1);
-  margin-bottom: 10px;
-  justify-content: space-between;
-  display: flex;
-  flex: 1;
-}
-.progress-dialog-progress {
-  font-size: 12px;
-  height: 9px;
-  background: var(--fcr_ui_scene_ramp_brand1);
-  border-radius: var(--fcr_cornerradius_round);
-  flex: 1;
-}
-.progress-dialog-progress-bar {
-  width: 100%;
-  height: 9px;
-  background: var(--fcr_ui_scene_ramp_brand6);
-  border-radius: var(--fcr_cornerradius_round);
-}
+.progress-dialog-frame {
+  width: 290px;
+  min-height: 58px;
+  padding: 10px 0;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_ui_scene_white6);
+  box-shadow: var(--fcr_web_light_dropup);
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  position: absolute;
+  top: calc(100% - 98px);
+  left: calc(100vw - 310px);
+}
+.progress-dialog-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 18px;
+}
+.progress-dialog-icon svg {
+  width: 32px;
+  height: 32px;
+}
+.progress-dialog-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  padding-right: 18px;
+}
+.progress-dialog-title {
+  font-size: 13px;
+  color: var(--fcr_ui_scene_icontext1);
+  margin-bottom: 10px;
+  justify-content: space-between;
+  display: flex;
+  flex: 1;
+}
+.progress-dialog-progress {
+  font-size: 12px;
+  height: 9px;
+  background: var(--fcr_ui_scene_ramp_brand1);
+  border-radius: var(--fcr_cornerradius_round);
+  flex: 1;
+}
+.progress-dialog-progress-bar {
+  width: 100%;
+  height: 9px;
+  background: var(--fcr_ui_scene_ramp_brand6);
+  border-radius: var(--fcr_cornerradius_round);
+}