smart-webcomponents/source/styles/default/smart.misc.css

Web Components & Custom Elements for Professional Web Applications

/* smart-element */
.smart-container {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  margin: 0;
  padding: 0;
}
.smart-container * {
  box-sizing: border-box;
}

.smart-popup,
.smart-drop-down {
  position: absolute;
  box-sizing: border-box;
  margin: var(--smart-editor-drop-down-vertical-offset) 0px;
  z-index: var(--smart-editor-drop-down-z-index);
  list-style-type: none;
}

@font-face {
  font-family: smart-icons;
  src: local("../font/smart-icons"), url("../font/smart-icons.woff2") format("woff2"), url("../font/smart-icons.woff") format("woff"), url("../font/smart-icons.ttf") format("truetype"), url("../font/smart-icons.eot") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
.smart-arrow {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1em 1em;
}

.smart-arrow-up:after,
.smart-arrow-down:after,
.smart-arrow-left:after,
.smart-arrow-right:after,
.smart-arrow-left-first:after,
.smart-arrow-right-last:after {
  width: 100%;
  height: 100%;
  font-family: var(--smart-font-family-icon);
  font-style: normal;
  font-weight: normal;
  font-size: var(--smart-arrow-size);
  color: inherit;
  text-decoration: inherit;
  font-variant: normal;
  text-transform: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
}

.smart-arrow-up:after {
  content: var(--smart-icon-arrow-up);
  top: -1px;
}

.smart-arrow-down:after {
  content: var(--smart-icon-arrow-down);
}

.smart-arrow-left:after {
  content: var(--smart-icon-arrow-left);
}

.smart-arrow-left-first:after {
  content: var(--smart-icon-first-page);
}

.smart-arrow-right-last:after {
  content: var(--smart-icon-last-page);
}

.smart-arrow-right:after {
  content: var(--smart-icon-arrow-right);
}

.drawContainer {
  width: 100%;
  height: 100%;
  position: relative;
}

.smart-ripple {
  display: block;
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.35s linear;
  border: none;
  opacity: 0.5;
}
.smart-ripple.smart-animate {
  animation: ripple 0.65s linear;
  position: absolute;
}

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
    /*scale the element to 250% to safely cover the entire link and fade it out*/
  }
}
.smart-overlay {
  pointer-events: none;
}

.smart-unselectable {
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}

.smart-hidden, .smart-collapse {
  display: none !important;
}

.smart-visibility-hidden {
  visibility: hidden !important;
}

.smart-element-init {
  visibility: hidden;
}

.smart-element-ready {
  overflow: hidden;
}

.smart-shown {
  display: block;
}

.smart-resize-trigger {
  position: absolute;
  left: 0;
  top: 0;
  transition: 0s;
}

.smart-resize-trigger-shrink {
  position: absolute;
  left: 0;
  top: 0;
  transition: 0s;
  width: 200%;
  height: 200%;
}

.smart-resize-trigger-container {
  display: block;
  position: relative;
  top: -100%;
  left: 0;
  height: 100%;
  width: 100%;
  min-height: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  visibility: hidden;
}

smart-grid .smart-loader,
smart-list-box .smart-loader,
smart-list-menu .smart-loader,
.smart-list-menu-view.smart-drop-down-repositioned .smart-loader,
smart-tree .smart-loader,
smart-card-view .smart-loader,
smart-table .smart-loader {
  margin: inherit;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, 0.1);
  box-sizing: border-box;
  background-clip: padding-box;
  border-radius: 50%;
  z-index: 10;
  width: calc(var(--smart-loader-size) + 10px);
  height: calc(var(--smart-loader-size) + 10px);
}
smart-grid .smart-loader:before, smart-grid .smart-loader:after,
smart-list-box .smart-loader:before,
smart-list-box .smart-loader:after,
smart-list-menu .smart-loader:before,
smart-list-menu .smart-loader:after,
.smart-list-menu-view.smart-drop-down-repositioned .smart-loader:before,
.smart-list-menu-view.smart-drop-down-repositioned .smart-loader:after,
smart-tree .smart-loader:before,
smart-tree .smart-loader:after,
smart-card-view .smart-loader:before,
smart-card-view .smart-loader:after,
smart-table .smart-loader:before,
smart-table .smart-loader:after {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: 6px solid transparent;
  animation-delay: 0.44s;
  animation: smart-loader-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, smart-loader-spin-fade 1.1s linear infinite;
}
smart-grid .smart-loader.smart-hidden,
smart-list-box .smart-loader.smart-hidden,
smart-list-menu .smart-loader.smart-hidden,
.smart-list-menu-view.smart-drop-down-repositioned .smart-loader.smart-hidden,
smart-tree .smart-loader.smart-hidden,
smart-card-view .smart-loader.smart-hidden,
smart-table .smart-loader.smart-hidden {
  display: none;
}

smart-grid[loading-indicator-position=top] .smart-loader, smart-grid[loading-indicator-position=bottom] .smart-loader,
smart-list-box[loading-indicator-position=top] .smart-loader,
smart-list-box[loading-indicator-position=bottom] .smart-loader,
smart-list-menu[loading-indicator-position=top] .smart-loader,
smart-list-menu[loading-indicator-position=bottom] .smart-loader,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader,
smart-tree[loading-indicator-position=top] .smart-loader,
smart-tree[loading-indicator-position=bottom] .smart-loader {
  width: var(--smart-loader-size);
  height: var(--smart-loader-size);
  left: 20%;
}
smart-grid[loading-indicator-position=top] .smart-loader-container, smart-grid[loading-indicator-position=bottom] .smart-loader-container,
smart-list-box[loading-indicator-position=top] .smart-loader-container,
smart-list-box[loading-indicator-position=bottom] .smart-loader-container,
smart-list-menu[loading-indicator-position=top] .smart-loader-container,
smart-list-menu[loading-indicator-position=bottom] .smart-loader-container,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container,
smart-tree[loading-indicator-position=top] .smart-loader-container,
smart-tree[loading-indicator-position=bottom] .smart-loader-container {
  display: block;
  position: relative;
  width: 100%;
  height: 10%;
  background-color: #F2F2F2;
  overflow: hidden;
  animation: smart-loader-container-pop-up-down 0.3s linear;
}
smart-grid[loading-indicator-position=top] .smart-loader-container.smart-hidden, smart-grid[loading-indicator-position=bottom] .smart-loader-container.smart-hidden,
smart-list-box[loading-indicator-position=top] .smart-loader-container.smart-hidden,
smart-list-box[loading-indicator-position=bottom] .smart-loader-container.smart-hidden,
smart-list-menu[loading-indicator-position=top] .smart-loader-container.smart-hidden,
smart-list-menu[loading-indicator-position=bottom] .smart-loader-container.smart-hidden,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container.smart-hidden,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container.smart-hidden,
smart-tree[loading-indicator-position=top] .smart-loader-container.smart-hidden,
smart-tree[loading-indicator-position=bottom] .smart-loader-container.smart-hidden {
  display: none;
}
smart-grid[loading-indicator-position=top] .smart-loader-label, smart-grid[loading-indicator-position=bottom] .smart-loader-label,
smart-list-box[loading-indicator-position=top] .smart-loader-label,
smart-list-box[loading-indicator-position=bottom] .smart-loader-label,
smart-list-menu[loading-indicator-position=top] .smart-loader-label,
smart-list-menu[loading-indicator-position=bottom] .smart-loader-label,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-label,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-label,
smart-tree[loading-indicator-position=top] .smart-loader-label,
smart-tree[loading-indicator-position=bottom] .smart-loader-label {
  position: absolute;
  display: block;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 60%;
  font-family: inherit;
  font-size: inherit;
  vertical-align: middle;
  white-space: nowrap;
}
smart-grid[loading-indicator-position=top] .smart-loader-container,
smart-list-box[loading-indicator-position=top] .smart-loader-container,
smart-list-menu[loading-indicator-position=top] .smart-loader-container,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container,
smart-tree[loading-indicator-position=top] .smart-loader-container {
  top: 0;
  position: absolute;
  animation: smart-loader-container-pop-up-top 0.3s linear;
}
smart-grid[loading-indicator-position=bottom] .smart-loader-container,
smart-list-box[loading-indicator-position=bottom] .smart-loader-container,
smart-list-menu[loading-indicator-position=bottom] .smart-loader-container,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container,
smart-tree[loading-indicator-position=bottom] .smart-loader-container {
  top: -10%;
}
smart-grid[loading-indicator-position=center] .smart-loader,
smart-list-box[loading-indicator-position=center] .smart-loader,
smart-list-menu[loading-indicator-position=center] .smart-loader,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=center] .smart-loader,
smart-tree[loading-indicator-position=center] .smart-loader {
  width: calc(var(--smart-loader-size) + 10px);
  height: calc(var(--smart-loader-size) + 10px);
}

smart-grid[disabled] .smart-loader:before, smart-grid[disabled] .smart-loader:after,
smart-list-box[disabled] .smart-loader:before,
smart-list-box[disabled] .smart-loader:after,
smart-list-menu[disabled] .smart-loader:before,
smart-list-menu[disabled] .smart-loader:after,
smart-tree[disabled] .smart-loader:before,
smart-tree[disabled] .smart-loader:after {
  animation: none;
}

@keyframes smart-loader-container-pop-up-down {
  0% {
    top: 0;
  }
  20% {
    top: -2%;
  }
  35% {
    top: -6%;
  }
  60% {
    top: -8%;
  }
  100% {
    top: -10%;
  }
}
@keyframes smart-loader-container-pop-up-top {
  0% {
    top: -10%;
  }
  20% {
    top: -8%;
  }
  35% {
    top: -6%;
  }
  60% {
    top: -2%;
  }
  100% {
    top: 0;
  }
}
@keyframes smart-loader-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes smart-loader-spin-fade {
  0% {
    border-top-color: #7A7A7A;
  }
  20% {
    border-top-color: #7A7A7A;
  }
  35% {
    border-top-color: transparent;
  }
  60% {
    border-top-color: #7A7A7A;
  }
  100% {
    border-top-color: #7A7A7A;
  }
}
.smart-right-to-left {
  direction: rtl;
}

.smart-micro {
  font-size: 9px;
}

.smart-small {
  font-size: 12px;
}

.smart-caps {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.smart-strong {
  font-weight: 500;
}

.smart-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-quiet {
  opacity: 0.75;
}

.smart-flex {
  display: flex;
}
.smart-flex.middle {
  align-content: center;
  justify-content: center;
}
.smart-flex.center {
  align-items: center;
  justify-items: center;
}

.smart-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.smart-dragging,
.smart-dragging * {
  cursor: move !important;
}

.smart-element {
  direction: ltr;
}
.smart-element ::-webkit-scrollbar {
  width: 18px;
}
.smart-element ::-webkit-scrollbar-track {
  background-color: transparent;
}
.smart-element ::-webkit-scrollbar-thumb {
  background-color: var(--smart-scroll-bar-thumb-background);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
.smart-element ::-webkit-scrollbar-thumb:hover {
  background-color: var(--smart-scroll-bar-thumb-background-hover);
}