ace-uikit/dist/ace.medium.gray.css

A lightweight UI framework for Adobe CEP.

body {
  font-family: source-sans-pro, sans-serif;
}

.ace-badge--blue,
.ace-badge--green,
.ace-badge--gray,
.ace-badge--warm,
.ace-badge--red {
  height: 1.1875rem;
  padding: 0 0.3125rem;
  line-height: 1.1875rem;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
  font-size: 12px;
  white-space: nowrap;
  cursor: default;
  color: #fff;
}
.ace-badge--blue {
  background-color: #409EFF;
}
.ace-badge--green {
  background-color: #19be6b;
}
.ace-badge--gray {
  background-color: #909399;
}
.ace-badge--warm {
  background-color: #ffb700;
}
.ace-badge--red {
  background-color: #f56c6c;
}

.ace-btn,
.ace-btn--action,
.ace-btn--error,
.ace-btn--block {
  padding: 0 0.563rem;
  font-size: 12px;
  line-height: 1.4rem;
  letter-spacing: 0;
  border-radius: 2px;
  outline: 0;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ace-btn img,
.ace-btn--action img,
.ace-btn--error img,
.ace-btn--block img {
  min-height: 15px;
  min-width: 15px;
  vertical-align: middle;
  margin-right: 0.125rem;
}
.ace-btn span,
.ace-btn--action span,
.ace-btn--error span,
.ace-btn--block span {
  vertical-align: middle;
  color: inherit;
}
.ace-btn:disabled,
.ace-btn--action:disabled,
.ace-btn--error:disabled,
.ace-btn--block:disabled {
  opacity: 0.6;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.ace-btn.icon,
.ace-btn--action.icon,
.ace-btn--error.icon,
.ace-btn--block.icon {
  background-color: transparent;
  border-color: transparent;
  padding: 0 0.3rem;
}
.ace-btn.icon:disabled,
.ace-btn--action.icon:disabled,
.ace-btn--error.icon:disabled,
.ace-btn--block.icon:disabled {
  opacity: 0.6;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.ace-btn.icon img,
.ace-btn--action.icon img,
.ace-btn--error.icon img,
.ace-btn--block.icon img {
  margin-right: 0;
}
.ace-btn--action,
.ace-btn--error,
.ace-btn--block {
  font-weight: 500;
}
.ace-btn--action:disabled,
.ace-btn--error:disabled,
.ace-btn--block:disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.ace-btn-grp {
  display: flex;
}
.ace-btn-grp .ace-btn {
  border-radius: 0;
}
.ace-btn-grp .ace-btn:first-child {
  border-radius: 2px 0 0 2px;
  border-right: none;
}
.ace-btn-grp .ace-btn:last-child {
  border-radius: 0 2px 2px 0;
  border-left: none;
}

.ace-card {
  padding: 0.625rem;
  border-radius: 2px;
  overflow: hidden;
  line-height: 1.375rem;
  font-size: 14px;
}

input[type="checkbox"] {
  display: none;
}
.ace-checkbox {
  position: relative;
  margin-right: 0.625rem;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  user-select: none;
}
.ace-checkbox .ace-checkbox-text {
  vertical-align: middle;
  color: inherit;
}
.ace-checkbox .ace-checkbox-checkmark {
  position: relative;
  margin-right: 2px;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}
.ace-checkbox .ace-checkbox-checkmark::after {
  content: '';
  position: absolute;
  width: 0.8rem;
  height: 4px;
  opacity: 0;
  background: transparent;
  border-style: solid;
  border-width: 3px;
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-50deg);
  transition: opacity 0.2s ease-in-out;
}
.ace-checkbox.checkbox-disabled {
  opacity: 0.6;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.ace-checkbox.checkbox-checked .ace-checkbox-checkmark::after {
  opacity: 1;
}

.ace-notification--info,
.ace-notification--success,
.ace-notification--warning,
.ace-notification--error {
  padding: 0.15em 0.5em 0.2em;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
}
.ace-notification--info {
  background-color: #409EFF;
}
.ace-notification--success {
  background-color: #19be6b;
}
.ace-notification--warning {
  background-color: #ffb700;
}
.ace-notification--error {
  background-color: #f56c6c;
}

input[type="radio"] {
  display: none;
}
.ace-radio {
  position: relative;
  margin-right: 0.625rem;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  user-select: none;
}
.ace-radio .ace-radio-text {
  vertical-align: middle;
  color: inherit;
}
.ace-radio .ace-radio-checkmark {
  position: relative;
  margin-right: 2px;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border-radius: 100%;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}
.ace-radio .ace-radio-checkmark::after {
  content: '';
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  opacity: 0;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.ace-radio.radio-disabled {
  opacity: 0.5;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.ace-radio.radio-checked .ace-radio-checkmark::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.3);
}

input[type="range"]:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.ace-range {
  height: 0.215rem;
  outline: none;
  -webkit-appearance: none;
}
.ace-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1rem;
  width: 0.6rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.ace-select {
  position: relative;
  padding: 0 1.5rem 0 0.3125rem;
  border-radius: 2px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 14px;
  height: 1.4rem;
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  cursor: pointer;
}
.ace-select.select-disabled {
  opacity: 0.5;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.ace-select .ace-select-frame input {
  outline: none;
  cursor: pointer;
  border: none;
  width: 100%;
}
.ace-select .ace-select-frame .ace-select-suffix {
  position: absolute;
  height: 100%;
  right: 0.5rem;
  top: 0;
  text-align: center;
  pointer-events: none;
  transition: transform 0.3s;
  transform: rotateZ(0deg);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.ace-select .ace-select-frame .ace-select-suffix.select-reversed {
  transform: rotateZ(180deg);
}
.ace-select .ace-select-frame .ace-select-suffix i {
  border-style: solid;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  margin-top: -4px;
}
.ace-select .ace-select-dropdown {
  position: absolute;
  left: 0;
  margin-top: 0.3125rem;
  overflow: hidden;
  width: 100%;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 0.375rem 0;
  max-height: 16.25rem;
  overflow-y: auto;
  transition: all 0.25s ease;
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}
.ace-select .ace-select-dropdown.dropdown-open {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}
.ace-select .ace-select-dropdown::-webkit-scrollbar-track {
  border-radius: 0;
}
.ace-select .ace-select-dropdown::-webkit-scrollbar {
  width: 4px;
  height: 41.1859%;
}
.ace-select .ace-select-dropdown::-webkit-scrollbar-thumb {
  top: 2px;
  background-clip: padding-box;
}
.ace-select .ace-select-dropdown dd {
  font-size: 12px;
  margin: 0;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 1.5rem;
  line-height: 1.5rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.ace-select .ace-select-dropdown dd.actived {
  font-weight: bold;
}
.ace-select .ace-select-dropdown dt {
  font-size: 12px;
  padding: 0 10px;
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  user-select: none;
}

.ace-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-size: 14px;
  line-height: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}
.ace-switch .ace-switch-checkmark {
  margin: 0;
  display: inline-block;
  position: relative;
  width: 1.3rem;
  height: 0.75rem;
  outline: none;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
  vertical-align: middle;
}
.ace-switch .ace-switch-checkmark::after {
  content: "";
  position: absolute;
  top: -0.02rem;
  left: -0.125rem;
  border-radius: 100%;
  transition: all 0.3s;
  width: 0.75rem;
  height: 0.75rem;
}
.ace-switch.switch-checked .ace-switch-checkmark::after {
  left: 100%;
  margin-left: -0.5rem;
}
.ace-switch.switch-disabled {
  opacity: 0.5;
  cursor: default;
  user-select: none;
  pointer-events: none;
}

.ace-textarea {
  font-size: 12px;
  letter-spacing: 0;
  padding: 0.6rem;
  resize: none;
}
.ace-textarea:focus {
  outline: none;
}
.ace-textarea:disabled {
  opacity: 0.5;
  cursor: default;
  user-select: none;
  pointer-events: none;
}

input[type="text"]:disabled {
  opacity: 0.5;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.ace-textinput {
  line-height: 1.4rem;
  font-size: 12px;
  letter-spacing: 0;
  padding: 0 0.6rem;
}
.ace-textinput:focus {
  outline: none;
}

.ace-btn {
  color: #323232;
  background-color: #b8b8b8;
  border: 1px solid #707070;
}
.ace-btn:hover {
  background-color: #cccccc;
}
.ace-btn:active {
  background-color: #808080;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05);
}
.ace-btn.icon:hover {
  border: 1px solid #707070;
}
.ace-btn--block {
  color: #323232;
  background-color: #b8b8b8;
  border: 1px solid #707070;
  display: inline-block;
  width: 100%;
}
.ace-btn--block:hover {
  background-color: #cccccc;
}
.ace-btn--block:active {
  background-color: #808080;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05);
}

.ace-btn-grp .ace-btn.active {
  background-color: #808080;
}

.ace-card {
  color: #323232;
  box-shadow: 0 2px 10px -7px rgba(255, 255, 255, 0.69);
  background-color: #a5a5a5;
}

.ace-checkbox {
  color: #323232;
}
.ace-checkbox .ace-checkbox-checkmark {
  background: #cccccc;
  border: 1px solid #707070;
  box-shadow: inset 0 1px #efefef;
}
.ace-checkbox .ace-checkbox-checkmark:active {
  background-color: #8b8b8b;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05);
}
.ace-checkbox .ace-checkbox-checkmark::after {
  border-color: #323232;
}

.ace-radio {
  color: #323232;
}
.ace-radio .ace-radio-checkmark {
  background: #cccccc;
  border: 1px solid #707070;
  box-shadow: inset 0 1px #efefef;
}
.ace-radio .ace-radio-checkmark:active {
  background-color: #8b8b8b;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05);
}
.ace-radio .ace-radio-checkmark::after {
  background-color: #323232;
}

.ace-range {
  border: 1px solid #707070;
  background-color: #a5a5a5;
}
.ace-range::-webkit-slider-thumb {
  background-color: #acacac;
  border: 1px solid #707070;
  box-shadow: inset 0 1px #efefef;
}
.ace-range::-webkit-slider-thumb:hover {
  background-color: #cfcfcf;
}

.ace-select {
  background-color: #d1d1d1;
  border: 1px solid #707070;
}
.ace-select .ace-select-frame input {
  background-color: #d1d1d1;
  color: #323232;
}
.ace-select .ace-select-frame .ace-select-suffix i {
  border-color: #323232;
}
.ace-select .ace-select-dropdown {
  background-color: #d1d1d1;
  border: solid 1px #707070;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}
.ace-select .ace-select-dropdown::-webkit-scrollbar-track {
  background: #ababab;
}
.ace-select .ace-select-dropdown::-webkit-scrollbar-thumb {
  background-color: #858585;
}
.ace-select .ace-select-dropdown::-webkit-scrollbar-thumb:hover {
  background-color: #999999;
}
.ace-select .ace-select-dropdown dd {
  color: #323232;
}
.ace-select .ace-select-dropdown dd:hover {
  background-color: #8aa3c1;
}
.ace-select .ace-select-dropdown dd.actived {
  background-color: #8aa3c1;
}
.ace-select .ace-select-dropdown dt {
  color: #808080;
}

.ace-switch .ace-switch-checkmark {
  background: #dcdfe6;
  border: 1px solid #dcdfe6;
}
.ace-switch .ace-switch-checkmark::after {
  background-color: #fff;
  box-shadow: 0 2px 10px -1px rgba(171, 171, 171, 0.69);
}
.ace-switch.switch-checked .ace-switch-checkmark {
  border-color: #1896FD;
  background-color: #1896FD;
}

.ace-textarea {
  border: 1px solid #707070;
  background-color: #d1d1d1;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05);
  color: #323232;
}
.ace-textarea:focus {
  border: 1px solid #1473e6;
}

.ace-textinput {
  border: 1px solid #707070;
  background-color: #d1d1d1;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05);
  color: #323232;
}
.ace-textinput:focus {
  border: 1px solid #1473e6;
}

.ace-btn--action,
.ace-btn--error {
  color: #fff;
}
.ace-btn--action {
  border: 1px solid #134f7f;
  background-color: #288edf;
}
.ace-btn--action:hover {
  background-color: #4ca1e4;
}
.ace-btn--action:active {
  background-color: #1e7dc8;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.12);
}
.ace-btn--error {
  border: 1px solid #7f1313;
  background-color: #df2828;
}
.ace-btn--error:hover {
  background-color: #e44c4c;
}
.ace-btn--error:active {
  background-color: #c81e1e;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.12);
}