fix - Apply various fixes and optimisations

Author: sebastienrousseau

src/components/button.styl

@@ -4,7 +4,7 @@
 
 button, .button, [type=submit]
   -highlight()
-  background: var(--background-color-300)
+  background: #F1F3F4
   border:0
   color: var(--button-color)
   cursor: pointer
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 */

src/components/card.styl

@@ -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 */

src/components/code.styl

@@ -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 */