xdesign-vue-next/es/link/style/index.css

XDesign Component for vue-next

.x-link {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  position: relative;
  text-decoration: none;
  outline: none;
  padding: 0;
  transition: all 0.2s linear;
  font: var(--td-font-link-medium);
}
.x-link .x-link__prefix-icon {
  margin-right: var(--td-comp-margin-s);
}
.x-link .x-link__suffix-icon {
  margin-left: var(--td-comp-margin-s);
}
.x-link.x-size-s {
  font: var(--td-font-link-small);
}
.x-link.x-size-s .x-link__prefix-icon {
  margin-right: var(--td-comp-margin-xs);
}
.x-link.x-size-s .x-link__suffix-icon {
  margin-left: var(--td-comp-margin-xs);
}
.x-link.x-size-l {
  font: var(--td-font-link-large);
}
.x-link.x-size-l .x-link__prefix-icon {
  margin-right: var(--td-comp-margin-m);
}
.x-link.x-size-l .x-link__suffix-icon {
  margin-left: var(--td-comp-margin-m);
}
.x-link--theme-default {
  color: var(--td-text-color-primary);
}
.x-link--theme-default:active {
  color: var(--td-brand-color-active);
}
.x-link--theme-default.x-link--hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  border-bottom: 1px solid var(--td-text-color-primary);
  opacity: 0;
  transition: all 0.2s linear;
}
.x-link--theme-default.x-link--hover-underline:hover::after {
  opacity: 1;
}
.x-link--theme-default.x-link--hover-underline:active::after {
  opacity: 1;
  border-color: var(--td-brand-color-active);
}
.x-link--theme-default.x-link--hover-color:hover {
  color: var(--td-brand-color-hover);
}
.x-link--theme-default.x-link--hover-color.x-is-underline:hover::after {
  border-color: var(--td-brand-color-hover);
}
.x-link--theme-default.x-link--hover-color.x-is-underline:active::after {
  border-color: var(--td-brand-color-active);
}
.x-link--theme-default.x-link--hover-color:active {
  color: var(--td-brand-color-active);
}
.x-link--theme-default.x-is-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  opacity: 1;
  border-bottom: 1px solid var(--td-text-color-primary);
  transition: all 0.2s linear;
}
.x-link--theme-default.x-is-disabled {
  cursor: not-allowed;
  color: var(--td-text-color-disabled);
}
.x-link--theme-default.x-is-disabled:hover,
.x-link--theme-default.x-is-disabled:active {
  color: var(--td-text-color-disabled);
}
.x-link--theme-default.x-is-disabled.x-is-underline::after {
  border-color: var(--td-text-color-disabled);
}
.x-link--theme-primary {
  color: var(--td-brand-color);
}
.x-link--theme-primary:active {
  color: var(--td-brand-color-active);
}
.x-link--theme-primary.x-link--hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  border-bottom: 1px solid var(--td-brand-color);
  opacity: 0;
  transition: all 0.2s linear;
}
.x-link--theme-primary.x-link--hover-underline:hover::after {
  opacity: 1;
}
.x-link--theme-primary.x-link--hover-underline:active::after {
  opacity: 1;
  border-color: var(--td-brand-color-active);
}
.x-link--theme-primary.x-link--hover-color:hover {
  color: var(--td-brand-color-hover);
}
.x-link--theme-primary.x-link--hover-color.x-is-underline:hover::after {
  border-color: var(--td-brand-color-hover);
}
.x-link--theme-primary.x-link--hover-color.x-is-underline:active::after {
  border-color: var(--td-brand-color-active);
}
.x-link--theme-primary.x-link--hover-color:active {
  color: var(--td-brand-color-active);
}
.x-link--theme-primary.x-is-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  opacity: 1;
  border-bottom: 1px solid var(--td-brand-color);
  transition: all 0.2s linear;
}
.x-link--theme-primary.x-is-disabled {
  cursor: not-allowed;
  color: var(--td-brand-color-disabled);
}
.x-link--theme-primary.x-is-disabled:hover,
.x-link--theme-primary.x-is-disabled:active {
  color: var(--td-brand-color-disabled);
}
.x-link--theme-primary.x-is-disabled.x-is-underline::after {
  border-color: var(--td-brand-color-disabled);
}
.x-link--theme-success {
  color: var(--td-success-color);
}
.x-link--theme-success:active {
  color: var(--td-success-color-active);
}
.x-link--theme-success.x-link--hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  border-bottom: 1px solid var(--td-success-color);
  opacity: 0;
  transition: all 0.2s linear;
}
.x-link--theme-success.x-link--hover-underline:hover::after {
  opacity: 1;
}
.x-link--theme-success.x-link--hover-underline:active::after {
  opacity: 1;
  border-color: var(--td-success-color-active);
}
.x-link--theme-success.x-link--hover-color:hover {
  color: var(--td-success-color-hover);
}
.x-link--theme-success.x-link--hover-color.x-is-underline:hover::after {
  border-color: var(--td-success-color-hover);
}
.x-link--theme-success.x-link--hover-color.x-is-underline:active::after {
  border-color: var(--td-success-color-active);
}
.x-link--theme-success.x-link--hover-color:active {
  color: var(--td-success-color-active);
}
.x-link--theme-success.x-is-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  opacity: 1;
  border-bottom: 1px solid var(--td-success-color);
  transition: all 0.2s linear;
}
.x-link--theme-success.x-is-disabled {
  cursor: not-allowed;
  color: var(--td-success-color-disabled);
}
.x-link--theme-success.x-is-disabled:hover,
.x-link--theme-success.x-is-disabled:active {
  color: var(--td-success-color-disabled);
}
.x-link--theme-success.x-is-disabled.x-is-underline::after {
  border-color: var(--td-success-color-disabled);
}
.x-link--theme-danger {
  color: var(--td-error-color);
}
.x-link--theme-danger:active {
  color: var(--td-error-color-active);
}
.x-link--theme-danger.x-link--hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  border-bottom: 1px solid var(--td-error-color);
  opacity: 0;
  transition: all 0.2s linear;
}
.x-link--theme-danger.x-link--hover-underline:hover::after {
  opacity: 1;
}
.x-link--theme-danger.x-link--hover-underline:active::after {
  opacity: 1;
  border-color: var(--td-error-color-active);
}
.x-link--theme-danger.x-link--hover-color:hover {
  color: var(--td-error-color-hover);
}
.x-link--theme-danger.x-link--hover-color.x-is-underline:hover::after {
  border-color: var(--td-error-color-hover);
}
.x-link--theme-danger.x-link--hover-color.x-is-underline:active::after {
  border-color: var(--td-error-color-active);
}
.x-link--theme-danger.x-link--hover-color:active {
  color: var(--td-error-color-active);
}
.x-link--theme-danger.x-is-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  opacity: 1;
  border-bottom: 1px solid var(--td-error-color);
  transition: all 0.2s linear;
}
.x-link--theme-danger.x-is-disabled {
  cursor: not-allowed;
  color: var(--td-error-color-disabled);
}
.x-link--theme-danger.x-is-disabled:hover,
.x-link--theme-danger.x-is-disabled:active {
  color: var(--td-error-color-disabled);
}
.x-link--theme-danger.x-is-disabled.x-is-underline::after {
  border-color: var(--td-error-color-disabled);
}
.x-link--theme-warning {
  color: var(--td-warning-color);
}
.x-link--theme-warning:active {
  color: var(--td-warning-color-active);
}
.x-link--theme-warning.x-link--hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  border-bottom: 1px solid var(--td-warning-color);
  opacity: 0;
  transition: all 0.2s linear;
}
.x-link--theme-warning.x-link--hover-underline:hover::after {
  opacity: 1;
}
.x-link--theme-warning.x-link--hover-underline:active::after {
  opacity: 1;
  border-color: var(--td-warning-color-active);
}
.x-link--theme-warning.x-link--hover-color:hover {
  color: var(--td-warning-color-hover);
}
.x-link--theme-warning.x-link--hover-color.x-is-underline:hover::after {
  border-color: var(--td-warning-color-hover);
}
.x-link--theme-warning.x-link--hover-color.x-is-underline:active::after {
  border-color: var(--td-warning-color-active);
}
.x-link--theme-warning.x-link--hover-color:active {
  color: var(--td-warning-color-active);
}
.x-link--theme-warning.x-is-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  opacity: 1;
  border-bottom: 1px solid var(--td-warning-color);
  transition: all 0.2s linear;
}
.x-link--theme-warning.x-is-disabled {
  cursor: not-allowed;
  color: var(--td-warning-color-disabled);
}
.x-link--theme-warning.x-is-disabled:hover,
.x-link--theme-warning.x-is-disabled:active {
  color: var(--td-warning-color-disabled);
}
.x-link--theme-warning.x-is-disabled.x-is-underline::after {
  border-color: var(--td-warning-color-disabled);
}