Skip to content

Commit

Permalink
Update UL and OL with Padding
Browse files Browse the repository at this point in the history 
Updated Documentation
  • Loading branch information
@ggedde
ggedde committed Aug 5, 2022
1 parent 27a11a3 commit 7740341
Show file tree
Hide file tree
Showing 13 changed files with 57 additions and 40 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# SpryCss
A simple and customizable CSS Toolkit while being as lightweight as possible (Only 17kb gzipped)
A simple and customizable CSS Toolkit while being as lightweight as possible (Only 16kb gzipped)

![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/ggedde/spry-css?include_prereleases)   ![GitHub](https://img.shields.io/github/license/ggedde/spry-css?label=license)

Expand Down
20 changes: 18 additions & 2 deletions _reset.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,27 @@ ul {
padding: 0;
}

ul {
list-style: disc;
}
ul, ol {
li {
margin-top: .5rem;
margin-bottom: .5rem;
}
}

ol,
ul {
list-style: circle inside;
nav > & {
margin-left: 1.5rem;
nav & {
list-style: none;
margin-left: 0;
li {
margin-top: 0;
margin-bottom: 0;
}

}
}

Expand Down
10 changes: 0 additions & 10 deletions _typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,3 @@ blockquote {
color: inherit;
}
}
ul {
list-style: disc;
}
ul, ol {
margin-left: 1rem;
li {
margin-top: .5rem;
margin-bottom: .5rem;
}
}
12 changes: 3 additions & 9 deletions _ui.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,9 @@ nav.list li>button {
}

nav {
ul {
min-width: 200px;
}
li {
position: relative;
width : 100%;
Expand Down Expand Up @@ -321,12 +324,7 @@ nav {
>ul {
position : absolute;
top : 100%;
min-width: 220px;
max-width: 300px;

ul {
padding-left: 1rem;
}
}
}
}
Expand Down Expand Up @@ -360,10 +358,6 @@ nav {
top : 100%;
min-width: 220px;
max-width: 300px;

ul {
padding-left: 1rem;
}
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions _variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ $colors: (
// Specify each type tag and class like <h3> and .h3 etc.
$types: (
h1: ( font-size: 3.4rem, font-weight: 400, color: map-get($colors, 'text'), line-height: 1.20 ),
h2: ( font-size: 2.8rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.25 ),
h2: ( font-size: 2.7rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.25 ),
h3: ( font-size: 2.2rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.30 ),
h4: ( font-size: 1.5rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.35 ),
h4: ( font-size: 1.6rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.35 ),
h5: ( font-size: 1.2rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.5 ),
h6: ( font-size: 1.0rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
p: ( font-size: 1.0rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
Expand Down
2 changes: 1 addition & 1 deletion dist/spry.min.css
View file

Large diffs are not rendered by default.

Binary file modified dist/spry.min.css.gz
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion dist/spry.min.css.map
View file

Large diffs are not rendered by default.

39 changes: 28 additions & 11 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ <h5 class="mb-3">Spry<span class="md-none"> </span>CSS <img
<section id="installation">
<h1 class="mb-3">SpryCSS</h1>
<p>SpryCSS aims to be a simple and customizable CSS Toolkit while being as
lightweight as possible (Only 17kb gzipped).</p>
lightweight as possible (Only 16kb gzipped).</p>
<p>The goal is to remove the messy and tedious task of coming up with class names
for elements that just need simple layout styles and provide basic components to help you get up and
running fast,
Expand Down Expand Up @@ -283,6 +283,30 @@ <h6>Heading H6</h6>
<small>Small</small>
<a href="">Anchor</a>
</div>
<h5>Unordered List</h5>
<ul>
<li>List Item 1 lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
<li>List Item 2 vero eos et accusam et justo duo dolores et ea rebum.</li>
<li>List Item 3 lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>
<h5>Ordered List</h5>
<ol>
<li>List Item 1 lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
<li>List Item 2 vero eos et accusam et justo duo dolores et ea rebum.</li>
<li>List Item 3 lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ol>
<br/>
<p class="small">Paragraph Small - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<p>Paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
Expand All @@ -297,13 +321,6 @@ <h6>Heading H6</h6>
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<p class="small">Paragraph Small - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<blockquote class="h3 mt-4">Blockquote - At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</blockquote>
<cite class="ml-3"> - Blockquote, Cite</cite>
Expand Down Expand Up @@ -1475,7 +1492,7 @@ <h4 class="flex-center">
<div class="absolute inset-top inset-right">
<input id="toggle-menu-responsive" class="toggle md-open" type="checkbox" />
<label for="toggle-menu-responsive"
class="btn btn-transparent btn-link p-0 btn-menu md-none"><span></span></label>
class="btn btn-link p-0 btn-menu md-none"><span></span></label>
<div class="absolute inset-top inset-right">
<nav class="bg-light vertical md-horizontal md-hoverable inset-right md-relative">
<ul>
Expand Down Expand Up @@ -1567,7 +1584,7 @@ <h2 class="border-bottom pb-1 mb-3">Cards</h2>
<header>
<h3>Lorem ipsum dolor</h3>
</header>
<img src="http://via.placeholder.com/600x200" />
<img src="/placeholder.jpg" />
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<footer>
Expand Down Expand Up @@ -1595,7 +1612,7 @@ <h4 class="px-2">Lorem ipsum dolor</h4>
</div>

<div class="card card-light shadow color-text border rounded g-3">
<img src="http://via.placeholder.com/600x300" />
<img src="/placeholder.jpg" />
<article class="px-3">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
Expand Down
Binary file added docs/placeholder.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/spry.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/spry.min.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ggedde/spry-css",
"version": "1.7.1",
"version": "1.7.2",
"description": "A simple and customizable CSS Toolkit while being as lightweight as possible",
"repository": {
"type": "git",
Expand Down

0 comments on commit 7740341

Please sign in to comment.