com.phloxui/styles/lib/component/dataview/ComponentDataLangSelector.less

PhloxUI Ng2+ Framework

.phx-component-lang-selector {
	// Default width & height
	width: @DEFAULT_MATERIAL_DATA_LANG_SELECTOR_WIDTH;
	height: @DEFAULT_MATERIAL_DATA_LANG_SELECTOR_HEIGHT;
  position: relative;

  > .wrapper {
    position: relative;
		width: 100%;
    height: 100%;

    &.left {
			position: absolute;
      padding-right: @DATA_LANG_SELECTOR_LEFT_PADDING;
      width: 100%;
			height: 100%;
      overflow-y: auto;

      &.expand {
        padding-right: 0;
      }

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

        > .component-wrapper {
          display: none;
	        width: 100%;
          height: 100%;

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

    &.right {
			position: absolute;
      width: @DATA_LANG_SELECTOR_PANE_WIDTH;
	    height: 100%;
      right: 0;
      overflow: hidden;

      &.hide {
        display: none;
      }

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

  .language-btn {
    .FC0();
    width: @DATA_LANG_SELECTOR_BUTTON_WIDTH;
    height: @DATA_LANG_SELECTOR_BUTTON_HEIGHT;
    text-align: center;
    border-left: @DATA_LANG_SELECTOR_BORDER_THICKNESS solid @MATERIAL_BORDER_COLOR;
    cursor: default;
    color: extract(@CLR_0, 9);

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

    &.selected {
      .FC0B();
			background-color: @CLR_BRAND;
			color: @CLR_BRAND_FONT;
      border-left: 0;
      border-bottom: @DATA_LANG_SELECTOR_BORDER_THICKNESS solid @MATERIAL_BORDER_COLOR;
      border-top: @DATA_LANG_SELECTOR_BORDER_THICKNESS solid @MATERIAL_BORDER_COLOR;
    }

    &.dirty {
      font-style: italic;
    }

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

      &.selected {
        border-top: 0;
      }

      & > * {
        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 @MATERIAL_BORDER_COLOR;
    height: 100%;
  }
}