Add styles for flexberry-uimessage component (#86)

Flexberry · Sep 14, 2020 · 0544698 · 0544698
1 parent 6f17150
commit 0544698
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 18 deletions.
diff --git a/src/definitions/components/flexberry-objectlistview.less b/src/definitions/components/flexberry-objectlistview.less
@@ -95,12 +95,6 @@
   }
 }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
 /*-------------------
         Navbar
 --------------------*/

diff --git a/src/definitions/components/flexberry-uimessage.less b/src/definitions/components/flexberry-uimessage.less
@@ -0,0 +1,6 @@
+@type    : 'component';
+@element : 'flexberry-uimessage';
+
+@import (multiple) '../../theme.config';
+
+.loadUIOverrides();
diff --git a/src/flexberry-associations.config b/src/flexberry-associations.config
@@ -25,7 +25,7 @@
 @form-associate       : 'pages/edit-form';
 @grid-associate       : '';
 @menu-associate       : '';
-@message-associate    : '';
+@message-associate    : 'components/flexberry-uimessage';
 @table-associate: 'components/flexberry-objectlistview';
 
 /* Modules */
@@ -57,25 +57,26 @@
 
 /* Сontrols */
 @flexberry-button-associate: '';
+@flexberry-card-associate: '';
+@flexberry-checkbox-associate: '';
+@flexberry-colsconfig-associate: '';
+@flexberry-dimmer-associate: '';
 @flexberry-dropdown-associate: '';
 @flexberry-field-associate: '';
 @flexberry-file-associate: '';
 @flexberry-groupedit-associate: '';
+@flexberry-input-associate: '';
 @flexberry-lookup-associate: '';
+@flexberry-menu-associate: '';
+@flexberry-modal-associate: '';
 @flexberry-objectlistview-associate: '';
 @flexberry-sidebar-associate: '';
-@flexberry-card-associate: '';
-@flexberry-checkbox-associate: '';
-@flexberry-toggler-associate: '';
-@flexberry-menu-associate: '';
 @flexberry-simpledatetime-associate: '';
+@flexberry-toggler-associate: '';
 @flexberry-tree-associate: '';
-@flexberry-modal-associate: '';
-@flexberry-dimmer-associate: '';
-@flexberry-validationsummary-associate: '';
-@flexberry-colsconfig-associate: '';
-@flexberry-input-associate: '';
+@flexberry-uimessage-associate: '';
 @flexberry-validationmessage-associate: '';
+@flexberry-validationsummary-associate: '';
 
 /* Forms */
 @edit-form-associate: '';

diff --git a/src/flexberry-imports.less b/src/flexberry-imports.less
@@ -92,6 +92,7 @@
 & { @import "definitions/components/flexberry-colsconfig"; }
 & { @import "definitions/components/flexberry-validationmessage"; }
 & { @import "definitions/components/flexberry-validationsummary"; }
+& { @import "definitions/components/flexberry-uimessage"; }
 
 
 
diff --git a/src/theme.config.example b/src/theme.config.example
@@ -43,7 +43,7 @@
 @form       : 'ghost';
 @grid       : 'default';
 @menu       : 'ghost';
-@message    : 'default';
+@message    : 'ghost';
 @table      : 'ghost';
 
 /* Modules */
@@ -93,6 +93,7 @@
 @flexberry-validationsummary: 'ghost';
 @flexberry-colsconfig: 'ghost';
 @flexberry-input: 'ghost';
+@flexberry-uimessage: 'ghost';
 @flexberry-validationmessage: 'ghost';
 
 /* Forms */

diff --git a/src/themes/ghost/components/flexberry-field.overrides b/src/themes/ghost/components/flexberry-field.overrides
@@ -8,11 +8,20 @@
     border-color: @fieldReadonlyBorderColor;
 }
 
+.ui.input.nav-bar-search-page input[type='number'] {
+  -moz-appearance: textfield;/*For FireFox*/
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button { /*For Webkits like Chrome and Safari*/
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
 .ui.field > label {
     line-height: @fieldLabelLineHeight;
 }
 
-
 // Large
 .ui.large.input > input {
     font-size: @inputLargeFontSize;

diff --git a/src/themes/ghost/components/flexberry-uimessage.overrides b/src/themes/ghost/components/flexberry-uimessage.overrides
@@ -0,0 +1,9 @@
+/* Close Icon */
+.ui.message > .close.icon {
+    font-family: @uiMessageIconFont;
+    right: @uimessageIconPositionRight;
+
+    &::before {
+        content: @uimessageCloseIcon;
+    }
+}
diff --git a/src/themes/ghost/components/flexberry-uimessage.variables b/src/themes/ghost/components/flexberry-uimessage.variables
@@ -0,0 +1,7 @@
+/* Primary */
+@borderWidth: 0;
+
+/* Icon */
+@uiMessageIconFont: guideline-icons;
+@uimessageCloseIcon: "\e90e";
+@uimessageIconPositionRight: 1em;