Skip to content

Commit

Permalink
add margin xsmall classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@saschadube
saschadube committed Nov 12, 2024
1 parent b30a3c9 commit 880dd2c
Show file tree
Hide file tree
Showing 16 changed files with 639 additions and 605 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
- Allow `template` option to reference a `template` element in the DOM for the lightbox layout in Lightbox component
- Add hidden class to hide empty elements to Visibility component
- Add inverse style for form rang to Form component
- Add margin xsmall classes
- Add close-circle and arrow-down-arrow-up icons

### Changed
Expand Down
14 changes: 14 additions & 0 deletions src/less/components/margin.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@

@margin-margin: @global-margin;

@margin-xsmall-margin: 5px;

@margin-small-margin: @global-small-margin;

@margin-medium-margin: @global-medium-margin;
Expand Down Expand Up @@ -45,6 +47,18 @@
.uk-margin-right { margin-right: @margin-margin !important; }


/* XSmall
========================================================================== */

.uk-margin-xsmall { margin-bottom: @margin-xsmall-margin; }
* + .uk-margin-xsmall { margin-top: @margin-xsmall-margin !important; }

.uk-margin-xsmall-top { margin-top: @margin-xsmall-margin !important; }
.uk-margin-xsmall-bottom { margin-bottom: @margin-xsmall-margin !important; }
.uk-margin-xsmall-left { margin-left: @margin-xsmall-margin !important; }
.uk-margin-xsmall-right { margin-right: @margin-xsmall-margin !important; }


/* Small
========================================================================== */

Expand Down
4 changes: 2 additions & 2 deletions tests/badge.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ <h2>Navbar</h2>
<div class="uk-navbar-left">

<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active <span class="uk-badge uk-margin-small-left">2</span></a></li>
<li class="uk-active"><a href="#">Active <span class="uk-badge">2</span></a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item <span class="uk-badge uk-margin-small-left">2</span></a></li>
<li><a href="#">Item <span class="uk-badge">2</span></a></li>
</ul>

</div>
Expand Down
2 changes: 1 addition & 1 deletion tests/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h4>this is an H4 heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>

<blockquote cite="#">
<p class="uk-margin-small-bottom">The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
<p class="uk-margin-remove">The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
<footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
</blockquote>

Expand Down
48 changes: 24 additions & 24 deletions tests/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,10 +374,10 @@ <h2>Nav</h2>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>

Expand All @@ -396,10 +396,10 @@ <h3 class="uk-card-title">Title</h3>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>

Expand All @@ -421,10 +421,10 @@ <h3 class="uk-card-title">Title</h3>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div class="uk-card-footer">
Expand All @@ -450,10 +450,10 @@ <h3 class="uk-card-title">Title</h3>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div class="uk-card-media-bottom">
Expand Down Expand Up @@ -508,10 +508,10 @@ <h3 class="uk-card-title">Title</h3>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>

Expand All @@ -530,10 +530,10 @@ <h3 class="uk-card-title">Title</h3>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>

Expand Down Expand Up @@ -584,10 +584,10 @@ <h3 class="uk-card-title">Title</h3>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>

Expand All @@ -606,10 +606,10 @@ <h3 class="uk-card-title">Title</h3>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>

Expand Down
30 changes: 15 additions & 15 deletions tests/dropbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,10 @@ <h2>Navbar</h2>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
Expand Down Expand Up @@ -275,10 +275,10 @@ <h2>Stretch + Overflow Content</h2>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>

</div>
Expand Down Expand Up @@ -323,10 +323,10 @@ <h2>Stretch + Overflow Content</h2>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>

</div>
Expand Down Expand Up @@ -371,10 +371,10 @@ <h2>Stretch + Overflow Content</h2>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>

</div>
Expand Down Expand Up @@ -419,10 +419,10 @@ <h2>Stretch + Overflow Content</h2>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>

</div>
Expand Down
Loading

0 comments on commit 880dd2c

Please sign in to comment.