scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-27 02:04:33 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add custom colors to tailwind config [SCI-9124]

Browse source
This commit is contained in:
Anton 2023-08-30 13:20:27 +02:00
parent f5235a9b9d
commit e9cd01467d
6 changed files with 72 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/assets/stylesheets/shared_styles/constants/colors.scss
View file

@ -41,20 +41,6 @@ $colors: ("sn-white": "#FFFFFF",
}
}
@each $color, $value in $colors {
.bg-#{$color} {
background-color: var(--#{$color});
}
.text-#{$color} {
color: var(--#{$color});
}
.border-#{$color} {
border-color: var(--#{$color});
}
}
// LEGACY COLORS

54
app/assets/stylesheets/tailwind/buttons.css
View file

@ -4,7 +4,7 @@
}
.btn {
@apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer max-h-[40px];
@apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border border-solid border-transparent appearance-none whitespace-nowrap cursor-pointer max-h-[40px];
}
.btn.icon-btn {
@ -40,9 +40,8 @@
}
.btn:focus {
@apply no-underline outline-none;
@apply no-underline outline-none text-sn-white;
box-shadow: 0px 0px 0px 4px var(--sn-science-blue-hover);
color: var(--sn-white);
}
.btn:active {
@ -56,99 +55,86 @@
.btn.btn-primary,
.btn.btn-success {
background-color: var(--sn-blue);
color: var(--sn-white);
@apply bg-sn-blue text-sn-white;
}
.btn.btn-primary:hover,
.btn.btn-success:hover{
background-color: var(--sn-blue-hover);
color: var(--sn-white);
@apply bg-sn-blue-hover text-sn-white;
}
.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
.btn.btn-success:disabled,
.btn.btn-success.disabled {
background-color: var(--sn-light-grey);
border: 1px solid var(--sn-light-grey);
color: var(--sn-sleepy-grey);
@apply bg-sn-light-grey text-sn-sleepy-grey border-sn-light-grey;
}
.btn.btn-secondary,
.btn.btn-default {
background-color: var(--sn-white);
border: 1px solid var(--sn-light-grey);
color: var(--sn-blue);
@apply bg-sn-white text-sn-blue border-sn-light-grey;
}
.btn.btn-shared {
background-color: var(--sn-science-blue);
border: 1px solid var(--sn-white);
color: var(--sn-white);
@apply bg-sn-science-blue text-sn-white border-sn-white;
}
.btn.btn-secondary:hover,
.btn.btn-default:hover {
border: 1px solid var(--sn-blue-hover);
@apply border-sn-blue-hover;
}
.btn.btn-shared:hover {
border: 1px solid var(--sn-light-grey);
@apply border-sn-light-grey;
}
.btn.btn-secondary:disabled,
.btn.btn-secondary.disabled,
.btn.btn-default:disabled,
.btn.btn-default.disabled {
background-color: var(--sn-white);
color: var(--sn-sleepy-grey);
@apply bg-sn-white text-sn-sleepy-grey;
}
.btn.btn-shared:disabled,
.btn.btn-shared.disabled {
background-color: var(--sn-white);
color: var(--sn-sleepy-grey);
border: 1px solid var(--sn-light-grey);
@apply bg-sn-white text-sn-sleepy-grey border-sn-light-grey;
}
.btn.btn-light {
background-color: transparent;
color: var(--sn-blue);
@apply bg-transparent text-sn-blue border-transparent;
}
.btn.btn-light.btn-black {
color: var(--sn-black);
@apply text-sn-black;
}
.btn.btn-light.btn-white {
color: var(--sn-white);
@apply text-sn-white;
}
.btn.btn-light.btn-white:hover {
background-color: transparent;
@apply bg-transparent;
}
.btn.btn-light:hover {
background-color: var(--sn-super-light-grey);
@apply bg-sn-super-light-grey;
}
.btn.btn-light:disabled,
.btn.btn-light.disabled {
color: var(--sn-sleepy-grey);
@apply text-sn-sleepy-grey;
}
.btn.btn-danger {
background-color: var(--sn-delete-red);
color: var(--sn-white);
@apply bg-sn-delete-red text-sn-white;
}
.btn.btn-danger:hover {
background-color: var(--sn-delete-red-hover);
@apply bg-sn-delete-red-hover;
}
.btn.btn-danger:disabled,
.btn.btn-danger.disabled {
background-color: var(--sn-delete-red-disabled);
@apply bg-sn-delete-red-disabled;
}
}

3
app/assets/stylesheets/tailwind/flyouts.css
View file

@ -16,7 +16,6 @@
}
.sci-flyout .sci-flyout-footer {
@apply flex pt-6 justify-end gap-6 border-0 border-t border-solid;
border-color: var(--sn-light-grey);
@apply flex pt-6 justify-end gap-6 border-0 border-t border-solid border-sn-light-grey;
}
}

25
app/assets/stylesheets/tailwind/inputs.css
View file

@ -1,8 +1,7 @@
@layer components {
.sci-label {
@apply text-sm font-medium;
color: var(--sn-grey);
@apply text-sm font-medium text-sn-grey;
}
.sci-input-container-v2 {
@ -14,12 +13,11 @@
}
.sci-input-container-v2 input {
@apply w-full h-full bg-transparent p-0.5 border rounded outline-none absolute top-0 pl-2;
border-color: var(--sn-sleepy-grey);
@apply w-full h-full bg-transparent p-0.5 border rounded outline-none absolute top-0 pl-2 border-sn-sleepy-grey;
}
.sci-input-container-v2 input::placeholder {
color: var(--sn-sleepy-grey);
@apply text-sn-sleepy-grey;
}
.sci-input-container-v2 .sci-input-field-v2 {
@ -27,17 +25,15 @@
}
.sci-input-container-v2 .error {
border-color: var(--sn-coral) !important;
@apply !border-sn-coral;
}
.sci-input-container-v2 input:focus {
border-color: var(--sn-science-blue);
box-shadow: none;
@apply border-sn-science-blue shadow-none;
}
.sci-input-container-v2 .sn-icon {
@apply m-2;
color: var(--sn-black)
@apply m-2 text-sn-black;
}
.sci-input-container-v2.right-icon .sn-icon {
@ -61,19 +57,18 @@
}
.sci-input-container-v2 textarea {
@apply w-full h-full bg-transparent px-2 border rounded outline-none absolute top-0;
border-color: var(--sn-sleepy-grey);
@apply w-full h-full bg-transparent px-2 border rounded outline-none absolute top-0 border-sn-sleepy-grey;
}
.sci-input-container-v2 textarea::placeholder {
color: var(--sn-sleepy-grey);
@apply text-sn-sleepy-grey;
}
.sci-input-container-v2 textarea:focus {
border-color: var(--sn-science-blue);
@apply border-sn-science-blue;
}
.sci-input-container-v2 .history-flyout li:hover {
background-color: var(--sn-super-light-grey);
@apply bg-sn-super-light-grey;
}
}

9
app/assets/stylesheets/tailwind/modals.css
View file

@ -1,7 +1,6 @@
@layer components {
.modal-backdrop {
@apply fixed right-0 top-0 left-0 bottom-0 z-[1040];
background-color: black;
@apply fixed right-0 top-0 left-0 bottom-0 z-[1040] bg-sn-black;
}
.modal-backdrop.fade {
@ -54,8 +53,7 @@
}
.modal .modal-content {
@apply relative border border-solid rounded outline-none shadow p-6;
background-color: var(--sn-white);
@apply relative border border-solid rounded outline-none shadow p-6 bg-sn-white;
}
.modal .modal-header {
@ -83,7 +81,6 @@
}
.modal .modal-footer {
@apply flex pt-6 justify-end gap-6 border-0 border-t border-solid;
border-color: var(--sn-light-grey);
@apply flex pt-6 justify-end gap-6 border-0 border-t border-solid border-sn-light-grey;
}
}

38
config/tailwind.config.js
View file

@ -19,7 +19,43 @@ module.exports = {
},
colors: {
transparent: 'transparent',
current: 'currentColor'
current: 'currentColor',
'sn-white': '#FFFFFF',
'sn-super-light-grey': '#F9F9F9',
'sn-light-grey': '#EAECF0',
'sn-sleepy-grey': '#D0D5DD',
'sn-grey': '#98A2B3',
'sn-dark-grey': '#475467',
'sn-black': '#1D2939',
'sn-blue': '#104DA9',
'sn-science-blue': '#3B99FD',
'sn-super-light-blue': '#F0F8FF',
'sn-blue-hover': '#2D5FAA',
'sn-science-blue-hover': '#79B4F3',
'sn-alert-green': '#5EC66F',
'sn-alert-violet': '#6F2DC1',
'sn-alert-brittlebush': '#E9A845',
'sn-alert-passion': '#DF3562',
'sn-alert-turqoise': '#46C3C8',
'sn-alert-bloo': '#3070ED',
'sn-alert-blue-disabled': '#87A6D4',
'sn-alert-green-disabled': '#AEE3B7',
'sn-alert-violet-disabled': '#B796E0',
'sn-alert-brittlebush-disabled': '#F4D3A2',
'sn-alert-passion-disabled': '#EF9AB0',
'sn-alert-turqoise-disabled': '#A2E1E3',
'sn-alert-science-blue-disabled': '#9DCCFE',
'sn-delete-red': '#CE0C24',
'sn-delete-red-hover': '#AD0015',
'sn-delete-red-disabled': '#F5D7DB',
'sn-coral': '#FB565B',
'sn-background-blue': '#DBE4F2',
'sn-background-green': '#E7F7E9',
'sn-background-violet': '#E9DFF6',
'sn-background-brittlebush': '#FCF2E3',
'sn-background-passion': '#FAE1E7',
'sn-background-turqoise': '#E3F6F7',
'sn-background-bloo': '#E2F0FF'
}
}
},