vue-devui 1.0.0-rc.6 → 1.0.0-rc.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/README.md +5 -0
  2. package/alert/index.es.js +37 -11
  3. package/alert/index.umd.js +1 -1
  4. package/alert/style.css +1 -1
  5. package/auto-complete/index.es.js +311 -77
  6. package/auto-complete/index.umd.js +3 -5
  7. package/auto-complete/style.css +1 -1
  8. package/avatar/index.es.js +81 -70
  9. package/avatar/index.umd.js +1 -1
  10. package/avatar/style.css +1 -1
  11. package/badge/index.es.js +29 -4
  12. package/badge/index.umd.js +1 -1
  13. package/badge/style.css +1 -1
  14. package/button/index.es.js +5632 -87
  15. package/button/index.umd.js +27 -1
  16. package/button/style.css +1 -1
  17. package/card/index.es.js +56 -29
  18. package/card/index.umd.js +1 -1
  19. package/card/style.css +1 -1
  20. package/checkbox/index.es.js +364 -234
  21. package/checkbox/index.umd.js +1 -1
  22. package/checkbox/style.css +1 -1
  23. package/date-picker/index.es.js +310 -157
  24. package/date-picker/index.umd.js +1 -1
  25. package/date-picker/style.css +1 -1
  26. package/drawer/index.es.js +28 -3
  27. package/drawer/index.umd.js +1 -1
  28. package/drawer/style.css +1 -1
  29. package/dropdown/index.es.js +125 -45
  30. package/dropdown/index.umd.js +1 -1
  31. package/dropdown/style.css +1 -1
  32. package/editable-select/index.es.js +437 -22
  33. package/editable-select/index.umd.js +1 -1
  34. package/editable-select/style.css +1 -1
  35. package/form/index.es.js +490 -605
  36. package/form/index.umd.js +15 -15
  37. package/form/style.css +1 -1
  38. package/fullscreen/index.es.js +29 -5
  39. package/fullscreen/index.umd.js +1 -1
  40. package/fullscreen/style.css +1 -1
  41. package/grid/index.es.js +71 -50
  42. package/grid/index.umd.js +1 -1
  43. package/grid/style.css +1 -1
  44. package/icon/index.es.js +109 -13
  45. package/icon/index.umd.js +1 -1
  46. package/icon/style.css +1 -0
  47. package/image-preview/index.es.js +34 -11
  48. package/image-preview/index.umd.js +1 -1
  49. package/image-preview/style.css +1 -1
  50. package/input/index.es.js +330 -130
  51. package/input/index.umd.js +1 -1
  52. package/input/style.css +1 -1
  53. package/input-number/index.es.js +272 -199
  54. package/input-number/index.umd.js +1 -1
  55. package/input-number/style.css +1 -1
  56. package/layout/index.es.js +34 -6
  57. package/layout/index.umd.js +1 -1
  58. package/layout/style.css +1 -1
  59. package/loading/index.es.js +34 -10
  60. package/loading/index.umd.js +1 -1
  61. package/loading/style.css +1 -1
  62. package/modal/index.es.js +126 -27
  63. package/modal/index.umd.js +1 -1
  64. package/modal/style.css +1 -1
  65. package/notification/index.es.js +125 -25
  66. package/notification/index.umd.js +1 -1
  67. package/notification/style.css +1 -1
  68. package/nuxt/components/ButtonGroup.js +3 -0
  69. package/nuxt/components/CheckboxButton.js +3 -0
  70. package/nuxt/components/CheckboxGroup.js +3 -0
  71. package/nuxt/components/FORM_ITEM_TOKEN.js +3 -0
  72. package/nuxt/components/FORM_TOKEN.js +3 -0
  73. package/nuxt/components/Icon.js +1 -0
  74. package/nuxt/components/LABEL_DATA.js +3 -0
  75. package/nuxt/components/Option.js +3 -0
  76. package/nuxt/components/buttonGroupInjectionKey.js +3 -0
  77. package/nuxt/components/buttonGroupProps.js +3 -0
  78. package/nuxt/components/formControlProps.js +3 -0
  79. package/nuxt/components/formItemProps.js +3 -0
  80. package/nuxt/components/formProps.js +3 -0
  81. package/nuxt/components/iconProps.js +1 -0
  82. package/nuxt/components/svgIconProps.js +3 -0
  83. package/overlay/index.es.js +31 -9
  84. package/overlay/index.umd.js +1 -1
  85. package/overlay/style.css +1 -1
  86. package/package.json +2 -1
  87. package/pagination/index.es.js +135 -124
  88. package/pagination/index.umd.js +1 -1
  89. package/pagination/style.css +1 -1
  90. package/popover/index.es.js +198 -83
  91. package/popover/index.umd.js +16 -16
  92. package/popover/style.css +1 -1
  93. package/progress/index.es.js +76 -20
  94. package/progress/index.umd.js +3 -3
  95. package/progress/style.css +1 -1
  96. package/radio/index.es.js +161 -140
  97. package/radio/index.umd.js +1 -1
  98. package/radio/style.css +1 -1
  99. package/rate/index.es.js +48 -16
  100. package/rate/index.umd.js +1 -1
  101. package/rate/style.css +1 -1
  102. package/result/index.es.js +108 -12
  103. package/result/index.umd.js +1 -1
  104. package/result/style.css +1 -1
  105. package/search/index.es.js +379 -167
  106. package/search/index.umd.js +17 -17
  107. package/search/style.css +1 -1
  108. package/select/index.es.js +7339 -556
  109. package/select/index.umd.js +27 -1
  110. package/select/style.css +1 -1
  111. package/skeleton/index.es.js +37 -12
  112. package/skeleton/index.umd.js +1 -1
  113. package/skeleton/style.css +1 -1
  114. package/slider/index.es.js +34 -10
  115. package/slider/index.umd.js +1 -1
  116. package/slider/style.css +1 -1
  117. package/splitter/index.es.js +201 -84
  118. package/splitter/index.umd.js +14 -14
  119. package/splitter/style.css +1 -1
  120. package/status/index.es.js +26 -2
  121. package/status/index.umd.js +1 -1
  122. package/status/style.css +1 -1
  123. package/style.css +1 -1
  124. package/switch/index.es.js +30 -6
  125. package/switch/index.umd.js +1 -1
  126. package/switch/style.css +1 -1
  127. package/table/index.es.js +6808 -585
  128. package/table/index.umd.js +27 -1
  129. package/table/style.css +1 -1
  130. package/tabs/index.es.js +136 -70
  131. package/tabs/index.umd.js +1 -1
  132. package/tabs/style.css +1 -1
  133. package/tag/index.es.js +31 -7
  134. package/tag/index.umd.js +1 -1
  135. package/tag/style.css +1 -1
  136. package/textarea/index.es.js +5631 -80
  137. package/textarea/index.umd.js +35 -1
  138. package/textarea/style.css +1 -1
  139. package/timeline/index.es.js +108 -12
  140. package/timeline/index.umd.js +1 -1
  141. package/timeline/style.css +1 -1
  142. package/tooltip/index.es.js +190 -74
  143. package/tooltip/index.umd.js +17 -17
  144. package/tooltip/style.css +1 -1
  145. package/tree/index.es.js +376 -256
  146. package/tree/index.umd.js +1 -1
  147. package/tree/style.css +1 -1
  148. package/upload/index.es.js +138 -34
  149. package/upload/index.umd.js +1 -1
  150. package/upload/style.css +1 -1
  151. package/vue-devui.es.js +6770 -5769
  152. package/vue-devui.umd.js +27 -21
  153. package/comment/index.d.ts +0 -7
  154. package/comment/index.es.js +0 -84
  155. package/comment/index.umd.js +0 -1
  156. package/comment/package.json +0 -7
  157. package/comment/style.css +0 -1
  158. package/nuxt/components/Comment.js +0 -3
  159. package/nuxt/components/FormControl.js +0 -3
  160. package/nuxt/components/FormLabel.js +0 -3
  161. package/nuxt/components/ReadTip.js +0 -3
  162. package/nuxt/components/commentProps.js +0 -3
  163. package/nuxt/components/readTipProps.js +0 -3
  164. package/read-tip/index.d.ts +0 -7
  165. package/read-tip/index.es.js +0 -261
  166. package/read-tip/index.umd.js +0 -1
  167. package/read-tip/package.json +0 -7
  168. package/read-tip/style.css +0 -1
package/form/style.css CHANGED
@@ -1 +1 @@
1
- @keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(0, 0, 0, .2));z-index:1000}.devui-flexible-overlay-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover-icon{width:16px;height:16px;margin-right:8px}.devui-popover-icon .devui-icon.devui-icon-success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover-icon .devui-icon.devui-icon-success>g>circle,.devui-popover-icon .devui-icon.devui-icon-success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover-icon .devui-icon.devui-icon-warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover-icon .devui-icon.devui-icon-info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover-icon .devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover-reference{display:inline-block}.devui-popover-content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover-content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover-fade-bottom-enter-from,.devui-popover-fade-bottom-leave-to,.devui-popover-fade-top-enter-from,.devui-popover-fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover-fade-bottom-enter-to,.devui-popover-fade-bottom-leave-from,.devui-popover-fade-top-enter-to,.devui-popover-fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover-fade-bottom-enter-active,.devui-popover-fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover-fade-bottom-leave-active,.devui-popover-fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover-fade-left-enter-from,.devui-popover-fade-left-leave-to,.devui-popover-fade-right-enter-from,.devui-popover-fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover-fade-left-enter-to,.devui-popover-fade-left-leave-from,.devui-popover-fade-right-enter-to,.devui-popover-fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover-fade-left-enter-active,.devui-popover-fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover-fade-left-leave-active,.devui-popover-fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label--required{display:inline-flex;align-items:center;line-height:28px}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container .devui-form__control-feedback{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;margin-top:-7px;line-height:16px;text-align:center;visibility:visible;pointer-events:none}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-content{width:100%}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;font-size:var(--devui-font-size, 12px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:12px;color:#8a8e99;min-height:20px;line-height:1.5;text-align:justify}.devui-form-operation .star{color:red}.devui-validate-rules-error-pristine input{background-color:#ffeeed;border:1px solid #f66f6a}.devui-validate-rules-error-pristine input:focus{border:1px solid #f66f6a!important}.devui-validate-rules-error-pristine input:hover{border:1px solid #f66f6a!important}.devui-validate-tip{display:flex;justify-content:center;align-items:center;font-size:12px;color:#f66f6a}.devui-error input,.devui-error .devui-tags{border-color:var(--devui-danger-line, #f66f6a)!important;background-color:var(--devui-danger-bg, #ffeeed)!important}
1
+ @keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay__fade-enter{opacity:0}.devui-overlay__fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay__fade-leave{opacity:1}.devui-overlay__fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay__background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay__background--color{background:rgba(0,0,0,.4)}.devui-overlay__background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay__background--disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-content{width:100%}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 12px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #8a8e99);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}
@@ -28,14 +28,38 @@ function useKeydown(props, ctx) {
28
28
  document.removeEventListener("keydown", handleKeydown);
29
29
  });
30
30
  }
31
+ function createBem(namespace, element, modifier) {
32
+ let cls = namespace;
33
+ if (element) {
34
+ cls += `__${element}`;
35
+ }
36
+ if (modifier) {
37
+ cls += `--${modifier}`;
38
+ }
39
+ return cls;
40
+ }
41
+ function useNamespace(block, needDot = false) {
42
+ const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
43
+ const b = () => createBem(namespace);
44
+ const e = (element) => element ? createBem(namespace, element) : "";
45
+ const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
46
+ const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
47
+ return {
48
+ b,
49
+ e,
50
+ m,
51
+ em
52
+ };
53
+ }
54
+ const ns = useNamespace("fullscreen");
31
55
  const launchNormalFullscreen = (targetElement, props) => {
32
- targetElement.classList.add("devui-fullscreen");
56
+ targetElement.classList.add(ns.b());
33
57
  if (props.zIndex) {
34
58
  targetElement.setAttribute("style", `z-index: ${props.zIndex}`);
35
59
  }
36
60
  };
37
61
  const exitNormalFullscreen = (targetElement) => {
38
- targetElement.classList.remove("devui-fullscreen");
62
+ targetElement.classList.remove(ns.b());
39
63
  targetElement.style.zIndex = "";
40
64
  };
41
65
  const launchImmersiveFullScreen = async (docElement) => {
@@ -65,10 +89,10 @@ const exitImmersiveFullScreen = async (doc) => {
65
89
  return await (fullscreenExit == null ? void 0 : fullscreenExit.then(() => !!document.fullscreenElement));
66
90
  };
67
91
  const addFullScreenStyle = () => {
68
- document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html");
92
+ document.getElementsByTagName("html")[0].classList.add(ns.e("html"));
69
93
  };
70
94
  const removeFullScreenStyle = () => {
71
- document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html");
95
+ document.getElementsByTagName("html")[0].classList.remove(ns.e("html"));
72
96
  };
73
97
  function useFullscreen(props, slotElement, ctx) {
74
98
  const { modelValue, mode } = toRefs(props);
@@ -120,7 +144,7 @@ var Fullscreen = defineComponent({
120
144
  props: fullscreenProps,
121
145
  emits: ["update:modelValue"],
122
146
  setup(props, ctx) {
123
- const slotElement = ref(null);
147
+ const slotElement = ref();
124
148
  useFullscreen(props, slotElement, ctx);
125
149
  useKeydown(props, ctx);
126
150
  return () => {
@@ -1 +1 @@
1
- (function(t,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis!="undefined"?globalThis:t||self,n(t.index={},t.Vue))})(this,function(t,n){"use strict";const a={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},m=27;function f(e,l){const{modelValue:s}=n.toRefs(e),u=o=>{o.keyCode===m&&s&&l.emit("update:modelValue",!1)};n.onMounted(()=>{document.addEventListener("keydown",u)}),n.onUnmounted(()=>{document.removeEventListener("keydown",u)})}const F=(e,l)=>{e.classList.add("devui-fullscreen"),l.zIndex&&e.setAttribute("style",`z-index: ${l.zIndex}`)},y=e=>{e.classList.remove("devui-fullscreen"),e.style.zIndex=""},v=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},S=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},h=()=>{document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html")},p=()=>{document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html")};function w(e,l,s){const{modelValue:u,mode:o}=n.toRefs(e);let c=!1;const C=r=>{r?(F(l.value,e),h()):(y(l.value),p())},q=r=>{r?v(l.value):c||S(document)};n.watch(u,r=>{o.value==="normal"&&C(r),o.value==="immersive"&&q(r)});const d=()=>{document.fullscreenElement?c=!1:(s.emit("update:modelValue"),c=!0)};n.onMounted(()=>{document.addEventListener("fullscreenchange",d)}),n.onUnmounted(()=>{document.removeEventListener("fullscreenchange",d)})}var z="",i=n.defineComponent({name:"DFullscreen",props:a,emits:["update:modelValue"],setup(e,l){const s=n.ref(null);return w(e,s,l),f(e,l),()=>{const u=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:s},[u])}}}),x={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.component(i.name,i)}};t.Fullscreen=i,t.default=x,t.fullscreenProps=a,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
1
+ (function(u,l){typeof exports=="object"&&typeof module!="undefined"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(u=typeof globalThis!="undefined"?globalThis:u||self,l(u.index={},u.Vue))})(this,function(u,l){"use strict";const F={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},S=27;function v(e,n){const{modelValue:t}=l.toRefs(e),s=c=>{c.keyCode===S&&t&&n.emit("update:modelValue",!1)};l.onMounted(()=>{document.addEventListener("keydown",s)}),l.onUnmounted(()=>{document.removeEventListener("keydown",s)})}function i(e,n,t){let s=e;return n&&(s+=`__${n}`),t&&(s+=`--${t}`),s}function h(e,n=!1){const t=n?`.devui-${e}`:`devui-${e}`;return{b:()=>i(t),e:r=>r?i(t,r):"",m:r=>r?i(t,"",r):"",em:(r,a)=>r&&a?i(t,r,a):""}}const m=h("fullscreen"),p=(e,n)=>{e.classList.add(m.b()),n.zIndex&&e.setAttribute("style",`z-index: ${n.zIndex}`)},b=e=>{e.classList.remove(m.b()),e.style.zIndex=""},w=async e=>{let n=null;return e.requestFullscreen?n=e.requestFullscreen():e.mozRequestFullScreen?n=e.mozRequestFullScreen():e.webkitRequestFullScreen?n=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(n=Promise.resolve(e.msRequestFullscreen())),await(n==null?void 0:n.then(()=>!!document.fullscreenElement))},x=async e=>{let n=null;return e.exitFullscreen?n=e.exitFullscreen():e.mozCancelFullScreen?n=e.mozCancelFullScreen():e.webkitCancelFullScreen?n=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(n=Promise.resolve(e.msExitFullscreen())),await(n==null?void 0:n.then(()=>!!document.fullscreenElement))},C=()=>{document.getElementsByTagName("html")[0].classList.add(m.e("html"))},q=()=>{document.getElementsByTagName("html")[0].classList.remove(m.e("html"))};function z(e,n,t){const{modelValue:s,mode:c}=l.toRefs(e);let d=!1;const y=o=>{o?(p(n.value,e),C()):(b(n.value),q())},r=o=>{o?w(n.value):d||x(document)};l.watch(s,o=>{c.value==="normal"&&y(o),c.value==="immersive"&&r(o)});const a=()=>{document.fullscreenElement?d=!1:(t.emit("update:modelValue"),d=!0)};l.onMounted(()=>{document.addEventListener("fullscreenchange",a)}),l.onUnmounted(()=>{document.removeEventListener("fullscreenchange",a)})}var N="",f=l.defineComponent({name:"DFullscreen",props:F,emits:["update:modelValue"],setup(e,n){const t=l.ref();return z(e,t,n),v(e,n),()=>{const s=l.renderSlot(l.useSlots(),"default");return l.createVNode("div",{ref:t},[s])}}}),g={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.component(f.name,f)}};u.Fullscreen=f,u.default=g,u.fullscreenProps=F,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
@@ -1 +1 @@
1
- .devui-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}.devui-fullscreen-html{overflow:hidden}:not(:root):fullscreen::backdrop{background:var(--devui-base-bg, #ffffff)}
1
+ .devui-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}.devui-fullscreen__html{overflow:hidden}:not(:root):fullscreen::backdrop{background:var(--devui-base-bg, #ffffff)}
package/grid/index.es.js CHANGED
@@ -14,7 +14,7 @@ var __spreadValues = (a, b) => {
14
14
  }
15
15
  return a;
16
16
  };
17
- import { computed, defineComponent, ref, onMounted, onUnmounted, provide, createVNode, inject } from "vue";
17
+ import { defineComponent, ref, computed, onMounted, onUnmounted, provide, createVNode, inject } from "vue";
18
18
  const rowProps = {
19
19
  align: {
20
20
  type: String,
@@ -54,45 +54,6 @@ const screenSizes = {
54
54
  xxl: screenSizesProp
55
55
  };
56
56
  const colProps = __spreadValues(__spreadValues(__spreadValues({}, colPropsBaseStyle), colPropsBaseClass), screenSizes);
57
- const CLASS_PREFIX$1 = "devui-col";
58
- function formatClass(prefix, val) {
59
- return val !== void 0 ? ` ${prefix}-${val}` : "";
60
- }
61
- function useColClassNames(props) {
62
- return computed(() => {
63
- const spanClass = formatClass(`${CLASS_PREFIX$1}-span`, props.span);
64
- const offsetClass = formatClass(`${CLASS_PREFIX$1}-offset`, props.offset);
65
- const pullClass = formatClass(`${CLASS_PREFIX$1}-pull`, props.pull);
66
- const pushClass = formatClass(`${CLASS_PREFIX$1}-push`, props.push);
67
- return `${spanClass}${offsetClass}${pullClass}${pushClass}`;
68
- });
69
- }
70
- function setSpace(val) {
71
- return ` ${val.trim()}${val && " "}`;
72
- }
73
- function useSize(colSizes) {
74
- const keys = Object.keys(colSizes).filter((key) => key in screenSizes);
75
- return computed(() => {
76
- return keys.reduce((total, key) => {
77
- const valueType = typeof colSizes[key];
78
- if (valueType === "number") {
79
- total = `${setSpace(total)}${CLASS_PREFIX$1}-${key}-span-${colSizes[key]}`;
80
- } else if (valueType === "object") {
81
- const colSizesKeys = Object.keys(colSizes[key]);
82
- const sum = colSizesKeys.filter((item) => item in colPropsBaseClass).reduce((tot, k) => {
83
- if (typeof colSizes[key][k] !== "number") {
84
- return "";
85
- } else {
86
- tot = `${setSpace(tot)}${CLASS_PREFIX$1}-${key}-${k}-${colSizes[key][k]}`;
87
- }
88
- return tot;
89
- }, "");
90
- total = `${setSpace(total)}${sum}`;
91
- }
92
- return total;
93
- }, "");
94
- });
95
- }
96
57
  const RESULT_SCREEN = ["xxl", "xl", "lg", "md", "sm", "xs"];
97
58
  const screenMedias = {
98
59
  xs: "screen and (max-width: 575px)",
@@ -151,8 +112,30 @@ function removeSubscribeCb(id) {
151
112
  unRegister();
152
113
  }
153
114
  }
115
+ function createBem(namespace, element, modifier) {
116
+ let cls = namespace;
117
+ if (element) {
118
+ cls += `__${element}`;
119
+ }
120
+ if (modifier) {
121
+ cls += `--${modifier}`;
122
+ }
123
+ return cls;
124
+ }
125
+ function useNamespace(block, needDot = false) {
126
+ const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
127
+ const b = () => createBem(namespace);
128
+ const e = (element) => element ? createBem(namespace, element) : "";
129
+ const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
130
+ const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
131
+ return {
132
+ b,
133
+ e,
134
+ m,
135
+ em
136
+ };
137
+ }
154
138
  var row = "";
155
- const CLASS_PREFIX = "devui-row";
156
139
  var Row = defineComponent({
157
140
  name: "DRow",
158
141
  props: rowProps,
@@ -161,12 +144,12 @@ var Row = defineComponent({
161
144
  slots
162
145
  }) {
163
146
  const gutterScreenSize = ref({});
164
- const rowClass = computed(() => {
165
- const alignClass = formatClass(`${CLASS_PREFIX}-align`, props.align);
166
- const justifyClass = formatClass(`${CLASS_PREFIX}-justify`, props.justify);
167
- const wrapClass = props.wrap ? ` ${CLASS_PREFIX}-wrap` : "";
168
- return `${alignClass}${justifyClass}${wrapClass}`;
169
- });
147
+ const ns = useNamespace("row");
148
+ const rowClass = computed(() => ({
149
+ [ns.em("align", props.align)]: true,
150
+ [ns.em("justify", props.justify)]: true,
151
+ [ns.e("wrap")]: props.wrap
152
+ }));
170
153
  let token;
171
154
  onMounted(() => {
172
155
  token = responesScreen((screen2) => {
@@ -214,11 +197,48 @@ var Row = defineComponent({
214
197
  return () => {
215
198
  var _a;
216
199
  return createVNode("div", {
217
- "class": `${CLASS_PREFIX}${rowClass.value}`
200
+ "class": [ns.b(), rowClass.value]
218
201
  }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
219
202
  };
220
203
  }
221
204
  });
205
+ const colNs = useNamespace("col");
206
+ function useColClassNames(props) {
207
+ return computed(() => ({
208
+ [colNs.em("span", props.span ? String(props.span) : "")]: true,
209
+ [colNs.em("offset", props.offset ? String(props.offset) : "")]: true,
210
+ [colNs.em("pull", props.pull ? String(props.pull) : "")]: true,
211
+ [colNs.em("push", props.push ? String(props.push) : "")]: true
212
+ }));
213
+ }
214
+ function setSpace(val) {
215
+ return ` ${val.trim()}${val && " "}`;
216
+ }
217
+ function useSize(colSizes) {
218
+ const keys = Object.keys(colSizes).filter((key) => key in screenSizes);
219
+ return computed(() => {
220
+ return keys.reduce((total, key) => {
221
+ const valueType = typeof colSizes[key];
222
+ if (valueType === "number") {
223
+ total = `${setSpace(total)}${colNs.em(key, `span-${colSizes[key]}`)}`;
224
+ } else if (valueType === "object") {
225
+ const colSizesKeys = Object.keys(colSizes[key]);
226
+ const sum = colSizesKeys.filter((item) => item in colPropsBaseClass).reduce((tot, k) => {
227
+ const baseClass = colSizes[key];
228
+ const _class = baseClass[k];
229
+ if (typeof _class !== "number") {
230
+ return "";
231
+ } else {
232
+ tot = `${setSpace(tot)}${colNs.em(key, `${k}-${_class}`)}`;
233
+ }
234
+ return tot;
235
+ }, "");
236
+ total = `${setSpace(total)}${sum}`;
237
+ }
238
+ return total;
239
+ }, "");
240
+ });
241
+ }
222
242
  var col = "";
223
243
  var Col = defineComponent({
224
244
  name: "DCol",
@@ -226,6 +246,7 @@ var Col = defineComponent({
226
246
  setup(props, {
227
247
  slots
228
248
  }) {
249
+ const ns = useNamespace("col");
229
250
  const formatFlex = (flex) => {
230
251
  if (typeof flex === "number") {
231
252
  return `${flex} ${flex} auto`;
@@ -245,8 +266,8 @@ var Col = defineComponent({
245
266
  return () => {
246
267
  var _a;
247
268
  return createVNode("div", {
248
- "class": `${CLASS_PREFIX$1}${colClassNames.value}${sizeClassNames.value}`,
249
- "style": __spreadValues(__spreadValues({}, colStyle.value), gutterStyle.value)
269
+ "class": [ns.b(), colClassNames.value, sizeClassNames.value],
270
+ "style": __spreadValues(__spreadValues({}, colStyle.value), gutterStyle == null ? void 0 : gutterStyle.value)
250
271
  }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
251
272
  };
252
273
  }
package/grid/index.umd.js CHANGED
@@ -1 +1 @@
1
- var X=Object.defineProperty;var M=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var T=(n,t,i)=>t in n?X(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i,l=(n,t)=>{for(var i in t||(t={}))q.call(t,i)&&T(n,i,t[i]);if(M)for(var i of M(t))H.call(t,i)&&T(n,i,t[i]);return n};(function(n,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis!="undefined"?globalThis:n||self,t(n.index={},n.Vue))})(this,function(n,t){"use strict";const i={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},g=Number,N={flex:[String,Number],order:g},S={offset:g,pull:g,push:g,span:g},m=[Number,Object],w={xs:m,sm:m,md:m,lg:m,xl:m,xxl:m},R=l(l(l({},N),S),w),d="devui-col";function p(e,s){return s!==void 0?` ${e}-${s}`:""}function z(e){return t.computed(()=>{const s=p(`${d}-span`,e.span),u=p(`${d}-offset`,e.offset),c=p(`${d}-pull`,e.pull),a=p(`${d}-push`,e.push);return`${s}${u}${c}${a}`})}function x(e){return` ${e.trim()}${e&&" "}`}function A(e){const s=Object.keys(e).filter(u=>u in w);return t.computed(()=>s.reduce((u,c)=>{const a=typeof e[c];if(a==="number")u=`${x(u)}${d}-${c}-span-${e[c]}`;else if(a==="object"){const r=Object.keys(e[c]).filter(o=>o in S).reduce((o,f)=>typeof e[c][f]!="number"?"":(o=`${x(o)}${d}-${c}-${f}-${e[c][f]}`,o),"");u=`${x(u)}${r}`}return u},""))}const _=["xxl","xl","lg","md","sm","xs"],j={xs:"screen and (max-width: 575px)",sm:"screen and (min-width: 576px)",md:"screen and (min-width: 768px)",lg:"screen and (min-width: 992px)",xl:"screen and (min-width: 1200px)",xxl:"screen and (min-width: 1600px)"},$=new Map;let P=-1;const y={},O={};function B(){$.forEach(e=>{e(l({},y))})}function F(){Object.keys(j).forEach(e=>{const s=window.matchMedia(j[e]);s.matches&&(y[e]=!0,B());const u=c=>{y[e]=c.matches,B()};s.addEventListener("change",u),O[e]={res:s,listener:u}})}function U(e){return $.size||F(),P+=1,$.set(P,e),e(l({},y)),P}function V(){Object.keys(j).forEach(e=>{const s=O[e];s.res.removeEventListener("change",s.listener)}),$.clear()}function D(e){$.delete(e),$.size===0&&V()}var J="";const C="devui-row";var v=t.defineComponent({name:"DRow",props:i,emits:[],setup(e,{slots:s}){const u=t.ref({}),c=t.computed(()=>{const r=p(`${C}-align`,e.align),o=p(`${C}-justify`,e.justify),f=e.wrap?` ${C}-wrap`:"";return`${r}${o}${f}`});let a;t.onMounted(()=>{a=U(r=>{u.value=r})}),t.onUnmounted(()=>{D(a)});const b=t.computed(()=>{if(!e.gutter)return{};let r=[0,0];Array.isArray(e.gutter)?r=e.gutter:typeof e.gutter=="number"?r=[e.gutter,0]:_.some(L=>{const h=e.gutter[L];return u.value[L]&&h?(typeof h=="number"?r=[h,0]:r=h,!0):!1});const o=`${(r[0]||0)/2}px`,f=`${(r[0]||0)/2}px`,I=`${(r[1]||0)/2}px`,K=`${(r[1]||0)/2}px`;return{paddingLeft:o,paddingRight:f,paddingTop:I,paddingBottom:K}});return t.provide("gutterStyle",b),()=>{var r;return t.createVNode("div",{class:`${C}${c.value}`},[(r=s.default)==null?void 0:r.call(s)])}}}),Q="",E=t.defineComponent({name:"DCol",props:R,setup(e,{slots:s}){const u=o=>typeof o=="number"?`${o} ${o} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(o)?`0 0 ${o}`:o,c=z(e),a=A(e),b=t.computed(()=>({flex:u(e.flex),order:e.order})),r=t.inject("gutterStyle");return()=>{var o;return t.createVNode("div",{class:`${d}${c.value}${a.value}`,style:l(l({},b.value),r.value)},[(o=s.default)==null?void 0:o.call(s)])}}}),G={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.component(v.name,v),e.component(E.name,E)}};n.Col=E,n.Row=v,n.colProps=R,n.colPropsBaseClass=S,n.colPropsBaseStyle=N,n.default=G,n.rowProps=i,n.screenSizes=w,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
1
+ var I=Object.defineProperty;var _=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var L=(s,n,i)=>n in s?I(s,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[n]=i,a=(s,n)=>{for(var i in n||(n={}))J.call(n,i)&&L(s,i,n[i]);if(_)for(var i of _(n))Q.call(n,i)&&L(s,i,n[i]);return s};(function(s,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(s=typeof globalThis!="undefined"?globalThis:s||self,n(s.index={},s.Vue))})(this,function(s,n){"use strict";const i={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},b=Number,B={flex:[String,Number],order:b},w={offset:b,pull:b,push:b,span:b},d=[Number,Object],x={xs:d,sm:d,md:d,lg:d,xl:d,xxl:d},O=a(a(a({},B),w),x),A=["xxl","xl","lg","md","sm","xs"],C={xs:"screen and (max-width: 575px)",sm:"screen and (min-width: 576px)",md:"screen and (min-width: 768px)",lg:"screen and (min-width: 992px)",xl:"screen and (min-width: 1200px)",xxl:"screen and (min-width: 1600px)"},f=new Map;let j=-1;const y={},R={};function z(){f.forEach(e=>{e(a({},y))})}function U(){Object.keys(C).forEach(e=>{const c=window.matchMedia(C[e]);c.matches&&(y[e]=!0,z());const r=u=>{y[e]=u.matches,z()};c.addEventListener("change",r),R[e]={res:c,listener:r}})}function V(e){return f.size||U(),j+=1,f.set(j,e),e(a({},y)),j}function D(){Object.keys(C).forEach(e=>{const c=R[e];c.res.removeEventListener("change",c.listener)}),f.clear()}function G(e){f.delete(e),f.size===0&&D()}function h(e,c,r){let u=e;return c&&(u+=`__${c}`),r&&(u+=`--${r}`),u}function N(e,c=!1){const r=c?`.devui-${e}`:`devui-${e}`;return{b:()=>h(r),e:t=>t?h(r,t):"",m:t=>t?h(r,"",t):"",em:(t,o)=>t&&o?h(r,t,o):""}}var W="",v=n.defineComponent({name:"DRow",props:i,emits:[],setup(e,{slots:c}){const r=n.ref({}),u=N("row"),l=n.computed(()=>({[u.em("align",e.align)]:!0,[u.em("justify",e.justify)]:!0,[u.e("wrap")]:e.wrap}));let p;n.onMounted(()=>{p=V(t=>{r.value=t})}),n.onUnmounted(()=>{G(p)});const g=n.computed(()=>{if(!e.gutter)return{};let t=[0,0];Array.isArray(e.gutter)?t=e.gutter:typeof e.gutter=="number"?t=[e.gutter,0]:A.some(T=>{const $=e.gutter[T];return r.value[T]&&$?(typeof $=="number"?t=[$,0]:t=$,!0):!1});const o=`${(t[0]||0)/2}px`,M=`${(t[0]||0)/2}px`,S=`${(t[1]||0)/2}px`,H=`${(t[1]||0)/2}px`;return{paddingLeft:o,paddingRight:M,paddingTop:S,paddingBottom:H}});return n.provide("gutterStyle",g),()=>{var t;return n.createVNode("div",{class:[u.b(),l.value]},[(t=c.default)==null?void 0:t.call(c)])}}});const m=N("col");function K(e){return n.computed(()=>({[m.em("span",e.span?String(e.span):"")]:!0,[m.em("offset",e.offset?String(e.offset):"")]:!0,[m.em("pull",e.pull?String(e.pull):"")]:!0,[m.em("push",e.push?String(e.push):"")]:!0}))}function P(e){return` ${e.trim()}${e&&" "}`}function q(e){const c=Object.keys(e).filter(r=>r in x);return n.computed(()=>c.reduce((r,u)=>{const l=typeof e[u];if(l==="number")r=`${P(r)}${m.em(u,`span-${e[u]}`)}`;else if(l==="object"){const g=Object.keys(e[u]).filter(t=>t in w).reduce((t,o)=>{const S=e[u][o];return typeof S!="number"?"":(t=`${P(t)}${m.em(u,`${o}-${S}`)}`,t)},"");r=`${P(r)}${g}`}return r},""))}var X="",E=n.defineComponent({name:"DCol",props:O,setup(e,{slots:c}){const r=N("col"),u=o=>typeof o=="number"?`${o} ${o} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(o)?`0 0 ${o}`:o,l=K(e),p=q(e),g=n.computed(()=>({flex:u(e.flex),order:e.order})),t=n.inject("gutterStyle");return()=>{var o;return n.createVNode("div",{class:[r.b(),l.value,p.value],style:a(a({},g.value),t==null?void 0:t.value)},[(o=c.default)==null?void 0:o.call(c)])}}}),F={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.component(v.name,v),e.component(E.name,E)}};s.Col=E,s.Row=v,s.colProps=O,s.colPropsBaseClass=w,s.colPropsBaseStyle=B,s.default=F,s.rowProps=i,s.screenSizes=x,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
package/grid/style.css CHANGED
@@ -1 +1 @@
1
- .devui-row{display:flex}.devui-row-wrap{flex-wrap:wrap}.devui-row-align-top{align-items:flex-start}.devui-row-align-middle{align-items:center}.devui-row-align-bottom{align-items:flex-end}.devui-row-justify-start{justify-content:flex-start}.devui-row-justify-center{justify-content:center}.devui-row-justify-end{justify-content:flex-end}.devui-row-justify-around{justify-content:space-around}.devui-row-justify-between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col-span-0,.devui-col-xs-span-0{display:none}.devui-col-offset-1{margin-left:4.1666666667%}.devui-col-pull-1{right:4.1666666667%}.devui-col-push-1{left:4.1666666667%}.devui-col-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xs-offset-1{margin-left:4.1666666667%}.devui-col-xs-pull-1{right:4.1666666667%}.devui-col-xs-push-1{left:4.1666666667%}.devui-col-xs-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-offset-2{margin-left:8.3333333333%}.devui-col-pull-2{right:8.3333333333%}.devui-col-push-2{left:8.3333333333%}.devui-col-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xs-offset-2{margin-left:8.3333333333%}.devui-col-xs-pull-2{right:8.3333333333%}.devui-col-xs-push-2{left:8.3333333333%}.devui-col-xs-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-offset-3{margin-left:12.5%}.devui-col-pull-3{right:12.5%}.devui-col-push-3{left:12.5%}.devui-col-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xs-offset-3{margin-left:12.5%}.devui-col-xs-pull-3{right:12.5%}.devui-col-xs-push-3{left:12.5%}.devui-col-xs-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-offset-4{margin-left:16.6666666667%}.devui-col-pull-4{right:16.6666666667%}.devui-col-push-4{left:16.6666666667%}.devui-col-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xs-offset-4{margin-left:16.6666666667%}.devui-col-xs-pull-4{right:16.6666666667%}.devui-col-xs-push-4{left:16.6666666667%}.devui-col-xs-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-offset-5{margin-left:20.8333333333%}.devui-col-pull-5{right:20.8333333333%}.devui-col-push-5{left:20.8333333333%}.devui-col-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xs-offset-5{margin-left:20.8333333333%}.devui-col-xs-pull-5{right:20.8333333333%}.devui-col-xs-push-5{left:20.8333333333%}.devui-col-xs-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-offset-6{margin-left:25%}.devui-col-pull-6{right:25%}.devui-col-push-6{left:25%}.devui-col-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xs-offset-6{margin-left:25%}.devui-col-xs-pull-6{right:25%}.devui-col-xs-push-6{left:25%}.devui-col-xs-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-offset-7{margin-left:29.1666666667%}.devui-col-pull-7{right:29.1666666667%}.devui-col-push-7{left:29.1666666667%}.devui-col-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xs-offset-7{margin-left:29.1666666667%}.devui-col-xs-pull-7{right:29.1666666667%}.devui-col-xs-push-7{left:29.1666666667%}.devui-col-xs-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-offset-8{margin-left:33.3333333333%}.devui-col-pull-8{right:33.3333333333%}.devui-col-push-8{left:33.3333333333%}.devui-col-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xs-offset-8{margin-left:33.3333333333%}.devui-col-xs-pull-8{right:33.3333333333%}.devui-col-xs-push-8{left:33.3333333333%}.devui-col-xs-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-offset-9{margin-left:37.5%}.devui-col-pull-9{right:37.5%}.devui-col-push-9{left:37.5%}.devui-col-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xs-offset-9{margin-left:37.5%}.devui-col-xs-pull-9{right:37.5%}.devui-col-xs-push-9{left:37.5%}.devui-col-xs-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-offset-10{margin-left:41.6666666667%}.devui-col-pull-10{right:41.6666666667%}.devui-col-push-10{left:41.6666666667%}.devui-col-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xs-offset-10{margin-left:41.6666666667%}.devui-col-xs-pull-10{right:41.6666666667%}.devui-col-xs-push-10{left:41.6666666667%}.devui-col-xs-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-offset-11{margin-left:45.8333333333%}.devui-col-pull-11{right:45.8333333333%}.devui-col-push-11{left:45.8333333333%}.devui-col-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xs-offset-11{margin-left:45.8333333333%}.devui-col-xs-pull-11{right:45.8333333333%}.devui-col-xs-push-11{left:45.8333333333%}.devui-col-xs-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-offset-12{margin-left:50%}.devui-col-pull-12{right:50%}.devui-col-push-12{left:50%}.devui-col-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xs-offset-12{margin-left:50%}.devui-col-xs-pull-12{right:50%}.devui-col-xs-push-12{left:50%}.devui-col-xs-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-offset-13{margin-left:54.1666666667%}.devui-col-pull-13{right:54.1666666667%}.devui-col-push-13{left:54.1666666667%}.devui-col-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xs-offset-13{margin-left:54.1666666667%}.devui-col-xs-pull-13{right:54.1666666667%}.devui-col-xs-push-13{left:54.1666666667%}.devui-col-xs-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-offset-14{margin-left:58.3333333333%}.devui-col-pull-14{right:58.3333333333%}.devui-col-push-14{left:58.3333333333%}.devui-col-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xs-offset-14{margin-left:58.3333333333%}.devui-col-xs-pull-14{right:58.3333333333%}.devui-col-xs-push-14{left:58.3333333333%}.devui-col-xs-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-offset-15{margin-left:62.5%}.devui-col-pull-15{right:62.5%}.devui-col-push-15{left:62.5%}.devui-col-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xs-offset-15{margin-left:62.5%}.devui-col-xs-pull-15{right:62.5%}.devui-col-xs-push-15{left:62.5%}.devui-col-xs-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-offset-16{margin-left:66.6666666667%}.devui-col-pull-16{right:66.6666666667%}.devui-col-push-16{left:66.6666666667%}.devui-col-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xs-offset-16{margin-left:66.6666666667%}.devui-col-xs-pull-16{right:66.6666666667%}.devui-col-xs-push-16{left:66.6666666667%}.devui-col-xs-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-offset-17{margin-left:70.8333333333%}.devui-col-pull-17{right:70.8333333333%}.devui-col-push-17{left:70.8333333333%}.devui-col-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xs-offset-17{margin-left:70.8333333333%}.devui-col-xs-pull-17{right:70.8333333333%}.devui-col-xs-push-17{left:70.8333333333%}.devui-col-xs-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-offset-18{margin-left:75%}.devui-col-pull-18{right:75%}.devui-col-push-18{left:75%}.devui-col-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xs-offset-18{margin-left:75%}.devui-col-xs-pull-18{right:75%}.devui-col-xs-push-18{left:75%}.devui-col-xs-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-offset-19{margin-left:79.1666666667%}.devui-col-pull-19{right:79.1666666667%}.devui-col-push-19{left:79.1666666667%}.devui-col-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xs-offset-19{margin-left:79.1666666667%}.devui-col-xs-pull-19{right:79.1666666667%}.devui-col-xs-push-19{left:79.1666666667%}.devui-col-xs-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-offset-20{margin-left:83.3333333333%}.devui-col-pull-20{right:83.3333333333%}.devui-col-push-20{left:83.3333333333%}.devui-col-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xs-offset-20{margin-left:83.3333333333%}.devui-col-xs-pull-20{right:83.3333333333%}.devui-col-xs-push-20{left:83.3333333333%}.devui-col-xs-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-offset-21{margin-left:87.5%}.devui-col-pull-21{right:87.5%}.devui-col-push-21{left:87.5%}.devui-col-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xs-offset-21{margin-left:87.5%}.devui-col-xs-pull-21{right:87.5%}.devui-col-xs-push-21{left:87.5%}.devui-col-xs-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-offset-22{margin-left:91.6666666667%}.devui-col-pull-22{right:91.6666666667%}.devui-col-push-22{left:91.6666666667%}.devui-col-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xs-offset-22{margin-left:91.6666666667%}.devui-col-xs-pull-22{right:91.6666666667%}.devui-col-xs-push-22{left:91.6666666667%}.devui-col-xs-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-offset-23{margin-left:95.8333333333%}.devui-col-pull-23{right:95.8333333333%}.devui-col-push-23{left:95.8333333333%}.devui-col-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xs-offset-23{margin-left:95.8333333333%}.devui-col-xs-pull-23{right:95.8333333333%}.devui-col-xs-push-23{left:95.8333333333%}.devui-col-xs-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-offset-24{margin-left:100%}.devui-col-pull-24{right:100%}.devui-col-push-24{left:100%}.devui-col-span-24{display:block;flex:0 0 100%;width:100%}.devui-col-xs-offset-24{margin-left:100%}.devui-col-xs-pull-24{right:100%}.devui-col-xs-push-24{left:100%}.devui-col-xs-span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col-sm-span-0{display:none}.devui-col-sm-offset-1{margin-left:4.1666666667%}.devui-col-sm-pull-1{right:4.1666666667%}.devui-col-sm-push-1{left:4.1666666667%}.devui-col-sm-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-sm-offset-2{margin-left:8.3333333333%}.devui-col-sm-pull-2{right:8.3333333333%}.devui-col-sm-push-2{left:8.3333333333%}.devui-col-sm-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-sm-offset-3{margin-left:12.5%}.devui-col-sm-pull-3{right:12.5%}.devui-col-sm-push-3{left:12.5%}.devui-col-sm-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-sm-offset-4{margin-left:16.6666666667%}.devui-col-sm-pull-4{right:16.6666666667%}.devui-col-sm-push-4{left:16.6666666667%}.devui-col-sm-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-sm-offset-5{margin-left:20.8333333333%}.devui-col-sm-pull-5{right:20.8333333333%}.devui-col-sm-push-5{left:20.8333333333%}.devui-col-sm-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-sm-offset-6{margin-left:25%}.devui-col-sm-pull-6{right:25%}.devui-col-sm-push-6{left:25%}.devui-col-sm-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-sm-offset-7{margin-left:29.1666666667%}.devui-col-sm-pull-7{right:29.1666666667%}.devui-col-sm-push-7{left:29.1666666667%}.devui-col-sm-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-sm-offset-8{margin-left:33.3333333333%}.devui-col-sm-pull-8{right:33.3333333333%}.devui-col-sm-push-8{left:33.3333333333%}.devui-col-sm-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-sm-offset-9{margin-left:37.5%}.devui-col-sm-pull-9{right:37.5%}.devui-col-sm-push-9{left:37.5%}.devui-col-sm-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-sm-offset-10{margin-left:41.6666666667%}.devui-col-sm-pull-10{right:41.6666666667%}.devui-col-sm-push-10{left:41.6666666667%}.devui-col-sm-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-sm-offset-11{margin-left:45.8333333333%}.devui-col-sm-pull-11{right:45.8333333333%}.devui-col-sm-push-11{left:45.8333333333%}.devui-col-sm-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-sm-offset-12{margin-left:50%}.devui-col-sm-pull-12{right:50%}.devui-col-sm-push-12{left:50%}.devui-col-sm-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-sm-offset-13{margin-left:54.1666666667%}.devui-col-sm-pull-13{right:54.1666666667%}.devui-col-sm-push-13{left:54.1666666667%}.devui-col-sm-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-sm-offset-14{margin-left:58.3333333333%}.devui-col-sm-pull-14{right:58.3333333333%}.devui-col-sm-push-14{left:58.3333333333%}.devui-col-sm-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-sm-offset-15{margin-left:62.5%}.devui-col-sm-pull-15{right:62.5%}.devui-col-sm-push-15{left:62.5%}.devui-col-sm-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-sm-offset-16{margin-left:66.6666666667%}.devui-col-sm-pull-16{right:66.6666666667%}.devui-col-sm-push-16{left:66.6666666667%}.devui-col-sm-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-sm-offset-17{margin-left:70.8333333333%}.devui-col-sm-pull-17{right:70.8333333333%}.devui-col-sm-push-17{left:70.8333333333%}.devui-col-sm-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-sm-offset-18{margin-left:75%}.devui-col-sm-pull-18{right:75%}.devui-col-sm-push-18{left:75%}.devui-col-sm-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-sm-offset-19{margin-left:79.1666666667%}.devui-col-sm-pull-19{right:79.1666666667%}.devui-col-sm-push-19{left:79.1666666667%}.devui-col-sm-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-sm-offset-20{margin-left:83.3333333333%}.devui-col-sm-pull-20{right:83.3333333333%}.devui-col-sm-push-20{left:83.3333333333%}.devui-col-sm-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-sm-offset-21{margin-left:87.5%}.devui-col-sm-pull-21{right:87.5%}.devui-col-sm-push-21{left:87.5%}.devui-col-sm-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-sm-offset-22{margin-left:91.6666666667%}.devui-col-sm-pull-22{right:91.6666666667%}.devui-col-sm-push-22{left:91.6666666667%}.devui-col-sm-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-sm-offset-23{margin-left:95.8333333333%}.devui-col-sm-pull-23{right:95.8333333333%}.devui-col-sm-push-23{left:95.8333333333%}.devui-col-sm-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-sm-offset-24{margin-left:100%}.devui-col-sm-pull-24{right:100%}.devui-col-sm-push-24{left:100%}.devui-col-sm-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col-md-span-0{display:none}.devui-col-md-offset-1{margin-left:4.1666666667%}.devui-col-md-pull-1{right:4.1666666667%}.devui-col-md-push-1{left:4.1666666667%}.devui-col-md-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-md-offset-2{margin-left:8.3333333333%}.devui-col-md-pull-2{right:8.3333333333%}.devui-col-md-push-2{left:8.3333333333%}.devui-col-md-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-md-offset-3{margin-left:12.5%}.devui-col-md-pull-3{right:12.5%}.devui-col-md-push-3{left:12.5%}.devui-col-md-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-md-offset-4{margin-left:16.6666666667%}.devui-col-md-pull-4{right:16.6666666667%}.devui-col-md-push-4{left:16.6666666667%}.devui-col-md-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-md-offset-5{margin-left:20.8333333333%}.devui-col-md-pull-5{right:20.8333333333%}.devui-col-md-push-5{left:20.8333333333%}.devui-col-md-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-md-offset-6{margin-left:25%}.devui-col-md-pull-6{right:25%}.devui-col-md-push-6{left:25%}.devui-col-md-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-md-offset-7{margin-left:29.1666666667%}.devui-col-md-pull-7{right:29.1666666667%}.devui-col-md-push-7{left:29.1666666667%}.devui-col-md-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-md-offset-8{margin-left:33.3333333333%}.devui-col-md-pull-8{right:33.3333333333%}.devui-col-md-push-8{left:33.3333333333%}.devui-col-md-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-md-offset-9{margin-left:37.5%}.devui-col-md-pull-9{right:37.5%}.devui-col-md-push-9{left:37.5%}.devui-col-md-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-md-offset-10{margin-left:41.6666666667%}.devui-col-md-pull-10{right:41.6666666667%}.devui-col-md-push-10{left:41.6666666667%}.devui-col-md-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-md-offset-11{margin-left:45.8333333333%}.devui-col-md-pull-11{right:45.8333333333%}.devui-col-md-push-11{left:45.8333333333%}.devui-col-md-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-md-offset-12{margin-left:50%}.devui-col-md-pull-12{right:50%}.devui-col-md-push-12{left:50%}.devui-col-md-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-md-offset-13{margin-left:54.1666666667%}.devui-col-md-pull-13{right:54.1666666667%}.devui-col-md-push-13{left:54.1666666667%}.devui-col-md-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-md-offset-14{margin-left:58.3333333333%}.devui-col-md-pull-14{right:58.3333333333%}.devui-col-md-push-14{left:58.3333333333%}.devui-col-md-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-md-offset-15{margin-left:62.5%}.devui-col-md-pull-15{right:62.5%}.devui-col-md-push-15{left:62.5%}.devui-col-md-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-md-offset-16{margin-left:66.6666666667%}.devui-col-md-pull-16{right:66.6666666667%}.devui-col-md-push-16{left:66.6666666667%}.devui-col-md-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-md-offset-17{margin-left:70.8333333333%}.devui-col-md-pull-17{right:70.8333333333%}.devui-col-md-push-17{left:70.8333333333%}.devui-col-md-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-md-offset-18{margin-left:75%}.devui-col-md-pull-18{right:75%}.devui-col-md-push-18{left:75%}.devui-col-md-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-md-offset-19{margin-left:79.1666666667%}.devui-col-md-pull-19{right:79.1666666667%}.devui-col-md-push-19{left:79.1666666667%}.devui-col-md-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-md-offset-20{margin-left:83.3333333333%}.devui-col-md-pull-20{right:83.3333333333%}.devui-col-md-push-20{left:83.3333333333%}.devui-col-md-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-md-offset-21{margin-left:87.5%}.devui-col-md-pull-21{right:87.5%}.devui-col-md-push-21{left:87.5%}.devui-col-md-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-md-offset-22{margin-left:91.6666666667%}.devui-col-md-pull-22{right:91.6666666667%}.devui-col-md-push-22{left:91.6666666667%}.devui-col-md-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-md-offset-23{margin-left:95.8333333333%}.devui-col-md-pull-23{right:95.8333333333%}.devui-col-md-push-23{left:95.8333333333%}.devui-col-md-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-md-offset-24{margin-left:100%}.devui-col-md-pull-24{right:100%}.devui-col-md-push-24{left:100%}.devui-col-md-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col-lg-span-0{display:none}.devui-col-lg-offset-1{margin-left:4.1666666667%}.devui-col-lg-pull-1{right:4.1666666667%}.devui-col-lg-push-1{left:4.1666666667%}.devui-col-lg-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-lg-offset-2{margin-left:8.3333333333%}.devui-col-lg-pull-2{right:8.3333333333%}.devui-col-lg-push-2{left:8.3333333333%}.devui-col-lg-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-lg-offset-3{margin-left:12.5%}.devui-col-lg-pull-3{right:12.5%}.devui-col-lg-push-3{left:12.5%}.devui-col-lg-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-lg-offset-4{margin-left:16.6666666667%}.devui-col-lg-pull-4{right:16.6666666667%}.devui-col-lg-push-4{left:16.6666666667%}.devui-col-lg-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-lg-offset-5{margin-left:20.8333333333%}.devui-col-lg-pull-5{right:20.8333333333%}.devui-col-lg-push-5{left:20.8333333333%}.devui-col-lg-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-lg-offset-6{margin-left:25%}.devui-col-lg-pull-6{right:25%}.devui-col-lg-push-6{left:25%}.devui-col-lg-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-lg-offset-7{margin-left:29.1666666667%}.devui-col-lg-pull-7{right:29.1666666667%}.devui-col-lg-push-7{left:29.1666666667%}.devui-col-lg-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-lg-offset-8{margin-left:33.3333333333%}.devui-col-lg-pull-8{right:33.3333333333%}.devui-col-lg-push-8{left:33.3333333333%}.devui-col-lg-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-lg-offset-9{margin-left:37.5%}.devui-col-lg-pull-9{right:37.5%}.devui-col-lg-push-9{left:37.5%}.devui-col-lg-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-lg-offset-10{margin-left:41.6666666667%}.devui-col-lg-pull-10{right:41.6666666667%}.devui-col-lg-push-10{left:41.6666666667%}.devui-col-lg-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-lg-offset-11{margin-left:45.8333333333%}.devui-col-lg-pull-11{right:45.8333333333%}.devui-col-lg-push-11{left:45.8333333333%}.devui-col-lg-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-lg-offset-12{margin-left:50%}.devui-col-lg-pull-12{right:50%}.devui-col-lg-push-12{left:50%}.devui-col-lg-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-lg-offset-13{margin-left:54.1666666667%}.devui-col-lg-pull-13{right:54.1666666667%}.devui-col-lg-push-13{left:54.1666666667%}.devui-col-lg-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-lg-offset-14{margin-left:58.3333333333%}.devui-col-lg-pull-14{right:58.3333333333%}.devui-col-lg-push-14{left:58.3333333333%}.devui-col-lg-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-lg-offset-15{margin-left:62.5%}.devui-col-lg-pull-15{right:62.5%}.devui-col-lg-push-15{left:62.5%}.devui-col-lg-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-lg-offset-16{margin-left:66.6666666667%}.devui-col-lg-pull-16{right:66.6666666667%}.devui-col-lg-push-16{left:66.6666666667%}.devui-col-lg-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-lg-offset-17{margin-left:70.8333333333%}.devui-col-lg-pull-17{right:70.8333333333%}.devui-col-lg-push-17{left:70.8333333333%}.devui-col-lg-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-lg-offset-18{margin-left:75%}.devui-col-lg-pull-18{right:75%}.devui-col-lg-push-18{left:75%}.devui-col-lg-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-lg-offset-19{margin-left:79.1666666667%}.devui-col-lg-pull-19{right:79.1666666667%}.devui-col-lg-push-19{left:79.1666666667%}.devui-col-lg-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-lg-offset-20{margin-left:83.3333333333%}.devui-col-lg-pull-20{right:83.3333333333%}.devui-col-lg-push-20{left:83.3333333333%}.devui-col-lg-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-lg-offset-21{margin-left:87.5%}.devui-col-lg-pull-21{right:87.5%}.devui-col-lg-push-21{left:87.5%}.devui-col-lg-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-lg-offset-22{margin-left:91.6666666667%}.devui-col-lg-pull-22{right:91.6666666667%}.devui-col-lg-push-22{left:91.6666666667%}.devui-col-lg-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-lg-offset-23{margin-left:95.8333333333%}.devui-col-lg-pull-23{right:95.8333333333%}.devui-col-lg-push-23{left:95.8333333333%}.devui-col-lg-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-lg-offset-24{margin-left:100%}.devui-col-lg-pull-24{right:100%}.devui-col-lg-push-24{left:100%}.devui-col-lg-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col-xl-span-0{display:none}.devui-col-xl-offset-1{margin-left:4.1666666667%}.devui-col-xl-pull-1{right:4.1666666667%}.devui-col-xl-push-1{left:4.1666666667%}.devui-col-xl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xl-offset-2{margin-left:8.3333333333%}.devui-col-xl-pull-2{right:8.3333333333%}.devui-col-xl-push-2{left:8.3333333333%}.devui-col-xl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xl-offset-3{margin-left:12.5%}.devui-col-xl-pull-3{right:12.5%}.devui-col-xl-push-3{left:12.5%}.devui-col-xl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xl-offset-4{margin-left:16.6666666667%}.devui-col-xl-pull-4{right:16.6666666667%}.devui-col-xl-push-4{left:16.6666666667%}.devui-col-xl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xl-offset-5{margin-left:20.8333333333%}.devui-col-xl-pull-5{right:20.8333333333%}.devui-col-xl-push-5{left:20.8333333333%}.devui-col-xl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xl-offset-6{margin-left:25%}.devui-col-xl-pull-6{right:25%}.devui-col-xl-push-6{left:25%}.devui-col-xl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xl-offset-7{margin-left:29.1666666667%}.devui-col-xl-pull-7{right:29.1666666667%}.devui-col-xl-push-7{left:29.1666666667%}.devui-col-xl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xl-offset-8{margin-left:33.3333333333%}.devui-col-xl-pull-8{right:33.3333333333%}.devui-col-xl-push-8{left:33.3333333333%}.devui-col-xl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xl-offset-9{margin-left:37.5%}.devui-col-xl-pull-9{right:37.5%}.devui-col-xl-push-9{left:37.5%}.devui-col-xl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xl-offset-10{margin-left:41.6666666667%}.devui-col-xl-pull-10{right:41.6666666667%}.devui-col-xl-push-10{left:41.6666666667%}.devui-col-xl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xl-offset-11{margin-left:45.8333333333%}.devui-col-xl-pull-11{right:45.8333333333%}.devui-col-xl-push-11{left:45.8333333333%}.devui-col-xl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xl-offset-12{margin-left:50%}.devui-col-xl-pull-12{right:50%}.devui-col-xl-push-12{left:50%}.devui-col-xl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xl-offset-13{margin-left:54.1666666667%}.devui-col-xl-pull-13{right:54.1666666667%}.devui-col-xl-push-13{left:54.1666666667%}.devui-col-xl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xl-offset-14{margin-left:58.3333333333%}.devui-col-xl-pull-14{right:58.3333333333%}.devui-col-xl-push-14{left:58.3333333333%}.devui-col-xl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xl-offset-15{margin-left:62.5%}.devui-col-xl-pull-15{right:62.5%}.devui-col-xl-push-15{left:62.5%}.devui-col-xl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xl-offset-16{margin-left:66.6666666667%}.devui-col-xl-pull-16{right:66.6666666667%}.devui-col-xl-push-16{left:66.6666666667%}.devui-col-xl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xl-offset-17{margin-left:70.8333333333%}.devui-col-xl-pull-17{right:70.8333333333%}.devui-col-xl-push-17{left:70.8333333333%}.devui-col-xl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xl-offset-18{margin-left:75%}.devui-col-xl-pull-18{right:75%}.devui-col-xl-push-18{left:75%}.devui-col-xl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xl-offset-19{margin-left:79.1666666667%}.devui-col-xl-pull-19{right:79.1666666667%}.devui-col-xl-push-19{left:79.1666666667%}.devui-col-xl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xl-offset-20{margin-left:83.3333333333%}.devui-col-xl-pull-20{right:83.3333333333%}.devui-col-xl-push-20{left:83.3333333333%}.devui-col-xl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xl-offset-21{margin-left:87.5%}.devui-col-xl-pull-21{right:87.5%}.devui-col-xl-push-21{left:87.5%}.devui-col-xl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xl-offset-22{margin-left:91.6666666667%}.devui-col-xl-pull-22{right:91.6666666667%}.devui-col-xl-push-22{left:91.6666666667%}.devui-col-xl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xl-offset-23{margin-left:95.8333333333%}.devui-col-xl-pull-23{right:95.8333333333%}.devui-col-xl-push-23{left:95.8333333333%}.devui-col-xl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xl-offset-24{margin-left:100%}.devui-col-xl-pull-24{right:100%}.devui-col-xl-push-24{left:100%}.devui-col-xl-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col-xxl-span-0{display:none}.devui-col-xxl-offset-1{margin-left:4.1666666667%}.devui-col-xxl-pull-1{right:4.1666666667%}.devui-col-xxl-push-1{left:4.1666666667%}.devui-col-xxl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xxl-offset-2{margin-left:8.3333333333%}.devui-col-xxl-pull-2{right:8.3333333333%}.devui-col-xxl-push-2{left:8.3333333333%}.devui-col-xxl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xxl-offset-3{margin-left:12.5%}.devui-col-xxl-pull-3{right:12.5%}.devui-col-xxl-push-3{left:12.5%}.devui-col-xxl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xxl-offset-4{margin-left:16.6666666667%}.devui-col-xxl-pull-4{right:16.6666666667%}.devui-col-xxl-push-4{left:16.6666666667%}.devui-col-xxl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xxl-offset-5{margin-left:20.8333333333%}.devui-col-xxl-pull-5{right:20.8333333333%}.devui-col-xxl-push-5{left:20.8333333333%}.devui-col-xxl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xxl-offset-6{margin-left:25%}.devui-col-xxl-pull-6{right:25%}.devui-col-xxl-push-6{left:25%}.devui-col-xxl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xxl-offset-7{margin-left:29.1666666667%}.devui-col-xxl-pull-7{right:29.1666666667%}.devui-col-xxl-push-7{left:29.1666666667%}.devui-col-xxl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xxl-offset-8{margin-left:33.3333333333%}.devui-col-xxl-pull-8{right:33.3333333333%}.devui-col-xxl-push-8{left:33.3333333333%}.devui-col-xxl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xxl-offset-9{margin-left:37.5%}.devui-col-xxl-pull-9{right:37.5%}.devui-col-xxl-push-9{left:37.5%}.devui-col-xxl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xxl-offset-10{margin-left:41.6666666667%}.devui-col-xxl-pull-10{right:41.6666666667%}.devui-col-xxl-push-10{left:41.6666666667%}.devui-col-xxl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xxl-offset-11{margin-left:45.8333333333%}.devui-col-xxl-pull-11{right:45.8333333333%}.devui-col-xxl-push-11{left:45.8333333333%}.devui-col-xxl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xxl-offset-12{margin-left:50%}.devui-col-xxl-pull-12{right:50%}.devui-col-xxl-push-12{left:50%}.devui-col-xxl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xxl-offset-13{margin-left:54.1666666667%}.devui-col-xxl-pull-13{right:54.1666666667%}.devui-col-xxl-push-13{left:54.1666666667%}.devui-col-xxl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xxl-offset-14{margin-left:58.3333333333%}.devui-col-xxl-pull-14{right:58.3333333333%}.devui-col-xxl-push-14{left:58.3333333333%}.devui-col-xxl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xxl-offset-15{margin-left:62.5%}.devui-col-xxl-pull-15{right:62.5%}.devui-col-xxl-push-15{left:62.5%}.devui-col-xxl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xxl-offset-16{margin-left:66.6666666667%}.devui-col-xxl-pull-16{right:66.6666666667%}.devui-col-xxl-push-16{left:66.6666666667%}.devui-col-xxl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xxl-offset-17{margin-left:70.8333333333%}.devui-col-xxl-pull-17{right:70.8333333333%}.devui-col-xxl-push-17{left:70.8333333333%}.devui-col-xxl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xxl-offset-18{margin-left:75%}.devui-col-xxl-pull-18{right:75%}.devui-col-xxl-push-18{left:75%}.devui-col-xxl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xxl-offset-19{margin-left:79.1666666667%}.devui-col-xxl-pull-19{right:79.1666666667%}.devui-col-xxl-push-19{left:79.1666666667%}.devui-col-xxl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xxl-offset-20{margin-left:83.3333333333%}.devui-col-xxl-pull-20{right:83.3333333333%}.devui-col-xxl-push-20{left:83.3333333333%}.devui-col-xxl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xxl-offset-21{margin-left:87.5%}.devui-col-xxl-pull-21{right:87.5%}.devui-col-xxl-push-21{left:87.5%}.devui-col-xxl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xxl-offset-22{margin-left:91.6666666667%}.devui-col-xxl-pull-22{right:91.6666666667%}.devui-col-xxl-push-22{left:91.6666666667%}.devui-col-xxl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xxl-offset-23{margin-left:95.8333333333%}.devui-col-xxl-pull-23{right:95.8333333333%}.devui-col-xxl-push-23{left:95.8333333333%}.devui-col-xxl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xxl-offset-24{margin-left:100%}.devui-col-xxl-pull-24{right:100%}.devui-col-xxl-push-24{left:100%}.devui-col-xxl-span-24{display:block;flex:0 0 100%;width:100%}}
1
+ .devui-row{display:flex}.devui-row__wrap{flex-wrap:wrap}.devui-row__align--top{align-items:flex-start}.devui-row__align--middle{align-items:center}.devui-row__align--bottom{align-items:flex-end}.devui-row__justify--start{justify-content:flex-start}.devui-row__justify--center{justify-content:center}.devui-row__justify--end{justify-content:flex-end}.devui-row__justify--around{justify-content:space-around}.devui-row__justify--between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col__span--0,.devui-col__xs--span-0{display:none}.devui-col__offset--1{margin-left:4.1666666667%}.devui-col__pull--1{right:4.1666666667%}.devui-col__push--1{left:4.1666666667%}.devui-col__span--1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xs--offset-1{margin-left:4.1666666667%}.devui-col__xs--pull-1{right:4.1666666667%}.devui-col__xs--push-1{left:4.1666666667%}.devui-col__xs--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__offset--2{margin-left:8.3333333333%}.devui-col__pull--2{right:8.3333333333%}.devui-col__push--2{left:8.3333333333%}.devui-col__span--2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xs--offset-2{margin-left:8.3333333333%}.devui-col__xs--pull-2{right:8.3333333333%}.devui-col__xs--push-2{left:8.3333333333%}.devui-col__xs--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__offset--3{margin-left:12.5%}.devui-col__pull--3{right:12.5%}.devui-col__push--3{left:12.5%}.devui-col__span--3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xs--offset-3{margin-left:12.5%}.devui-col__xs--pull-3{right:12.5%}.devui-col__xs--push-3{left:12.5%}.devui-col__xs--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__offset--4{margin-left:16.6666666667%}.devui-col__pull--4{right:16.6666666667%}.devui-col__push--4{left:16.6666666667%}.devui-col__span--4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xs--offset-4{margin-left:16.6666666667%}.devui-col__xs--pull-4{right:16.6666666667%}.devui-col__xs--push-4{left:16.6666666667%}.devui-col__xs--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__offset--5{margin-left:20.8333333333%}.devui-col__pull--5{right:20.8333333333%}.devui-col__push--5{left:20.8333333333%}.devui-col__span--5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xs--offset-5{margin-left:20.8333333333%}.devui-col__xs--pull-5{right:20.8333333333%}.devui-col__xs--push-5{left:20.8333333333%}.devui-col__xs--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__offset--6{margin-left:25%}.devui-col__pull--6{right:25%}.devui-col__push--6{left:25%}.devui-col__span--6{display:block;flex:0 0 25%;width:25%}.devui-col__xs--offset-6{margin-left:25%}.devui-col__xs--pull-6{right:25%}.devui-col__xs--push-6{left:25%}.devui-col__xs--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__offset--7{margin-left:29.1666666667%}.devui-col__pull--7{right:29.1666666667%}.devui-col__push--7{left:29.1666666667%}.devui-col__span--7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xs--offset-7{margin-left:29.1666666667%}.devui-col__xs--pull-7{right:29.1666666667%}.devui-col__xs--push-7{left:29.1666666667%}.devui-col__xs--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__offset--8{margin-left:33.3333333333%}.devui-col__pull--8{right:33.3333333333%}.devui-col__push--8{left:33.3333333333%}.devui-col__span--8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xs--offset-8{margin-left:33.3333333333%}.devui-col__xs--pull-8{right:33.3333333333%}.devui-col__xs--push-8{left:33.3333333333%}.devui-col__xs--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__offset--9{margin-left:37.5%}.devui-col__pull--9{right:37.5%}.devui-col__push--9{left:37.5%}.devui-col__span--9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xs--offset-9{margin-left:37.5%}.devui-col__xs--pull-9{right:37.5%}.devui-col__xs--push-9{left:37.5%}.devui-col__xs--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__offset--10{margin-left:41.6666666667%}.devui-col__pull--10{right:41.6666666667%}.devui-col__push--10{left:41.6666666667%}.devui-col__span--10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xs--offset-10{margin-left:41.6666666667%}.devui-col__xs--pull-10{right:41.6666666667%}.devui-col__xs--push-10{left:41.6666666667%}.devui-col__xs--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__offset--11{margin-left:45.8333333333%}.devui-col__pull--11{right:45.8333333333%}.devui-col__push--11{left:45.8333333333%}.devui-col__span--11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xs--offset-11{margin-left:45.8333333333%}.devui-col__xs--pull-11{right:45.8333333333%}.devui-col__xs--push-11{left:45.8333333333%}.devui-col__xs--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__offset--12{margin-left:50%}.devui-col__pull--12{right:50%}.devui-col__push--12{left:50%}.devui-col__span--12{display:block;flex:0 0 50%;width:50%}.devui-col__xs--offset-12{margin-left:50%}.devui-col__xs--pull-12{right:50%}.devui-col__xs--push-12{left:50%}.devui-col__xs--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__offset--13{margin-left:54.1666666667%}.devui-col__pull--13{right:54.1666666667%}.devui-col__push--13{left:54.1666666667%}.devui-col__span--13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xs--offset-13{margin-left:54.1666666667%}.devui-col__xs--pull-13{right:54.1666666667%}.devui-col__xs--push-13{left:54.1666666667%}.devui-col__xs--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__offset--14{margin-left:58.3333333333%}.devui-col__pull--14{right:58.3333333333%}.devui-col__push--14{left:58.3333333333%}.devui-col__span--14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xs--offset-14{margin-left:58.3333333333%}.devui-col__xs--pull-14{right:58.3333333333%}.devui-col__xs--push-14{left:58.3333333333%}.devui-col__xs--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__offset--15{margin-left:62.5%}.devui-col__pull--15{right:62.5%}.devui-col__push--15{left:62.5%}.devui-col__span--15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xs--offset-15{margin-left:62.5%}.devui-col__xs--pull-15{right:62.5%}.devui-col__xs--push-15{left:62.5%}.devui-col__xs--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__offset--16{margin-left:66.6666666667%}.devui-col__pull--16{right:66.6666666667%}.devui-col__push--16{left:66.6666666667%}.devui-col__span--16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xs--offset-16{margin-left:66.6666666667%}.devui-col__xs--pull-16{right:66.6666666667%}.devui-col__xs--push-16{left:66.6666666667%}.devui-col__xs--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__offset--17{margin-left:70.8333333333%}.devui-col__pull--17{right:70.8333333333%}.devui-col__push--17{left:70.8333333333%}.devui-col__span--17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xs--offset-17{margin-left:70.8333333333%}.devui-col__xs--pull-17{right:70.8333333333%}.devui-col__xs--push-17{left:70.8333333333%}.devui-col__xs--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__offset--18{margin-left:75%}.devui-col__pull--18{right:75%}.devui-col__push--18{left:75%}.devui-col__span--18{display:block;flex:0 0 75%;width:75%}.devui-col__xs--offset-18{margin-left:75%}.devui-col__xs--pull-18{right:75%}.devui-col__xs--push-18{left:75%}.devui-col__xs--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__offset--19{margin-left:79.1666666667%}.devui-col__pull--19{right:79.1666666667%}.devui-col__push--19{left:79.1666666667%}.devui-col__span--19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xs--offset-19{margin-left:79.1666666667%}.devui-col__xs--pull-19{right:79.1666666667%}.devui-col__xs--push-19{left:79.1666666667%}.devui-col__xs--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__offset--20{margin-left:83.3333333333%}.devui-col__pull--20{right:83.3333333333%}.devui-col__push--20{left:83.3333333333%}.devui-col__span--20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xs--offset-20{margin-left:83.3333333333%}.devui-col__xs--pull-20{right:83.3333333333%}.devui-col__xs--push-20{left:83.3333333333%}.devui-col__xs--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__offset--21{margin-left:87.5%}.devui-col__pull--21{right:87.5%}.devui-col__push--21{left:87.5%}.devui-col__span--21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xs--offset-21{margin-left:87.5%}.devui-col__xs--pull-21{right:87.5%}.devui-col__xs--push-21{left:87.5%}.devui-col__xs--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__offset--22{margin-left:91.6666666667%}.devui-col__pull--22{right:91.6666666667%}.devui-col__push--22{left:91.6666666667%}.devui-col__span--22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xs--offset-22{margin-left:91.6666666667%}.devui-col__xs--pull-22{right:91.6666666667%}.devui-col__xs--push-22{left:91.6666666667%}.devui-col__xs--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__offset--23{margin-left:95.8333333333%}.devui-col__pull--23{right:95.8333333333%}.devui-col__push--23{left:95.8333333333%}.devui-col__span--23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xs--offset-23{margin-left:95.8333333333%}.devui-col__xs--pull-23{right:95.8333333333%}.devui-col__xs--push-23{left:95.8333333333%}.devui-col__xs--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__offset--24{margin-left:100%}.devui-col__pull--24{right:100%}.devui-col__push--24{left:100%}.devui-col__span--24{display:block;flex:0 0 100%;width:100%}.devui-col__xs--offset-24{margin-left:100%}.devui-col__xs--pull-24{right:100%}.devui-col__xs--push-24{left:100%}.devui-col__xs--span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col__sm--span-0{display:none}.devui-col__sm--offset-1{margin-left:4.1666666667%}.devui-col__sm--pull-1{right:4.1666666667%}.devui-col__sm--push-1{left:4.1666666667%}.devui-col__sm--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__sm--offset-2{margin-left:8.3333333333%}.devui-col__sm--pull-2{right:8.3333333333%}.devui-col__sm--push-2{left:8.3333333333%}.devui-col__sm--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__sm--offset-3{margin-left:12.5%}.devui-col__sm--pull-3{right:12.5%}.devui-col__sm--push-3{left:12.5%}.devui-col__sm--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__sm--offset-4{margin-left:16.6666666667%}.devui-col__sm--pull-4{right:16.6666666667%}.devui-col__sm--push-4{left:16.6666666667%}.devui-col__sm--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__sm--offset-5{margin-left:20.8333333333%}.devui-col__sm--pull-5{right:20.8333333333%}.devui-col__sm--push-5{left:20.8333333333%}.devui-col__sm--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__sm--offset-6{margin-left:25%}.devui-col__sm--pull-6{right:25%}.devui-col__sm--push-6{left:25%}.devui-col__sm--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__sm--offset-7{margin-left:29.1666666667%}.devui-col__sm--pull-7{right:29.1666666667%}.devui-col__sm--push-7{left:29.1666666667%}.devui-col__sm--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__sm--offset-8{margin-left:33.3333333333%}.devui-col__sm--pull-8{right:33.3333333333%}.devui-col__sm--push-8{left:33.3333333333%}.devui-col__sm--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__sm--offset-9{margin-left:37.5%}.devui-col__sm--pull-9{right:37.5%}.devui-col__sm--push-9{left:37.5%}.devui-col__sm--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__sm--offset-10{margin-left:41.6666666667%}.devui-col__sm--pull-10{right:41.6666666667%}.devui-col__sm--push-10{left:41.6666666667%}.devui-col__sm--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__sm--offset-11{margin-left:45.8333333333%}.devui-col__sm--pull-11{right:45.8333333333%}.devui-col__sm--push-11{left:45.8333333333%}.devui-col__sm--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__sm--offset-12{margin-left:50%}.devui-col__sm--pull-12{right:50%}.devui-col__sm--push-12{left:50%}.devui-col__sm--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__sm--offset-13{margin-left:54.1666666667%}.devui-col__sm--pull-13{right:54.1666666667%}.devui-col__sm--push-13{left:54.1666666667%}.devui-col__sm--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__sm--offset-14{margin-left:58.3333333333%}.devui-col__sm--pull-14{right:58.3333333333%}.devui-col__sm--push-14{left:58.3333333333%}.devui-col__sm--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__sm--offset-15{margin-left:62.5%}.devui-col__sm--pull-15{right:62.5%}.devui-col__sm--push-15{left:62.5%}.devui-col__sm--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__sm--offset-16{margin-left:66.6666666667%}.devui-col__sm--pull-16{right:66.6666666667%}.devui-col__sm--push-16{left:66.6666666667%}.devui-col__sm--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__sm--offset-17{margin-left:70.8333333333%}.devui-col__sm--pull-17{right:70.8333333333%}.devui-col__sm--push-17{left:70.8333333333%}.devui-col__sm--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__sm--offset-18{margin-left:75%}.devui-col__sm--pull-18{right:75%}.devui-col__sm--push-18{left:75%}.devui-col__sm--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__sm--offset-19{margin-left:79.1666666667%}.devui-col__sm--pull-19{right:79.1666666667%}.devui-col__sm--push-19{left:79.1666666667%}.devui-col__sm--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__sm--offset-20{margin-left:83.3333333333%}.devui-col__sm--pull-20{right:83.3333333333%}.devui-col__sm--push-20{left:83.3333333333%}.devui-col__sm--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__sm--offset-21{margin-left:87.5%}.devui-col__sm--pull-21{right:87.5%}.devui-col__sm--push-21{left:87.5%}.devui-col__sm--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__sm--offset-22{margin-left:91.6666666667%}.devui-col__sm--pull-22{right:91.6666666667%}.devui-col__sm--push-22{left:91.6666666667%}.devui-col__sm--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__sm--offset-23{margin-left:95.8333333333%}.devui-col__sm--pull-23{right:95.8333333333%}.devui-col__sm--push-23{left:95.8333333333%}.devui-col__sm--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__sm--offset-24{margin-left:100%}.devui-col__sm--pull-24{right:100%}.devui-col__sm--push-24{left:100%}.devui-col__sm--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col__md--span-0{display:none}.devui-col__md--offset-1{margin-left:4.1666666667%}.devui-col__md--pull-1{right:4.1666666667%}.devui-col__md--push-1{left:4.1666666667%}.devui-col__md--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__md--offset-2{margin-left:8.3333333333%}.devui-col__md--pull-2{right:8.3333333333%}.devui-col__md--push-2{left:8.3333333333%}.devui-col__md--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__md--offset-3{margin-left:12.5%}.devui-col__md--pull-3{right:12.5%}.devui-col__md--push-3{left:12.5%}.devui-col__md--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__md--offset-4{margin-left:16.6666666667%}.devui-col__md--pull-4{right:16.6666666667%}.devui-col__md--push-4{left:16.6666666667%}.devui-col__md--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__md--offset-5{margin-left:20.8333333333%}.devui-col__md--pull-5{right:20.8333333333%}.devui-col__md--push-5{left:20.8333333333%}.devui-col__md--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__md--offset-6{margin-left:25%}.devui-col__md--pull-6{right:25%}.devui-col__md--push-6{left:25%}.devui-col__md--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__md--offset-7{margin-left:29.1666666667%}.devui-col__md--pull-7{right:29.1666666667%}.devui-col__md--push-7{left:29.1666666667%}.devui-col__md--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__md--offset-8{margin-left:33.3333333333%}.devui-col__md--pull-8{right:33.3333333333%}.devui-col__md--push-8{left:33.3333333333%}.devui-col__md--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__md--offset-9{margin-left:37.5%}.devui-col__md--pull-9{right:37.5%}.devui-col__md--push-9{left:37.5%}.devui-col__md--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__md--offset-10{margin-left:41.6666666667%}.devui-col__md--pull-10{right:41.6666666667%}.devui-col__md--push-10{left:41.6666666667%}.devui-col__md--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__md--offset-11{margin-left:45.8333333333%}.devui-col__md--pull-11{right:45.8333333333%}.devui-col__md--push-11{left:45.8333333333%}.devui-col__md--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__md--offset-12{margin-left:50%}.devui-col__md--pull-12{right:50%}.devui-col__md--push-12{left:50%}.devui-col__md--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__md--offset-13{margin-left:54.1666666667%}.devui-col__md--pull-13{right:54.1666666667%}.devui-col__md--push-13{left:54.1666666667%}.devui-col__md--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__md--offset-14{margin-left:58.3333333333%}.devui-col__md--pull-14{right:58.3333333333%}.devui-col__md--push-14{left:58.3333333333%}.devui-col__md--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__md--offset-15{margin-left:62.5%}.devui-col__md--pull-15{right:62.5%}.devui-col__md--push-15{left:62.5%}.devui-col__md--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__md--offset-16{margin-left:66.6666666667%}.devui-col__md--pull-16{right:66.6666666667%}.devui-col__md--push-16{left:66.6666666667%}.devui-col__md--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__md--offset-17{margin-left:70.8333333333%}.devui-col__md--pull-17{right:70.8333333333%}.devui-col__md--push-17{left:70.8333333333%}.devui-col__md--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__md--offset-18{margin-left:75%}.devui-col__md--pull-18{right:75%}.devui-col__md--push-18{left:75%}.devui-col__md--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__md--offset-19{margin-left:79.1666666667%}.devui-col__md--pull-19{right:79.1666666667%}.devui-col__md--push-19{left:79.1666666667%}.devui-col__md--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__md--offset-20{margin-left:83.3333333333%}.devui-col__md--pull-20{right:83.3333333333%}.devui-col__md--push-20{left:83.3333333333%}.devui-col__md--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__md--offset-21{margin-left:87.5%}.devui-col__md--pull-21{right:87.5%}.devui-col__md--push-21{left:87.5%}.devui-col__md--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__md--offset-22{margin-left:91.6666666667%}.devui-col__md--pull-22{right:91.6666666667%}.devui-col__md--push-22{left:91.6666666667%}.devui-col__md--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__md--offset-23{margin-left:95.8333333333%}.devui-col__md--pull-23{right:95.8333333333%}.devui-col__md--push-23{left:95.8333333333%}.devui-col__md--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__md--offset-24{margin-left:100%}.devui-col__md--pull-24{right:100%}.devui-col__md--push-24{left:100%}.devui-col__md--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col__lg--span-0{display:none}.devui-col__lg--offset-1{margin-left:4.1666666667%}.devui-col__lg--pull-1{right:4.1666666667%}.devui-col__lg--push-1{left:4.1666666667%}.devui-col__lg--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__lg--offset-2{margin-left:8.3333333333%}.devui-col__lg--pull-2{right:8.3333333333%}.devui-col__lg--push-2{left:8.3333333333%}.devui-col__lg--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__lg--offset-3{margin-left:12.5%}.devui-col__lg--pull-3{right:12.5%}.devui-col__lg--push-3{left:12.5%}.devui-col__lg--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__lg--offset-4{margin-left:16.6666666667%}.devui-col__lg--pull-4{right:16.6666666667%}.devui-col__lg--push-4{left:16.6666666667%}.devui-col__lg--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__lg--offset-5{margin-left:20.8333333333%}.devui-col__lg--pull-5{right:20.8333333333%}.devui-col__lg--push-5{left:20.8333333333%}.devui-col__lg--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__lg--offset-6{margin-left:25%}.devui-col__lg--pull-6{right:25%}.devui-col__lg--push-6{left:25%}.devui-col__lg--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__lg--offset-7{margin-left:29.1666666667%}.devui-col__lg--pull-7{right:29.1666666667%}.devui-col__lg--push-7{left:29.1666666667%}.devui-col__lg--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__lg--offset-8{margin-left:33.3333333333%}.devui-col__lg--pull-8{right:33.3333333333%}.devui-col__lg--push-8{left:33.3333333333%}.devui-col__lg--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__lg--offset-9{margin-left:37.5%}.devui-col__lg--pull-9{right:37.5%}.devui-col__lg--push-9{left:37.5%}.devui-col__lg--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__lg--offset-10{margin-left:41.6666666667%}.devui-col__lg--pull-10{right:41.6666666667%}.devui-col__lg--push-10{left:41.6666666667%}.devui-col__lg--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__lg--offset-11{margin-left:45.8333333333%}.devui-col__lg--pull-11{right:45.8333333333%}.devui-col__lg--push-11{left:45.8333333333%}.devui-col__lg--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__lg--offset-12{margin-left:50%}.devui-col__lg--pull-12{right:50%}.devui-col__lg--push-12{left:50%}.devui-col__lg--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__lg--offset-13{margin-left:54.1666666667%}.devui-col__lg--pull-13{right:54.1666666667%}.devui-col__lg--push-13{left:54.1666666667%}.devui-col__lg--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__lg--offset-14{margin-left:58.3333333333%}.devui-col__lg--pull-14{right:58.3333333333%}.devui-col__lg--push-14{left:58.3333333333%}.devui-col__lg--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__lg--offset-15{margin-left:62.5%}.devui-col__lg--pull-15{right:62.5%}.devui-col__lg--push-15{left:62.5%}.devui-col__lg--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__lg--offset-16{margin-left:66.6666666667%}.devui-col__lg--pull-16{right:66.6666666667%}.devui-col__lg--push-16{left:66.6666666667%}.devui-col__lg--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__lg--offset-17{margin-left:70.8333333333%}.devui-col__lg--pull-17{right:70.8333333333%}.devui-col__lg--push-17{left:70.8333333333%}.devui-col__lg--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__lg--offset-18{margin-left:75%}.devui-col__lg--pull-18{right:75%}.devui-col__lg--push-18{left:75%}.devui-col__lg--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__lg--offset-19{margin-left:79.1666666667%}.devui-col__lg--pull-19{right:79.1666666667%}.devui-col__lg--push-19{left:79.1666666667%}.devui-col__lg--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__lg--offset-20{margin-left:83.3333333333%}.devui-col__lg--pull-20{right:83.3333333333%}.devui-col__lg--push-20{left:83.3333333333%}.devui-col__lg--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__lg--offset-21{margin-left:87.5%}.devui-col__lg--pull-21{right:87.5%}.devui-col__lg--push-21{left:87.5%}.devui-col__lg--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__lg--offset-22{margin-left:91.6666666667%}.devui-col__lg--pull-22{right:91.6666666667%}.devui-col__lg--push-22{left:91.6666666667%}.devui-col__lg--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__lg--offset-23{margin-left:95.8333333333%}.devui-col__lg--pull-23{right:95.8333333333%}.devui-col__lg--push-23{left:95.8333333333%}.devui-col__lg--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__lg--offset-24{margin-left:100%}.devui-col__lg--pull-24{right:100%}.devui-col__lg--push-24{left:100%}.devui-col__lg--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col__xl--span-0{display:none}.devui-col__xl--offset-1{margin-left:4.1666666667%}.devui-col__xl--pull-1{right:4.1666666667%}.devui-col__xl--push-1{left:4.1666666667%}.devui-col__xl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xl--offset-2{margin-left:8.3333333333%}.devui-col__xl--pull-2{right:8.3333333333%}.devui-col__xl--push-2{left:8.3333333333%}.devui-col__xl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xl--offset-3{margin-left:12.5%}.devui-col__xl--pull-3{right:12.5%}.devui-col__xl--push-3{left:12.5%}.devui-col__xl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xl--offset-4{margin-left:16.6666666667%}.devui-col__xl--pull-4{right:16.6666666667%}.devui-col__xl--push-4{left:16.6666666667%}.devui-col__xl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xl--offset-5{margin-left:20.8333333333%}.devui-col__xl--pull-5{right:20.8333333333%}.devui-col__xl--push-5{left:20.8333333333%}.devui-col__xl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xl--offset-6{margin-left:25%}.devui-col__xl--pull-6{right:25%}.devui-col__xl--push-6{left:25%}.devui-col__xl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xl--offset-7{margin-left:29.1666666667%}.devui-col__xl--pull-7{right:29.1666666667%}.devui-col__xl--push-7{left:29.1666666667%}.devui-col__xl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xl--offset-8{margin-left:33.3333333333%}.devui-col__xl--pull-8{right:33.3333333333%}.devui-col__xl--push-8{left:33.3333333333%}.devui-col__xl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xl--offset-9{margin-left:37.5%}.devui-col__xl--pull-9{right:37.5%}.devui-col__xl--push-9{left:37.5%}.devui-col__xl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xl--offset-10{margin-left:41.6666666667%}.devui-col__xl--pull-10{right:41.6666666667%}.devui-col__xl--push-10{left:41.6666666667%}.devui-col__xl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xl--offset-11{margin-left:45.8333333333%}.devui-col__xl--pull-11{right:45.8333333333%}.devui-col__xl--push-11{left:45.8333333333%}.devui-col__xl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xl--offset-12{margin-left:50%}.devui-col__xl--pull-12{right:50%}.devui-col__xl--push-12{left:50%}.devui-col__xl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xl--offset-13{margin-left:54.1666666667%}.devui-col__xl--pull-13{right:54.1666666667%}.devui-col__xl--push-13{left:54.1666666667%}.devui-col__xl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xl--offset-14{margin-left:58.3333333333%}.devui-col__xl--pull-14{right:58.3333333333%}.devui-col__xl--push-14{left:58.3333333333%}.devui-col__xl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xl--offset-15{margin-left:62.5%}.devui-col__xl--pull-15{right:62.5%}.devui-col__xl--push-15{left:62.5%}.devui-col__xl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xl--offset-16{margin-left:66.6666666667%}.devui-col__xl--pull-16{right:66.6666666667%}.devui-col__xl--push-16{left:66.6666666667%}.devui-col__xl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xl--offset-17{margin-left:70.8333333333%}.devui-col__xl--pull-17{right:70.8333333333%}.devui-col__xl--push-17{left:70.8333333333%}.devui-col__xl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xl--offset-18{margin-left:75%}.devui-col__xl--pull-18{right:75%}.devui-col__xl--push-18{left:75%}.devui-col__xl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xl--offset-19{margin-left:79.1666666667%}.devui-col__xl--pull-19{right:79.1666666667%}.devui-col__xl--push-19{left:79.1666666667%}.devui-col__xl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xl--offset-20{margin-left:83.3333333333%}.devui-col__xl--pull-20{right:83.3333333333%}.devui-col__xl--push-20{left:83.3333333333%}.devui-col__xl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xl--offset-21{margin-left:87.5%}.devui-col__xl--pull-21{right:87.5%}.devui-col__xl--push-21{left:87.5%}.devui-col__xl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xl--offset-22{margin-left:91.6666666667%}.devui-col__xl--pull-22{right:91.6666666667%}.devui-col__xl--push-22{left:91.6666666667%}.devui-col__xl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xl--offset-23{margin-left:95.8333333333%}.devui-col__xl--pull-23{right:95.8333333333%}.devui-col__xl--push-23{left:95.8333333333%}.devui-col__xl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xl--offset-24{margin-left:100%}.devui-col__xl--pull-24{right:100%}.devui-col__xl--push-24{left:100%}.devui-col__xl--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col__xxl--span-0{display:none}.devui-col__xxl--offset-1{margin-left:4.1666666667%}.devui-col__xxl--pull-1{right:4.1666666667%}.devui-col__xxl--push-1{left:4.1666666667%}.devui-col__xxl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xxl--offset-2{margin-left:8.3333333333%}.devui-col__xxl--pull-2{right:8.3333333333%}.devui-col__xxl--push-2{left:8.3333333333%}.devui-col__xxl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xxl--offset-3{margin-left:12.5%}.devui-col__xxl--pull-3{right:12.5%}.devui-col__xxl--push-3{left:12.5%}.devui-col__xxl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xxl--offset-4{margin-left:16.6666666667%}.devui-col__xxl--pull-4{right:16.6666666667%}.devui-col__xxl--push-4{left:16.6666666667%}.devui-col__xxl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xxl--offset-5{margin-left:20.8333333333%}.devui-col__xxl--pull-5{right:20.8333333333%}.devui-col__xxl--push-5{left:20.8333333333%}.devui-col__xxl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xxl--offset-6{margin-left:25%}.devui-col__xxl--pull-6{right:25%}.devui-col__xxl--push-6{left:25%}.devui-col__xxl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xxl--offset-7{margin-left:29.1666666667%}.devui-col__xxl--pull-7{right:29.1666666667%}.devui-col__xxl--push-7{left:29.1666666667%}.devui-col__xxl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xxl--offset-8{margin-left:33.3333333333%}.devui-col__xxl--pull-8{right:33.3333333333%}.devui-col__xxl--push-8{left:33.3333333333%}.devui-col__xxl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xxl--offset-9{margin-left:37.5%}.devui-col__xxl--pull-9{right:37.5%}.devui-col__xxl--push-9{left:37.5%}.devui-col__xxl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xxl--offset-10{margin-left:41.6666666667%}.devui-col__xxl--pull-10{right:41.6666666667%}.devui-col__xxl--push-10{left:41.6666666667%}.devui-col__xxl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xxl--offset-11{margin-left:45.8333333333%}.devui-col__xxl--pull-11{right:45.8333333333%}.devui-col__xxl--push-11{left:45.8333333333%}.devui-col__xxl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xxl--offset-12{margin-left:50%}.devui-col__xxl--pull-12{right:50%}.devui-col__xxl--push-12{left:50%}.devui-col__xxl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xxl--offset-13{margin-left:54.1666666667%}.devui-col__xxl--pull-13{right:54.1666666667%}.devui-col__xxl--push-13{left:54.1666666667%}.devui-col__xxl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xxl--offset-14{margin-left:58.3333333333%}.devui-col__xxl--pull-14{right:58.3333333333%}.devui-col__xxl--push-14{left:58.3333333333%}.devui-col__xxl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xxl--offset-15{margin-left:62.5%}.devui-col__xxl--pull-15{right:62.5%}.devui-col__xxl--push-15{left:62.5%}.devui-col__xxl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xxl--offset-16{margin-left:66.6666666667%}.devui-col__xxl--pull-16{right:66.6666666667%}.devui-col__xxl--push-16{left:66.6666666667%}.devui-col__xxl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xxl--offset-17{margin-left:70.8333333333%}.devui-col__xxl--pull-17{right:70.8333333333%}.devui-col__xxl--push-17{left:70.8333333333%}.devui-col__xxl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xxl--offset-18{margin-left:75%}.devui-col__xxl--pull-18{right:75%}.devui-col__xxl--push-18{left:75%}.devui-col__xxl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xxl--offset-19{margin-left:79.1666666667%}.devui-col__xxl--pull-19{right:79.1666666667%}.devui-col__xxl--push-19{left:79.1666666667%}.devui-col__xxl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xxl--offset-20{margin-left:83.3333333333%}.devui-col__xxl--pull-20{right:83.3333333333%}.devui-col__xxl--push-20{left:83.3333333333%}.devui-col__xxl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xxl--offset-21{margin-left:87.5%}.devui-col__xxl--pull-21{right:87.5%}.devui-col__xxl--push-21{left:87.5%}.devui-col__xxl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xxl--offset-22{margin-left:91.6666666667%}.devui-col__xxl--pull-22{right:91.6666666667%}.devui-col__xxl--push-22{left:91.6666666667%}.devui-col__xxl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xxl--offset-23{margin-left:95.8333333333%}.devui-col__xxl--pull-23{right:95.8333333333%}.devui-col__xxl--push-23{left:95.8333333333%}.devui-col__xxl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xxl--offset-24{margin-left:100%}.devui-col__xxl--pull-24{right:100%}.devui-col__xxl--push-24{left:100%}.devui-col__xxl--span-24{display:block;flex:0 0 100%;width:100%}}