ng-devui/theme-collection/overwrite-style.css

DevUI components based on Angular

.devui-btn:not(.devui-btn-xs):not(.devui-btn-sm):not(.devui-btn-lg) {
  height: 32px;
  line-height: 32px;
}

.devui-btn:not(.devui-btn-xs):not(.devui-btn-sm):not(.devui-btn-md) {
  height: 40px;
  line-height: 40px;
}

.devui-btn:not(.devui-btn-xs):not(.devui-btn-lg):not(.devui-btn-md) {
  height: 28px;
  line-height: 28px;
}

d-alert .devui-alert {
  border: 1px solid transparent;
}
d-alert .devui-alert.devui-alert-success {
  border-color: transparent;
}
d-alert .devui-alert.devui-alert-info {
  border-color: transparent;
}
d-alert .devui-alert.devui-alert-warning {
  border-color: transparent;
}
d-alert .devui-alert.devui-alert-danger {
  border-color: transparent;
}
d-alert .devui-alert.devui-alert-simple {
  border-color: transparent;
}

d-alert .devui-alert.devui-alert-simple {
  background-color: var(--devui-area, #f3f3f3);
}

d-tabs .devui-nav-container.devui-nav-lg {
  font-size: var(--devui-font-size-lg, 14px);
}
d-tabs .devui-nav-container.devui-nav-lg .devui-nav-tabs > li {
  height: 39px !important;
  line-height: 39px !important;
}
d-tabs .devui-nav-container.devui-nav-lg .devui-nav-pills > li {
  height: 40px !important;
  line-height: 40px !important;
}
d-tabs .devui-nav-container.devui-nav-lg .devui-nav-options > li {
  height: 34px !important;
  line-height: 34px !important;
}
d-tabs .devui-nav-container.devui-nav-lg .devui-nav-slider-animation,
d-tabs .devui-nav-container.devui-nav-lg .devui-nav-slider > li {
  height: 36px !important;
  line-height: 36px !important;
}
d-tabs .devui-nav-container.devui-nav-lg .devui-nav-wrapped.devui-nav-overflow li.active {
  padding-top: 7px !important;
}
d-tabs .devui-nav-container.devui-nav-lg .devui-nav-wrapped li {
  padding: 8px 16px !important;
}
d-tabs .devui-nav-container.devui-nav-md {
  font-size: var(--devui-font-size-lg, 14px) !important;
}
d-tabs .devui-nav-container.devui-nav-md .devui-nav-tabs > li {
  height: 31px !important;
  line-height: 31px !important;
}
d-tabs .devui-nav-container.devui-nav-md .devui-nav-pills > li {
  height: 32px !important;
  line-height: 32px !important;
}
d-tabs .devui-nav-container.devui-nav-md .devui-nav-options > li {
  height: 26px !important;
  line-height: 26px !important;
}
d-tabs .devui-nav-container.devui-nav-md .devui-nav-slider-animation,
d-tabs .devui-nav-container.devui-nav-md .devui-nav-slider > li {
  height: 28px !important;
  line-height: 28px !important;
}
d-tabs .devui-nav-container.devui-nav-sm {
  font-size: var(--devui-font-size-lg, 14px) !important;
}
d-tabs .devui-nav-container.devui-nav-sm .devui-nav-tabs > li {
  height: 27px !important;
  line-height: 27px !important;
}
d-tabs .devui-nav-container.devui-nav-sm .devui-nav-pills > li {
  height: 28px !important;
  line-height: 28px !important;
}
d-tabs .devui-nav-container.devui-nav-sm .devui-nav-options > li {
  height: 22px !important;
  line-height: 22px !important;
}
d-tabs .devui-nav-container.devui-nav-sm .devui-nav-slider-animation,
d-tabs .devui-nav-container.devui-nav-sm .devui-nav-slider > li {
  height: 24px !important;
  line-height: 24px !important;
}
d-tabs .devui-nav-container.devui-nav-sm .devui-nav-wrapped.devui-nav-overflow li.active {
  padding-top: 1px !important;
}
d-tabs .devui-nav-container.devui-nav-sm .devui-nav-wrapped li {
  padding: 2px 16px !important;
}
d-tabs .devui-nav-container.devui-nav-xs {
  font-size: var(--devui-font-size-sm, 12px) !important;
}
d-tabs .devui-nav-container.devui-nav-xs .devui-nav-tabs > li {
  height: 23px !important;
  line-height: 23px !important;
}
d-tabs .devui-nav-container.devui-nav-xs .devui-nav-pills > li {
  height: 24px !important;
  line-height: 24px !important;
}
d-tabs .devui-nav-container.devui-nav-xs .devui-nav-options > li {
  height: 18px !important;
  line-height: 18px !important;
}
d-tabs .devui-nav-container.devui-nav-xs .devui-nav-slider-animation,
d-tabs .devui-nav-container.devui-nav-xs .devui-nav-slider > li {
  height: 20px !important;
  line-height: 20px !important;
}
d-tabs .devui-nav-container.devui-nav-xs .devui-nav-wrapped.devui-nav-overflow li.active {
  padding-top: 0 !important;
}
d-tabs .devui-nav-container.devui-nav-xs .devui-nav-wrapped li {
  padding: 1px 16px 0 !important;
  line-height: 22px !important;
}
d-tabs .devui-nav-container.devui-nav-xs .devui-tab-close-icon {
  vertical-align: middle !important;
}
d-tabs .devui-nav-container .devui-nav-tabs.devui-nav-stacked > li,
d-tabs .devui-nav-container .devui-nav-pills.devui-nav-stacked > li {
  height: 38px !important;
  line-height: 38px !important;
}

d-tag {
  --devui-font-size: var(--devui-font-size-sm, 12px);
}

d-datepicker,
d-date-range-picker,
d-datepicker-range-single,
d-two-datepicker-single {
  --devui-list-item-active-bg: var(--devui-brand, #5e7ce0);
  --devui-list-item-active-hover-bg: var(--devui-brand, #526ecc);
  --devui-list-item-active-text: var(--devui-light-text, #ffffff);
  --devui-font-size: var(--devui-font-size-sm, 12px);
}

d-multi-auto-complete .multi-auto-complete label.multiple-label-auto-complete ul.devui-dropdown-origin {
  min-height: 32px;
}

d-search .devui-search .devui-input:not(.devui-input-sm):not(.devui-input-lg) {
  height: 32px;
}
d-search .devui-search .devui-search-icon {
  line-height: 32px;
}
d-search .devui-search .devui-search-clear:not(.devui-search-clear-lg):not(.devui-search-clear-sm) {
  line-height: 32px;
}

d-select .devui-form-group .devui-form-control.devui-select-input {
  height: 30px;
}
d-select .devui-form-group .devui-select-list-wrapper.devui-form-control .devui-select-selected-item-with-template,
d-select .devui-form-group .devui-select-list-wrapper.devui-form-control .devui-select-placeholder {
  height: 28px;
  line-height: 28px;
}
d-select .devui-form-group .devui-select-list-wrapper.devui-form-control ul.devui-select-tag-list {
  min-height: 28px;
  line-height: 1;
}
d-select .devui-form-group .devui-select-list-wrapper.devui-form-control ul.devui-select-tag-list .devui-select-tag-item {
  margin: 4px 0 0 4px;
}

d-tree-select .devui-tree-select .popper .popper-activator .devui-select-input.devui-tree-select-input {
  padding: 4px 8px;
  min-height: 32px;
  max-height: 64px;
}
d-tree-select .devui-tree-select .popper .popper-activator .devui-select-input.devui-tree-select-input .devui-select-item {
  line-height: 16px;
}

input {
  border-radius: var(--devui-border-radius, 2px);
}

[dTextInput] {
  height: 32px;
}

.devui-form-controls input[type=text],
.devui-form-controls input[type=password],
[dTextInput] {
  height: 32px;
}

[dTextarea] {
  min-height: 32px;
}

.devui-dropdown-menu > .devui-dropdown-menu-wrap > li,
.devui-dropdown-menu > d-toggle-menu-list > .devui-dropdown-menu-wrap > li {
  padding: 12px 12px 0 12px;
}
.devui-dropdown-menu > .devui-dropdown-menu-wrap.devui-auto-complete-list > .devui-no-data-tip,
.devui-dropdown-menu > d-toggle-menu-list > .devui-dropdown-menu-wrap.devui-auto-complete-list > .devui-no-data-tip {
  padding: 12px;
}
.devui-dropdown-menu > .devui-dropdown-menu-wrap.devui-auto-complete-list > li,
.devui-dropdown-menu > d-toggle-menu-list > .devui-dropdown-menu-wrap.devui-auto-complete-list > li {
  padding: 8px 12px 4px 12px;
}
.devui-dropdown-menu > .devui-dropdown-menu-wrap ul:not(:empty),
.devui-dropdown-menu > .devui-dropdown-menu-wrap .cdk-virtual-scroll-content-wrapper,
.devui-dropdown-menu > d-toggle-menu-list > .devui-dropdown-menu-wrap ul:not(:empty),
.devui-dropdown-menu > d-toggle-menu-list > .devui-dropdown-menu-wrap .cdk-virtual-scroll-content-wrapper {
  padding: 12px;
}
.devui-dropdown-menu > .devui-dropdown-menu-wrap ul:not(:empty) li,
.devui-dropdown-menu > .devui-dropdown-menu-wrap .cdk-virtual-scroll-content-wrapper li,
.devui-dropdown-menu > d-toggle-menu-list > .devui-dropdown-menu-wrap ul:not(:empty) li,
.devui-dropdown-menu > d-toggle-menu-list > .devui-dropdown-menu-wrap .cdk-virtual-scroll-content-wrapper li {
  border-radius: var(--devui-border-radius, 2px);
}

.devui-dropdown-menu {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

div.devui-search-container {
  padding: 12px 12px 0 12px;
}

.devui-dropdown-menu > ul:not(.devui-dropdown-menu-wrap) {
  padding: 12px;
}
.devui-dropdown-menu > ul:not(.devui-dropdown-menu-wrap) li {
  border-radius: var(--devui-border-radius, 2px);
}

ul.devui-dropdown-menu {
  padding: 12px;
}
ul.devui-dropdown-menu li .devui-dropdown-item {
  border-radius: var(--devui-border-radius, 2px);
}

d-tags-input .devui-tags-host {
  min-height: 32px !important;
}
d-tags-input .devui-tags-host d-toggle-menu-container .devui-toggle-menu.devui-toggle-menu-container.disabled d-toggle-menu-label ul.devui-select-tag-list,
d-tags-input .devui-tags-host d-toggle-menu-container d-toggle-menu-search .devui-toggle-menu-search > input {
  min-height: 30px;
}
d-tags-input .devui-tags-host d-toggle-menu-container .devui-toggle-menu-container d-toggle-menu-label .devui-select-tag-list {
  padding-bottom: 4px;
}
d-tags-input .devui-tags-host d-toggle-menu-container .devui-toggle-menu-container d-toggle-menu-label .devui-select-tag-list.multiple-line {
  max-height: 52px;
}
d-tags-input .devui-tags-host d-toggle-menu-container .devui-toggle-menu-container d-toggle-menu-label .devui-select-tag-list .devui-select-tag-item {
  margin: 4px 0 0 4px;
}
d-tags-input .devui-tags-autocomplete .devui-suggestion-list {
  padding: 12px !important;
}

.devui-input-sm {
  height: 24px;
}

.devui-input-lg {
  height: 46px;
}

d-single-upload .devui-input-group .devui-form-control.devui-files-list, d-single-upload .devui-input-group .devui-form-control.devui-upload-placeholder,
d-multiple-upload .devui-input-group .devui-form-control.devui-files-list,
d-multiple-upload .devui-input-group .devui-form-control.devui-upload-placeholder {
  height: 32px;
  max-height: 32px;
}
d-single-upload .devui-input-group .devui-form-control .devui-file-item,
d-multiple-upload .devui-input-group .devui-form-control .devui-file-item {
  height: 26px !important;
  line-height: 24px !important;
}

div.popper-container div.popper-container-scrollable {
  padding: 12px;
}

div.popper-container div.devui-tree-select span.devui-form-control-feedback {
  top: 12px;
  right: 12px;
}

d-cascader .devui-dropdown input {
  height: 32px;
}

d-cascader .devui-tags-input-wrapper .devui-tags-input {
  min-height: 30px !important;
  padding-top: 2px !important;
}

d-pagination div.devui-pagination div.devui-dropdown d-icon.devui-page-size {
  height: 32px;
}
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled) {
  cursor: pointer;
}
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled) a:hover,
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled) span:hover,
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled) a:focus,
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled) span:focus {
  color: var(--devui-text, #191919) !important;
  border: 1px solid var(--devui-dividing-line, #f0f0f0) !important;
  box-shadow: 0 1px 3px 0 var(--devui-light-shadow, rgba(0, 0, 0, 0.08)) !important;
}
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled) a:active {
  background-color: transparent !important;
  color: var(--devui-text, #191919) !important;
}
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled).active a {
  color: var(--devui-light-text, #ffffff) !important;
  cursor: pointer !important;
}
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled).active a:hover {
  color: var(--devui-light-text, #ffffff) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled) a.devui-pagination-link:hover:not(:active) svg g polygon {
  fill: var(--devui-text, #191919) !important;
}
d-pagination div.devui-pagination ul.devui-pagination-list li:not(.disabled) a.devui-pagination-link:active svg g polygon {
  fill: var(--devui-text, #191919) !important;
}
d-pagination ul.devui-pagination-list > li > a {
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 4px !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
}
d-pagination ul.devui-pagination-list > li > .devui-pagination-active-block {
  height: 28px !important;
  margin-bottom: -28px !important;
}
d-pagination ul.devui-pagination-sm > li > a {
  height: 24px !important;
  min-width: 24px !important;
}
d-pagination ul.devui-pagination-sm > li > .devui-pagination-active-block {
  height: 24px !important;
  margin-bottom: -24px !important;
}
d-pagination ul.devui-pagination-lg > li > a {
  height: 40px !important;
  min-width: 40px !important;
}
d-pagination ul.devui-pagination-lg > li > .devui-pagination-active-block {
  height: 40px !important;
  margin-bottom: -40px !important;
}
d-pagination .devui-pagination-list > li:first-child > a,
d-pagination .devui-pagination-list > li:last-child > a {
  padding: 0 !important;
  height: 28px !important;
  line-height: 28px !important;
}
d-pagination .devui-pagination-sm > li:first-child > a,
d-pagination .devui-pagination-sm > li:last-child > a {
  height: 24px !important;
  line-height: 24px !important;
}
d-pagination .devui-pagination-lg > li:first-child > a,
d-pagination .devui-pagination-lg > li:last-child > a {
  height: 40px !important;
  line-height: 40px !important;
}
d-pagination .devui-pagination-link {
  height: 28px !important;
  line-height: 28px !important;
}
d-pagination .devui-pagination-sm > li:first-child > a {
  padding: 0 !important;
}
d-pagination .devui-pagination-sm > li:last-child > a {
  padding: 0 !important;
}

d-editable-select input[name=autoCompleteControl].devui-dropdown-origin {
  height: 32px;
}

d-input-number .input-container input.input-box {
  height: 32px;
}

d-datepicker-pro .devui-datepicker-pro-wrapper .devui-single-picker .devui-input {
  height: 30px !important;
}

.devui-datepicker-pro-wrapper .devui-input-group > .devui-input {
  height: 30px !important;
}

.devui-datepicker-pro-wrapper .devui-range-picker .close-icon-wrapper {
  line-height: 28px !important;
}

.devui-datepicker-pro-wrapper .devui-range-picker .date-icon-wrapper {
  line-height: 28px !important;
}

input[dtimepicker] {
  height: 32px !important;
}