js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use padding-/margin- instead of p-/m-; fixes #14

Browse Source
This commit is contained in:
Cory LaViska
2017-08-01 15:27:49 -04:00
parent a1682bc3b2
commit edb689d222
2 changed files with 71 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -51,7 +51,7 @@
Shoelace was created by <a href="https://twitter.com/claviska">@claviska</a> for
<a href="https://www.surrealcms.com/">Surreal CMS</a>. It’s available under the MIT license.
</p>
<p class="m-t-medium text-center">
<p class="margin-t-medium text-center">
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
@@ -1401,28 +1401,27 @@ PRINT "SHOELACE IS AWESOME"
the desired class and the appropriate element will receive the respective padding/margin.
</p>
<p>
Class names are prefixed with <code>m-</code> or <code>p-</code> for margin and padding,
respectively. To apply a padding/margin to all sides of an element, use the following
classes:
Class names are prefixed with <code>padding-</code> or <code>margin-</code> for padding and
margin, respectively. To apply spacing to all sides of an element, use the following classes:
</p>
<pre>
p-[none|small|medium|big]
m-[none|small|medium|big]
padding-[none|small|medium|big]
margin-[none|small|medium|big]
Example: class="p-none m-big"
Example: &lt;div class=&quot;padding-none margin-big&quot;&gt;
</pre>
<p>
To apply a padding/margin to a specific side of an element, use one or more of the following
classes:
To apply spacing to a specific side of an element, use one or more of the following classes:
</p>
<pre>
p-[top|right|bottom|left|x|y]-[none|small|medium|big]
m-[top|right|bottom|left|x|y]-[none|small|medium|big]
padding-[top|right|bottom|left|x|y]-[none|small|medium|big]
margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
Example: class="p-left-medium m-bottom-none"
Example: &lt;div class=&quot;padding-left-medium margin-bottom-none&quot;&gt;
</pre>
<p>
You can also use <code>m-x-auto</code> to horizontally center a fixed width block.
You can also use <code>margin-[x|y|xy]-auto</code> to set automatic margins horizontally
and/or horizontally.
</p>
<!--********************************************************************************************

116
source/css/utilities.css
View File

@@ -74,71 +74,73 @@
* Spacing utilities
***************************************************************************************************/
.m-none { margin: 0 !important; }
.m-x-none { margin-left: 0 !important; margin-right: 0 !important; }
.m-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
.m-t-none { margin-top: 0 !important; }
.m-r-none { margin-right: 0 !important; }
.m-b-none { margin-bottom: 0 !important; }
.m-l-none { margin-left: 0 !important; }
.margin-none { margin: 0 !important; }
.margin-x-none { margin-left: 0 !important; margin-right: 0 !important; }
.margin-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
.margin-t-none { margin-top: 0 !important; }
.margin-r-none { margin-right: 0 !important; }
.margin-b-none { margin-bottom: 0 !important; }
.margin-l-none { margin-left: 0 !important; }
.m-small { margin: var(--spacing-small) !important; }
.m-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
.m-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
.m-t-small { margin-top: var(--spacing-small) !important; }
.m-r-small { margin-right: var(--spacing-small) !important; }
.m-b-small { margin-bottom: var(--spacing-small) !important; }
.m-l-small { margin-left: var(--spacing-small) !important; }
.margin-small { margin: var(--spacing-small) !important; }
.margin-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
.margin-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
.margin-t-small { margin-top: var(--spacing-small) !important; }
.margin-r-small { margin-right: var(--spacing-small) !important; }
.margin-b-small { margin-bottom: var(--spacing-small) !important; }
.margin-l-small { margin-left: var(--spacing-small) !important; }
.m-medium { margin: var(--spacing-medium) !important; }
.m-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
.m-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
.m-t-medium { margin-top: var(--spacing-medium) !important; }
.m-r-medium { margin-right: var(--spacing-medium) !important; }
.m-b-medium { margin-bottom: var(--spacing-medium) !important; }
.m-l-medium { margin-left: var(--spacing-medium) !important; }
.margin-medium { margin: var(--spacing-medium) !important; }
.margin-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
.margin-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
.margin-t-medium { margin-top: var(--spacing-medium) !important; }
.margin-r-medium { margin-right: var(--spacing-medium) !important; }
.margin-b-medium { margin-bottom: var(--spacing-medium) !important; }
.margin-l-medium { margin-left: var(--spacing-medium) !important; }
.m-big { margin: var(--spacing-big) !important; }
.m-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
.m-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
.m-t-big { margin-top: var(--spacing-big) !important; }
.m-r-big { margin-right: var(--spacing-big) !important; }
.m-b-big { margin-bottom: var(--spacing-big) !important; }
.m-l-big { margin-left: var(--spacing-big) !important; }
.margin-big { margin: var(--spacing-big) !important; }
.margin-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
.margin-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
.margin-t-big { margin-top: var(--spacing-big) !important; }
.margin-r-big { margin-right: var(--spacing-big) !important; }
.margin-b-big { margin-bottom: var(--spacing-big) !important; }
.margin-l-big { margin-left: var(--spacing-big) !important; }
.p-none { padding: 0 !important; }
.p-x-none { padding-left: 0 !important; padding-right: 0 !important; }
.p-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-t-none { padding-top: 0 !important; }
.p-r-none { padding-right: 0 !important; }
.p-b-none { padding-bottom: 0 !important; }
.p-l-none { padding-left: 0 !important; }
.padding-none { padding: 0 !important; }
.padding-x-none { padding-left: 0 !important; padding-right: 0 !important; }
.padding-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.padding-t-none { padding-top: 0 !important; }
.padding-r-none { padding-right: 0 !important; }
.padding-b-none { padding-bottom: 0 !important; }
.padding-l-none { padding-left: 0 !important; }
.p-small { padding: var(--spacing-small) !important; }
.p-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
.p-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
.p-t-small { padding-top: var(--spacing-small) !important; }
.p-r-small { padding-right: var(--spacing-small) !important; }
.p-b-small { padding-bottom: var(--spacing-small) !important; }
.p-l-small { padding-left: var(--spacing-small) !important; }
.padding-small { padding: var(--spacing-small) !important; }
.padding-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
.padding-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
.padding-t-small { padding-top: var(--spacing-small) !important; }
.padding-r-small { padding-right: var(--spacing-small) !important; }
.padding-b-small { padding-bottom: var(--spacing-small) !important; }
.padding-l-small { padding-left: var(--spacing-small) !important; }
.p-medium { padding: var(--spacing-medium) !important; }
.p-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
.p-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
.p-t-medium { padding-top: var(--spacing-medium) !important; }
.p-r-medium { padding-right: var(--spacing-medium) !important; }
.p-b-medium { padding-bottom: var(--spacing-medium) !important; }
.p-l-medium { padding-left: var(--spacing-medium) !important; }
.padding-medium { padding: var(--spacing-medium) !important; }
.padding-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
.padding-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
.padding-t-medium { padding-top: var(--spacing-medium) !important; }
.padding-r-medium { padding-right: var(--spacing-medium) !important; }
.padding-b-medium { padding-bottom: var(--spacing-medium) !important; }
.padding-l-medium { padding-left: var(--spacing-medium) !important; }
.p-big { padding: var(--spacing-big) !important; }
.p-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
.p-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
.p-t-big { padding-top: var(--spacing-big) !important; }
.p-r-big { padding-right: var(--spacing-big) !important; }
.p-b-big { padding-bottom: var(--spacing-big) !important; }
.p-l-big { padding-left: var(--spacing-big) !important; }
.padding-big { padding: var(--spacing-big) !important; }
.padding-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
.padding-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
.padding-t-big { padding-top: var(--spacing-big) !important; }
.padding-r-big { padding-right: var(--spacing-big) !important; }
.padding-b-big { padding-bottom: var(--spacing-big) !important; }
.padding-l-big { padding-left: var(--spacing-big) !important; }
.m-x-auto { margin-left: auto !important; margin-right: auto !important; }
.margin-x-auto { margin-left: auto !important; margin-right: auto !important; }
.margin-y-auto { margin-top: auto !important; margin-bottom: auto !important; }
.margin-xy-auto { margin: auto !important; }
/***************************************************************************************************
* Text utilities