This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新基础色调,增加暗色

old
宇天 2018-06-18 23:16:32 +08:00
parent ae5017df1e
commit e9e235903a
8 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/var.scss
View File

@ -6,7 +6,7 @@ $cr: #e34235 #e96458 #be382d;
$co: #f39c12 #ffb618 #e67e22; $co: #f39c12 #ffb618 #e67e22;
$cp: #e7e8eb #ecf0f1 #bdc3c7; $cp: #e7e8eb #ecf0f1 #bdc3c7;
$cgr: #8a9b9c #98acae #748182; $cgr: #8a9b9c #98acae #748182;
$cnb: #526273 #62778d #34495E; $cd: #526273 #62778d #34495E;
@mixin ts($c: all, $t: .2s, $m: ease-in-out){ @mixin ts($c: all, $t: .2s, $m: ease-in-out){
transition:$c $t $m; transition:$c $t $m;

12
src/js/datepicker/style.scss
View File

@ -7,21 +7,21 @@
*/ */
@import "var.scss"; @import "var.scss";
.do-datepicker { position:relative;display:inline-block;width:100%; height:100%;color:nth($cnb, 1);font-size:14px; .do-datepicker { position:relative;display:inline-block;width:100%; height:100%;color:nth($cd, 1);font-size:14px;
&.mini {width:155px;height:30px;line-height:30px;} &.mini {width:155px;height:30px;line-height:30px;}
&.medium {width:175px;height:35px;line-height:35px;} &.medium {width:175px;height:35px;line-height:35px;}
&.large {width:195px;height:40px;line-height:40px;} &.large {width:195px;height:40px;line-height:40px;}
a { text-decoration:none;color:nth($cnb, 1); a { text-decoration:none;color:nth($cd, 1);
&:hover {color:nth($cnb, 2);} &:hover {color:nth($cd, 2);}
&:active {color:nth($cnb, 3);} &:active {color:nth($cd, 3);}
} }
.date-input {position:relative; display:block; width:100%; height:100%; .date-input {position:relative; display:block; width:100%; height:100%;
.input { width:100%; height:100%;padding:0 5px; line-height:18px; border:1px solid nth($cp, 3);color:nth($cnb, 1); @include ts(); .input { width:100%; height:100%;padding:0 5px; line-height:18px; border:1px solid nth($cp, 3);color:nth($cd, 1); @include ts();
&:focus { border-color:nth($ct, 1); } &:focus { border-color:nth($ct, 1); }
&[disabled] {background:#f7f8fb;cursor:not-allowed;} &[disabled] {background:#f7f8fb;cursor:not-allowed;}
@ -29,7 +29,7 @@
.icon {position:absolute;right:0;top:0;width:35px;text-align:center;font-size:25px;color:nth($cp, 3); .icon {position:absolute;right:0;top:0;width:35px;text-align:center;font-size:25px;color:nth($cp, 3);
} }
} }
.calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cnb, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1); .calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cd, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
&::before {position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background:nth($ct, 1);content:""} &::before {position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background:nth($ct, 1);content:""}

28
src/js/form/style.scss
View File

@ -45,7 +45,7 @@
&.orange {color:nth($co, 1);} &.orange {color:nth($co, 1);}
&.plain {color:nth($cp, 3);} &.plain {color:nth($cp, 3);}
&.grey {color:nth($cgr, 1);} &.grey {color:nth($cgr, 1);}
&.navy-blue {color:nth($cnb, 1);} &.dark {color:nth($cd, 1);}
&.disabled {color:nth($cp, 1);cursor:not-allowed; &.disabled {color:nth($cp, 1);cursor:not-allowed;
@ -100,14 +100,14 @@
} }
&.grey {color:nth($cgr, 1);} &.grey {color:nth($cgr, 1);}
&.navy-blue &__box {border-color:nth($cnb, 1); &.dark &__box {border-color:nth($cd, 1);
&::after {background:nth($cnb, 1);} &::after {background:nth($cd, 1);}
} }
&.navy-blue {color:nth($cnb, 1);} &.dark {color:nth($cd, 1);}
&.disabled {color:nth($cp, 3);cursor:not-allowed;text-decoration:line-through;} &.disabled {color:nth($cp, 3);cursor:not-allowed;text-decoration:line-through;}
&.disabled.checked {color:nth($cnb, 2);} &.disabled.checked {color:nth($cd, 2);}
&.disabled &__box {border-color:nth($cp, 3); &.disabled &__box {border-color:nth($cp, 3);
&::after {background:nth($cp, 3);} &::after {background:nth($cp, 3);}
} }
@ -151,8 +151,8 @@
&.grey.checked &__dot {background:nth($cgr, 1);} &.grey.checked &__dot {background:nth($cgr, 1);}
&.grey.checked &__label {background:nth($cgr, 2) + a0;} &.grey.checked &__label {background:nth($cgr, 2) + a0;}
&.navy-blue.checked &__dot {background:nth($cnb, 1);} &.dark.checked &__dot {background:nth($cd, 1);}
&.navy-blue.checked &__label {background:nth($cnb, 2) + a0;} &.dark.checked &__label {background:nth($cd, 2) + a0;}
&.disabled.checked &__dot {background:#fff;} &.disabled.checked &__dot {background:#fff;}
&.disabled &__label, &.disabled.checked &__label {background:nth($cp, 2); &.disabled &__label, &.disabled.checked &__label {background:nth($cp, 2);
@ -176,9 +176,9 @@
&.grey &__box {border-color:nth($cgr, 1);} &.grey &__box {border-color:nth($cgr, 1);}
&.grey.checked &__box {background:nth($cgr, 1);} &.grey.checked &__box {background:nth($cgr, 1);}
&.navy-blue {color:nth($cnb, 1);} &.dark {color:nth($cd, 1);}
&.navy-blue &__box {border-color:nth($cnb, 1);} &.dark &__box {border-color:nth($cd, 1);}
&.navy-blue.checked &__box {background:nth($cnb, 1);} &.dark.checked &__box {background:nth($cd, 1);}
&.teal {color:nth($ct, 1);} &.teal {color:nth($ct, 1);}
&.teal &__box {border-color:nth($ct, 1);} &.teal &__box {border-color:nth($ct, 1);}
@ -210,7 +210,7 @@
&.disabled {cursor:not-allowed;color:nth($cp, 3);text-decoration:line-through;} &.disabled {cursor:not-allowed;color:nth($cp, 3);text-decoration:line-through;}
&.disabled &__box {border-color:nth($cp, 3);} &.disabled &__box {border-color:nth($cp, 3);}
&.disabled.checked {color:nth($cnb, 2);} &.disabled.checked {color:nth($cd, 2);}
&.disabled.checked &__box {background:nth($cp, 3);} &.disabled.checked &__box {background:nth($cp, 3);}
} }
@ -226,7 +226,7 @@
&.visible {visibility:visible;} &.visible {visibility:visible;}
} }
&__input {position:relative;width:100%;height:30px;padding:0 5px;border:0;background:none;font-size:14px;color:nth($cnb, 1);} &__input {position:relative;width:100%;height:30px;padding:0 5px;border:0;background:none;font-size:14px;color:nth($cd, 1);}
&__icon {position:absolute;bottom:0;width:30px;height:30px;text-align:center;font-size:20px;} &__icon {position:absolute;bottom:0;width:30px;height:30px;text-align:center;font-size:20px;}
&::after {position:absolute;left:50%;bottom:-1px;width:0;height:2px;content:"";transition:left .15s linear,width .15s linear;} &::after {position:absolute;left:50%;bottom:-1px;width:0;height:2px;content:"";transition:left .15s linear,width .15s linear;}
@ -244,8 +244,8 @@
&::after {background:nth($cgr, 2);} &::after {background:nth($cgr, 2);}
} }
&.navy-blue {color:nth($cnb, 1); &.dark {color:nth($cd, 1);
&::after {background:nth($cnb, 2);} &::after {background:nth($cd, 2);}
} }
&.teal{color:nth($ct, 1); &.teal{color:nth($ct, 1);

2
src/js/layer/skin/default.scss
View File

@ -36,7 +36,7 @@
/* 弹层标题栏 */ /* 弹层标题栏 */
.layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cnb, 1);} .layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cd, 1);}
/* 弹层主体内容 */ /* 弹层主体内容 */
.layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;word-break:break-all;word-wrap: break-word; .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;word-break:break-all;word-wrap: break-word;

6
src/js/meditor/addon/attach.scss
View File

@ -7,7 +7,7 @@
*/ */
@import 'var.scss'; @import 'var.scss';
.do-meditor-attach {width:630px;height:300px;cursor:default;color:nth($cnb, 1); .do-meditor-attach {width:630px;height:300px;cursor:default;color:nth($cd, 1);
::-webkit-scrollbar {width:5px;height:5px;background:nth($cp, 2);} ::-webkit-scrollbar {width:5px;height:5px;background:nth($cp, 2);}
::-webkit-scrollbar:hover {background:nth($cp, 1);} ::-webkit-scrollbar:hover {background:nth($cp, 1);}
@ -34,7 +34,7 @@
.section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px; .section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px;
.txt {width:100%;height:45px;padding:0 10px;border:0;border-radius:5px;background:nth($cp, 2);color:nth($cnb, 1);font-size:14px;} .txt {width:100%;height:45px;padding:0 10px;border:0;border-radius:5px;background:nth($cp, 2);color:nth($cd, 1);font-size:14px;}
.submit {float:right;width:30%;height:45px;line-height:45px;} .submit {float:right;width:30%;height:45px;line-height:45px;}
} }
@ -63,7 +63,7 @@
p {display:block;width:100%;height:30px;line-height:30px;} p {display:block;width:100%;height:30px;line-height:30px;}
} }
.insert {display:inline-block;padding:3px 5px;line-height:13px;background:nth($cp, 2);color:nth($cnb, 1);cursor:pointer;} .insert {display:inline-block;padding:3px 5px;line-height:13px;background:nth($cp, 2);color:nth($cd, 1);cursor:pointer;}
.red {color:#f30;} .red {color:#f30;}
} }

10
src/js/meditor/skin/main.scss
View File

@ -22,7 +22,7 @@
.tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:41px;padding:0 3px;line-height:40px;border-bottom:1px solid nth($cp, 1);background:#fff;color:nth($cnb, 1);text-align:center;font-size:24px; .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:41px;padding:0 3px;line-height:40px;border-bottom:1px solid nth($cp, 1);background:#fff;color:nth($cd, 1);text-align:center;font-size:24px;
span {float:left;width:40px;height:40px; span {float:left;width:40px;height:40px;
@ -122,11 +122,11 @@
} }
/*通用输入模块, 链接/图片插入/文件插入/代码块插入*/ /*通用输入模块, 链接/图片插入/文件插入/代码块插入*/
.do-meditor-common {width:360px;height:auto;padding:0 20px;font-size:14px;color:nth($cnb, 2); .do-meditor-common {width:360px;height:auto;padding:0 20px;font-size:14px;color:nth($cd, 2);
section {width:100%;height: 40px;margin:10px 0;line-height:40px; section {width:100%;height: 40px;margin:10px 0;line-height:40px;
.txt {width:100%;height:40px;padding:0 10px;border:0;border-radius:5px;background:nth($cp, 2);color:nth($cnb, 1);font-size:14px;} .txt {width:100%;height:40px;padding:0 10px;border:0;border-radius:5px;background:nth($cp, 2);color:nth($cd, 1);font-size:14px;}
.label {float: left;width:50%;} .label {float: left;width:50%;}
.submit {float:right;width:30%;} .submit {float:right;width:30%;}
} }
@ -136,13 +136,13 @@
section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px; section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;
.label {float: left;width:80px;} .label {float: left;width:80px;}
select {float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-radius:0;border-bottom:1px solid nth($cp, 3);background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 12px;color:nth($cnb, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts; select {float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-radius:0;border-bottom:1px solid nth($cp, 3);background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 12px;color:nth($cd, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
&::-ms-expand {display:none;} &::-ms-expand {display:none;}
&:focus {box-shadow:0 0 5px nth($ct, 2)} &:focus {box-shadow:0 0 5px nth($ct, 2)}
} }
textarea {width:100%;height:300px;padding:5px 10px;border:0;border-radius:5px;background:nth($cp, 2);font-size:14px;resize:none;outline:none;color:nth($cnb, 1); textarea {width:100%;height:300px;padding:5px 10px;border:0;border-radius:5px;background:nth($cp, 2);font-size:14px;resize:none;outline:none;color:nth($cd, 1);
&:focus {box-shadow:0 0 5px nth($ct, 2)} &:focus {box-shadow:0 0 5px nth($ct, 2)}
} }

12
src/js/pager/main.scss
View File

@ -78,14 +78,14 @@
&.skin-2 .curr {background:nth($cgr, 3)} &.skin-2 .curr {background:nth($cgr, 3)}
} }
&.navy-blue { &.dark {
.page,.button {background:nth($cnb, 1);color: #fff; .page,.button {background:nth($cd, 1);color: #fff;
&:hover {background:nth($cnb, 2)} &:hover {background:nth($cd, 2)}
&:active {background:nth($cnb, 3)} &:active {background:nth($cd, 3)}
} }
.button[disabled] {background:nth($cnb, 1);} .button[disabled] {background:nth($cd, 1);}
&.skin-2 .curr {background:nth($cnb, 3)} &.skin-2 .curr {background:nth($cd, 3)}
} }
&.red { &.red {

10
src/js/tree/main.scss
View File

@ -9,20 +9,20 @@
@import '../../css/var.scss'; @import '../../css/var.scss';
.do-tree {overflow:hidden;overflow-y:auto;position:relative;display:inline-block;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cnb, 1); .do-tree {overflow:hidden;overflow-y:auto;position:relative;display:inline-block;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cd, 1);
&__item {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis; &__item {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis;
.do-tree {display:none;margin-left:20px;} .do-tree {display:none;margin-left:20px;}
em,span {display:inline-block;cursor:pointer;color:nth($cnb, 2);} em,span {display:inline-block;cursor:pointer;color:nth($cd, 2);}
em {float:left;padding:0 5px;font-size:20px;} em {float:left;padding:0 5px;font-size:20px;}
span { span {
&:hover {color:nth($cnb, 2);} &:hover {color:nth($cd, 2);}
&.active {color:nth($cnb, 3);font-weight:bold;} &.active {color:nth($cd, 3);font-weight:bold;}
&.checkbox {float:left;position:relative;width:20px;height:20px;margin:8px 5px 8px 0;line-height:18px;border:1px solid nth($cnb, 1);border-radius:3px; font-size:20px;text-align:center;} &.checkbox {float:left;position:relative;width:20px;height:20px;margin:8px 5px 8px 0;line-height:18px;border:1px solid nth($cd, 1);border-radius:3px; font-size:20px;text-align:center;}
} }
} }
&__item.open>.do-tree {display:block;} &__item.open>.do-tree {display:block;}