chg: [css:metafields] Improved responsiveness
parent
b1f08f3b2d
commit
b11db037d7
|
@ -324,8 +324,11 @@
|
|||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX(calc(1.5rem * -.5 + 5px));
|
||||
transform: translateX(calc(1.5rem * -.5 + 3px));
|
||||
height: calc(100% + 4px); } }
|
||||
@media (max-width: 575.98px) {
|
||||
.multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label {
|
||||
display: none; } }
|
||||
.multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
|
|
@ -324,8 +324,11 @@
|
|||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX(calc(1.5rem * -.5 + 5px));
|
||||
transform: translateX(calc(1.5rem * -.5 + 3px));
|
||||
height: calc(100% + 4px); } }
|
||||
@media (max-width: 575.98px) {
|
||||
.multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label {
|
||||
display: none; } }
|
||||
.multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
|
|
@ -324,8 +324,11 @@
|
|||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX(calc(1.5rem * -.5 + 5px));
|
||||
transform: translateX(calc(1.5rem * -.5 + 3px));
|
||||
height: calc(100% + 4px); } }
|
||||
@media (max-width: 575.98px) {
|
||||
.multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label {
|
||||
display: none; } }
|
||||
.multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
|
|
@ -324,8 +324,11 @@
|
|||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX(calc(1.5rem * -.5 + 5px));
|
||||
transform: translateX(calc(1.5rem * -.5 + 3px));
|
||||
height: calc(100% + 4px); } }
|
||||
@media (max-width: 575.98px) {
|
||||
.multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label {
|
||||
display: none; } }
|
||||
.multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
|
|
@ -324,8 +324,11 @@
|
|||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX(calc(1.5rem * -.5 + 5px));
|
||||
transform: translateX(calc(1.5rem * -.5 + 3px));
|
||||
height: calc(100% + 4px); } }
|
||||
@media (max-width: 575.98px) {
|
||||
.multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label {
|
||||
display: none; } }
|
||||
.multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
|
|
@ -324,8 +324,11 @@
|
|||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX(calc(1.5rem * -.5 + 5px));
|
||||
transform: translateX(calc(1.5rem * -.5 + 3px));
|
||||
height: calc(100% + 4px); } }
|
||||
@media (max-width: 575.98px) {
|
||||
.multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label {
|
||||
display: none; } }
|
||||
.multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
|
|
@ -320,8 +320,11 @@
|
|||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX(calc(1.5rem * -.5 + 5px));
|
||||
transform: translateX(calc(1.5rem * -.5 + 3px));
|
||||
height: calc(100% + 4px); } }
|
||||
@media (max-width: 575.98px) {
|
||||
.multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label {
|
||||
display: none; } }
|
||||
.multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
|
|
@ -324,8 +324,11 @@
|
|||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX(calc(1.5rem * -.5 + 5px));
|
||||
transform: translateX(calc(1.5rem * -.5 + 3px));
|
||||
height: calc(100% + 4px); } }
|
||||
@media (max-width: 575.98px) {
|
||||
.multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label {
|
||||
display: none; } }
|
||||
.multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
$secondary: #6c757d !default;
|
||||
$translateX: calc(1.5rem * -.5 + 5px);
|
||||
$translateX: calc(1.5rem * -.5 + 3px);
|
||||
$rectHeight: calc(100% + 4px);
|
||||
$borderRadius: 3px;
|
||||
|
||||
|
@ -24,22 +24,6 @@ $borderRadius: 3px;
|
|||
transform: translate(0px, 18px);
|
||||
}
|
||||
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// &::before {
|
||||
// content: none !important;
|
||||
// }
|
||||
// }
|
||||
// &::before {
|
||||
// content: ' ';
|
||||
// background-color: $secondary;
|
||||
// opacity: 0.5;
|
||||
// position: absolute;
|
||||
// width: 0.25rem;
|
||||
// transform: translate(5px, 10px);
|
||||
// height: calc(100% - 17px);
|
||||
// border-radius: $borderRadius;
|
||||
// }
|
||||
|
||||
& > .multi-metafield-container {
|
||||
position: relative;
|
||||
|
||||
|
@ -48,16 +32,25 @@ $borderRadius: 3px;
|
|||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
& > .multi-metafield-input-container::before {
|
||||
& > .multi-metafield-input-container::before {
|
||||
background-color: $secondary;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
transform: translateX($translateX);
|
||||
height: $rectHeight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
&:not(:first-child) label.form-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:first-child > .multi-metafield-input-container::before {
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-top-right-radius: $borderRadius;
|
||||
|
|
Loading…
Reference in New Issue