coveragebook_components 0.7.0 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4dc42bc5e7061bfc79b3da382555c657fd17cd569fca5182a2a876f43f2c762c
-  data.tar.gz: 8f45a22450c56e92bb481350475c49742c3033c3ce15f49639c4f62ec99dbdae
+  metadata.gz: a9f2109c2b353d4f4d3eda5254ab502c3b6d09a3decb653969221a533bb6a322
+  data.tar.gz: 7a07779c43844005785c0085cea3c3b488bbf09d13af3476089c10718159e546
 SHA512:
-  metadata.gz: c1190d6eee29aab8ac6b51408d53cdf85430df820be5aca3fab0ed1b0f7b9eca6047b32d07146aaaa7c39b524348cd7738abbd07341fe94a2fe46b340ceef56e
-  data.tar.gz: c21c7fe578a3ae71ce9ef295fe72c86a533765e9885f2aeebe9363356f1c3dd96fd3b81209264a133ffe7fa5c348a20df1333223fec0dcb1e624cf4a1e3b0a91
+  metadata.gz: 96ad0fcc7aa6248448b4d737c34eed1f95440fa22b64dc4348cc125f7db84b166c6de375383a668b106b8fa9b97cb011dc317d367e3ce1e382faba6eecb8655f
+  data.tar.gz: a5eb991e495f26a598ec8d12975d48c00b00ec7e92e57497c00387886abb3af685da5f0cffa685d82b8b173c600df31bb193595ec1700e03df1ba08edeb1b754

data/app/assets/build/coco/app.css

@@ -906,7 +906,11 @@ select{
   min-height: 100vh;
   align-items: center;
   justify-content: center;
-  padding: 2rem}
+  padding: 0.5rem}
+@media (min-width: 576px){
+
+  [data-coco][data-component="modal"] .modal-container{
+    padding: 2rem}}
 [data-coco][data-component="modal"] .modal-content{
   display: contents}
 .modal-frame{
@@ -924,7 +928,7 @@ select{
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 4rem;
+  height: 3.5rem;
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
   border-bottom-width: 1px;
@@ -932,8 +936,14 @@ select{
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding-left: 2rem;
-  padding-right: 2rem}
+  padding-left: 1rem;
+  padding-right: 1rem}
+@media (min-width: 576px){
+
+  [data-coco][data-component="modal-dialog"] .modal-dialog-header{
+    height: 4rem;
+    padding-left: 2rem;
+    padding-right: 2rem}}
 [data-coco][data-component="modal-dialog"] .modal-dialog-title{
   width: 100%;
   overflow: hidden;
@@ -946,12 +956,17 @@ select{
 [data-coco][data-component="modal-dialog"] .modal-dialog-close{
   position: absolute;
   top: 50%;
-  right: 0.75rem;
+  right: 0.25rem;
   display: block;
   flex: none;
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  padding: 0.5rem;
+  padding: 0.5rem}
+@media (min-width: 576px){
+
+  [data-coco][data-component="modal-dialog"] .modal-dialog-close{
+    right: 0.75rem}}
+[data-coco][data-component="modal-dialog"] .modal-dialog-close{
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity))}
 [data-coco][data-component="modal-dialog"] .modal-dialog-close:hover{
@@ -967,10 +982,17 @@ select{
   border-radius: 0.75rem;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem}
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem}
+@media (min-width: 576px){
+
+  [data-coco][data-component="modal-dialog"] .modal-dialog-content{
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem}}
 [data-coco][data-component="modal-dialog"] .modal-dialog-header + .modal-dialog-content{
   border-top-left-radius: 0px;
   border-top-right-radius: 0px}

data/app/assets/build/coco/app.js

@@ -14032,7 +14032,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.7.0",
+    version: "0.7.1",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",

data/app/assets/build/coco/book.css

@@ -977,7 +977,13 @@ select {
   min-height: 100vh;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
+  padding: 0.5rem;
+}
+@media (min-width: 576px) {
+
+  [data-coco][data-component="modal"] .modal-container {
+    padding: 2rem;
+  }
 }
 [data-coco][data-component="modal"] .modal-content {
   display: contents;
@@ -999,7 +1005,7 @@ select {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 4rem;
+  height: 3.5rem;
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
   border-bottom-width: 1px;
@@ -1007,8 +1013,16 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+@media (min-width: 576px) {
+
+  [data-coco][data-component="modal-dialog"] .modal-dialog-header {
+    height: 4rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 [data-coco][data-component="modal-dialog"] .modal-dialog-title {
   width: 100%;
@@ -1023,12 +1037,20 @@ select {
 [data-coco][data-component="modal-dialog"] .modal-dialog-close {
   position: absolute;
   top: 50%;
-  right: 0.75rem;
+  right: 0.25rem;
   display: block;
   flex: none;
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   padding: 0.5rem;
+}
+@media (min-width: 576px) {
+
+  [data-coco][data-component="modal-dialog"] .modal-dialog-close {
+    right: 0.75rem;
+  }
+}
+[data-coco][data-component="modal-dialog"] .modal-dialog-close {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
@@ -1047,10 +1069,19 @@ select {
   border-radius: 0.75rem;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+@media (min-width: 576px) {
+
+  [data-coco][data-component="modal-dialog"] .modal-dialog-content {
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
 }
 [data-coco][data-component="modal-dialog"] .modal-dialog-header + .modal-dialog-content {
   border-top-left-radius: 0px;

data/app/components/coco/base/modal/modal.css

@@ -7,7 +7,7 @@
     }
 
     .modal-container {
-      @apply relative flex min-h-screen justify-center items-center z-[10000] p-8;
+      @apply relative flex min-h-screen justify-center items-center z-[10000] p-2 sm:p-8;
     }
 
     .modal-content {

data/app/components/coco/base/modal_dialog/modal_dialog.css

@@ -5,7 +5,7 @@
 
     .modal-dialog-header {
       @apply relative flex items-center justify-center;
-      @apply px-8 h-16 border-b border-gray-300 rounded-t-xl bg-white;
+      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-gray-300 rounded-t-xl bg-white;
     }
 
     .modal-dialog-title {
@@ -13,12 +13,12 @@
     }
 
     .modal-dialog-close {
-      @apply flex-none block p-2 absolute top-1/2 right-3 -translate-y-1/2;
+      @apply flex-none block p-2 absolute top-1/2 right-1 sm:right-3 -translate-y-1/2;
       @apply focus:ring-0 focus:outline-none text-content-dark-muted hover:text-content-dark-2;
     }
 
     .modal-dialog-content {
-      @apply px-8 py-6 rounded-xl bg-background-light-3;
+      @apply px-4 sm:px-8 py-4 sm:py-6 rounded-xl bg-background-light-3;
     }
 
     .modal-dialog-header + .modal-dialog-content {

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.7.0"
+  VERSION = "0.7.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.7.1
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-21 00:00:00.000000000 Z
+date: 2023-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails