From 03ada7326cafde3ea6f6957c2a2be884346a9343 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 15 Dec 2019 22:03:20 +0100 Subject: [PATCH] form elements, buttons --- .gitignore | 2 +- pages/_docs/buttons.md | 31 ++++++++++------------ pages/_includes/cards/invoices.html | 2 +- pages/_includes/cards/project-kanban.html | 2 +- pages/_includes/cards/subscribe.html | 2 +- pages/_includes/cards/tabs.html | 8 +----- pages/_includes/forms/form-elements-1.html | 16 ++--------- pages/_includes/forms/form-elements-2.html | 11 ++------ pages/_includes/parts/input-icon.html | 14 ++-------- pages/_includes/ui/input-icon.html | 18 +++++++++++++ pages/dropdowns.html | 30 ++++++++++----------- scss/_variables.scss | 2 +- scss/ui/_buttons.scss | 6 +++-- 13 files changed, 63 insertions(+), 81 deletions(-) create mode 100644 pages/_includes/ui/input-icon.html diff --git a/.gitignore b/.gitignore index 98667d0d8..36908154b 100644 --- a/.gitignore +++ b/.gitignore @@ -19,5 +19,5 @@ tmp/ /resources/ /svg-tmp/ /components/ -/dist +/dist/* /demo diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index 108ff918f..dbb5b2e4a 100644 --- a/pages/_docs/buttons.md +++ b/pages/_docs/buttons.md @@ -115,7 +115,7 @@ Create block level buttons—those that span the full width of a parent—by add Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons. -Icons can be found [**here** {% include_cached ui/icon.html icon="search" class="icon-sm" %}](/docs/icons.html#icons) +Icons can be found [**here**](/docs/icons.html#icons) {% example html wrapper=btn-list %} -
- Dropdown link - Dropdown link -
+ {% include_cached ui/dropdown-menu.html %}
-
- Dropdown link - Dropdown link -
+ {% include_cached ui/dropdown-menu.html %}
-
- Dropdown link - Dropdown link -
+ {% include_cached ui/dropdown-menu.html %}
{% endexample %} @@ -297,9 +288,15 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment. ### Button with avatar -{% example html%} -{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar -{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar -{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar +{% example html wrapper=btn-list %} + + {% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar + + + {% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar + + + {% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar + {% endexample %} diff --git a/pages/_includes/cards/invoices.html b/pages/_includes/cards/invoices.html index 91c4be70f..6fd7f51eb 100644 --- a/pages/_includes/cards/invoices.html +++ b/pages/_includes/cards/invoices.html @@ -42,7 +42,7 @@ - {% include ui/dropdown-menu.html %} + {% include_cached ui/dropdown-menu.html %} diff --git a/pages/_includes/cards/project-kanban.html b/pages/_includes/cards/project-kanban.html index fd295fd6c..de5848094 100644 --- a/pages/_includes/cards/project-kanban.html +++ b/pages/_includes/cards/project-kanban.html @@ -10,7 +10,7 @@ - {% include ui/dropdown-menu.html right=true %} + {% include_cached ui/dropdown-menu.html right=true %}
{{ include.title | default: 'Task Title' }}{% if include.badge %} {{ include.badge }}{% endif %}
diff --git a/pages/_includes/cards/subscribe.html b/pages/_includes/cards/subscribe.html index 3f5cc5aa8..08b534460 100644 --- a/pages/_includes/cards/subscribe.html +++ b/pages/_includes/cards/subscribe.html @@ -27,7 +27,7 @@ - {% include ui/dropdown-menu.html right=true %} + {% include_cached ui/dropdown-menu.html right=true %}
diff --git a/pages/_includes/cards/tabs.html b/pages/_includes/cards/tabs.html index 9166c4b46..5892142f6 100644 --- a/pages/_includes/cards/tabs.html +++ b/pages/_includes/cards/tabs.html @@ -32,13 +32,7 @@ {% if include.dropdown %}
  • -
    - Action - Another action - Something else here -
    - Separated link -
    + {% include_cached ui/dropdown-menu.html %}
    • {% endif %} {% if include.settings %} diff --git a/pages/_includes/forms/form-elements-1.html b/pages/_includes/forms/form-elements-1.html index b343639f4..f9b4110a4 100644 --- a/pages/_includes/forms/form-elements-1.html +++ b/pages/_includes/forms/form-elements-1.html @@ -42,20 +42,8 @@
    - -
    - - News - - - Messages - -
    - - Edit Profile - -
    + + {% include_cached ui/dropdown-menu.html right=true %}
    diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html index 9f156a26e..457bc30a7 100644 --- a/pages/_includes/forms/form-elements-2.html +++ b/pages/_includes/forms/form-elements-2.html @@ -22,17 +22,10 @@
    - -
    - Action - Another action - Something else here - - Separated link -
    + {% include_cached ui/dropdown-menu.html %}
    diff --git a/pages/_includes/parts/input-icon.html b/pages/_includes/parts/input-icon.html index d10caf43d..f04982a35 100644 --- a/pages/_includes/parts/input-icon.html +++ b/pages/_includes/parts/input-icon.html @@ -1,15 +1,5 @@
    -
    - - - {% include_cached ui/icon.html icon="search" %} - -
    -
    - - {% include_cached ui/icon.html icon="user" %} - - -
    + {% include ui/input-icon.html class="mb-3" %} + {% include ui/input-icon.html class="mb-3" prepend=true placeholder="Username" %}
    diff --git a/pages/_includes/ui/input-icon.html b/pages/_includes/ui/input-icon.html new file mode 100644 index 000000000..fb01826f9 --- /dev/null +++ b/pages/_includes/ui/input-icon.html @@ -0,0 +1,18 @@ +{% assign icon = include.icon | default: 'search' %} +{% capture addon %} + + {% include_cached ui/icon.html icon=icon %} + +{% endcapture %} + +
    + {% if include.prepend %} + {{ addon }} + {% endif %} + + + + {% unless include.prepend %} + {{ addon }} + {% endunless %} +
    \ No newline at end of file diff --git a/pages/dropdowns.html b/pages/dropdowns.html index 5e92bd1ac..30ec5f4c8 100644 --- a/pages/dropdowns.html +++ b/pages/dropdowns.html @@ -3,18 +3,18 @@ title: Dropdowns page-title: Dropdowns --- -{% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %} -{% include ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %} +{% include_cached ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %} diff --git a/scss/_variables.scss b/scss/_variables.scss index 12bb4ec3a..03e1dc21f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -197,7 +197,7 @@ $badge-empty-size: .5rem !default; //buttons $input-btn-line-height: (22/15) !default; -$input-btn-font-size: 15px !default; +$input-btn-font-size: $font-size-base !default; $input-btn-font-size-sm: 12px !default; $input-btn-padding-x-sm: 6px !default; diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss index f856af910..0d8552004 100644 --- a/scss/ui/_buttons.scss +++ b/scss/ui/_buttons.scss @@ -52,8 +52,10 @@ } .btn-icon { + min-width: add($btn-line-height * $btn-font-size + $btn-padding-y * 2, $btn-border-width * 2); + .icon { - margin: 0 -.5em; + margin: 0 -1em; } } @@ -64,7 +66,7 @@ .btn-secondary { @include button-variant(#fff, $border-color, $body-color); - background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); + background-image: linear-gradient(-180deg, transparent, $gray-100 90%); } .btn-square {