@oneblink/apps-react 5.8.0-beta.1 → 5.8.0-beta.3

package/dist/styles/ob-files.scss

@@ -76,7 +76,7 @@
   display: inherit;
 }
 
-@container ob-form-container (min-width: $mobile) {
+@container ob-form-container (min-width: #{$mobile}) {
   .column.is-one-quarter-ob {
     flex: none;
     width: 25%;

package/dist/styles/radio.scss

@@ -5,11 +5,12 @@
       height: auto;
     }
   }
+}
 
-  @media only screen and (max-width: 500px) {
+@container ob-form-container (max-width: 500px) {
+  .ob-buttons-radio {
     .ob-button-radio-container {
       width: 100%;
-
       .ob-button {
         width: 100%;
         margin-right: 0;

package/dist/styles/renderer.scss

@@ -47,7 +47,7 @@
   flex: 1;
 }
 
-@media only screen and (max-width: $mobile) {
+@container ob-form-container (max-width: #{$mobile}) {
   .ob-form-container {
     .ob-button {
       flex: 1;

package/dist/styles/repeatable-set.scss

@@ -9,13 +9,6 @@
       margin-bottom: $size-8;
       border: $grey solid 1px;
       background: $white;
-
-      @media only screen and (min-width: $desktop) {
-        float: right;
-        margin-bottom: 0;
-        min-width: 0;
-        margin-left: $size-7;
-      }
     }
 
     .ob-element:nth-child(2) {
@@ -36,3 +29,16 @@
     background-color: $white-bis;
   }
 }
+
+@container ob-form-container (min-width: #{$desktop}) {
+  .ob-repeatable-set {
+    .ob-repeatable-set__container {
+      > .ob-button_remove {
+        float: right;
+        margin-bottom: 0;
+        min-width: 0;
+        margin-left: $size-7;
+      }
+    }
+  }
+}

package/dist/styles.css

@@ -8594,7 +8594,8 @@ button on-loading {
   white-space: normal;
   height: auto;
 }
-@media only screen and (max-width: 500px) {
+
+@container ob-form-container (max-width: 500px) {
   .ob-buttons-radio .ob-button-radio-container {
     width: 100%;
   }
@@ -8603,7 +8604,6 @@ button on-loading {
     margin-right: 0;
   }
 }
-
 .ob-repeatable-set .ob-repeatable-set__container {
   position: relative;
   padding: 1.25rem;
@@ -8615,14 +8615,6 @@ button on-loading {
   border: #757575 solid 1px;
   background: hsl(0, 0%, 100%);
 }
-@media only screen and (min-width: 1024px) {
-  .ob-repeatable-set .ob-repeatable-set__container > .ob-button_remove {
-    float: right;
-    margin-bottom: 0;
-    min-width: 0;
-    margin-left: 0.75rem;
-  }
-}
 .ob-repeatable-set .ob-repeatable-set__container .ob-element:nth-child(2) {
   margin-top: 1rem;
 }
@@ -8637,6 +8629,14 @@ button on-loading {
   background-color: hsl(0, 0%, 98%);
 }
 
+@container ob-form-container (min-width: 1024px) {
+  .ob-repeatable-set .ob-repeatable-set__container > .ob-button_remove {
+    float: right;
+    margin-bottom: 0;
+    min-width: 0;
+    margin-left: 0.75rem;
+  }
+}
 .ob-image__content {
   display: block;
   margin: auto;
@@ -8715,7 +8715,7 @@ button on-loading {
   display: inherit;
 }
 
-@container ob-form-container (min-width: $mobile) {
+@container ob-form-container (min-width: 768px) {
   .column.is-one-quarter-ob {
     flex: none;
     width: 25%;
@@ -9319,7 +9319,7 @@ textarea:disabled {
   flex: 1;
 }
 
-@media only screen and (max-width: 768px) {
+@container ob-form-container (max-width: 768px) {
   .ob-form-container .ob-button {
     flex: 1;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "5.8.0-beta.1",
+  "version": "5.8.0-beta.3",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"