vft 0.0.1 → 0.0.3

package/theme-style/src/common/var.scss

@@ -0,0 +1,841 @@
+@use "sass:math";
+@use "sass:map";
+
+@use "../mixins/function.scss" as *;
+
+// types
+$types: primary, success, warning, danger, error, info;
+
+// Color
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    "white": #fff,
+    "black": #000,
+    "primary": (
+      "base": #2196f3,
+    ),
+    "success": (
+      "base": #3eaf7c,
+    ),
+    "warning": (
+      "base": #fb9b5f,
+    ),
+    "danger": (
+      "base": #f26d6d,
+    ),
+    "error": (
+      "base": #f26d6d,
+    ),
+    "info": (
+      "base": #909399,
+    ),
+  ),
+  $colors
+);
+
+$nprogress-color: #409eff !default;
+
+$color-white: map.get($colors, "white") !default;
+$color-black: map.get($colors, "black") !default;
+$primary-color: getCssVar("primary-color") !default;
+$success-color: getCssVar("success-color") !default;
+$warning-color: getCssVar("warning-color") !default;
+$danger-color: getCssVar("danger-color") !default;
+$error-color: getCssVar("error-color") !default;
+$info-color: getCssVar("info-color") !default;
+
+// 将颜色与黑白混合以生成明暗级别
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: "light",
+  $mix-color: $color-white
+) {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        "#{$mode}-#{$number}":
+          mix(
+            $mix-color,
+            map.get($colors, $type, "base"),
+            math.percentage(math.div($number, 10))
+          ),
+      ),
+    ),
+    $colors
+  ) !global;
+}
+
+// $colors.primary.light-i
+// --vri-primary-color-light-i
+// 10% 53a8ff
+// 20% 66b1ff
+// 30% 79bbff
+// 40% 8cc5ff
+// 50% a0cfff
+// 60% b3d8ff
+// 70% c6e2ff
+// 80% d9ecff
+// 90% ecf5ff
+@each $type in $types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, "light", $color-white);
+  }
+}
+
+// --vri-primary-color-dark-2
+@each $type in $types {
+  @include set-color-mix-level($type, 2, "dark", $color-black);
+}
+
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    "primary-color": #303133,
+    "regular-color": #606266,
+    "secondary-color": #909399,
+    "placeholder-color": #a8abb2,
+    "disabled-color": #c0c4cc,
+  ),
+  $text-color
+);
+
+$text-color-dark: () !default;
+$text-color-dark: map.merge(
+  (
+    "primary-color": white,
+  ),
+  $text-color-dark
+);
+
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    "": #dcdfe6,
+    "light": #e4e7ed,
+    "lighter": #ebeef5,
+    "extra-light": #f2f6fc,
+    "dark": #d4d7de,
+    "darker": #cdd0d6,
+  ),
+  $border-color
+);
+
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    "": #f0f2f5,
+    "light": #f5f7fa,
+    "lighter": #fafafa,
+    "extra-light": #fafcff,
+    "dark": #ebedf0,
+    "darker": #e6e8eb,
+    "blank": #fff,
+  ),
+  $fill-color
+);
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    "": #fff,
+    "page": #f2f3f5,
+    "overlay": #fff,
+  ),
+  $bg-color
+);
+
+// Border
+$border-width: 1px !default;
+$border-style: solid !default;
+$border-color-hover: getCssVar("text", "disabled-color") !default;
+
+$border-radius: () !default;
+$border-radius: map.merge(
+  (
+    "base": 4px,
+    "small": 2px,
+    "round": 20px,
+    "circle": 100%,
+  ),
+  $border-radius
+);
+
+// Box-shadow
+$box-shadow: () !default;
+$box-shadow: map.merge(
+  (
+    "": (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
+      0px 8px 20px rgba(0, 0, 0, 0.08),
+    ),
+    "light": (
+      0px 0px 12px rgba(0, 0, 0, 0.12),
+    ),
+    "lighter": (
+      0px 0px 6px rgba(0, 0, 0, 0.12),
+    ),
+    "dark": (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+      0px 12px 32px rgba(0, 0, 0, 0.12),
+      0px 8px 16px -8px rgba(0, 0, 0, 0.16),
+    ),
+  ),
+  $box-shadow
+);
+
+// Typography
+$font-family: () !default;
+$font-family: map.merge(
+  (
+    // default family
+    "":
+      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
+  ),
+  $font-family
+);
+
+$font-size: () !default;
+$font-size: map.merge(
+  (
+    "extra-large": 20px,
+    "large": 18px,
+    "medium": 16px,
+    "base": 14px,
+    "small": 13px,
+    "extra-small": 12px,
+  ),
+  $font-size
+);
+
+// zIndex
+$z-index: () !default;
+$z-index: map.merge(
+  (
+    "normal": 1,
+    "top": 1000,
+    "popper": 2000,
+  ),
+  $z-index
+);
+
+// Disable default
+$disabled: () !default;
+$disabled: map.merge(
+  (
+    "bg-color": getCssVar("fill-color", "light"),
+    "text-color": getCssVar("text-color", "placeholder"),
+    "border-color": getCssVar("border-color", "light"),
+  ),
+  $disabled
+);
+
+$common-component-size: () !default;
+$common-component-size: map.merge(
+  (
+    "large": 40px,
+    "default": 32px,
+    "small": 24px,
+  ),
+  $common-component-size
+);
+
+// overlay
+$overlay-color: () !default;
+$overlay-color: map.merge(
+  (
+    "": rgba(0, 0, 0, 0.8),
+    "light": rgba(0, 0, 0, 0.7),
+    "lighter": rgba(0, 0, 0, 0.5),
+  ),
+  $overlay-color
+);
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    "": rgba(255, 255, 255, 0.9),
+    "extra-light": rgba(255, 255, 255, 0.3),
+  ),
+  $mask-color
+);
+
+// transition
+$transition: () !default;
+$transition: map.merge(
+  (
+    "all": all getCssVar("transition-duration")
+      getCssVar("transition-function-ease-in-out-bezier"),
+    "fade": opacity getCssVar("transition-duration")
+      getCssVar("transition-function-fast-bezier"),
+    "md-fade": (
+      transform getCssVar("transition-duration")
+        getCssVar("transition-function-fast-bezier"),
+      opacity getCssVar("transition-duration")
+        getCssVar("transition-function-fast-bezier"),
+    ),
+    "fade-linear": opacity getCssVar("transition-duration-fast") linear,
+    "border": border-color getCssVar("transition-duration-fast")
+      getCssVar("transition-function-ease-in-out-bezier"),
+    "box-shadow": box-shadow getCssVar("transition-duration-fast")
+      getCssVar("transition-function-ease-in-out-bezier"),
+    "color": color getCssVar("transition-duration-fast")
+      getCssVar("transition-function-ease-in-out-bezier"),
+  ),
+  $transition
+);
+
+$transition-duration: () !default;
+$transition-duration: map.merge(
+  (
+    "": 0.3s,
+    "fast": 0.2s,
+  ),
+  $transition-duration
+);
+
+$transition-function: () !default;
+$transition-function: map.merge(
+  (
+    "ease-in-out-bezier": cubic-bezier(0.645, 0.045, 0.355, 1),
+    "fast-bezier": cubic-bezier(0.23, 1, 0.32, 1),
+  ),
+  $transition-function
+);
+
+$layout-header: () !default;
+$layout-header: map-merge(
+  (
+    height: 64px,
+    top-height: 40px,
+    bg-color: white,
+    color: black,
+    z-index: 2001,
+    border-bottom: 1px solid rgb(231, 231, 231),
+  ),
+  $layout-header
+);
+
+$layout-footer: () !default;
+$layout-footer: map-merge(
+  (
+    "bg-color": #f7f8fa,
+    "border-top": "1px solid #f7f8fa",
+    "left": getCssVar("menu-width"),
+    "height": "30px",
+    "left-min-width": "auto",
+    "right-min-width": "auto",
+  ),
+  $layout-footer
+);
+
+$name: side-menu;
+$side-menu: () !default;
+$side-menu: map-merge(
+  (
+    "border": getCssVar("menu-border-right"),
+    "width": 200px,
+    "collapse-width": 200px,
+    "scroll-mr": 0,
+  ),
+  $side-menu
+);
+
+$iframe-page: () !default;
+$iframe-page: map-merge(
+  (
+    "text-color": white,
+  ),
+  $iframe-page
+);
+
+$icon: () !default;
+$icon: map-merge(
+  (
+    "text-color": black,
+  ),
+  $icon
+);
+
+$message: () !default;
+$message: map-merge(
+  (
+    "border-radius": 2px,
+    "border-width": 2px,
+    "border-color": red,
+    "padding": 15px 19px,
+    "bg-color": getCssVar("color", "info", "light-9"),
+  ),
+  $message
+);
+
+$divider: () !default;
+$divider: map-merge(
+  (
+    "margin-y": "24px",
+    "margin-x": "8px",
+    "border-color": #dcdfe6,
+    "border-style": "solid",
+  ),
+  $divider
+);
+
+$tabs: () !default;
+$tabs: map-merge(
+  (
+    "padding": 0,
+    "font-size": 14px,
+    "font-weight": 400,
+    "font-weight-active": 500,
+    "header-height": 40px,
+    "border-bottom": 1px solid #eee,
+    "nav-color": #eee,
+    "header-margin": 0 0 15px,
+    "header-padding": 0,
+    "header-border-bottom": none,
+    "item-padding": 0 20px,
+    "item-max-width": 100%,
+    "item-bg-color": white,
+    "item-bg-color-active": #15b4f1,
+    "item-bg-color-hover": #15b4f1,
+    "item-color": black,
+    "item-color-active": white,
+    "item-color-hover": white,
+    "item-border": 1px solid #eee,
+    "item-border-active": 0 solid transparent,
+    "item-border-hover": 0 solid transparent,
+    "item-distance": 10px,
+    "item-border-radius": 2px 2px 0 0,
+    "close-icon-left": 5px,
+    "close-icon-hover-color": white,
+    "close-icon-hover-bg-color": #a8abb2,
+    "add-icon-right": 30px,
+    "add-icon-padding-left": 20px,
+    "scroll-padding": 0 60px 0 20px,
+    "active-distance": 14px,
+    "show-border-bottom": block,
+  ),
+  $tabs
+);
+
+$multiple-tabs: () !default;
+$multiple-tabs: map-merge(
+  (
+    "bg-color": #f8f8f8,
+    "height": 31px,
+  ),
+  $multiple-tabs
+);
+
+$menu: () !default;
+$menu: map-merge(
+  (
+    "bg-color": getCssVar("theme-color"),
+    "sub-menu-bg-color": getCssVar("theme-color"),
+    "active-color": getCssVar("primary-color"),
+    "text-color": getCssVar("text-primary-color"),
+    "hover-text-color": getCssVar("primary-color"),
+    "hover-bg-color": getCssVar("primary-color-light-9"),
+    "focus-text-color": getCssVar("primary-color"),
+    "focus-bg-color": getCssVar("primary-color-light-9"),
+    "item-height": 56px,
+    "sub-item-height": calc(#{getCssVar("menu-item-height")} - 6px),
+    "horizontal-sub-item-height": 36px,
+    "item-font-size": getCssVar("font-size-base"),
+    "item-hover-fill": getCssVar("primary-color-light-9"),
+    "border-color": #dcdfe6,
+    "border-bottom": getCssVar("border"),
+    "base-level-padding": 20px,
+    "level-padding": 20px,
+    "icon-mr": 8px,
+    "border": 0 solid transparent,
+    "border-right": 1px solid #dcdfe6,
+    "item-min-width": 200px,
+    "popup-border-radius": getCssVar("border-radius"),
+  ),
+  $menu
+);
+
+$logo: () !default;
+$logo: map-merge(
+  (
+    img-width: 30px,
+    img-height: 30px,
+    title-color: black,
+    title-font-size: 16px,
+    title-font-weight: 400,
+    cursor: pointer,
+  ),
+  $logo
+);
+
+$loading: () !default;
+$loading: map-merge(
+  (
+    "mask-color": rgba(255, 255, 255, 0.9),
+    "spinner-size": 20px,
+    "fullscreen-spinner-size": 50px,
+    "rotate-animation": loading-rotate 2s linear infinite,
+    "color": #409eff,
+    "text-size": 14px,
+    "margin": 3px 0,
+  ),
+  $loading
+);
+
+$full-screen: () !default;
+$full-screen: map-merge(
+  (
+    "color": #434343,
+    "hover-color": #0171f6,
+    "font-size": 12px,
+  ),
+  $full-screen
+);
+
+// Select
+$select: () !default;
+$select: map-merge(
+  (
+    "border-color-hover": getCssVar("border-color-hover"),
+    "disabled-border": getCssVar("disabled-border-color"),
+    "font-size": getCssVar("font-size-base"),
+    "close-hover-color": getCssVar("text-secondary-color"),
+    "input-color": getCssVar("text-placeholder-color"),
+    "multiple-input-color": getCssVar("text-regular-color"),
+    "input-focus-border-color": getCssVar("primary-color"),
+    "input-font-size": 14px,
+  ),
+  $select
+);
+
+$select-option: () !default;
+$select-option: map-merge(
+  (
+    "text-color": getCssVar("text-regular-color"),
+    "disabled-color": getCssVar("text-placeholder-color"),
+    "height": 34px,
+    "hover-background": getCssVar("fill-color", "light"),
+    "selected-text-color": getCssVar("primary-color"),
+  ),
+  $select-option
+);
+
+$select-group: () !default;
+$select-group: map-merge(
+  (
+    "text-color": getCssVar("info-color"),
+    "height": 30px,
+    "font-size": 12px,
+  ),
+  $select-group
+);
+
+$select-dropdown: () !default;
+$select-dropdown: map-merge(
+  (
+    "bg-color": getCssVar("bg-color", "overlay"),
+    "shadow": getCssVar("box-shadow-light"),
+    "empty-color": getCssVar("text-secondary-color"),
+    "max-height": 274px,
+    "padding": 6px 0,
+    "empty-padding": 10px 0,
+    "border": 1px solid getCssVar("border-color-light"),
+  ),
+  $select-dropdown
+);
+
+$select-tags-prefix-padding: () !default;
+$select-tags-prefix-padding: map-merge(
+  (
+    "large": 8px,
+    "default": 6px,
+    "small": 4px,
+  ),
+  $select-tags-prefix-padding
+);
+
+$input: () !default;
+$input: map-merge(
+  (
+    "width": "100%",
+    "text-color": getCssVar("text-regular-color"),
+    "border": getCssVar("border"),
+    "hover-border": getCssVar("border-color-hover"),
+    "focus-border": getCssVar("primary-color"),
+    "transparent-border": 0 0 0 1px transparent inset,
+    "border-color": getCssVar("border-color"),
+    "border-radius": getCssVar("border-radius-base"),
+    "bg-color": getCssVar("fill-color", "blank"),
+    "icon-color": getCssVar("text-placeholder-color"),
+    "placeholder-color": getCssVar("text-placeholder-color"),
+    "hover-border-color": getCssVar("border-color-hover"),
+    "clear-hover-color": getCssVar("text-secondary-color"),
+    "focus-border-color": getCssVar("primary-color"),
+  ),
+  $input
+);
+
+$input-disabled: () !default;
+$input-disabled: map-merge(
+  (
+    "fill": getCssVar("disabled-bg-color"),
+    "border": getCssVar("disabled-border-color"),
+    "text-color": getCssVar("disabled-text-color"),
+    "placeholder-color": getCssVar("text-placeholder-color"),
+  ),
+  $input-disabled
+);
+
+$input-font-size: () !default;
+$input-font-size: map-merge(
+  (
+    "large": 14px,
+    "default": 14px,
+    "small": 12px,
+  ),
+  $input-font-size
+);
+
+$input-height: () !default;
+$input-height: map-merge($common-component-size, $input-height);
+
+$input-line-height: () !default;
+$input-line-height: map-merge($common-component-size, $input-line-height);
+
+$input-number-width: () !default;
+$input-number-width: map-merge(
+  (
+    "large": 180px,
+    "default": 150px,
+    "small": 120px,
+  ),
+  $input-number-width
+);
+
+$input-padding-horizontal: () !default;
+$input-padding-horizontal: map-merge(
+  (
+    "large": 16px,
+    "default": 12px,
+    "small": 8px,
+  ),
+  $input-padding-horizontal
+);
+
+$cascader: () !default;
+$cascader: map-merge(
+  (
+    "menu-text-color": getCssVar("text-regular-color"),
+    "menu-selected-text-color": getCssVar("primary-color"),
+    "menu-fill": getCssVar("bg-color", "overlay"),
+    "menu-font-size": getCssVar("font-size-base"),
+    "menu-radius": getCssVar("border-radius-base"),
+    "menu-border": solid 1px getCssVar("border-color-light"),
+    "menu-shadow": getCssVar("box-shadow-light"),
+    "node-background-hover": getCssVar("fill-color", "light"),
+    "node-color-disabled": getCssVar("text-placeholder-color"),
+    "color-empty": getCssVar("text-placeholder-color"),
+    "tag-background": getCssVar("fill-color"),
+  ),
+  $cascader
+);
+
+$scrollbar: () !default;
+$scrollbar: map-merge(
+  (
+    "opacity": 0.3,
+    "bg-color": getCssVar("text-secondary-color"),
+    "hover-opacity": 0.5,
+    "hover-bg-color": getCssVar("text-secondary-color"),
+  ),
+  $scrollbar
+);
+
+$popover: () !default;
+$popover: map-merge(
+  (
+    "bg-color": getCssVar("bg-color", "overlay"),
+    "font-size": getCssVar("font-size-base"),
+    "border-color": getCssVar("border-color-lighter"),
+    "padding": 12px,
+    "padding-large": 18px 20px,
+    "title-font-size": 16px,
+    "title-text-color": getCssVar("text-primary-color"),
+    "border-radius": 4px,
+  ),
+  $popover
+);
+
+$avatar: () !default;
+$avatar: map-merge(
+  (
+    "text-color": getCssVar("color-white"),
+    "bg-color": getCssVar("text", "disabled-color"),
+    "text-size": 14px,
+    "icon-size": 18px,
+    "border-radius": getCssVar("border-radius-base"),
+  ),
+  $avatar
+);
+
+$avatar-size: () !default;
+$avatar-size: map-merge(
+  (
+    "large": 56px,
+    "default": 40px,
+    "small": 24px,
+  ),
+  $avatar-size
+);
+
+$descriptions: () !default;
+$descriptions: map-merge(
+  (
+    "table-border": 1px solid getCssVar("border-color-lighter"),
+    "item-bordered-label-background": getCssVar("fill-color", "light"),
+  ),
+  $descriptions
+);
+
+$md: () !default;
+$md: map-merge(
+  (
+    "primary-color": $primary-color,
+    "content-max-width": 800px,
+    "code-bg-color": #fff5f5,
+    "line-numbers-width": "2.5rem",
+    "icon-copy":
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"),
+    "icon-copied":
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"),
+    // info
+    info-title-color: #193c47,
+    info-bg-color: #eef9fd,
+    info-border-color: #4cb3d4,
+    info-code-bg-color: rgb(76 179 212 / 10%),
+    // note
+    note-title-color: #474748,
+    note-bg-color: #fdfdfe,
+    note-border-color: #ccc,
+    note-code-bg-color: rgb(212 213 216 / 20%),
+    // tip
+    tip-title-color: #003100,
+    tip-bg-color: #e6f6e6,
+    tip-border-color: #009400,
+    tip-code-bg-color: rgb(0 148 0 / 15%),
+    // warning
+    warning-title-color: #4d3800,
+    warning-bg-color: #fff8e6,
+    warning-border-color: #e6a700,
+    warning-code-bg-color: rgb(230 167 0 / 15%),
+    // danger
+    danger-title-color: #4b1113,
+    danger-bg-color: #ffebec,
+    danger-border-color: #e13238,
+    danger-code-bg-color: rgb(225 50 56 / 15%),
+    // detail
+    detail-bg-color: #eee,
+    detail-text-color: inherit,
+    detail-code-bg-color: rgb(127 127 127 / 15%),
+  ),
+  $md
+);
+
+$pagination: () !default;
+$pagination: map-merge(
+  (
+    "font-size": 14px,
+    "bg-color": getCssVar("fill-color", "blank"),
+    "text-color": getCssVar("text-primary-color"),
+    "border-radius": 2px,
+    "button-color": getCssVar("text-primary-color"),
+    "button-width": 32px,
+    "button-height": 32px,
+    "button-disabled-color": getCssVar("text-placeholder-color"),
+    "button-disabled-bg-color": getCssVar("fill-color", "blank"),
+    "button-bg-color": getCssVar("fill-color"),
+    "hover-color": getCssVar("primary-color"),
+    "font-size-small": 12px,
+    "button-width-small": 24px,
+    "button-height-small": 24px,
+    "item-gap": 16px,
+  ),
+  $pagination
+);
+
+$tag: () !default;
+$tag: map-merge(
+  (
+    "font-size": 12px,
+    "border-radius": 4px,
+    "border-radius-rounded": 9999px,
+    "content-line-clamp-num": 1,
+    "content-max-width": 100%,
+  ),
+  $tag
+);
+
+$tag-height: () !default;
+$tag-height: map-merge(
+  (
+    "large": 32px,
+    "default": 24px,
+    "small": 20px,
+  ),
+  $tag-height
+);
+
+$tag-padding: () !default;
+$tag-padding: map-merge(
+  (
+    "large": 12px,
+    "default": 10px,
+    "small": 8px,
+  ),
+  $tag-padding
+);
+
+$tag-icon-size: () !default;
+$tag-icon-size: map-merge(
+  (
+    "large": 16px,
+    "default": 14px,
+    "small": 12px,
+  ),
+  $tag-icon-size
+);
+
+$back-top: () !default;
+$back-top: map-merge(
+  (
+    "bg-color": getCssVar("bg-color", "overlay"),
+    "text-color": getCssVar("primary-color"),
+    "hover-bg-color": getCssVar("border-color-extra-light"),
+  ),
+  $back-top
+);
+
+$empty: () !default;
+$empty: map-merge((
+  'img-size': '160px',
+  'img-size-small': '80px',
+  'img-size-large': '240px',
+  'text-color': white,
+  'desc-top': '10px',
+  'desc-color': getCssVar('text-placeholder-color'),
+  'desc-size': 14px,
+), $empty);
+
+$result: () !default;
+$result: map-merge((
+  'padding': 40px 30px,
+  'icon-font-size': 64px,
+  'title-font-size': 20px,
+  'title-margin-top': 20px,
+  'sub-title-margin-top': 10px,
+  'extra-margin-top': 30px,
+), $result);