Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Rework border radius logic for all affix combinations including wrapping cases.

This commit is contained in:
Jeff Stieler 2018-12-12 13:01:07 -07:00
parent 4bfe767ad7
commit 28a57f2a1d
1 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/style.scss
View File

@ -2,13 +2,47 @@
display: inline-flex;
flex-direction: column;
width: 100%;
:nth-child(1) {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
:nth-last-child(1) {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
&.no-wrap {
flex-direction: row;
}
flex-direction: row;
:nth-child(1) {
border-top-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
:nth-last-child(1) {
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
@include breakpoint( ">320px" ) {
flex-direction: row;
@include breakpoint( ">400px" ) {
flex-direction: row;
:nth-child(1) {
border-top-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
:nth-last-child(1) {
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
input[type="email"],
@ -37,15 +71,11 @@
}
@mixin no-prefix-wrap() {
border-bottom-left-radius: 4px;
border-right: none;
border-top-right-radius: 0;
}
@mixin no-suffix-wrap() {
border-bottom-left-radius: 0;
border-left: none;
border-top-right-radius: 4px;
}
.text-control-with-affixes__prefix,
@ -62,10 +92,7 @@
}
.text-control-with-affixes__prefix {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
@include breakpoint( "<320px" ) {
@include breakpoint( "<400px" ) {
:not( .no-wrap ) > & {
border-bottom: none;
}
@ -75,7 +102,7 @@
@include no-prefix-wrap();
}
@include breakpoint( ">320px" ) {
@include breakpoint( ">400px" ) {
@include no-prefix-wrap();
}
@ -92,10 +119,7 @@
}
.text-control-with-affixes__suffix {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
@include breakpoint( "<320px" ) {
@include breakpoint( "<400px" ) {
:not( .no-wrap ) > & {
border-top: none;
}
@ -105,7 +129,7 @@
@include no-suffix-wrap();
}
@include breakpoint( ">320px" ) {
@include breakpoint( ">400px" ) {
@include no-suffix-wrap();
}
}