UNPKG

@aimake/nanod

Version:

## 设计模式 NANO DESIGN 是面向于企业级中台化应用的解决方案。服务于 ToB 和 ToE 类型的单页应用,应用于各产品中从而产出了一套设计及前端规范。

178 lines (177 loc) 4.32 kB
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ .ant-slider { font-size: 12px; font-variant: tabular-nums; line-height: 1.5; color: #41465F; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; margin: 14px 6px 10px; padding: 4px 0; height: 12px; cursor: pointer; -ms-touch-action: none; touch-action: none; } .ant-slider-vertical { width: 12px; height: 100%; margin: 6px 10px; padding: 0 4px; } .ant-slider-vertical .ant-slider-rail { height: 100%; width: 4px; } .ant-slider-vertical .ant-slider-track { width: 4px; } .ant-slider-vertical .ant-slider-handle { margin-left: -5px; margin-bottom: -7px; } .ant-slider-vertical .ant-slider-mark { top: 0; left: 12px; width: 18px; height: 100%; } .ant-slider-vertical .ant-slider-mark-text { left: 4px; white-space: nowrap; } .ant-slider-vertical .ant-slider-step { width: 4px; height: 100%; } .ant-slider-vertical .ant-slider-dot { top: auto; left: 2px; margin-bottom: -4px; } .ant-slider-with-marks { margin-bottom: 28px; } .ant-slider-rail { position: absolute; width: 100%; height: 4px; border-radius: 2px; background-color: #DEE2ED; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .ant-slider-track { position: absolute; height: 4px; border-radius: 0px; background-color: #4178ff; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .ant-slider-handle { position: absolute; margin-left: -7px; margin-top: -5px; width: 14px; height: 14px; cursor: pointer; border-radius: 50%; border: solid 2px #4178ff; background-color: #fff; -webkit-box-shadow: 0; box-shadow: 0; -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.6s, -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); transition: border-color 0.3s, -webkit-box-shadow 0.6s, -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-box-shadow 0.6s, -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .ant-slider-handle:focus { border-color: #6793ff; -webkit-box-shadow: 0 0 0 5px #a0bcff; box-shadow: 0 0 0 5px #a0bcff; outline: none; } .ant-slider-handle.ant-tooltip-open { border-color: #4178ff; } .ant-slider:hover .ant-slider-rail { background-color: #DEE2ED; } .ant-slider:hover .ant-slider-track { background-color: #4178ff; } .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) { border-color: #4178ff; } .ant-slider-mark { position: absolute; top: 14px; left: 0; width: 100%; font-size: 12px; } .ant-slider-mark-text { position: absolute; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; color: #8C94A8; } .ant-slider-mark-text-active { color: #41465F; } .ant-slider-step { position: absolute; width: 100%; height: 4px; background: transparent; } .ant-slider-dot { position: absolute; top: -2px; margin-left: -4px; width: 8px; height: 8px; border: 2px solid #F5F6FA; background-color: #fff; cursor: pointer; border-radius: 50%; vertical-align: middle; } .ant-slider-dot:first-child { margin-left: -4px; } .ant-slider-dot:last-child { margin-left: -4px; } .ant-slider-dot-active { border-color: #4178ff; } .ant-slider-disabled { cursor: not-allowed; } .ant-slider-disabled .ant-slider-track { background-color: #C7CFDE !important; } .ant-slider-disabled .ant-slider-handle, .ant-slider-disabled .ant-slider-dot { border-color: #C7CFDE !important; background-color: #fff; cursor: not-allowed; -webkit-box-shadow: none; box-shadow: none; } .ant-slider-disabled .ant-slider-mark-text, .ant-slider-disabled .ant-slider-dot { cursor: not-allowed !important; } @icon-url : https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i;