Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Squashed commit of the following:

Browse Source 
commit 4d88df1c381c4136cfe4780b6b5464d9c984bb31
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Wed Oct 30 14:24:53 2024 -0400

    fixing active/focus states

commit 630f74db6365625af210de81d577d43945f62df4
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Wed Oct 23 13:25:14 2024 -0400

    sign-up/login/debug menu updates

commit f85ef1c58e367219923c46aeebe77d1aa846b6f3
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Tue Oct 15 13:56:36 2024 -0400

    more color standardization

commit cd2ee3350fc51016cc75fb799debeefa0b1d9b64
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Tue Oct 15 13:39:02 2024 -0400

    updates per comments

commit e91371522bb9a6dae5c6d02eb6f16f0b632f7a24
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Fri Oct 4 14:25:45 2024 -0400

    class selection active state

commit 4fcdca1eb07eb67aacd84feb1c9357d52fd6f23f
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Thu Oct 3 14:31:00 2024 -0400

    fixing a few more buttons

commit 475e21aae7733cfa072f828c559cc0930f0ad878
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Wed Oct 2 15:57:25 2024 -0400

    line-heights converted to unitless multipliers

commit c5dca257274a60b02e1f12e3c6daf103cec53096
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Fri Sep 27 13:48:20 2024 -0400

    second pass

commit 685f4d4d64b8b234afbb702d1b8a52d4670d3825
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Thu Sep 26 16:58:59 2024 -0400

    first pass
This commit is contained in:
Kalista Payne
2024-11-21 12:37:02 -06:00
parent 529f856ab9
commit a36114e904
16 changed files with 234 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/assets/scss/button.scss
+78 -42
View File
@@ -3,9 +3,9 @@
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1.71;
border: 1px solid transparent;
padding: 4px 12px;
line-height: 1.714;
border: 2px solid transparent;
padding: 2px 12px;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
color: $white;
@@ -19,7 +19,7 @@
}
&:focus {
border-color: $purple-400;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
&:active, &.active:not(.btn-flat) {
@@ -30,9 +30,9 @@
cursor: default;
color: $gray-50;
opacity: 0.75;
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
box-shadow: none;
background-color: $gray-700;
border: 1px solid transparent;
border: 2px solid transparent;
.svg {
color: $gray-300;
@@ -40,7 +40,7 @@
}
&.with-icon {
height: 2rem; // otherwise would something set the height to 33px
height: 32px; // otherwise would something set the height to 33px
display: flex;
flex-direction: row;
align-items: center;
@@ -48,40 +48,47 @@
}
.btn-front {
border: none !important;
font-size: 16px;
line-height: 1.5;
padding: 7.5px 15.5px;
padding: 2px 17px;
&:hover {
border: none !important;
}
}
.btn-primary {
background: $purple-200;
border: 1px solid transparent;
border: 2px solid transparent;
line-height: 1.714;
--icon-color: #{$purple-500};
&:focus {
background: $purple-200;
border-color: $purple-400;
border: 2px solid $purple-400;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
--icon-color: #{$white};
}
&:not(:disabled):not(.disabled) {
&:hover {
background: #5d3b9c;
border: 1px solid transparent;
background: $purple-200;
border: 2px solid transparent;
--icon-color: #{$white};
}
&:active, &.active {
background: $purple-200;
border: 1px solid transparent;
border: 2px solid transparent;
box-shadow: none;
--icon-color: #{$white};
}
&:active:focus, &.active:focus {
box-shadow: none;
border-color: $purple-400;
border: 2px solid $purple-400;
}
}
@@ -97,39 +104,43 @@
.show > .btn-secondary.dropdown-toggle:not(.btn-success)
{
background: $white;
border: 1px solid transparent;
border: 2px solid transparent;
color: $gray-50;
--icon-color: #{$gray-200};
&:focus, &:active {
color: $gray-50;
background: $white;
border-color: $purple-400;
border: 2px solid $purple-400;
color: $gray-50;
--icon-color: #{$purple-300};
}
&:not(:disabled):not(.disabled) {
&:active, &.active {
background: $white;
border: 2px solid $purple-400;
color: $purple-300;
--icon-color: #{$purple-300};
&:focus {
color: $purple-300;
box-shadow: none;
border-color: $purple-400;
border: 2px solid $purple-400;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
&:active {
box-shadow: none;
}
background: $white;
border: 1px solid transparent;
}
&:hover {
color: $purple-300;
background: $white !important;
border: 1px solid transparent;
border: 2px solid transparent;
--icon-color: #{$purple-300};
.svg {
@@ -151,91 +162,116 @@
.btn-danger {
background: $maroon-100;
border: 1px solid transparent;
border: 2px solid transparent;
box-shadow: 0 1px 3px 0 rgba($black, 0.16), 0 1px 3px 0 rgba($black, 0.24);
&:hover:not(:disabled):not(.disabled) {
background: #e14e4e;
border: 1px solid transparent;
background: $maroon-100;
border: 2px solid transparent;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
&:focus {
background: $maroon-100;
border-color: $purple-400;
border: 2px solid $purple-400;
}
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
box-shadow: none;
border-color: $purple-400;
border: 2px solid $purple-400;
}
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
background: $maroon-100;
border: 1px solid transparent;
border: 2px solid $purple-400;
}
}
.btn-warning {
background: $orange-10;
box-shadow: 0 1px 3px 0 rgba($black, 0.16), 0 1px 3px 0 rgba($black, 0.24);
color: $white !important;
&:hover:not(:disabled):not(.disabled) {
background: $orange-100;
background: $orange-10;
color: $white;
}
&:focus {
background: $orange-10;
border-color: $purple-400;
border: 2px solid $purple-400;
}
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
border: 2px solid $purple-400;
box-shadow: none;
border-color: $purple-400;
}
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
background: $orange-10;
box-shadow: none;
}
}
.btn-success {
background: $green-50;
border: 1px solid transparent;
border: 2px solid transparent;
&:hover:not(:disabled):not(.disabled) {
background: #32bd8a;
border: 1px solid transparent;
background: $green-50;
border: 2px solid transparent;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
&:focus {
background: $green-50;
border-color: $purple-400;
border: 2px solid $purple-400;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
border: 2px solid $purple-400;
box-shadow: none;
border-color: $purple-400;
}
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
background: $green-50;
border: 1px solid transparent;
border: 2px solid $purple-400;
box-shadow: none;
}
}
.btn-info {
background: $blue-50;
border: 2px solid transparent;
box-shadow: 0 1px 3px 0 rgba($black, 0.16), 0 1px 3px 0 rgba($black, 0.24);
&:disabled {
background: $blue-50;
box-shadow: none;
}
&:hover {
border: 2px solid transparent;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
&:focus {
background: $blue-100;
border: 2px solid $purple-400;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
&:hover:not(:disabled):not(.disabled) {
background-color: $blue-100;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
&:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
background: $blue-50;
background: $blue-100;
border: 2px solid $purple-400;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
}
@@ -244,7 +280,7 @@
width: 100%;
padding: 8px;
font-size: 14px;
line-height: 1.43;
line-height: 1.714;
font-weight: bold;
text-align: center;
background: $gray-500;
@@ -268,6 +304,6 @@
.btn-small {
font-size: 12px;
line-height: 1.33;
padding: 4px 8px;
line-height: 2;
padding: 2px 2px;
}
website/client/src/assets/scss/dropdown.scss
+9 -5
View File
@@ -1,8 +1,9 @@
.dropdown > .btn {
padding: 0.219rem 0.75rem;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.714;
padding: 2px 12px;
}
.dropdown-toggle:hover {
@@ -33,10 +34,10 @@
}
.dropdown-menu {
padding: 0px;
border: none;
border: transparent;
border-radius: 2px;
box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
padding: 0;
}
@@ -113,6 +114,10 @@
}
.dropdown-icon-item {
line-height: 1;
padding-top: 2px !important;
padding-bottom: 2px !important;
.svg-icon {
margin: 0px 16px 0px 0px;
vertical-align: middle;
@@ -128,7 +133,6 @@
.dropdown-toggle {
width: 100% !important;
height: 32px;
text-align: left;
}
website/client/src/components/achievements/chooseClass.vue
+5
View File
@@ -105,6 +105,11 @@
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.btn-primary:active {
border: 2px solid $purple-400 !important;
box-shadow: none !important;
}
.class-badge {
$badge-size: 32px;
website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
+1 -1
View File
@@ -7,7 +7,7 @@
:class="{'open': expand}"
@click="expand = !expand"
>
Priviliges, Gem Balance
Privileges, Gem Balance
</h3>
</div>
<div
website/client/src/components/appFooter.vue
+57 -27
View File
@@ -186,7 +186,7 @@
</div>
<div class="donate-button">
<button
class="button btn-contribute"
class="btn button btn-secondary btn-contribute"
@click="donate()"
>
<div class="text">
@@ -309,7 +309,7 @@
<div class="my-2">
Time Traveling! It is {{ new Date().toLocaleDateString() }}
<a
class="btn btn-warning btn-small"
class="btn btn-small"
@click="resetTime()"
>
Reset
@@ -341,7 +341,7 @@
</button>
<div
v-if="debugMenuShown"
class="debug-toggle debug-group"
class="btn debug-toggle debug-group"
>
<div class="debug-pop">
<a
@@ -512,7 +512,14 @@ li {
grid-area: debug-pop;
}
.time-travel { grid-area: time-travel;}
.time-travel {
grid-area: time-travel;
a:hover {
text-decoration: none !important;
}
}
footer {
background-color: $gray-500;
@@ -584,42 +591,65 @@ h3 {
}
.debug {
margin-top: 16px;
border: 2px solid transparent;
box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
display: flex;
justify-content: center;
margin-top: 16px;
padding: 2px 12px;
&:hover {
box-shadow: 0 3px 6px 0 rgba($black, 0.12), 0 3px 6px 0 rgba($black, 0.24);
}
&:focus {
border: 2px solid $purple-400 !important;
box-shadow: 0 3px 6px 0 rgba($black, 0.12), 0 3px 6px 0 rgba($black, 0.24);
}
:active {
border: 2px solid $purple-600 !important;
box-shadow: none;
}
}
.debug-group {
border-radius: 4px;
padding: 16px;
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
font-weight: 700;
background-color: $gray-600;
border: 2px solid transparent;
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
font-weight: 700;
padding: 8px 16px;
.btn {
margin: 2px;
}
a:hover {
border: 2px solid transparent;
box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
text-decoration: none !important;
}
}
.btn-small {
background-color: $maroon-100;
border: 2px solid transparent;
color: $white !important;
line-height: 18px;
&:hover {
background-color: $maroon-100;
text-decoration: none !important;
border: 2px solid $maroon-100;
}
}
.btn-secondary {
padding: 2px 12px;
}
.btn-secondary a:hover {
text-decoration: none !important;
}
.btn-contribute {
background: $white;
border-radius: 2px;
width: 175px;
height: 32px;
color: $gray-50;
text-align: center;
vertical-align: middle;
padding: 0;
margin: 0;
&:hover {
color:$purple-300;
box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
&:active:not(:disabled) {
color:$purple-300;
border: 1px solid $purple-400;
box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
}
}
border: 2px solid transparent;
a {
display: flex;
website/client/src/components/challenges/leaveChallengeModal.vue
+5 -1
View File
@@ -25,9 +25,13 @@
</b-modal>
</template>
<style scoped>
<style scoped lang="scss">
.modal-body {
padding-bottom: 2em;
.btn {
margin: 0px 2px;
}
}
</style>
website/client/src/components/settings/subscription.vue
+2
View File
@@ -429,6 +429,7 @@
}
.btn-update-card {
line-height: 1.714;
border-radius: 4px;
font-size: 14px;
padding: 4px 12px;
@@ -647,6 +648,7 @@
border-radius: 8px;
box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
width: 448px;
background-color: $white;
}
.svg-amazon-pay {
website/client/src/components/shops/buyModal.vue
+12 -7
View File
@@ -378,7 +378,7 @@
height: 40px;
border-radius: 2px;
background-color: $white;
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
margin-right: 24px;
input {
@@ -462,17 +462,17 @@
&.gems {
color: $green-10;
background-color: rgba(36, 204, 143, 0.15);
background-color: rgba($green-100, 0.15);
}
&.gold {
color: $yellow-5;
background-color: rgba(255, 190, 93, 0.15);
background-color: rgba($yellow-100, 0.15);
}
&.hourglasses {
color: $hourglass-color;
background-color: rgba(41, 149, 205, 0.15);
background-color: rgba($blue-10, 0.15);
}
}
@@ -516,11 +516,16 @@
button.btn.btn-primary {
margin-top: 16px;
padding: 4px 16px;
height: 32px;
padding: 2px 12px;
line-height: 1.714;
&:focus {
border: 2px solid black;
border: 2px solid $purple-400;
}
&:active {
border: 2px solid $purple-400 !important;
box-shadow:none;
}
}
website/client/src/components/shops/market/sellModal.vue
+8 -3
View File
@@ -297,11 +297,16 @@
button.btn.btn-primary {
margin-top: 16px;
padding: 4px 16px;
height: 32px;
padding: 2px 12px;
line-height: 1.714;
&:focus {
border: 2px solid black;
border: 2px solid $purple-400;
}
&:active {
border: 2px solid $purple-400;
box-shadow: none;
}
.balance {
website/client/src/components/shops/quests/buyQuestModal.vue
+13 -8
View File
@@ -198,7 +198,7 @@
top: 25px;
border-radius: 8px;
background-color: $gray-600;
box-shadow: 0 2px 16px 0 rgba(26, 24, 29, 0.32);
box-shadow: 0 2px 16px 0 rgba($black, 0.32);
display: flex;
align-items: center;
flex-direction: column;
@@ -208,12 +208,17 @@
}
button.btn.btn-primary {
margin-top: 14px;
padding: 4px 16px;
height: 32px;
margin-top: 16px;
padding: 2px 12px;
line-height: 1.714;
&:focus {
border: 2px solid black;
border: 2px solid $purple-400;
}
&:active {
border: 2px solid $purple-400;
box-shadow: none;
}
}
@@ -249,7 +254,7 @@
&.gems {
color: $green-10;
background-color: rgba(36, 204, 143, 0.15);
background-color: rgba($green-100, 0.15);
line-height: 1.4;
margin: 0 0 0 -4px;
border-radius: 20px;
@@ -257,7 +262,7 @@
&.gold {
color: $yellow-5;
background-color: rgba(255, 190, 93, 0.15);
background-color: rgba($yellow-100, 0.15);
line-height: 1.4;
margin: 0 0 0 -4px;
border-radius: 20px;
@@ -265,7 +270,7 @@
&.hourglasses {
color: $hourglass-color;
background-color: rgba(41, 149, 205, 0.15);
background-color: rgba($blue-10, 0.15);
line-height: 1.4;
margin: 0 0 0 -4px;
border-radius: 20px;
website/client/src/components/static/header.vue
+4 -1
View File
@@ -152,8 +152,11 @@
}
.btn-primary.pull-right {
height: 2.5em;
line-height: 2.25;
margin: auto 0px auto auto;
&:focus, :active {
border: 2px solid $purple-400;
}
}
nav.navbar {
website/client/src/components/static/home.vue
+11 -3
View File
@@ -552,8 +552,16 @@
}
.sign-up {
border: 2px solid transparent;
box-shadow: 0 1px 3px 0 rgba($black, 0.16), 0 1px 3px 0 rgba($black, 0.24);
padding-top: 11px;
padding-bottom: 11px;
&:focus, &:active {
background-color: $blue-50;
border: 2px solid $purple-400;
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
}
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
@@ -650,9 +658,9 @@
.btn-primary {
width: 411px;
height: 48px;
border-radius: 2px;
border-radius: 4px;
background-color: $purple-400;
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.24), 0 1px 4px 0 rgba(26, 24, 29, 0.16);
box-shadow: 0 2px 2px 0 rgba($black, 0.24), 0 1px 4px 0 rgba($black, 0.16);
margin-bottom: 5em;
}
@@ -669,7 +677,7 @@
&:hover {
background-color: $purple-50;
box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12);
box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12);
}
}
website/client/src/components/tasks/modal-controls/selectMulti.vue
+1 -1
View File
@@ -88,7 +88,7 @@ $itemHeight: 2rem;
.inline-dropdown {
&.select-multi .dropdown-toggle {
height: auto;
line-height: 1.571;
padding-bottom: 0px;
}
}
website/client/src/components/tasks/taskModal.vue
+21 -7
View File
@@ -651,9 +651,9 @@
input, textarea {
transition-property: border-color, box-shadow, color, background;
background-color: rgba(255, 255, 255, 0.5);
background-color: rgba($white, 0.5);
&:focus:not(:disabled), &:active:not(:disabled), &:hover:not(:disabled) {
background-color: rgba(255, 255, 255, 0.75);
background-color: rgba($white, 0.75);
}
}
@@ -810,11 +810,7 @@
margin-right: 16px;
color: $blue-10;
}
.btn-footer {
height: 2rem;
}
}
}
.weekday-check {
margin-left: 0px;
@@ -884,6 +880,24 @@
margin-bottom: 0;
}
}
.disabled {
background-color: $white;
border: 2px solid transparent;
color: $gray-200;
line-height: 1.714;
box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
&:focus {
background-color: $white;
border: 2px solid $purple-400;
box-shadow: none;
}
&:active {
box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
}
}
}
@media only screen and (max-width: 768px) {
website/client/src/components/ui/filterDropdown.vue
+3 -5
View File
@@ -12,7 +12,9 @@
@select="selectItem($event)"
>
<template #item="{ item }">
<span :class="{'dropdown-icon-item': withIcon}">
<span
:class="{'dropdown-icon-item': withIcon}"
>
<slot
name="item"
:item="item"
@@ -54,7 +56,3 @@ export default {
},
};
</script>
<style scoped lang="scss">
</style>
website/client/src/pages/private-messages.vue
+4 -4
View File
@@ -446,7 +446,6 @@
padding: 1.5rem;
.guidelines {
height: 32px;
font-size: 12px;
font-weight: normal;
font-style: normal;
@@ -459,9 +458,10 @@
}
button {
height: 40px;
border-radius: 2px;
border-radius: 4px;
line-height: 1.714;
margin-left: 1.5rem;
padding: 2px 12px;
&.disabled {
cursor: default;
@@ -540,7 +540,7 @@
z-index: 1;
pointer-events: none;
box-shadow: 0 3px 12px 0 rgba(26, 24, 29, 0.24);
box-shadow: 0 3px 12px 0 rgba($black, 0.24);
}
.center-avatar {