Skip to content

Commit

Permalink
Merge pull request #557 from ecosyste-ms/ecosystems-global-styles-bugs
Browse files Browse the repository at this point in the history 
Ecosystems global styles bugs
  • Loading branch information
@andrew
andrew authored Feb 26, 2025
2 parents 25f158f + 3e4d2c2 commit deb08d4
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 102 deletions.
1 change: 0 additions & 1 deletion app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import "bootstrap";
@import "ecosystems";

.site-logo {
Expand Down
200 changes: 99 additions & 101 deletions app/assets/stylesheets/ecosystems.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,39 +21,14 @@ $color-grey: #DCDCE0;
$color-grey-dark: #4C4C61;

/* Tokens to override bootstrap colours */
$bootstrap-primary: $color-purple;
$bootstrap-secondary: $color-grey;
$bootstrap-success: $color-green;
$bootstrap-info: $color-purple-light;
$bootstrap-warning: $color-orange-light;
$bootstrap-danger: $color-orange-dark;
$bootstrap-light: $color-grey-light;
$bootstrap-dark: $color-black;

/* Bootstrap SCSS colour variables */
$theme-colors: (
"primary": $bootstrap-primary,
"secondary": $bootstrap-secondary,
"success": $bootstrap-success,
"info": $bootstrap-info,
"warning": $bootstrap-warning,
"danger": $bootstrap-danger,
"light": $bootstrap-light,
"dark": $bootstrap-dark
);

/* Bootstrap CSS colour variables */
:root {
--bs-primary: $bootstrap-primary;
--bs-success: $bootstrap-success;
--bs-danger: $bootstrap-danger;
--bs-warning: $bootstrap-warning;
--bs-info: $bootstrap-info;
--bs-light: $bootstrap-light;
--bs-dark: $bootstrap-dark;
--bs-list-group-border-color: $color-purple-light;
--bs-pagination-color: $color-purple-dark;
}
$primary: $color-purple;
$secondary: $color-grey;
$success: $color-green;
$info: $color-purple-light;
$warning: $color-orange-light;
$danger: $color-orange-dark;
$light: $color-grey-light;
$dark: $color-black;

/* Typography */
$font-family-base: "Inter", sans-serif;
Expand All @@ -73,13 +48,19 @@ $headings-font-weight: 700;
$display-font-weight: 900;
$lead-font-weight: 400;

$link-color: $color-purple-dark;
$link-hover-color: $color-purple;

$transition-collapse: height .35s ease;

$btn-padding-y: 0.5em;
$btn-padding-x: 1em;
$btn-font-weight: 600;
$btn-color: $color-white;

$badge-font-weight: 400;
$badge-padding-y: 0.4em;

@import "bootstrap";

@mixin spesh-link (
Expand Down Expand Up @@ -210,44 +191,12 @@ $btn-color: $color-white;
border: 0;
}

.alert-primary {
background-color: lighten($color-purple-light, 4%);
color: $color-black;
}

.alert-secondary {
background-color: $color-grey-light;
color: $color-black;
}

.alert-success {
background-color: lighten($color-green-light, 8%);
color: darken( $color-green-dark, 25%);
}

.alert-danger {
background-color: lighten($color-orange-light, 4%);
color: darken( $color-orange-dark, 45%);
}

.alert-warning {
background-color: lighten($color-orange-light, 12%);
color: darken( $color-orange-dark, 23%);
}

.alert-info {
background-color: lighten($color-purple-light, 12%);
color: darken( $color-purple-dark, 33%);
}

.alert-light {
background-color: $color-grey-light;
color: lighten( $color-black, 33%);
}

.alert-dark {
background-color: $color-grey-dark;
color: $color-white;
a {
color: $color-white;
}
}

hr {
Expand All @@ -272,7 +221,6 @@ body {
font-optical-sizing: auto;
}


.header__global {
width: 100%;
}
Expand Down Expand Up @@ -529,12 +477,6 @@ body {
font-weight: 800;
}

.badge {
background-color: $color-purple-light;
font-weight: normal;
color: $color-black;
}

.well {
background-color: $color-grey-light;
border-radius: $border-radius;
Expand Down Expand Up @@ -710,35 +652,91 @@ body {
max-width: 150px;
}

.bg-secondary {
color: $color-black;
}

//pagination
.page-link {
color: $color-purple-dark;
border-color: $color-grey;
&:hover {
color: $color-purple;
.listing {
border: 0;
border-radius: 0;
border-bottom: 3px solid $color-purple-light;
padding: 0;
}


.listing__title {
@include font-size(1rem);
a {
text-decoration: none;
color: $color-black;
}
}
.page-link.active, .active > .page-link {
background-color: $color-purple-dark;
border-color: $color-purple-dark;
}

.badge-warning {
background-color: $bootstrap-warning;
}
}

.badge-danger {
background-color: $bootstrap-danger;
color: $color-white;
}
.listing__meta {
font-weight: normal;
color: $color-grey-dark;
@include font-size(0.875rem);
}

.badge-dark {
background-color: $color-black;
color: $color-white;
}
.listing__details {
@include font-size(0.875rem);
}

.listing__time {
margin-top: 0.3888888889; //gross number but it aligns the baseline with the severity badge
@include font-size(0.7777777778rem);
}

.badge-light {
background-color: $color-grey-light;
.listing-filters {
.list-group-item {
@include font-size(0.875rem);
border-color: $color-grey;
word-break: break-word;
}
}

.listing-controls {
background-color: $color-grey-light;
p {
line-height: 2.2222222222rem;
}

.dropdown-item.active,
.dropdown-item:active {
background-color: $color-purple;
}
}

.listing-header__meta__text {
@include font-size(1rem);
line-height: 1.4rem;
}

.listing-header__title {
line-break: anywhere;
}

.rounded-input-group {
.form-control {
border-top-left-radius: 800px; //magic number, but it's consistent with bootstrap
border-bottom-left-radius: 800px;
}
.btn {
border-top-right-radius: 800px;
border-bottom-right-radius: 800px;
}
}


// Form validation
.invalid-feedback {
color: $color-orange-dark;
}

.was-validated .form-control:valid,
.form-control.is-valid {
border-color: $color-green-dark;
}

.valid-feedback {
color: $color-green-darker;
}

0 comments on commit deb08d4

Please sign in to comment.