From c6c116a8b3da78cdf47c5cd488bb38b2e8d25f13 Mon Sep 17 00:00:00 2001 From: Ryan O'Hara Date: Wed, 12 Sep 2012 11:57:30 +1200 Subject: [PATCH] BUGFIX: IE8 Document type selected stylings --- css/DMSDocumentCMSFields.css | 6 +++--- css/DMSMainCMS.css | 36 +++++++++++++++------------------- scss/DMSDocumentCMSFields.scss | 1 + scss/DMSMainCMS.scss | 2 +- scss/_mixins.scss | 4 +++- 5 files changed, 24 insertions(+), 25 deletions(-) diff --git a/css/DMSDocumentCMSFields.css b/css/DMSDocumentCMSFields.css index 0f65820..1ddfd7f 100644 --- a/css/DMSDocumentCMSFields.css +++ b/css/DMSDocumentCMSFields.css @@ -13,15 +13,15 @@ form.small .field input.text, form.small .field textarea, form.small .field sele #DocumentTypeID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; } #DocumentTypeID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } #DocumentTypeID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; } -#DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } -#DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } +#DocumentTypeID .middleColumn ul li.selected, .ie8 #DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#DocumentTypeID .middleColumn ul li.selected :after, .ie8 #DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } #DocumentTypeID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } #Actions { box-shadow: none; border: none; padding: 0; } #Actions li { margin-left: 2px; } #Actions li:first-child { margin-left: 0; } #Actions li.delete-button-appended { display: inline-block; position: relative; margin-left: 0; } -#Actions li.dms-active { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#Actions li.dms-active { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } #Actions li.dms-active:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; z-index: 10; } #ActionsPanel .middleColumn { margin-left: 184px; width: 510px; } diff --git a/css/DMSMainCMS.css b/css/DMSMainCMS.css index 9dd8cae..7fb7980 100644 --- a/css/DMSMainCMS.css +++ b/css/DMSMainCMS.css @@ -1,15 +1,11 @@ .ui-autocomplete { border: 1px solid #DDD; box-shadow: 0 1px 2px 0px #AFAFAF; max-height: 300px; overflow: scroll; } -.cms fieldset.documents table { white-space: normal; } -.cms fieldset.documents table th { /* &.col-action_SetOrderTitle, &.col-FilenameWithoutID{ - width: 300px; - } */ } -.cms fieldset.documents table td { white-space: normal; } -.cms fieldset.documents table td.col-buttons { white-space: nowrap; } -.cms fieldset.documents table td.col-buttons .dms-delete-link-only .ui-icon { background: url(../images/chain-unchain.png) no-repeat; } -.cms fieldset.documents table tr.dms-document-hidden-row.odd { background-color: rgba(241, 220, 222, 0.6); } -.cms fieldset.documents table tr.dms-document-hidden-row.even { background-color: rgba(242, 201, 203, 0.675); } -.cms fieldset.documents table tr.dms-document-hidden-row:hover { background-color: rgba(244, 171, 172, 0.8) !important; } +.cms fieldset.documents table td, .cms fieldset.relatedLinks table td { white-space: normal; } +.cms fieldset.documents table td.col-buttons, .cms fieldset.relatedLinks table td.col-buttons { white-space: nowrap; } +.cms fieldset.documents table td.col-buttons .dms-delete-link-only .ui-icon, .cms fieldset.relatedLinks table td.col-buttons .dms-delete-link-only .ui-icon { background: url(../images/chain-unchain.png) no-repeat; } +.cms fieldset.documents table tr.dms-document-hidden-row.odd, .cms fieldset.relatedLinks table tr.dms-document-hidden-row.odd { background-color: rgba(241, 220, 222, 0.6); } +.cms fieldset.documents table tr.dms-document-hidden-row.even, .cms fieldset.relatedLinks table tr.dms-document-hidden-row.even { background-color: rgba(242, 201, 203, 0.675); } +.cms fieldset.documents table tr.dms-document-hidden-row:hover, .cms fieldset.relatedLinks table tr.dms-document-hidden-row:hover { background-color: rgba(244, 171, 172, 0.8) !important; } .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; } .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li { padding-bottom: 1px; border: 1px solid #C0C0C2; } @@ -48,15 +44,15 @@ #Form_EditForm_RelatedLinks table { padding: 1em 0; } #Form_EditForm_RelatedLinks table thead h2 { display: none; } -#SectionID .middleColumn { overflow: auto; min-width: 800px; } -#SectionID .middleColumn ul { padding: 0; } -#SectionID .middleColumn ul input[type="radio"] { display: none; } -#SectionID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; } -#SectionID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } -#SectionID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; } -#SectionID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } -#SectionID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } -#SectionID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } +#SectionID .middleColumn, #DocumentTypeID .middleColumn { overflow: auto; min-width: 800px; } +#SectionID .middleColumn ul, #DocumentTypeID .middleColumn ul { padding: 0; } +#SectionID .middleColumn ul input[type="radio"], #DocumentTypeID .middleColumn ul input[type="radio"] { display: none; } +#SectionID .middleColumn ul li, #DocumentTypeID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; } +#SectionID .middleColumn ul li:first-child, #DocumentTypeID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } +#SectionID .middleColumn ul li:last-child, #DocumentTypeID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; } +#SectionID .middleColumn ul li.selected, .ie8 #SectionID .middleColumn ul li.selected, #DocumentTypeID .middleColumn ul li.selected, .ie8 #DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#SectionID .middleColumn ul li.selected :after, .ie8 #SectionID .middleColumn ul li.selected :after, #DocumentTypeID .middleColumn ul li.selected :after, .ie8 #DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } +#SectionID .middleColumn ul li label, #DocumentTypeID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } #Form_ItemEditForm h3:first-child { display: inline-block; float: left; width: 184px; } #Form_ItemEditForm ul.SelectionGroup { display: inline-block; position: relative; padding: 0; margin-top: 9px; margin-left: 0; height: 110px; background: none; border: none; } @@ -65,7 +61,7 @@ #Form_ItemEditForm ul.SelectionGroup li label.ui-button { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: -ms-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); font-weight: bold; border: 1px solid #C0C0C2; border-radius: 3px; padding: 0.8em 1.5em; } #Form_ItemEditForm ul.SelectionGroup li label.ui-button:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } #Form_ItemEditForm ul.SelectionGroup li div.field { margin-left: 0px; margin-bottom: 1em; width: 600px; position: absolute; left: 0; margin-top: 13px; padding: 10px; background: white; border: 1px solid #B3B3B3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } -#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } #Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; z-index: 10; } #Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { top: 43px; } #Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel { margin: 1px 0 0 -1px; box-sizing: content-box; } diff --git a/scss/DMSDocumentCMSFields.scss b/scss/DMSDocumentCMSFields.scss index 697aefb..6f27202 100644 --- a/scss/DMSDocumentCMSFields.scss +++ b/scss/DMSDocumentCMSFields.scss @@ -42,6 +42,7 @@ form.small .field .TreeDropdownField, #DocumentTypeID{ @include tabButtons; } + #Actions{ box-shadow:none; border:none; diff --git a/scss/DMSMainCMS.scss b/scss/DMSMainCMS.scss index 3f3241a..9d9538a 100644 --- a/scss/DMSMainCMS.scss +++ b/scss/DMSMainCMS.scss @@ -245,7 +245,7 @@ $gf_colour_zebra: #F0F4F7; } } -#SectionID{ +#SectionID, #DocumentTypeID{ @include tabButtons; } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index c024bd6..3c7f5ce 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -26,7 +26,7 @@ $color-button-generic: #e6e6e6 !default; &:last-child{ border-radius: 0 6px 6px 0; } - &.selected{ + &.selected, .ie8 &.selected{ border-bottom:1px solid #C0C0C2; @include background( linear-gradient(color-stops( @@ -34,6 +34,7 @@ $color-button-generic: #e6e6e6 !default; $color-button-generic )) ); + background-color: darken($color-button-generic, 15%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; @@ -60,6 +61,7 @@ $color-button-generic: #e6e6e6 !default; $color-button-generic )) ); + background-color: darken($color-button-generic, 15%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset;