com.phloxui/styles/lib/theme/material/component/dataview/MaterialComponentDataLangSelector.less

PhloxUI Ng2+ Framework

.ua-firefox {
  .material-component-lang-selector {
    > .wrapper { 
      &.left {
        scrollbar-width: thin;
        scrollbar-color: extract(@CLR_1, 5) extract(@CLR_1, 9); 
      }
    }
  }
}

.material-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; 
      width: calc(100% - @MATERIAL_DATA_LANG_SELECTOR_LEFT_PADDING);
      height: 100%;
      // overflow: auto;
      overflow-x: hidden;

      &::-webkit-scrollbar-track {
          // -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
          background-color: extract(@CLR_1, 9);
      }

      &::-webkit-scrollbar {
          width: @SCROLL_WIDTH_HEIGHT;
          background-color: extract(@CLR_1, 9);
      }

      &::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background-color: extract(@CLR_1, 5);
      }

      &.expand {
        padding-right: 0;
        width: 100% !important;
      } 

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

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

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

    &.right {
			position: absolute;
      width: @MATERIAL_DATA_LANG_SELECTOR_PANE_WIDTH;
	    height: 100%;
      right: 0;
      overflow: hidden;
      border-left: @MATERIAL_DATA_LANG_SELECTOR_BORDER_THICKNESS solid @MATERIAL_BORDER_COLOR;

      &.hide {
        display: none;
      }

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

  .language-btn {
    .FC0();
    width: @MATERIAL_DATA_LANG_SELECTOR_BUTTON_WIDTH;
    height: @MATERIAL_DATA_LANG_SELECTOR_BUTTON_HEIGHT;
    text-align: center;
    // border-left: @MATERIAL_DATA_LANG_SELECTOR_BORDER_THICKNESS solid @MATERIAL_BORDER_COLOR;
    cursor: pointer;
    color: extract(@CLR_0, 9);

    &:hover {
      background-color: extract(@CLR_1, 8)
    }

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

    &.selected {
      .FC0B();
      background-color: extract(@CLR_1, 9);
      color: extract(@CLR_0, 1);
      // border-left: 0;
      border-bottom: @MATERIAL_DATA_LANG_SELECTOR_BORDER_THICKNESS solid @MATERIAL_BORDER_COLOR;
      border-top: @MATERIAL_DATA_LANG_SELECTOR_BORDER_THICKNESS solid @MATERIAL_BORDER_COLOR;
    }

    &.dirty {
      font-style: italic;
    }

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

      &.selected {
        border-top: 0;
      }

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

  .mocking-btn {
    border-left: @MATERIAL_DATA_LANG_SELECTOR_BORDER_THICKNESS solid @MATERIAL_BORDER_COLOR;
    height: 100%;
  }
}