Blame view

node_modules/element-ui/packages/theme-chalk/src/date-picker/picker.scss 3.41 KB
7820380e   “wangming”   1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
  @import "../mixins/mixins";
  @import "../common/var";
  @import "../common/transition";
  
  @include b(date-editor) {
    position: relative;
    display: inline-block;
    text-align: left;
  
    &.el-input,
    &.el-input__inner {
      width: 220px;
    }
  
    @include m((monthrange)) {
      &.el-input,
      &.el-input__inner {
        width: 300px;
      }
    }
  
    @include m((daterange, timerange)) {
      &.el-input,
      &.el-input__inner {
        width: 350px;
      }
    }
  
    @include m(datetimerange) {
      &.el-input,
      &.el-input__inner {
        width: 400px;
      }
    }
  
    @include m(dates) {
      .el-input__inner {
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  
    .el-icon-circle-close {
      cursor: pointer;
    }
  
    .el-range__icon {
      font-size: 14px;
      margin-left: -5px;
      color: $--color-text-placeholder;
      float: left;
      line-height: 32px;
    }
  
    .el-range-input {
      appearance: none;
      border: none;
      outline: none;
      display: inline-block;
      height: 100%;
      margin: 0;
      padding: 0;
      width: 39%;
      text-align: center;
      font-size: $--font-size-base;
      color: $--color-text-regular;
  
      &::placeholder {
        color: $--color-text-placeholder;
      }
    }
  
    .el-range-separator {
      display: inline-block;
      height: 100%;
      padding: 0 5px;
      margin: 0;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      width: 5%;
      color: $--color-text-primary;
    }
  
    .el-range__close-icon {
      font-size: 14px;
      color: $--color-text-placeholder;
      width: 25px;
      display: inline-block;
      float: right;
      line-height: 32px;
    }
  }
  
  @include b(range-editor) {
    &.el-input__inner {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
    }
  
    .el-range-input {
      line-height: 1;
    }
  
    @include when(active) {
      border-color: $--color-primary;
  
      &:hover {
        border-color: $--color-primary;
      }
    }
  
    @include m(medium) {
      &.el-input__inner {
        height: $--input-medium-height;
      }
  
      .el-range-separator {
        line-height: 28px;
        font-size: $--input-medium-font-size;
      }
  
      .el-range-input {
        font-size: $--input-medium-font-size;
      }
  
      .el-range__icon,
      .el-range__close-icon {
        line-height: 28px;
      }
    }
  
    @include m(small) {
      &.el-input__inner {
        height: $--input-small-height;
      }
  
      .el-range-separator {
        line-height: 24px;
        font-size: $--input-small-font-size;
      }
  
      .el-range-input {
        font-size: $--input-small-font-size;
      }
  
      .el-range__icon,
      .el-range__close-icon {
        line-height: 24px;
      }
    }
  
    @include m(mini) {
      &.el-input__inner {
        height: $--input-mini-height;
      }
  
      .el-range-separator {
        line-height: 20px;
        font-size: $--input-mini-font-size;
      }
  
      .el-range-input {
        font-size: $--input-mini-font-size;
      }
  
      .el-range__icon,
      .el-range__close-icon {
        line-height: 20px;
      }
    }
  
    @include when(disabled) {
      background-color: $--input-disabled-fill;
      border-color: $--input-disabled-border;
      color: $--input-disabled-color;
      cursor: not-allowed;
  
      &:hover, &:focus {
        border-color: $--input-disabled-border;
      }
  
      input {
        background-color: $--input-disabled-fill;
        color: $--input-disabled-color;
        cursor: not-allowed;
        &::placeholder {
          color: $--input-disabled-placeholder-color;
        }
      }
  
      .el-range-separator {
        color: $--input-disabled-color;
      }
    }
  }