com.phloxui/styles/component/editor/DataLangSelectorPane.less

PhloxUI Ng2+ Framework

/* lang selector */
.phx-data-lang-selector {
  width: 100%;
  height: 100%;
  position: relative;

  > .wrapper {
    position: absolute;
    top: 0;
    height: 100%;

    &.left {
      padding-right: @DATA_LANG_SELECTOR_PANE_WIDTH;
      width: 100%;

      &.expand {
        padding-right: 0;
      }

      > .component-pane {
        height: 100%;
        width: 100%;

        > .component-wrapper {
          display: none;

          &.show {
            display: block;
          }
        }
      }
    }

    &.right {
      width: @DATA_LANG_SELECTOR_PANE_WIDTH;
      right: 0;
      overflow: hidden;

      &.hide {
        display: none;
      }

      > .lang-pane {
        background-color: extract(@CLR_1, 7);
        height: 100%;
        width: 100%;
      }
    }
  }

  .language-btn {
    width: @DATA_LANG_SELECTOR_BUTTON_WIDTH;
    height: @DATA_LANG_SELECTOR_BUTTON_HEIGHT;
    text-align: center;
    // border-left: @DATA_LANG_SELECTOR_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
    // border-bottom: @DATA_LANG_SELECTOR_BUTTON_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
    // font-size: 80%;
    .FC0();
    cursor: default;
    color: extract(@CLR_0, 9);

    &.selected {
      background-color: extract(@CLR_1, 9);
      color: @CLR_BRAND_FONT;
      border-left: 0;
      .FC0B();
    }

    &.data {
      color: extract(@CLR_BRAND_HUE, 3);
    }

    &.dirty {
      font-style: italic;
    }

    &.default {
      height: @DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT;
      letter-spacing: 0.5pt;

      & > * {
        transform: rotate(-90deg);
        width: @DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT;
        margin-left: -((@DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT / 2) - (@DATA_LANG_SELECTOR_BUTTON_WIDTH / 2));
      }
    }
  }

  .mocking-btn {
    border-left: @DATA_LANG_SELECTOR_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
    height: 100%;
  }
}