fixed outline button style, improved d-menu style

package.json

@@ -1,7 +1,7 @@
 {
  "author": "Serhii Pimenov <[email protected]>",
  "name": "@olton/metroui",
- "version": "5.0.0",
+ "version": "5.0.1",
  "description": "The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style",
  "keywords": [
  "metro",

source/common-css/base-theme.less

@@ -0,0 +1,9 @@
+:root {
+ --body-background: #ffffff;
+ --body-color: #191919;
+}
+
+.dark-side, .theme-dark {
+ --body-background: #191f2a;
+ --body-color: #dbdfe7;
+}

source/common-css/display.less

@@ -11,88 +11,18 @@
 .d-table {display: table!important;}
 .d-table-row {display: table-row!important;}
 .d-table-cell {display: table-cell!important;}
-.d-flex {display: flex!important;}
-.d-inline-flex {display: inline-flex!important;}
 
-html.metro-touch-device {
- .d-none-touch {display: none!important;}
- .d-block-touch {display: block!important;}
- .d-inline-touch {display: inline!important;}
- .d-inline-block-touch {display: inline-block!important;}
- .d-table-touch {display: table!important;}
- .d-table-row-touch {display: table-row!important;}
- .d-table-cell-touch {display: table-cell!important;}
- .d-flex-touch {display: flex!important;}
- .d-inline-flex-touch {display: inline-flex!important;}
-}
-
-html.metro-no-touch-device {
- .d-none-no-touch {display: none!important;}
- .d-block-no-touch {display: block!important;}
- .d-inline-no-touch {display: inline!important;}
- .d-inline-block-no-touch {display: inline-block!important;}
- .d-table-no-touch {display: table!important;}
- .d-table-row-no-touch {display: table-row!important;}
- .d-table-cell-no-touch {display: table-cell!important;}
- .d-flex-no-touch {display: flex!important;}
- .d-inline-flex-no-touch {display: inline-flex!important;}
-}
-
-.generate-display-media-options(@mediaBreakpointListMobileLength);
-.generate-display-media-options(@name, @i: 1) when (@i <= @mediaBreakpointListMobileLength) {
- @m: extract(@mediaBreakpointListMobile, @i);
-
- @media screen and (min-width: @@m) {
- .visible-@{m} {visibility: visible !important;}
- .no-visible-@{m} {visibility: hidden !important;}
-
- .d-none-@{m} {display: none!important;}
- .d-block-@{m} {display: block!important;}
- .d-inline-@{m} {display: inline!important;}
- .d-inline-block-@{m} {display: inline-block!important;}
- .d-table-@{m} {display: table!important;}
- .d-table-row-@{m} {display: table-row!important;}
- .d-table-cell-@{m} {display: table-cell!important;}
- .d-flex-@{m} {display: flex!important;}
- .d-inline-flex-@{m} {display: inline-flex!important;}
-
-
- html.metro-touch-device {
- .d-none-touch-@{m} {display: none!important;}
- .d-block-touch-@{m} {display: block!important;}
- .d-inline-touch-@{m} {display: inline!important;}
- .d-inline-block-touch-@{m} {display: inline-block!important;}
- .d-table-touch-@{m} {display: table!important;}
- .d-table-row-touch-@{m} {display: table-row!important;}
- .d-table-cell-touch-@{m} {display: table-cell!important;}
- .d-flex-touch-@{m} {display: flex!important;}
- .d-inline-flex-touch-@{m} {display: inline-flex!important;}
- }
-
- html.metro-no-touch-device {
- .d-none-no-touch-@{m} {display: none!important;}
- .d-block-no-touch-@{m} {display: block!important;}
- .d-inline-no-touch-@{m} {display: inline!important;}
- .d-inline-block-no-touch-@{m} {display: inline-block!important;}
- .d-table-no-touch-@{m} {display: table!important;}
- .d-table-row-no-touch-@{m} {display: table-row!important;}
- .d-table-cell-no-touch-@{m} {display: table-cell!important;}
- .d-flex-no-touch-@{m} {display: flex!important;}
- .d-inline-flex-no-touch-@{m} {display: inline-flex!important;}
- }
+each(@media-rules, {
+ @media screen and (min-width: @value) {
+ .visible-@{key} {visibility: visible !important;}
+ .no-visible-@{key} {visibility: hidden !important;}
+
+ .d-none-@{key} {display: none!important;}
+ .d-block-@{key} {display: block!important;}
+ .d-inline-@{key} {display: inline!important;}
+ .d-inline-block-@{key} {display: inline-block!important;}
+ .d-table-@{key} {display: table!important;}
+ .d-table-row-@{key} {display: table-row!important;}
+ .d-table-cell-@{key} {display: table-cell!important;}
  }
-
- .generate-display-media-options(@name, @i + 1);
-}
-
-// IE 10, 11
-@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
- .d-none-ie {display: none!important;}
- .d-block-ie {display: block!important;}
-}
-
-// Edge
-@supports (-ms-ime-align:auto) {
- .d-none-edge {display: none!important;}
- .d-block-edge {display: block!important;}
-}
+})

source/common-css/flex.less

@@ -3,13 +3,21 @@
 
 @ordersCount: 24;
 
-.generate-order(@ordersCount);
-.generate-order(@j) when (@j > 0){
- .order-@{j} {
- order: @j;
+.d-flex {display: flex!important;}
+.d-inline-flex {display: inline-flex!important;}
+
+each(@media-rules, {
+ @media screen and (min-width: @value) {
+ .d-flex-@{key} {display: flex!important;}
+ .d-inline-flex-@{key} {display: inline-flex!important;}
  }
- .generate-order(@j - 1);
-}
+})
+
+each(range(24), {
+ .order-@{value} {
+ order: @value!important;
+ }
+})
 
 .flex-equal-items {
  & > * {
@@ -61,63 +69,56 @@
 .flex-top {margin-bottom: auto;}
 .flex-bottom {margin-top: auto;}
 
-.generate-flex-media-options(@mediaBreakpointListMobileLength);
-.generate-flex-media-options(@name, @i: 1) when (@i <= @mediaBreakpointListMobileLength) {
- @m: extract(@mediaBreakpointListMobile, @i);
+each(@media-rules, {
+ @media screen and (min-width: @value) {
+ .flex-nowrap-@{key} {flex-wrap: nowrap !important;}
+ .flex-wrap-@{key} {flex-wrap: wrap !important;}
+ .flex-wrap-r-@{key} {flex-wrap: wrap-reverse !important;}
+ .flex-column-@{key} {flex-direction: column !important;}
+ .flex-column-r-@{key} {flex-direction: column-reverse !important;}
+ .flex-row-@{key} {flex-direction: row !important;}
+ .flex-row-r-@{key} {flex-direction: row-reverse !important;}
+ .flex-align-start-@{key} {align-items: flex-start !important;}
+ .flex-align-end-@{key} {align-items: flex-end !important;}
+ .flex-align-center-@{key} {align-items: center !important;}
+ .flex-align-stretch-@{key} {align-items: stretch !important;}
+ .flex-align-baseline-@{key} {align-items: baseline !important;}
+ .flex-self-start-@{key} {align-self: flex-start !important;}
+ .flex-self-end-@{key} {align-self: flex-end !important;}
+ .flex-self-center-@{key} {align-self: center !important;}
+ .flex-self-stretch-@{key} {align-self: stretch !important;}
+ .flex-self-baseline-@{key} {align-self: baseline !important;}
+ .flex-justify-start-@{key} {justify-content: flex-start !important;}
+ .flex-justify-end-@{key} {justify-content: flex-end !important;}
+ .flex-justify-center-@{key} {justify-content: center !important;}
+ .flex-justify-between-@{key} {justify-content: space-between !important;}
+ .flex-justify-around-@{key} {justify-content: space-around !important;}
+ .flex-content-start-@{key} {align-content: flex-start !important;}
+ .flex-content-end-@{key} {align-content: flex-end !important;}
+ .flex-content-center-@{key} {align-content: center !important;}
+ .flex-content-between-@{key} {align-content: space-between !important;}
+ .flex-content-around-@{key} {align-content: space-around !important;}
+ .flex-content-stretch-@{key} {align-content: stretch !important;}
 
- @media screen and (min-width: @@m) {
- .flex-nowrap-@{m} {flex-wrap: nowrap !important;}
- .flex-wrap-@{m} {flex-wrap: wrap !important;}
- .flex-wrap-r-@{m} {flex-wrap: wrap-reverse !important;}
- .flex-column-@{m} {flex-direction: column !important;}
- .flex-column-r-@{m} {flex-direction: column-reverse !important;}
- .flex-row-@{m} {flex-direction: row !important;}
- .flex-row-r-@{m} {flex-direction: row-reverse !important;}
- .flex-align-start-@{m} {align-items: flex-start !important;}
- .flex-align-end-@{m} {align-items: flex-end !important;}
- .flex-align-center-@{m} {align-items: center !important;}
- .flex-align-stretch-@{m} {align-items: stretch !important;}
- .flex-align-baseline-@{m} {align-items: baseline !important;}
- .flex-self-start-@{m} {align-self: flex-start !important;}
- .flex-self-end-@{m} {align-self: flex-end !important;}
- .flex-self-center-@{m} {align-self: center !important;}
- .flex-self-stretch-@{m} {align-self: stretch !important;}
- .flex-self-baseline-@{m} {align-self: baseline !important;}
- .flex-justify-start-@{m} {justify-content: flex-start !important;}
- .flex-justify-end-@{m} {justify-content: flex-end !important;}
- .flex-justify-center-@{m} {justify-content: center !important;}
- .flex-justify-between-@{m} {justify-content: space-between !important;}
- .flex-justify-around-@{m} {justify-content: space-around !important;}
- .flex-content-start-@{m} {align-content: flex-start !important;}
- .flex-content-end-@{m} {align-content: flex-end !important;}
- .flex-content-center-@{m} {align-content: center !important;}
- .flex-content-between-@{m} {align-content: space-between !important;}
- .flex-content-around-@{m} {align-content: space-around !important;}
- .flex-content-stretch-@{m} {align-content: stretch !important;}
+ .flex-no-shrink-@{key} > * {flex-shrink: 0;}
+ .flex-shrink-@{key} > * {flex-shrink: 1;}
+ .flex-no-grow-@{key} > * {flex-grow: 0;}
+ .flex-grow-@{key} > * {flex-grow: 1;}
 
- .flex-no-shrink-@{m} > * {flex-shrink: 0;}
- .flex-shrink-@{m} > * {flex-shrink: 1;}
- .flex-no-grow-@{m} > * {flex-grow: 0;}
- .flex-grow-@{m} > * {flex-grow: 1;}
+ .flex-no-shrink-self-@{key} {flex-shrink: 0;}
+ .flex-shrink-self-@{key} {flex-shrink: 1;}
+ .flex-no-grow-self-@{key} {flex-grow: 0;}
+ .flex-grow-self-@{key} {flex-grow: 1;}
 
- .flex-no-shrink-self-@{m} {flex-shrink: 0;}
- .flex-shrink-self-@{m} {flex-shrink: 1;}
- .flex-no-grow-self-@{m} {flex-grow: 0;}
- .flex-grow-self-@{m} {flex-grow: 1;}
+ .flex-right-@{key} {margin-left: auto;}
+ .flex-left-@{key} {margin-right: auto;}
+ .flex-top-@{key} {margin-bottom: auto;}
+ .flex-bottom-@{key} {margin-top: auto;}
 
- .flex-right-@{m} {margin-left: auto;}
- .flex-left-@{m} {margin-right: auto;}
- .flex-top-@{m} {margin-bottom: auto;}
- .flex-bottom-@{m} {margin-top: auto;}
-
- .generate-order(@ordersCount);
- .generate-order(@j) when (@j > 0){
- .order-@{m}-@{j} {
- order: @j;
+ each(range(24), .(@v){
+ .order-@{v}-@{key} {
+ order: @v!important;
  }
- .generate-order(@j - 1);
- }
+ })
  }
-
- .generate-flex-media-options(@name, @i + 1);
-}
+})

source/common-css/index.js

@@ -1,4 +1,5 @@
 import "./vars.less"
+import "./base-theme.less"
 import "./animate-element.less"
 import "./border.less"
 import "./cursors.less"

source/common-css/vars.less

@@ -1,6 +1,7 @@
 @import "../include/vars";
 
 :root {
+ --media-fs: @fs;
  --media-xs: @xs;
  --media-sm: @sm;
  --media-ld: @ld;
@@ -9,6 +10,4 @@
  --media-xl: @xl;
  --media-xxl: @xxl;
  --media-xxxl: @xxxl;
- --media-xxxxl: @xxxxl;
- --media-xxxxxl: @xxxxxl;
 }

source/components/colors/accent-colors.less

@@ -26,15 +26,16 @@ tbody tr, tbody td,
  color: @white;
 
  &.outline {
- color: @@color;
+ color: @@color!important;
  border-color: @@color;
+ background-color: transparent;
 
  &.dropdown-toggle::before {
  border-color: @@color;
  }
 
  &:hover {
- color: @white;
+ color: @white!important;
  }
  }
 
@@ -65,9 +66,9 @@ tbody tr, tbody td,
  })
 
  &.yellow, &.light {
- color: @dark;
+ color: @dark!important;
  &:hover, &.outline:hover {
- color: @dark;
+ color: @dark!important;
  }
  }
 }