From 57b6445daa256b0034f2484ca51406e6523923d4 Mon Sep 17 00:00:00 2001 From: Andy Jansson Date: Wed, 18 Jul 2018 05:14:42 +0200 Subject: [PATCH 1/2] Should not mangle border output (#553, #554) --- .../src/__tests__/integrations/base.css | 2 +- .../src/__tests__/integrations/helium.css | 12 +- .../src/__tests__/integrations/picnic.css | 2 +- .../src/__tests__/integrations/schema.css | 4 +- .../src/__tests__/integrations/semantic2.css | 24 +-- .../src/__tests__/integrations/turret.css | 4 +- .../src/__tests__/integrations/vital.css | 2 +- .../src/__tests__/integrations/base.css | 2 +- .../src/__tests__/integrations/helium.css | 12 +- .../src/__tests__/integrations/picnic.css | 2 +- .../src/__tests__/integrations/schema.css | 4 +- .../src/__tests__/integrations/semantic2.css | 24 +-- .../src/__tests__/integrations/turret.css | 4 +- .../src/__tests__/integrations/vital.css | 2 +- .../src/__tests__/borders.js | 17 ++- .../src/lib/decl/borders.js | 139 +++++++++++------- 16 files changed, 148 insertions(+), 108 deletions(-) diff --git a/packages/cssnano-preset-advanced/src/__tests__/integrations/base.css b/packages/cssnano-preset-advanced/src/__tests__/integrations/base.css index 2ff68f79d..07409c2a4 100644 --- a/packages/cssnano-preset-advanced/src/__tests__/integrations/base.css +++ b/packages/cssnano-preset-advanced/src/__tests__/integrations/base.css @@ -573,7 +573,7 @@ input:-ms-input-placeholder{color:#999} .checkbox label,.radio label{display:inline-block;padding-left:20px;padding-top:0} .checkbox input[type=checkbox],.checkbox input[type=radio],.radio input[type=checkbox],.radio input[type=radio]{left:0;position:absolute;top:4px} .select{display:block;position:relative} -.select:before{border:6px solid transparent;border-top:6px solid #676767;content:"";margin-top:-3px;pointer-events:none;position:absolute;right:10px;top:50%} +.select:before{border:6px solid transparent;border-top-color:#676767;content:"";margin-top:-3px;pointer-events:none;position:absolute;right:10px;top:50%} .select select{-moz-appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #ccc;display:block;height:36px;line-height:normal;padding:0 10px;width:100%} .select select::-ms-expand{display:none} .select select:focus{border-color:#f7c723} diff --git a/packages/cssnano-preset-advanced/src/__tests__/integrations/helium.css b/packages/cssnano-preset-advanced/src/__tests__/integrations/helium.css index 628257875..499dc07ba 100644 --- a/packages/cssnano-preset-advanced/src/__tests__/integrations/helium.css +++ b/packages/cssnano-preset-advanced/src/__tests__/integrations/helium.css @@ -230,7 +230,7 @@ input,label,textarea{color:#444;font-family:Helvetica Neue,Helvetica,Arial,sans- @media screen and (min-width:981px){ .field-group .fields{position:relative} .field-group .fields .error-message{left:100%;margin-left:12px;margin-top:0;position:absolute;top:2px;white-space:nowrap} - .field-group .fields .error-message:after{border:6px solid transparent;border-right:6px solid #a01d2b;content:"";display:block;height:0;left:-12px;position:absolute;top:6px;width:0} + .field-group .fields .error-message:after{border:6px solid transparent;border-right-color:#a01d2b;content:"";display:block;height:0;left:-12px;position:absolute;top:6px;width:0} } .input-inline{display:inline-block;height:30px;line-height:30px} .multi-field{zoom:1} @@ -267,7 +267,7 @@ input.char16{width:182px!important} select{-webkit-appearance:none;display:block;font-size:14px;opacity:0;padding:0 7px;width:100%;z-index:1} select option{font-size:11px} .select-mask{background:#fff;left:0;line-height:1;padding-top:7px;position:absolute;top:0;z-index:-1} -.select-mask:after{border:5px solid transparent;border-top:5px solid #222;content:"";display:block;height:0;position:absolute;right:10px;top:12px;width:0} +.select-mask:after{border:5px solid transparent;border-top-color:#222;content:"";display:block;height:0;position:absolute;right:10px;top:12px;width:0} ::-webkit-input-placeholder{-moz-transition:.2s all;-o-transition:.2s all;-webkit-transition:all .2s;color:#999;transition:all .2s} :-moz-placeholder{-moz-transition:.2s all;-o-transition:.2s all;-webkit-transition:all .2s;color:#999;transition:all .2s} ::-webkit-input-placeholder:focus{color:#bfbfbf} @@ -287,7 +287,7 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} .error label{color:#a01d2b} .error input{border-color:#a01d2b} .error-message{-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;background:#a01d2b;border-radius:2px;color:#fff;display:inline-block;font-size:12px;line-height:12px;margin-top:7px;padding:7px;position:relative} -.error-message:after{border:6px solid transparent;border-bottom:6px solid #a01d2b;content:"";display:block;height:0;left:10px;position:absolute;top:-12px;width:0} +.error-message:after{border:6px solid transparent;border-bottom-color:#a01d2b;content:"";display:block;height:0;left:10px;position:absolute;top:-12px;width:0} .button{-moz-background-clip:border;-moz-background-origin:border;-moz-border-radius:4px;-moz-box-shadow:0 1px 1px rgba(0,0,0,.08);-ms-background-origin:border-box;-ms-border-radius:4px;-o-background-origin:border-box;-o-border-radius:4px;-webkit-background-clip:border;-webkit-background-origin:border;-webkit-border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);background-clip:border-box;background-image:linear-gradient(top,#fbfbfb 1px,#fff 0,#fff 2px,#fbfbfb 0,#ececec);background-origin:border-box;border:1px solid rgba(0,0,0,.2);border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.08);color:#444;cursor:pointer;display:inline-block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;font-weight:600;height:32px;line-height:1;margin:0 3.5px 0 0;padding:9px 12px;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fff;vertical-align:middle;zoom:1} .button:after,.button:before{content:"";display:table} .button:after{clear:both} @@ -318,7 +318,7 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} .has-dropdown.button-dropdown{display:inline-block;margin-right:3.5px} .has-dropdown.button-dropdown .button{margin-right:0;padding-right:26px} .has-dropdown.button-dropdown .button .caret{display:block;height:32px;position:absolute;right:12px;top:0;width:10px} -.has-dropdown.button-dropdown .button .caret:after{border:5px solid transparent;border-top:5px solid #444;content:"";display:block;height:0;left:0;position:absolute;top:13.5px;width:0} +.has-dropdown.button-dropdown .button .caret:after{border:5px solid transparent;border-top-color:#444;content:"";display:block;height:0;left:0;position:absolute;top:13.5px;width:0} .has-dropdown.button-dropdown .dropdown{border-radius:0 4px 4px 4px;left:0;margin-top:-1px} .has-dropdown.button-dropdown .dropdown.right{border-radius:4px 0 4px 4px;left:auto;right:0} .has-dropdown.button-dropdown .dropdown>li>a{padding-left:12px;padding-right:12px} @@ -352,9 +352,9 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} .top-bar .top-bar-links>li.active a{background-color:#090909} .top-bar .top-bar-links>li.has-dropdown>a{padding-right:31px} .top-bar .top-bar-links>li.has-dropdown>a .caret{display:block;height:50px;position:absolute;right:14px;top:0;width:10px} -.top-bar .top-bar-links>li.has-dropdown>a .caret:after{border:5px solid transparent;border-top:5px solid #fff;content:"";display:block;height:0;left:0;margin-top:-1px;position:absolute;top:50%;width:0} +.top-bar .top-bar-links>li.has-dropdown>a .caret:after{border:5px solid transparent;border-top-color:#fff;content:"";display:block;height:0;left:0;margin-top:-1px;position:absolute;top:50%;width:0} .top-bar .top-bar-links>li.has-dropdown .dropdown{border-top:0} -.top-bar .top-bar-links>li.has-dropdown.open>a .caret:after{border:5px solid transparent;border-top:5px solid #444;content:"";display:block;height:0;position:absolute;width:0} +.top-bar .top-bar-links>li.has-dropdown.open>a .caret:after{border:5px solid transparent;border-top-color:#444;content:"";display:block;height:0;position:absolute;width:0} .top-bar .button{-moz-box-shadow:0 1px 0 rgba(0,0,0,.2);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2);background-image:linear-gradient(top,#3c3c3c 1px,#484848 0,#484848 2px,#3c3c3c 0,#222);box-shadow:0 1px 0 rgba(0,0,0,.2);color:#fff;margin-top:9px;text-shadow:0 1px 0 rgba(0,0,0,.2)} .top-bar .button:hover{background-image:linear-gradient(top,#484848 1px,#555 0,#555 2px,#555 0,#2f2f2f)} .top-bar .button.active,.top-bar .button:active{-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.15);background-image:linear-gradient(top,#222,#2f2f2f);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)} diff --git a/packages/cssnano-preset-advanced/src/__tests__/integrations/picnic.css b/packages/cssnano-preset-advanced/src/__tests__/integrations/picnic.css index 0612c8337..9503a3a6e 100644 --- a/packages/cssnano-preset-advanced/src/__tests__/integrations/picnic.css +++ b/packages/cssnano-preset-advanced/src/__tests__/integrations/picnic.css @@ -901,7 +901,7 @@ input.stack:focus+input,input.stack:focus+select,input.stack:focus+textarea,sele [data-tooltip]{position:relative} [data-tooltip]:after,[data-tooltip]:before{border-width:0;height:0;left:0;margin-top:12px;opacity:0;overflow:hidden;padding:0;position:absolute;top:calc(100% - 6px);transition:opacity .6s ease,height 0s ease .6s;z-index:1} [data-tooltip]:after{background:#111;content:attr(data-tooltip);font-size:.8em;margin-left:0;white-space:nowrap} -[data-tooltip]:before{border:0 solid transparent;border-bottom:0 solid #111;content:"";height:0;left:10px;margin-top:0;width:0} +[data-tooltip]:before{border:0 solid transparent;border-bottom-color:#111;content:"";height:0;left:10px;margin-top:0;width:0} [data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{border-width:6px;height:auto;opacity:1} [data-tooltip]:focus:after,[data-tooltip]:hover:after{padding:.45em .9em} .tooltip-top:after,.tooltip-top:before{bottom:calc(100% - 6px);left:0;margin-bottom:12px;top:auto} diff --git a/packages/cssnano-preset-advanced/src/__tests__/integrations/schema.css b/packages/cssnano-preset-advanced/src/__tests__/integrations/schema.css index 84ab2cc45..b1f6e4c53 100644 --- a/packages/cssnano-preset-advanced/src/__tests__/integrations/schema.css +++ b/packages/cssnano-preset-advanced/src/__tests__/integrations/schema.css @@ -437,7 +437,7 @@ input[type=checkbox],input[type=radio]{line-height:normal;margin-top:1px\9;*marg .dropdown.open{z-index:1} .dropdown:hover{box-shadow:0 0 5px rgba(0,0,0,.15)} .dropdown.focus{box-shadow:0 0 5px rgba(51,102,248,.4)} -.dropdown .carat{border:6px solid transparent;border-top:6px solid #ccc;margin-top:-3px;position:absolute;right:12px;top:50%} +.dropdown .carat{border:6px solid transparent;border-top-color:#ccc;margin-top:-3px;position:absolute;right:12px;top:50%} .dropdown.open .carat{border-bottom:6px solid #ccc;border-top:6px solid transparent;margin-top:-10px} .dropdown .old{height:0;overflow:hidden;width:0} .dropdown .old,.dropdown select{left:0;position:absolute;top:0} @@ -445,7 +445,7 @@ input[type=checkbox],input[type=radio]{line-height:normal;margin-top:1px\9;*marg .dropdown.touch select{height:100%;opacity:0;width:100%} .dropdown .selected,.dropdown li{color:inherit;display:block;font-size:16px;font-size:1rem;line-height:1;overflow:hidden;padding:9px 12px;white-space:nowrap} .dropdown .selected:after{bottom:0;content:"";position:absolute;right:0;top:0;width:60px} -.dropdown div{background:#fff;border:1px solid;border-color:#eee #ccc #ccc;border-radius:0 0 6px 6px;height:0;left:-1px;margin-top:-1px;opacity:0;overflow:hidden;position:absolute;right:-1px;top:100%} +.dropdown div{background:#fff;border:1px solid #ccc;border-radius:0 0 6px 6px;border-top-color:#eee;height:0;left:-1px;margin-top:-1px;opacity:0;overflow:hidden;position:absolute;right:-1px;top:100%} .dropdown.open div{opacity:1;z-index:1} .dropdown.scrollable div:after{bottom:0;content:"";height:50px;left:0;position:absolute;right:0} .dropdown.scrollable.bottom div:after{opacity:0} diff --git a/packages/cssnano-preset-advanced/src/__tests__/integrations/semantic2.css b/packages/cssnano-preset-advanced/src/__tests__/integrations/semantic2.css index 36b9f34b6..9531647da 100644 --- a/packages/cssnano-preset-advanced/src/__tests__/integrations/semantic2.css +++ b/packages/cssnano-preset-advanced/src/__tests__/integrations/semantic2.css @@ -112,7 +112,7 @@ input::selection,textarea::selection{background-color:hsla(0,0%,39.2%,.4);color: .ui.loading.loading.loading.loading.loading.loading.button{-webkit-transition:all 0s linear,opacity .1s ease;color:transparent!important;cursor:default;opacity:1;pointer-events:auto;position:relative;text-shadow:none!important;transition:all 0s linear,opacity .1s ease} .ui.loading.button:before{border:.2em solid rgba(0,0,0,.15);border-radius:500rem} .ui.loading.button:after,.ui.loading.button:before{content:"";height:1.28571429em;left:50%;margin:-.64285714em 0 0 -.64285714em;position:absolute;top:50%;width:1.28571429em} -.ui.loading.button:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #fff;box-shadow:0 0 0 1px transparent} +.ui.loading.button:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#fff;box-shadow:0 0 0 1px transparent} .ui.labeled.icon.loading.button .icon{background-color:transparent;box-shadow:none} .ui.basic.loading.button:not(.inverted):before{border-color:rgba(0,0,0,.1)} .ui.basic.loading.button:not(.inverted):after{border-top-color:#767676} @@ -208,7 +208,7 @@ input::selection,textarea::selection{background-color:hsla(0,0%,39.2%,.4);color: .ui.basic.inverted.active.button,.ui.basic.inverted.buttons .active.button{background-color:hsla(0,0%,100%,.08);box-shadow:inset 0 0 0 2px hsla(0,0%,100%,.7);color:#fff;text-shadow:none} .ui.basic.inverted.active.button:hover,.ui.basic.inverted.buttons .active.button:hover{background-color:hsla(0,0%,100%,.15);box-shadow:inset 0 0 0 2px #fff!important} .ui.basic.buttons .button{border-left:1px solid rgba(34,36,38,.15);box-shadow:none} -.ui.basic.vertical.buttons .button{border-left:none;border-top:1px solid rgba(34,36,38,.15)} +.ui.basic.vertical.buttons .button{border-left:none;border-left-width:0;border-top:1px solid rgba(34,36,38,.15)} .ui.basic.vertical.buttons .button:first-child{border-top-width:0} .ui.labeled.icon.button,.ui.labeled.icon.buttons .button{padding-left:4.07142857em!important;padding-right:1.5em!important;position:relative} .ui.labeled.icon.button>.icon,.ui.labeled.icon.buttons>.button>.icon{background-color:rgba(0,0,0,.05);border-bottom-left-radius:inherit;border-radius:0;border-top-left-radius:inherit;box-shadow:inset -1px 0 0 0 transparent;color:"";height:100%;left:0;line-height:1;position:absolute;text-align:center;top:0;width:2.57142857em} @@ -1891,7 +1891,7 @@ img.ui.image{display:block} .ui.input.down input,.ui.input input:active{background:#fafafa;border-color:rgba(0,0,0,.3);box-shadow:none;color:rgba(0,0,0,.87)} .ui.loading.loading.input>i.icon:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem} .ui.loading.loading.input>i.icon:after,.ui.loading.loading.input>i.icon:before{content:"";height:1.28571429em;left:50%;margin:-.64285714em 0 0 -.64285714em;position:absolute;top:50%;width:1.28571429em} -.ui.loading.loading.input>i.icon:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent} +.ui.loading.loading.input>i.icon:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent} .ui.input.focus input,.ui.input input:focus{background:#fff;border-color:#85b7d9;box-shadow:none;color:rgba(0,0,0,.8)} .ui.input.focus input::-webkit-input-placeholder,.ui.input input:focus::-webkit-input-placeholder{color:rgba(0,0,0,.87)} .ui.input.focus input::-moz-placeholder,.ui.input input:focus::-moz-placeholder{color:rgba(0,0,0,.87)} @@ -2308,7 +2308,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.loader{-ms-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);display:none;left:50%;margin:0;position:absolute;text-align:center;top:50%;transform:translateX(-50%) translateY(-50%);z-index:1000} .ui.loader:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem} .ui.loader:after,.ui.loader:before{content:"";height:100%;left:50%;position:absolute;top:0;width:100%} -.ui.loader:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent} +.ui.loader:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent} .ui.loader:after,.ui.loader:before{height:2.2585em;margin:0 0 0 -1.12925em;width:2.2585em} .ui.mini.loader:after,.ui.mini.loader:before{height:1.2857em;margin:0 0 0 -.64285em;width:1.2857em} .ui.small.loader:after,.ui.small.loader:before{height:1.7142em;margin:0 0 0 -.8571em;width:1.7142em} @@ -2476,7 +2476,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.disabled.segment{color:rgba(40,40,40,.3);opacity:.45} .ui.loading.segment{-webkit-transition:all 0s linear;color:transparent!important;cursor:default;point-events:none;position:relative;text-shadow:none!important;transition:all 0s linear} .ui.loading.segment:before{background:hsla(0,0%,100%,.8);border-radius:.28571429rem;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:100} -.ui.loading.segment:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid rgba(0,0,0,.1);border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent;content:"";height:3em;left:50%;margin:-1.5em 0 0 -1.5em;position:absolute;top:50%;visibility:visible;width:3em;z-index:101} +.ui.loading.segment:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid rgba(0,0,0,.1);border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent;content:"";height:3em;left:50%;margin:-1.5em 0 0 -1.5em;position:absolute;top:50%;visibility:visible;width:3em;z-index:101} .ui.basic.segment{background:none transparent;border:none;border-radius:0;box-shadow:none} .ui.clearing.segment:after{clear:both;content:".";display:block;height:0;visibility:hidden} .ui.red.segment:not(.inverted){border-top:2px solid #db2828} @@ -2540,7 +2540,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.steps:last-child{margin-bottom:0} .ui.steps .step{-ms-flex:1 0 auto;-ms-flex-align:center;-ms-flex-pack:center;-ms-flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-webkit-box-flex:1;-webkit-box-pack:center;-webkit-flex:1 0 auto;-webkit-flex-wrap:wrap;-webkit-justify-content:center;align-items:center;background:#fff;border:none;border-radius:0;border-right:1px solid rgba(34,36,38,.15);box-shadow:none;color:rgba(0,0,0,.87);display:flex;flex:1 0 auto;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0;padding:1.14285714em 2em;position:relative;vertical-align:middle} .ui.steps .step,.ui.steps .step:after{transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease} -.ui.steps .step:after{-ms-transform:translateY(-50%) translateX(50%) rotate(-45deg);-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);background-color:#fff;border:medium solid rgba(34,36,38,.15);border-width:0 1px 1px 0;content:"";display:none;height:1.14285714em;position:absolute;right:0;top:50%;transform:translateY(-50%) translateX(50%) rotate(-45deg);width:1.14285714em;z-index:2} +.ui.steps .step:after{-ms-transform:translateY(-50%) translateX(50%) rotate(-45deg);-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);background-color:#fff;border:solid rgba(34,36,38,.15);border-width:0 1px 1px 0;content:"";display:none;height:1.14285714em;position:absolute;right:0;top:50%;transform:translateY(-50%) translateX(50%) rotate(-45deg);width:1.14285714em;z-index:2} .ui.steps .step:first-child{border-radius:.28571429rem 0 0 .28571429rem;padding-left:2em} .ui.steps .step:last-child{border-radius:0 .28571429rem .28571429rem 0;border-right:none;margin-right:0} .ui.steps .step:only-child{border-radius:.28571429rem} @@ -2731,7 +2731,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.form .field.disabled :disabled{opacity:1} .ui.loading.form{-webkit-transition:all 0s linear;color:transparent!important;cursor:default;point-events:none;position:relative;text-shadow:none!important;transition:all 0s linear;z-index:100} .ui.loading.form:before{background:hsla(0,0%,100%,.8);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:100} -.ui.loading.form:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid rgba(0,0,0,.1);border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent;content:"";height:3em;left:50%;margin:-1.5em 0 0 -1.5em;position:absolute;top:50%;visibility:visible;width:3em;z-index:101} +.ui.loading.form:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid rgba(0,0,0,.1);border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent;content:"";height:3em;left:50%;margin:-1.5em 0 0 -1.5em;position:absolute;top:50%;visibility:visible;width:3em;z-index:101} .ui.form .required.field>.checkbox:after,.ui.form .required.field>label:after,.ui.form .required.fields.grouped>label:after,.ui.form .required.fields:not(.grouped)>.field>.checkbox:after,.ui.form .required.fields:not(.grouped)>.field>label:after{color:#db2828;content:"*";margin:-.2em 0 0 .2em} .ui.form .required.field>label:after,.ui.form .required.fields.grouped>label:after,.ui.form .required.fields:not(.grouped)>.field>label:after{display:inline-block;vertical-align:top} .ui.form .required.field>.checkbox:after,.ui.form .required.fields:not(.grouped)>.field>.checkbox:after{left:100%;position:absolute;top:0} @@ -3199,7 +3199,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.tabular.menu .item{background:transparent;border-color:transparent transparent currentColor;border-style:solid solid none;border-width:2px 1px none;color:rgba(0,0,0,.87);padding:.92857143em 1.42857143em} .ui.tabular.menu .item:before{display:none} .ui.tabular.menu .item:hover{background-color:transparent;color:rgba(0,0,0,.8)} -.ui.tabular.menu .active.item{background:none #fff;border-color:#d4d4d5;border-radius:.28571429rem .28571429rem 0 0!important;box-shadow:none;color:rgba(0,0,0,.95);font-weight:700;margin-bottom:-1px} +.ui.tabular.menu .active.item{background:none #fff;border-color:#d4d4d5;border-radius:.28571429rem .28571429rem 0 0!important;border-top-width:1px;box-shadow:none;color:rgba(0,0,0,.95);font-weight:700;margin-bottom:-1px} .ui.tabular.menu+.bottom.attached.segment{border-top:none;margin:0;width:100%} .top.attached.segment+.ui.bottom.tabular.menu{left:-1px;position:relative;width:calc(100% + 2px)} .ui.bottom.tabular.menu{background:none transparent;border-bottom:none;border-radius:0;border-top:1px solid #d4d4d5;box-shadow:none!important} @@ -3247,7 +3247,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.secondary.pointing.menu .active.item{background-color:transparent;box-shadow:none;font-weight:700} .ui.secondary.pointing.menu .active.item,.ui.secondary.pointing.menu .active.item:hover{border-color:#1b1c1d;color:rgba(0,0,0,.95)} .ui.secondary.pointing.menu .active.dropdown.item{border-color:transparent} -.ui.secondary.vertical.pointing.menu{border-right:2px solid rgba(34,36,38,.15)} +.ui.secondary.vertical.pointing.menu{border-bottom-width:0;border-right:2px solid rgba(34,36,38,.15)} .ui.secondary.vertical.pointing.menu .item{border-bottom:none;border-radius:0!important;border-right:2px solid transparent;margin:0 -2px 0 0} .ui.secondary.vertical.pointing.menu .active.item{border-color:#1b1c1d} .ui.secondary.inverted.pointing.menu{border-color:hsla(0,0%,100%,.1);border-color:rgba(34,36,38,.15);border-width:2px} @@ -4434,7 +4434,7 @@ select.ui.dropdown{border:1px solid rgba(34,36,38,.15);height:38px;padding:.5em; .ui.multiple.loading.dropdown>i.icon:after,.ui.multiple.loading.dropdown>i.icon:before{left:0!important;top:0!important} .ui.loading.dropdown>i.icon:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem} .ui.loading.dropdown>i.icon:after,.ui.loading.dropdown>i.icon:before{content:"";height:1.28571429em;left:50%;margin:-.64285714em 0 0 -.64285714em;position:absolute;top:50%;width:1.28571429em} -.ui.loading.dropdown>i.icon:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent} +.ui.loading.dropdown>i.icon:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent} .ui.loading.dropdown.button>i.icon:after,.ui.loading.dropdown.button>i.icon:before{display:none} @-webkit-keyframes a{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} @@ -4923,7 +4923,7 @@ a.ui.nag{cursor:pointer} .ui.search>.prompt:focus{background:#fff;border-color:rgba(34,36,38,.35);color:rgba(0,0,0,.95)} .ui.loading.search .input>i.icon:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem} .ui.loading.search .input>i.icon:after,.ui.loading.search .input>i.icon:before{content:"";height:1.28571429em;left:50%;margin:-.64285714em 0 0 -.64285714em;position:absolute;top:50%;width:1.28571429em} -.ui.loading.search .input>i.icon:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent} +.ui.loading.search .input>i.icon:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent} .ui.category.search>.results .category .result:hover,.ui.search>.results .result:hover{background:#f9fafb} .ui.search .action:hover{background:#e0e0e0} .ui.category.search>.results .category.active{background:#f3f4f5} @@ -5101,7 +5101,7 @@ html.ios,html.ios body{height:auto!important} .ui.tab.loading{display:block;min-height:250px;overflow:hidden;position:relative} .ui.tab.loading *{left:-10000px!important;position:relative!important} .ui.tab.loading.segment:before,.ui.tab.loading:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem;content:"";height:2.5em;left:50%;margin:-1.25em 0 0 -1.25em;position:absolute;top:100px;width:2.5em} -.ui.tab.loading.segment:after,.ui.tab.loading:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent;content:"";height:2.5em;left:50%;margin:-1.25em 0 0 -1.25em;position:absolute;top:100px;width:2.5em} +.ui.tab.loading.segment:after,.ui.tab.loading:after{-webkit-animation:a .6s linear;-webkit-animation-iteration-count:infinite;animation:a .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent;content:"";height:2.5em;left:50%;margin:-1.25em 0 0 -1.25em;position:absolute;top:100px;width:2.5em} /*! * # Semantic UI 2.1.3 - Transition * http://github.com/semantic-org/semantic-ui/ diff --git a/packages/cssnano-preset-advanced/src/__tests__/integrations/turret.css b/packages/cssnano-preset-advanced/src/__tests__/integrations/turret.css index 7dda8fb25..a7d60c92c 100644 --- a/packages/cssnano-preset-advanced/src/__tests__/integrations/turret.css +++ b/packages/cssnano-preset-advanced/src/__tests__/integrations/turret.css @@ -111,7 +111,7 @@ blockquote{color:#555;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font blockquote p{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;margin:0} blockquote cite{display:block;font-size:1.6rem;font-style:normal;margin:1rem 0;text-align:left} .pullout,blockquote cite{color:#555;font-family:Helvetica Neue,Helvetica,Arial,sans-serif} -.pullout{border:#3455db currentColor;border-width:0 0 0 .4rem;font-size:1.8rem;font-weight:300;margin:3rem 0;padding:0 2rem} +.pullout{border:solid #3455db;border-width:0 0 0 .4rem;font-size:1.8rem;font-weight:300;margin:3rem 0;padding:0 2rem} ol,ul{margin:2rem 0;padding:0} ol li,ul li{color:#555;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;line-height:1.5;margin:1rem 0 1rem 2rem;padding:0 0 0 .5rem} ol li ul,ul li ul{margin:1rem 0;padding:0} @@ -1535,7 +1535,7 @@ select{display:block;width:100%} } @-moz-document url-prefix(){ .select select{padding-right:1rem;text-indent:.01px;text-overflow:""} - .select:before{background:#fff;background-clip:padding-box;border:solid #ddd;border-radius:0 2px 2px 0;border-width:1px 1px 1px 0;bottom:0;content:"";pointer-events:none;position:absolute;right:0;top:0;width:1em;z-index:2} + .select:before{background:#fff;background-clip:padding-box;border:1px solid #ddd;border-left-width:0;border-radius:0 2px 2px 0;bottom:0;content:"";pointer-events:none;position:absolute;right:0;top:0;width:1em;z-index:2} .select.large:before{width:1.5em} .select.select-inverse:before{background:#222;border:none}} .select-xlarge select{font-size:2rem;height:6rem;line-height:6rem;padding:0 3rem} diff --git a/packages/cssnano-preset-advanced/src/__tests__/integrations/vital.css b/packages/cssnano-preset-advanced/src/__tests__/integrations/vital.css index 98b0cdeea..610c96467 100644 --- a/packages/cssnano-preset-advanced/src/__tests__/integrations/vital.css +++ b/packages/cssnano-preset-advanced/src/__tests__/integrations/vital.css @@ -239,7 +239,7 @@ nav ul ul li:hover>ul{left:auto;right:-12.5em;top:0} .hero .section{padding:4em 1em} .hero h1{font-size:2.4em} } -.load{-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-name:a;-moz-animation-timing-function:linear;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:a;-webkit-animation-timing-function:linear;animation-duration:1s;animation-iteration-count:infinite;animation-name:a;animation-timing-function:linear;border:3px solid #ddd;border-left:3px solid #666;border-radius:99em;display:inline-block;height:2em;width:2em} +.load{-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-name:a;-moz-animation-timing-function:linear;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:a;-webkit-animation-timing-function:linear;animation-duration:1s;animation-iteration-count:infinite;animation-name:a;animation-timing-function:linear;border:3px solid #ddd;border-left-color:#666;border-radius:99em;display:inline-block;height:2em;width:2em} .load.smallest{border-width:1px;height:9px;width:9px} .load.small{border-width:2px;height:16px;width:16px} .load.large{border-width:4px;height:48px;width:48px} diff --git a/packages/cssnano-preset-default/src/__tests__/integrations/base.css b/packages/cssnano-preset-default/src/__tests__/integrations/base.css index 8e869f824..02e3b1870 100644 --- a/packages/cssnano-preset-default/src/__tests__/integrations/base.css +++ b/packages/cssnano-preset-default/src/__tests__/integrations/base.css @@ -573,7 +573,7 @@ input:-ms-input-placeholder{color:#999} .checkbox label,.radio label{display:inline-block;padding-left:20px;padding-top:0} .checkbox input[type=checkbox],.checkbox input[type=radio],.radio input[type=checkbox],.radio input[type=radio]{left:0;position:absolute;top:4px} .select{display:block;position:relative} -.select:before{border:6px solid transparent;border-top:6px solid #676767;content:"";margin-top:-3px;pointer-events:none;position:absolute;right:10px;top:50%} +.select:before{border:6px solid transparent;border-top-color:#676767;content:"";margin-top:-3px;pointer-events:none;position:absolute;right:10px;top:50%} .select select{-moz-appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #ccc;display:block;height:36px;line-height:normal;padding:0 10px;width:100%} .select select::-ms-expand{display:none} .select select:focus{border-color:#f7c723} diff --git a/packages/cssnano-preset-default/src/__tests__/integrations/helium.css b/packages/cssnano-preset-default/src/__tests__/integrations/helium.css index 98840ada3..f03dad023 100644 --- a/packages/cssnano-preset-default/src/__tests__/integrations/helium.css +++ b/packages/cssnano-preset-default/src/__tests__/integrations/helium.css @@ -230,7 +230,7 @@ input,label,textarea{color:#444;font-family:Helvetica Neue,Helvetica,Arial,sans- @media screen and (min-width:981px){ .field-group .fields{position:relative} .field-group .fields .error-message{left:100%;margin-left:12px;margin-top:0;position:absolute;top:2px;white-space:nowrap} - .field-group .fields .error-message:after{border:6px solid transparent;border-right:6px solid #a01d2b;content:"";display:block;height:0;left:-12px;position:absolute;top:6px;width:0} + .field-group .fields .error-message:after{border:6px solid transparent;border-right-color:#a01d2b;content:"";display:block;height:0;left:-12px;position:absolute;top:6px;width:0} } .input-inline{display:inline-block;height:30px;line-height:30px} .multi-field{zoom:1} @@ -267,7 +267,7 @@ input.char16{width:182px!important} select{-webkit-appearance:none;display:block;font-size:14px;opacity:0;padding:0 7px;width:100%;z-index:1} select option{font-size:11px} .select-mask{background:#fff;left:0;line-height:1;padding-top:7px;position:absolute;top:0;z-index:-1} -.select-mask:after{border:5px solid transparent;border-top:5px solid #222;content:"";display:block;height:0;position:absolute;right:10px;top:12px;width:0} +.select-mask:after{border:5px solid transparent;border-top-color:#222;content:"";display:block;height:0;position:absolute;right:10px;top:12px;width:0} ::-webkit-input-placeholder{-moz-transition:.2s all;-o-transition:.2s all;-webkit-transition:all .2s;color:#999;transition:all .2s} :-moz-placeholder{-moz-transition:.2s all;-o-transition:.2s all;-webkit-transition:all .2s;color:#999;transition:all .2s} ::-webkit-input-placeholder:focus{color:#bfbfbf} @@ -287,7 +287,7 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} .error label{color:#a01d2b} .error input{border-color:#a01d2b} .error-message{-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;background:#a01d2b;border-radius:2px;color:#fff;display:inline-block;font-size:12px;line-height:12px;margin-top:7px;padding:7px;position:relative} -.error-message:after{border:6px solid transparent;border-bottom:6px solid #a01d2b;content:"";display:block;height:0;left:10px;position:absolute;top:-12px;width:0} +.error-message:after{border:6px solid transparent;border-bottom-color:#a01d2b;content:"";display:block;height:0;left:10px;position:absolute;top:-12px;width:0} .button{-moz-background-clip:border;-moz-background-origin:border;-moz-border-radius:4px;-moz-box-shadow:0 1px 1px rgba(0,0,0,.08);-ms-background-origin:border-box;-ms-border-radius:4px;-o-background-origin:border-box;-o-border-radius:4px;-webkit-background-clip:border;-webkit-background-origin:border;-webkit-border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);background-clip:border-box;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(1px,#fbfbfb),color-stop(1px,#fff),color-stop(2px,#fff),color-stop(2px,#fbfbfb),color-stop(100%,#ececec));background-image:-webkit-linear-gradient(top,#fbfbfb 1px,#fff 0,#fff 2px,#fbfbfb 0,#ececec);background-image:-moz-linear-gradient(top,#fbfbfb 1px,#fff 1px,#fff 2px,#fbfbfb 2px,#ececec 100%);background-image:-o-linear-gradient(top,#fbfbfb 1px,#fff 1px,#fff 2px,#fbfbfb 2px,#ececec 100%);background-image:linear-gradient(top,#fbfbfb 1px,#fff 0,#fff 2px,#fbfbfb 0,#ececec);background-origin:border-box;border:1px solid rgba(0,0,0,.2);border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.08);color:#444;cursor:pointer;display:inline-block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;font-weight:600;height:32px;line-height:1;margin:0 3.5px 0 0;padding:9px 12px;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fff;vertical-align:middle;zoom:1} .button:after,.button:before{content:"";display:table} .button:after{clear:both} @@ -318,7 +318,7 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} .has-dropdown.button-dropdown{display:inline-block;margin-right:3.5px} .has-dropdown.button-dropdown .button{margin-right:0;padding-right:26px} .has-dropdown.button-dropdown .button .caret{display:block;height:32px;position:absolute;right:12px;top:0;width:10px} -.has-dropdown.button-dropdown .button .caret:after{border:5px solid transparent;border-top:5px solid #444;content:"";display:block;height:0;left:0;position:absolute;top:13.5px;width:0} +.has-dropdown.button-dropdown .button .caret:after{border:5px solid transparent;border-top-color:#444;content:"";display:block;height:0;left:0;position:absolute;top:13.5px;width:0} .has-dropdown.button-dropdown .dropdown{-moz-border-radius:0 4px 4px 4px;-ms-border-radius:0 4px 4px 4px;-o-border-radius:0 4px 4px 4px;-webkit-border-radius:0 4px 4px 4px;border-radius:0 4px 4px 4px;left:0;margin-top:-1px} .has-dropdown.button-dropdown .dropdown.right{-moz-border-radius:4px 0 4px 4px;-ms-border-radius:4px 0 4px 4px;-o-border-radius:4px 0 4px 4px;-webkit-border-radius:4px 0 4px 4px;border-radius:4px 0 4px 4px;left:auto;right:0} .has-dropdown.button-dropdown .dropdown>li>a{padding-left:12px;padding-right:12px} @@ -352,9 +352,9 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} .top-bar .top-bar-links>li.active a{background-color:#090909} .top-bar .top-bar-links>li.has-dropdown>a{padding-right:31px} .top-bar .top-bar-links>li.has-dropdown>a .caret{display:block;height:50px;position:absolute;right:14px;top:0;width:10px} -.top-bar .top-bar-links>li.has-dropdown>a .caret:after{border:5px solid transparent;border-top:5px solid #fff;content:"";display:block;height:0;left:0;margin-top:-1px;position:absolute;top:50%;width:0} +.top-bar .top-bar-links>li.has-dropdown>a .caret:after{border:5px solid transparent;border-top-color:#fff;content:"";display:block;height:0;left:0;margin-top:-1px;position:absolute;top:50%;width:0} .top-bar .top-bar-links>li.has-dropdown .dropdown{border-top:0} -.top-bar .top-bar-links>li.has-dropdown.open>a .caret:after{border:5px solid transparent;border-top:5px solid #444;content:"";display:block;height:0;position:absolute;width:0} +.top-bar .top-bar-links>li.has-dropdown.open>a .caret:after{border:5px solid transparent;border-top-color:#444;content:"";display:block;height:0;position:absolute;width:0} .top-bar .button{-moz-box-shadow:0 1px 0 rgba(0,0,0,.2);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2);background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(1px,#3c3c3c),color-stop(1px,#484848),color-stop(2px,#484848),color-stop(2px,#3c3c3c),color-stop(100%,#222));background-image:-webkit-linear-gradient(top,#3c3c3c 1px,#484848 0,#484848 2px,#3c3c3c 0,#222);background-image:-moz-linear-gradient(top,#3c3c3c 1px,#484848 1px,#484848 2px,#3c3c3c 2px,#222 100%);background-image:-o-linear-gradient(top,#3c3c3c 1px,#484848 1px,#484848 2px,#3c3c3c 2px,#222 100%);background-image:linear-gradient(top,#3c3c3c 1px,#484848 0,#484848 2px,#3c3c3c 0,#222);box-shadow:0 1px 0 rgba(0,0,0,.2);color:#fff;margin-top:9px;text-shadow:0 1px 0 rgba(0,0,0,.2)} .top-bar .button:hover{background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(1px,#484848),color-stop(1px,#555),color-stop(2px,#555),color-stop(2px,#555),color-stop(100%,#2f2f2f));background-image:-webkit-linear-gradient(top,#484848 1px,#555 0,#555 2px,#555 0,#2f2f2f);background-image:-moz-linear-gradient(top,#484848 1px,#555 1px,#555 2px,#555 2px,#2f2f2f 100%);background-image:-o-linear-gradient(top,#484848 1px,#555 1px,#555 2px,#555 2px,#2f2f2f 100%);background-image:linear-gradient(top,#484848 1px,#555 0,#555 2px,#555 0,#2f2f2f)} .top-bar .button.active,.top-bar .button:active{-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.15);background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#222),color-stop(100%,#2f2f2f));background-image:-webkit-linear-gradient(top,#222,#2f2f2f);background-image:-moz-linear-gradient(top,#222 0,#2f2f2f 100%);background-image:-o-linear-gradient(top,#222 0,#2f2f2f 100%);background-image:linear-gradient(top,#222,#2f2f2f);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)} diff --git a/packages/cssnano-preset-default/src/__tests__/integrations/picnic.css b/packages/cssnano-preset-default/src/__tests__/integrations/picnic.css index 92ba2b9b7..690867633 100644 --- a/packages/cssnano-preset-default/src/__tests__/integrations/picnic.css +++ b/packages/cssnano-preset-default/src/__tests__/integrations/picnic.css @@ -901,7 +901,7 @@ input.stack:focus+input,input.stack:focus+select,input.stack:focus+textarea,sele [data-tooltip]{position:relative} [data-tooltip]:after,[data-tooltip]:before{border-width:0;height:0;left:0;margin-top:12px;opacity:0;overflow:hidden;padding:0;position:absolute;top:calc(100% - 6px);transition:opacity .6s ease,height 0s ease .6s;z-index:10} [data-tooltip]:after{background:#111;content:attr(data-tooltip);font-size:.8em;margin-left:0;white-space:nowrap} -[data-tooltip]:before{border:0 solid transparent;border-bottom:0 solid #111;content:"";height:0;left:10px;margin-top:0;width:0} +[data-tooltip]:before{border:0 solid transparent;border-bottom-color:#111;content:"";height:0;left:10px;margin-top:0;width:0} [data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{border-width:6px;height:auto;opacity:1} [data-tooltip]:focus:after,[data-tooltip]:hover:after{padding:.45em .9em} .tooltip-top:after,.tooltip-top:before{bottom:calc(100% - 6px);left:0;margin-bottom:12px;top:auto} diff --git a/packages/cssnano-preset-default/src/__tests__/integrations/schema.css b/packages/cssnano-preset-default/src/__tests__/integrations/schema.css index 27c2b0cc3..7dc6bae76 100644 --- a/packages/cssnano-preset-default/src/__tests__/integrations/schema.css +++ b/packages/cssnano-preset-default/src/__tests__/integrations/schema.css @@ -437,7 +437,7 @@ input[type=checkbox],input[type=radio]{line-height:normal;margin-top:1px\9;*marg .dropdown.open{z-index:2} .dropdown:hover{box-shadow:0 0 5px rgba(0,0,0,.15)} .dropdown.focus{box-shadow:0 0 5px rgba(51,102,248,.4)} -.dropdown .carat{border:6px solid transparent;border-top:6px solid #ccc;margin-top:-3px;position:absolute;right:12px;top:50%} +.dropdown .carat{border:6px solid transparent;border-top-color:#ccc;margin-top:-3px;position:absolute;right:12px;top:50%} .dropdown.open .carat{border-bottom:6px solid #ccc;border-top:6px solid transparent;margin-top:-10px} .dropdown .old{height:0;overflow:hidden;width:0} .dropdown .old,.dropdown select{left:0;position:absolute;top:0} @@ -445,7 +445,7 @@ input[type=checkbox],input[type=radio]{line-height:normal;margin-top:1px\9;*marg .dropdown.touch select{height:100%;opacity:0;width:100%} .dropdown .selected,.dropdown li{color:inherit;display:block;font-size:16px;font-size:1rem;line-height:1;overflow:hidden;padding:9px 12px;white-space:nowrap} .dropdown .selected:after{bottom:0;content:"";position:absolute;right:0;top:0;width:60px} -.dropdown div{background:#fff;border:1px solid;border-color:#eee #ccc #ccc;border-radius:0 0 6px 6px;height:0;left:-1px;margin-top:-1px;opacity:0;overflow:hidden;position:absolute;right:-1px;top:100%} +.dropdown div{background:#fff;border:1px solid #ccc;border-radius:0 0 6px 6px;border-top-color:#eee;height:0;left:-1px;margin-top:-1px;opacity:0;overflow:hidden;position:absolute;right:-1px;top:100%} .dropdown.open div{opacity:1;z-index:2} .dropdown.scrollable div:after{bottom:0;content:"";height:50px;left:0;position:absolute;right:0} .dropdown.scrollable.bottom div:after{opacity:0} diff --git a/packages/cssnano-preset-default/src/__tests__/integrations/semantic2.css b/packages/cssnano-preset-default/src/__tests__/integrations/semantic2.css index bf8bf974e..9fade5433 100644 --- a/packages/cssnano-preset-default/src/__tests__/integrations/semantic2.css +++ b/packages/cssnano-preset-default/src/__tests__/integrations/semantic2.css @@ -112,7 +112,7 @@ input::selection,textarea::selection{background-color:hsla(0,0%,39.2%,.4);color: .ui.loading.loading.loading.loading.loading.loading.button{-webkit-transition:all 0s linear,opacity .1s ease;color:transparent!important;cursor:default;opacity:1;pointer-events:auto;position:relative;text-shadow:none!important;transition:all 0s linear,opacity .1s ease} .ui.loading.button:before{border:.2em solid rgba(0,0,0,.15);border-radius:500rem} .ui.loading.button:after,.ui.loading.button:before{content:"";height:1.28571429em;left:50%;margin:-.64285714em 0 0 -.64285714em;position:absolute;top:50%;width:1.28571429em} -.ui.loading.button:after{-webkit-animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:button-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #fff;box-shadow:0 0 0 1px transparent} +.ui.loading.button:after{-webkit-animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:button-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#fff;box-shadow:0 0 0 1px transparent} .ui.labeled.icon.loading.button .icon{background-color:transparent;box-shadow:none} @-webkit-keyframes button-spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} @@ -216,7 +216,7 @@ input::selection,textarea::selection{background-color:hsla(0,0%,39.2%,.4);color: .ui.basic.inverted.active.button,.ui.basic.inverted.buttons .active.button{background-color:hsla(0,0%,100%,.08);box-shadow:inset 0 0 0 2px hsla(0,0%,100%,.7);color:#fff;text-shadow:none} .ui.basic.inverted.active.button:hover,.ui.basic.inverted.buttons .active.button:hover{background-color:hsla(0,0%,100%,.15);box-shadow:inset 0 0 0 2px #fff!important} .ui.basic.buttons .button{border-left:1px solid rgba(34,36,38,.15);box-shadow:none} -.ui.basic.vertical.buttons .button{border-left:none;border-top:1px solid rgba(34,36,38,.15)} +.ui.basic.vertical.buttons .button{border-left:none;border-left-width:0;border-top:1px solid rgba(34,36,38,.15)} .ui.basic.vertical.buttons .button:first-child{border-top-width:0} .ui.labeled.icon.button,.ui.labeled.icon.buttons .button{padding-left:4.07142857em!important;padding-right:1.5em!important;position:relative} .ui.labeled.icon.button>.icon,.ui.labeled.icon.buttons>.button>.icon{background-color:rgba(0,0,0,.05);border-bottom-left-radius:inherit;border-radius:0;border-top-left-radius:inherit;box-shadow:inset -1px 0 0 0 transparent;color:"";height:100%;left:0;line-height:1;position:absolute;text-align:center;top:0;width:2.57142857em} @@ -1907,7 +1907,7 @@ img.ui.image{display:block} .ui.input.down input,.ui.input input:active{background:#fafafa;border-color:rgba(0,0,0,.3);box-shadow:none;color:rgba(0,0,0,.87)} .ui.loading.loading.input>i.icon:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem} .ui.loading.loading.input>i.icon:after,.ui.loading.loading.input>i.icon:before{content:"";height:1.28571429em;left:50%;margin:-.64285714em 0 0 -.64285714em;position:absolute;top:50%;width:1.28571429em} -.ui.loading.loading.input>i.icon:after{-webkit-animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:button-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent} +.ui.loading.loading.input>i.icon:after{-webkit-animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:button-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent} .ui.input.focus input,.ui.input input:focus{background:#fff;border-color:#85b7d9;box-shadow:none;color:rgba(0,0,0,.8)} .ui.input.focus input::-webkit-input-placeholder,.ui.input input:focus::-webkit-input-placeholder{color:rgba(0,0,0,.87)} .ui.input.focus input::-moz-placeholder,.ui.input input:focus::-moz-placeholder{color:rgba(0,0,0,.87)} @@ -2324,7 +2324,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.loader{-ms-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);display:none;left:50%;margin:0;position:absolute;text-align:center;top:50%;transform:translateX(-50%) translateY(-50%);z-index:1000} .ui.loader:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem} .ui.loader:after,.ui.loader:before{content:"";height:100%;left:50%;position:absolute;top:0;width:100%} -.ui.loader:after{-webkit-animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation:loader .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent} +.ui.loader:after{-webkit-animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation:loader .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent} @-webkit-keyframes loader{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} to{-webkit-transform:rotate(1turn);transform:rotate(1turn)} @@ -2500,7 +2500,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.disabled.segment{color:rgba(40,40,40,.3);opacity:.45} .ui.loading.segment{-webkit-transition:all 0s linear;color:transparent!important;cursor:default;point-events:none;position:relative;text-shadow:none!important;transition:all 0s linear} .ui.loading.segment:before{background:hsla(0,0%,100%,.8);border-radius:.28571429rem;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:100} -.ui.loading.segment:after{-webkit-animation:segment-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:segment-spin .6s linear;animation-iteration-count:infinite;border:.2em solid rgba(0,0,0,.1);border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent;content:"";height:3em;left:50%;margin:-1.5em 0 0 -1.5em;position:absolute;top:50%;visibility:visible;width:3em;z-index:101} +.ui.loading.segment:after{-webkit-animation:segment-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:segment-spin .6s linear;animation-iteration-count:infinite;border:.2em solid rgba(0,0,0,.1);border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent;content:"";height:3em;left:50%;margin:-1.5em 0 0 -1.5em;position:absolute;top:50%;visibility:visible;width:3em;z-index:101} @-webkit-keyframes segment-spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} to{-webkit-transform:rotate(1turn);transform:rotate(1turn)} @@ -2572,7 +2572,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.steps:last-child{margin-bottom:0} .ui.steps .step{-ms-flex:1 0 auto;-ms-flex-align:center;-ms-flex-direction:row;-ms-flex-pack:center;-ms-flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-webkit-box-direction:normal;-webkit-box-flex:1;-webkit-box-orient:horizontal;-webkit-box-pack:center;-webkit-flex:1 0 auto;-webkit-flex-direction:row;-webkit-flex-wrap:wrap;-webkit-justify-content:center;align-items:center;background:#fff;border:none;border-radius:0;border-right:1px solid rgba(34,36,38,.15);box-shadow:none;color:rgba(0,0,0,.87);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex:1 0 auto;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0;padding:1.14285714em 2em;position:relative;vertical-align:middle} .ui.steps .step,.ui.steps .step:after{-webkit-transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease} -.ui.steps .step:after{-ms-transform:translateY(-50%) translateX(50%) rotate(-45deg);-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);background-color:#fff;border:medium solid rgba(34,36,38,.15);border-width:0 1px 1px 0;content:"";display:none;height:1.14285714em;position:absolute;right:0;top:50%;transform:translateY(-50%) translateX(50%) rotate(-45deg);width:1.14285714em;z-index:2} +.ui.steps .step:after{-ms-transform:translateY(-50%) translateX(50%) rotate(-45deg);-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);background-color:#fff;border:solid rgba(34,36,38,.15);border-width:0 1px 1px 0;content:"";display:none;height:1.14285714em;position:absolute;right:0;top:50%;transform:translateY(-50%) translateX(50%) rotate(-45deg);width:1.14285714em;z-index:2} .ui.steps .step:first-child{border-radius:.28571429rem 0 0 .28571429rem;padding-left:2em} .ui.steps .step:last-child{border-radius:0 .28571429rem .28571429rem 0;border-right:none;margin-right:0} .ui.steps .step:only-child{border-radius:.28571429rem} @@ -2763,7 +2763,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.form .field.disabled :disabled{opacity:1} .ui.loading.form{-webkit-transition:all 0s linear;color:transparent!important;cursor:default;point-events:none;position:relative;text-shadow:none!important;transition:all 0s linear;z-index:100} .ui.loading.form:before{background:hsla(0,0%,100%,.8);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:100} -.ui.loading.form:after{-webkit-animation:form-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:form-spin .6s linear;animation-iteration-count:infinite;border:.2em solid rgba(0,0,0,.1);border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent;content:"";height:3em;left:50%;margin:-1.5em 0 0 -1.5em;position:absolute;top:50%;visibility:visible;width:3em;z-index:101} +.ui.loading.form:after{-webkit-animation:form-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:form-spin .6s linear;animation-iteration-count:infinite;border:.2em solid rgba(0,0,0,.1);border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent;content:"";height:3em;left:50%;margin:-1.5em 0 0 -1.5em;position:absolute;top:50%;visibility:visible;width:3em;z-index:101} @-webkit-keyframes form-spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} to{-webkit-transform:rotate(1turn);transform:rotate(1turn)} @@ -3239,7 +3239,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.tabular.menu .item{background:transparent;border-color:transparent transparent currentColor;border-style:solid solid none;border-width:2px 1px none;color:rgba(0,0,0,.87);padding:.92857143em 1.42857143em} .ui.tabular.menu .item:before{display:none} .ui.tabular.menu .item:hover{background-color:transparent;color:rgba(0,0,0,.8)} -.ui.tabular.menu .active.item{background:none #fff;border-color:#d4d4d5;border-radius:.28571429rem .28571429rem 0 0!important;box-shadow:none;color:rgba(0,0,0,.95);font-weight:700;margin-bottom:-1px} +.ui.tabular.menu .active.item{background:none #fff;border-color:#d4d4d5;border-radius:.28571429rem .28571429rem 0 0!important;border-top-width:1px;box-shadow:none;color:rgba(0,0,0,.95);font-weight:700;margin-bottom:-1px} .ui.tabular.menu+.bottom.attached.segment{border-top:none;margin:0;width:100%} .top.attached.segment+.ui.bottom.tabular.menu{left:-1px;position:relative;width:calc(100% + 2px)} .ui.bottom.tabular.menu{background:none transparent;border-bottom:none;border-radius:0;border-top:1px solid #d4d4d5;box-shadow:none!important} @@ -3287,7 +3287,7 @@ ol.ui.list li[value]:before{content:attr(value)} .ui.secondary.pointing.menu .active.item{background-color:transparent;box-shadow:none;font-weight:700} .ui.secondary.pointing.menu .active.item,.ui.secondary.pointing.menu .active.item:hover{border-color:#1b1c1d;color:rgba(0,0,0,.95)} .ui.secondary.pointing.menu .active.dropdown.item{border-color:transparent} -.ui.secondary.vertical.pointing.menu{border-right:2px solid rgba(34,36,38,.15)} +.ui.secondary.vertical.pointing.menu{border-bottom-width:0;border-right:2px solid rgba(34,36,38,.15)} .ui.secondary.vertical.pointing.menu .item{border-bottom:none;border-radius:0!important;border-right:2px solid transparent;margin:0 -2px 0 0} .ui.secondary.vertical.pointing.menu .active.item{border-color:#1b1c1d} .ui.secondary.inverted.pointing.menu{border-color:hsla(0,0%,100%,.1);border-color:rgba(34,36,38,.15);border-width:2px} @@ -4474,7 +4474,7 @@ select.ui.dropdown{border:1px solid rgba(34,36,38,.15);height:38px;padding:.5em; .ui.multiple.loading.dropdown>i.icon:after,.ui.multiple.loading.dropdown>i.icon:before{left:0!important;top:0!important} .ui.loading.dropdown>i.icon:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem} .ui.loading.dropdown>i.icon:after,.ui.loading.dropdown>i.icon:before{content:"";height:1.28571429em;left:50%;margin:-.64285714em 0 0 -.64285714em;position:absolute;top:50%;width:1.28571429em} -.ui.loading.dropdown>i.icon:after{-webkit-animation:dropdown-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:dropdown-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent} +.ui.loading.dropdown>i.icon:after{-webkit-animation:dropdown-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:dropdown-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent} .ui.loading.dropdown.button>i.icon:after,.ui.loading.dropdown.button>i.icon:before{display:none} @-webkit-keyframes dropdown-spin{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} @@ -4963,7 +4963,7 @@ a.ui.nag{cursor:pointer} .ui.search>.prompt:focus{background:#fff;border-color:rgba(34,36,38,.35);color:rgba(0,0,0,.95)} .ui.loading.search .input>i.icon:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem} .ui.loading.search .input>i.icon:after,.ui.loading.search .input>i.icon:before{content:"";height:1.28571429em;left:50%;margin:-.64285714em 0 0 -.64285714em;position:absolute;top:50%;width:1.28571429em} -.ui.loading.search .input>i.icon:after{-webkit-animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:button-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent} +.ui.loading.search .input>i.icon:after{-webkit-animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:button-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent} .ui.category.search>.results .category .result:hover,.ui.search>.results .result:hover{background:#f9fafb} .ui.search .action:hover{background:#e0e0e0} .ui.category.search>.results .category.active{background:#f3f4f5} @@ -5141,7 +5141,7 @@ html.ios,html.ios body{height:auto!important} .ui.tab.loading{display:block;min-height:250px;overflow:hidden;position:relative} .ui.tab.loading *{left:-10000px!important;position:relative!important} .ui.tab.loading.segment:before,.ui.tab.loading:before{border:.2em solid rgba(0,0,0,.1);border-radius:500rem;content:"";height:2.5em;left:50%;margin:-1.25em 0 0 -1.25em;position:absolute;top:100px;width:2.5em} -.ui.tab.loading.segment:after,.ui.tab.loading:after{-webkit-animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:button-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top:.2em solid #767676;box-shadow:0 0 0 1px transparent;content:"";height:2.5em;left:50%;margin:-1.25em 0 0 -1.25em;position:absolute;top:100px;width:2.5em} +.ui.tab.loading.segment:after,.ui.tab.loading:after{-webkit-animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation:button-spin .6s linear;animation-iteration-count:infinite;border:.2em solid transparent;border-radius:500rem;border-top-color:#767676;box-shadow:0 0 0 1px transparent;content:"";height:2.5em;left:50%;margin:-1.25em 0 0 -1.25em;position:absolute;top:100px;width:2.5em} /*! * # Semantic UI 2.1.3 - Transition * http://github.com/semantic-org/semantic-ui/ diff --git a/packages/cssnano-preset-default/src/__tests__/integrations/turret.css b/packages/cssnano-preset-default/src/__tests__/integrations/turret.css index 80ed3b623..85e6cf06d 100644 --- a/packages/cssnano-preset-default/src/__tests__/integrations/turret.css +++ b/packages/cssnano-preset-default/src/__tests__/integrations/turret.css @@ -111,7 +111,7 @@ blockquote{color:#555;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font blockquote p{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;margin:0} blockquote cite{display:block;font-size:1.6rem;font-style:normal;margin:1rem 0;text-align:left} .pullout,blockquote cite{color:#555;font-family:Helvetica Neue,Helvetica,Arial,sans-serif} -.pullout{border:#3455db currentColor;border-width:0 0 0 .4rem;font-size:1.8rem;font-weight:300;margin:3rem 0;padding:0 2rem} +.pullout{border:solid #3455db;border-width:0 0 0 .4rem;font-size:1.8rem;font-weight:300;margin:3rem 0;padding:0 2rem} ol,ul{margin:2rem 0;padding:0} ol li,ul li{color:#555;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;line-height:1.5;margin:1rem 0 1rem 2rem;padding:0 0 0 .5rem} ol li ul,ul li ul{margin:1rem 0;padding:0} @@ -1535,7 +1535,7 @@ select{display:block;width:100%} } @-moz-document url-prefix(){ .select select{padding-right:1rem;text-indent:.01px;text-overflow:""} - .select:before{background:#fff;background-clip:padding-box;border:solid #ddd;border-radius:0 2px 2px 0;border-width:1px 1px 1px 0;bottom:0;content:"";pointer-events:none;position:absolute;right:0;top:0;width:1em;z-index:2} + .select:before{background:#fff;background-clip:padding-box;border:1px solid #ddd;border-left-width:0;border-radius:0 2px 2px 0;bottom:0;content:"";pointer-events:none;position:absolute;right:0;top:0;width:1em;z-index:2} .select.large:before{width:1.5em} .select.select-inverse:before{background:#222;border:none}} .select-xlarge select{font-size:2rem;height:6rem;line-height:6rem;padding:0 3rem} diff --git a/packages/cssnano-preset-default/src/__tests__/integrations/vital.css b/packages/cssnano-preset-default/src/__tests__/integrations/vital.css index a8fca2a9e..9bd30fd27 100644 --- a/packages/cssnano-preset-default/src/__tests__/integrations/vital.css +++ b/packages/cssnano-preset-default/src/__tests__/integrations/vital.css @@ -239,7 +239,7 @@ nav ul ul li:hover>ul{left:auto;right:-12.5em;top:0} .hero .section{padding:4em 1em} .hero h1{font-size:2.4em} } -.load{-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-name:loading;-moz-animation-timing-function:linear;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:loading;-webkit-animation-timing-function:linear;animation-duration:1s;animation-iteration-count:infinite;animation-name:loading;animation-timing-function:linear;border:3px solid #ddd;border-left:3px solid #666;border-radius:99em;display:inline-block;height:2em;width:2em} +.load{-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-name:loading;-moz-animation-timing-function:linear;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:loading;-webkit-animation-timing-function:linear;animation-duration:1s;animation-iteration-count:infinite;animation-name:loading;animation-timing-function:linear;border:3px solid #ddd;border-left-color:#666;border-radius:99em;display:inline-block;height:2em;width:2em} .load.smallest{border-width:1px;height:9px;width:9px} .load.small{border-width:2px;height:16px;width:16px} .load.large{border-width:4px;height:48px;width:48px} diff --git a/packages/postcss-merge-longhand/src/__tests__/borders.js b/packages/postcss-merge-longhand/src/__tests__/borders.js index 788d0fe49..9dd42a174 100644 --- a/packages/postcss-merge-longhand/src/__tests__/borders.js +++ b/packages/postcss-merge-longhand/src/__tests__/borders.js @@ -158,7 +158,7 @@ test( 'should use shorter equivalent rules', processCSS, 'h1{border:5px solid;border-color:#222 transparent transparent}', - 'h1{border:5px solid transparent;border-top:5px solid #222}' + 'h1{border:5px solid transparent;border-top-color:#222}', ); test( @@ -357,7 +357,7 @@ test( 'Should correctly merge border declarations (#551) (1)', processCSS, 'h1{border:1px solid black;border-top-width:2px;border-right-width:2px;border-bottom-width:2px}', - 'h1{border:solid black;border-width:2px 2px 2px 1px}', + 'h1{border:2px solid black;border-left-width:1px}', ); test( @@ -365,3 +365,16 @@ test( passthroughCSS, 'h1{border:none;border-top:6px solid #000;border-bottom:1px solid #fff}', ); + +test( + 'should not break border-color (#553)', + processCSS, + 'h1{border:solid transparent;border-width:0 8px 16px;border-bottom-color:#eee}', + 'h1{border:solid transparent;border-bottom-color:#eee;border-width:0 8px 16px}' +); + +test( + 'should not remove border-top-color (#554)', + passthroughCSS, + 'h1{border-top-color: rgba(85, 85, 85, 0.95);border-bottom: none}', +); diff --git a/packages/postcss-merge-longhand/src/lib/decl/borders.js b/packages/postcss-merge-longhand/src/lib/decl/borders.js index 25f067e06..ebce484ac 100644 --- a/packages/postcss-merge-longhand/src/lib/decl/borders.js +++ b/packages/postcss-merge-longhand/src/lib/decl/borders.js @@ -47,41 +47,95 @@ function getLevel (prop) { } } -function getColorValue (decl) { - let values = list.space(decl.value); +const widths = ['thin', 'medium', 'thick']; +const styles = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']; + +function isStyle(value) { + return !!~styles.indexOf(value); +} + +function isWidth(value) { + return !!~widths.indexOf(value) || /^(\d+(\.\d+)?|\.\d+)(\w+)?$/.test(value); +} - if (decl.prop === 'border') { - return values[2]; +function parseWsc (value) { + if (value === 'none' || value === 'none none' || value === 'none none currentColor') { + return [ 'none', 'none', 'currentColor']; } - if (!!~directions.indexOf(decl.prop)) { - return values[2]; + let [width, style, color] = defaults; + + const values = list.space(value); + if (values.length > 1 && isStyle(values[1]) && values[0] === 'none') { + values.unshift(); + width = 'none'; } + values.forEach(v => { + if (isStyle(v)) { + style = v; + } + else if (isWidth(v)) { + width = v; + } + else { + color = v; + } + }); + + return [ width, style, color ]; +} + +function getColorValue (decl) { if (decl.prop.substr(-5) === 'color') { return decl.value; } - return null; + return parseWsc(decl.value)[2]; +} + +function diffingProps (values, nextValues) { + const diff = wsc.reduce((prev, curr, i) => { + if (values[i] === nextValues[i]) { + return prev; + } + return [...prev, curr]; + }, []); + return diff; } -function mergeRedundant ({values, nextValues, decl, nextDecl, index, position, prop}) { +function mergeRedundant ({values, nextValues, decl, nextDecl, index}) { if (detect(decl) || detect(nextDecl)) { return; } + const diff = diffingProps(values, nextValues); + if (diff.length > 1) { + return; + } + const prop = diff.pop(); + const position = wsc.indexOf(prop); + + const prop1 = `${nextDecl.prop}-${prop}`; + const prop2 = `border-${prop}`; + let props = parseTrbl(values[position]); props[index] = nextValues[position]; - values.splice(position, 1); - let borderValue = values.join(' '); - let propertyValue = minifyTrbl(props); - let origLength = (decl.value + nextDecl.prop + nextDecl.value).length; - let newLength = borderValue.length + 12 + propertyValue.length; + const borderValue2 = values.filter((e, i) => i !== position).join(' '); + const propValue2 = minifyTrbl(props); - if (newLength < origLength) { - decl.value = borderValue; - nextDecl.prop = prop; - nextDecl.value = propertyValue; + const origLength = (decl.value + nextDecl.prop + nextDecl.value).length; + const newLength1 = decl.value.length + prop1.length + nextValues[position].length; + const newLength2 = borderValue2.length + prop2.length + propValue2.length; + + if (newLength1 < newLength2 && newLength1 < origLength) { + nextDecl.prop = prop1; + nextDecl.value = nextValues[position]; + } + if (newLength2 < newLength1 && newLength2 < origLength) { + decl.value = borderValue2; + nextDecl.prop = prop2; + nextDecl.value = propValue2; } } @@ -122,11 +176,11 @@ function explode (rule) { } // border-trbl -> border-trbl-wsc if (directions.some(direction => prop === direction)) { - let values = list.space(decl.value); + let values = parseWsc(decl.value); wsc.forEach((d, i) => { insertCloned(decl.parent, decl, { prop: `${prop}-${d}`, - value: values[i] || defaults[i], + value: values[i], }); }); return decl.remove(); @@ -166,7 +220,7 @@ function merge (rule) { } ); }); - + // border-trbl-wsc -> border-wsc wsc.forEach(style => { const prop = borderProperty(style); @@ -328,8 +382,8 @@ function merge (rule) { if (!~index) { return; } - const values = list.space(decl.value); - const nextValues = list.space(nextDecl.value); + const values = parseWsc(decl.value); + const nextValues = parseWsc(nextDecl.value); const config = { values, @@ -339,47 +393,18 @@ function merge (rule) { index, }; - if ( - values[0] === nextValues[0] && - values[2] === nextValues[2] - ) { - return mergeRedundant(Object.assign({}, config, { - position: 1, - prop: 'border-style', - })); - } - - if ( - values[1] === nextValues[1] && - values[2] === nextValues[2] - ) { - return mergeRedundant(Object.assign({}, config, { - position: 0, - prop: 'border-width', - })); - } - - if ( - values[0] === nextValues[0] && - values[1] === nextValues[1] && - values[2] && nextValues[2] - ) { - return mergeRedundant(Object.assign({}, config, { - position: 2, - prop: 'border-color', - })); - } + return mergeRedundant(config); }); // clean-up values rule.walkDecls(/^border($|-(top|right|bottom|left))/, decl => { - const value = [...list.space(decl.value), ''].reduceRight((prev, cur, i) => { - if (prev === '' && cur === defaults[i]) { + const value = [...parseWsc(decl.value), ''].reduceRight((prev, cur, i, arr) => { + if (cur === defaults[i] && arr[i-1] !== cur) { return prev; } return cur + ' ' + prev; }).trim() || defaults[0]; - decl.value = minifyTrbl(value); + decl.value = minifyTrbl(value || defaults[0]); }); // border-spacing-hv -> border-spacing @@ -396,6 +421,7 @@ function merge (rule) { decls = getDecls(rule, allProperties); while (decls.length) { const lastNode = decls[decls.length - 1]; + const lastPart = lastNode.prop.split('-').pop(); // remove properties of lower precedence const lesser = decls.filter(node => @@ -403,7 +429,8 @@ function merge (rule) { !detect(node) && node !== lastNode && node.important === lastNode.important && - getLevel(node.prop) > getLevel(lastNode.prop)); + getLevel(node.prop) > getLevel(lastNode.prop) && + (!!~node.prop.indexOf(lastNode.prop) || node.prop.endsWith(lastPart))); lesser.forEach(remove); decls = decls.filter(node => !~lesser.indexOf(node)); From 4cea855ea4b0bdeb742d6b27b57803bcdf45da5a Mon Sep 17 00:00:00 2001 From: Andy Jansson Date: Wed, 18 Jul 2018 05:24:38 +0200 Subject: [PATCH 2/2] Fix linting issues --- .../postcss-merge-longhand/src/lib/decl/borders.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/postcss-merge-longhand/src/lib/decl/borders.js b/packages/postcss-merge-longhand/src/lib/decl/borders.js index ebce484ac..1d44ff05a 100644 --- a/packages/postcss-merge-longhand/src/lib/decl/borders.js +++ b/packages/postcss-merge-longhand/src/lib/decl/borders.js @@ -50,11 +50,11 @@ function getLevel (prop) { const widths = ['thin', 'medium', 'thick']; const styles = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']; -function isStyle(value) { +function isStyle (value) { return !!~styles.indexOf(value); } -function isWidth(value) { +function isWidth (value) { return !!~widths.indexOf(value) || /^(\d+(\.\d+)?|\.\d+)(\w+)?$/.test(value); } @@ -74,11 +74,9 @@ function parseWsc (value) { values.forEach(v => { if (isStyle(v)) { style = v; - } - else if (isWidth(v)) { + } else if (isWidth(v)) { width = v; - } - else { + } else { color = v; } });