@medyll/cssfabric 0.2.0 → 0.2.1-beta.2

package/dist/css/grid/grid.responsive.min.css

@@ -0,0 +1 @@
+@media only screen and (min-width: 640px){.grid-sm{display:grid}.grid-sm-auto-flow-cols{grid-auto-flow:column}.grid-sm-auto-cols-auto{grid-auto-columns:auto}.grid-sm-auto-cols-min{grid-auto-columns:min-content}.grid-sm-auto-cols-max{grid-auto-columns:max-content}.grid-sm-auto-cols{grid-auto-columns:minmax(0, 1fr)}.grid-sm-auto-flow-rows{grid-auto-flow:row}.grid-sm-auto-rows-auto{grid-auto-rows:auto}.grid-sm-auto-rows-min{grid-auto-rows:min-content}.grid-sm-auto-rows-max{grid-auto-rows:max-content}.grid-sm-auto-rows{grid-auto-rows:minmax(0, 1fr)}.grid-inline{display:inline-grid}.grid-sm-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-sm-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-sm-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-sm-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-sm-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-sm-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-sm-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-sm-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-sm-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-sm-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-sm-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-sm-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.grid-sm-rows-1{grid-template-rows:repeat(1, minmax(0, 1fr))}.grid-sm-rows-2{grid-template-rows:repeat(2, minmax(0, 1fr))}.grid-sm-rows-3{grid-template-rows:repeat(3, minmax(0, 1fr))}.grid-sm-rows-4{grid-template-rows:repeat(4, minmax(0, 1fr))}.grid-sm-rows-5{grid-template-rows:repeat(5, minmax(0, 1fr))}.grid-sm-rows-6{grid-template-rows:repeat(6, minmax(0, 1fr))}.grid-sm-rows-7{grid-template-rows:repeat(7, minmax(0, 1fr))}.grid-sm-rows-8{grid-template-rows:repeat(8, minmax(0, 1fr))}}@media only screen and (min-width: 768px){.grid-md{display:grid}.grid-md-auto-flow-cols{grid-auto-flow:column}.grid-md-auto-cols-auto{grid-auto-columns:auto}.grid-md-auto-cols-min{grid-auto-columns:min-content}.grid-md-auto-cols-max{grid-auto-columns:max-content}.grid-md-auto-cols{grid-auto-columns:minmax(0, 1fr)}.grid-md-auto-flow-rows{grid-auto-flow:row}.grid-md-auto-rows-auto{grid-auto-rows:auto}.grid-md-auto-rows-min{grid-auto-rows:min-content}.grid-md-auto-rows-max{grid-auto-rows:max-content}.grid-md-auto-rows{grid-auto-rows:minmax(0, 1fr)}.grid-inline{display:inline-grid}.grid-md-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-md-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-md-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-md-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-md-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-md-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-md-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-md-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-md-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-md-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-md-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-md-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.grid-md-rows-1{grid-template-rows:repeat(1, minmax(0, 1fr))}.grid-md-rows-2{grid-template-rows:repeat(2, minmax(0, 1fr))}.grid-md-rows-3{grid-template-rows:repeat(3, minmax(0, 1fr))}.grid-md-rows-4{grid-template-rows:repeat(4, minmax(0, 1fr))}.grid-md-rows-5{grid-template-rows:repeat(5, minmax(0, 1fr))}.grid-md-rows-6{grid-template-rows:repeat(6, minmax(0, 1fr))}.grid-md-rows-7{grid-template-rows:repeat(7, minmax(0, 1fr))}.grid-md-rows-8{grid-template-rows:repeat(8, minmax(0, 1fr))}}@media only screen and (min-width: 1024px){.grid-lg{display:grid}.grid-lg-auto-flow-cols{grid-auto-flow:column}.grid-lg-auto-cols-auto{grid-auto-columns:auto}.grid-lg-auto-cols-min{grid-auto-columns:min-content}.grid-lg-auto-cols-max{grid-auto-columns:max-content}.grid-lg-auto-cols{grid-auto-columns:minmax(0, 1fr)}.grid-lg-auto-flow-rows{grid-auto-flow:row}.grid-lg-auto-rows-auto{grid-auto-rows:auto}.grid-lg-auto-rows-min{grid-auto-rows:min-content}.grid-lg-auto-rows-max{grid-auto-rows:max-content}.grid-lg-auto-rows{grid-auto-rows:minmax(0, 1fr)}.grid-inline{display:inline-grid}.grid-lg-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-lg-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-lg-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-lg-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-lg-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-lg-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-lg-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-lg-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-lg-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-lg-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-lg-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-lg-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.grid-lg-rows-1{grid-template-rows:repeat(1, minmax(0, 1fr))}.grid-lg-rows-2{grid-template-rows:repeat(2, minmax(0, 1fr))}.grid-lg-rows-3{grid-template-rows:repeat(3, minmax(0, 1fr))}.grid-lg-rows-4{grid-template-rows:repeat(4, minmax(0, 1fr))}.grid-lg-rows-5{grid-template-rows:repeat(5, minmax(0, 1fr))}.grid-lg-rows-6{grid-template-rows:repeat(6, minmax(0, 1fr))}.grid-lg-rows-7{grid-template-rows:repeat(7, minmax(0, 1fr))}.grid-lg-rows-8{grid-template-rows:repeat(8, minmax(0, 1fr))}}@media only screen and (min-width: 1280px){.grid-xl{display:grid}.grid-xl-auto-flow-cols{grid-auto-flow:column}.grid-xl-auto-cols-auto{grid-auto-columns:auto}.grid-xl-auto-cols-min{grid-auto-columns:min-content}.grid-xl-auto-cols-max{grid-auto-columns:max-content}.grid-xl-auto-cols{grid-auto-columns:minmax(0, 1fr)}.grid-xl-auto-flow-rows{grid-auto-flow:row}.grid-xl-auto-rows-auto{grid-auto-rows:auto}.grid-xl-auto-rows-min{grid-auto-rows:min-content}.grid-xl-auto-rows-max{grid-auto-rows:max-content}.grid-xl-auto-rows{grid-auto-rows:minmax(0, 1fr)}.grid-inline{display:inline-grid}.grid-xl-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-xl-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-xl-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-xl-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-xl-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-xl-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-xl-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-xl-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-xl-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-xl-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-xl-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-xl-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.grid-xl-rows-1{grid-template-rows:repeat(1, minmax(0, 1fr))}.grid-xl-rows-2{grid-template-rows:repeat(2, minmax(0, 1fr))}.grid-xl-rows-3{grid-template-rows:repeat(3, minmax(0, 1fr))}.grid-xl-rows-4{grid-template-rows:repeat(4, minmax(0, 1fr))}.grid-xl-rows-5{grid-template-rows:repeat(5, minmax(0, 1fr))}.grid-xl-rows-6{grid-template-rows:repeat(6, minmax(0, 1fr))}.grid-xl-rows-7{grid-template-rows:repeat(7, minmax(0, 1fr))}.grid-xl-rows-8{grid-template-rows:repeat(8, minmax(0, 1fr))}}@media only screen and (min-width: 1540px){.grid-xxl{display:grid}.grid-xxl-auto-flow-cols{grid-auto-flow:column}.grid-xxl-auto-cols-auto{grid-auto-columns:auto}.grid-xxl-auto-cols-min{grid-auto-columns:min-content}.grid-xxl-auto-cols-max{grid-auto-columns:max-content}.grid-xxl-auto-cols{grid-auto-columns:minmax(0, 1fr)}.grid-xxl-auto-flow-rows{grid-auto-flow:row}.grid-xxl-auto-rows-auto{grid-auto-rows:auto}.grid-xxl-auto-rows-min{grid-auto-rows:min-content}.grid-xxl-auto-rows-max{grid-auto-rows:max-content}.grid-xxl-auto-rows{grid-auto-rows:minmax(0, 1fr)}.grid-inline{display:inline-grid}.grid-xxl-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-xxl-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-xxl-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-xxl-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-xxl-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-xxl-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-xxl-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-xxl-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-xxl-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-xxl-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-xxl-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-xxl-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.grid-xxl-rows-1{grid-template-rows:repeat(1, minmax(0, 1fr))}.grid-xxl-rows-2{grid-template-rows:repeat(2, minmax(0, 1fr))}.grid-xxl-rows-3{grid-template-rows:repeat(3, minmax(0, 1fr))}.grid-xxl-rows-4{grid-template-rows:repeat(4, minmax(0, 1fr))}.grid-xxl-rows-5{grid-template-rows:repeat(5, minmax(0, 1fr))}.grid-xxl-rows-6{grid-template-rows:repeat(6, minmax(0, 1fr))}.grid-xxl-rows-7{grid-template-rows:repeat(7, minmax(0, 1fr))}.grid-xxl-rows-8{grid-template-rows:repeat(8, minmax(0, 1fr))}}

package/{styles → dist/css}/menu/menu.css

@@ -1,3 +1,5 @@
+
+/**---------------------menu.css---------------------*/
 /* & li.menu-item{
     dsp: none;
 }

package/{styles → dist/css}/menu/menu.responsive.css

@@ -1,3 +1,5 @@
+
+/**---------------------menu.responsive.css---------------------*/
 /* & li.menu-item{
     dsp: none;
 }
@@ -16,18 +18,18 @@
         }
     }
 }*/
-@media only screen and (max-width: 1300px) {
-  ul.menu-xxl {
+@media only screen and (min-width: 640px) {
+  ul.menu-sm {
     list-style: none;
     list-style-type: none;
   }
-  ul.menu-xxl-v {
+  ul.menu-sm-v {
     padding: 0;
     margin: 0;
     line-height: var(--box-density-2);
   }
-  ul.menu-xxl-v li.menu-item,
-ul.menu-xxl-v li {
+  ul.menu-sm-v li.menu-item,
+  ul.menu-sm-v li {
     display: block;
     margin: 0;
     width: auto;
@@ -36,28 +38,28 @@ ul.menu-xxl-v li {
     padding: var(--box-density-1);
     border-left: 1px solid var(--theme-color-border);
   }
-  ul.menu-xxl-v li.menu-item:hover,
-ul.menu-xxl-v li:hover {
+  ul.menu-sm-v li.menu-item:hover,
+  ul.menu-sm-v li:hover {
     border-radius: var(--radius-small);
     background-color: #ededed;
     border-left: 1px solid var(--theme-color-primary);
   }
-  ul.menu-xxl-v li.menu-item.active,
-ul.menu-xxl-v li.active {
+  ul.menu-sm-v li.menu-item.active,
+  ul.menu-sm-v li.active {
     border-radius: var(--radius-small);
     background-color: #ededed;
     font-weight: bold;
   }
-  ul.menu-xxl-v li {
+  ul.menu-sm-v li {
     list-style: none;
   }
-  ul.menu-xxl-h {
+  ul.menu-sm-h {
     padding: 0;
     margin: 0;
     line-height: var(--box-density-2);
   }
-  ul.menu-xxl-h li.menu-item,
-ul.menu-xxl-h li {
+  ul.menu-sm-h li.menu-item,
+  ul.menu-sm-h li {
     display: block;
     margin: 0;
     width: auto;
@@ -66,27 +68,27 @@ ul.menu-xxl-h li {
     padding: var(--box-density-1);
     border-left: 1px solid var(--theme-color-border);
   }
-  ul.menu-xxl-h li.menu-item:hover,
-ul.menu-xxl-h li:hover {
+  ul.menu-sm-h li.menu-item:hover,
+  ul.menu-sm-h li:hover {
     border-radius: var(--radius-small);
     background-color: #ededed;
     border-left: 1px solid var(--theme-color-primary);
   }
-  ul.menu-xxl-h li.menu-item.active,
-ul.menu-xxl-h li.active {
+  ul.menu-sm-h li.menu-item.active,
+  ul.menu-sm-h li.active {
     border-radius: var(--radius-small);
     background-color: #ededed;
     font-weight: bold;
   }
-  ul.menu-xxl-h li {
+  ul.menu-sm-h li {
     list-style: none;
   }
-  ul.menu-xxl-v li.menu-item.active,
-ul.menu-xxl-v li.active {
+  ul.menu-sm-v li.menu-item.active,
+  ul.menu-sm-v li.active {
     font-weight: bold;
     margin-left: 1rem;
   }
-  ul.menu-xxl-h {
+  ul.menu-sm-h {
     max-width: 100%;
     display: inline-flex;
     padding: 0 0;
@@ -95,24 +97,24 @@ ul.menu-xxl-v li.active {
     overflow-x: auto;
     overflow-y: hidden;
   }
-  ul.menu-xxl-h li.menu-item,
-ul.menu-xxl-h li {
+  ul.menu-sm-h li.menu-item,
+  ul.menu-sm-h li {
     margin: 0;
     text-align: center;
   }
 }
-@media only screen and (max-width: 1200px) {
-  ul.menu-xl {
+@media only screen and (min-width: 768px) {
+  ul.menu-md {
     list-style: none;
     list-style-type: none;
   }
-  ul.menu-xl-v {
+  ul.menu-md-v {
     padding: 0;
     margin: 0;
     line-height: var(--box-density-2);
   }
-  ul.menu-xl-v li.menu-item,
-ul.menu-xl-v li {
+  ul.menu-md-v li.menu-item,
+  ul.menu-md-v li {
     display: block;
     margin: 0;
     width: auto;
@@ -121,28 +123,28 @@ ul.menu-xl-v li {
     padding: var(--box-density-1);
     border-left: 1px solid var(--theme-color-border);
   }
-  ul.menu-xl-v li.menu-item:hover,
-ul.menu-xl-v li:hover {
+  ul.menu-md-v li.menu-item:hover,
+  ul.menu-md-v li:hover {
     border-radius: var(--radius-small);
     background-color: #ededed;
     border-left: 1px solid var(--theme-color-primary);
   }
-  ul.menu-xl-v li.menu-item.active,
-ul.menu-xl-v li.active {
+  ul.menu-md-v li.menu-item.active,
+  ul.menu-md-v li.active {
     border-radius: var(--radius-small);
     background-color: #ededed;
     font-weight: bold;
   }
-  ul.menu-xl-v li {
+  ul.menu-md-v li {
     list-style: none;
   }
-  ul.menu-xl-h {
+  ul.menu-md-h {
     padding: 0;
     margin: 0;
     line-height: var(--box-density-2);
   }
-  ul.menu-xl-h li.menu-item,
-ul.menu-xl-h li {
+  ul.menu-md-h li.menu-item,
+  ul.menu-md-h li {
     display: block;
     margin: 0;
     width: auto;
@@ -151,27 +153,27 @@ ul.menu-xl-h li {
     padding: var(--box-density-1);
     border-left: 1px solid var(--theme-color-border);
   }
-  ul.menu-xl-h li.menu-item:hover,
-ul.menu-xl-h li:hover {
+  ul.menu-md-h li.menu-item:hover,
+  ul.menu-md-h li:hover {
     border-radius: var(--radius-small);
     background-color: #ededed;
     border-left: 1px solid var(--theme-color-primary);
   }
-  ul.menu-xl-h li.menu-item.active,
-ul.menu-xl-h li.active {
+  ul.menu-md-h li.menu-item.active,
+  ul.menu-md-h li.active {
     border-radius: var(--radius-small);
     background-color: #ededed;
     font-weight: bold;
   }
-  ul.menu-xl-h li {
+  ul.menu-md-h li {
     list-style: none;
   }
-  ul.menu-xl-v li.menu-item.active,
-ul.menu-xl-v li.active {
+  ul.menu-md-v li.menu-item.active,
+  ul.menu-md-v li.active {
     font-weight: bold;
     margin-left: 1rem;
   }
-  ul.menu-xl-h {
+  ul.menu-md-h {
     max-width: 100%;
     display: inline-flex;
     padding: 0 0;
@@ -180,13 +182,13 @@ ul.menu-xl-v li.active {
     overflow-x: auto;
     overflow-y: hidden;
   }
-  ul.menu-xl-h li.menu-item,
-ul.menu-xl-h li {
+  ul.menu-md-h li.menu-item,
+  ul.menu-md-h li {
     margin: 0;
     text-align: center;
   }
 }
-@media only screen and (max-width: 960px) {
+@media only screen and (min-width: 1024px) {
   ul.menu-lg {
     list-style: none;
     list-style-type: none;
@@ -197,7 +199,7 @@ ul.menu-xl-h li {
     line-height: var(--box-density-2);
   }
   ul.menu-lg-v li.menu-item,
-ul.menu-lg-v li {
+  ul.menu-lg-v li {
     display: block;
     margin: 0;
     width: auto;
@@ -207,13 +209,13 @@ ul.menu-lg-v li {
     border-left: 1px solid var(--theme-color-border);
   }
   ul.menu-lg-v li.menu-item:hover,
-ul.menu-lg-v li:hover {
+  ul.menu-lg-v li:hover {
     border-radius: var(--radius-small);
     background-color: #ededed;
     border-left: 1px solid var(--theme-color-primary);
   }
   ul.menu-lg-v li.menu-item.active,
-ul.menu-lg-v li.active {
+  ul.menu-lg-v li.active {
     border-radius: var(--radius-small);
     background-color: #ededed;
     font-weight: bold;
@@ -227,7 +229,7 @@ ul.menu-lg-v li.active {
     line-height: var(--box-density-2);
   }
   ul.menu-lg-h li.menu-item,
-ul.menu-lg-h li {
+  ul.menu-lg-h li {
     display: block;
     margin: 0;
     width: auto;
@@ -237,13 +239,13 @@ ul.menu-lg-h li {
     border-left: 1px solid var(--theme-color-border);
   }
   ul.menu-lg-h li.menu-item:hover,
-ul.menu-lg-h li:hover {
+  ul.menu-lg-h li:hover {
     border-radius: var(--radius-small);
     background-color: #ededed;
     border-left: 1px solid var(--theme-color-primary);
   }
   ul.menu-lg-h li.menu-item.active,
-ul.menu-lg-h li.active {
+  ul.menu-lg-h li.active {
     border-radius: var(--radius-small);
     background-color: #ededed;
     font-weight: bold;
@@ -252,7 +254,7 @@ ul.menu-lg-h li.active {
     list-style: none;
   }
   ul.menu-lg-v li.menu-item.active,
-ul.menu-lg-v li.active {
+  ul.menu-lg-v li.active {
     font-weight: bold;
     margin-left: 1rem;
   }
@@ -266,23 +268,23 @@ ul.menu-lg-v li.active {
     overflow-y: hidden;
   }
   ul.menu-lg-h li.menu-item,
-ul.menu-lg-h li {
+  ul.menu-lg-h li {
     margin: 0;
     text-align: center;
   }
 }
-@media only screen and (max-width: 760px) {
-  ul.menu-md {
+@media only screen and (min-width: 1280px) {
+  ul.menu-xl {
     list-style: none;
     list-style-type: none;
   }
-  ul.menu-md-v {
+  ul.menu-xl-v {
     padding: 0;
     margin: 0;
     line-height: var(--box-density-2);
   }
-  ul.menu-md-v li.menu-item,
-ul.menu-md-v li {
+  ul.menu-xl-v li.menu-item,
+  ul.menu-xl-v li {
     display: block;
     margin: 0;
     width: auto;
@@ -291,28 +293,28 @@ ul.menu-md-v li {
     padding: var(--box-density-1);
     border-left: 1px solid var(--theme-color-border);
   }
-  ul.menu-md-v li.menu-item:hover,
-ul.menu-md-v li:hover {
+  ul.menu-xl-v li.menu-item:hover,
+  ul.menu-xl-v li:hover {
     border-radius: var(--radius-small);
     background-color: #ededed;
     border-left: 1px solid var(--theme-color-primary);
   }
-  ul.menu-md-v li.menu-item.active,
-ul.menu-md-v li.active {
+  ul.menu-xl-v li.menu-item.active,
+  ul.menu-xl-v li.active {
     border-radius: var(--radius-small);
     background-color: #ededed;
     font-weight: bold;
   }
-  ul.menu-md-v li {
+  ul.menu-xl-v li {
     list-style: none;
   }
-  ul.menu-md-h {
+  ul.menu-xl-h {
     padding: 0;
     margin: 0;
     line-height: var(--box-density-2);
   }
-  ul.menu-md-h li.menu-item,
-ul.menu-md-h li {
+  ul.menu-xl-h li.menu-item,
+  ul.menu-xl-h li {
     display: block;
     margin: 0;
     width: auto;
@@ -321,27 +323,27 @@ ul.menu-md-h li {
     padding: var(--box-density-1);
     border-left: 1px solid var(--theme-color-border);
   }
-  ul.menu-md-h li.menu-item:hover,
-ul.menu-md-h li:hover {
+  ul.menu-xl-h li.menu-item:hover,
+  ul.menu-xl-h li:hover {
     border-radius: var(--radius-small);
     background-color: #ededed;
     border-left: 1px solid var(--theme-color-primary);
   }
-  ul.menu-md-h li.menu-item.active,
-ul.menu-md-h li.active {
+  ul.menu-xl-h li.menu-item.active,
+  ul.menu-xl-h li.active {
     border-radius: var(--radius-small);
     background-color: #ededed;
     font-weight: bold;
   }
-  ul.menu-md-h li {
+  ul.menu-xl-h li {
     list-style: none;
   }
-  ul.menu-md-v li.menu-item.active,
-ul.menu-md-v li.active {
+  ul.menu-xl-v li.menu-item.active,
+  ul.menu-xl-v li.active {
     font-weight: bold;
     margin-left: 1rem;
   }
-  ul.menu-md-h {
+  ul.menu-xl-h {
     max-width: 100%;
     display: inline-flex;
     padding: 0 0;
@@ -350,8 +352,93 @@ ul.menu-md-v li.active {
     overflow-x: auto;
     overflow-y: hidden;
   }
-  ul.menu-md-h li.menu-item,
-ul.menu-md-h li {
+  ul.menu-xl-h li.menu-item,
+  ul.menu-xl-h li {
+    margin: 0;
+    text-align: center;
+  }
+}
+@media only screen and (min-width: 1540px) {
+  ul.menu-xxl {
+    list-style: none;
+    list-style-type: none;
+  }
+  ul.menu-xxl-v {
+    padding: 0;
+    margin: 0;
+    line-height: var(--box-density-2);
+  }
+  ul.menu-xxl-v li.menu-item,
+  ul.menu-xxl-v li {
+    display: block;
+    margin: 0;
+    width: auto;
+    transition-property: all;
+    transition-duration: 0.15s;
+    padding: var(--box-density-1);
+    border-left: 1px solid var(--theme-color-border);
+  }
+  ul.menu-xxl-v li.menu-item:hover,
+  ul.menu-xxl-v li:hover {
+    border-radius: var(--radius-small);
+    background-color: #ededed;
+    border-left: 1px solid var(--theme-color-primary);
+  }
+  ul.menu-xxl-v li.menu-item.active,
+  ul.menu-xxl-v li.active {
+    border-radius: var(--radius-small);
+    background-color: #ededed;
+    font-weight: bold;
+  }
+  ul.menu-xxl-v li {
+    list-style: none;
+  }
+  ul.menu-xxl-h {
+    padding: 0;
+    margin: 0;
+    line-height: var(--box-density-2);
+  }
+  ul.menu-xxl-h li.menu-item,
+  ul.menu-xxl-h li {
+    display: block;
+    margin: 0;
+    width: auto;
+    transition-property: all;
+    transition-duration: 0.15s;
+    padding: var(--box-density-1);
+    border-left: 1px solid var(--theme-color-border);
+  }
+  ul.menu-xxl-h li.menu-item:hover,
+  ul.menu-xxl-h li:hover {
+    border-radius: var(--radius-small);
+    background-color: #ededed;
+    border-left: 1px solid var(--theme-color-primary);
+  }
+  ul.menu-xxl-h li.menu-item.active,
+  ul.menu-xxl-h li.active {
+    border-radius: var(--radius-small);
+    background-color: #ededed;
+    font-weight: bold;
+  }
+  ul.menu-xxl-h li {
+    list-style: none;
+  }
+  ul.menu-xxl-v li.menu-item.active,
+  ul.menu-xxl-v li.active {
+    font-weight: bold;
+    margin-left: 1rem;
+  }
+  ul.menu-xxl-h {
+    max-width: 100%;
+    display: inline-flex;
+    padding: 0 0;
+    position: relative;
+    border-bottom: 1px solid #ededed;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  ul.menu-xxl-h li.menu-item,
+  ul.menu-xxl-h li {
     margin: 0;
     text-align: center;
   }

package/dist/css/menu/menu.responsive.min.css

@@ -0,0 +1 @@
+@media only screen and (min-width: 640px){ul.menu-sm{list-style:none;list-style-type:none}ul.menu-sm-v{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-sm-v li.menu-item,ul.menu-sm-v li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-sm-v li.menu-item:hover,ul.menu-sm-v li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-sm-v li.menu-item.active,ul.menu-sm-v li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-sm-v li{list-style:none}ul.menu-sm-h{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-sm-h li.menu-item,ul.menu-sm-h li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-sm-h li.menu-item:hover,ul.menu-sm-h li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-sm-h li.menu-item.active,ul.menu-sm-h li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-sm-h li{list-style:none}ul.menu-sm-v li.menu-item.active,ul.menu-sm-v li.active{font-weight:bold;margin-left:1rem}ul.menu-sm-h{max-width:100%;display:inline-flex;padding:0 0;position:relative;border-bottom:1px solid #ededed;overflow-x:auto;overflow-y:hidden}ul.menu-sm-h li.menu-item,ul.menu-sm-h li{margin:0;text-align:center}}@media only screen and (min-width: 768px){ul.menu-md{list-style:none;list-style-type:none}ul.menu-md-v{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-md-v li.menu-item,ul.menu-md-v li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-md-v li.menu-item:hover,ul.menu-md-v li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-md-v li.menu-item.active,ul.menu-md-v li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-md-v li{list-style:none}ul.menu-md-h{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-md-h li.menu-item,ul.menu-md-h li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-md-h li.menu-item:hover,ul.menu-md-h li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-md-h li.menu-item.active,ul.menu-md-h li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-md-h li{list-style:none}ul.menu-md-v li.menu-item.active,ul.menu-md-v li.active{font-weight:bold;margin-left:1rem}ul.menu-md-h{max-width:100%;display:inline-flex;padding:0 0;position:relative;border-bottom:1px solid #ededed;overflow-x:auto;overflow-y:hidden}ul.menu-md-h li.menu-item,ul.menu-md-h li{margin:0;text-align:center}}@media only screen and (min-width: 1024px){ul.menu-lg{list-style:none;list-style-type:none}ul.menu-lg-v{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-lg-v li.menu-item,ul.menu-lg-v li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-lg-v li.menu-item:hover,ul.menu-lg-v li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-lg-v li.menu-item.active,ul.menu-lg-v li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-lg-v li{list-style:none}ul.menu-lg-h{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-lg-h li.menu-item,ul.menu-lg-h li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-lg-h li.menu-item:hover,ul.menu-lg-h li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-lg-h li.menu-item.active,ul.menu-lg-h li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-lg-h li{list-style:none}ul.menu-lg-v li.menu-item.active,ul.menu-lg-v li.active{font-weight:bold;margin-left:1rem}ul.menu-lg-h{max-width:100%;display:inline-flex;padding:0 0;position:relative;border-bottom:1px solid #ededed;overflow-x:auto;overflow-y:hidden}ul.menu-lg-h li.menu-item,ul.menu-lg-h li{margin:0;text-align:center}}@media only screen and (min-width: 1280px){ul.menu-xl{list-style:none;list-style-type:none}ul.menu-xl-v{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-xl-v li.menu-item,ul.menu-xl-v li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-xl-v li.menu-item:hover,ul.menu-xl-v li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-xl-v li.menu-item.active,ul.menu-xl-v li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-xl-v li{list-style:none}ul.menu-xl-h{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-xl-h li.menu-item,ul.menu-xl-h li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-xl-h li.menu-item:hover,ul.menu-xl-h li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-xl-h li.menu-item.active,ul.menu-xl-h li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-xl-h li{list-style:none}ul.menu-xl-v li.menu-item.active,ul.menu-xl-v li.active{font-weight:bold;margin-left:1rem}ul.menu-xl-h{max-width:100%;display:inline-flex;padding:0 0;position:relative;border-bottom:1px solid #ededed;overflow-x:auto;overflow-y:hidden}ul.menu-xl-h li.menu-item,ul.menu-xl-h li{margin:0;text-align:center}}@media only screen and (min-width: 1540px){ul.menu-xxl{list-style:none;list-style-type:none}ul.menu-xxl-v{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-xxl-v li.menu-item,ul.menu-xxl-v li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-xxl-v li.menu-item:hover,ul.menu-xxl-v li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-xxl-v li.menu-item.active,ul.menu-xxl-v li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-xxl-v li{list-style:none}ul.menu-xxl-h{padding:0;margin:0;line-height:var(--box-density-2)}ul.menu-xxl-h li.menu-item,ul.menu-xxl-h li{display:block;margin:0;width:auto;transition-property:all;transition-duration:.15s;padding:var(--box-density-1);border-left:1px solid var(--theme-color-border)}ul.menu-xxl-h li.menu-item:hover,ul.menu-xxl-h li:hover{border-radius:var(--radius-small);background-color:#ededed;border-left:1px solid var(--theme-color-primary)}ul.menu-xxl-h li.menu-item.active,ul.menu-xxl-h li.active{border-radius:var(--radius-small);background-color:#ededed;font-weight:bold}ul.menu-xxl-h li{list-style:none}ul.menu-xxl-v li.menu-item.active,ul.menu-xxl-v li.active{font-weight:bold;margin-left:1rem}ul.menu-xxl-h{max-width:100%;display:inline-flex;padding:0 0;position:relative;border-bottom:1px solid #ededed;overflow-x:auto;overflow-y:hidden}ul.menu-xxl-h li.menu-item,ul.menu-xxl-h li{margin:0;text-align:center}}

package/{styles → dist/css}/overflow/overflow.css

@@ -1,3 +1,5 @@
+
+/**---------------------overflow.css---------------------*/
 /* css overflow rules */
 .overflow-visible {
   overflow: visible;