@escolalms/components - npm Package Compare versions

Comparing version 0.0.44 to 0.0.45

lib/components/molecules/Categories/Categories.js

@@ -70,7 +70,15 @@ "use strict";
 };
-var StyledCategoriesDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n\n  .categories-collapse {\n    color: currentColor;\n  }\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: normal;\n    cursor: pointer;\n    color: currentColor;\n    font-size: 16px;\n    font-family: ", ";\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    div {\n      position: relative;\n    }\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n      color: ", ";\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"], ["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n\n  .categories-collapse {\n    color: currentColor;\n  }\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: normal;\n    cursor: pointer;\n    color: currentColor;\n    font-size: 16px;\n    font-family: ", ";\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    div {\n      position: relative;\n    }\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n      color: ", ";\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"])), function (props) {
+var StyledCategoriesDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n\n  .categories-collapse {\n    color: currentColor;\n  }\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: normal;\n    cursor: pointer;\n    color: currentColor;\n    font-size: 16px;\n    font-family: ", ";\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n    border-radius: ", ";\n    div {\n      position: relative;\n    }\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n      color: ", ";\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"], ["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n\n  .categories-collapse {\n    color: currentColor;\n  }\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: normal;\n    cursor: pointer;\n    color: currentColor;\n    font-size: 16px;\n    font-family: ", ";\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n    border-radius: ", ";\n    div {\n      position: relative;\n    }\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n      color: ", ";\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"])), function (props) {
     return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
 }, function (props) {
     return "1px solid ".concat(props.open ? "currentColor" : "transparent");
-}, function (props) { return props.backgroundColor; }, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return (props.open ? "rotate(180deg)" : "none"); }, function (props) { return (props.open ? "block" : "none"); }, function (props) { return (props.open ? "200px" : "auto"); }, function (props) { return (props.open ? "auto" : "0"); }, function (props) { return (props.open ? "auto" : "hidden"); }, function (props) { return (props.open ? "block" : "none"); }, function (props) { return props.backgroundColor; }, function (props) { return (props.open ? "1" : "0"); }, function (props) {
+}, function (props) { return props.backgroundColor; }, function (_a) {
+    var theme = _a.theme, open = _a.open;
+    return open
+        ? "".concat(theme.inputRadius, "px ").concat(theme.inputRadius, "px 0 0")
+        : "".concat(theme.inputRadius, "px");
+}, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return (props.open ? "rotate(180deg)" : "none"); }, function (props) { return (props.open ? "block" : "none"); }, function (props) { return (props.open ? "200px" : "auto"); }, function (props) { return (props.open ? "auto" : "0"); }, function (props) { return (props.open ? "auto" : "hidden"); }, function (props) { return (props.open ? "block" : "none"); }, function (props) { return props.backgroundColor; }, function (props) { return (props.open ? "1" : "0"); }, function (_a) {
+    var theme = _a.theme;
+    return "0 0 ".concat(theme.inputRadius, "px ").concat(theme.inputRadius, "px");
+}, function (props) {
     return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
@@ -77,0 +85,0 @@ });

lib/components/molecules/Dropdown/Dropdown.js

@@ -52,3 +52,3 @@ "use strict";
 var chroma_js_1 = __importStar(require("chroma-js"));
-var StyledDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  min-width: 150px;\n\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 7px 39px 7px 10px;\n    background-color: ", ";\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: ", ";\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n\n  .is-open .control {\n    border-color: currentColor;\n    border-bottom: ", ";\n    border-top: ", ";\n    border-radius: ", ";\n\n    &:after {\n      height: 1px;\n    }\n  }\n\n  .Dropdown-arrow-wrapper {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-control {\n    border-radius: ", "px;\n\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  .Dropdown-menu {\n    top: ", ";\n    bottom: ", ";\n    border-color: ", ";\n    border-top: ", ";\n    border-bottom: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    font-size: 14px;\n  }\n\n  .Dropdown-option {\n    padding: 7px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  min-width: 150px;\n\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 7px 39px 7px 10px;\n    background-color: ", ";\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: ", ";\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n\n  .is-open .control {\n    border-color: currentColor;\n    border-bottom: ", ";\n    border-top: ", ";\n    border-radius: ", ";\n\n    &:after {\n      height: 1px;\n    }\n  }\n\n  .Dropdown-arrow-wrapper {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-control {\n    border-radius: ", "px;\n\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  .Dropdown-menu {\n    top: ", ";\n    bottom: ", ";\n    border-color: ", ";\n    border-top: ", ";\n    border-bottom: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    font-size: 14px;\n  }\n\n  .Dropdown-option {\n    padding: 7px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
+var StyledDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  min-width: 150px;\n\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 7px 39px 7px 10px;\n    background-color: ", ";\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: ", ";\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n\n  .is-open .control {\n    border-color: currentColor;\n    border-bottom: ", ";\n    border-top: ", ";\n    border-radius: ", ";\n\n    &:after {\n      height: 1px;\n    }\n  }\n\n  .Dropdown-arrow-wrapper {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-control {\n    border-radius: ", "px;\n\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  .Dropdown-menu {\n    top: ", ";\n    bottom: ", ";\n    border-color: ", ";\n    border-top: ", ";\n    border-bottom: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    font-size: 14px;\n    border-radius: ", ";\n  }\n\n  .Dropdown-option {\n    padding: 7px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  min-width: 150px;\n\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 7px 39px 7px 10px;\n    background-color: ", ";\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: ", ";\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n\n  .is-open .control {\n    border-color: currentColor;\n    border-bottom: ", ";\n    border-top: ", ";\n    border-radius: ", ";\n\n    &:after {\n      height: 1px;\n    }\n  }\n\n  .Dropdown-arrow-wrapper {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-control {\n    border-radius: ", "px;\n\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  .Dropdown-menu {\n    top: ", ";\n    bottom: ", ";\n    border-color: ", ";\n    border-top: ", ";\n    border-bottom: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    font-size: 14px;\n    border-radius: ", ";\n  }\n\n  .Dropdown-option {\n    padding: 7px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
     return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
@@ -65,3 +65,8 @@ }, function (props) { return props.backgroundColor; }, function (props) { return (props.placement === "bottom" ? "0" : "96%"); }, function (props) { return props.backgroundColor; }, function (props) { return props.placement === "bottom" && "none"; }, function (props) { return props.placement === "top" && "none"; }, function (_a) {
     return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
-}, function (props) { return props.placement === "bottom" && "none"; }, function (props) { return props.placement === "top" && "none"; }, function (props) { return props.backgroundColor; }, function (props) {
+}, function (props) { return props.placement === "bottom" && "none"; }, function (props) { return props.placement === "top" && "none"; }, function (props) { return props.backgroundColor; }, function (_a) {
+    var placement = _a.placement, theme = _a.theme;
+    return placement === "bottom"
+        ? "0 0 ".concat(theme.inputRadius, "px ").concat(theme.inputRadius, "px")
+        : "".concat(theme.inputRadius, "px ").concat(theme.inputRadius, "px 0 0");
+}, function (props) {
     return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
@@ -68,0 +73,0 @@ }, function (props) {

lib/components/organisms/SearchCourses/SearchCourses.js

@@ -38,3 +38,6 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var ItemButton = (0, styled_components_1.default)(__1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px !important;\n  justify-content: flex-start;\n  border: inherit;\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  padding: 10px !important;\n  justify-content: flex-start;\n  border: inherit;\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
+var ItemButton = (0, styled_components_1.default)(__1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px !important;\n  justify-content: flex-start;\n  border: inherit;\n  border-radius: 0;\n  &:hover {\n    text-decoration: underline;\n    background-color: ", " !important;\n  }\n"], ["\n  padding: 10px !important;\n  justify-content: flex-start;\n  border: inherit;\n  border-radius: 0;\n  &:hover {\n    text-decoration: underline;\n    background-color: ", " !important;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.white;
+});
 var SearchCourses = function (_a) {
@@ -41,0 +44,0 @@ var onItemSelected = _a.onItemSelected, onInputSubmitted = _a.onInputSubmitted;

package.json

 {
   "name": "@escolalms/components",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "main": "lib/index.js",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16958333

increased by0.01%

Lines of code

25915

increased by0.1%

No dependency changes