yui-vue3/src/styles/theme/base.less

A high quality UI components Library with Vue.js 3.

a {
    color: @link-color
}
a:hover {
    color: @link-hover-color
}
a:active {
    color: @link-active-color
}
.yui-btn-default:hover {
    color: @primary-hover-color;
    border-color: @primary-hover-color
}
.yui-btn-primary {
    background-color: @primary-color;
    border-color: @primary-color
}
.yui-btn-primary:hover {
    background-color: @primary-hover-color;
    border-color: @primary-hover-color
}
.yui-btn-primary.active,
.yui-btn-primary:active {
    background-color: @primary-active-color;
    border-color: @primary-active-color
}
.yui-btn-primary:focus {
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-btn-group:not(.yui-btn-group-vertical) .yui-btn-primary:not(:first-child):not(:last-child) {
    border-right-color: @primary-active-color;
    border-left-color: @primary-active-color
}
.yui-btn-group:not(.yui-btn-group-vertical) .yui-btn-primary:first-child:not(:last-child) {
    border-right-color: @primary-active-color
}
.yui-btn-group:not(.yui-btn-group-vertical) .yui-btn-primary + .yui-btn,
.yui-btn-group:not(.yui-btn-group-vertical) .yui-btn-primary:last-child:not(:first-child) {
    border-left-color: @primary-active-color
}
.yui-btn-group-vertical .yui-btn-primary:not(:first-child):not(:last-child) {
    border-top-color: @primary-active-color;
    border-bottom-color: @primary-active-color
}
.yui-btn-group-vertical .yui-btn-primary:first-child:not(:last-child) {
    border-bottom-color: @primary-active-color
}
.yui-btn-group-vertical .yui-btn-primary + .yui-btn,
.yui-btn-group-vertical .yui-btn-primary:last-child:not(:first-child) {
    border-top-color: @primary-active-color
}
.yui-btn-dashed:hover {
    color: @primary-hover-color;
    border-color: @primary-hover-color
}
.yui-btn-dashed.active,
.yui-btn-dashed:active {
    color: @primary-active-color;
    border-color: @primary-active-color
}
.yui-btn-dashed:focus {
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-btn-text:hover {
    color: @primary-hover-color
}
.yui-btn-text.active,
.yui-btn-text:active {
    color: @primary-active-color
}
.yui-btn-text:focus {
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-btn-ghost.yui-btn-dashed:hover,
.yui-btn-ghost.yui-btn-default:hover {
    color: @primary-hover-color;
    border-color: @primary-hover-color
}
.yui-btn-ghost.yui-btn-primary {
    color: @primary-color;
    background: 0 0
}
.yui-btn-ghost.yui-btn-primary:hover {
    color: @primary-hover-color;
    background: fade(tint(@primary-color, 95%), 50%)
}
.yui-badge-count-primary {
    background: @primary-color
}
.yui-badge-status-processing {
    background-color: @primary-color
}
.yui-badge-status-processing::after {
    border: 1px solid @primary-color
}
.yui-spin {
    color: @primary-color
}
.yui-spin-dot {
    background-color: @primary-color
}
.yui-alert-primary {
    border: 1px solid ~`colorPalette('@{primary-color}', 3)`;
    background-color: ~`colorPalette('@{primary-color}', 1)`
}
.yui-alert-primary .yui-alert-icon {
    color: @primary-color
}
.yui-alert-primary-quote {
    border-left: 6px solid ~`colorPalette('@{primary-color}', 4)`
}
.yui-message-info .@{css-iconfont-family},
.yui-message-loading .@{css-iconfont-family} {
    color: @primary-color
}
.yui-message-notice-with-background .yui-message-notice-content-info {
    background: ~`colorPalette('@{primary-color}', 1)`;
    color: ~`colorPalette('@{primary-color}', 6)`;
    border: 1px solid ~`colorPalette('@{primary-color}', 2)`
}
.yui-notice-icon-info {
    color: @primary-color
}
.yui-radio-focus {
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-radio-inner::after {
    background-color: @primary-color
}
.yui-radio-wrapper-checked.yui-radio-border {
    border-color: @primary-color
}
.yui-radio-checked:not(.yui-radio-disabled) .yui-radio-inner {
    border-color: @primary-color
}
.yui-radio-checked:not(.yui-radio-disabled):hover .yui-radio-inner {
    border-color: @primary-color
}
.yui-radio-group-button .yui-radio-wrapper::after {
    background: @primary-focus-color
}
.yui-radio-group-button .yui-radio-wrapper:not(.yui-radio-wrapper-disabled):hover {
    color: @primary-color
}
.yui-radio-group-button .yui-radio-wrapper-checked {
    border-color: @primary-color;
    color: @primary-color;
    box-shadow: -1px 0 0 0 @primary-color
}
.yui-radio-group-button .yui-radio-wrapper-checked::before {
    background: @primary-color
}
.yui-radio-group-button .yui-radio-wrapper-checked.yui-radio-focus {
    box-shadow: -1px 0 0 0 @primary-color, 0 0 0 2px @primary-focus-color
}
.yui-radio-group-button .yui-radio-wrapper-checked.yui-radio-focus::after {
    background: @primary-focus-color
}
.yui-radio-group-button .yui-radio-wrapper-checked.yui-radio-focus:first-child {
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-radio-group-button .yui-radio-wrapper-checked:not(.yui-radio-wrapper-disabled):first-child {
    border-color: @primary-color
}
.yui-radio-group-button .yui-radio-wrapper-checked:not(.yui-radio-wrapper-disabled):hover {
    border-color: @primary-hover-color;
    color: @primary-hover-color
}
.yui-radio-group-button .yui-radio-wrapper-checked:active {
    border-color: @primary-active-color;
    color: @primary-active-color
}
.yui-radio-group-button-solid .yui-radio-wrapper-checked:not(.yui-radio-wrapper-disabled) {
    background: @primary-color
}
.yui-radio-group-button-solid .yui-radio-wrapper-checked:not(.yui-radio-wrapper-disabled):hover {
    background: @primary-hover-color;
    color: #fff
}
.yui-checkbox-focus {
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-checkbox-wrapper-checked.yui-checkbox-border {
    border-color: @primary-color
}
.yui-checkbox-checked:hover .yui-checkbox-inner {
    border-color: @primary-color
}
.yui-checkbox-checked .yui-checkbox-inner {
    border-color: @primary-color;
    background-color: @primary-color
}
.yui-checkbox-indeterminate:hover .yui-checkbox-inner {
    border-color: @primary-color
}
.yui-checkbox-indeterminate .yui-checkbox-inner {
    background-color: @primary-color;
    border-color: @primary-color
}
.yui-switch::before {
    border: 1px solid @primary-color;
    border-color: transparent transparent transparent @primary-color
}
.yui-switch:not(.yui-switch-disabled):focus {
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-switch-checked {
    border-color: @primary-color;
    background-color: @primary-color
}
.yui-switch-disabled.yui-switch-checked {
    border-color: @primary-color;
    background-color: @primary-color
}
.yui-input-number:hover {
    border-color: @primary-hover-color
}
.yui-input-number:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-input-number-handler:hover .yui-input-number-handler-down-inner,
.yui-input-number-handler:hover .yui-input-number-handler-up-inner {
    color: @primary-hover-color
}
.yui-input-number:hover {
    border-color: @primary-hover-color
}
.yui-input-number-focused {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-input-number-controls-outside-btn:hover i {
    color: @primary-color
}
.yui-tag-color-primary {
    color: @link-color !important;
    border-color: @link-color
}
.yui-tag-border.yui-tag-primary {
    color: @link-color !important;
    border: 1px solid @link-color !important
}
.yui-tag-border.yui-tag-primary::after {
    background: @link-color
}
.yui-tag-border.yui-tag-primary .@{css-iconfont-prefix}close {
    color: @link-color !important
}
.yui-tag-primary,
.yui-tag-primary.yui-tag-dot .yui-tag-dot-inner {
    background: @link-color
}
.yui-loading-bar-inner-color-primary {
    background-color: @primary-color
}
.yui-progress-bg {
    background-color: @primary-color
}
.yui-timeline-item-head-blue {
    border-color: @primary-color;
    color: @primary-color
}
.yui-page-item:hover {
    border-color: @primary-color
}
.yui-page-item:hover a {
    color: @primary-color
}
.yui-page-item-active {
    border-color: @primary-color
}
.yui-page-item-active a,
.yui-page-item-active:hover a {
    color: @primary-color
}
.yui-page-item-jump-next:hover i:first-child,
.yui-page-item-jump-prev:hover i:first-child {
    color: @primary-color
}
.yui-page-next:not(.yui-page-disabled):hover,
.yui-page-prev:not(.yui-page-disabled):hover {
    border-color: @primary-color
}
.yui-page-next:not(.yui-page-disabled):hover a,
.yui-page-prev:not(.yui-page-disabled):hover a {
    color: @primary-color
}
.yui-page-options-elevator input:hover {
    border-color: @primary-hover-color
}
.yui-page-options-elevator input:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-page-simple .yui-page-simple-pager input:hover {
    border-color: @primary-hover-color
}
.yui-page-simple .yui-page-simple-pager input:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-page-simple .yui-page-simple-pager input:hover {
    border-color: @primary-color
}
.yui-steps-item.yui-steps-status-process .yui-steps-head-inner {
    border-color: @primary-color;
    background-color: @primary-color
}
.yui-steps-item.yui-steps-status-finish .yui-steps-head-inner {
    border-color: @primary-color
}
.yui-steps-item.yui-steps-status-finish .yui-steps-head-inner span,
.yui-steps-item.yui-steps-status-finish .yui-steps-head-inner > .yui-steps-icon {
    color: @primary-color
}
.yui-steps-item.yui-steps-status-finish .yui-steps-tail > i::after {
    background: @primary-color
}
.yui-steps-item.yui-steps-custom.yui-steps-status-process .yui-steps-head-inner > .yui-steps-icon {
    color: @primary-color
}
.yui-modal-confirm-head-icon-info {
    color: @primary-color
}
.yui-select-selection-focused,
.yui-select-selection:hover {
    border-color: @primary-hover-color
}
.yui-select-visible .yui-select-selection {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-select-item-selected,
.yui-select-item-selected:hover {
    color: @primary-color
}
.yui-select-item-enter {
    color: @primary-color
}
.yui-select-multiple .yui-select-item-selected {
    color: @selected-color
}
.yui-select-multiple .yui-select-item-selected.yui-select-multiple .yui-select-item-focus {
    color: shade(@selected-color, 10%)
}
.yui-select-multiple .yui-select-item-selected::after {
    color: @selected-color
}
.yui-input:hover {
    border-color: @primary-hover-color
}
.yui-input:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-input-search {
    background: @primary-color !important;
    border-color: @primary-color !important
}
.yui-input-search:hover {
    background: @primary-hover-color !important;
    border-color: @primary-hover-color !important
}
.yui-input-search:active {
    background: @primary-active-color !important;
    border-color: @primary-active-color !important
}
.yui-input-with-search:hover .yui-input {
    border-color: @primary-hover-color
}
.yui-form-item-error .yui-transfer .yui-input:hover {
    border-color: @primary-hover-color
}
.yui-form-item-error .yui-transfer .yui-input:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-slider-button {
    border: 2px solid @primary-hover-color
}
.yui-slider-button-dragging,
.yui-slider-button:focus,
.yui-slider-button:hover {
    border-color: @primary-color
}
.yui-slider-bar {
    background: @primary-hover-color
}
.yui-cascader .yui-cascader-menu-item-selected,
.yui-cascader .yui-cascader-menu-item-selected:hover {
    color: @primary-color
}
.yui-cascader .yui-cascader-menu-item-enter {
    color: @primary-color
}
.yui-cascader-menu .yui-cascader-menu-item-active {
    color: @primary-color
}
.yui-cascader-transfer .yui-cascader-menu-item-selected,
.yui-cascader-transfer .yui-cascader-menu-item-selected:hover {
    color: @primary-color
}
.yui-cascader-transfer .yui-cascader-menu-item-enter {
    color: @primary-color
}
.yui-cascader-transfer .yui-cascader-menu-item-active {
    color: @primary-color
}
.yui-transfer-list-content-item-selected,
.yui-transfer-list-content-item-selected:hover {
    color: @primary-color
}
.yui-transfer-list-content-item-enter {
    color: @primary-color
}
.yui-table-cell-tree:hover {
    color: @primary-color;
    border-color: @primary-color
}
.yui-table-sort i.on {
    color: @primary-color
}
.yui-table-filter i.on {
    color: @primary-color
}
.yui-table-filter-list .yui-table-filter-select-item-selected,
.yui-table-filter-list .yui-table-filter-select-item-selected:hover {
    color: @primary-color
}
.yui-table-filter-list .yui-table-filter-select-item-enter {
    color: @primary-color
}
.yui-dropdown-item-selected,
.yui-dropdown-item.yui-dropdown-item-selected:hover {
    background: ~`colorPalette('@{primary-color}', 1)`
}
.yui-dropdown-item-selected,
.yui-dropdown-item-selected:hover {
    color: @primary-color
}
.yui-dropdown-item-enter {
    color: @primary-color
}
.yui-tabs-ink-bar {
    background-color: @primary-color
}
.yui-tabs-nav-container:focus .yui-tabs-tab-focused {
    border-color: @link-hover-color !important
}
.yui-tabs-nav .yui-tabs-tab:hover {
    color: @link-hover-color
}
.yui-tabs-nav .yui-tabs-tab:active {
    color: @link-active-color
}
.yui-tabs-nav .yui-tabs-tab-active {
    color: @primary-color
}
.yui-tabs.yui-tabs-card > .yui-tabs-bar .yui-tabs-tab-active {
    color: @primary-color
}
.yui-menu-primary {
    background: @primary-color
}
.yui-menu-light.yui-menu-horizontal .yui-menu-item-active,
.yui-menu-light.yui-menu-horizontal .yui-menu-item:hover,
.yui-menu-light.yui-menu-horizontal .yui-menu-submenu-active,
.yui-menu-light.yui-menu-horizontal .yui-menu-submenu:hover {
    color: @primary-color;
    border-bottom: 2px solid @primary-color
}
.yui-menu-vertical .yui-menu-item:hover,
.yui-menu-vertical .yui-menu-submenu-title:hover {
    color: @primary-color
}
.yui-menu-light.yui-menu-vertical .yui-menu-item-active:not(.yui-menu-submenu) {
    color: @primary-color;
    background: ~`colorPalette('@{primary-color}', 1)`
}
.yui-menu-light.yui-menu-vertical .yui-menu-item-active:not(.yui-menu-submenu)::after {
    background: @primary-color
}
.yui-menu-dark.yui-menu-vertical .yui-menu-item-active:not(.yui-menu-submenu),
.yui-menu-dark.yui-menu-vertical .yui-menu-submenu-title-active:not(.yui-menu-submenu) {
    color: @primary-color
}
.yui-menu-dark.yui-menu-vertical .yui-menu-submenu .yui-menu-item-active,
.yui-menu-dark.yui-menu-vertical .yui-menu-submenu .yui-menu-item-active:hover {
    color: #fff;
    background: @primary-color !important
}
.yui-menu-horizontal .yui-menu-submenu .yui-select-dropdown .yui-menu-item-selected,
.yui-menu-horizontal .yui-menu-submenu .yui-select-dropdown .yui-menu-item-selected:hover {
    color: @primary-color
}
.yui-menu-horizontal .yui-menu-submenu .yui-select-dropdown .yui-menu-item-enter {
    color: @primary-color
}
.yui-date-picker-cells-focused em {
    box-shadow: 0 0 0 1px @primary-color inset
}
.yui-date-picker-cells-cell-today em::after {
    background: @primary-color
}
.yui-date-picker-cells-cell-selected em,
.yui-date-picker-cells-cell-selected:hover em {
    background: @primary-color
}
.yui-date-picker-cells-month .yui-date-picker-cells-cell-focused,
.yui-date-picker-cells-year .yui-date-picker-cells-cell-focused {
    background-color: tint(@primary-color, 80%)
}
.yui-date-picker-header-label:hover {
    color: @primary-color
}
.yui-date-picker-btn-pulse {
    background-color: tint(@primary-color, 80%) !important
}
.yui-date-picker-focused input:not([disabled]) {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-picker-panel-icon-btn:hover {
    color: @primary-color
}
.yui-picker-confirm > span {
    color: @link-color
}
.yui-picker-confirm > span:hover {
    color: @link-hover-color
}
.yui-picker-confirm > span:active {
    color: @link-active-color
}
.yui-time-picker-cells-cell-selected,
.yui-time-picker-cells-cell-selected:hover {
    color: @primary-color
}
.yui-time-picker-cells-cell-focused {
    background-color: tint(@primary-color, 80%)
}
.yui-upload-list-file:hover > span {
    color: @primary-color
}
.yui-upload-drag-box > .@{css-iconfont-family} {
    color: @primary-color
}
.yui-upload-drag-box > div > span {
    color: @primary-color
}
.yui-upload-drag:hover {
    border: 1px dashed @primary-color
}
.yui-upload-dragOver {
    border: 2px dashed @primary-color
}
.yui-tree-title:hover {
    background-color: tint(@primary-color, 90%)
}
.yui-tree-title-selected,
.yui-tree-title-selected:hover {
    background-color: tint(@primary-color, 80%)
}
.yui-color-picker > div:first-child:hover .yui-input {
    border-color: @primary-hover-color
}
.yui-color-picker-focused {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-color-picker-color-focused {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-color-picker-picker-colors:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-color-picker-saturation-wrapper:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-color-picker-hue:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-color-picker-alpha:focus {
    border-color: @primary-hover-color;
    box-shadow: 0 0 0 2px @primary-focus-color
}
.yui-anchor-ink-ball {
    border: 2px solid @primary-color
}
.yui-anchor-link-active > .yui-anchor-link-title {
    color: @primary-color
}
.yui-cell-item-selected,
.yui-cell-item.yui-cell-item-selected:hover {
    background: ~`colorPalette('@{primary-color}', 1)`
}
.yui-cell-item-selected:focus {
    background: shade(@selected-color, 10%)
}
.yui-cell-item-selected,
.yui-cell-item-selected:hover {
    color: @primary-color
}
.yui-cell-item-enter {
    color: @primary-color
}
.yui-breadcrumb a:hover {
    color: @primary-hover-color
}
.yui-list-item-meta-title > a:hover {
    color: @primary-color
}
.yui-typography a,
a.yui-typography {
    color: @link-color
}
.yui-typography a:focus,
.yui-typography a:hover,
a.yui-typography:focus,
a.yui-typography:hover {
    color: @link-hover-color
}
.yui-typography a:active,
a.yui-typography:active {
    color: @link-active-color
}
.yui-typography-copy,
.yui-typography-edit,
.yui-typography-expand {
    color: @link-color
}
.yui-typography-copy:focus,
.yui-typography-copy:hover,
.yui-typography-edit:focus,
.yui-typography-edit:hover,
.yui-typography-expand:focus,
.yui-typography-expand:hover {
    color: @link-hover-color
}
.yui-typography-copy:active,
.yui-typography-edit:active,
.yui-typography-expand:active {
    color: @link-active-color
}
.yui-calendar-table-day:hover {
    background-color: ~`colorPalette('@{primary-color}', 1)`
}
.yui-calendar-table-day-current {
    background-color: ~`colorPalette('@{primary-color}', 1)`
}
.yui-calendar-table-day-current .yui-calendar-table-day-title {
    color: @primary-color
}
.yui-city-drop-cities span:hover {
    color: @link-hover-color
}
.yui-city-drop-list-letter .yui-tag:hover .yui-tag-text {
    color: @link-hover-color
}
.yui-city-drop-list-main dd li:hover {
    color: @link-hover-color
}
.yui-notifications-tab-clear:hover {
    color: @link-hover-color
}
.yui-notifications-tab-loading-more {
    color: @link-color
}
.yui-notifications-tab-loading-more:hover {
    color: @link-hover-color
}
.yui-notifications-item:hover {
    background-color: ~`colorPalette('@{primary-color}', 1)`
}
.yui-page-header-back:hover {
    color: @primary-color
}
.yui-c-primary {
    color: @primary-color !important
}
.yui-bg-primary {
    background-color: @primary-color !important
}