phx-react/dist/esm/components/MainWrap/appearance/appearance-styled.js

PHX REACT

import React from 'react';
var StyledCustomeLayout = function (props) {
    var _a;
    var defaultSettingLayout = props.defaultSettingLayout, data = props.data, configLayout = props.configLayout, settingLocal = props.settingLocal;
    var _b = configLayout, header_bg_color = _b.header_bg_color, color_loading_skeleton = _b.color_loading_skeleton, search_bg_color = _b.search_bg_color, search_border_color = _b.search_border_color, search_border_hover_color = _b.search_border_hover_color, search_icon_color = _b.search_icon_color, search_text_color = _b.search_text_color, menu_bg_color = _b.menu_bg_color, menu_text_color = _b.menu_text_color, menu_bg_active = _b.menu_bg_active, menu_icon_color = _b.menu_icon_color, menu_icon_active = _b.menu_icon_active, menu_hover_bg = _b.menu_hover_bg, menu_text_and_icon_hover_color = _b.menu_text_and_icon_hover_color;
    var _c = defaultSettingLayout || {}, df_header_bg_color = _c.df_header_bg_color, df_search_icon_color = _c.df_search_icon_color, df_search_bg_color = _c.df_search_bg_color, df_search_border_color = _c.df_search_border_color, df_search_border_hover_color = _c.df_search_border_hover_color, df_search_text_color = _c.df_search_text_color, df_color_loading_skeleton = _c.df_color_loading_skeleton, df_menu_bg_color = _c.df_menu_bg_color, df_menu_text_color = _c.df_menu_text_color, df_menu_bg_active = _c.df_menu_bg_active, df_menu_icon_color = _c.df_menu_icon_color, df_menu_icon_active = _c.df_menu_icon_active, df_menu_hover_bg = _c.df_menu_hover_bg, df_menu_text_and_icon_hover_color = _c.df_menu_text_and_icon_hover_color;
    var settingLength = (_a = data === null || data === void 0 ? void 0 : data.setting_site) === null || _a === void 0 ? void 0 : _a.length;
    var _d = settingLocal || {}, local_header_bg_color = _d.header_bg_color, local_color_loading_skeleton = _d.color_loading_skeleton, local_search_bg_color = _d.search_bg_color, local_search_border_color = _d.search_border_color, local_search_border_hover_color = _d.search_border_hover_color, local_search_icon_color = _d.search_icon_color, local_search_text_color = _d.search_text_color, local_menu_bg_color = _d.menu_bg_color, local_menu_text_color = _d.menu_text_color, local_menu_bg_active = _d.menu_bg_active, local_menu_icon_color = _d.menu_icon_color, local_menu_icon_active = _d.menu_icon_active, local_menu_hover_bg = _d.menu_hover_bg, local_menu_text_and_icon_hover_color = _d.menu_text_and_icon_hover_color;
    var hexColorPattern = /#[0-9A-Fa-f]{6}/g;
    var containsHexColor = hexColorPattern.test(header_bg_color || local_header_bg_color);
    var handleCheckLayoutSetting = function (settingLocal, settingDefault, settingQuery) {
        var checkSetting = settingLocal || (settingLength === 0 ? settingDefault : settingQuery);
        return checkSetting;
    };
    var styledHeader = containsHexColor
        ? "background: ".concat(header_bg_color || local_header_bg_color)
        : "background-color: ".concat(handleCheckLayoutSetting(local_header_bg_color, df_header_bg_color, header_bg_color));
    var checkGradientSearchBox = hexColorPattern.test(local_search_bg_color || search_bg_color);
    var styleSearchBox = checkGradientSearchBox
        ? "background: ".concat(local_search_bg_color || search_bg_color)
        : "background-color:".concat(handleCheckLayoutSetting(local_search_bg_color, df_search_bg_color, search_bg_color));
    return (React.createElement("style", null, "\n      /* styled header */\n        .header-loading-logo {\n          background-color: ".concat(handleCheckLayoutSetting(local_header_bg_color, df_header_bg_color, header_bg_color), "\n        }\n\n        .header-loading-avatar {\n          background-color: ").concat(handleCheckLayoutSetting(local_color_loading_skeleton, df_color_loading_skeleton, color_loading_skeleton), "\n        }\n\n        .header-styled {\n         ").concat(styledHeader, "\n        }\n\n        .header-color-styled{\n          border-color: ").concat(handleCheckLayoutSetting(local_header_bg_color, df_header_bg_color, header_bg_color), "\n        }\n\n        /* styled search box */\n        .search-box-styled {\n         ").concat(styleSearchBox, ";\n          border-color: ").concat(handleCheckLayoutSetting(local_search_border_color, df_search_border_color, search_border_color), "\n        }\n\n        /* m\u00E0u border trong search box khi hover */\n        .search-box-styled:hover {\n          border-color: ").concat(handleCheckLayoutSetting(local_search_border_hover_color, df_search_border_hover_color, search_border_hover_color), "\n        }\n\n        /* m\u00E0u ch\u1EEF trong search box */\n        .search-text-styled {\n          color: ").concat(handleCheckLayoutSetting(local_search_text_color, df_search_text_color, search_text_color), "\n        }\n\n        /* m\u00E0u icon trong search box */\n        .search-icon-styled {\n          color: ").concat(handleCheckLayoutSetting(local_search_icon_color, df_search_icon_color, search_icon_color), "\n        }\n        /*  end styled search box */\n\n        /* styled left menu */\n        /* m\u00E0u background */\n        .menu-styled {\n          background-color: ").concat(handleCheckLayoutSetting(local_menu_bg_color, df_menu_bg_color, menu_bg_color), ";\n          border-color: ").concat(handleCheckLayoutSetting(local_menu_bg_color, df_menu_bg_color, menu_bg_color), "\n        }\n        /* m\u00E0u icon */\n        .menu-icon-color-styled {\n          color: ").concat(handleCheckLayoutSetting(local_menu_icon_color, df_menu_icon_color, menu_icon_color), "\n        }\n        .menu-icon-color-styled:hover {\n          color: ").concat(handleCheckLayoutSetting(local_menu_text_and_icon_hover_color, df_menu_text_and_icon_hover_color, menu_text_and_icon_hover_color), "\n        }\n\n        /* m\u00E0u background icon \u0111ang \u0111\u01B0\u1EE3c active */\n        .menu-bg-color-icon-active-styled {\n          background-color: ").concat(handleCheckLayoutSetting(local_menu_bg_active, df_menu_bg_active, menu_bg_active), ";\n          color: ").concat(handleCheckLayoutSetting(local_menu_icon_active, df_menu_icon_active, menu_icon_active), "\n        }\n       \n       /* m\u00E0u background khi hover */\n       .menu-hover-bg:hover {\n        background-color: ").concat(handleCheckLayoutSetting(local_menu_hover_bg, df_menu_hover_bg, menu_hover_bg), "\n       }\n\n      /* m\u00E0u ch\u1EEF */\n      .menu-text-color-styled {\n        color : ").concat(handleCheckLayoutSetting(local_menu_text_color, df_menu_text_color, menu_text_color), "\n      }\n\n\n      /* m\u00E0u icon setting */\n      .setting-icon-color {\n        color: ").concat(handleCheckLayoutSetting(local_menu_icon_color, df_menu_icon_color, menu_icon_color), "\n      }\n\n      /* m\u00E0u ch\u1EEF setting */\n      .setting-text-color {\n        color : ").concat(handleCheckLayoutSetting(local_menu_text_color, df_menu_text_color, menu_text_color), "\n      }\n\n      /* m\u00E0u background active setting */\n      .setting-bg-icon-active {\n        background-color: ").concat(handleCheckLayoutSetting(local_menu_bg_active, df_menu_bg_active, menu_bg_active), ";\n        color: ").concat(handleCheckLayoutSetting(local_menu_icon_active, df_menu_icon_active, menu_icon_active), "\n      }\n\n      /* m\u00E0u background setting hover */\n      .setting-hover-bg:hover {\n       background-color: ").concat(handleCheckLayoutSetting(local_menu_hover_bg, df_menu_hover_bg, menu_hover_bg), "\n      }\n       /* end styled menu */\n        ")));
};
export default StyledCustomeLayout;
//# sourceMappingURL=appearance-styled.js.map