Add new button styles and sizes to the button.css file (#727)

OpenCSGs · Oct 21, 2024 · f78de99 · f78de99
1 parent 53c25ac
commit f78de99
Showing 1 changed file with 225 additions and 0 deletions.
diff --git a/frontend/src/assets/stylesheets/element-plus/button.css b/frontend/src/assets/stylesheets/element-plus/button.css
@@ -177,3 +177,228 @@
 .btn-ghost-danger[disabled] {
   color: var(--Gray-400);
 }
+
+
+/* btn-primary */
+.btn-primary {
+  background-color: var(--Brand-600);
+  border: 1px solid var(--Brand-600);
+  color: var(--Base-White);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-primary:hover {
+  background-color: var(--Brand-700);
+  border: 1px solid var(--Brand-700);
+  color: var(--Base-White);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-primary:focus {
+  background-color: var(--Brand-600);
+  border: 1px solid var(--Brand-600);
+  color: var(--Base-White);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(77, 106, 214, 0.24);
+  border: 1px solid var(--Brand-600);
+}
+
+.btn-primary[disabled] {
+  background-color: var(--Gray-100);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+  box-shadow: var(--shadow-xs);
+}
+
+/* btn-secondary-gray */
+.btn-secondary-gray {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Gray-300);
+  color: var(--Gray-700);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-secondary-gray:hover {
+  background-color: var(--Gray-50);
+  border: 1px solid var(--Gray-300);
+  color: var(--Gray-800);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-secondary-gray:focus {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Gray-300);
+  color: var(--Gray-700);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+}
+
+.btn-secondary-gray[disabled] {
+  background-color: var(--Base-White);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+  box-shadow: var(--shadow-xs);
+} 
+
+/* btn-secondary-color */
+.btn-secondary-color {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Brand-300);
+  color: var(--Brand-700);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-secondary-color:hover {
+  background-color: var(--Brand-50);
+  border: 1px solid var(--Brand-300);
+  color: var(--Brand-800);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-secondary-color:focus {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Brand-300);
+  color: var(--Brand-700);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(77, 106, 214, 0.24);
+}
+
+.btn-secondary-color[disabled] {
+  background-color: var(--Base-White);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+  box-shadow: var(--shadow-xs);
+}
+
+/* btn-tertiary-gray */
+.btn-tertiary-gray {
+  color: var(--Gray-600);
+}
+
+.btn-tertiary-gray:hover {
+  background-color: var(--Gray-50);
+  color: var(--Gray-700);
+}
+
+.btn-tertiary-gray:focus {
+  color: var(--Gray-600);
+}
+
+.btn-tertiary-gray[disabled] {
+  color: var(--Gray-400);
+}
+
+/* btn-tertiary-color */
+.btn-tertiary-color {
+  color: var(--Brand-700);
+}
+
+.btn-tertiary-color:hover {
+  background-color: var(--Brand-50);
+  color: var(--Brand-800);
+}
+
+.btn-tertiary-color:focus {
+  color: var(--Brand-700);
+}
+
+.btn-tertiary-color[disabled] {
+  color: var(--Gray-400);
+}
+
+/* btn-link-gray */
+.btn-link-gray {
+  color: var(--Gray-600);
+}
+
+.btn-link-gray:hover {
+  color: var(--Gray-700);
+}
+
+.btn-link-gray:focus {
+  color: var(--Gray-600);
+}
+
+.btn-link-gray[disabled] {
+  color: var(--Gray-400);
+}
+
+/* btn-link-color */
+.btn-link-color {
+  color: var(--Brand-700);
+}
+
+.btn-link-color:hover {
+  color: var(--Brand-800);
+}
+
+.btn-link-color:focus {
+  color: var(--Brand-700);
+}
+
+.btn-link-color[disabled] {
+  color: var(--Gray-400);
+} 
+
+/* md size button */
+.btn-primary,
+.btn-secondary-gray,
+.btn-secondary-color,
+.btn-tertiary-gray,
+.btn-tertiary-color,
+.btn-link-gray,
+.btn-link-color {
+  /* 默认尺寸（可以认为是 md 尺寸） */
+  padding: 10px 16px;
+  font-size: 14px;
+  border-radius: 10px;
+}
+
+/* sm size button */
+.btn-primary.btn-sm,
+.btn-secondary-gray.btn-sm,
+.btn-secondary-color.btn-sm,
+.btn-tertiary-gray.btn-sm,
+.btn-tertiary-color.btn-sm,
+.btn-link-gray.btn-sm,
+.btn-link-color.btn-sm {
+  padding: 8px 14px;
+  font-size: 12px;
+  border-radius: 8px;
+}
+
+/* lg size button */
+.btn-primary.btn-lg,
+.btn-secondary-gray.btn-lg,
+.btn-secondary-color.btn-lg,
+.btn-tertiary-gray.btn-lg,
+.btn-tertiary-color.btn-lg,
+.btn-link-gray.btn-lg,
+.btn-link-color.btn-lg {
+  padding: 10px 18px;
+  font-size: 16px;
+  border-radius: 8px;
+}
+
+/* xl size button */
+.btn-primary.btn-xl,
+.btn-secondary-gray.btn-xl,
+.btn-secondary-color.btn-xl,
+.btn-tertiary-gray.btn-xl,
+.btn-tertiary-color.btn-xl,
+.btn-link-gray.btn-xl,
+.btn-link-color.btn-xl {
+  padding: 12px 20px;
+  font-size: 16px;
+  border-radius: 8px;
+}
+
+/* 2xl size button */
+.btn-primary.btn-2xl,
+.btn-secondary-gray.btn-2xl,
+.btn-secondary-color.btn-2xl,
+.btn-tertiary-gray.btn-2xl,
+.btn-tertiary-color.btn-2xl,
+.btn-link-gray.btn-2xl,
+.btn-link-color.btn-2xl {
+  padding: 16px 24px;
+  font-size: 18px;
+  border-radius: 8px;
+}