@gits-id/button/dist/style.css

GITS Button Component

.dark .btn-default:not(.dark .btn--outlined):not(.dark .btn--text):not(:disabled){--btn-bg-color: #262626;--btn-border-color: #262626;--btn-text-color: #e5e5e5}.dark .btn-default:not(.dark .btn--outlined):not(.dark .btn--text):not(:disabled):hover{--btn-bg-color: #404040}.dark .btn:disabled{--btn-text-color: #737373 !important;--btn-bg-color: #262626 !important;--btn-border-color: #404040 !important}.dark .btn--outlined:disabled{--btn-text-color: #737373;--btn-border-color: #e5e5e5}.dark .btn--outlined.btn-default:not(:disabled){--btn-text-color: #e5e5e5;--btn-border-color: #404040;--btn-bg-color: transparent}.dark .btn--outlined.btn-default:not(:disabled):hover:not(:disabled){--btn-bg-color: #262626;--btn-border-color: #262626}.dark .btn--outlined.btn-dark:not(:disabled){--btn-text-color: #e5e7eb;--btn-border-color: #1f2937;--btn-bg-color: transparent}.dark .btn--outlined.btn-dark:not(:disabled):hover:not(:disabled){--btn-bg-color: #1f2937;--btn-border-color: #1f2937;--btn-text-color: #fff}.dark .btn--text{--btn-text-color: #262626}.dark .btn--text:disabled{--btn-text-color: #737373}.dark .btn--text.btn-default:not(:disabled){--btn-text-color: #e5e5e5}.dark .btn--text.btn-default:not(:disabled):hover:not(:disabled){--btn-text-color: #a3a3a3}.dark .btn--text.btn-dark:not(:disabled){--btn-text-color: #e5e5e5}.dark .btn--text.btn-dark:not(:disabled):hover:not(:disabled){--btn-text-color: #a3a3a3}:root{--btn-bg-color: #e5e7eb;--btn-text-color: #1f2937;--btn-border-color: #d1d5db;--btn-border-radius: .25rem;--btn-border-width: 1px;--btn-padding-x: .75rem;--btn-padding-y: .5rem;--btn-line-height: 1.25;--btn-font-size: .875rem;--btn-font-weight: 600;--btn-shadow: none;--btn-icon-width: 1.25rem;--btn-icon-height: 1.25rem;--btn-width: auto;--btn-height: auto;--btn-transition: all .2s ease-in-out;--btn-sm-height: 32px;--btn-sm-padding-x: .75rem;--btn-sm-padding-y: .25rem;--btn-sm-icon-width: 1rem;--btn-sm-icon-height: 1rem;--btn-md-height: 44px;--btn-md-padding-x: 1rem;--btn-md-padding-y: .75rem;--btn-md-icon-width: 1.25rem;--btn-md-icon-height: 1.25rem;--btn-lg-height: 52px;--btn-lg-padding-x: 1.5rem;--btn-lg-padding-y: .75rem;--btn-lg-icon-width: 1.5rem;--btn-lg-icon-height: 1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;background-color:var(--btn-bg-color);color:var(--btn-text-color);font-weight:var(--btn-font-weight);line-height:var(--btn-line-height);font-size:var(--btn-font-size);border-radius:var(--btn-border-radius);border-width:var(--btn-border-width);border-color:var(--btn-border-color);transition:var(--btn-transition)}.btn.btn-primary:not(.btn--outlined):not(.btn--text):not(:disabled){--btn-bg-color: #28A0F6;--btn-text-color: #fff;--btn-border-color: #28A0F6}.btn.btn-primary:not(.btn--outlined):not(.btn--text):not(:disabled):hover:not(:disabled){--btn-bg-color: #0984DD;--btn-border-color: #0984DD;--btn-text-color: #fff}.btn.btn--outlined.btn-primary:not(:disabled){--btn-bg-color: transparent;--btn-text-color: #28A0F6;--btn-border-color: #28A0F6}.btn.btn--outlined.btn-primary:not(:disabled):hover:not(:disabled){--btn-bg-color: #28A0F6;--btn-border-color: #28A0F6;--btn-text-color: #fff}.btn.btn--text.btn-primary{--btn-text-color: #28A0F6}.btn.btn--text.btn-primary:hover{--btn-text-color: #0984DD}.btn.btn--text.btn-primary:active{--btn-text-color: #4FB1F8}.btn.btn-secondary:not(.btn--outlined):not(.btn--text):not(:disabled){--btn-bg-color: #FF8B49;--btn-text-color: #fff;--btn-border-color: #FF8B49}.btn.btn-secondary:not(.btn--outlined):not(.btn--text):not(:disabled):hover:not(:disabled){--btn-bg-color: #FF6711;--btn-border-color: #FF6711;--btn-text-color: #fff}.btn.btn--outlined.btn-secondary:not(:disabled){--btn-bg-color: transparent;--btn-text-color: #FF8B49;--btn-border-color: #FF8B49}.btn.btn--outlined.btn-secondary:not(:disabled):hover:not(:disabled){--btn-bg-color: #FF8B49;--btn-border-color: #FF8B49;--btn-text-color: #fff}.btn.btn--text.btn-secondary{--btn-text-color: #FF8B49}.btn.btn--text.btn-secondary:hover{--btn-text-color: #FF6711}.btn.btn--text.btn-secondary:active{--btn-text-color: #FFA572}.btn.btn-success:not(.btn--outlined):not(.btn--text):not(:disabled){--btn-bg-color: #10b981;--btn-text-color: #fff;--btn-border-color: #10b981}.btn.btn-success:not(.btn--outlined):not(.btn--text):not(:disabled):hover:not(:disabled){--btn-bg-color: #059669;--btn-border-color: #059669;--btn-text-color: #fff}.btn.btn--outlined.btn-success:not(:disabled){--btn-bg-color: transparent;--btn-text-color: #10b981;--btn-border-color: #10b981}.btn.btn--outlined.btn-success:not(:disabled):hover:not(:disabled){--btn-bg-color: #10b981;--btn-border-color: #10b981;--btn-text-color: #fff}.btn.btn--text.btn-success{--btn-text-color: #10b981}.btn.btn--text.btn-success:hover{--btn-text-color: #059669}.btn.btn--text.btn-success:active{--btn-text-color: #34d399}.btn.btn-error:not(.btn--outlined):not(.btn--text):not(:disabled){--btn-bg-color: #f43f5e;--btn-text-color: #fff;--btn-border-color: #f43f5e}.btn.btn-error:not(.btn--outlined):not(.btn--text):not(:disabled):hover:not(:disabled){--btn-bg-color: #e11d48;--btn-border-color: #e11d48;--btn-text-color: #fff}.btn.btn--outlined.btn-error:not(:disabled){--btn-bg-color: transparent;--btn-text-color: #f43f5e;--btn-border-color: #f43f5e}.btn.btn--outlined.btn-error:not(:disabled):hover:not(:disabled){--btn-bg-color: #f43f5e;--btn-border-color: #f43f5e;--btn-text-color: #fff}.btn.btn--text.btn-error{--btn-text-color: #f43f5e}.btn.btn--text.btn-error:hover{--btn-text-color: #e11d48}.btn.btn--text.btn-error:active{--btn-text-color: #fb7185}.btn.btn-warning:not(.btn--outlined):not(.btn--text):not(:disabled){--btn-bg-color: #eab308;--btn-text-color: #fff;--btn-border-color: #eab308}.btn.btn-warning:not(.btn--outlined):not(.btn--text):not(:disabled):hover:not(:disabled){--btn-bg-color: #ca8a04;--btn-border-color: #ca8a04;--btn-text-color: #fff}.btn.btn--outlined.btn-warning:not(:disabled){--btn-bg-color: transparent;--btn-text-color: #eab308;--btn-border-color: #eab308}.btn.btn--outlined.btn-warning:not(:disabled):hover:not(:disabled){--btn-bg-color: #eab308;--btn-border-color: #eab308;--btn-text-color: #fff}.btn.btn--text.btn-warning{--btn-text-color: #eab308}.btn.btn--text.btn-warning:hover{--btn-text-color: #ca8a04}.btn.btn--text.btn-warning:active{--btn-text-color: #facc15}.btn.btn-info:not(.btn--outlined):not(.btn--text):not(:disabled){--btn-bg-color: #0ea5e9;--btn-text-color: #fff;--btn-border-color: #0ea5e9}.btn.btn-info:not(.btn--outlined):not(.btn--text):not(:disabled):hover:not(:disabled){--btn-bg-color: #0284c7;--btn-border-color: #0284c7;--btn-text-color: #fff}.btn.btn--outlined.btn-info:not(:disabled){--btn-bg-color: transparent;--btn-text-color: #0ea5e9;--btn-border-color: #0ea5e9}.btn.btn--outlined.btn-info:not(:disabled):hover:not(:disabled){--btn-bg-color: #0ea5e9;--btn-border-color: #0ea5e9;--btn-text-color: #fff}.btn.btn--text.btn-info{--btn-text-color: #0ea5e9}.btn.btn--text.btn-info:hover{--btn-text-color: #0284c7}.btn.btn--text.btn-info:active{--btn-text-color: #38bdf8}.btn:not(.btn--flush){padding:var(--btn-padding-y) var(--btn-padding-x);height:var(--btn-height)}.btn:not(.btn--flush):not(.btn--block){width:var(--btn-width)}.btn:disabled{cursor:not-allowed}.btn:disabled:not(.btn--outlined){--btn-bg-color: #e5e7eb;--btn-text-color: #6b7280;--btn-border-color: #e5e7eb}.btn-default:not(.btn--outlined):not(.btn--text):not(:disabled){--btn-bg-color: #fff;--btn-text-color: #1f2937;--btn-border-color: #1f2937}.btn-default:not(.btn--outlined):not(.btn--text):not(:disabled):hover{--btn-bg-color: #f3f4f6;--btn-border-color: #111827}.btn-dark:not(.btn--outlined):not(.btn--text):not(:disabled){--btn-bg-color: #1f2937;--btn-text-color: #fff;--btn-border-color: #1f2937}.btn-dark:not(.btn--outlined):not(.btn--text):not(:disabled):hover{--btn-bg-color: #111827;--btn-border-color: #111827;--btn-text-color: #fff}.btn--flush{padding:0;--btn-height: auto}.btn--outlined:disabled{cursor:not-allowed;--btn-bg-color: transparent;--btn-text-color: #6b7280;--btn-border-color: #e5e7eb}.btn--outlined.btn-default:not(:disabled),.btn--outlined.btn-dark:not(:disabled){--btn-bg-color: transparent;--btn-text-color: #1f2937;--btn-border-color: #1f2937}.btn--outlined.btn-default:not(:disabled):hover:not(:disabled),.btn--outlined.btn-dark:not(:disabled):hover:not(:disabled){--btn-bg-color: #111827;--btn-border-color: #111827;--btn-text-color: #fff}.btn--text{--btn-bg-color: transparent;--btn-text-color: #1f2937;--btn-border-color: transparent}.btn--text:disabled{cursor:not-allowed;--btn-text-color: #6b7280}.btn--text.btn-default:not(:disabled),.btn--text.btn-dark:not(:disabled){--btn-text-color: #1f2937}.btn--text.btn-default:not(:disabled):hover:not(:disabled),.btn--text.btn-dark:not(:disabled):hover:not(:disabled){--btn-text-color: #111827}.btn--sm{--btn-padding-x: var(--btn-sm-padding-x);--btn-padding-y: var(--btn-sm-padding-y);--btn-height: var(--btn-sm-height)}.btn--sm .btn-icon{--btn-icon-width: var(--btn-sm-icon-width);--btn-icon-height: var(--btn-sm-icon-height)}.btn--sm.btn--fab{--btn-width: var(--btn-sm-height);--btn-height: var(--btn-sm-height)}.btn--md{--btn-padding-x: var(--btn-md-padding-x);--btn-padding-y: var(--btn-md-padding-y);--btn-height: var(--btn-md-height)}.btn--md .btn-icon{--btn-icon-width: var(--btn-md-icon-width);--btn-icon-height: var(--btn-md-icon-height)}.btn--md.btn--fab{--btn-width: var(--btn-md-height);--btn-height: var(--btn-md-height)}.btn--lg{--btn-padding-x: var(--btn-lg-padding-x);--btn-padding-y: var(--btn-lg-padding-y);--btn-height: var(--btn-lg-height)}.btn--lg .btn-icon{--btn-icon-width: var(--btn-lg-icon-width);--btn-icon-height: var(--btn-lg-icon-height)}.btn--lg.btn--fab{--btn-width: var(--btn-lg-height);--btn-height: var(--btn-lg-height)}.btn--ring:focus{--btn-ring-width: 3px;--btn-ring-color: #3b82f6}.btn--rounded{--btn-border-radius: 9999px}.btn--fab{--btn-border-radius: 9999px;--btn-width: "var(--btn-width)";--btn-height: "var(--btn-height)";--btn-padding-x: .25rem;--btn-padding-y: .25rem}.btn--tile{--btn-border-radius: 0px}.btn--block{display:flex;width:100%}.btn--loading{pointer-events:progress}.btn-icon{width:var(--btn-icon-width);height:var(--btn-icon-height)}.v-btn-group{display:inline-flex}.v-btn-group>.btn{--btn-border-radius: 0px;margin-left:-1px}.v-btn-group>.btn:first-child{--btn-border-radius: .25rem 0 0 .25rem}.v-btn-group>.btn:last-child{--btn-border-radius: 0 .25rem .25rem 0}.v-btn-group>.btn:not(:first-child):not(:last-child){--btn-border-radius: 0}.v-btn-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}