Skip to content

Commit

Permalink
Vendored spectre-css to update its scss syntax around colors and math
Browse files Browse the repository at this point in the history
  • Loading branch information
crismali committed Oct 5, 2024
1 parent 84ab8a2 commit 71a0b26
Show file tree
Hide file tree
Showing 80 changed files with 5,717 additions and 57 deletions.
File renamed without changes.
24 changes: 13 additions & 11 deletions app/assets/stylesheets/globals.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@use "sass:color";

@import 'mixins';

$primary-color: #2F7890;
$primary-color-light: lighten(#2F7890, 20%);
$secondary-color: darken(#CDABBE, 10%);
$primary-color-light: color.adjust(#2F7890, $lightness: 20%, $space: hsl);
$secondary-color: color.adjust(#CDABBE, $lightness: -10%, $space: hsl);
$error-color: #DF6C54;
$warning-color: #FBCF33;
$success-color: #AEBE39;
Expand All @@ -16,11 +18,11 @@ $max-mobile-width: 600px;
$min-desktop-width: $max-mobile-width + 1px;
$light-gray: #e4ddda;

$secondary-color-light: lighten($secondary-color, 20%);
$secondary-color-light: color.adjust($secondary-color, $lightness: 20%, $space: hsl);

$background-color: #F9F6F2;

$background-color-dark: darken($background-color, 5%);
$background-color-dark: color.adjust($background-color, $lightness: -5%, $space: hsl);

@mixin mobile {
@media only screen and (max-width: $max-mobile-width) {
Expand All @@ -35,37 +37,37 @@ $background-color-dark: darken($background-color, 5%);
}

@mixin default-button{
border-color: lighten($gray-color-light, 5%);
border-color: color.adjust($gray-color-light, $lightness: 5%, $space: hsl);
transition: none;
&, &:visited {
color: $gray-color-dark;
}
&:hover {
background-color: $secondary-color-light;
border-color: lighten($secondary-color, 10%);
border-color: color.adjust($secondary-color, $lightness: 10%, $space: hsl);
color: $dark-color;
}
&:active, &.active {
background-color: $secondary-color;
border-color: darken($secondary-color, 10%);
border-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl);
color: white;
}
}

@mixin title{
border-color: lighten($gray-color-light, 5%);
border-color: color.adjust($gray-color-light, $lightness: 5%, $space: hsl);
transition: none;
&, &:visited {
color: $gray-color-dark;
}
&:hover {
background-color: $secondary-color-light;
border-color: lighten($secondary-color, 10%);
border-color: color.adjust($secondary-color, $lightness: 10%, $space: hsl);
color: $dark-color;
}
&:active, &.active {
background-color: $secondary-color;
border-color: darken($secondary-color, 10%);
border-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl);
color: white;
}
}
Expand All @@ -77,7 +79,7 @@ $background-color-dark: darken($background-color, 5%);

// NEW ADDED STYLES
$button-color: #36b3a8;
$pri-btn-color-hover: darken($button-color, 7%);
$pri-btn-color-hover: color.adjust($button-color, $lightness: -7%, $space: hsl);

// body {
// font-family: Proxima Nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
Expand Down
30 changes: 16 additions & 14 deletions app/assets/stylesheets/overrides.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@use "sass:color";

@import 'globals';

@import '@spectre-org/spectre-css/src/mixins/_shadow';
@import './spectre-css/mixins/_shadow';

.selectize-input {
box-shadow: none;
Expand Down Expand Up @@ -29,18 +31,18 @@
.selectize-control.multi .selectize-input [data-value].active {
background-image: none;
background-repeat: no-repeat;
background-color: darken($secondary-color, 10%);
background-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl);
filter: none;
}

.selectize-control.multi .selectize-input > div.active,
.selectize-control.plugin-remove_button [data-value].active .remove {
border-color: darken($secondary-color, 20%);
border-color: color.adjust($secondary-color, $lightness: -20%, $space: hsl);
}

.selectize-control.multi .selectize-input > div,
.selectize-control.plugin-remove_button [data-value] .remove {
border-color: darken($secondary-color, 10%);
border-color: color.adjust($secondary-color, $lightness: -10%, $space: hsl);
}


Expand Down Expand Up @@ -141,27 +143,27 @@ form {

// Improve contrast on labels
.label {
background-color: lighten($gray-color-light, 1%);
background-color: color.adjust($gray-color-light, $lightness: 1%, $space: hsl);
&, &.label-success, &.label-warning, &.label-error, &.label-primary, &.label-secondary {
color: inherit;
}

&.label-primary { background-color: lighten($primary-color, 40%); }
&.label-primary { background-color: color.adjust($primary-color, $lightness: 40%, $space: hsl); }
&.label-secondary { background-color: $secondary-color-light; }
&.label-success { background-color: lighten($success-color, 20%); }
&.label-warning { background-color: lighten($warning-color, 20%); }
&.label-error { background-color: lighten($error-color, 20%); }
&.label-success { background-color: color.adjust($success-color, $lightness: 20%, $space: hsl); }
&.label-warning { background-color: color.adjust($warning-color, $lightness: 20%, $space: hsl); }
&.label-error { background-color: color.adjust($error-color, $lightness: 20%, $space: hsl); }
}

.toast {
color: inherit;
background-color: lighten($gray-color-light, 1%);
background-color: color.adjust($gray-color-light, $lightness: 1%, $space: hsl);

&.toast-primary { background-color: lighten($primary-color, 30%); }
&.toast-primary { background-color: color.adjust($primary-color, $lightness: 30%, $space: hsl); }
&.toast-secondary { background-color: $secondary-color-light; }
&.toast-success { background-color: lighten($success-color, 20%); }
&.toast-warning { background-color: lighten($warning-color, 20%); }
&.toast-error { background-color: lighten($error-color, 20%); }
&.toast-success { background-color: color.adjust($success-color, $lightness: 20%, $space: hsl); }
&.toast-warning { background-color: color.adjust($warning-color, $lightness: 20%, $space: hsl); }
&.toast-error { background-color: color.adjust($error-color, $lightness: 20%, $space: hsl); }

a {
text-decoration: none;
Expand Down
38 changes: 38 additions & 0 deletions app/assets/stylesheets/spectre-css/_accordions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
// Accordions
.accordion {
input:checked ~,
&[open] {
& .accordion-header > {
.icon:first-child {
transform: rotate(90deg);
}
}

& .accordion-body {
max-height: 50rem;
}
}

.accordion-header {
display: block;
padding: $unit-1 $unit-2;

.icon {
transition: transform .25s;
}
}

.accordion-body {
margin-bottom: $layout-spacing;
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
}

// Remove default details marker in Webkit
summary.accordion-header {
&::-webkit-details-marker {
display: none;
}
}
20 changes: 20 additions & 0 deletions app/assets/stylesheets/spectre-css/_animations.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Animations
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-$unit-8);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
43 changes: 43 additions & 0 deletions app/assets/stylesheets/spectre-css/_asian.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// Optimized for East Asian CJK
html:lang(zh),
html:lang(zh-Hans),
.lang-zh,
.lang-zh-hans {
font-family: $cjk-zh-hans-font-family;
}

html:lang(zh-Hant),
.lang-zh-hant {
font-family: $cjk-zh-hant-font-family;
}

html:lang(ja),
.lang-ja {
font-family: $cjk-jp-font-family;
}

html:lang(ko),
.lang-ko {
font-family: $cjk-ko-font-family;
}

:lang(zh),
:lang(ja),
.lang-cjk {
ins,
u {
border-bottom: $border-width solid;
text-decoration: none;
}

del + del,
del + s,
ins + ins,
ins + u,
s + del,
s + s,
u + ins,
u + u {
margin-left: .125em;
}
}
47 changes: 47 additions & 0 deletions app/assets/stylesheets/spectre-css/_autocomplete.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// Autocomplete
.form-autocomplete {
position: relative;

.form-autocomplete-input {
align-content: flex-start;
display: flex;
flex-wrap: wrap;
height: auto;
min-height: $unit-8;
padding: $unit-h;

&.is-focused {
@include control-shadow();
border-color: $primary-color;
}

.form-input {
border-color: transparent;
box-shadow: none;
display: inline-block;
flex: 1 0 auto;
height: $unit-6;
line-height: $unit-4;
margin: $unit-h;
width: auto;
}
}

.menu {
left: 0;
position: absolute;
top: 100%;
width: 100%;
}

&.autocomplete-oneline {
.form-autocomplete-input {
flex-wrap: nowrap;
overflow-x: auto;
}

.chip {
flex: 1 0 auto;
}
}
}
77 changes: 77 additions & 0 deletions app/assets/stylesheets/spectre-css/_avatars.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
// Avatars
.avatar {
@include avatar-base();
background: $primary-color;
border-radius: 50%;
color: rgba($light-color, .85);
display: inline-block;
font-weight: 300;
line-height: 1.25;
margin: 0;
position: relative;
vertical-align: middle;

&.avatar-xs {
@include avatar-base($unit-4);
}
&.avatar-sm {
@include avatar-base($unit-6);
}
&.avatar-lg {
@include avatar-base($unit-12);
}
&.avatar-xl {
@include avatar-base($unit-16);
}

img {
border-radius: 50%;
height: 100%;
position: relative;
width: 100%;
z-index: $zindex-0;
}

.avatar-icon,
.avatar-presence {
background: $bg-color-light;
bottom: 14.64%;
height: 50%;
padding: $border-width-lg;
position: absolute;
right: 14.64%;
transform: translate(50%, 50%);
width: 50%;
z-index: $zindex-0 + 1;
}

.avatar-presence {
background: $gray-color;
box-shadow: 0 0 0 $border-width-lg $light-color;
border-radius: 50%;
height: .5em;
width: .5em;

&.online {
background: $success-color;
}

&.busy {
background: $error-color;
}

&.away {
background: $warning-color;
}
}

&[data-initial]::before {
color: currentColor;
content: attr(data-initial);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: $zindex-0;
}
}
Loading

0 comments on commit 71a0b26

Please sign in to comment.