Added free size dropdown feature

amir2mi · Feb 11, 2022 · 370224d · 370224d
1 parent 6190087
commit 370224d
Show file tree

Hide file tree

Showing 23 changed files with 134 additions and 30 deletions.
diff --git a/dist/css/flatify-min.css b/dist/css/flatify-min.css
diff --git a/dist/css/flatify-noprefix-min.css b/dist/css/flatify-noprefix-min.css
diff --git a/dist/css/flatify-noprefix.css b/dist/css/flatify-noprefix.css
diff --git a/dist/css/flatify-rtl-min.css b/dist/css/flatify-rtl-min.css
diff --git a/dist/css/flatify-rtl-noprefix-min.css b/dist/css/flatify-rtl-noprefix-min.css
diff --git a/dist/css/flatify-rtl-noprefix.css b/dist/css/flatify-rtl-noprefix.css
diff --git a/dist/css/flatify-rtl.css b/dist/css/flatify-rtl.css
diff --git a/dist/css/flatify.css b/dist/css/flatify.css
diff --git a/dist/js/flatify.js b/dist/js/flatify.js
diff --git a/dist/maps/flatify-min.css.map b/dist/maps/flatify-min.css.map
diff --git a/dist/maps/flatify-noprefix-min.css.map b/dist/maps/flatify-noprefix-min.css.map
diff --git a/dist/maps/flatify-noprefix.css.map b/dist/maps/flatify-noprefix.css.map
diff --git a/dist/maps/flatify-rtl-min.css.map b/dist/maps/flatify-rtl-min.css.map
diff --git a/dist/maps/flatify-rtl-noprefix-min.css.map b/dist/maps/flatify-rtl-noprefix-min.css.map
diff --git a/dist/maps/flatify-rtl-noprefix.css.map b/dist/maps/flatify-rtl-noprefix.css.map
diff --git a/dist/maps/flatify-rtl.css.map b/dist/maps/flatify-rtl.css.map
diff --git a/dist/maps/flatify.css.map b/dist/maps/flatify.css.map
diff --git a/dist/maps/flatify.js.map b/dist/maps/flatify.js.map
diff --git a/js/flatify.js b/js/flatify.js
@@ -1,5 +1,5 @@
 /*!
- * FlatifyCSS version 1.1.10-3
+ * FlatifyCSS version 1.1.10-4
  * Modern flat design framework for the web — inspired by Duolingo design system.
  * Copyright 2021-2022 The FlatifyCSS Authors
  * Licensed under MIT (https://github.com/amir2mi/flatifycss/blob/master/LICENSE)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flatifycss",
-  "version": "1.1.10-3",
+  "version": "1.1.10-4",
   "description": "Modern flat design framework for the web — inspired by Duolingo design system.",
   "main": "index.html",
   "repository": {

diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
@@ -11,13 +11,18 @@
 .dropdown-wrapper {
   position: relative;
   display: inline-block;
+
+  &:not(.free-size) {
+    .dropdown {
+      width: 110%;
+    }
+  }
 }
 
 .dropdown {
   position: absolute;
   z-index: $ZINDEX_DROPDOWN;
   display: none;
-  width: 110%;
   will-change: top, bottom, left, right;
 
   &.show {

diff --git a/scss/flatify.scss b/scss/flatify.scss
@@ -1,5 +1,5 @@
 /*!
- * FlatifyCSS version 1.1.10-3
+ * FlatifyCSS version 1.1.10-4
  * Modern flat design framework for the web — inspired by Duolingo design system. 
  * Copyright 2021-2022 The FlatifyCSS Authors
  * Licensed under MIT (https://github.com/amir2mi/flatifycss/blob/master/LICENSE)

diff --git a/website/docs/components/dropdown.mdx b/website/docs/components/dropdown.mdx
@@ -416,6 +416,97 @@ This is common for dropdowns to be opened by an arrow button that is stuck with
 '
 />
 
+## With items group mockup
+
+<PreviewBox
+  height="250px"
+  children='
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" />
+		<title>Dropdown</title>
+		<script src="https://unpkg.com/@popperjs/core@2"></script>
+		<script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"></script>
+	</head>
+	<body class="flex-center">
+		<div class="dropdown-wrapper">
+			<button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false">
+					Demo with items group
+			</button>
+			<div
+				class="dropdown"
+				aria-labelledby="defaultDropdown"
+			>
+				<div class="items-group" style="width: 320px">
+					<button class="item-button">
+						<div class="item-icon">
+							<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100">
+							<path d="M0 22.815H10.937V34.223H0z"></path>
+							<path d="M0 66.719H10.937V78.12599999999999H0z"></path>
+							<path
+								d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z"
+							></path>
+						</svg>
+						</div>
+						<div class="item-text">
+						<p class="item-title">First item</p>
+						<p class="item-subtitle">Lorem ipsum dolor sit amet.</p>
+						</div>
+					</button>
+					<button class="item-button">
+						<div class="item-icon">
+							<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+							<path
+								d="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z"
+							></path>
+						</svg>
+						</div>
+						<div class="item-text">
+						<p class="item-title">Second item</p>
+						<p class="item-subtitle">Lorem ipsum dolor sit amet.</p>
+						</div>
+					</button>
+					<button class="item-button active">
+						<div class="item-icon">
+								<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+							<path
+								d="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z"
+							></path>
+							<path
+								d="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z"
+							></path>
+						</svg>
+						</div>
+						<div class="item-text">
+						<p class="item-title">Third item</p>
+						<p class="item-subtitle">Lorem ipsum dolor sit amet.</p>
+						</div>
+					</button>
+					<button class="item-button">
+						<div class="item-icon">
+							<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+							<path
+								d="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z"
+							/>
+						</svg>
+						</div>
+						<div class="item-text">
+						<p class="item-title">Fourth item</p>
+						<p class="item-subtitle">Lorem ipsum dolor sit amet.</p>
+						</div>
+					</button>
+        		</div>
+				<span class="pointer-arrow"></span>
+			</div>
+		</div>
+    </body>
+</html>
+'
+/>
 ## Sizes
 
 To change the drop size use [size setter classes](/docs/helpers/size-setters).