@whitesev/pops 1.4.0 → 1.5.0

package/src/css/button.css

@@ -0,0 +1,290 @@
+.pops {
+	--button-font-size: 14px;
+	--button-height: 32px;
+	--button-color: rgb(51, 51, 51);
+	--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
+	--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
+	--button-margin-top: 0px;
+	--button-margin-bottom: 0px;
+	--button-margin-left: 5px;
+	--button-margin-right: 5px;
+	--button-padding-top: 6px;
+	--button-padding-bottom: 6px;
+	--button-padding-left: 12px;
+	--button-padding-right: 12px;
+	--button-radius: 4px;
+
+	--container-title-height: 55px;
+	--container-bottom-btn-height: 55px;
+}
+.pops[data-bottom-btn="false"] {
+	--container-bottom-btn-height: 0px;
+}
+.pops button {
+	white-space: nowrap;
+	float: right;
+	display: inline-block;
+	margin: var(--button-margin-top) var(--button-margin-right)
+		var(--button-margin-bottom) var(--button-margin-left);
+	padding: var(--button-padding-top) var(--button-padding-right)
+		var(--button-padding-bottom) var(--button-padding-left);
+	outline: 0;
+}
+.pops button[data-has-icon="false"] .pops-bottom-icon {
+	display: none;
+}
+.pops button {
+	border-radius: var(--button-radius);
+	box-shadow: none;
+	font-weight: 400;
+	font-size: var(--button-font-size);
+	cursor: pointer;
+	transition: all 0.3s ease-in-out;
+}
+.pops button {
+	display: flex;
+	align-items: center;
+	height: var(--button-height);
+	line-height: 1;
+	box-sizing: border-box;
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	border: 1px solid var(--button-bd-color);
+}
+.pops button {
+	color: var(--button-color);
+	border-color: var(--button-bd-color);
+	background-color: var(--button-bg-color);
+}
+.pops button:active {
+	color: var(--button-color);
+	border-color: var(--button-bd-color);
+	background-color: var(--button-bg-color);
+	outline: 0;
+}
+.pops button:hover {
+	color: var(--button-color);
+	border-color: var(--button-bd-color);
+	background-color: var(--button-bg-color);
+}
+.pops button:focus-visible {
+	color: var(--button-color);
+	border-color: var(--button-bd-color);
+	background-color: var(--button-bg-color);
+}
+.pops button:disabled {
+	cursor: not-allowed;
+	color: var(--button-color);
+	border-color: var(--button-bd-color);
+	background-color: var(--button-bg-color);
+}
+.pops button.pops-button-large {
+	--button-height: 32px;
+	--button-padding-top: 12px;
+	--button-padding-bottom: 12px;
+	--button-padding-left: 19px;
+	--button-padding-right: 19px;
+	--button-font-size: 14px;
+	--button-border-radius: 4px;
+}
+
+.pops button.pops-button-small {
+	--button-height: 24px;
+	--button-padding-top: 5px;
+	--button-padding-bottom: 5px;
+	--button-padding-left: 11px;
+	--button-padding-right: 11px;
+	--button-font-size: 12px;
+	--button-border-radius: 4px;
+}
+.pops-panel-button-no-icon .pops-panel-button_inner i {
+	display: none;
+}
+.pops-panel-button-right-icon {
+}
+.pops-panel-button-right-icon .pops-panel-button_inner {
+	flex-direction: row-reverse;
+}
+.pops-panel-button-right-icon .pops-panel-button_inner i {
+}
+.pops-panel-button .pops-panel-button_inner i:has(svg),
+.pops-panel-button-right-icon .pops-panel-button-text {
+	margin-right: 6px;
+}
+
+.pops button[type="default"] {
+	--button-color: #333333;
+	--button-bd-color: #dcdfe6;
+	--button-bg-color: #ffffff;
+}
+.pops button[type="default"]:active {
+	--button-color: #409eff;
+	--button-bd-color: #409eff;
+	--button-bg-color: #ecf5ff;
+}
+.pops button[type="default"]:hover {
+	--button-color: #409eff;
+	--button-bd-color: #c6e2ff;
+	--button-bg-color: #ecf5ff;
+}
+.pops button[type="default"]:focus-visible {
+	outline: 2px solid #a0cfff;
+	outline-offset: 1px;
+}
+.pops button[type="default"]:disabled {
+	--button-color: #a8abb2;
+	--button-bd-color: #fff;
+	--button-bg-color: #e4e7ed;
+}
+
+.pops button[type="primary"] {
+	--button-color: #ffffff;
+	--button-bd-color: #409eff;
+	--button-bg-color: #409eff;
+}
+.pops button[type="primary"]:active {
+	--button-color: #ffffff;
+	--button-bd-color: #337ecc;
+	--button-bg-color: #337ecc;
+}
+.pops button[type="primary"]:hover {
+	--button-color: #ffffff;
+	--button-bd-color: #79bbff;
+	--button-bg-color: #79bbff;
+}
+.pops button[type="primary"]:focus-visible {
+	outline: 2px solid #a0cfff;
+	outline-offset: 1px;
+}
+.pops button[type="primary"]:disabled {
+	--button-color: #ffffff;
+	--button-bd-color: #a0cfff;
+	--button-bg-color: #a0cfff;
+}
+
+.pops button[type="success"] {
+	--button-color: #ffffff;
+	--button-bd-color: #4cae4c;
+	--button-bg-color: #5cb85c;
+}
+.pops button[type="success"]:active {
+	--button-color: #ffffff;
+	--button-bd-color: #529b2e;
+	--button-bg-color: #529b2e;
+}
+.pops button[type="success"]:hover {
+	--button-color: #ffffff;
+	--button-bd-color: #95d475;
+	--button-bg-color: #95d475;
+}
+.pops button[type="success"]:focus-visible {
+	outline: 2px solid #b3e19d;
+	outline-offset: 1px;
+}
+.pops button[type="success"]:disabled {
+	--button-color: #ffffff;
+	--button-bd-color: #b3e19d;
+	--button-bg-color: #b3e19d;
+}
+
+.pops button[type="info"] {
+	--button-color: #ffffff;
+	--button-bd-color: #909399;
+	--button-bg-color: #909399;
+}
+.pops button[type="info"]:active {
+	--button-color: #ffffff;
+	--button-bd-color: #73767a;
+	--button-bg-color: #73767a;
+}
+.pops button[type="info"]:hover {
+	--button-color: #ffffff;
+	--button-bd-color: #b1b3b8;
+	--button-bg-color: #b1b3b8;
+}
+.pops button[type="info"]:focus-visible {
+	outline: 2px solid #c8c9cc;
+	outline-offset: 1px;
+}
+.pops button[type="info"]:disabled {
+	--button-color: #ffffff;
+	--button-bd-color: #c8c9cc;
+	--button-bg-color: #c8c9cc;
+}
+
+.pops button[type="warning"] {
+	--button-color: #ffffff;
+	--button-bd-color: #e6a23c;
+	--button-bg-color: #e6a23c;
+}
+.pops button[type="warning"]:active {
+	--button-color: #ffffff;
+	--button-bd-color: #b88230;
+	--button-bg-color: #b88230;
+}
+.pops button[type="warning"]:hover {
+	--button-color: #ffffff;
+	--button-bd-color: #eebe77;
+	--button-bg-color: #eebe77;
+}
+.pops button[type="warning"]:focus-visible {
+	outline: 2px solid #f3d19e;
+	outline-offset: 1px;
+}
+.pops button[type="warning"]:disabled {
+	--button-color: #ffffff;
+	--button-bd-color: #f3d19e;
+	--button-bg-color: #f3d19e;
+}
+
+.pops button[type="danger"] {
+	--button-color: #ffffff;
+	--button-bd-color: #f56c6c;
+	--button-bg-color: #f56c6c;
+}
+.pops button[type="danger"]:active {
+	--button-color: #ffffff;
+	--button-bd-color: #c45656;
+	--button-bg-color: #c45656;
+}
+.pops button[type="danger"]:hover {
+	--button-color: #ffffff;
+	--button-bd-color: #f89898;
+	--button-bg-color: #f89898;
+}
+.pops button[type="danger"]:focus-visible {
+	outline: 2px solid #fab6b6;
+	outline-offset: 1px;
+}
+.pops button[type="danger"]:disabled {
+	--button-color: #ffffff;
+	--button-bd-color: #fab6b6;
+	--button-bg-color: #fab6b6;
+}
+
+.pops button[type="xiaomi-primary"] {
+	--button-color: #ffffff;
+	--button-bd-color: #ff5c00;
+	--button-bg-color: #ff5c00;
+}
+.pops button[type="xiaomi-primary"]:active {
+	--button-color: #ffffff;
+	--button-bd-color: #da4f00;
+	--button-bg-color: #da4f00;
+}
+.pops button[type="xiaomi-primary"]:hover {
+	--button-color: #ffffff;
+	--button-bd-color: #ff7e29;
+	--button-bg-color: #ff7e29;
+}
+.pops button[type="xiaomi-primary"]:focus-visible {
+	outline: 2px solid #fab6b6;
+	outline-offset: 1px;
+}
+.pops button[type="xiaomi-primary"]:disabled {
+	--button-color: #ffffff;
+	--button-bd-color: #fad5b6;
+	--button-bg-color: #fad5b6;
+}

package/src/css/common.css

@@ -0,0 +1,24 @@
+.pops-flex-items-center {
+	display: flex;
+	align-items: center;
+}
+.pops-flex-y-center {
+	display: flex;
+	justify-content: space-between;
+}
+.pops-flex-x-center {
+	display: flex;
+	align-content: center;
+}
+.pops-hide {
+	display: none;
+}
+.pops-hide-important {
+	display: none !important;
+}
+.pops-no-border {
+	border: 0;
+}
+.pops-no-border-important {
+	border: 0;
+}

package/src/css/index.css

@@ -0,0 +1,135 @@
+@charset "utf-8";
+* {
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	-webkit-tap-highlight-color: transparent;
+	/* 代替::-webkit-scrollbar */
+	scrollbar-width: thin;
+}
+.pops {
+	--pops-bg-opacity: 1;
+	--pops-bd-opacity: 1;
+	--pops-font-size: 16px;
+}
+.pops-mask {
+	--pops-mask-bg-opacity: 0.4;
+}
+.pops {
+	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	border-radius: 4px;
+	border: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));
+	font-size: var(--pops-font-size);
+	box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
+	box-sizing: border-box;
+	overflow: hidden;
+	transition: all 0.35s;
+}
+.pops-anim {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.pops-anim[anim=""] {
+	top: unset;
+	right: unset;
+	bottom: unset;
+	left: unset;
+	width: unset;
+	height: unset;
+	transition: none;
+}
+/* 底部图标动画和样式 */
+.pops i.pops-bottom-icon[is-loading="true"] {
+	animation: rotating 2s linear infinite;
+}
+.pops i.pops-bottom-icon {
+	height: 1em;
+	width: 1em;
+	line-height: 1em;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	fill: currentColor;
+	color: inherit;
+	font-size: inherit;
+}
+
+/* 遮罩层样式 */
+.pops-mask {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border: 0;
+	border-radius: 0;
+	background-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));
+	box-shadow: none;
+	transition: none;
+}
+
+.pops-header-controls button.pops-header-control[type][data-header] {
+	float: right;
+	margin: 0 0;
+	outline: 0;
+	border: 0;
+	border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
+	background-color: transparent;
+	color: #888;
+	cursor: pointer;
+}
+.pops-header-controls button.pops-header-control[type="max"],
+.pops-header-controls button.pops-header-control[type="mise"],
+.pops-header-controls button.pops-header-control[type="min"] {
+	position: relative;
+	float: right;
+	margin: 0 2px;
+	outline: 0 !important;
+	border: 0;
+	border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
+	background-color: transparent;
+	color: rgb(136, 136, 136);
+	cursor: pointer;
+	transition: all 0.3s ease-in-out;
+}
+button.pops-header-control i {
+	color: rgb(144, 147, 153);
+	font-size: inherit;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	fill: currentColor;
+}
+button.pops-header-control svg {
+	height: 1.25em;
+	width: 1.25em;
+}
+button.pops-header-control {
+	right: 15px;
+	padding: 0;
+	border: none;
+	outline: 0;
+	background: 0 0;
+	cursor: pointer;
+	position: unset;
+	line-height: 1.15;
+}
+button.pops-header-control i:hover {
+	color: rgb(64, 158, 255);
+}
+.pops-header-controls[data-margin] button.pops-header-control {
+	margin: 0 6px;
+}
+.pops[type-value] .pops-header-controls {
+	display: flex;
+}

package/src/css/ninePalaceGridPosition.css

@@ -0,0 +1,50 @@
+.pops[position="top_left"] {
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+.pops[position="top"] {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}
+.pops[position="top_right"] {
+	position: fixed;
+	top: 0;
+	right: 0;
+}
+.pops[position="center_left"] {
+	position: fixed;
+	top: 50%;
+	left: 0;
+	transform: translateY(-50%);
+}
+.pops[position="center"] {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+.pops[position="center_right"] {
+	position: fixed;
+	top: 50%;
+	right: 0;
+	transform: translateY(-50%);
+}
+.pops[position="bottom_left"] {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+}
+.pops[position="bottom"] {
+	position: fixed;
+	bottom: 0;
+	left: 50%;
+	transform: translate(-50%, 0);
+}
+.pops[position="bottom_right"] {
+	position: fixed;
+	right: 0;
+	bottom: 0;
+}

package/src/css/scrollbar.css

@@ -0,0 +1,18 @@
+/* firefox上暂不支持::-webkit-scrollbar */
+.pops ::-webkit-scrollbar {
+	width: 6px;
+	height: 0;
+}
+
+.pops ::-webkit-scrollbar-track {
+	width: 0;
+}
+.pops ::-webkit-scrollbar-thumb:hover {
+	background: rgb(178, 178, 178, var(--pops-bg-opacity));
+}
+.pops ::-webkit-scrollbar-thumb {
+	min-height: 28px;
+	border-radius: 2em;
+	background: rgb(204, 204, 204, var(--pops-bg-opacity));
+	background-clip: padding-box;
+}