phx-react/dist/cjs/components/MainWrapV4/appearance/appearance-styled.js

PHX REACT

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const constants_1 = require("../../../utils/constants");
const defaultSettingLayout = {
    header_bg_color: constants_1.DF_HEADER_BG_COLOR,
    logo_login: constants_1.DEFAULT_LOGO_LOGIN,
    logo_dashboard: constants_1.DEFAULT_LOGO_DASHBOARD,
    color_loading_skeleton: constants_1.DF_SKELETON_COLOR,
    search_icon_color: constants_1.DF_SEARCH_ICON_COLOR,
    search_bg_color: constants_1.DF_SEARCH_BG_COLOR,
    search_border_color: constants_1.DF_SEARCH_BORDER_COLOR,
    search_border_hover_color: constants_1.DF_SEARCH_BORDER_HOVER_COLOR,
    search_text_color: constants_1.DF_SEARCH_TEXT_COLOR,
    menu_bg_color: constants_1.DF_MENU_BG_COLOR,
    menu_text_color: constants_1.DF_MENU_TEXT_COLOR,
    menu_bg_active: constants_1.DF_MENU_BG_ACTIVE_COLOR,
    menu_icon_color: constants_1.DF_MENU_ICON_COLOR,
    menu_icon_hover: constants_1.DF_MENU_ICON_HOVER_COLOR,
    menu_text_and_icon_hover_color: constants_1.DF_MENU_ICON_AND_TEXT_HOVER_COLOR,
    menu_icon_active: constants_1.DF_MENU_ICON_ACTICE_COLOR,
    menu_hover_bg: constants_1.DF_MENU_HOVER_BG_COLOR,
};
const StyledCustomLayout = (props) => {
    const { configLayout, settingSiteCookie } = props;
    const handleCheckLayoutSetting = (settingKey) => (configLayout === null || configLayout === void 0 ? void 0 : configLayout[settingKey]) || (settingSiteCookie === null || settingSiteCookie === void 0 ? void 0 : settingSiteCookie[settingKey]) || (defaultSettingLayout === null || defaultSettingLayout === void 0 ? void 0 : defaultSettingLayout[settingKey]);
    const hexColorPattern = /#[0-9A-Fa-f]{6}/g;
    const containsHexColor = hexColorPattern.test(handleCheckLayoutSetting('header_bg_color'));
    const styledHeader = containsHexColor
        ? `background: ${handleCheckLayoutSetting('header_bg_color')}`
        : `background-color: ${handleCheckLayoutSetting('header_bg_color')}`;
    const checkGradientSearchBox = hexColorPattern.test(handleCheckLayoutSetting('search_bg_color'));
    const styleSearchBox = checkGradientSearchBox
        ? `background: ${handleCheckLayoutSetting('search_bg_color')}`
        : `background-color:${handleCheckLayoutSetting('search_bg_color')}`;
    return (react_1.default.createElement("style", null, `

      .scrollbar-thin::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      .scrollbar-thin::-webkit-scrollbar-thumb {
        background: rgb(199 199 199);
        border-radius: 16px;
        border: 2px solid transparent; 
        background-clip: content-box; 
      }

      .shadow-soft {
        box-shadow:
          0rem .3125rem .3125rem -.15625rem rgba(0,0,0,.03),
          0rem .1875rem .1875rem -.09375rem rgba(0,0,0,.02),
          0rem .125rem .125rem -.0625rem rgba(0,0,0,.02),
          0rem .0625rem .0625rem -.03125rem rgba(0,0,0,.03),
          0rem .03125rem .03125rem 0rem rgba(0,0,0,.04),
          0rem 0rem 0rem .0625rem rgba(0,0,0,.06);
      }
      html {
        overscroll-behavior: none;
      }
      /* styled header */
        .header-loading-logo {
          background-color: ${handleCheckLayoutSetting('header_bg_color')}
        }

        .header-loading-avatar {
          background-color: ${handleCheckLayoutSetting('color_loading_skeleton')}
        }

        .header-styled {
         ${styledHeader}
        }

        .header-color-styled{
          border-color: ${handleCheckLayoutSetting('header_bg_color')}
        }

        /* styled search box */
        .search-box-styled {
         ${styleSearchBox};
          border-color: ${handleCheckLayoutSetting('search_border_color')}
        }

        /* màu border trong search box khi hover */
        .search-box-styled:hover {
          border-color: ${handleCheckLayoutSetting('search_border_hover_color')}
        }

        /* màu chữ trong search box */
        .search-text-styled {
          color: ${handleCheckLayoutSetting('search_text_colo')}
        }

        /* màu icon trong search box */
        .search-icon-styled {
          color: ${handleCheckLayoutSetting('search_icon_color')}
        }
        /*  end styled search box */

        /* styled left menu */
        /* màu background */
        .menu-styled {
          background-color: ${handleCheckLayoutSetting('menu_bg_color')};
          border-color: ${handleCheckLayoutSetting('menu_bg_color')}
        }
        /* màu icon */
        .menu-icon-color-styled {
          color: ${handleCheckLayoutSetting('menu_icon_color')}
        }
        .menu-icon-color-styled:hover {
          color: ${handleCheckLayoutSetting('menu_text_and_icon_hover_color')}
        }

        /* màu background icon đang được active */
        .menu-bg-color-icon-active-styled {
          background-color: ${handleCheckLayoutSetting('menu_bg_active')};
          color: ${handleCheckLayoutSetting('menu_icon_active')}
        }
       
       /* màu background khi hover */
       .menu-hover-bg:hover {
        background-color: ${handleCheckLayoutSetting('menu_hover_bg')}
       }

      /* màu chữ */
      .menu-text-color-styled {
        color : ${handleCheckLayoutSetting('menu_text_color')}
      }


      /* màu icon setting */
      .setting-icon-color {
        color: ${handleCheckLayoutSetting('menu_icon_color')}
      }

      /* màu chữ setting */
      .setting-text-color {
        color : ${handleCheckLayoutSetting('menu_text_color')}
      }

      /* màu background active setting */
      .setting-bg-icon-active {
        background-color: ${handleCheckLayoutSetting('menu_bg_active')};
        color: ${handleCheckLayoutSetting('menu_icon_active')}
      }

      /* màu background setting hover */
      .setting-hover-bg:hover {
       background-color: ${handleCheckLayoutSetting('menu_hover_bg')}
      }
       /* end styled menu */
        `));
};
exports.default = StyledCustomLayout;
//# sourceMappingURL=appearance-styled.js.map