@oneblink/apps-react 5.1.2-beta.2 → 5.1.2-beta.3

package/dist/styles/list.scss

@@ -106,4 +106,18 @@
     margin-left: -$section-padding-mobile-x;
     width: calc(100% + #{$section-padding-mobile-x * 2});
   }
+
+  .ob-list__item {
+    &.is-clickable-mobile {
+      cursor: pointer;
+
+      &:hover {
+        background-color: $white-bis;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
 }

package/dist/styles/utils.scss

@@ -1,3 +1,53 @@
+.has-margin-left-1 {
+  margin-left: $size-1;
+}
+.has-margin-left-2 {
+  margin-left: $size-2;
+}
+.has-margin-left-3 {
+  margin-left: $size-3;
+}
+.has-margin-left-4 {
+  margin-left: $size-4;
+}
+.has-margin-left-5 {
+  margin-left: $size-5;
+}
+.has-margin-left-6 {
+  margin-left: $size-6;
+}
+.has-margin-left-7 {
+  margin-left: $size-7;
+}
+.has-margin-left-8 {
+  margin-left: $size-8;
+}
+
+.has-margin-right-1 {
+  margin-right: $size-1;
+}
+.has-margin-right-2 {
+  margin-right: $size-2;
+}
+.has-margin-right-3 {
+  margin-right: $size-3;
+}
+.has-margin-right-4 {
+  margin-right: $size-4;
+}
+.has-margin-right-5 {
+  margin-right: $size-5;
+}
+.has-margin-right-6 {
+  margin-right: $size-6;
+}
+.has-margin-right-7 {
+  margin-right: $size-7;
+}
+.has-margin-right-8 {
+  margin-right: $size-8;
+}
+
 .has-margin-bottom-1 {
   margin-bottom: $size-1;
 }
@@ -61,3 +111,32 @@
 .has-line-breaks {
   white-space: pre-wrap;
 }
+
+.has-thick-border-left {
+  border-left-width: $size-8;
+  border-left-style: solid;
+  border-left-color: $dark;
+  transition: border-left-color 0.5s;
+
+  &.is-primary-thick-border-left {
+    border-left-color: $primary;
+  }
+  &.is-link-thick-border-left {
+    border-left-color: $link;
+  }
+  &.is-link-thick-border-left {
+    border-left-color: $primary;
+  }
+  &.is-info-thick-border-left {
+    border-left-color: $info;
+  }
+  &.is-success-thick-border-left {
+    border-left-color: $success;
+  }
+  &.is-warning-thick-border-left {
+    border-left-color: $warning;
+  }
+  &.is-danger-thick-border-left {
+    border-left-color: $danger;
+  }
+}

package/dist/styles.css

@@ -7875,7 +7875,7 @@ button on-loading {
     padding: 0 0.5rem;
   }
 }
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .modal .modal-card-foot .ob-button {
     min-width: unset;
   }
@@ -9014,6 +9014,70 @@ textarea:disabled {
   justify-content: center;
 }
 
+.has-margin-left-1 {
+  margin-left: 3rem;
+}
+
+.has-margin-left-2 {
+  margin-left: 2.5rem;
+}
+
+.has-margin-left-3 {
+  margin-left: 2rem;
+}
+
+.has-margin-left-4 {
+  margin-left: 1.5rem;
+}
+
+.has-margin-left-5 {
+  margin-left: 1.25rem;
+}
+
+.has-margin-left-6 {
+  margin-left: 1rem;
+}
+
+.has-margin-left-7 {
+  margin-left: 0.75rem;
+}
+
+.has-margin-left-8 {
+  margin-left: 0.5rem;
+}
+
+.has-margin-right-1 {
+  margin-right: 3rem;
+}
+
+.has-margin-right-2 {
+  margin-right: 2.5rem;
+}
+
+.has-margin-right-3 {
+  margin-right: 2rem;
+}
+
+.has-margin-right-4 {
+  margin-right: 1.5rem;
+}
+
+.has-margin-right-5 {
+  margin-right: 1.25rem;
+}
+
+.has-margin-right-6 {
+  margin-right: 1rem;
+}
+
+.has-margin-right-7 {
+  margin-right: 0.75rem;
+}
+
+.has-margin-right-8 {
+  margin-right: 0.5rem;
+}
+
 .has-margin-bottom-1 {
   margin-bottom: 3rem;
 }
@@ -9094,6 +9158,34 @@ textarea:disabled {
   white-space: pre-wrap;
 }
 
+.has-thick-border-left {
+  border-left-width: 0.5rem;
+  border-left-style: solid;
+  border-left-color: hsl(0, 0%, 21%);
+  transition: border-left-color 0.5s;
+}
+.has-thick-border-left.is-primary-thick-border-left {
+  border-left-color: #4c8da7;
+}
+.has-thick-border-left.is-link-thick-border-left {
+  border-left-color: hsl(229, 53%, 53%);
+}
+.has-thick-border-left.is-link-thick-border-left {
+  border-left-color: #4c8da7;
+}
+.has-thick-border-left.is-info-thick-border-left {
+  border-left-color: hsl(207, 61%, 53%);
+}
+.has-thick-border-left.is-success-thick-border-left {
+  border-left-color: #4caf50;
+}
+.has-thick-border-left.is-warning-thick-border-left {
+  border-left-color: #ff6f00;
+}
+.has-thick-border-left.is-danger-thick-border-left {
+  border-left-color: hsl(348, 86%, 61%);
+}
+
 .title.is-5 {
   font-weight: 300;
 }
@@ -9201,7 +9293,7 @@ textarea:disabled {
   flex: 1;
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .ob-form-container .ob-button {
     flex: 1;
   }
@@ -9412,7 +9504,7 @@ textarea:disabled {
   flex-direction: row;
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   .ob-list__content-wrapper {
     flex-direction: column;
   }
@@ -9425,6 +9517,15 @@ textarea:disabled {
     margin-left: -0.5rem;
     width: calc(100% + 1rem);
   }
+  .ob-list__item.is-clickable-mobile {
+    cursor: pointer;
+  }
+  .ob-list__item.is-clickable-mobile:hover {
+    background-color: hsl(0, 0%, 98%);
+  }
+  .ob-list__item.is-clickable-mobile:focus {
+    outline: none;
+  }
 }
 .ob-receipt {
   max-width: 400px;

package/dist/styles.scss

@@ -25,7 +25,7 @@ $size-9: 0.25rem;
 //
 // Our Variables
 //
-$mobile: $tablet - 2px;
+$mobile: $tablet - 1px;
 $secondary: $grey-lighter;
 
 //

package/package.json

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