mirror of
https://github.com/Growstuff/growstuff.git
synced 2026-10-30 18:58:39 -04:00
Brenda WallaceandClaude Sonnet 5.5
be04ef963f
One actions_menu helper now builds the three-dot toggle and dropdown for seeds, harvests, crops, gardens, posts, photos, activities and comments, replacing the text "Actions" toggle. Every item carries a green line icon (menu_icon), and delete uses a darker red ($danger-text, 5.6:1 on white) so it stays readable; it is still last, under a divider, with its own icon. The React menus draw the same icons. DESIGN.md now says menu items have icons. Also fixes the posts menu delete, which confirmed but never sent DELETE. Closes #4939 Closes #4940 Closes #4942 Closes #4943 Closes #4944 Closes #4945 Closes #4946 Part of #4933 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
137 lines
4.4 KiB
SCSS
137 lines
4.4 KiB
SCSS
//$screen-md-min: 1028px
|
|
|
|
// Base colours
|
|
$beige: #f4f2ef;
|
|
$brown: #413f3b;
|
|
|
|
$green: #57803c;
|
|
$blue: #2f4365;
|
|
$red: #ff4d43;
|
|
// Text and icons on white need 4.5:1; $red is about 3.3:1, so it is for fills only.
|
|
$danger-text: #c62828;
|
|
$orange: #ffa500;
|
|
$yellow: #b2935c;
|
|
$white: #fff;
|
|
|
|
// One corner radius for every data card and section box.
|
|
$card-radius: 4px;
|
|
|
|
// Muted text. Darker than it looks it needs to be: at 70% this is 4.11:1 on
|
|
// beige, under the 4.5:1 minimum. At 75% it is 4.69:1.
|
|
$ink-muted: rgba(65, 63, 59, 0.75);
|
|
|
|
$default-font: "Raleway", "Fira Sans", Helvetica, Arial, sans-serif;
|
|
$black: #000;
|
|
|
|
// Bootstrap 5 configuration. These are read by Bootstrap's own variables
|
|
// (each is declared !default there), so they must be defined before it is imported.
|
|
$body-bg: $beige;
|
|
// Near-black, as the old skin's body text was (rgba(0, 0, 0, 0.87) on white). The brown
|
|
// is too close to the link green for links in running text to be told apart without underlines.
|
|
$body-color: #212121;
|
|
$text-color: $brown;
|
|
$link-color: $green;
|
|
$font-family-sans-serif: $default-font;
|
|
$font-size-base: 0.875rem; // the site's text size; Bootstrap's default is 1rem
|
|
$link-decoration: none;
|
|
$link-hover-decoration: underline;
|
|
$line-height-base: 1.428572;
|
|
|
|
// Bootstrap 5 makes the text of a bare .badge white; Bootstrap 4 left it alone. The like
|
|
// button's heart and count sit in a bare badge on a pale button, so leave the colour alone again.
|
|
$badge-color: inherit;
|
|
|
|
// Header menu links. Bootstrap's dark navbar uses 55% white, which on the brown navbar is
|
|
// 4.47:1, just under the 4.5:1 minimum.
|
|
$navbar-dark-color: rgba($white, 0.85);
|
|
$navbar-dark-hover-color: $white;
|
|
$navbar-dark-active-color: $white;
|
|
|
|
// Cards as the old Material skin drew them: white, square-ish, no border, and raised.
|
|
$material-shadow-raised: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
|
$card-bg: $white;
|
|
$card-cap-bg: $white;
|
|
$card-border-width: 0;
|
|
$card-border-radius: 2px;
|
|
$card-inner-border-radius: 2px;
|
|
$card-box-shadow: $material-shadow-raised;
|
|
|
|
// Breadcrumbs as the old skin drew them, with a > divider. No side padding: the
|
|
// bar is the same colour as the page, so it only pushed "Home" in from the
|
|
// edge that the heading and content line up with.
|
|
$breadcrumb-padding-y: 0.75rem;
|
|
$breadcrumb-padding-x: 0;
|
|
$breadcrumb-divider: quote(">");
|
|
// The sizes the old Material skin gave the display-* classes the site uses (display-3, display-4).
|
|
$display-font-sizes: (
|
|
1: 7rem,
|
|
2: 3.5rem,
|
|
3: 2.8125rem,
|
|
4: 2.125rem,
|
|
5: 2rem,
|
|
6: 1.75rem
|
|
);
|
|
|
|
$primary: $green;
|
|
$secondary: $blue;
|
|
$success: $green;
|
|
// Dark enough that Bootstrap gives it white text (4.6:1), as text-bg-info and btn-info did before.
|
|
$info: #1976d2;
|
|
$warning: $orange;
|
|
$danger: $red;
|
|
$light: $beige;
|
|
$dark: $brown;
|
|
|
|
// The site's own breakpoints (Bootstrap's defaults are lg: 992px, xl: 1200px, xxl: 1400px).
|
|
$grid-breakpoints: (
|
|
// Extra small screen / phone
|
|
xs: 0,
|
|
// Small screen / phone
|
|
sm: 576px,
|
|
// Medium screen / tablet
|
|
md: 768px,
|
|
// Large screen / desktop
|
|
lg: 1200px,
|
|
// Extra large screen / wide desktop
|
|
xl: 1800px
|
|
);
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 1140px,
|
|
xl: 1320px
|
|
);
|
|
|
|
// Nav bar
|
|
$navbar-default-bg: $brown;
|
|
$navbar-default-bg-highlight: $brown;
|
|
$navbar-default-color: $beige;
|
|
$navbar-default-link-color: darken($beige, 20%);
|
|
$navbar-default-link-hover-color: $beige;
|
|
$navbar-default-link-active-color: darken($beige, 80%);
|
|
$navbar-default-brand-color: lighten($green, 20%);
|
|
|
|
$highest-level: 1070;
|
|
|
|
// Buttons as the old Material skin drew them: raised by a shadow, no border, medium weight.
|
|
// (The shadow deepens while pressed; the uppercase lettering is in overrides.scss.)
|
|
$btn-border-width: 0;
|
|
$btn-border-radius: 2px;
|
|
$btn-border-radius-sm: 2px;
|
|
$btn-border-radius-lg: 2px;
|
|
$btn-font-weight: 500;
|
|
$btn-box-shadow: $material-shadow-raised;
|
|
$btn-active-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
|
|
|
|
// Progress bars: a thin strip over a neutral track. The bar's colour shows how the planting is
|
|
// getting on (see .progress-bar--* in overrides.scss).
|
|
$progress-height: 0.875rem;
|
|
$progress-bg: #e0e0e0;
|
|
$progress-bar-bg: $green;
|
|
|
|
// List groups (the homepage lists) are white, like cards, not the page's beige.
|
|
$list-group-bg: $white;
|
|
|
|
// Checkboxes and radios: a border you can see on the beige page and white cards.
|
|
$form-check-input-border: 1px solid #757575;
|