From aa1d3c6943b37d6699699f4119c8941c0eaf7bd8 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Mon, 2 Sep 2019 07:58:03 +0530 Subject: [PATCH 01/34] :art: New vector icon buttons --- assets/css/styles.scss | 26 ++++++++++++++++++++++++++ components/history.vue | 28 +++++++++++++++------------- pages/index.vue | 13 +++++++++++-- 3 files changed, 52 insertions(+), 15 deletions(-) diff --git a/assets/css/styles.scss b/assets/css/styles.scss index 541bbbe4c..e3978ca79 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -78,6 +78,9 @@ body.sticky-footer footer { } button { + display: inline-flex; + align-items: center; + justify-content: center; margin: 4px; padding: 8px 16px; border-radius: 4px; @@ -88,6 +91,16 @@ button { cursor: pointer; transition: all 0.2s ease-in-out; + &.icon { + background-color: var(--bg-color); + color: var(--ac-color); + fill: var(--ac-color); + + span { + margin-left: 8px; + } + } + &:not([disabled]):hover, &:not(.disabled):focus { background-color: transparent; @@ -231,6 +244,11 @@ input[type="checkbox"] { background-color: var(--err-color); color: #b2b2b2; cursor: default; + + &.icon { + color: #b2b2b2; + fill: #b2b2b2; + } } label { @@ -258,6 +276,10 @@ ol li { align-items: center; } +.show-on-small-screen { + display: flex; +} + @media (max-width: $responsiveWidth) { header div { display: flex; @@ -283,6 +305,10 @@ ol li { .hide-on-small-screen { display: none; } + + .show-on-small-screen { + display: inline-flex; + } } #installPWA { diff --git a/components/history.vue b/components/history.vue index dca3a8993..cdbe1dcf8 100644 --- a/components/history.vue +++ b/components/history.vue @@ -25,18 +25,20 @@ -
  • - - -
  • -
  • - - -
  • +
    +
  • + + +
  • +
  • + + +
  • +