feat: add shared panel and button styles
This commit is contained in:
+201
@@ -18,6 +18,207 @@ body {
|
|||||||
background: rgba(15, 118, 110, 0.18);
|
background: rgba(15, 118, 110, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.oc-primary-button.n-button {
|
||||||
|
transition:
|
||||||
|
background-color 160ms ease,
|
||||||
|
color 160ms ease,
|
||||||
|
border-color 160ms ease,
|
||||||
|
box-shadow 160ms ease,
|
||||||
|
transform 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-primary-button.n-button .n-button__content {
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-primary-button.n-button:not(.n-button--disabled):hover {
|
||||||
|
transform: translate(-1px, -1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-primary-button--teal.n-button {
|
||||||
|
border-color: rgb(153 246 228) !important;
|
||||||
|
background: rgb(242 250 247) !important;
|
||||||
|
color: rgb(17 94 89) !important;
|
||||||
|
box-shadow: 4px 4px 0 0 rgba(20, 184, 166, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-primary-button--teal.n-button:hover,
|
||||||
|
.oc-primary-button--teal.n-button:focus-visible {
|
||||||
|
border-color: rgb(94 234 212) !important;
|
||||||
|
background: rgb(234 250 245) !important;
|
||||||
|
color: rgb(19 78 74) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-primary-button--teal.n-button:not(.n-button--disabled):hover {
|
||||||
|
box-shadow: 5px 5px 0 0 rgba(20, 184, 166, 0.14) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-primary-button--sky.n-button {
|
||||||
|
border-color: rgb(186 230 253) !important;
|
||||||
|
background: rgb(224 242 254) !important;
|
||||||
|
color: rgb(7 89 133) !important;
|
||||||
|
box-shadow: 4px 4px 0 0 rgba(14, 165, 233, 0.14) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-primary-button--sky.n-button:hover,
|
||||||
|
.oc-primary-button--sky.n-button:focus-visible {
|
||||||
|
border-color: rgb(125 211 252) !important;
|
||||||
|
background: rgb(240 249 255) !important;
|
||||||
|
color: rgb(12 74 110) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-primary-button--sky.n-button:not(.n-button--disabled):hover {
|
||||||
|
box-shadow: 5px 5px 0 0 rgba(14, 165, 233, 0.18) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-card {
|
||||||
|
box-shadow: 6px 6px 0 0 rgba(15, 23, 42, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-card-soft {
|
||||||
|
box-shadow: 6px 6px 0 0 rgba(15, 23, 42, 0.04) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-empty-card {
|
||||||
|
box-shadow: 6px 6px 0 0 rgba(15, 23, 42, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button.n-button {
|
||||||
|
--n-color: rgb(255 255 255) !important;
|
||||||
|
--n-color-hover: rgb(240 253 250) !important;
|
||||||
|
--n-color-pressed: rgb(236 253 245) !important;
|
||||||
|
--n-border: 1px solid rgb(226 232 240) !important;
|
||||||
|
--n-border-hover: 1px solid rgb(153 246 228) !important;
|
||||||
|
--n-border-pressed: 1px solid rgb(94 234 212) !important;
|
||||||
|
--n-text-color: rgb(71 85 105) !important;
|
||||||
|
--n-text-color-hover: rgb(19 78 74) !important;
|
||||||
|
--n-text-color-pressed: rgb(17 94 89) !important;
|
||||||
|
border-color: rgb(226 232 240) !important;
|
||||||
|
background: rgb(255 255 255) !important;
|
||||||
|
color: rgb(71 85 105) !important;
|
||||||
|
box-shadow: 3px 3px 0 0 rgba(15, 23, 42, 0.06) !important;
|
||||||
|
transition:
|
||||||
|
background-color 160ms ease,
|
||||||
|
color 160ms ease,
|
||||||
|
border-color 160ms ease,
|
||||||
|
box-shadow 160ms ease,
|
||||||
|
transform 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button.n-button .n-button__content {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button.n-button:not(.n-button--disabled):hover,
|
||||||
|
.oc-panel-button.n-button:focus-visible {
|
||||||
|
transform: translate(-1px, -1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--neutral.n-button:hover,
|
||||||
|
.oc-panel-button--neutral.n-button:focus-visible {
|
||||||
|
border-color: rgb(153 246 228) !important;
|
||||||
|
background: rgb(240 253 250) !important;
|
||||||
|
color: rgb(19 78 74) !important;
|
||||||
|
box-shadow: 4px 4px 0 0 rgba(20, 184, 166, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--sky.n-button {
|
||||||
|
--n-color: rgb(224 242 254) !important;
|
||||||
|
--n-color-hover: rgb(240 249 255) !important;
|
||||||
|
--n-color-pressed: rgb(224 242 254) !important;
|
||||||
|
--n-border: 1px solid rgb(186 230 253) !important;
|
||||||
|
--n-border-hover: 1px solid rgb(125 211 252) !important;
|
||||||
|
--n-border-pressed: 1px solid rgb(56 189 248) !important;
|
||||||
|
--n-text-color: rgb(7 89 133) !important;
|
||||||
|
--n-text-color-hover: rgb(12 74 110) !important;
|
||||||
|
--n-text-color-pressed: rgb(12 74 110) !important;
|
||||||
|
border-color: rgb(186 230 253) !important;
|
||||||
|
background: rgb(224 242 254) !important;
|
||||||
|
color: rgb(7 89 133) !important;
|
||||||
|
box-shadow: 4px 4px 0 0 rgba(14, 165, 233, 0.14) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--sky.n-button:hover,
|
||||||
|
.oc-panel-button--sky.n-button:focus-visible {
|
||||||
|
border-color: rgb(125 211 252) !important;
|
||||||
|
background: rgb(240 249 255) !important;
|
||||||
|
color: rgb(12 74 110) !important;
|
||||||
|
box-shadow: 5px 5px 0 0 rgba(14, 165, 233, 0.18) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--teal.n-button {
|
||||||
|
--n-color: rgb(242 250 247) !important;
|
||||||
|
--n-color-hover: rgb(234 250 245) !important;
|
||||||
|
--n-color-pressed: rgb(220 252 231) !important;
|
||||||
|
--n-border: 1px solid rgb(153 246 228) !important;
|
||||||
|
--n-border-hover: 1px solid rgb(94 234 212) !important;
|
||||||
|
--n-border-pressed: 1px solid rgb(45 212 191) !important;
|
||||||
|
--n-text-color: rgb(17 94 89) !important;
|
||||||
|
--n-text-color-hover: rgb(19 78 74) !important;
|
||||||
|
--n-text-color-pressed: rgb(19 78 74) !important;
|
||||||
|
border-color: rgb(153 246 228) !important;
|
||||||
|
background: rgb(242 250 247) !important;
|
||||||
|
color: rgb(17 94 89) !important;
|
||||||
|
box-shadow: 4px 4px 0 0 rgba(20, 184, 166, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--teal.n-button:hover,
|
||||||
|
.oc-panel-button--teal.n-button:focus-visible {
|
||||||
|
border-color: rgb(94 234 212) !important;
|
||||||
|
background: rgb(234 250 245) !important;
|
||||||
|
color: rgb(19 78 74) !important;
|
||||||
|
box-shadow: 5px 5px 0 0 rgba(20, 184, 166, 0.14) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--danger.n-button {
|
||||||
|
--n-color: rgb(255 241 242) !important;
|
||||||
|
--n-color-hover: rgb(255 228 230) !important;
|
||||||
|
--n-color-pressed: rgb(255 228 230) !important;
|
||||||
|
--n-border: 1px solid rgb(254 205 211) !important;
|
||||||
|
--n-border-hover: 1px solid rgb(253 164 175) !important;
|
||||||
|
--n-border-pressed: 1px solid rgb(251 113 133) !important;
|
||||||
|
--n-text-color: rgb(190 24 93) !important;
|
||||||
|
--n-text-color-hover: rgb(159 18 57) !important;
|
||||||
|
--n-text-color-pressed: rgb(159 18 57) !important;
|
||||||
|
border-color: rgb(254 205 211) !important;
|
||||||
|
background: rgb(255 241 242) !important;
|
||||||
|
color: rgb(190 24 93) !important;
|
||||||
|
box-shadow: 4px 4px 0 0 rgba(244, 63, 94, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--danger.n-button:hover,
|
||||||
|
.oc-panel-button--danger.n-button:focus-visible {
|
||||||
|
border-color: rgb(253 164 175) !important;
|
||||||
|
background: rgb(255 228 230) !important;
|
||||||
|
color: rgb(159 18 57) !important;
|
||||||
|
box-shadow: 5px 5px 0 0 rgba(244, 63, 94, 0.14) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--amber.n-button {
|
||||||
|
--n-color: rgb(255 251 235) !important;
|
||||||
|
--n-color-hover: rgb(254 243 199) !important;
|
||||||
|
--n-color-pressed: rgb(253 230 138) !important;
|
||||||
|
--n-border: 1px solid rgb(253 230 138) !important;
|
||||||
|
--n-border-hover: 1px solid rgb(252 211 77) !important;
|
||||||
|
--n-border-pressed: 1px solid rgb(245 158 11) !important;
|
||||||
|
--n-text-color: rgb(146 64 14) !important;
|
||||||
|
--n-text-color-hover: rgb(120 53 15) !important;
|
||||||
|
--n-text-color-pressed: rgb(120 53 15) !important;
|
||||||
|
border-color: rgb(253 230 138) !important;
|
||||||
|
background: rgb(255 251 235) !important;
|
||||||
|
color: rgb(146 64 14) !important;
|
||||||
|
box-shadow: 4px 4px 0 0 rgba(245, 158, 11, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oc-panel-button--amber.n-button:hover,
|
||||||
|
.oc-panel-button--amber.n-button:focus-visible {
|
||||||
|
border-color: rgb(252 211 77) !important;
|
||||||
|
background: rgb(254 243 199) !important;
|
||||||
|
color: rgb(120 53 15) !important;
|
||||||
|
box-shadow: 5px 5px 0 0 rgba(245, 158, 11, 0.14) !important;
|
||||||
|
}
|
||||||
|
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
[class~='rounded'],
|
[class~='rounded'],
|
||||||
[class*='rounded-'] {
|
[class*='rounded-'] {
|
||||||
|
|||||||
Reference in New Issue
Block a user