Skip to content
This repository has been archived by the owner on Apr 14, 2023. It is now read-only.

Commit

Permalink
fix - Apply various fixes and optimisations
Browse files Browse the repository at this point in the history
  • Loading branch information
sebastienrousseau committed May 27, 2021
1 parent b5fd502 commit 06825b9
Show file tree
Hide file tree
Showing 5 changed files with 344 additions and 63 deletions.
101 changes: 91 additions & 10 deletions src/components/button.styl
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

button, .button, [type=submit]
-highlight()
background: var(--background-color-300)
background: #F1F3F4
border:0
color: var(--button-color)
cursor: pointer
Expand All @@ -28,7 +28,7 @@ button, .button, [type=submit]
text-decoration: none
transition: all 150ms linear
&:hover
opacity: 0.5
opacity: 0.9
text-decoration: none
transition: all 150ms linear
&:focus
Expand All @@ -37,22 +37,31 @@ button, .button, [type=submit]
text-decoration: none
transition: all 150ms linear
&:disabled
color: var(--button-color)
cursor: default
color: var(--background-color-700)
cursor: not-allowed
opacity: .5
pointer-events: none
transition: all 150ms linear
&.primary
background: $primary
background: var(--color-primary)
color: var(--button-color)
cursor: pointer
transition: all 150ms linear
&:hover
opacity: 0.5
text-decoration: none
transition: all 150ms linear
&.secondary, &.info
background: $secondary
&.secondary
background: var(--color-secondary)
color: var(--button-color)
cursor: pointer
transition: all 150ms linear
&:hover
opacity: 0.5
text-decoration: none
transition: all 150ms linear
&.info
background: var(--color-info)
color: var(--button-color)
cursor: pointer
transition: all 150ms linear
Expand All @@ -61,7 +70,7 @@ button, .button, [type=submit]
text-decoration: none
transition: all 150ms linear
&.success
background: $success
background: var(--color-success)
color: var(--button-color)
cursor: pointer
transition: all 150ms linear
Expand All @@ -70,7 +79,7 @@ button, .button, [type=submit]
text-decoration: none
transition: all 150ms linear
&.error
background: $error
background: var(--color-error)
color: var(--button-color)
cursor: pointer
transition: all 150ms linear
Expand All @@ -79,7 +88,7 @@ button, .button, [type=submit]
transition: all 150ms linear
text-decoration: none
&.warning
background: $warning
background: var(--color-warning)
color: var(--button-color)
cursor: pointer
transition: all 150ms linear
Expand Down Expand Up @@ -163,4 +172,76 @@ button, .button, [type=submit]
width: 98.7%
line-height: 60px

button.primary-outline,
.button.primary-outline,
[type=submit].primary-outline
color #0047dd
background-color #fff
border 1px solid #0047dd
button.primary-outline:hover,
.button.primary-outline:hover,
[type=submit].primary-outline:hover
background-color #0047dd
color #fff
transition all 150ms linear
text-decoration none
opacity 1
button.secondary-outline,
.button.secondary-outline,
[type=submit].secondary-outline
color #0057a8
background-color #fff
border 1px solid #0057a8
button.secondary-outline:hover,
.button.secondary-outline:hover,
[type=submit].secondary-outline:hover
background-color #0057a8
color #fff
transition all 150ms linear
text-decoration none
opacity 1
button.success-outline,
.button.success-outline,
[type=submit].success-outline
color #2e6430
background-color #fff
border 1px solid #2e6430
button.success-outline:hover,
.button.success-outline:hover,
[type=submit].success-outline:hover
background-color #2e6430
color #fff
transition all 150ms linear
text-decoration none
opacity 1
button.error-outline,
.button.error-outline,
[type=submit].error-outline
color #b2081a
background-color #fff
border 1px solid #b2081a
button.error-outline:hover,
.button.error-outline:hover,
[type=submit].error-outline:hover
background-color #b2081a
color #fff
transition all 150ms linear
text-decoration none
opacity 1
button.warning-outline,
.button.warning-outline,
[type=submit].warning-outline
color #993900
background-color #fff
border 1px solid #993900
button.warning-outline:hover,
.button.warning-outline:hover,
[type=submit].warning-outline:hover
background-color #993900
color #fff
transition all 150ms linear
text-decoration none
opacity 1


/* @end */
70 changes: 49 additions & 21 deletions src/components/card.styl
Original file line number Diff line number Diff line change
@@ -1,27 +1,55 @@
/* @group Cards */
.card
background: transparent
border: 1px solid var(--border-color-300)
margin-bottom: golden-ratio rem

.card a
color: var(--color)
text-decoration: none

.card a:hover
text-decoration: none

background transparent
display flex
flex-direction column
margin-bottom golden-ratio rem
min-width 0
position relative
border 1px solid var(--border-color-300)
a
color var(--color)
text-decoration none
&:hover
text-decoration none
.card-content
padding: golden-ratio rem

padding golden-ratio rem
.card-body
flex 1 1 auto
padding golden-ratio rem golden-ratio rem
.card-title
margin-bottom golden-ratio rem
.card-subtitle
margin-top -(1-golden-ratio) rem
margin-bottom 0
.cards
display: flex
flex-wrap: wrap
justify-content: space-between

.card
flex: 0 1 (25% - golden-ratio) rem

display flex
flex-wrap wrap
justify-content space-between
.card, .card strong
color: var(--color)
color var(--color)
.card
box-shadow 0 3px 9px 0 var(--background-color-200)
transition .30s
border-radius 1rem
img
margin-bottom 0
.card.primary
background #c6cdff
border .0625rem solid #c6cdff
.card.secondary
background #a9d2ff
border .0625rem solid #a9d2ff
.card.success
background #a5dfa2
border .0625rem solid #a5dfa2
.card.info
background #a9d2ff
border .0625rem solid #a9d2ff
.card.warning
background #ffc286
border .0625rem solid #ffc286
.card.error
background #ffc0ad
border .0625rem solid #ffc0ad
/* @end */
107 changes: 90 additions & 17 deletions src/components/code.styl
Original file line number Diff line number Diff line change
@@ -1,27 +1,100 @@
/* @group Code */
pre,
code.error,
code.info,
code.primary,
code.secondary,
code.success,
code.tertiary,
code.warning
border 0
margin-top 0
position relative

code,
kbd,
pre,
samp
background: var(--background-color-100)
color: var(--color)
font-family: "Consolas", "Monaco", "Menlo", monospace
font-size: golden-font-size-base rem
margin: (golden-ratio)rem 0
padding: (golden-ratio)rem
background var(--background-color-100)
color var(--color)
font-family "Consolas", "Monaco", "Menlo", monospace
font-size golden-font-size-base rem
margin (golden-ratio)rem 0
padding (golden-ratio)rem

pre
margin-bottom: 0
overflow: auto
-ms-overflow-style: scrollbar
margin-bottom 0
overflow auto

pre, code
direction ltr
display block
text-align left
page-break-inside avoid
white-space pre-wrap
word-wrap break-word

code
padding: golden-font-size-small rem
border-bottom 0.01rem solid var(--border-color-300)
border-left 0.3rem solid var(--border-color-300)
border-right 0.01rem solid var(--border-color-300)
border-top 0.01rem solid var(--border-color-300)
box-shadow 0 12px 30px -9px var(--background-color-200)
&.primary
background var(--color-bg-primary)
border-bottom 0.01rem solid var(--color-primary)
border-left 0.3rem solid var(--color-primary)
border-right 0.01rem solid var(--color-primary)
border-top 0.01rem solid var(--color-primary)
box-shadow 0 12px 30px -9px var(--background-color-200)
color var(--color-primary)
&.secondary
background var(--color-bg-secondary)
border-bottom 0.01rem solid var(--color-secondary)
border-left 0.3rem solid var(--color-secondary)
border-right 0.01rem solid var(--color-secondary)
border-top 0.01rem solid var(--color-secondary)
box-shadow 0 12px 30px -9px var(--background-color-200)
color var(--color-secondary)
&.tertiary
background var(--color-bg-tertiary)
border-bottom 0.01rem solid var(--color-tertiary)
border-left 0.3rem solid var(--color-tertiary)
border-right 0.01rem solid var(--color-tertiary)
border-top 0.01rem solid var(--color-tertiary)
box-shadow 0 12px 30px -9px var(--background-color-200)
color var(--color-tertiary)
&.success
background var(--color-bg-success)
border-bottom 0.01rem solid var(--color-success)
border-color var(--color-success)
border-left 0.3rem solid var(--color-success)
border-right 0.01rem solid var(--color-success)
border-top 0.01rem solid var(--color-success)
box-shadow 0 12px 30px -9px var(--background-color-200)
color var(--color-success)
&.info
background var(--color-bg-info)
border-bottom 0.01rem solid var(--color-info)
border-left 0.3rem solid var(--color-info)
border-right 0.01rem solid var(--color-info)
border-top 0.01rem solid var(--color-info)
box-shadow 0 12px 30px -9px var(--background-color-200)
color var(--color-info)
&.warning
background var(--color-bg-warning)
border-bottom 0.01rem solid var(--color-warning)
border-left 0.3rem solid var(--color-warning)
border-right 0.01rem solid var(--color-warning)
border-top 0.01rem solid var(--color-warning)
box-shadow 0 12px 30px -9px var(--background-color-200)
color var(--color-warning)
&.error
background var(--color-bg-danger)
border-bottom 0.01rem solid var(--color-danger)
border-left 0.3rem solid var(--color-danger)
border-right 0.01rem solid var(--color-danger)
border-top 0.01rem solid var(--color-danger)
box-shadow 0 12px 30px -9px var(--background-color-200)
color var(--color-error)

pre, code
direction: ltr;
display: block
text-align: left;
white-space: pre-wrap
word-wrap: break-word
/* @end */
Loading

0 comments on commit 06825b9

Please sign in to comment.