infinity-forge/dist/system/components/data/select-workspace/styles.js

codie Library

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Item = exports.SelectWorkSpace = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.SelectWorkSpace = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  box-shadow: 0px 0px 5px 0px #00000033;\n\n  .input_control {\n    margin-bottom: 0 !important;\n  }\n\n  [class*='-DummyInput'],\n  [id*='-input'],\n  #react-select-2-input {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n  }\n\n  [class*='-indicatorContainer'] {\n    padding: 0;\n  }\n\n  [class*='-control'] {\n    * {\n      color: #fff;\n      font-weight: 700;\n    }\n  }\n\n  [id*='-listbox'] {\n    > div {\n      padding: 2px 10px;\n    }\n  }\n\n  .item {\n    background: none;\n    padding: 0;\n    border: 0;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    align-items: center;\n    gap: 10px;\n    cursor: pointer;\n\n    > div {\n      display: flex;\n      flex-direction: column;\n      text-align: start;\n\n      .title_workspace {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        max-width: 100%;\n      }\n\n      .subtitle {\n        color: #828282;\n      }\n    }\n\n    .circle {\n      width: 30px;\n      height: 30px;\n      min-width: 30px;\n      min-height: 30px;\n      border-radius: 100rem;\n      background-color: #444444;\n    }\n\n    .avatar {\n      width: 30px;\n      height: 30px;\n      min-width: 30px;\n      min-height: 30px;\n\n      img {\n        object-fit: cover !important;\n      }\n    }\n  }\n\n  .item + .item {\n    margin-top: 10px;\n  }\n"], ["\n  width: 100%;\n  box-shadow: 0px 0px 5px 0px #00000033;\n\n  .input_control {\n    margin-bottom: 0 !important;\n  }\n\n  [class*='-DummyInput'],\n  [id*='-input'],\n  #react-select-2-input {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n  }\n\n  [class*='-indicatorContainer'] {\n    padding: 0;\n  }\n\n  [class*='-control'] {\n    * {\n      color: #fff;\n      font-weight: 700;\n    }\n  }\n\n  [id*='-listbox'] {\n    > div {\n      padding: 2px 10px;\n    }\n  }\n\n  .item {\n    background: none;\n    padding: 0;\n    border: 0;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    align-items: center;\n    gap: 10px;\n    cursor: pointer;\n\n    > div {\n      display: flex;\n      flex-direction: column;\n      text-align: start;\n\n      .title_workspace {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        max-width: 100%;\n      }\n\n      .subtitle {\n        color: #828282;\n      }\n    }\n\n    .circle {\n      width: 30px;\n      height: 30px;\n      min-width: 30px;\n      min-height: 30px;\n      border-radius: 100rem;\n      background-color: #444444;\n    }\n\n    .avatar {\n      width: 30px;\n      height: 30px;\n      min-width: 30px;\n      min-height: 30px;\n\n      img {\n        object-fit: cover !important;\n      }\n    }\n  }\n\n  .item + .item {\n    margin-top: 10px;\n  }\n"])));
exports.Item = (0, styled_components_1.default)('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row !important;\n  justify-content: space-between;\n  margin-top: 0 !important;\n  margin-bottom: -2px;\n  padding: 5px 12px !important;\n\n  .content_option {\n    width: calc(100% - 10px);\n    \n    > div {\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n\n      span {\n        line-height: 1;\n        display: flex;\n      }\n    }\n  }\n\n  .active_workspace {\n    min-height: 10px;\n    min-width: 10px;\n    max-width: 10px;\n    max-width: 10px;\n    border-radius: 100%;\n    border: 1px solid #6d6b6b;\n    overflow: hidden;\n  }\n\n  &:hover {\n    transition: 0.2s;\n    background-color: ", ";\n  }\n\n  &.active {\n    background: rgb(239 236 236 / 50%) !important;\n\n    .active_workspace {\n      background-color: #6d6b6b;\n\n      > div {\n        height: 100%;\n        width: 100%;\n      }\n    }\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row !important;\n  justify-content: space-between;\n  margin-top: 0 !important;\n  margin-bottom: -2px;\n  padding: 5px 12px !important;\n\n  .content_option {\n    width: calc(100% - 10px);\n    \n    > div {\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n\n      span {\n        line-height: 1;\n        display: flex;\n      }\n    }\n  }\n\n  .active_workspace {\n    min-height: 10px;\n    min-width: 10px;\n    max-width: 10px;\n    max-width: 10px;\n    border-radius: 100%;\n    border: 1px solid #6d6b6b;\n    overflow: hidden;\n  }\n\n  &:hover {\n    transition: 0.2s;\n    background-color: ", ";\n  }\n\n  &.active {\n    background: rgb(239 236 236 / 50%) !important;\n\n    .active_workspace {\n      background-color: #6d6b6b;\n\n      > div {\n        height: 100%;\n        width: 100%;\n      }\n    }\n  }\n"])), function (props) { return (props.$isOption ? 'rgb(245 245 245 / 29%) !important' : 'unset'); });
var templateObject_1, templateObject_2;
//# sourceMappingURL=styles.js.map