Float the dismiss button instead of absolute-position it.

To prevent overlaps with conten/text of the message.
This commit is contained in:
Peter Fabian 2018-04-23 15:42:42 +02:00
parent 8c677d9214
commit 694cfa979b
6 changed files with 20 additions and 18 deletions

View File

@ -1 +1 @@
div.woocommerce-message{overflow:hidden;position:relative;border-right-color:#cc99c2!important}div.woocommerce-message p{max-width:700px}div.woocommerce-message p:last-child{max-width:inherit}.woocommerce-message .button-primary,p.woocommerce-actions .button-primary{background:#bb77ae;border-color:#a36597;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597;color:#fff;text-shadow:0 -1px 1px #a36597,-1px 0 1px #a36597,0 1px 1px #a36597,1px 0 1px #a36597}.woocommerce-message .button-primary:active,.woocommerce-message .button-primary:focus,.woocommerce-message .button-primary:hover,p.woocommerce-actions .button-primary:active,p.woocommerce-actions .button-primary:focus,p.woocommerce-actions .button-primary:hover{background:#a36597;border-color:#a36597;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597}.woocommerce-message a.woocommerce-message-close,p.woocommerce-actions a.woocommerce-message-close{position:absolute;top:0;left:0;padding:10px 21px 10px 15px;font-size:13px;line-height:1.23076923;text-decoration:none}.woocommerce-message a.woocommerce-message-close::before,p.woocommerce-actions a.woocommerce-message-close::before{position:absolute;top:8px;right:0;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.woocommerce-message .button-primary,.woocommerce-message .button-secondary,p.woocommerce-actions .button-primary,p.woocommerce-actions .button-secondary{text-decoration:none!important}.woocommerce-message .twitter-share-button,p.woocommerce-actions .twitter-share-button{margin-top:-3px;margin-right:3px;vertical-align:middle}.woocommerce-about-text,p.woocommerce-actions{margin-bottom:1em!important}div.woocommerce-legacy-shipping-notice,div.woocommerce-no-shipping-methods-notice{overflow:hidden;padding:1px 12px}div.woocommerce-legacy-shipping-notice p,div.woocommerce-no-shipping-methods-notice p{position:relative;z-index:1;max-width:700px;line-height:1.5em;margin:12px 0}div.woocommerce-legacy-shipping-notice p.main,div.woocommerce-no-shipping-methods-notice p.main{font-size:1.1em}div.woocommerce-legacy-shipping-notice::before,div.woocommerce-no-shipping-methods-notice::before{content:'\e01b';font-family:WooCommerce;text-align:center;line-height:1;color:#f7f1f6;display:block;width:1em;font-size:20em;top:36px;left:12px;position:absolute}
div.woocommerce-message{overflow:hidden;position:relative;border-right-color:#cc99c2!important}div.woocommerce-message p{max-width:700px}div.woocommerce-message p:last-child{max-width:inherit}.woocommerce-message .button-primary,p.woocommerce-actions .button-primary{background:#bb77ae;border-color:#a36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597;color:#fff;text-shadow:0 -1px 1px #a36597,-1px 0 1px #a36597,0 1px 1px #a36597,1px 0 1px #a36597}.woocommerce-message .button-primary:active,.woocommerce-message .button-primary:focus,.woocommerce-message .button-primary:hover,p.woocommerce-actions .button-primary:active,p.woocommerce-actions .button-primary:focus,p.woocommerce-actions .button-primary:hover{background:#a36597;border-color:#a36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597}.woocommerce-message a.woocommerce-message-close,p.woocommerce-actions a.woocommerce-message-close{position:static;float:left;top:0;left:0;padding:0 28px 10px 15px;margin-top:-10px;font-size:13px;line-height:1.23076923;text-decoration:none}.woocommerce-message a.woocommerce-message-close::before,p.woocommerce-actions a.woocommerce-message-close::before{position:relative;top:18px;right:-20px;transition:all .1s ease-in-out}.woocommerce-message .button-primary,.woocommerce-message .button-secondary,p.woocommerce-actions .button-primary,p.woocommerce-actions .button-secondary{text-decoration:none!important}.woocommerce-message .twitter-share-button,p.woocommerce-actions .twitter-share-button{margin-top:-3px;margin-right:3px;vertical-align:middle}.woocommerce-about-text,p.woocommerce-actions{margin-bottom:1em!important}div.woocommerce-legacy-shipping-notice,div.woocommerce-no-shipping-methods-notice{overflow:hidden;padding:1px 12px}div.woocommerce-legacy-shipping-notice p,div.woocommerce-no-shipping-methods-notice p{position:relative;z-index:1;max-width:700px;line-height:1.5em;margin:12px 0}div.woocommerce-legacy-shipping-notice p.main,div.woocommerce-no-shipping-methods-notice p.main{font-size:1.1em}div.woocommerce-legacy-shipping-notice::before,div.woocommerce-no-shipping-methods-notice::before{content:'\e01b';font-family:WooCommerce;text-align:center;line-height:1;color:#f7f1f6;display:block;width:1em;font-size:20em;top:36px;left:12px;position:absolute}

View File

@ -1 +1 @@
div.woocommerce-message{overflow:hidden;position:relative;border-left-color:#cc99c2!important}div.woocommerce-message p{max-width:700px}div.woocommerce-message p:last-child{max-width:inherit}.woocommerce-message .button-primary,p.woocommerce-actions .button-primary{background:#bb77ae;border-color:#a36597;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597;color:#fff;text-shadow:0 -1px 1px #a36597,1px 0 1px #a36597,0 1px 1px #a36597,-1px 0 1px #a36597}.woocommerce-message .button-primary:active,.woocommerce-message .button-primary:focus,.woocommerce-message .button-primary:hover,p.woocommerce-actions .button-primary:active,p.woocommerce-actions .button-primary:focus,p.woocommerce-actions .button-primary:hover{background:#a36597;border-color:#a36597;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597}.woocommerce-message a.woocommerce-message-close,p.woocommerce-actions a.woocommerce-message-close{position:absolute;top:0;right:0;padding:10px 15px 10px 21px;font-size:13px;line-height:1.23076923;text-decoration:none}.woocommerce-message a.woocommerce-message-close::before,p.woocommerce-actions a.woocommerce-message-close::before{position:absolute;top:8px;left:0;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.woocommerce-message .button-primary,.woocommerce-message .button-secondary,p.woocommerce-actions .button-primary,p.woocommerce-actions .button-secondary{text-decoration:none!important}.woocommerce-message .twitter-share-button,p.woocommerce-actions .twitter-share-button{margin-top:-3px;margin-left:3px;vertical-align:middle}.woocommerce-about-text,p.woocommerce-actions{margin-bottom:1em!important}div.woocommerce-legacy-shipping-notice,div.woocommerce-no-shipping-methods-notice{overflow:hidden;padding:1px 12px}div.woocommerce-legacy-shipping-notice p,div.woocommerce-no-shipping-methods-notice p{position:relative;z-index:1;max-width:700px;line-height:1.5em;margin:12px 0}div.woocommerce-legacy-shipping-notice p.main,div.woocommerce-no-shipping-methods-notice p.main{font-size:1.1em}div.woocommerce-legacy-shipping-notice::before,div.woocommerce-no-shipping-methods-notice::before{content:'\e01b';font-family:WooCommerce;text-align:center;line-height:1;color:#f7f1f6;display:block;width:1em;font-size:20em;top:36px;right:12px;position:absolute}
div.woocommerce-message{overflow:hidden;position:relative;border-left-color:#cc99c2!important}div.woocommerce-message p{max-width:700px}div.woocommerce-message p:last-child{max-width:inherit}.woocommerce-message .button-primary,p.woocommerce-actions .button-primary{background:#bb77ae;border-color:#a36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597;color:#fff;text-shadow:0 -1px 1px #a36597,1px 0 1px #a36597,0 1px 1px #a36597,-1px 0 1px #a36597}.woocommerce-message .button-primary:active,.woocommerce-message .button-primary:focus,.woocommerce-message .button-primary:hover,p.woocommerce-actions .button-primary:active,p.woocommerce-actions .button-primary:focus,p.woocommerce-actions .button-primary:hover{background:#a36597;border-color:#a36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #a36597}.woocommerce-message a.woocommerce-message-close,p.woocommerce-actions a.woocommerce-message-close{position:static;float:right;top:0;right:0;padding:0 15px 10px 28px;margin-top:-10px;font-size:13px;line-height:1.23076923;text-decoration:none}.woocommerce-message a.woocommerce-message-close::before,p.woocommerce-actions a.woocommerce-message-close::before{position:relative;top:18px;left:-20px;transition:all .1s ease-in-out}.woocommerce-message .button-primary,.woocommerce-message .button-secondary,p.woocommerce-actions .button-primary,p.woocommerce-actions .button-secondary{text-decoration:none!important}.woocommerce-message .twitter-share-button,p.woocommerce-actions .twitter-share-button{margin-top:-3px;margin-left:3px;vertical-align:middle}.woocommerce-about-text,p.woocommerce-actions{margin-bottom:1em!important}div.woocommerce-legacy-shipping-notice,div.woocommerce-no-shipping-methods-notice{overflow:hidden;padding:1px 12px}div.woocommerce-legacy-shipping-notice p,div.woocommerce-no-shipping-methods-notice p{position:relative;z-index:1;max-width:700px;line-height:1.5em;margin:12px 0}div.woocommerce-legacy-shipping-notice p.main,div.woocommerce-no-shipping-methods-notice p.main{font-size:1.1em}div.woocommerce-legacy-shipping-notice::before,div.woocommerce-no-shipping-methods-notice::before{content:'\e01b';font-family:WooCommerce;text-align:center;line-height:1;color:#f7f1f6;display:block;width:1em;font-size:20em;top:36px;right:12px;position:absolute}

View File

@ -35,17 +35,19 @@ p.woocommerce-actions,
}
a.woocommerce-message-close {
position: absolute;
position: static;
float: right;
top: 0;
right: 0;
padding: 10px 15px 10px 21px;
padding: 0px 15px 10px 28px;
margin-top: -10px;
font-size: 13px;
line-height: 1.23076923;
text-decoration: none;
&::before {
position: absolute;
top: 8px;
left: 0;
position: relative;
top: 18px;
left: -20px;
transition: all 0.1s ease-in-out;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -543,17 +543,17 @@
}
a.woocommerce-message-close {
position: absolute;
top: 10px;
right: 10px;
padding: 10px 15px 10px 21px;
position: static;
float: right;
padding: 0px 15px 10px 28px;
margin-top: -10px;
font-size: 13px;
line-height: 1.23076923;
text-decoration: none;
&::before {
position: absolute;
top: 8px;
left: 0;
position: relative;
top: 18px;
left: -20px;
transition: all 0.1s ease-in-out;
}
}