look-ui 1.0.1

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.
@@ -0,0 +1,75 @@
1
+ @import '../index.scss';
2
+ .lookui-input {
3
+ &.el-input--medium {
4
+ .el-input__inner {
5
+ height: 36px;
6
+ line-height: 36px;
7
+ }
8
+ .el-input__icon {
9
+ line-height: 36px;
10
+ }
11
+ }
12
+ &.el-input--small {
13
+ .el-input__inner {
14
+ height: 32px;
15
+ line-height: 32px;
16
+ }
17
+ .el-input__icon {
18
+ line-height: 32px;
19
+ }
20
+ }
21
+ &.el-input--mini {
22
+ .el-input__inner {
23
+ height: 28px;
24
+ line-height: 28px;
25
+ }
26
+ .el-input__icon {
27
+ line-height: 28px;
28
+ }
29
+ }
30
+ input, input[type="text"], input[type="password"]{
31
+ box-sizing: border-box;
32
+ color: #303030;
33
+ border-radius: 0;
34
+ border: 1px solid rgba(217, 217, 217, 1);
35
+ }
36
+ .el-input__inner {
37
+ width: 100%;
38
+ height: 40px;
39
+ line-height: 40px;
40
+ &:focus {
41
+ border: 1px solid $--themeColor !important;
42
+ }
43
+ &::placeholder {
44
+ font-size: 14px;
45
+ color: #bfbfbf;
46
+ }
47
+ }
48
+ .el-input__icon {
49
+ line-height: 40px;
50
+ }
51
+
52
+ .el-input__prefix, .el-input__suffix {
53
+ top: 1px;
54
+ }
55
+ &.is-disabled .el-input__inner {
56
+ background-color: #d9d9d9;
57
+ }
58
+
59
+ .el-textarea__inner {
60
+ padding: 5px 12px;
61
+ line-height: 22px;
62
+ }
63
+ .el-textarea__inner::placeholder {
64
+ color: #bfbfbf;
65
+ font-size: 14px;
66
+ }
67
+ .el-textarea__inner:focus {
68
+ border: 1px solid $--themeColor;
69
+ }
70
+ // avoid "-internal-autofill-selected" style to be applied
71
+ input:-webkit-autofill,
72
+ input:-webkit-autofill:focus {
73
+ transition: background-color 600000s 0s, color 600000s 0s;
74
+ }
75
+ }
@@ -0,0 +1,45 @@
1
+ @import '../index.scss';
2
+ .lookui-input-number {
3
+ &.el-input-number--medium {
4
+ .el-input.el-input--medium {
5
+ .el-input__inner {
6
+ height: 36px;
7
+ line-height: 36px;
8
+ }
9
+ }
10
+ }
11
+ &.el-input-number--small {
12
+ .el-input.el-input--small {
13
+ .el-input__inner {
14
+ height: 32px;
15
+ line-height: 32px;
16
+ }
17
+ }
18
+ }
19
+ &.el-input-number--mini {
20
+ .el-input.el-input--mini {
21
+ .el-input__inner {
22
+ height: 28px;
23
+ line-height: 28px;
24
+ }
25
+ }
26
+ }
27
+ .el-input.is-active .el-input__inner,
28
+ .el-input__inner:focus {
29
+ border-color: $--themeColor;
30
+ }
31
+ input[type='text'] {
32
+ color: #000;
33
+ border-radius: 2px;
34
+ }
35
+ .el-input-number__decrease,
36
+ .el-input-number__increase {
37
+ width: 22px;
38
+ &:hover {
39
+ color: $--themeColor;
40
+ }
41
+ }
42
+ .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
43
+ border-color: $--themeColor;
44
+ }
45
+ }
@@ -0,0 +1,15 @@
1
+ @import '../index.scss';
2
+ .lookui-loading {
3
+ .el-loading-spinner {
4
+ .path {
5
+ stroke: $--themeColor;
6
+ }
7
+ i {
8
+ font-size: 30px;
9
+ color: #fff;
10
+ }
11
+ .el-loading-text {
12
+ color: #fff;
13
+ }
14
+ }
15
+ }
@@ -0,0 +1,43 @@
1
+ @import '../index.scss';
2
+ .lookui-msgbox {
3
+ .el-message-box__header {
4
+ border-bottom: 1px solid #d9d9d9;
5
+ .el-message-box__title {
6
+ color: $--themeColor;
7
+ }
8
+ }
9
+ .el-message-box__content {
10
+ .el-input {
11
+ input {
12
+ &:focus {
13
+ border-color: $--themeColor;
14
+ }
15
+ }
16
+ }
17
+ }
18
+ &.el-message-box--center {
19
+ .el-message-box__header {
20
+ border-bottom: none;
21
+ }
22
+ }
23
+
24
+ .el-button--default {
25
+ color: #666;
26
+ &:hover {
27
+ color: $--themeColor;
28
+ background-color: #f1f4fa;
29
+ border-color: $--themeColor-100;
30
+ }
31
+ }
32
+
33
+ .el-button--primary {
34
+ color: #fff;
35
+ background-color: $--themeColor;
36
+ border-color: $--themeColor;
37
+ &:hover {
38
+ color: #fff;
39
+ background-color: #8493e9;
40
+ border-color: #8493e9;
41
+ }
42
+ }
43
+ }
@@ -0,0 +1,169 @@
1
+ @import '../index.scss';
2
+ .lookui-submenu {
3
+ &.el-submenu {
4
+ &.is-opened {
5
+ .el-submenu__title {
6
+ font-weight: bold !important;
7
+ // color:#333 !important;
8
+ }
9
+ }
10
+ }
11
+ .el-submenu__title:hover {
12
+ background-color: $--themeColor-100 !important;
13
+ color: $--themeColor !important;
14
+ i {
15
+ color: $--themeColor;
16
+ }
17
+ }
18
+ }
19
+
20
+ .lookui-menu-item {
21
+ &:hover {
22
+ background-color: $--themeColor-100 !important;
23
+ color: $--themeColor !important;
24
+ i {
25
+ color: $--themeColor;
26
+ }
27
+ }
28
+ }
29
+
30
+ .lookui-submenu-theme {
31
+ &.el-submenu {
32
+ &.is-opened {
33
+ .el-submenu__title {
34
+ font-weight: bold !important;
35
+ color: #fff !important;
36
+ i {
37
+ color: #fff;
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+
44
+ .lookui-menu-item-theme {
45
+ &:hover {
46
+ color: #fff !important;
47
+ i {
48
+ color: #fff !important;
49
+ }
50
+ }
51
+ }
52
+
53
+ .lookui-submenu-collapse {
54
+ .el-submenu__title {
55
+ i {
56
+ color: #fff;
57
+ }
58
+ }
59
+ }
60
+
61
+ .lookui-submenu-collapse-item {
62
+ &.el-menu-item {
63
+ &.is-active {
64
+ // background-color: #3d5bc9 !important;
65
+ color: #fff;
66
+ }
67
+ i {
68
+ color: #fff;
69
+ }
70
+ }
71
+ }
72
+
73
+ .lookui-submenu-collapse--poppper {
74
+ .el-menu--popup-right-start {
75
+ margin-left: 2px;
76
+ background-color: #fff !important;
77
+ }
78
+ .el-menu--popup {
79
+ padding: 0;
80
+ }
81
+ .el-menu-item {
82
+ height: 40px;
83
+ line-height: 40px;
84
+ padding-left: 38px !important;
85
+ background-color: #fff !important;
86
+ color: #666 !important;
87
+ display: flex;
88
+ align-items: center;
89
+ &:hover {
90
+ background-color: $--themeColor-100 !important;
91
+ color: $--themeColor !important;
92
+ i {
93
+ color: $--themeColor !important;
94
+ }
95
+ }
96
+ }
97
+ }
98
+
99
+ .lookui-menu-item-divider {
100
+ display: block;
101
+ height: 1px ;
102
+ background-color: #ccc;
103
+ margin: 16px 12px 16px 38px;
104
+ }
105
+
106
+ .lookui-aside-menu {
107
+ display: flex;
108
+ .lookui-aside-menu-icons {
109
+ display: flex;
110
+ flex-direction: column;
111
+ justify-content: space-between;
112
+ width: 64px;
113
+ height: 100%;
114
+ background-color: $--themeColor;
115
+ .icon-item {
116
+ height: 56px;
117
+ display: flex;
118
+ justify-content: center;
119
+ align-items: center;
120
+ cursor: pointer;
121
+ i {
122
+ font-size: 20px;
123
+ color: #fff;
124
+ }
125
+ &:hover {
126
+ background-color: rgba(61, 91, 201, .5);
127
+ }
128
+ }
129
+ .actived-icon {
130
+ background-color: rgba(61, 91, 201, 1);
131
+ }
132
+ }
133
+ .lookui-aside-menu-items {
134
+ display: flex;
135
+ flex-direction: column;
136
+ justify-content: space-between;
137
+ width: 208px;
138
+ height: 100%;
139
+ background-color:#ffffff;
140
+ box-shadow:0px 3px 6px rgba(0, 0, 0, 0.16);
141
+ .actived-item {
142
+ background-color: rgba(228, 232, 251, 1);
143
+ color: $--themeColor;
144
+ cursor: pointer;
145
+ border-right: 2px solid $--themeColor;
146
+ }
147
+ .menu-item {
148
+ height: 56px;
149
+ line-height: 56px;
150
+ padding-left: 40px;
151
+ &:hover {
152
+ background-color: rgba(228, 232, 251, .5);
153
+ color: $--themeColor;
154
+ cursor: pointer;
155
+ }
156
+ }
157
+ .items-fold {
158
+ height: 56px;
159
+ display: flex;
160
+ justify-content: flex-end;
161
+ align-items: center;
162
+ margin-right: 20px;
163
+ cursor: pointer;
164
+ i {
165
+ font-size: 20px;
166
+ }
167
+ }
168
+ }
169
+ }
@@ -0,0 +1,10 @@
1
+ @import '../index.scss';
2
+ .lookui-notification {
3
+ .el-notification__title {
4
+ color: $--themeColor;
5
+ font-weight: normal;
6
+ }
7
+ h2 {
8
+ border-bottom: none;
9
+ }
10
+ }
@@ -0,0 +1,39 @@
1
+ @import '../index.scss';
2
+ .lookui-page-header-auxiliary-text {
3
+ display: flex;
4
+ padding: 16px;
5
+ &.white-bg {
6
+ background-color: #fff;
7
+ }
8
+ &.theme-bg {
9
+ background-color: $--themeColor;
10
+ color: #fff;
11
+ }
12
+ .right {
13
+ padding-left: 16px;
14
+ border-left: 1px solid #d9d9d9;
15
+ margin-left: 16px;
16
+ .title {
17
+ font-size: 18px;
18
+ }
19
+ .sub-title {
20
+ font-size: 14px;
21
+ margin-top: 8px;
22
+ }
23
+ }
24
+ }
25
+
26
+ .lookui-page-header {
27
+ background-color: $--themeColor;
28
+ padding: 14px;
29
+ &.white-bg {
30
+ background-color: #fff;
31
+ }
32
+ &.theme-bg {
33
+ background-color: $--themeColor;
34
+ color: #fff;
35
+ .el-page-header__content {
36
+ color: #fff;
37
+ }
38
+ }
39
+ }
@@ -0,0 +1,40 @@
1
+ @import '../index.scss';
2
+
3
+ .lookui-pagination {
4
+ .el-pager li {
5
+ &.active,
6
+ &:hover {
7
+ color: $--themeColor;
8
+ }
9
+ }
10
+ button:hover {
11
+ color: $--themeColor;
12
+ }
13
+ &.is-background .el-pager li:not(.disabled) {
14
+ &.active,
15
+ &:hover {
16
+ background-color: $--themeColor;
17
+ color: #fff;
18
+ }
19
+ }
20
+ .el-pagination__sizes .el-input .el-input__inner:hover {
21
+ border-color: $--themeColor;
22
+ }
23
+ .el-select .el-input.is-focus .el-input__inner {
24
+ border-color: $--themeColor;
25
+ }
26
+ .el-select .el-input__inner:focus {
27
+ border-color: $--themeColor;
28
+ }
29
+ .el-pagination__jump {
30
+ .el-input__inner:focus {
31
+ border-color: $--themeColor;
32
+ outline: 0;
33
+ }
34
+ }
35
+ }
36
+
37
+ .el-select-dropdown__item.selected {
38
+ color: $--themeColor;
39
+ font-weight: 700;
40
+ }
@@ -0,0 +1,17 @@
1
+ @import '../index.scss';
2
+ .lookui-picker {
3
+ &.el-input.is-active .el-input__inner {
4
+ border-color: $--themeColor;
5
+ }
6
+ .el-input__inner {
7
+ &:focus {
8
+ border-color: $--themeColor;
9
+ }
10
+ }
11
+ &.el-range-editor.is-active {
12
+ border-color: $--themeColor;
13
+ &:hover {
14
+ border-color: $--themeColor;
15
+ }
16
+ }
17
+ }
@@ -0,0 +1,23 @@
1
+ @import '../index.scss';
2
+ .lookui-popover {
3
+ &.el-popover {
4
+ &--plain {
5
+ padding: 14px;
6
+ }
7
+ }
8
+ .el-popover__title {
9
+ border-bottom: 1px solid #d9d9d9;
10
+ padding-bottom: 14px;
11
+ color: $--themeColor;
12
+ }
13
+
14
+ .el-button--text {
15
+ color: $--themeColor;
16
+ }
17
+
18
+ .el-button--primary {
19
+ color: #FFF;
20
+ background-color: $--themeColor;
21
+ border-color: $--themeColor;
22
+ }
23
+ }
@@ -0,0 +1,23 @@
1
+ @import '../index.scss';
2
+ .lookui-radio {
3
+ .el-radio__inner {
4
+ width: 16px;
5
+ height: 16px;
6
+ }
7
+ .el-radio__input.is-checked .el-radio__inner {
8
+ border-color: $--themeColor;
9
+ background-color: #fff;
10
+ }
11
+ .el-radio__input.is-disabled.is-checked .el-radio__inner {
12
+ background-color: #f5f7fa;
13
+ border-color: #e4e7ed;
14
+ }
15
+ .el-radio__inner::after {
16
+ width: 8px;
17
+ height: 8px;
18
+ background-color: $--themeColor;
19
+ }
20
+ .el-radio__input.is-checked + .el-radio__label {
21
+ color: #666;
22
+ }
23
+ }
@@ -0,0 +1,43 @@
1
+ @import '../index.scss';
2
+ .lookui-select {
3
+ .el-input.is-focus .el-input__inner {
4
+ border: 1px solid $--themeColor;
5
+ }
6
+ .el-input__inner:focus {
7
+ border-color: $--themeColor;
8
+ }
9
+ .el-select {
10
+ width: 100%;
11
+ height: 100%;
12
+ }
13
+ .el-select > .el-input {
14
+ height: 100%;
15
+ }
16
+ .el-select__caret.el-input__icon.el-icon-arrow-up {
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+ }
21
+ }
22
+
23
+ .lookui-select-dropdown .el-select-dropdown__item.hover {
24
+ width: 100%;
25
+ background-color: $--themeColor-100;
26
+ }
27
+ .lookui-select-dropdown .el-select-dropdown__item,
28
+ .lookui-select-dropdown .el-select-dropdown__item.selected {
29
+ color: #666666;
30
+ font-weight: normal;
31
+ &.selected {
32
+ color: $--themeColor;
33
+ }
34
+ }
35
+ .lookui-select-dropdown .property-item input:focus {
36
+ border: 1px solid $--themeColor;
37
+ }
38
+ .lookui-select-dropdown .row-panel.select-panel {
39
+ background: none;
40
+ }
41
+ .lookui-select-dropdown .el-input__icon {
42
+ line-height: 32px;
43
+ }
@@ -0,0 +1,9 @@
1
+ @import '../index.scss';
2
+ .lookui-slider {
3
+ .el-slider__bar {
4
+ background-color: $--themeColor;
5
+ }
6
+ .el-slider__button {
7
+ border: 2px solid $--themeColor;
8
+ }
9
+ }
@@ -0,0 +1,52 @@
1
+ @import '../index.scss';
2
+ .lookui-steps {
3
+ .el-step__head.is-process {
4
+ border-color: $--themeColor;
5
+ .el-step__icon {
6
+ &.is-text {
7
+ background-color: $--themeColor;
8
+ color: #fff;
9
+ .el-step__icon-inner {
10
+ font-weight: normal;
11
+ }
12
+ }
13
+ &.is-icon {
14
+ background-color: rgba(255, 255, 255, 0);
15
+ color: $--themeColor;
16
+ .el-step__icon-inner {
17
+ font-weight: normal;
18
+ }
19
+ }
20
+ }
21
+ }
22
+ .el-step__head.is-success {
23
+ color: $--themeColor;
24
+ border-color: $--themeColor;
25
+ .el-step__line {
26
+ background-color: $--themeColor;
27
+ }
28
+ }
29
+ .el-step__head.is-finish {
30
+ color: $--themeColor;
31
+ border-color: $--themeColor;
32
+ .el-step__line {
33
+ background-color: $--themeColor;
34
+ }
35
+ }
36
+
37
+ .el-step__main {
38
+ .el-step__title.is-process {
39
+ font-weight: 400;
40
+ color: #000;
41
+ }
42
+ .el-step__title.is-success {
43
+ color: #666;
44
+ }
45
+ .el-step__description,
46
+ .el-step__title {
47
+ &.is-finish {
48
+ color: #666;
49
+ }
50
+ }
51
+ }
52
+ }
@@ -0,0 +1,10 @@
1
+ @import '../index.scss';
2
+ .lookui-switch {
3
+ &.is-checked .el-switch__core {
4
+ border-color: $--themeColor;
5
+ background-color: $--themeColor;
6
+ }
7
+ .el-switch__label.is-active {
8
+ color: $--themeColor;
9
+ }
10
+ }