rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-30 19:52:20 +01:00
Code Issues Releases Activity

Add style variables

Browse Source
This commit is contained in:
vincent 2022-02-04 15:09:38 +01:00
parent 719c1abd63
commit d94f5efbcd
5 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/frontend/src/stylesheets/application.scss
View File

@ -1,5 +1,6 @@
@import "variables/colors"; @import "variables/colors";
@import "variables/typography"; @import "variables/typography";
@import "variables/decoration";
@import "app.functions"; @import "app.functions";
@import "bootstrap_and_overrides"; @import "bootstrap_and_overrides";

3
app/frontend/src/stylesheets/bootstrap_and_overrides.scss vendored
View File

@ -95,7 +95,8 @@ $link-hover-decoration: underline;
// Semibold = 600, Bold = 700, ExtraB = 800 // Semibold = 600, Bold = 700, ExtraB = 800
$font-family-sans-serif: "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif !default; //$font-family-sans-serif: "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif !default;
$font-family-sans-serif: var(--font-text) !default;
$font-proxima-condensed: "proxima-nova-condensed", "Open Sans Condensed", Helvetica, Arial, sans-serif !default; $font-proxima-condensed: "proxima-nova-condensed", "Open Sans Condensed", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-felt: "felt-tip-roman", "Loved by the King", cursive, sans-serif; $font-felt: "felt-tip-roman", "Loved by the King", cursive, sans-serif;

16
app/frontend/src/stylesheets/modules/base/fab-text-editor.scss
View File

@ -4,10 +4,10 @@
padding-bottom: 1.6rem; padding-bottom: 1.6rem;
background-color: var(--gray-soft-lightest); background-color: var(--gray-soft-lightest);
border: 1px solid var(--gray-soft-dark); border: 1px solid var(--gray-soft-dark);
// TODO: border radius from variable border-radius: var(--border-radius);
border-radius: 8px;
&-label { &-label {
@include text-sm;
display: block; display: block;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }
@ -71,9 +71,8 @@
padding: 1.2rem; padding: 1.2rem;
background-color: var(--gray-soft-lightest); background-color: var(--gray-soft-lightest);
border: 1px solid var(--gray-soft-darkest); border: 1px solid var(--gray-soft-darkest);
border-radius: 8px; border-radius: var(--border-radius);
// TODO: shadow from variable box-shadow: var(--shadow);
box-shadow: 0 0 10px rgba(39, 32, 32, 0.25);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out;
@ -95,7 +94,7 @@
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
background-color: var(--gray-soft-light); background-color: var(--gray-soft-light);
border: 1px solid var(--secondary); border: 1px solid var(--secondary);
border-radius: 8px; border-radius: var(--border-radius);
font-size: var(--text-base); font-size: var(--text-base);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -157,9 +156,8 @@
color: var(--main-dark); color: var(--main-dark);
background-color: var(--main-lightest); background-color: var(--main-lightest);
border: 1px solid var(--main-light); border: 1px solid var(--main-light);
border-radius: 8px; border-radius: var(--border-radius);
// TODO: shadow from variable box-shadow: var(--shadow);
box-shadow: 0 0 10px rgba(39, 32, 32, 0.25);
svg { svg {
flex-shrink: 0; flex-shrink: 0;

8
app/frontend/src/stylesheets/modules/base/rhf-input.scss
View File

@ -8,7 +8,10 @@
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
p { margin: 0; } p {
@include text-sm;
margin: 0;
}
} }
&.is-required &-header p::after { &.is-required &-header p::after {
content: "*"; content: "*";
@ -22,7 +25,7 @@
grid-template-areas: "icon input addon"; grid-template-areas: "icon input addon";
grid-template-columns: min-content 1fr min-content; grid-template-columns: min-content 1fr min-content;
border: 1px solid var(--gray-soft-dark); border: 1px solid var(--gray-soft-dark);
border-radius: 4px; border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
transition: border-color ease-in-out 0.15s; transition: border-color ease-in-out 0.15s;
@ -42,6 +45,7 @@
input { input {
grid-area: input; grid-area: input;
border: none; border: none;
border-radius: var(--border-radius);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
padding: 0 0.8rem; padding: 0 0.8rem;
color: var(--gray-hard-darkest); color: var(--gray-hard-darkest);

4
app/frontend/src/stylesheets/variables/decoration.scss Normal file
View File

@ -0,0 +1,4 @@
:root {
--border-radius: 8px;
--shadow: 0 0 10px rgba(39, 32, 32, 0.25);
}