mealcomes/theme-chalk/upload.css

MealComes 用于学习前端的组件库

.mc-upload {
  --mc-upload-dragger-padding-horizontal: 40px;
  --mc-upload-dragger-padding-vertical: 10px;
}

.mc-upload {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;
}
.mc-upload.is-disabled {
  cursor: not-allowed;
}
.mc-upload.is-disabled:focus {
  border-color: var(--mc-border-color-darker);
  color: inherit;
}
.mc-upload.is-disabled:focus .mc-upload-dragger {
  border-color: var(--mc-border-color-darker);
}
.mc-upload.is-disabled .mc-upload-dragger {
  cursor: not-allowed;
  background-color: var(--mc-disabled-bg-color);
}
.mc-upload.is-disabled .mc-upload-dragger .mc-upload__text {
  color: var(--mc-text-color-placeholder);
}
.mc-upload.is-disabled .mc-upload-dragger .mc-upload__text em {
  color: var(--mc-disabled-text-color);
}
.mc-upload.is-disabled .mc-upload-dragger:hover {
  border-color: var(--mc-border-color-darker);
}

.mc-upload__input {
  display: none;
}

.mc-upload.is-drag {
  display: block;
}

.mc-upload .mc-upload-dragger {
  padding: var(--mc-upload-dragger-padding-horizontal) var(--mc-upload-dragger-padding-vertical);
  background-color: var(--mc-fill-color-blank);
  border: 1px dashed var(--mc-border-color);
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.mc-upload .mc-upload-dragger .mc-icon--upload {
  font-size: 67px;
  color: var(--mc-text-color-placeholder);
  margin-bottom: 16px;
  line-height: 50px;
}
.mc-upload .mc-upload-dragger + .mc-upload__tip {
  text-align: center;
}
.mc-upload .mc-upload-dragger ~ .mc-upload__files {
  border-top: var(--mc-border);
  margin-top: 7px;
  padding-top: 5px;
}
.mc-upload .mc-upload-dragger .mc-upload__text {
  color: var(--mc-text-color-regular);
  font-size: 14px;
  text-align: center;
}
.mc-upload .mc-upload-dragger .mc-upload__text em {
  color: var(--mc-color-primary);
  font-style: normal;
}
.mc-upload .mc-upload-dragger:hover {
  border-color: var(--mc-color-primary);
}
.mc-upload .mc-upload-dragger.is-dragover {
  background-color: var(--mc-color-primary-light-9);
  border: 1px dashed var(--mc-color-primary);
}