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

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

.af-crumb-nav {
  position: relative;
  float: right;
  min-width: 300px;
  width: 100%;
  border: 1px solid #d9d9d9;
  padding-left: 32px;
  white-space: nowrap;
  overflow: hidden;
}

.af-crumb-nav .parent-button-container {
  float: right;
  width: 45px;
  border: 1px solid transparent
}

.af-crumb-nav .parent-button-container:hover {
  background-color: #E6F4FF;
  border: 1px solid #D0EAFF
}

.af-crumb-nav .parent-button-container a {
  display: block;
  float: right;
  color: #000;
  text-decoration: none;
  border-left: 1px solid transparent;
  padding: 3px 2px 4px;
}

.af-crumb-nav .parent-button-container:hover a {
  border-left: 1px solid #D0EAFF
}

.af-crumb-nav .parent-button-container .show-sub-folders {
  position: relative;
  float: right;
  padding: 7px 0;
  cursor: pointer
}

.af-crumb-nav .path-inner-container {
  width: ~"calc(100% - 45px)";
  float: right;
  position: relative;
  height: 29px;
}

.af-crumb-nav .path-inner-container .slide-handler {
  padding: 6px 8px;
  display: none;
  width: 25px;
  height: 100%;
  position: absolute;
  top: 0;
  background: #ccc;
  z-index: 100;
  opacity: 0.7;
  cursor: pointer
}

.af-crumb-nav .path-inner-container .slide-handler i {
  margin: 0;
}

.af-crumb-nav .path-inner-container.slide {
  overflow: hidden;
}

.af-crumb-nav .path-inner-container.slide .right-slide-handler {
  left: 0;
  display: block
}

.af-crumb-nav .path-inner-container.slide .left-slide-handler {
  right: 0;
  display: block
}

.af-crumb-nav .path-inner-container .root-folders {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  transition: left .8s;
}

.af-crumb-nav .path-inner-container .root-folders .root-folder {
  float: right
}

.af-crumb-nav .path-inner-container .root-folders .root-folder a {
  display: block;
  float: right;
  color: #000;
  text-decoration: none;
  border-left: 1px solid transparent;
  padding: 4px 2px
}

.af-crumb-nav .path-inner-container .root-folders .root-folder button {
  padding: 0 2px
}

.af-crumb-nav .path-inner-container .root-folders .root-folder {
  display: block;
  border: 1px solid transparent;
  float: right
}

.af-crumb-nav .path-inner-container .root-folders .root-folder > a i {
  display: none
}

.af-crumb-nav .path-inner-container .root-folders .root-folder:hover {
  background-color: #E6F4FF;
  border: 1px solid #D0EAFF
}

.af-crumb-nav .path-inner-container .root-folders .root-folder:hover > a {
  border-left: 1px solid #D0EAFF
}

.af-crumb-nav .path-inner-container .root-folders .root-folder:active {
  background: #CCE8FF;
  border: 1px solid #9AD2FF
}

.af-crumb-nav .path-inner-container .root-folders .root-folder:active > a {
  border-left: 1px solid #9AD2FF
}

.af-crumb-nav .path-inner-container .root-folders .root-folder.active.open {
  background: #CCE8FF;
  border: 1px solid #9AD2FF
}

.af-crumb-nav .path-inner-container .root-folders .root-folder .sub-folders {
  position: fixed;
  margin: 21px 0 0 -15px;
  white-space: nowrap;
  list-style: none;
  z-index: 101;
  background-color: #f2f2f2;
  padding: 2px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 4px 0 #8e8e8e;
}

.af-crumb-nav .path-inner-container .root-folders .root-folder .show-sub-folders {
  position: relative;
  float: right;
  padding: 7px 0;
  cursor: pointer
}

.af-crumb-nav .path-inner-container .root-folders .root-folder .sub-folders li a {
  display: block;
  width: 100%;
  padding: 5px 0 5px 40px
}

.af-crumb-nav .path-inner-container .root-folders .root-folder .sub-folders li a:hover {
  background-color: #92caf8
}

.af-crumb-nav .path-inner-container .root-folders .root-folder .sub-folders li a i {
  float: right;
  margin: 0 10px;
}

.af-crumb-nav .refresh-button-container {
  position: absolute;
  left: 0;
  height: 100%;
  border-right: 1px solid #ccc;
}

.af-crumb-nav .refresh-button-container button {
  background: transparent;
  height: 100%;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0 5px;
}

.af-crumb-nav .refresh-button-container button:hover {
  background-color: #E6F4FF;
  border: 1px solid #D0EAFF
}