linear-react-components-ui 1.1.21-rc.1 → 1.1.21-rc.2

package/lib/assets/styles/button.scss

@@ -18,8 +18,12 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   font-family: 'Titillium Web';
   position: relative;
   cursor: pointer;
-  display: inline-block;
-  padding: .5rem .8rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1;
+  padding: 0.5rem 0.8rem;
+  box-sizing: border-box;
   letter-spacing: normal;
   border-width: 0;
   border: 1px solid $default-border-color;
@@ -29,7 +33,6 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   background-color: $default-color;
   color: $font-color-soft;
   line-height: 1;
-  text-align: center;
   transition: background-color .3s;
   transition: all 0.2s ease-in-out;
   box-shadow: $shadow-button-default;
@@ -47,21 +50,46 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     width: 0;
     height: 0 !important;
   }
-  > .icon-component {
-    width: 15px;
-    height: 15px;
-    margin-top: 0 !important;
+  &:has(.spinnercontainer) {
+    > .button-container:has(svg) {
+      > .button-content {
+        margin-right: auto;
+      }
+    }
+  }
+  &.icon-left .button-container {
+    .icon-component {
+      margin-right: auto;
+    }
+  }
+  > .button-container {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 6px;
+    justify-content: center;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    > .button-content {
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+    }
+    > .icon-component {
+      width: 15px;
+      height: 15px;
+    }
   }
   > .spinnercontainer {
-    margin-left: 0;
-    float: right;
-    margin-top: 0;
+    width: 15px;
+    height: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
     > .spinnerloading {
-      background: none;
-      float: right;
-      margin-top: -15px;
-      margin-bottom: -20px;
-      margin-right: -20px;
+      scale: 2.5;
     }
   }
   &.-pointerEventsRemove {
@@ -281,37 +309,36 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   }
 }
 
+.split-button-component {
+  display: flex;
+}
+
+.btn-container {
+  gap: 10px;
+}
+
 .btn-container,
 .toolbar-group {
-  width: auto;
+  display: flex;
+  flex-wrap: wrap;
   > .button-component {
-    margin-right: 10px;
     line-height: 15px;
   }
-  > .button-component:last-child {
-    margin-right: 1px;
-  }
 }
 
 .button-component {
   &.-primary .dropdown-icon,
   &.-success .dropdown-icon,
   &.-info .dropdown-icon,
-  &.-warinig .dropdown-icon,
+  &.-warning .dropdown-icon,
   &.-danger .dropdown-icon {
     fill: #FFF;
   }
-  .dropdown-icon {
-    margin-left: 7px;
-    margin-right: -10px;
-  }
   &.icon-right .icon-component {
-    float: right;
-    margin: 1px 0 0 6px;
+    justify-self: right;
   }
   &.icon-left .icon-component {
-    float: left;
-    margin: 1px 6px 0 0;
+    justify-self: left;
   }
   &.icon-top .icon-component {
     margin-top: 0px;

package/lib/assets/styles/calendar.scss

@@ -3,28 +3,58 @@
 @import "commons.scss";
 
 $padding-size: 10px;
+$border-radius-size: 5px;
 .calendar-component {
-  display: grid;
-  grid-template-rows: 30px 30px 1fr;
-  border: 1px solid $component-border-color;
-  border-radius: 5px;
-  font-size: 12px;
+  width: auto;
   height: 100%;
-  width: 100%;
+  min-height: 20rem;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  border-radius: $border-radius-size;
+  border: 1px solid $component-border-color;
   > .calendarheader,
   > .daynames {
-    background-color: #f0f0f0;
+    width: auto;
+    height: 1.85rem;
     display: grid;
+    align-items: center;
+    background-color: #f0f0f0;
     grid-template-columns: 20px 1fr 30px;
-    padding: $padding-size;
-    padding-top: 4px;
   }
   > .calendarheader {
+    width: auto;
+    height: 32px;
+    padding-top: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top-left-radius: $border-radius-size;
+    border-top-right-radius: $border-radius-size;
     > .navbutton {
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      margin: 0px 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       background-color: transparent;
       font-weight: bold;
-      padding: 0;
       border: none;
+      svg {
+        margin: 0;
+      }
+      &:hover {
+        background-color: $component-border-color;
+      }
+      &:focus {
+        -webkit-box-shadow: none !important;
+        box-shadow: none !important;
+        border: 1px solid $default-border-color;
+        background-color: $component-border-color;
+      }
+      transition: none;
     }
     > .monthname {
       font-weight: bold;
@@ -35,16 +65,21 @@ $padding-size: 10px;
     }
   }
   > .daynames {
+    padding-top: 4px;
     border-bottom: 1px solid $component-border-color;
     grid-template-columns: repeat(7, 1fr);
     text-align: center;
-    padding-top: 9px;
   }
   > .calendarmonth {
-    background-color: $font-color-second;
+    width: 100%;
+    height: 100%;
+    flex: 1;
     display: grid;
     grid-template-rows: repeat(6, 1fr);
-    padding: $padding-size;
+    padding: 2px;
+    background-color: $font-color-second;
+    border-bottom-left-radius: $border-radius-size;
+    border-bottom-right-radius: $border-radius-size;
   }
   > .calendarmonth > .monthweek {
     text-align: center;
@@ -52,16 +87,31 @@ $padding-size: 10px;
     grid-template-columns: repeat(7, 1fr)
   }
   .calendarmonth > .monthweek > .monthday {
-    padding: 12px 0;
+    height: auto;
+    width: auto;
     text-align: center;
     border-right: 0;
     border-bottom: 0;
     transition: all 0.2s ease-in-out;
     > .daybutton {
+      height: 100%;
+      width: 100%;
+      padding: 0;
+      font-size: 13px;
+      border: none;
+      background-color: transparent;
+      &.-nowday {
+        font-weight: bold
+      }
+      &.-outmonth {
+        color: #777;
+      }
       &:focus {
         -webkit-box-shadow: none !important;
         box-shadow: none !important;
+        border: 2px solid $default-border-color;
       }
+      transition: none;
     }
     &:hover {
       background-color: $component-border-color;
@@ -74,19 +124,6 @@ $padding-size: 10px;
     &.-selectedday > .daybutton { 
       color: $font-color-second;
     }
-    > .daybutton {
-      background-color: transparent;
-      height: 100%;
-      padding: 0;
-      width: 100%;
-      font-size: 13px;
-      &.-nowday {
-        font-weight: bold
-      }
-      &.-outmonth {
-        color: #777;
-      }
-    }
   }
 }
 
@@ -167,6 +204,3 @@ $padding-size: 10px;
   }
 }
 
-.numberdaycalendar {
-  border: none!important;
-}

package/lib/assets/styles/datepicker.scss

@@ -1,16 +1,36 @@
 @import "commons.scss";
 @import "effects.scss";
 
+.datepicker-container {
+  position: relative;
+  transition: none;
+}
+
 .datepicker-component {
   @extend %component-box-shadow;
-  height: auto;
-  position: absolute;
-  z-index: 999999999999999;
+  z-index: 999999999999;
+  margin-top: 4px;
+  position: fixed;
   animation: 0.5s ease-in 0s 1 slideDown;
+  transition: none;
 }
 
 .calendar-button {
   width: 26px;
-  padding: 4px;
-  border: none;
-}
+  border-radius: 0;
+  border: 0 !important;
+  display: flex;
+  align-items: center;
+  box-shadow: none !important;
+  justify-content: center;
+  padding: 0 !important;
+
+  svg {
+    margin: 0 !important;
+  }
+
+  >.icon-component {
+    width: 16px !important;
+    height: 16px !important;
+  }
+}

package/lib/assets/styles/floatMenu.scss

@@ -2,7 +2,6 @@
 @import "commons.scss";
 @import "effects.scss";
 .floatmenu-component {
-  width: 100%;
   display: flex;
   justify-content: center;
   >.buttonfloat {
@@ -10,8 +9,7 @@
     width: 100%;
     text-align: center;
     >.icon-component {
-      float: none;
-      margin-right: 2px;
+      margin: 0;
     }
   }
 }

package/lib/assets/styles/periodpicker.scss

@@ -1,12 +1,18 @@
 @import "commons.scss";
 @import "effects.scss";
+@import "colors.scss";
+
+.datepicker-period-container {
+  position: relative;
+  transition: none;
+}
 
 .periodpicker-component {
   height: auto;
   position: relative;
   display: flex;
   border-radius: 2px;
-  border: 1px solid #dae1e8;
+  border: 1px solid $component-border-color;
 
   .inputwrapper {
     border: none;
@@ -18,31 +24,79 @@
   }
 
   .calendar-button {
-    flex: 0 0 20px;
-    padding: 4px;
-    border: none;
+    width: 26px;
+    border-radius: 0;
+    border: 0 !important;
+    display: flex;
+    align-items: center;
+    box-shadow: none !important;
+    justify-content: center;
+    padding: 0 !important;
+
+    svg {
+      margin: 0 !important;
+    }
+
+    >.icon-component {
+      width: 16px !important;
+      height: 16px !important;
+    }
   }
 
   .input-base-component {
     flex: 1;
   }
+}
 
+.datepicker-component {
+  @extend %component-box-shadow;
+  border-radius: 5px;
+  margin-top: 4px !important;
+  position: fixed;
+  animation: 0.5s ease-in 0s 1 slideDown;
+  transition: none;
+}
+
+.dropdown-period {
+  width: 100%;
+  border-radius: 3px;
+  background-color: $component-bg-default;
+  border: 1px solid $component-border-color;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .dropdown-period>.item {
+  all: unset;
   margin: 0;
   padding: 6px 10px;
   display: flex;
   cursor: pointer;
   justify-content: stretch;
-  border-bottom: solid 1px #e1e1e1;
+  
+  &:not(:last-child) {
+    border-bottom: solid 1px $separator-background;
+  }
+
+  &:first-child {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
 
   &:hover {
     background-color: $default-hover-color;
   }
 
   &.-selected {
-    background-color: $default-hover-color;
+    background-color: $component-bg-selected-color;
   }
 
   &.-disabled {
@@ -53,17 +107,3 @@
     }
   }
 }
-
-.dropdown-period {
-  width: 100%;
-  /* animation: 0.5s ease-in 0s 1 slideDown; */
-  background-color: #FFF;
-  border: #dae1e8;
-  display: grid;
-  grid-template-rows: auto;
-  height: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  /* margin-top: 2px; */
-  z-index: 99999999999;
-}

package/lib/assets/styles/sidenav.scss

@@ -95,7 +95,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     overflow-y: auto;
 
     &::-webkit-scrollbar {
-      width: 5px;
+      width: 2px;
     }
 
     &::-webkit-scrollbar-track {
@@ -260,7 +260,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   background-color: #eee;
   height: auto;
   width: auto;
-  float: right;
+  // float: right;
   padding: 10px 20px 20px;
   position: absolute;
   -webkit-box-shadow: 3px 1px 6px 0px rgba(50, 50, 50, 0.35);
@@ -349,8 +349,9 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
 
   > .closebutton {
     cursor: pointer;
-    float: right;
-    margin: -21px -33px 15px 0px;
+    position: absolute;
+    right: -13px;
+    top: -2px;
   }
 }
 

package/lib/assets/styles/tabs.scss

@@ -49,13 +49,15 @@ $dropdown-width: 38px;
     text-shadow: 0 1px $font-color-second;
     cursor: pointer;
     line-height: 20px;
-    margin-right: 1px;
+    margin-right: 2px;
     padding: 0;
     width: auto;
-    min-width: 100px;
+    min-width: 112px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    border: 1px solid $font-color-second;
+    border-top: 2px solid $font-color-second;
+    border-bottom: 1px solid $component-border-color;
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -64,6 +66,15 @@ $dropdown-width: 38px;
       box-shadow: 0;
       font-weight: bold;
     }
+    &.witherrorcontent {
+      border: 1px solid $input-error-border-color;
+      border-top: 2px solid $input-error-border-color;
+      border-bottom: 1px solid transparent;
+      background-color: $input-error-bg-color;
+      &.selected {
+        border-top: 2px solid $component-selected-color;
+      }
+    }
     &.selected>.closepanel,
     &:hover>.closepanel {
       visibility: visible;
@@ -76,7 +87,16 @@ $dropdown-width: 38px;
     background: transparent;
     border: 0;
     width: 100%;
-    text-align: left
+    text-align: left;
+    justify-content: flex-start;
+    box-shadow: none !important;
+
+    .button-container {
+      justify-content: flex-start;
+      > svg {
+        margin-right: 10px;
+      }
+    }
   }
 
   .menu>.menuitem>.closepanel {
@@ -113,11 +133,17 @@ $dropdown-width: 38px;
       visibility: hidden;
       pointer-events: none;
       opacity: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       &.show {
         visibility: visible;
         pointer-events: all;
         opacity: 1;
       }
+      &.has-selected {
+        border: 1px solid $component-selected-color !important;
+      }
       > svg {
         margin: 0;
         float: none;
@@ -247,20 +273,32 @@ $dropdown-width: 38px;
 /*
   Dropdown hide tabs
 */
-.dropdown-hide-tabs .menuitem {
-  cursor: pointer;
-  line-height: 20px;
-  margin-right: 1px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 50px;
-
-  >.closepanel {
-    @extend %tab-closepanel;
+.dropdown-hide-tabs  {
+  .item-container > .item {
+    width: auto;
+    padding-left: 10px;
   }
-
-  &:hover>.closepanel {
-    visibility: visible;
+  .menuitem {
+    cursor: pointer;
+    line-height: 20px;
+    margin-right: 1px;
+    display: flex;
+    align-items: center;
+    min-height: 50px;
+    gap: 8px;
+    > svg {
+      margin: 0;
+    }
+    > .menubutton {
+      padding: 0;
+    }  
+    >.closepanel {
+      @extend %tab-closepanel;
+      margin-left: auto;
+      margin-right: 0;
+    }
+    &:hover>.closepanel {
+      visibility: visible;
+    }
   }
 }

package/lib/buttons/DefaultButton.js

@@ -169,7 +169,11 @@ const DefaultButton = _ref => {
       refButton.current = r;
     },
     tabIndex: isDisabled ? -1 : tabIndex
-  }), content, getIcon(), label || '', isLoading && /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "button-container"
+  }, !dropdown && getIcon(), content || label && /*#__PURE__*/_react.default.createElement("div", {
+    className: "button-content"
+  }, content, label || ''), dropdown && getIcon()), isLoading && /*#__PURE__*/_react.default.createElement("div", {
     className: "spinnercontainer"
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
     align: "none",

package/lib/buttons/split_button/index.d.ts

@@ -1,4 +1,4 @@
-import { IButtonProps } from '../types.js';
+import { ISplitButtonProps } from '../types.js';
 import 'react';
 import '../../@types/PermissionAttr.js';
 import '../../@types/Position.js';
@@ -6,6 +6,6 @@ import '../../@types/Size.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const SplitButton: (props: IButtonProps) => JSX.Element;
+declare const SplitButton: (props: ISplitButtonProps) => JSX.Element;
 
 export { SplitButton as default };

package/lib/buttons/split_button/index.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _DefaultButton = _interopRequireDefault(require("../DefaultButton"));
+var _icons = _interopRequireDefault(require("../../icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SplitButton = props => {
   const {
     children,
-    customClass,
+    customClass = '',
+    customClassForContainer = '',
     size = 'default',
     boxShadow = true,
     visible = true,
@@ -28,7 +30,9 @@ const SplitButton = props => {
     skeletonize,
     dropdownAlign
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DefaultButton.default, _extends({}, props, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `split-button-component ${customClassForContainer}`
+  }, /*#__PURE__*/_react.default.createElement(_DefaultButton.default, _extends({}, props, {
     dropdownAlign: dropdownAlign,
     style: {
       borderRadius: '5px 0px 0px 5px',
@@ -36,22 +40,24 @@ const SplitButton = props => {
       marginRight: 0
     }
   })), /*#__PURE__*/_react.default.createElement(_DefaultButton.default, _extends({}, splitProps, {
-    iconName: "down",
     customClass: `${customClass} -transparenttext`,
-    iconStyle: {
-      marginRight: -7,
-      marginLeft: 0
-    },
+    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "mini_down",
+      color: "#fff",
+      size: 12,
+      style: {
+        margin: 0
+      }
+    }),
+    showIconDropdown: false,
     style: {
       borderRadius: '0px 5px 5px 0px',
       borderLeft: '1px solid #ccc',
-      width: 20,
+      width: 'auto',
       textShadow: 'none',
-      paddingRight: 7,
-      paddingLeft: 0
+      paddingInline: '2px'
     },
-    dropdown: true,
-    label: "."
+    dropdown: true
   }), children));
 };
 var _default = exports.default = SplitButton;