Skip to content

Commit

Permalink
修复：#354 #405
Browse files Browse the repository at this point in the history 
* 解决ie11不兼容文字设置rgba的问题, fixes #354, fixes#405

* code format

* optimize ie hack
  • Loading branch information
@hpyou @rdkmaster
hpyou authored and rdkmaster committed Jan 18, 2018
1 parent 0aaad4c commit 4ee5b8f
Show file tree
Hide file tree
Showing 13 changed files with 130 additions and 99 deletions.
25 changes: 21 additions & 4 deletions src/jigsaw/assets/scss/core/_mixin.scss
View file
Expand Up @@ -33,9 +33,9 @@
text-overflow: ellipsis;
}

@mixin word-break(){
word-wrap:break-word;
word-break:break-all;
@mixin word-break() {
word-wrap: break-word;
word-break: break-all;
}

@mixin prefixer($property, $value) {
Expand All @@ -46,14 +46,31 @@
#{$property}: $value;
}

@mixin font-awesome(){
@mixin font-awesome() {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

@mixin compatible($property, $value, $compatibleValue) {
#{$property}: $value;
@include compatibleIE($property, $compatibleValue);
}

@mixin compatibleIE($property, $value) {
@include ie11Hack {
#{$property}: $value;
}
}

@mixin ie11Hack() {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@content;
}
}

@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
Expand Down
100 changes: 56 additions & 44 deletions src/jigsaw/assets/scss/index.scss
View file
@@ -1,18 +1,18 @@
@import "core/base";

/*时间组件样式start*/
.jigsaw-time-host{
.jigsaw-time-host {
color: $text-color;
.bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new {
color: $text-color-secondary;
}

.bootstrap-datetimepicker-widget table td.day{
.bootstrap-datetimepicker-widget table td.day {
height: 14px;
line-height: 14px;
}

.bootstrap-datetimepicker-widget .datepicker-decades tbody td span{
.bootstrap-datetimepicker-widget .datepicker-decades tbody td span {
display: none;
&.decade {
display: inline-block;
Expand All @@ -24,155 +24,167 @@
.bootstrap-datetimepicker-widget table td span.active,
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.jigsaw-time-box .bootstrap-datetimepicker-widget table tr.active td{
.jigsaw-time-box .bootstrap-datetimepicker-widget table tr.active td {
background-color: $primary-color;
color: $text-color-of-bg;
}

.bootstrap-datetimepicker-widget table th.picker-switch{
.bootstrap-datetimepicker-widget table th.picker-switch {
font-weight: 700 !important;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th{
&:hover{
.bootstrap-datetimepicker-widget table thead tr:first-child th {
&:hover {
background: none;
color: $primary-color;
}
span.glyphicon{
span.glyphicon {
@include font-awesome();
font-size: 16px;
&.glyphicon-chevron-left:before{
&.glyphicon-chevron-left:before {
content: "\f104";
}
&.glyphicon-chevron-right:before{
&.glyphicon-chevron-right:before {
content: "\f105";
}
}

}

.bootstrap-datetimepicker-widget .picker-switch a[data-action]{
.bootstrap-datetimepicker-widget .picker-switch a[data-action] {
color: $primary-color;
}
.bootstrap-datetimepicker-widget a[data-action]{
.bootstrap-datetimepicker-widget a[data-action] {
color: $text-color;
&:hover{
&:hover {
color: $primary-color;
}
}

.bootstrap-datetimepicker-widget .picker-switch td span{
.bootstrap-datetimepicker-widget .picker-switch td span {
height: 24px;
line-height: 24px;
&.glyphicon{
&.glyphicon {
@include font-awesome();
font-size: 14px;
line-height: 24px;
&.glyphicon-time:before{
&.glyphicon-time:before {
content: "\f017";
}
&.glyphicon-calendar:before{
&.glyphicon-calendar:before {
content: "\f073";
}
}
}

.bootstrap-datetimepicker-widget table td span{
.bootstrap-datetimepicker-widget table td span {
height: 24px;
line-height: 24px;
}

.bootstrap-datetimepicker-widget table td a.btn span{
&.glyphicon{
.bootstrap-datetimepicker-widget table td a.btn span {
&.glyphicon {
@include font-awesome();
font-size: 16px;
line-height: 24px;
&.glyphicon-chevron-up:before{
&.glyphicon-chevron-up:before {
content: "\f106";
}
&.glyphicon-chevron-down:before{
&.glyphicon-chevron-down:before {
content: "\f107";
}
}
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second{
.bootstrap-datetimepicker-widget .timepicker-second {
font-weight: 400;
}

@include ie11Hack() {
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
text-shadow: none;
}
.bootstrap-datetimepicker-widget table td span.active {
text-shadow: none;
}
}
}

/*时间组件样式end*/

/*zTree组件样式start*/
.ztree li span.button{
.ztree li span.button {
@include font-awesome();
background: none;
font-size: 14px;
color: $primary-color;
&.ico_open{
&:before{
&.ico_open {
&:before {
content: "\f07c";
}
}
&.ico_close{
&:before{
&.ico_close {
&:before {
content: "\f07b";
}
}
&.ico_docu{
&:before{
&.ico_docu {
&:before {
content: "\f15c";
}
}
&.chk{
&.chk {
border: 1px solid $text-color-secondary;
border-radius: 2px;
font-size: 12px;
cursor: pointer;
&:hover{
&:hover {
border: 1px solid $primary-color;
}
&.checkbox_true_full, &.checkbox_true_full_focus{
&.checkbox_true_full, &.checkbox_true_full_focus {
border: 1px solid $primary-color;
&:before{
&:before {
content: "\f00c";
}
}
}
&.edit{
&.edit {
margin-left: 5px;
vertical-align: middle;
color: $text-color-secondary;
&:before{
&:before {
content: "\f044";
}
&:hover{
&:hover {
color: $primary-color;
}
}
&.remove{
&.remove {
vertical-align: middle;
color: $text-color-secondary;
&:before{
&:before {
content: "\f014";
}
&:hover{
&:hover {
color: $primary-color;
}
}
&.noline_open, &.center_open, &.bottom_open, &.roots_open{
&.noline_open, &.center_open, &.bottom_open, &.roots_open {
color: $text-color-secondary;
&:before{
&:before {
content: "\f106";
}
}
&.noline_close, &.center_close, &.bottom_close, &.roots_close{
&.noline_close, &.center_close, &.bottom_close, &.roots_close {
color: $text-color-secondary;
&:before{
&:before {
content: "\f107";
}
}
}

/*zTree组件样式end*/


2 changes: 1 addition & 1 deletion src/jigsaw/component/button/button.scss
View file
Expand Up @@ -111,7 +111,7 @@ $btn-prefix-cls: #{$jigsaw-prefix}-button;
&#{&}-disabled {
pointer-events: none;
cursor: default;
color: $disabled-color;
@include compatible(color, $disabled-color, $disabled-color-ie11);
background-color: $disabled-bg;
border-color: $border-color-base;
}
Expand Down
4 changes: 2 additions & 2 deletions src/jigsaw/component/combo-select/combo-select.scss
View file
Expand Up @@ -62,12 +62,12 @@ $jigsaw-combo-select: #{$jigsaw-prefix}-combo-select;
}

&-disabled {
color: $disabled-color;
@include compatible(color, $disabled-color, $disabled-color-ie11);
pointer-events: none;
}

&-disabled &-placeholder {
color: $disabled-color;
@include compatible(color, $disabled-color, $disabled-color-ie11);
}

&-disabled &-selection {
Expand Down
2 changes: 1 addition & 1 deletion src/jigsaw/component/list-and-tile/list-option.scss
View file
Expand Up @@ -15,7 +15,7 @@ $list-option-prefix-cls: #{$jigsaw-prefix}-list-option;
}
&.#{$list-option-prefix-cls}-disabled {
background: $disabled-bg;
color: $disabled-color;
@include compatible(color, $disabled-color, $disabled-color-ie11);
cursor: not-allowed;
}
&-title-box {
Expand Down
2 changes: 1 addition & 1 deletion src/jigsaw/component/list-and-tile/tile-option.scss
View file
Expand Up @@ -26,7 +26,7 @@ $option-prefix-cls: #{$jigsaw-prefix}-tile-option;
}
&.#{$option-prefix-cls}-disabled {
background: $disabled-bg;
color: $disabled-color;
@include compatible(color, $disabled-color, $disabled-color-ie11);
cursor: not-allowed;
}
}
20 changes: 10 additions & 10 deletions src/jigsaw/component/pagination/pagination.scss
View file
Expand Up @@ -6,7 +6,7 @@ $paging-prefix-cls: #{$jigsaw-prefix}-paging;
@include inline-block();
font-size: $font-size-base;
user-select: none;
&-page{
&-page {
position: relative;
@include inline-block;
width: 28px;
Expand All @@ -19,33 +19,33 @@ $paging-prefix-cls: #{$jigsaw-prefix}-paging;
cursor: pointer;
vertical-align: top;
@include prefixer(transition, all .3s ease);
&.#{$paging-prefix-cls}-disabled{
&.#{$paging-prefix-cls}-disabled {
cursor: not-allowed;
border: 1px solid $border-color-base;
color: $disabled-color;
&:hover{
@include compatible(color, $disabled-color, $disabled-color-ie11);
&:hover {
border: 1px solid $border-color-base;
color: $disabled-color;
@include compatible(color, $disabled-color, $disabled-color-ie11);
}
}
&:hover{
&:hover {
border: 1px solid $primary-color;
color: $primary-color;
}
}
jigsaw-select{
jigsaw-select {
margin-right: 8px;
}
&-goto{
&-goto {
@include inline-block;
height: 28px;
line-height: 28px;
vertical-align: top;
> span{
> span {
margin-right: 8px;
}
}
jigsaw-input{
jigsaw-input {
vertical-align: top;
margin-right: 8px;
}
Expand Down

0 comments on commit 4ee5b8f

Please sign in to comment.