123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- * {
- box-sizing: border-box;
- }
- .wrapper {
- font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- min-width: 170px;
- font-size: 14px;
- position: relative;
- }
- .container {
- width: 100%;
- cursor: text;
- overflow: hidden;
- }
- .input-disable {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 4;
- cursor: not-allowed;
- }
- .input-wrapper {
- display: inline-block;
- width: 100%;
- height: 32px;
- }
- .input {
- width: 100%;
- height: 32px;
- margin: 0;
- padding: 4px 11px;
- outline: none;
- line-height: 1.5;
- box-sizing: border-box;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.65);
- border: none;
- border-bottom: 1px solid #ccc;
- }
- .disable {
- background-color: #f5f5f5;
- opacity: 1;
- color: rgba(0, 0, 0, 0.25);
- }
- .line {
- width: 100%;
- position: absolute;
- bottom: 0;
- left: 0;
- border-bottom: 1px solid #1890ff;
- transform: translateX(-100%);
- opacity: 0;
- will-change: transfrom;
- transition: transform .1s;
- }
- .container:hover {
- border-bottom: none;
- }
- .container:hover > .line {
- transform: translateX(0);
- opacity: 1;
- }
- .calendar {
- position: absolute;
- margin-top: 8px;
- right: 11px;
- display: inline-block;
- width: 16px;
- height: 16px;
- background-image: url('../../static/icon-calendar.svg');
- background-position: center;
- background-size: 16px 16px;
- opacity: 1;
- transition: opacity .2s;
- }
- .close {
- position: absolute;
- margin-top: 8px;
- right: 11px;
- display: inline-block;
- width: 16px;
- height: 16px;
- background-image: url('../../static/icon-close.svg');
- background-position: center;
- background-size: 16px 16px;
- cursor: pointer;
- opacity: 0;
- transition: opacity .2s;
- }
- .container:hover > .calendar {
- opacity: 0;
- }
- .container:hover > .close {
- opacity: 1;
- }
- .input-disable:hover > .calendar {
- opacity: 1;
- }
- .input-disable:hover > .close {
- opacity: 0;
- }
|