acha-framework/src/frontend/core/scripts/directives/ribbon/rtl.less

is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...

.af-ribbon .tabs-container .tabs-header ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.af-ribbon .tabs-container .tabs-header ul li {
  display: inline-block;
  border: 1px solid transparent;
  border-bottom: none
}

.af-ribbon .tabs-container .tabs-header ul li:hover {
  border: 1px solid #EBECEC;
  border-bottom: none;
  margin: 0
}

.af-ribbon .tabs-container .tabs-header ul li.active {
  background: #f5f6f7;
  border: 1px solid #DADBDC;
  border-bottom: none;
  margin: 0
}

.af-ribbon .tabs-container .tabs-header ul li a {
  display: block;
  padding: 5px 10px;
  color: #1e395b;
  text-decoration: none
}

.af-ribbon .tabs-container .tabs-header ul li.active a {
  z-index: 1;
  border-bottom: 1px solid #f5f6f7;
  padding: 5px 10px 4px 10px;
  position: relative;
  top: 1px;
}

.af-ribbon .tabs-container .tabs-content {
  max-width: 100%;
  overflow-x: hidden;
  position: relative
}

.af-ribbon .tabs-container .tabs-content .slide-handler {
  display: none;
  width: 25px;
  height: 100%;
  position: absolute;
  top: 0;
  background: #ccc;
  z-index: 100;
  opacity: 0.7;
  cursor: pointer
}

.af-ribbon .tabs-container .tabs-content .slide-handler i {
  margin: 50px 7px 0 0;
}

.af-ribbon .tabs-container .tabs-content.slide .left-slide-handler {
  right: 0;
  display: block
}

.af-ribbon .tabs-container .tabs-content.slide .right-slide-handler {
  left: 0;
  display: block
}

.af-ribbon .tabs-container .tabs-content .tab-content {
  position: relative;
  transition: left .8s;
  display: none;
  background: #f5f6f7;
  padding: 2px;
  border-bottom: 1px solid #DADBDC;
  border-top: 1px solid #dadbdc;
  max-height:114px;
  overflow: hidden;
}

.af-ribbon .tabs-container .tabs-content .tab-content.active {
  display: block
}

.af-ribbon .tabs-container .tabs-content .tab-content .section {
  position: relative;
  height: 110px;
  float: right;
  border-right: 1px solid #e2e3e4;
  padding: 2px 4px 0
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button {
  float: right
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button button {
  background: transparent;
  border: 1px solid transparent;
  padding: 2px;
  border-radius: 0;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button button:hover {
  background: #eaf0f7;
  border: 1px solid #9dcafa;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button button:active {
  background-color: #C9E0F8;
  border: 1px solid #5098E4
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button button:active:hover {
  background-color: #D5E6F7
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button button i {
  float: none;
  margin: auto;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button.inline {
  float: none;
  max-width: none;
  font-size: 1em
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button.inline i {
  float: right;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .button.inline button span {
  display: block;
  float: right;
  margin: 0 4px;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .disabled ,
.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .disabled a {
  color: #afafb0
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .disabled button:hover {
  background: none;
  border: 1px solid #f5f6f7
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .disabled i {
  filter: grayscale(100%);
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .drop-button {
  display: inline-block;
  text-align: center;
  border: 1px solid transparent;
  padding: 2px
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .drop-button > a > i {
  float: none;
  display: block;
  margin: auto;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .drop-button a .menu-items {
  margin: 3px -3px 0 0;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .drop-button.disabled:hover{
  background: none;
  border: 1px solid #f5f6f7

}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .drop-button:hover {
  background: #eaf0f7;
  border: 1px solid #9dcafa;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .drop-button:active {
  background-color: #C9E0F8;
  border: 1px solid #5098E4;
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .drop-button:focus {
  border: 1px solid transparent
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .toggle-button.active button {
  background-color: #C9E0F8;
  border: 1px solid #5098E4
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .toggle-button.active button:hover {
  background-color: #D5E6F7
}

.af-ribbon .tabs-container .tabs-content .tab-content .section .section-content .section-content-column {
  float: right;
  margin-left: 5px;
}

.af-ribbon .tabs-container .tabs-content .section .section-label {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  color: #929292;
  background: #ededed;
}