Merge pull request #57 from prudho/multisize-dropdown

Implements dropdown different sizes (standalone and in forms)
fomantic · Aug 28, 2018 · b52fb5d · b52fb5d
2 parents cc278af + ffb826f
commit b52fb5d
Show file tree

Hide file tree

Showing 4 changed files with 194 additions and 0 deletions.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -1065,4 +1065,56 @@
   font-size: @massive;
 }
 
+/* Dropdown */
+.ui.mini.form .field .dropdown {
+  font-size: @mini;
+}
+.ui.tiny.form .field .dropdown {
+  font-size: @tiny;
+}
+.ui.small.form .field .dropdown {
+  font-size: @small;
+}
+.ui.form .field .dropdown {
+  font-size: @medium;
+}
+.ui.large.form .field .dropdown {
+  font-size: @large;
+}
+.ui.big.form .field .dropdown {
+  font-size: @big;
+}
+.ui.huge.form .field .dropdown {
+  font-size: @huge;
+}
+.ui.massive.form .field .dropdown {
+  font-size: @massive;
+}
+
+/* Dropdown Items */
+.ui.mini.form .field .dropdown .menu > .item {
+  font-size: @mini;
+}
+.ui.tiny.form .field .dropdown .menu > .item {
+  font-size: @tiny;
+}
+.ui.small.form .field .dropdown .menu > .item {
+  font-size: @small;
+}
+.ui.form .field .dropdown .menu > .item {
+  font-size: @medium;
+}
+.ui.large.form .field .dropdown .menu > .item {
+  font-size: @large;
+}
+.ui.big.form .field .dropdown .menu > .item {
+  font-size: @big;
+}
+.ui.huge.form .field .dropdown .menu > .item {
+  font-size: @huge;
+}
+.ui.massive.form .field .dropdown .menu > .item {
+  font-size: @massive;
+}
+
 .loadUIOverrides();
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
@@ -1940,6 +1940,12 @@ Floated Menu / Item
 .ui.mini.vertical.menu {
   width: @miniWidth;
 }
+.ui.mini.menu .dropdown {
+  font-size: @mini;
+}
+.ui.mini.menu .dropdown .menu > .item{
+  font-size: @mini;
+}
 
 /* Tiny */
 .ui.tiny.menu {
@@ -1948,6 +1954,12 @@ Floated Menu / Item
 .ui.tiny.vertical.menu {
   width: @tinyWidth;
 }
+.ui.tiny.menu .dropdown {
+  font-size: @tiny;
+}
+.ui.tiny.menu .dropdown .menu > .item{
+  font-size: @tiny;
+}
 
 /* Small */
 .ui.small.menu {
@@ -1956,6 +1968,12 @@ Floated Menu / Item
 .ui.small.vertical.menu {
   width: @smallWidth;
 }
+.ui.small.menu .dropdown {
+  font-size: @small;
+}
+.ui.small.menu .dropdown .menu > .item{
+  font-size: @small;
+}
 
 /* Medium */
 .ui.menu {
@@ -1972,6 +1990,12 @@ Floated Menu / Item
 .ui.large.vertical.menu {
   width: @largeWidth;
 }
+.ui.large.menu .dropdown {
+  font-size: @large;
+}
+.ui.large.menu .dropdown .menu > .item{
+  font-size: @large;
+}
 
 /* Huge */
 .ui.huge.menu {
@@ -1980,6 +2004,12 @@ Floated Menu / Item
 .ui.huge.vertical.menu {
   width: @hugeWidth;
 }
+.ui.huge.menu .dropdown {
+  font-size: @huge;
+}
+.ui.huge.menu .dropdown .menu > .item{
+  font-size: @huge;
+}
 
 /* Big */
 .ui.big.menu {
@@ -1988,6 +2018,12 @@ Floated Menu / Item
 .ui.big.vertical.menu {
   width: @bigWidth;
 }
+.ui.big.menu .dropdown {
+  font-size: @big;
+}
+.ui.big.menu .dropdown .menu > .item{
+  font-size: @big;
+}
 
 /* Massive */
 .ui.massive.menu {
@@ -1996,5 +2032,11 @@ Floated Menu / Item
 .ui.massive.vertical.menu {
   width: @massiveWidth;
 }
+.ui.massive.menu .dropdown {
+  font-size: @massive;
+}
+.ui.massive.menu .dropdown .menu > .item{
+  font-size: @massive;
+}
 
 .loadUIOverrides();
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
@@ -683,6 +683,50 @@
   font-size: @massive;
 }
 
+/* Dropdown coupled buttons sizes */
+.ui.mini.buttons .dropdown {
+  font-size: @mini;
+}
+.ui.mini.buttons .dropdown .menu > .item {
+  font-size: @mini;
+}
+.ui.tiny.buttons .dropdown {
+  font-size: @tiny;
+}
+.ui.tiny.buttons .dropdown .menu > .item {
+  font-size: @tiny;
+}
+.ui.small.buttons .dropdown {
+  font-size: @small;
+}
+.ui.small.buttons .dropdown .menu > .item {
+  font-size: @small;
+}
+.ui.large.buttons .dropdown {
+  font-size: @large;
+}
+.ui.large.buttons .dropdown .menu > .item {
+  font-size: @large;
+}
+.ui.big.buttons .dropdown {
+  font-size: @big;
+}
+.ui.big.buttons .dropdown .menu > .item {
+  font-size: @big;
+}
+.ui.huge.buttons .dropdown {
+  font-size: @huge;
+}
+.ui.huge.buttons .dropdown .menu > .item {
+  font-size: @huge;
+}
+.ui.massive.buttons .dropdown {
+  font-size: @massive;
+}
+.ui.massive.buttons .dropdown .menu > .item {
+  font-size: @massive;
+}
+
 /*--------------
     Icon Only
 ---------------*/

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -1430,4 +1430,60 @@ select.ui.dropdown {
   box-shadow: @pointingArrowBoxShadow;
 }
 
+/*--------------------
+        Sizes
+---------------------*/
+
+/* Dropdown Size */
+.ui.mini.dropdown {
+  font-size: @mini;
+}
+.ui.tiny.dropdown {
+  font-size: @tiny;
+}
+.ui.small.dropdown {
+  font-size: @small;
+}
+.ui.dropdown {
+  font-size: @medium;
+}
+.ui.large.dropdown {
+  font-size: @large;
+}
+.ui.big.dropdown {
+  font-size: @big;
+}
+.ui.huge.dropdown {
+  font-size: @huge;
+}
+.ui.massive.dropdown {
+  font-size: @massive;
+}
+
+/* Dropdown Item Size */
+.ui.mini.dropdown .menu > .item {
+  font-size: @mini;
+}
+.ui.tiny.dropdown .menu > .item {
+  font-size: @tiny;
+}
+.ui.small.dropdown .menu > .item {
+  font-size: @small;
+}
+.ui.dropdown .menu > .item {
+  font-size: @medium;
+}
+.ui.large.dropdown .menu > .item {
+  font-size: @large;
+}
+.ui.big.dropdown .menu > .item {
+  font-size: @big;
+}
+.ui.huge.dropdown .menu > .item {
+  font-size: @huge;
+}
+.ui.massive.dropdown .menu > .item {
+  font-size: @massive;
+}
+
 .loadUIOverrides();