Skip to content

Commit

Permalink
grid fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@codecalm
codecalm committed Nov 2, 2020
1 parent 45ee44a commit 6409a25
Show file tree
Hide file tree
Showing 12 changed files with 151 additions and 130 deletions.
2 changes: 1 addition & 1 deletion src/pages/_includes/ui/dropdown-menu-all.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h6 class="dropdown-header">Dropdown header</h6>
<div class="dropdown-divider"></div>

{% for person in site.data.people limit: 3 %}
<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id size="sm" class="rounded mr-2" %} {{ person.full_name }}</a>
<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id class="rounded mr-2" size="xs" %} {{ person.full_name }}</a>
{% endfor %}

<div class="dropdown-divider"></div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/_includes/ui/dropdown-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% endfor %}
{% elsif include.people %}
{% for person in site.data.people limit: 5 %}
<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id class="rounded mr-2" %} {{ person.full_name }}</a>
<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id class="rounded mr-2" size="xs" %} {{ person.full_name }}</a>
{% endfor %}
{% elsif include.type == 'text' %}

Expand Down
2 changes: 1 addition & 1 deletion src/pages/_includes/ui/empty.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{% endif %}
</div>

<p class="empty-title h3">{{ include.title | default: "No results found" }}</p>
<p class="empty-title">{{ include.title | default: "No results found" }}</p>
<p class="empty-subtitle text-muted">
{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
</p>
Expand Down
172 changes: 90 additions & 82 deletions src/pages/buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,86 +4,94 @@
menu: base.buttons
---

<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Standard Buttons</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html show-link=true show-states=true %}
</div>
</div>

<div class="card">
<div class="card-header">
<h3 class="card-title">Outline Buttons</h3>
</div>
<div class="card-body">
<p>Use <code>.btn-outline-*</code> class for outline buttons.
</p>
{% include parts/buttons-table.html prefix="btn-outline-" show-states=true %}
</div>
</div>

<div class="card">
<div class="card-header">
<h3 class="card-title">Ghost Buttons</h3>
</div>
<div class="card-body">
<p>Use <code>.btn-ghost-*</code> class for ghost buttons.
</p>
{% include parts/buttons-table.html prefix="btn-ghost-" show-states=true %}
</div>
</div>

<div class="card">
<div class="card-header">
<h3 class="card-title">Square Buttons</h3>
</div>
<div class="card-body">
<p>Use <code>.btn-square</code> class for square buttons.
</p>
{% include parts/buttons-table.html class="btn-square" %}
</div>
</div>

<div class="card">
<div class="card-header">
<h3 class="card-title">Pill Buttons</h3>
</div>
<div class="card-body">
<p>Use <code>.btn-pill</code> class for pill buttons.
</p>
{% include parts/buttons-table.html class="btn-pill" %}
</div>
</div>

<div class="card">
<div class="card-header">
<h3 class="card-title">Extra colors</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.colors hide-labels=true icon="star" auto-columns=true %}
</div>
</div>

<div class="card">
<div class="card-header">
<h3 class="card-title">Icon buttons</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.socials hide-labels=true icon-only=true auto-columns=true %}
</div>
</div>

<div class="card">
<div class="card-header">
<h3 class="card-title">Social colors</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.socials hide-labels=true icon=true auto-columns=true %}
</div>
</div>
</div>
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Standard Buttons</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html show-link=true show-states=true %}
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Outline Buttons</h3>
</div>
<div class="card-body">
<p>Use <code>.btn-outline-*</code> class for outline buttons.
</p>
{% include parts/buttons-table.html prefix="btn-outline-" show-states=true %}
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Ghost Buttons</h3>
</div>
<div class="card-body">
<p>Use <code>.btn-ghost-*</code> class for ghost buttons.
</p>
{% include parts/buttons-table.html prefix="btn-ghost-" show-states=true %}
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Square Buttons</h3>
</div>
<div class="card-body">
<p>Use <code>.btn-square</code> class for square buttons.
</p>
{% include parts/buttons-table.html class="btn-square" %}
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Pill Buttons</h3>
</div>
<div class="card-body">
<p>Use <code>.btn-pill</code> class for pill buttons.
</p>
{% include parts/buttons-table.html class="btn-pill" %}
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Extra colors</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.colors hide-labels=true icon="star" auto-columns=true %}
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Icon buttons</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.socials hide-labels=true icon-only=true auto-columns=true
%}
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Social colors</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.socials hide-labels=true icon=true auto-columns=true %}
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion src/pages/cards-masonry.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
libs: masonry
---

<div class="row" data-masonry='{"percentPosition": true }'>
<div class="row row-cards" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4">
{% include cards/card.html body="This is some text within a card body." %}
</div>
Expand Down
75 changes: 43 additions & 32 deletions src/pages/cards.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,53 @@
menu: base.cards
---

<div class="row">
<div class="row row-cards">
<div class="col-md-6 col-xl-4">
{% include cards/card.html body="This is some text within a card body." %}
{% include cards/card.html img-bottom=true title="Card with bottom image" %}
{% include cards/card.html active=true body="This is a card with active state." %}
{% include cards/card.html inactive=true body="This is some text inactive state." %}
{% include cards/card.html footer-elements="more,>switch" %}
{% include cards/card.html footer-elements=">avatars" %}
{% include cards/card.html header-tabs=true %}
{% include cards/card.html header-pills=true %}
{% include cards/card.html progress=true title="Card with progress bar" %}
{% include cards/card.html empty=true %}
{% include cards/card-tabs.html count=4 %}
{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
<div class="row row-cards">
<div class="col-12">{% include cards/card.html body="This is some text within a card body." %}</div>
<div class="col-12">{% include cards/card.html img-bottom=true title="Card with bottom image" %}</div>
<div class="col-12">{% include cards/card.html active=true body="This is a card with active state." %}</div>
<div class="col-12">{% include cards/card.html inactive=true body="This is some text inactive state." %}</div>
<div class="col-12">{% include cards/card.html footer-elements="more,>switch" %}</div>
<div class="col-12">{% include cards/card.html footer-elements=">avatars" %}</div>
<div class="col-12">{% include cards/card.html header-tabs=true %}</div>
<div class="col-12">{% include cards/card.html header-pills=true %}</div>
<div class="col-12">{% include cards/card.html progress=true title="Card with progress bar" %}</div>
<div class="col-12">{% include cards/card.html empty=true %}</div>
<div class="col-12">{% include cards/card-tabs.html count=4 %}</div>
<div class="col-12">{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}</div>
</div>
</div>
<div class="col-md-6 col-xl-8">
{% include cards/card-image.html title="Card with left side image" %}
{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
{% include cards/card-group.html %}
<div class="row row-cards">

<div class="row">
<div class="col-xl-6">
{% include cards/card.html img-top=true title="Card with top image" %}
{% include cards/card.html button=true title="Card with button link" %}
{% include cards/card.html status-top="danger" title="Card with top status" %}
{% include cards/card.html status-bottom="success" title="Card with bottom status" %}
{% include cards/card.html status-left="primary" title="Card with side status" %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% include cards/credit-card.html %}
</div>
<div class="col-xl-6">
{% include cards/card.html title="Card title" subtitle="Card subtitle" %}
{% include cards/card.html header=true %}
{% include cards/card.html title="Card with footer" footer=true %}
{% include cards/card.html title="Card with footer button" footer-button=true %}
{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}
<div class="col-12">{% include cards/card-image.html title="Card with left side image" %}</div>
<div class="col-12">{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}</div>
<div class="col-12">{% include cards/card-group.html %}</div>

<div class="col-12">
<div class="row row-cards">
<div class="col-xl-6">
<div class="row row-cards">
<div class="col-12">{% include cards/card.html img-top=true title="Card with top image" %}</div>
<div class="col-12">{% include cards/card.html button=true title="Card with button link" %}</div>
<div class="col-12">{% include cards/card.html status-top="danger" title="Card with top status" %}</div>
<div class="col-12">{% include cards/card.html status-bottom="success" title="Card with bottom status" %}</div>
<div class="col-12">{% include cards/card.html status-left="primary" title="Card with side status" %}</div>
<div class="col-12">{% include cards/card.html class="card-stacked" title="Stacked card" %}</div>
<div class="col-12">{% include cards/credit-card.html %}</div>
</div>
</div>
<div class="col-xl-6">
<div class="row row-cards">
<div class="col-12">{% include cards/card.html title="Card title" subtitle="Card subtitle" %}</div>
<div class="col-12">{% include cards/card.html header=true %}</div>
<div class="col-12">{% include cards/card.html title="Card with footer" footer=true %}</div>
<div class="col-12">{% include cards/card.html title="Card with footer button" footer-button=true %}</div>
<div class="col-12">{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/icons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
menu: base.icons
---

<div class="row">
<div class="row row-cards">
<div class="col-12">
{% include cards/icons.html title="Tabler icons" group="icons-tabler" %}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,8 @@ $btn-close-width: .75rem !default;
$dropdown-item-padding-x: .75rem !default;
$dropdown-item-padding-y: .5rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-divider-bg: $border-color !default;
$dropdown-border-color: $border-color-transparent !default;
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-padding-y: .25rem !default;
$dropdown-link-color: inherit !default;
$dropdown-link-hover-bg: $hover-bg !default;
Expand All @@ -341,7 +342,6 @@ $dropdown-min-width: 14rem !default;
$dropdown-link-active-color: $primary !default;
$dropdown-link-active-bg: $active-bg !default;

$dropdown-border-color: $border-color !default;
$dropdown-menu-max-width: 25rem !default;

//grid
Expand Down
5 changes: 0 additions & 5 deletions src/scss/ui/_cards.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@
}
}

.card-group {
margin-bottom: $card-group-margin;
}

.card-inactive {
pointer-events: none;
box-shadow: none;
Expand Down Expand Up @@ -392,7 +388,6 @@ Card list group
Card tabs
*/
.card-tabs {
margin-bottom: $card-group-margin;

.nav-tabs {
position: relative;
Expand Down
6 changes: 6 additions & 0 deletions src/scss/ui/_empty.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@
line-height: 1;
}

.empty-title {
font-size: $h2-font-size;
line-height: $h2-line-height;
font-weight: $headings-font-weight;
}

.empty-title,
.empty-subtitle {
margin: 0 0 .5rem;
Expand Down
4 changes: 2 additions & 2 deletions src/scss/ui/_grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
}

@include media-breakpoint-down($cards-grid-breakpoint) {
--#{$variable-prefix}gutter-x: #{$cards-grid-gap-sm} / 2;
--#{$variable-prefix}gutter-y: #{$cards-grid-gap-sm} / 2;
--#{$variable-prefix}gutter-x: #{$cards-grid-gap-sm};
--#{$variable-prefix}gutter-y: #{$cards-grid-gap-sm};
}
}
5 changes: 3 additions & 2 deletions src/scss/ui/_icons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;

i {
font-size: 1.25rem;
.icon {
width: 1.5rem;
height: 1.5rem;
}
}

0 comments on commit 6409a25

Please sign in to comment.