framework / eagle-web-toolkit

Download as
Browse Code »

Commit ba7e9a5cc239364f6f2fc4c40595b2df9273db5d

Authored by Aaron
1 parent 8a627c74
Exists in master and in 1 other branch legacy

支持黑色主题

Showing 16 changed files with 1160 additions and 30 deletions   Show diff stats
element-variables.scss 0 → 100644
  Diff comments   View file @ba7e9a5
... ... @@ -0,0 +1,994 @@
  1 +/* Element Chalk Variables */
  2 +
  3 +// Special comment for theme configurator
  4 +// type|skipAutoTranslation|Category|Order
  5 +// skipAutoTranslation 1
  6 +
  7 +/* Transition
  8 +-------------------------- */
  9 +$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
  10 +$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
  11 +$--fade-linear-transition: opacity 200ms linear !default;
  12 +$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
  13 +$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
  14 +$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
  15 +
  16 +/* Color
  17 +-------------------------- */
  18 +/// color|1|Brand Color|0
  19 +$--color-primary: #409EFF !default;
  20 +/// color|1|Background Color|4
  21 +$--color-white: #FFFFFF !default;
  22 +/// color|1|Background Color|4
  23 +$--color-black: #000000 !default;
  24 +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
  25 +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
  26 +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
  27 +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
  28 +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
  29 +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
  30 +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
  31 +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
  32 +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
  33 +/// color|1|Functional Color|1
  34 +$--color-success: #67C23A !default;
  35 +/// color|1|Functional Color|1
  36 +$--color-warning: #E6A23C !default;
  37 +/// color|1|Functional Color|1
  38 +$--color-danger: #F56C6C !default;
  39 +/// color|1|Functional Color|1
  40 +$--color-info: #909399 !default;
  41 +
  42 +$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
  43 +$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
  44 +$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
  45 +$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
  46 +
  47 +$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
  48 +$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
  49 +$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
  50 +$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
  51 +/// color|1|Font Color|2
  52 +$--color-text-primary: #303133 !default;
  53 +/// color|1|Font Color|2
  54 +$--color-text-regular: #606266 !default;
  55 +/// color|1|Font Color|2
  56 +$--color-text-secondary: #909399 !default;
  57 +/// color|1|Font Color|2
  58 +$--color-text-placeholder: #C0C4CC !default;
  59 +/// color|1|Border Color|3
  60 +$--border-color-base: #DCDFE6 !default;
  61 +/// color|1|Border Color|3
  62 +$--border-color-light: #E4E7ED !default;
  63 +/// color|1|Border Color|3
  64 +$--border-color-lighter: #EBEEF5 !default;
  65 +/// color|1|Border Color|3
  66 +$--border-color-extra-light: #F2F6FC !default;
  67 +
  68 +// Background
  69 +/// color|1|Background Color|4
  70 +$--background-color-base: #F5F7FA !default;
  71 +
  72 +/* Link
  73 +-------------------------- */
  74 +$--link-color: $--color-primary-light-2 !default;
  75 +$--link-hover-color: $--color-primary !default;
  76 +
  77 +/* Border
  78 +-------------------------- */
  79 +$--border-width-base: 1px !default;
  80 +$--border-style-base: solid !default;
  81 +$--border-color-hover: $--color-text-placeholder !default;
  82 +$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
  83 +/// borderRadius|1|Radius|0
  84 +$--border-radius-base: 4px !default;
  85 +/// borderRadius|1|Radius|0
  86 +$--border-radius-small: 2px !default;
  87 +/// borderRadius|1|Radius|0
  88 +$--border-radius-circle: 100% !default;
  89 +/// borderRadius|1|Radius|0
  90 +$--border-radius-zero: 0 !default;
  91 +
  92 +// Box-shadow
  93 +/// boxShadow|1|Shadow|1
  94 +$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
  95 +// boxShadow|1|Shadow|1
  96 +$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
  97 +/// boxShadow|1|Shadow|1
  98 +$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
  99 +
  100 +/* Fill
  101 +-------------------------- */
  102 +$--fill-base: $--color-white !default;
  103 +
  104 +/* Typography
  105 +-------------------------- */
  106 +$--font-path: 'fonts' !default;
  107 +$--font-display: 'auto' !default;
  108 +/// fontSize|1|Font Size|0
  109 +$--font-size-extra-large: 20px !default;
  110 +/// fontSize|1|Font Size|0
  111 +$--font-size-large: 18px !default;
  112 +/// fontSize|1|Font Size|0
  113 +$--font-size-medium: 16px !default;
  114 +/// fontSize|1|Font Size|0
  115 +$--font-size-base: 14px !default;
  116 +/// fontSize|1|Font Size|0
  117 +$--font-size-small: 13px !default;
  118 +/// fontSize|1|Font Size|0
  119 +$--font-size-extra-small: 12px !default;
  120 +/// fontWeight|1|Font Weight|1
  121 +$--font-weight-primary: 500 !default;
  122 +/// fontWeight|1|Font Weight|1
  123 +$--font-weight-secondary: 100 !default;
  124 +/// fontLineHeight|1|Line Height|2
  125 +$--font-line-height-primary: 24px !default;
  126 +/// fontLineHeight|1|Line Height|2
  127 +$--font-line-height-secondary: 16px !default;
  128 +$--font-color-disabled-base: #bbb !default;
  129 +/* Size
  130 +-------------------------- */
  131 +$--size-base: 14px !default;
  132 +
  133 +/* z-index
  134 +-------------------------- */
  135 +$--index-normal: 1 !default;
  136 +$--index-top: 1000 !default;
  137 +$--index-popper: 2000 !default;
  138 +
  139 +/* Disable base
  140 +-------------------------- */
  141 +$--disabled-fill-base: $--background-color-base !default;
  142 +$--disabled-color-base: $--color-text-placeholder !default;
  143 +$--disabled-border-base: $--border-color-light !default;
  144 +
  145 +/* Icon
  146 +-------------------------- */
  147 +$--icon-color: #666 !default;
  148 +$--icon-color-base: $--color-info !default;
  149 +
  150 +/* Checkbox
  151 +-------------------------- */
  152 +/// fontSize||Font|1
  153 +$--checkbox-font-size: 14px !default;
  154 +/// fontWeight||Font|1
  155 +$--checkbox-font-weight: $--font-weight-primary !default;
  156 +/// color||Color|0
  157 +$--checkbox-font-color: $--color-text-regular !default;
  158 +$--checkbox-input-height: 14px !default;
  159 +$--checkbox-input-width: 14px !default;
  160 +/// borderRadius||Border|2
  161 +$--checkbox-border-radius: $--border-radius-small !default;
  162 +/// color||Color|0
  163 +$--checkbox-background-color: $--color-white !default;
  164 +$--checkbox-input-border: $--border-base !default;
  165 +
  166 +/// color||Color|0
  167 +$--checkbox-disabled-border-color: $--border-color-base !default;
  168 +$--checkbox-disabled-input-fill: #edf2fc !default;
  169 +$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
  170 +
  171 +$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
  172 +$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
  173 +$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
  174 +
  175 +/// color||Color|0
  176 +$--checkbox-checked-font-color: $--color-primary !default;
  177 +$--checkbox-checked-input-border-color: $--color-primary !default;
  178 +/// color||Color|0
  179 +$--checkbox-checked-background-color: $--color-primary !default;
  180 +$--checkbox-checked-icon-color: $--fill-base !default;
  181 +
  182 +$--checkbox-input-border-color-hover: $--color-primary !default;
  183 +/// height||Other|4
  184 +$--checkbox-bordered-height: 40px !default;
  185 +/// padding||Spacing|3
  186 +$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
  187 +/// padding||Spacing|3
  188 +$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
  189 +/// padding||Spacing|3
  190 +$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
  191 +/// padding||Spacing|3
  192 +$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
  193 +$--checkbox-bordered-medium-input-height: 14px !default;
  194 +$--checkbox-bordered-medium-input-width: 14px !default;
  195 +/// height||Other|4
  196 +$--checkbox-bordered-medium-height: 36px !default;
  197 +$--checkbox-bordered-small-input-height: 12px !default;
  198 +$--checkbox-bordered-small-input-width: 12px !default;
  199 +/// height||Other|4
  200 +$--checkbox-bordered-small-height: 32px !default;
  201 +$--checkbox-bordered-mini-input-height: 12px !default;
  202 +$--checkbox-bordered-mini-input-width: 12px !default;
  203 +/// height||Other|4
  204 +$--checkbox-bordered-mini-height: 28px !default;
  205 +
  206 +/// color||Color|0
  207 +$--checkbox-button-checked-background-color: $--color-primary !default;
  208 +/// color||Color|0
  209 +$--checkbox-button-checked-font-color: $--color-white !default;
  210 +/// color||Color|0
  211 +$--checkbox-button-checked-border-color: $--color-primary !default;
  212 +
  213 +
  214 +
  215 +/* Radio
  216 +-------------------------- */
  217 +/// fontSize||Font|1
  218 +$--radio-font-size: $--font-size-base !default;
  219 +/// fontWeight||Font|1
  220 +$--radio-font-weight: $--font-weight-primary !default;
  221 +/// color||Color|0
  222 +$--radio-font-color: $--color-text-regular !default;
  223 +$--radio-input-height: 14px !default;
  224 +$--radio-input-width: 14px !default;
  225 +/// borderRadius||Border|2
  226 +$--radio-input-border-radius: $--border-radius-circle !default;
  227 +/// color||Color|0
  228 +$--radio-input-background-color: $--color-white !default;
  229 +$--radio-input-border: $--border-base !default;
  230 +/// color||Color|0
  231 +$--radio-input-border-color: $--border-color-base !default;
  232 +/// color||Color|0
  233 +$--radio-icon-color: $--color-white !default;
  234 +
  235 +$--radio-disabled-input-border-color: $--disabled-border-base !default;
  236 +$--radio-disabled-input-fill: $--disabled-fill-base !default;
  237 +$--radio-disabled-icon-color: $--disabled-fill-base !default;
  238 +
  239 +$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
  240 +$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
  241 +$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
  242 +
  243 +/// color||Color|0
  244 +$--radio-checked-font-color: $--color-primary !default;
  245 +/// color||Color|0
  246 +$--radio-checked-input-border-color: $--color-primary !default;
  247 +/// color||Color|0
  248 +$--radio-checked-input-background-color: $--color-white !default;
  249 +/// color||Color|0
  250 +$--radio-checked-icon-color: $--color-primary !default;
  251 +
  252 +$--radio-input-border-color-hover: $--color-primary !default;
  253 +
  254 +$--radio-bordered-height: 40px !default;
  255 +$--radio-bordered-padding: 12px 20px 0 10px !default;
  256 +$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
  257 +$--radio-bordered-small-padding: 8px 15px 0 10px !default;
  258 +$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
  259 +$--radio-bordered-medium-input-height: 14px !default;
  260 +$--radio-bordered-medium-input-width: 14px !default;
  261 +$--radio-bordered-medium-height: 36px !default;
  262 +$--radio-bordered-small-input-height: 12px !default;
  263 +$--radio-bordered-small-input-width: 12px !default;
  264 +$--radio-bordered-small-height: 32px !default;
  265 +$--radio-bordered-mini-input-height: 12px !default;
  266 +$--radio-bordered-mini-input-width: 12px !default;
  267 +$--radio-bordered-mini-height: 28px !default;
  268 +
  269 +/// fontSize||Font|1
  270 +$--radio-button-font-size: $--font-size-base !default;
  271 +/// color||Color|0
  272 +$--radio-button-checked-background-color: $--color-primary !default;
  273 +/// color||Color|0
  274 +$--radio-button-checked-font-color: $--color-white !default;
  275 +/// color||Color|0
  276 +$--radio-button-checked-border-color: $--color-primary !default;
  277 +$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
  278 +
  279 +/* Select
  280 +-------------------------- */
  281 +$--select-border-color-hover: $--border-color-hover !default;
  282 +$--select-disabled-border: $--disabled-border-base !default;
  283 +/// fontSize||Font|1
  284 +$--select-font-size: $--font-size-base !default;
  285 +$--select-close-hover-color: $--color-text-secondary !default;
  286 +
  287 +$--select-input-color: $--color-text-placeholder !default;
  288 +$--select-multiple-input-color: #666 !default;
  289 +/// color||Color|0
  290 +$--select-input-focus-border-color: $--color-primary !default;
  291 +/// fontSize||Font|1
  292 +$--select-input-font-size: 14px !default;
  293 +
  294 +$--select-option-color: $--color-text-regular !default;
  295 +$--select-option-disabled-color: $--color-text-placeholder !default;
  296 +$--select-option-disabled-background: $--color-white !default;
  297 +/// height||Other|4
  298 +$--select-option-height: 34px !default;
  299 +$--select-option-hover-background: $--background-color-base !default;
  300 +/// color||Color|0
  301 +$--select-option-selected-font-color: $--color-primary !default;
  302 +$--select-option-selected-hover: $--background-color-base !default;
  303 +
  304 +$--select-group-color: $--color-info !default;
  305 +$--select-group-height: 30px !default;
  306 +$--select-group-font-size: 12px !default;
  307 +
  308 +$--select-dropdown-background: $--color-white !default;
  309 +$--select-dropdown-shadow: $--box-shadow-light !default;
  310 +$--select-dropdown-empty-color: #999 !default;
  311 +/// height||Other|4
  312 +$--select-dropdown-max-height: 274px !default;
  313 +$--select-dropdown-padding: 6px 0 !default;
  314 +$--select-dropdown-empty-padding: 10px 0 !default;
  315 +$--select-dropdown-border: solid 1px $--border-color-light !default;
  316 +
  317 +/* Alert
  318 +-------------------------- */
  319 +$--alert-padding: 8px 16px !default;
  320 +/// borderRadius||Border|2
  321 +$--alert-border-radius: $--border-radius-base !default;
  322 +/// fontSize||Font|1
  323 +$--alert-title-font-size: 13px !default;
  324 +/// fontSize||Font|1
  325 +$--alert-description-font-size: 12px !default;
  326 +/// fontSize||Font|1
  327 +$--alert-close-font-size: 12px !default;
  328 +/// fontSize||Font|1
  329 +$--alert-close-customed-font-size: 13px !default;
  330 +
  331 +$--alert-success-color: $--color-success-lighter !default;
  332 +$--alert-info-color: $--color-info-lighter !default;
  333 +$--alert-warning-color: $--color-warning-lighter !default;
  334 +$--alert-danger-color: $--color-danger-lighter !default;
  335 +
  336 +/// height||Other|4
  337 +$--alert-icon-size: 16px !default;
  338 +/// height||Other|4
  339 +$--alert-icon-large-size: 28px !default;
  340 +
  341 +/* MessageBox
  342 +-------------------------- */
  343 +/// color||Color|0
  344 +$--messagebox-title-color: $--color-text-primary !default;
  345 +$--msgbox-width: 420px !default;
  346 +$--msgbox-border-radius: 4px !default;
  347 +/// fontSize||Font|1
  348 +$--messagebox-font-size: $--font-size-large !default;
  349 +/// fontSize||Font|1
  350 +$--messagebox-content-font-size: $--font-size-base !default;
  351 +/// color||Color|0
  352 +$--messagebox-content-color: $--color-text-regular !default;
  353 +/// fontSize||Font|1
  354 +$--messagebox-error-font-size: 12px !default;
  355 +$--msgbox-padding-primary: 15px !default;
  356 +/// color||Color|0
  357 +$--messagebox-success-color: $--color-success !default;
  358 +/// color||Color|0
  359 +$--messagebox-info-color: $--color-info !default;
  360 +/// color||Color|0
  361 +$--messagebox-warning-color: $--color-warning !default;
  362 +/// color||Color|0
  363 +$--messagebox-danger-color: $--color-danger !default;
  364 +
  365 +/* Message
  366 +-------------------------- */
  367 +$--message-shadow: $--box-shadow-base !default;
  368 +$--message-min-width: 380px !default;
  369 +$--message-background-color: #edf2fc !default;
  370 +$--message-padding: 15px 15px 15px 20px !default;
  371 +/// color||Color|0
  372 +$--message-close-icon-color: $--color-text-placeholder !default;
  373 +/// height||Other|4
  374 +$--message-close-size: 16px !default;
  375 +/// color||Color|0
  376 +$--message-close-hover-color: $--color-text-secondary !default;
  377 +
  378 +/// color||Color|0
  379 +$--message-success-font-color: $--color-success !default;
  380 +/// color||Color|0
  381 +$--message-info-font-color: $--color-info !default;
  382 +/// color||Color|0
  383 +$--message-warning-font-color: $--color-warning !default;
  384 +/// color||Color|0
  385 +$--message-danger-font-color: $--color-danger !default;
  386 +
  387 +/* Notification
  388 +-------------------------- */
  389 +$--notification-width: 330px !default;
  390 +/// padding||Spacing|3
  391 +$--notification-padding: 14px 26px 14px 13px !default;
  392 +$--notification-radius: 8px !default;
  393 +$--notification-shadow: $--box-shadow-light !default;
  394 +/// color||Color|0
  395 +$--notification-border-color: $--border-color-lighter !default;
  396 +$--notification-icon-size: 24px !default;
  397 +$--notification-close-font-size: $--message-close-size !default;
  398 +$--notification-group-margin-left: 13px !default;
  399 +$--notification-group-margin-right: 8px !default;
  400 +/// fontSize||Font|1
  401 +$--notification-content-font-size: $--font-size-base !default;
  402 +/// color||Color|0
  403 +$--notification-content-color: $--color-text-regular !default;
  404 +/// fontSize||Font|1
  405 +$--notification-title-font-size: 16px !default;
  406 +/// color||Color|0
  407 +$--notification-title-color: $--color-text-primary !default;
  408 +
  409 +/// color||Color|0
  410 +$--notification-close-color: $--color-text-secondary !default;
  411 +/// color||Color|0
  412 +$--notification-close-hover-color: $--color-text-regular !default;
  413 +
  414 +/// color||Color|0
  415 +$--notification-success-icon-color: $--color-success !default;
  416 +/// color||Color|0
  417 +$--notification-info-icon-color: $--color-info !default;
  418 +/// color||Color|0
  419 +$--notification-warning-icon-color: $--color-warning !default;
  420 +/// color||Color|0
  421 +$--notification-danger-icon-color: $--color-danger !default;
  422 +
  423 +/* Input
  424 +-------------------------- */
  425 +$--input-font-size: $--font-size-base !default;
  426 +/// color||Color|0
  427 +$--input-font-color: $--color-text-regular !default;
  428 +/// height||Other|4
  429 +$--input-width: 140px !default;
  430 +/// height||Other|4
  431 +$--input-height: 40px !default;
  432 +$--input-border: $--border-base !default;
  433 +$--input-border-color: $--border-color-base !default;
  434 +/// borderRadius||Border|2
  435 +$--input-border-radius: $--border-radius-base !default;
  436 +$--input-border-color-hover: $--border-color-hover !default;
  437 +/// color||Color|0
  438 +$--input-background-color: $--color-white !default;
  439 +$--input-fill-disabled: $--disabled-fill-base !default;
  440 +$--input-color-disabled: $--font-color-disabled-base !default;
  441 +/// color||Color|0
  442 +$--input-icon-color: $--color-text-placeholder !default;
  443 +/// color||Color|0
  444 +$--input-placeholder-color: $--color-text-placeholder !default;
  445 +$--input-max-width: 314px !default;
  446 +
  447 +$--input-hover-border: $--border-color-hover !default;
  448 +$--input-clear-hover-color: $--color-text-secondary !default;
  449 +
  450 +$--input-focus-border: $--color-primary !default;
  451 +$--input-focus-fill: $--color-white !default;
  452 +
  453 +$--input-disabled-fill: $--disabled-fill-base !default;
  454 +$--input-disabled-border: $--disabled-border-base !default;
  455 +$--input-disabled-color: $--disabled-color-base !default;
  456 +$--input-disabled-placeholder-color: $--color-text-placeholder !default;
  457 +
  458 +/// fontSize||Font|1
  459 +$--input-medium-font-size: 14px !default;
  460 +/// height||Other|4
  461 +$--input-medium-height: 36px !default;
  462 +/// fontSize||Font|1
  463 +$--input-small-font-size: 13px !default;
  464 +/// height||Other|4
  465 +$--input-small-height: 32px !default;
  466 +/// fontSize||Font|1
  467 +$--input-mini-font-size: 12px !default;
  468 +/// height||Other|4
  469 +$--input-mini-height: 28px !default;
  470 +
  471 +/* Cascader
  472 +-------------------------- */
  473 +/// color||Color|0
  474 +$--cascader-menu-font-color: $--color-text-regular !default;
  475 +/// color||Color|0
  476 +$--cascader-menu-selected-font-color: $--color-primary !default;
  477 +$--cascader-menu-fill: $--fill-base !default;
  478 +$--cascader-menu-font-size: $--font-size-base !default;
  479 +$--cascader-menu-radius: $--border-radius-base !default;
  480 +$--cascader-menu-border: solid 1px $--border-color-light !default;
  481 +$--cascader-menu-shadow: $--box-shadow-light !default;
  482 +$--cascader-node-background-hover: $--background-color-base !default;
  483 +$--cascader-node-color-disabled:$--color-text-placeholder !default;
  484 +$--cascader-color-empty:$--color-text-placeholder !default;
  485 +$--cascader-tag-background: #f0f2f5;
  486 +
  487 +/* Group
  488 +-------------------------- */
  489 +$--group-option-flex: 0 0 (1/5) * 100% !default;
  490 +$--group-option-offset-bottom: 12px !default;
  491 +$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
  492 +$--group-title-color: $--color-black !default;
  493 +$--group-title-font-size: $--font-size-base !default;
  494 +$--group-title-width: 66px !default;
  495 +
  496 +/* Tab
  497 +-------------------------- */
  498 +$--tab-font-size: $--font-size-base !default;
  499 +$--tab-border-line: 1px solid #e4e4e4 !default;
  500 +$--tab-header-color-active: $--color-text-secondary !default;
  501 +$--tab-header-color-hover: $--color-text-regular !default;
  502 +$--tab-header-color: $--color-text-regular !default;
  503 +$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
  504 +$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
  505 +$--tab-vertical-header-width: 90px !default;
  506 +$--tab-vertical-header-count-color: $--color-white !default;
  507 +$--tab-vertical-header-count-fill: $--color-text-secondary !default;
  508 +
  509 +/* Button
  510 +-------------------------- */
  511 +/// fontSize||Font|1
  512 +$--button-font-size: $--font-size-base !default;
  513 +/// fontWeight||Font|1
  514 +$--button-font-weight: $--font-weight-primary !default;
  515 +/// borderRadius||Border|2
  516 +$--button-border-radius: $--border-radius-base !default;
  517 +/// padding||Spacing|3
  518 +$--button-padding-vertical: 12px !default;
  519 +/// padding||Spacing|3
  520 +$--button-padding-horizontal: 20px !default;
  521 +
  522 +/// fontSize||Font|1
  523 +$--button-medium-font-size: $--font-size-base !default;
  524 +/// borderRadius||Border|2
  525 +$--button-medium-border-radius: $--border-radius-base !default;
  526 +/// padding||Spacing|3
  527 +$--button-medium-padding-vertical: 10px !default;
  528 +/// padding||Spacing|3
  529 +$--button-medium-padding-horizontal: 20px !default;
  530 +
  531 +/// fontSize||Font|1
  532 +$--button-small-font-size: 12px !default;
  533 +$--button-small-border-radius: #{$--border-radius-base - 1} !default;
  534 +/// padding||Spacing|3
  535 +$--button-small-padding-vertical: 9px !default;
  536 +/// padding||Spacing|3
  537 +$--button-small-padding-horizontal: 15px !default;
  538 +/// fontSize||Font|1
  539 +$--button-mini-font-size: 12px !default;
  540 +$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
  541 +/// padding||Spacing|3
  542 +$--button-mini-padding-vertical: 7px !default;
  543 +/// padding||Spacing|3
  544 +$--button-mini-padding-horizontal: 15px !default;
  545 +
  546 +/// color||Color|0
  547 +$--button-default-font-color: $--color-text-regular !default;
  548 +/// color||Color|0
  549 +$--button-default-background-color: $--color-white !default;
  550 +/// color||Color|0
  551 +$--button-default-border-color: $--border-color-base !default;
  552 +
  553 +/// color||Color|0
  554 +$--button-disabled-font-color: $--color-text-placeholder !default;
  555 +/// color||Color|0
  556 +$--button-disabled-background-color: $--color-white !default;
  557 +/// color||Color|0
  558 +$--button-disabled-border-color: $--border-color-lighter !default;
  559 +
  560 +/// color||Color|0
  561 +$--button-primary-border-color: $--color-primary !default;
  562 +/// color||Color|0
  563 +$--button-primary-font-color: $--color-white !default;
  564 +/// color||Color|0
  565 +$--button-primary-background-color: $--color-primary !default;
  566 +/// color||Color|0
  567 +$--button-success-border-color: $--color-success !default;
  568 +/// color||Color|0
  569 +$--button-success-font-color: $--color-white !default;
  570 +/// color||Color|0
  571 +$--button-success-background-color: $--color-success !default;
  572 +/// color||Color|0
  573 +$--button-warning-border-color: $--color-warning !default;
  574 +/// color||Color|0
  575 +$--button-warning-font-color: $--color-white !default;
  576 +/// color||Color|0
  577 +$--button-warning-background-color: $--color-warning !default;
  578 +/// color||Color|0
  579 +$--button-danger-border-color: $--color-danger !default;
  580 +/// color||Color|0
  581 +$--button-danger-font-color: $--color-white !default;
  582 +/// color||Color|0
  583 +$--button-danger-background-color: $--color-danger !default;
  584 +/// color||Color|0
  585 +$--button-info-border-color: $--color-info !default;
  586 +/// color||Color|0
  587 +$--button-info-font-color: $--color-white !default;
  588 +/// color||Color|0
  589 +$--button-info-background-color: $--color-info !default;
  590 +
  591 +$--button-hover-tint-percent: 20% !default;
  592 +$--button-active-shade-percent: 10% !default;
  593 +
  594 +
  595 +/* cascader
  596 +-------------------------- */
  597 +$--cascader-height: 200px !default;
  598 +
  599 +/* Switch
  600 +-------------------------- */
  601 +/// color||Color|0
  602 +$--switch-on-color: $--color-primary !default;
  603 +/// color||Color|0
  604 +$--switch-off-color: $--border-color-base !default;
  605 +/// fontSize||Font|1
  606 +$--switch-font-size: $--font-size-base !default;
  607 +$--switch-core-border-radius: 10px !default;
  608 +// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
  609 +$--switch-width: 40px !default;
  610 +// height||Other|4
  611 +$--switch-height: 20px !default;
  612 +// height||Other|4
  613 +$--switch-button-size: 16px !default;
  614 +
  615 +/* Dialog
  616 +-------------------------- */
  617 +$--dialog-background-color: $--color-white !default;
  618 +$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
  619 +/// fontSize||Font|1
  620 +$--dialog-title-font-size: $--font-size-large !default;
  621 +/// fontSize||Font|1
  622 +$--dialog-content-font-size: 14px !default;
  623 +/// fontLineHeight||LineHeight|2
  624 +$--dialog-font-line-height: $--font-line-height-primary !default;
  625 +/// padding||Spacing|3
  626 +$--dialog-padding-primary: 20px !default;
  627 +
  628 +/* Table
  629 +-------------------------- */
  630 +/// color||Color|0
  631 +$--table-border-color: $--border-color-lighter !default;
  632 +$--table-border: 1px solid $--table-border-color !default;
  633 +/// color||Color|0
  634 +$--table-font-color: $--color-text-regular !default;
  635 +/// color||Color|0
  636 +$--table-header-font-color: $--color-text-secondary !default;
  637 +/// color||Color|0
  638 +$--table-row-hover-background-color: $--background-color-base !default;
  639 +$--table-current-row-background-color: $--color-primary-light-9 !default;
  640 +/// color||Color|0
  641 +$--table-header-background-color: $--color-white !default;
  642 +$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
  643 +
  644 +/* Pagination
  645 +-------------------------- */
  646 +/// fontSize||Font|1
  647 +$--pagination-font-size: 13px !default;
  648 +/// color||Color|0
  649 +$--pagination-background-color: $--color-white !default;
  650 +/// color||Color|0
  651 +$--pagination-font-color: $--color-text-primary !default;
  652 +$--pagination-border-radius: 3px !default;
  653 +/// color||Color|0
  654 +$--pagination-button-color: $--color-text-primary !default;
  655 +/// height||Other|4
  656 +$--pagination-button-width: 35.5px !default;
  657 +/// height||Other|4
  658 +$--pagination-button-height: 28px !default;
  659 +/// color||Color|0
  660 +$--pagination-button-disabled-color: $--color-text-placeholder !default;
  661 +/// color||Color|0
  662 +$--pagination-button-disabled-background-color: $--color-white !default;
  663 +/// color||Color|0
  664 +$--pagination-hover-color: $--color-primary !default;
  665 +
  666 +/* Popup
  667 +-------------------------- */
  668 +/// color||Color|0
  669 +$--popup-modal-background-color: $--color-black !default;
  670 +/// opacity||Other|1
  671 +$--popup-modal-opacity: 0.5 !default;
  672 +
  673 +/* Popover
  674 +-------------------------- */
  675 +/// color||Color|0
  676 +$--popover-background-color: $--color-white !default;
  677 +/// fontSize||Font|1
  678 +$--popover-font-size: $--font-size-base !default;
  679 +/// color||Color|0
  680 +$--popover-border-color: $--border-color-lighter !default;
  681 +$--popover-arrow-size: 6px !default;
  682 +/// padding||Spacing|3
  683 +$--popover-padding: 12px !default;
  684 +$--popover-padding-large: 18px 20px !default;
  685 +/// fontSize||Font|1
  686 +$--popover-title-font-size: 16px !default;
  687 +/// color||Color|0
  688 +$--popover-title-font-color: $--color-text-primary !default;
  689 +
  690 +/* Tooltip
  691 +-------------------------- */
  692 +/// color|1|Color|0
  693 +$--tooltip-fill: $--color-text-primary !default;
  694 +/// color|1|Color|0
  695 +$--tooltip-color: $--color-white !default;
  696 +/// fontSize||Font|1
  697 +$--tooltip-font-size: 12px !default;
  698 +/// color||Color|0
  699 +$--tooltip-border-color: $--color-text-primary !default;
  700 +$--tooltip-arrow-size: 6px !default;
  701 +/// padding||Spacing|3
  702 +$--tooltip-padding: 10px !default;
  703 +
  704 +/* Tag
  705 +-------------------------- */
  706 +/// color||Color|0
  707 +$--tag-info-color: $--color-info !default;
  708 +/// color||Color|0
  709 +$--tag-primary-color: $--color-primary !default;
  710 +/// color||Color|0
  711 +$--tag-success-color: $--color-success !default;
  712 +/// color||Color|0
  713 +$--tag-warning-color: $--color-warning !default;
  714 +/// color||Color|0
  715 +$--tag-danger-color: $--color-danger !default;
  716 +/// fontSize||Font|1
  717 +$--tag-font-size: 12px !default;
  718 +$--tag-border-radius: 4px !default;
  719 +$--tag-padding: 0 10px !default;
  720 +
  721 +/* Tree
  722 +-------------------------- */
  723 +/// color||Color|0
  724 +$--tree-node-hover-background-color: $--background-color-base !default;
  725 +/// color||Color|0
  726 +$--tree-font-color: $--color-text-regular !default;
  727 +/// color||Color|0
  728 +$--tree-expand-icon-color: $--color-text-placeholder !default;
  729 +
  730 +/* Dropdown
  731 +-------------------------- */
  732 +$--dropdown-menu-box-shadow: $--box-shadow-light !default;
  733 +$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
  734 +$--dropdown-menuItem-hover-color: $--link-color !default;
  735 +
  736 +/* Badge
  737 +-------------------------- */
  738 +/// color||Color|0
  739 +$--badge-background-color: $--color-danger !default;
  740 +$--badge-radius: 10px !default;
  741 +/// fontSize||Font|1
  742 +$--badge-font-size: 12px !default;
  743 +/// padding||Spacing|3
  744 +$--badge-padding: 6px !default;
  745 +/// height||Other|4
  746 +$--badge-size: 18px !default;
  747 +
  748 +/* Card
  749 +--------------------------*/
  750 +/// color||Color|0
  751 +$--card-border-color: $--border-color-lighter !default;
  752 +$--card-border-radius: 4px !default;
  753 +/// padding||Spacing|3
  754 +$--card-padding: 20px !default;
  755 +
  756 +/* Slider
  757 +--------------------------*/
  758 +/// color||Color|0
  759 +$--slider-main-background-color: $--color-primary !default;
  760 +/// color||Color|0
  761 +$--slider-runway-background-color: $--border-color-light !default;
  762 +$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
  763 +$--slider-stop-background-color: $--color-white !default;
  764 +$--slider-disable-color: $--color-text-placeholder !default;
  765 +$--slider-margin: 16px 0 !default;
  766 +$--slider-border-radius: 3px !default;
  767 +/// height|1|Other|4
  768 +$--slider-height: 6px !default;
  769 +/// height||Other|4
  770 +$--slider-button-size: 16px !default;
  771 +$--slider-button-wrapper-size: 36px !default;
  772 +$--slider-button-wrapper-offset: -15px !default;
  773 +
  774 +/* Steps
  775 +--------------------------*/
  776 +$--steps-border-color: $--disabled-border-base !default;
  777 +$--steps-border-radius: 4px !default;
  778 +$--steps-padding: 20px !default;
  779 +
  780 +/* Menu
  781 +--------------------------*/
  782 +/// fontSize||Font|1
  783 +$--menu-item-font-size: $--font-size-base !default;
  784 +/// color||Color|0
  785 +$--menu-item-font-color: $--color-text-primary !default;
  786 +/// color||Color|0
  787 +$--menu-background-color: $--color-white !default;
  788 +$--menu-item-hover-fill: $--color-primary-light-9 !default;
  789 +
  790 +/* Rate
  791 +--------------------------*/
  792 +$--rate-height: 20px !default;
  793 +/// fontSize||Font|1
  794 +$--rate-font-size: $--font-size-base !default;
  795 +/// height||Other|3
  796 +$--rate-icon-size: 18px !default;
  797 +/// margin||Spacing|2
  798 +$--rate-icon-margin: 6px !default;
  799 +$--rate-icon-color: $--color-text-placeholder !default;
  800 +
  801 +/* DatePicker
  802 +--------------------------*/
  803 +$--datepicker-font-color: $--color-text-regular !default;
  804 +/// color|1|Color|0
  805 +$--datepicker-off-font-color: $--color-text-placeholder !default;
  806 +/// color||Color|0
  807 +$--datepicker-header-font-color: $--color-text-regular !default;
  808 +$--datepicker-icon-color: $--color-text-primary !default;
  809 +$--datepicker-border-color: $--disabled-border-base !default;
  810 +$--datepicker-inner-border-color: #e4e4e4 !default;
  811 +/// color||Color|0
  812 +$--datepicker-inrange-background-color: $--border-color-extra-light !default;
  813 +/// color||Color|0
  814 +$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
  815 +/// color||Color|0
  816 +$--datepicker-active-color: $--color-primary !default;
  817 +/// color||Color|0
  818 +$--datepicker-hover-font-color: $--color-primary !default;
  819 +$--datepicker-cell-hover-color: #fff !default;
  820 +
  821 +/* Loading
  822 +--------------------------*/
  823 +/// height||Other|4
  824 +$--loading-spinner-size: 42px !default;
  825 +/// height||Other|4
  826 +$--loading-fullscreen-spinner-size: 50px !default;
  827 +
  828 +/* Scrollbar
  829 +--------------------------*/
  830 +$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
  831 +$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
  832 +
  833 +/* Carousel
  834 +--------------------------*/
  835 +/// fontSize||Font|1
  836 +$--carousel-arrow-font-size: 12px !default;
  837 +$--carousel-arrow-size: 36px !default;
  838 +$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
  839 +$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
  840 +/// width||Other|4
  841 +$--carousel-indicator-width: 30px !default;
  842 +/// height||Other|4
  843 +$--carousel-indicator-height: 2px !default;
  844 +$--carousel-indicator-padding-horizontal: 4px !default;
  845 +$--carousel-indicator-padding-vertical: 12px !default;
  846 +$--carousel-indicator-out-color: $--border-color-hover !default;
  847 +
  848 +/* Collapse
  849 +--------------------------*/
  850 +/// color||Color|0
  851 +$--collapse-border-color: $--border-color-lighter !default;
  852 +/// height||Other|4
  853 +$--collapse-header-height: 48px !default;
  854 +/// color||Color|0
  855 +$--collapse-header-background-color: $--color-white !default;
  856 +/// color||Color|0
  857 +$--collapse-header-font-color: $--color-text-primary !default;
  858 +/// fontSize||Font|1
  859 +$--collapse-header-font-size: 13px !default;
  860 +/// color||Color|0
  861 +$--collapse-content-background-color: $--color-white !default;
  862 +/// fontSize||Font|1
  863 +$--collapse-content-font-size: 13px !default;
  864 +/// color||Color|0
  865 +$--collapse-content-font-color: $--color-text-primary !default;
  866 +
  867 +/* Transfer
  868 +--------------------------*/
  869 +$--transfer-border-color: $--border-color-lighter !default;
  870 +$--transfer-border-radius: $--border-radius-base !default;
  871 +/// height||Other|4
  872 +$--transfer-panel-width: 200px !default;
  873 +/// height||Other|4
  874 +$--transfer-panel-header-height: 40px !default;
  875 +/// color||Color|0
  876 +$--transfer-panel-header-background-color: $--background-color-base !default;
  877 +/// height||Other|4
  878 +$--transfer-panel-footer-height: 40px !default;
  879 +/// height||Other|4
  880 +$--transfer-panel-body-height: 246px !default;
  881 +/// height||Other|4
  882 +$--transfer-item-height: 30px !default;
  883 +/// height||Other|4
  884 +$--transfer-filter-height: 32px !default;
  885 +
  886 +/* Header
  887 + --------------------------*/
  888 +$--header-padding: 0 20px !default;
  889 +
  890 +/* Footer
  891 +--------------------------*/
  892 +$--footer-padding: 0 20px !default;
  893 +
  894 +/* Main
  895 +--------------------------*/
  896 +$--main-padding: 20px !default;
  897 +
  898 +/* Timeline
  899 +--------------------------*/
  900 +$--timeline-node-size-normal: 12px !default;
  901 +$--timeline-node-size-large: 14px !default;
  902 +$--timeline-node-color: $--border-color-light !default;
  903 +
  904 +/* Backtop
  905 +--------------------------*/
  906 +/// color||Color|0
  907 +$--backtop-background-color: $--color-white !default;
  908 +/// color||Color|0
  909 +$--backtop-font-color: $--color-primary !default;
  910 +/// color||Color|0
  911 +$--backtop-hover-background-color: $--border-color-extra-light !default;
  912 +
  913 +/* Link
  914 +--------------------------*/
  915 +/// fontSize||Font|1
  916 +$--link-font-size: $--font-size-base !default;
  917 +/// fontWeight||Font|1
  918 +$--link-font-weight: $--font-weight-primary !default;
  919 +/// color||Color|0
  920 +$--link-default-font-color: $--color-text-regular !default;
  921 +/// color||Color|0
  922 +$--link-default-active-color: $--color-primary !default;
  923 +/// color||Color|0
  924 +$--link-disabled-font-color: $--color-text-placeholder !default;
  925 +/// color||Color|0
  926 +$--link-primary-font-color: $--color-primary !default;
  927 +/// color||Color|0
  928 +$--link-success-font-color: $--color-success !default;
  929 +/// color||Color|0
  930 +$--link-warning-font-color: $--color-warning !default;
  931 +/// color||Color|0
  932 +$--link-danger-font-color: $--color-danger !default;
  933 +/// color||Color|0
  934 +$--link-info-font-color: $--color-info !default;
  935 +/* Calendar
  936 +--------------------------*/
  937 +/// border||Other|4
  938 +$--calendar-border: $--table-border !default;
  939 +/// color||Other|4
  940 +$--calendar-selected-background-color: #F2F8FE !default;
  941 +$--calendar-cell-width: 85px !default;
  942 +
  943 +/* Form
  944 +-------------------------- */
  945 +/// fontSize||Font|1
  946 +$--form-label-font-size: $--font-size-base !default;
  947 +
  948 +/* Avatar
  949 +--------------------------*/
  950 +/// color||Color|0
  951 +$--avatar-font-color: #fff !default;
  952 +/// color||Color|0
  953 +$--avatar-background-color: #C0C4CC !default;
  954 +/// fontSize||Font Size|1
  955 +$--avatar-text-font-size: 14px !default;
  956 +/// fontSize||Font Size|1
  957 +$--avatar-icon-font-size: 18px !default;
  958 +/// borderRadius||Border|2
  959 +$--avatar-border-radius: $--border-radius-base !default;
  960 +/// size|1|Avatar Size|3
  961 +$--avatar-large-size: 40px !default;
  962 +/// size|1|Avatar Size|3
  963 +$--avatar-medium-size: 36px !default;
  964 +/// size|1|Avatar Size|3
  965 +$--avatar-small-size: 28px !default;
  966 +
  967 +/* Break-point
  968 +--------------------------*/
  969 +$--sm: 768px !default;
  970 +$--md: 992px !default;
  971 +$--lg: 1200px !default;
  972 +$--xl: 1920px !default;
  973 +
  974 +$--breakpoints: (
  975 + 'xs' : (max-width: $--sm - 1),
  976 + 'sm' : (min-width: $--sm),
  977 + 'md' : (min-width: $--md),
  978 + 'lg' : (min-width: $--lg),
  979 + 'xl' : (min-width: $--xl)
  980 +);
  981 +
  982 +$--breakpoints-spec: (
  983 + 'xs-only' : (max-width: $--sm - 1),
  984 + 'sm-and-up' : (min-width: $--sm),
  985 + 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
  986 + 'sm-and-down': (max-width: $--md - 1),
  987 + 'md-and-up' : (min-width: $--md),
  988 + 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
  989 + 'md-and-down': (max-width: $--lg - 1),
  990 + 'lg-and-up' : (min-width: $--lg),
  991 + 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
  992 + 'lg-and-down': (max-width: $--xl - 1),
  993 + 'xl-only' : (min-width: $--xl),
  994 +);
... ...
examples/components/code-snippet.vue
  Diff comments   View file @ba7e9a5
... ... @@ -44,8 +44,8 @@ export default {
44 44 margin: 0 0 16px;
45 45 border-radius: 4px;
46 46 transition: all 0.2s;
47   - border: 1px solid #e6e6e6;
48   - background-color: #ffffff;
  47 + border: 1px solid $border;
  48 + background-color: inherit;
49 49 text-align: left;
50 50 // element-ui样式冲突
51 51 ul > li {
... ... @@ -60,8 +60,8 @@ export default {
60 60 .eagle-code-snippet--demo {
61 61 box-sizing: border-box;
62 62 padding: 30px 35px;
63   - color: #333333;
64   - border-bottom: 1px solid #ebedf0;
  63 + color: inherit;
  64 + border-bottom: 1px solid $border;
65 65 }
66 66 .eagle-code-snippet--desc {
67 67 position: relative;
... ... @@ -95,10 +95,10 @@ export default {
95 95  
96 96 .eagle-code-snippet--code {
97 97 box-sizing: border-box;
98   - border-top: 1px solid #ebedf0;
  98 + border-top: 1px solid $border;
99 99  
100 100 code {
101   - background-color: #fff;
  101 + background-color: $background;
102 102 font-family: Consolas, Menlo, Courier, monospace;
103 103 border: none;
104 104 display: block;
... ...
examples/styles/element.scss
  Diff comments   View file @ba7e9a5
1   -@import './variables.scss';
2 1 /* 改变主题色变量 */
3 2 $--color-primary: $primary;
4 3 $--color-success: #52c41a !default;
... ... @@ -11,4 +10,6 @@ $--table-header-color: rgba(0,0,0,0.85);
11 10 /* 改变 icon 字体路径变量，必需 */
12 11 $--font-path: '~element-ui/lib/theme-chalk/fonts';
13 12  
  13 +/* 黑色主题 */
  14 +@import "./theme-dark.scss";
14 15 @import "~element-ui/packages/theme-chalk/src/index";
15 16 \ No newline at end of file
... ...
examples/styles/highlight.scss
  Diff comments   View file @ba7e9a5
... ... @@ -2,8 +2,10 @@
2 2 display: block;
3 3 overflow-x: auto;
4 4 padding: 0.5em;
5   - color: #333;
6   - background: #f8f8f8;
  5 + color: $text;
  6 + background: rgba($border, 0.2);
  7 + // color: #333;
  8 + // background: #f8f8f8;
7 9 }
8 10  
9 11 .hljs-comment,
... ...
examples/styles/index.scss
  Diff comments   View file @ba7e9a5
1   -@import './variables.scss';
2 1 @import './markdown.scss';
3 2 @import './nprogress.scss';
4 3 @import './element.scss';
... ...
examples/styles/markdown.scss
  Diff comments   View file @ba7e9a5
1   -@import './variables.scss';
2   -
3 1 .eagle-snippet-doc {
4 2 color: $text;
5 3 .header-anchor {
... ...
examples/styles/nprogress.scss
  Diff comments   View file @ba7e9a5
1   -@import './variables.scss';
2   -
3 1 /* Make clicks pass-through */
4 2 #nprogress {
5 3 pointer-events: none;
... ...
examples/styles/theme-dark.scss 0 → 100644
  Diff comments   View file @ba7e9a5
... ... @@ -0,0 +1,120 @@
  1 +body {
  2 + color: #fff;
  3 + background-color: #161719;
  4 + // background-color: #161719;
  5 +}
  6 +
  7 +/* Color
  8 +-------------------------- */
  9 +/// color|1|Background Color|4
  10 +$--color-white: #161719 !default;
  11 +/// color|1|Background Color|4
  12 +$--color-black: #fff !default;
  13 +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
  14 +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
  15 +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
  16 +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
  17 +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
  18 +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
  19 +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
  20 +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
  21 +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
  22 +/// color|1|Font Color|2
  23 +$--color-text-primary: #fff !default;
  24 +/// color|1|Font Color|2
  25 +$--color-text-regular: #D8D9DA !default;
  26 +/// color|1|Font Color|2
  27 +$--color-text-secondary: #8E8E8E !default;
  28 +/// color|1|Font Color|2
  29 +$--color-text-placeholder: #555555 !default;
  30 +/// color|1|Border Color|3
  31 +$--border-color-base: #262628 !default;
  32 +/// color|1|Border Color|3
  33 +$--border-color-light: #262628 !default;
  34 +/// color|1|Border Color|3
  35 +$--border-color-lighter: #262628 !default;
  36 +/// color|1|Border Color|3
  37 +$--border-color-extra-light: #262628 !default;
  38 +
  39 +// Background
  40 +/// color|1|Background Color|4
  41 +$--background-color-base: #19191b !default;
  42 +
  43 +/* Link
  44 +-------------------------- */
  45 +$--link-color: $--color-primary-light-2 !default;
  46 +$--link-hover-color: $--color-primary !default;
  47 +
  48 +/* Border
  49 +-------------------------- */
  50 +$--border-width-base: 1px !default;
  51 +$--border-style-base: solid !default;
  52 +$--border-color-hover: $--color-text-placeholder !default;
  53 +$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
  54 +
  55 +// Box-shadow
  56 +/// boxShadow|1|Shadow|1
  57 +$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
  58 +// boxShadow|1|Shadow|1
  59 +$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
  60 +/// boxShadow|1|Shadow|1
  61 +$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
  62 +
  63 +/* Fill
  64 +-------------------------- */
  65 +$--fill-base: $--color-white !default;
  66 +
  67 +/* Typography
  68 +-------------------------- */
  69 +$--font-color-disabled-base: #bbb !default;
  70 +
  71 +/* Disable base
  72 +-------------------------- */
  73 +$--disabled-fill-base: $--background-color-base !default;
  74 +$--disabled-color-base: $--color-text-placeholder !default;
  75 +$--disabled-border-base: $--border-color-light !default;
  76 +
  77 +/* Button
  78 +-------------------------- */
  79 +/// color||Color|0
  80 +$--button-primary-font-color: $--color-text-regular !default;
  81 +/// color||Color|0
  82 +$--button-success-font-color: $--color-text-regular !default;
  83 +/// color||Color|0
  84 +$--button-warning-font-color: $--color-text-regular !default;
  85 +/// color||Color|0
  86 +$--button-danger-font-color: $--color-text-regular !default;
  87 +/// color||Color|0
  88 +$--button-info-font-color: $--color-text-regular !default;
  89 +
  90 +/* Dropdown
  91 +-------------------------- */
  92 +$--dropdown-menuItem-hover-fill: rgba($--color-primary, 0.1) !default;
  93 +
  94 +$--select-option-hover-background: rgba($--color-primary, 0.1) !default;
  95 +
  96 +.el-dialog__wrapper {
  97 + background: rgba(0, 0, 0, 0.8);
  98 +}
  99 +
  100 +.el-menu {
  101 + & > .el-menu-item {
  102 + &:not(.is-disabled):hover,
  103 + &:not(.is-disabled):focus{
  104 + background-color: rgba($--color-primary, 0.1) !important;
  105 + }
  106 + }
  107 +}
  108 +
  109 +.eagle-scheme__card {
  110 + border-color: $border;
  111 + background-color: inherit;
  112 +}
  113 +
  114 +.eagle-detail__group-title, .eagle-form__group-title {
  115 + border-color: $border;
  116 +}
  117 +
  118 +.el-badge__content {
  119 + color: $--color-black !important;
  120 +}
0 121 \ No newline at end of file
... ...
examples/styles/variables.scss
  Diff comments   View file @ba7e9a5
... ... @@ -8,9 +8,15 @@ $green: #26aa58;
8 8 $green-light: #5edd8e;
9 9 $orange: #ff9852;
10 10 $grey: #8c8c8c;
11   -$black: #000;
12 11 $purple: #722ed1;
13 12 $cyan: #13c2c2;
14 13  
15   -$text: #314659;
16   -$border: #e8e8e8;
17 14 \ No newline at end of file
  15 +// $black: #000;
  16 +// $text: #314659;
  17 +// $border: #e8e8e8;
  18 +// $background: #fff;
  19 +
  20 +$black: #fff;
  21 +$text: #D8D9DA;
  22 +$border: #343434;
  23 +$background: #161719;
... ...
examples/views/layout/component.vue
  Diff comments   View file @ba7e9a5
... ... @@ -142,8 +142,6 @@ export default {
142 142 </script>
143 143  
144 144 <style lang="scss">
145   -@import '@/styles/variables.scss';
146   -
147 145 .layout-container__component {
148 146 margin-top: 60px;
149 147 .layout-aside__component {
... ... @@ -155,12 +153,12 @@ export default {
155 153 display: inline-block;
156 154 transform: translateY(-50%);
157 155 height: 90%;
158   - border-right: 1px solid #e6e6e6;
  156 + border-right: 1px solid $border;
159 157 }
160 158 left: 0;
161 159 position: fixed;
162 160 height: calc(100vh - 60px);
163   - background: #fff;
  161 + background: inherit;
164 162 .el-menu-item {
165 163 border-right: 3px solid rgba(0, 0, 0, 0);
166 164 }
... ...
examples/views/layout/components/header.vue
  Diff comments   View file @ba7e9a5
... ... @@ -92,8 +92,8 @@ export default {
92 92 display: flex;
93 93 align-items: center;
94 94 justify-content: space-between;
95   - background: white;
96   - box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
  95 + background-color: $background;
  96 + box-shadow: 0 2px 8px rgba($black, .04) !important;
97 97 height: 60px;
98 98 width: 100%;
99 99 z-index: 10;
... ...
examples/views/page/form-table/index.vue
  Diff comments   View file @ba7e9a5
... ... @@ -6,18 +6,19 @@
6 6 text-align: right !important;
7 7 padding: 5px 15px !important;
8 8 font-weight: bold;
9   - background-color: #F5F7FA;
  9 + /* background-color: #F5F7FA; */
  10 + background-color: #202022;
10 11 }
11 12 .eagle-form-table__value {
12 13 overflow: hidden;
13 14 }
14   -.eagle-form-table__value .el-input__inner,
  15 +/* .eagle-form-table__value .el-input__inner,
15 16 .eagle-form-table__value .el-textarea__inner {
16 17 border-left: 0;
17 18 border-right: 0;
18 19 border-top: 0;
19 20 border-bottom: 0;
20   -}
  21 +} */
21 22 </style>
22 23  
23 24 <template>
... ...
examples/views/page/other.vue
  Diff comments   View file @ba7e9a5
... ... @@ -2,9 +2,9 @@
2 2 .w-full {
3 3 width: 100%;
4 4 }
5   -.page-other .el-input .el-input__inner, .el-textarea__inner {
  5 +/* .page-other .el-input .el-input__inner, .el-textarea__inner {
6 6 border-radius: 0;
7   -}
  7 +} */
8 8 </style>
9 9  
10 10 <template>
... ... @@ -33,7 +33,7 @@ export default {
33 33 },
34 34 list: [
35 35 [
36   - { type: 'el-input', label: '姓名', key: 'name' },
  36 + { type: 'el-input', label: '姓名', key: 'name', props: { disabled: true } },
37 37 { type: 'el-input', label: '年龄', key: 'age', props: { type: 'number' } },
38 38 { type: 'el-input', label: '政治面貌', key: 'policy' },
39 39 { type: 'el-input', label: '籍贯', key: 'hometown' },
... ... @@ -48,7 +48,7 @@ export default {
48 48 },
49 49 ],
50 50 [
51   - { type: 'eagle-select', label: '爱好', key: 'hobby', props: { dataSource: [{ label: '游戏', value: '游戏' }] }, colspan: 3 },
  51 + { type: 'eagle-select', label: '爱好', key: 'hobby', props: { dataSource: [{ label: '游戏', value: '游戏' }, { label: '音乐', value: '音乐' }] }, colspan: 3 },
52 52 { type: 'el-input', label: '教育程度', key: 'education', colspan: 3 },
53 53 ],
54 54 { type: 'el-input', label: '工作经历', key: 'experience', props: { type: 'textarea', autosize: { minRows: 6 }, placeholder: '请输入' } },
... ...
package.json
  Diff comments   View file @ba7e9a5
... ... @@ -11,6 +11,7 @@
11 11 "dependencies": {
12 12 "axios": "^0.19.0",
13 13 "core-js": "^3.3.3",
  14 + "element-theme-chalk": "^2.13.0",
14 15 "element-ui": "^2.12.0",
15 16 "mockjs": "^1.0.1-beta3",
16 17 "nprogress": "^0.2.0",
... ...
vue.config.js
  Diff comments   View file @ba7e9a5
... ... @@ -9,6 +9,13 @@ module.exports = {
9 9 filename: 'index.html'
10 10 }
11 11 },
  12 + css: {
  13 + loaderOptions: {
  14 + sass: {
  15 + prependData: '@import "@/styles/variables.scss";',
  16 + },
  17 + },
  18 + },
12 19 // eslint-loader 是否在保存的时候检查
13 20 lintOnSave: true,
14 21 // webpack配置扩展markdown
... ...
yarn.lock
  Diff comments   View file @ba7e9a5
... ... @@ -2969,6 +2969,11 @@ electron-to-chromium@^1.3.284:
2969 2969 resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.291.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.291.tgz#30b3560e24636eceab2394a3d4a6c228bef3376c"
2970 2970 integrity sha1-MLNWDiRjbs6rI5Sj1KbCKL7zN2w=
2971 2971  
  2972 +element-theme-chalk@^2.13.0:
  2973 + version "2.13.0"
  2974 + resolved "https://registry.npm.taobao.org/element-theme-chalk/download/element-theme-chalk-2.13.0.tgz#2ee1aea38c31a37df55886001021a054b076b356"
  2975 + integrity sha1-LuGuo4wxo331WIYAECGgVLB2s1Y=
  2976 +
2972 2977 element-ui@^2.12.0:
2973 2978 version "2.12.0"
2974 2979 resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.12.0.tgz#a893bc11ae4f7dbb7e9d541606f23e643f131ee4"
... ...