rappel-ui 1.0.1 → 1.0.2

package/theme-chalk/pu-button.css

@@ -0,0 +1,446 @@
+@charset "UTF-8";
+/**
+ * 将十六进制颜色转换为RGB颜色
+ * @param $hex 十六进制颜色值
+ * @returns RGB颜色值
+ * color.channel($color, "red", $space: rgb)
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $value RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $color RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
+ * @param $color 颜色
+ * @param $opacity 透明度，默认值为1
+ * @returns 一个等效的透明度颜色
+ */
+/**
+ * 创建一个变暗的颜色，并返回一个变暗的颜色
+ * @param $color 颜色
+ * @param $factor 颜色变暗的度量，默认为0.15
+ * @returns 一个变暗的颜色
+ */
+/**
+ * 创建层级颜色
+ * @param $base-color 基础颜色
+ * @param $darkness 变暗的度量，默认为0.15
+ * @returns 主题色映射
+ */
+.pu-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  -webkit-user-select: none;
+  user-select: none;
+  outline: none;
+  vertical-align: middle;
+  height: 32px;
+  line-height: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  padding: 8px 16px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--pu-button-bgcolor);
+  color: var(--pu-button-color);
+  border-color: var(--pu-button-border-color);
+}
+.pu-button__content {
+  display: inline-flex;
+  align-items: center;
+}
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.pu-button__loading {
+  animation: rotating 2s linear infinite;
+}
+.pu-button__loading + * {
+  margin-left: 4px;
+}
+.pu-button__icon {
+  margin-right: 4px;
+  width: 1em;
+  height: 1em;
+}
+.pu-button.is-link {
+  padding: 2px;
+  height: auto;
+  border-color: var(--pu-color-fill-transparent);
+  background-color: var(--pu-color-fill-transparent);
+  text-decoration: underline;
+}
+.pu-button.is-plain:hover:not(.is-disabled) {
+  border-color: var(--pu-color-primary-base);
+  background-color: var(--pu-color-fill-blank);
+}
+.pu-button.is-round {
+  border-radius: 20px;
+}
+.pu-button.is-circle {
+  width: 32px;
+  border-radius: 50%;
+  padding: 8px;
+}
+.pu-button:active:not(.is-disabled) {
+  transform: scale(0.97);
+  transition: transform 0s ease;
+}
+.pu-button:focus-visible {
+  outline: none;
+}
+.pu-button + .pu-button {
+  margin-left: 10px;
+}
+.pu-button {
+  --pu-button-bgcolor: var(--pu-color-fill-blank);
+  --pu-button-color: var(--pu-color-text-secondary);
+  --pu-button-border-color: var(--pu-color-border-base);
+}
+.pu-button:hover:not(.is-disabled) {
+  --pu-button-bgcolor: var(--pu-color-primary-shade-1);
+  --pu-button-color: var(--pu-color-primary-base);
+  --pu-button-border-color: var(--pu-color-primary-shade-4);
+}
+.pu-button.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--pu-color-fill-blank);
+  border-color: var(--pu-color-border-base);
+  color: var(--pu-color-text-disabled);
+}
+.pu-button.is-link {
+  --pu-button-color: var(--pu-color-text-secondary);
+}
+.pu-button.is-link:hover:not(.is-disabled) {
+  --pu-button-color: var(--pu-color-primary-base);
+  --pu-button-bgcolor: transparent;
+  --pu-button-border-color: transparent;
+}
+.pu-button.is-link.is-disabled {
+  background-color: var(--pu-color-fill-blank);
+  border-color: var(--pu-color-fill-blank);
+  color: var(--pu-color-text-disabled);
+}
+.pu-button.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.pu-button--primary {
+  --pu-button-bgcolor: var(--pu-color-primary-base);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-primary-base);
+}
+.pu-button--primary:hover:not(.is-disabled) {
+  --pu-button-bgcolor: var(--pu-color-primary-hover);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-primary-hover);
+}
+.pu-button--primary.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--pu-color-primary-shade-4);
+  border-color: var(--pu-color-primary-shade-4);
+  color: var(--pu-color-fill-blank);
+}
+.pu-button--primary.is-link {
+  --pu-button-color: var(--pu-color-primary-base);
+}
+.pu-button--primary.is-link:hover:not(.is-disabled) {
+  --pu-button-color: var(--pu-color-primary-hover);
+  --pu-button-bgcolor: transparent;
+  --pu-button-border-color: transparent;
+}
+.pu-button--primary.is-link.is-disabled {
+  background-color: var(--pu-color-fill-blank);
+  border-color: var(--pu-color-fill-blank);
+  color: var(--pu-color-primary-shade-4);
+}
+.pu-button--primary.is-plain {
+  background-color: var(--pu-color-primary-shade-1);
+  color: var(--pu-color-primary-base);
+  border-color: var(--pu-color-primary-shade-6);
+}
+.pu-button--primary.is-plain:hover:not(.is-disabled) {
+  color: var(--pu-color-fill-blank);
+  background-color: var(--pu-color-primary-base);
+  border-color: var(--pu-color-primary-base);
+}
+.pu-button--primary.is-plain.is-disabled {
+  background-color: var(--pu-color-primary-shade-1);
+  color: var(--pu-color-primary-shade-4);
+  border-color: var(--pu-color-primary-shade-4);
+}
+.pu-button--primary.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.pu-button--success {
+  --pu-button-bgcolor: var(--pu-color-success-base);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-success-base);
+}
+.pu-button--success:hover:not(.is-disabled) {
+  --pu-button-bgcolor: var(--pu-color-success-hover);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-success-hover);
+}
+.pu-button--success.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--pu-color-success-shade-4);
+  border-color: var(--pu-color-success-shade-4);
+  color: var(--pu-color-fill-blank);
+}
+.pu-button--success.is-link {
+  --pu-button-color: var(--pu-color-success-base);
+}
+.pu-button--success.is-link:hover:not(.is-disabled) {
+  --pu-button-color: var(--pu-color-success-hover);
+  --pu-button-bgcolor: transparent;
+  --pu-button-border-color: transparent;
+}
+.pu-button--success.is-link.is-disabled {
+  background-color: var(--pu-color-fill-blank);
+  border-color: var(--pu-color-fill-blank);
+  color: var(--pu-color-success-shade-4);
+}
+.pu-button--success.is-plain {
+  background-color: var(--pu-color-success-shade-1);
+  color: var(--pu-color-success-base);
+  border-color: var(--pu-color-success-shade-6);
+}
+.pu-button--success.is-plain:hover:not(.is-disabled) {
+  color: var(--pu-color-fill-blank);
+  background-color: var(--pu-color-success-base);
+  border-color: var(--pu-color-success-base);
+}
+.pu-button--success.is-plain.is-disabled {
+  background-color: var(--pu-color-success-shade-1);
+  color: var(--pu-color-success-shade-4);
+  border-color: var(--pu-color-success-shade-4);
+}
+.pu-button--success.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.pu-button--danger {
+  --pu-button-bgcolor: var(--pu-color-danger-base);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-danger-base);
+}
+.pu-button--danger:hover:not(.is-disabled) {
+  --pu-button-bgcolor: var(--pu-color-danger-hover);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-danger-hover);
+}
+.pu-button--danger.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--pu-color-danger-shade-4);
+  border-color: var(--pu-color-danger-shade-4);
+  color: var(--pu-color-fill-blank);
+}
+.pu-button--danger.is-link {
+  --pu-button-color: var(--pu-color-danger-base);
+}
+.pu-button--danger.is-link:hover:not(.is-disabled) {
+  --pu-button-color: var(--pu-color-danger-hover);
+  --pu-button-bgcolor: transparent;
+  --pu-button-border-color: transparent;
+}
+.pu-button--danger.is-link.is-disabled {
+  background-color: var(--pu-color-fill-blank);
+  border-color: var(--pu-color-fill-blank);
+  color: var(--pu-color-danger-shade-4);
+}
+.pu-button--danger.is-plain {
+  background-color: var(--pu-color-danger-shade-1);
+  color: var(--pu-color-danger-base);
+  border-color: var(--pu-color-danger-shade-6);
+}
+.pu-button--danger.is-plain:hover:not(.is-disabled) {
+  color: var(--pu-color-fill-blank);
+  background-color: var(--pu-color-danger-base);
+  border-color: var(--pu-color-danger-base);
+}
+.pu-button--danger.is-plain.is-disabled {
+  background-color: var(--pu-color-danger-shade-1);
+  color: var(--pu-color-danger-shade-4);
+  border-color: var(--pu-color-danger-shade-4);
+}
+.pu-button--danger.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.pu-button--warning {
+  --pu-button-bgcolor: var(--pu-color-warning-base);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-warning-base);
+}
+.pu-button--warning:hover:not(.is-disabled) {
+  --pu-button-bgcolor: var(--pu-color-warning-hover);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-warning-hover);
+}
+.pu-button--warning.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--pu-color-warning-shade-4);
+  border-color: var(--pu-color-warning-shade-4);
+  color: var(--pu-color-fill-blank);
+}
+.pu-button--warning.is-link {
+  --pu-button-color: var(--pu-color-warning-base);
+}
+.pu-button--warning.is-link:hover:not(.is-disabled) {
+  --pu-button-color: var(--pu-color-warning-hover);
+  --pu-button-bgcolor: transparent;
+  --pu-button-border-color: transparent;
+}
+.pu-button--warning.is-link.is-disabled {
+  background-color: var(--pu-color-fill-blank);
+  border-color: var(--pu-color-fill-blank);
+  color: var(--pu-color-warning-shade-4);
+}
+.pu-button--warning.is-plain {
+  background-color: var(--pu-color-warning-shade-1);
+  color: var(--pu-color-warning-base);
+  border-color: var(--pu-color-warning-shade-6);
+}
+.pu-button--warning.is-plain:hover:not(.is-disabled) {
+  color: var(--pu-color-fill-blank);
+  background-color: var(--pu-color-warning-base);
+  border-color: var(--pu-color-warning-base);
+}
+.pu-button--warning.is-plain.is-disabled {
+  background-color: var(--pu-color-warning-shade-1);
+  color: var(--pu-color-warning-shade-4);
+  border-color: var(--pu-color-warning-shade-4);
+}
+.pu-button--warning.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.pu-button--info {
+  --pu-button-bgcolor: var(--pu-color-info-base);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-info-base);
+}
+.pu-button--info:hover:not(.is-disabled) {
+  --pu-button-bgcolor: var(--pu-color-info-hover);
+  --pu-button-color: var(--pu-color-text-lightest);
+  --pu-button-border-color: var(--pu-color-info-hover);
+}
+.pu-button--info.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--pu-color-info-shade-4);
+  border-color: var(--pu-color-info-shade-4);
+  color: var(--pu-color-fill-blank);
+}
+.pu-button--info.is-link {
+  --pu-button-color: var(--pu-color-info-base);
+}
+.pu-button--info.is-link:hover:not(.is-disabled) {
+  --pu-button-color: var(--pu-color-info-hover);
+  --pu-button-bgcolor: transparent;
+  --pu-button-border-color: transparent;
+}
+.pu-button--info.is-link.is-disabled {
+  background-color: var(--pu-color-fill-blank);
+  border-color: var(--pu-color-fill-blank);
+  color: var(--pu-color-info-shade-4);
+}
+.pu-button--info.is-plain {
+  background-color: var(--pu-color-info-shade-1);
+  color: var(--pu-color-info-base);
+  border-color: var(--pu-color-info-shade-6);
+}
+.pu-button--info.is-plain:hover:not(.is-disabled) {
+  color: var(--pu-color-fill-blank);
+  background-color: var(--pu-color-info-base);
+  border-color: var(--pu-color-info-base);
+}
+.pu-button--info.is-plain.is-disabled {
+  background-color: var(--pu-color-info-shade-1);
+  color: var(--pu-color-info-shade-4);
+  border-color: var(--pu-color-info-shade-4);
+}
+.pu-button--info.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.pu-button--large {
+  padding: 12px 20px;
+}
+.pu-button-- {
+  padding: 8px 16px;
+}
+.pu-button--small {
+  padding: 6px 12px;
+}
+.pu-button--mini {
+  padding: 4px 8px;
+}