Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

0.4.6 #341

Merged
merged 13 commits into from
Nov 20, 2017
Merged

0.4.6 #341

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9a116b9
Fix the Docs content mistake
picturepan2 Oct 25, 2017
f9ce8c8
Change SASS to Sass and LESS to Less #325
picturepan2 Nov 4, 2017
03d25bc
Add new Sliders example #328
picturepan2 Nov 4, 2017
df37b3f
Update package.json (again)
picturepan2 Nov 4, 2017
4c9c45e
Define $parallax-fade-color as default variable
kandebonfim Nov 11, 2017
95a1542
Merge pull request #332 from startae/feature/parallax-fade-color
picturepan2 Nov 12, 2017
19d2ea1
Update Calendar event style which makes use of color utilities
picturepan2 Nov 12, 2017
cb6e1d4
Add Table with horizontal scroll support #333
picturepan2 Nov 13, 2017
795e8fb
Update control size variables
picturepan2 Nov 13, 2017
76fece9
Clean up code
picturepan2 Nov 13, 2017
14c87ea
Fix breadcrumb-item extra spacing #337
picturepan2 Nov 16, 2017
8072f46
Fix comparison slider image responsive bug #338
picturepan2 Nov 20, 2017
f9b68c6
Update Changelog and Docs
picturepan2 Nov 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
- Improve Buttons and Forms small and large variables
- Improve Filters code
- Improve gulpfile and package
- Add Importing SASS Docs
- Add Importing Sass Docs

### [v0.4.2](https://github.com/picturepan2/spectre/releases/tag/v0.4.2)

Expand All @@ -39,7 +39,7 @@

### [v0.4.0](https://github.com/picturepan2/spectre/releases/tag/v0.4.0)

- Switch from LESS to SASS
- Switch from Less to Sass
- Add Cursor utilities

### [v0.3.2](https://github.com/picturepan2/spectre/releases/tag/v0.3.2)
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Spectre.css is a lightweight, responsive and modern CSS framework.
- Flexbox-based, responsive and mobile-friendly layout
- Elegantly designed and developed elements and components

Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with SASS/SCSS compiler.
Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

Spectre.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) for the further development. ♥

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "spectre.css",
"version": "0.4.5",
"version": "0.4.6",
"description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
"homepage": "http://picturepan2.github.io/spectre",
"repository": "picturepan2/spectre",
Expand Down
35 changes: 9 additions & 26 deletions docs/components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -858,53 +858,36 @@ <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</
<div class="column col-12">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
Home
</a>
<a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
Settings
</a>
<a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
</li>
</ul>
</div>
<div class="column col-12">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
Home
</a>
<a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
Settings
</a>
<a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
</li>
<li class="breadcrumb-item">
<a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar">
Change avatar
</a>
<a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar">Change avatar</a>
</li>
</ul>
</div>
<div class="column col-12">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
Home
</a>
<a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
Settings
</a>
<a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
</li>
<li class="breadcrumb-item">
Search result:
<a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre">
Spectre
</a>
<li class="breadcrumb-item">Search result:
<a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre">Spectre</a>
</li>
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/css/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
.version::after {
content: "0.4.5";
content: "0.4.6";
}

.off-canvas .off-canvas-toggle {
Expand Down
10 changes: 6 additions & 4 deletions docs/dist/spectre-exp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! Spectre.css Experimentals v0.4.5 | MIT License | github.com/picturepan2/spectre */
/*! Spectre.css Experimentals v0.4.6 | MIT License | github.com/picturepan2/spectre */
.calendar {
border: .05rem solid #e7e9ed;
border-radius: .1rem;
Expand Down Expand Up @@ -196,9 +196,7 @@
}

.calendar.calendar-lg .calendar-event {
background: #f1f1fc;
border-radius: .1rem;
color: #5755d9;
display: block;
font-size: .7rem;
margin: .1rem auto;
Expand Down Expand Up @@ -356,7 +354,7 @@
.comparison-slider .comparison-before img,
.comparison-slider .comparison-after img {
height: 100%;
object-fit: none;
object-fit: cover;
object-position: left center;
position: absolute;
width: 100%;
Expand Down Expand Up @@ -816,6 +814,10 @@
outline: none;
}

.slider.tooltip:not([data-tooltip])::after {
content: attr(value);
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #5755d9;
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/spectre-exp.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/spectre-icons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! Spectre.css Icons v0.4.5 | MIT License | github.com/picturepan2/spectre */
/*! Spectre.css Icons v0.4.6 | MIT License | github.com/picturepan2/spectre */
.icon {
box-sizing: border-box;
display: inline-block;
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/spectre-icons.min.css
View file
Open in desktop

Large diffs are not rendered by default.

25 changes: 18 additions & 7 deletions docs/dist/spectre.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! Spectre.css v0.4.5 | MIT License | github.com/picturepan2/spectre */
/*! Spectre.css v0.4.6 | MIT License | github.com/picturepan2/spectre */
/* Manually forked from Normalize.css */
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
Expand Down Expand Up @@ -509,15 +509,22 @@ dl dd {
background: #f8f9fa;
}

.table.table-hover tbody tr:hover {
.table tbody tr.active,
.table.table-striped tbody tr.active {
background: #f0f1f4;
}

.table tbody tr.active,
.table.table-striped tbody tr.active {
.table.table-hover tbody tr:hover {
background: #f0f1f4;
}

.table.table-scroll {
display: block;
overflow-x: auto;
padding-bottom: .75rem;
white-space: nowrap;
}

.table td,
.table th {
border-bottom: .05rem solid #e7e9ed;
Expand Down Expand Up @@ -2119,7 +2126,7 @@ summary.accordion-header::-webkit-details-marker {
.breadcrumb .breadcrumb-item:not(:first-child)::before {
color: #e7e9ed;
content: "/";
padding-right: .2rem;
padding-right: .4rem;
}

.bar {
Expand Down Expand Up @@ -2591,7 +2598,6 @@ summary.accordion-header::-webkit-details-marker {
}

.popover .popover-container {
content: attr(data-tooltip);
left: 50%;
opacity: 0;
padding: .4rem;
Expand All @@ -2603,7 +2609,7 @@ summary.accordion-header::-webkit-details-marker {
z-index: 400;
}

.popover :focus + .popover-container,
.popover *:focus + .popover-container,
.popover:hover .popover-container,
.popover .popover-container:hover {
display: block;
Expand Down Expand Up @@ -3033,6 +3039,7 @@ a.text-error:hover {

.bg-primary {
background: #5755d9;
color: #fff;
}

.bg-secondary {
Expand All @@ -3041,6 +3048,7 @@ a.text-error:hover {

.bg-dark {
background: #454d5d;
color: #fff;
}

.bg-gray {
Expand All @@ -3049,14 +3057,17 @@ a.text-error:hover {

.bg-success {
background: #32b643;
color: #fff;
}

.bg-warning {
background: #ffb700;
color: #fff;
}

.bg-error {
background: #e85600;
color: #fff;
}

.c-hand {
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/spectre.min.css
View file
Open in desktop

Large diffs are not rendered by default.

57 changes: 57 additions & 0 deletions docs/elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -600,6 +600,63 @@ <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tab
&lt;<span class="tag">/tr</span>&gt;
&lt;<span class="tag">/tbody</span>&gt;
&lt;<span class="tag">/table</span>&gt;
</code></pre>

<div class="docs-note">
<p>If you need the tables with horizontal scroll, add the <code>table-scroll</code> class to the &lt;table&gt; element. </p>
</div>

<table class="table table-scroll">
<thead>
<tr>
<th>Name</th>
<th>Genre</th>
<th>Director</th>
<th>Rating</th>
<th>Duration</th>
<th>Release date</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Shawshank Redemption</td>
<td>Crime, Drama</td>
<td>Frank Darabont</td>
<td>R</td>
<td>2h 22min</td>
<td>14 October 1994</td>
</tr>
<tr>
<td>The Godfather</td>
<td>Crime, Drama</td>
<td>Francis Ford Coppola</td>
<td>R</td>
<td>2h 55min</td>
<td>24 March 1972</td>
</tr>
<tr>
<td>Schindler's List</td>
<td>Biography, Drama, History</td>
<td>Steven Spielberg</td>
<td>R</td>
<td>3h 15min</td>
<td>4 February 1994</td>
</tr>
<tr>
<td>Se7en</td>
<td>Crime, Drama, Mystery</td>
<td>David Fincher</td>
<td>R</td>
<td>2h 7min</td>
<td>22 September 1995</td>
</tr>
</tbody>
</table>

<!-- tables -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table table-scroll&quot;</span>&gt;
<span class="com">&lt;!-- table content --&gt;</span>
&lt;<span class="tag">/table</span>&gt;
</code></pre>

</div>
Expand Down
23 changes: 14 additions & 9 deletions docs/experimentals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,7 @@ <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4>
<div class="calendar-date prev-month disabled">
<button class="date-item">27</button>
<div class="calendar-events">
<a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Zhonghe Festival</a>
<a class="calendar-event bg-error text-light" href="#calendars">Zhonghe Festival</a>
</div>
</div>
<div class="calendar-date prev-month disabled"><button class="date-item">28</button></div>
Expand All @@ -403,9 +403,8 @@ <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4>
<div class="calendar-date current-month tooltip" data-tooltip="You have appointments">
<button class="date-item badge">8</button>
<div class="calendar-events">
<a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Product launch event</a>
<a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Lunch</a>
<a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a>
<a class="calendar-event bg-primary text-light" href="#calendars">Product launch event</a>
<a class="calendar-event bg-error text-light" href="#calendars">International Women's Day</a>
</div>
</div>
<div class="calendar-date current-month"><button class="date-item">9</button></div>
Expand All @@ -414,7 +413,7 @@ <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4>
<div class="calendar-date current-month">
<button class="date-item">12</button>
<div class="calendar-events">
<a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Arbor Day</a>
<a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a>
</div>
</div>
<div class="calendar-date current-month"><button class="date-item">13</button></div>
Expand All @@ -427,7 +426,7 @@ <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4>
<div class="calendar-date current-month calendar-range range-end">
<button class="date-item active">20</button>
<div class="calendar-events">
<a class="calendar-event" href="#calendars" style="background:#32b643;color:#fff;">Spring Equinox</a>
<a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
</div>
</div>
<div class="calendar-date current-month"><button class="date-item">21</button></div>
Expand All @@ -444,7 +443,7 @@ <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4>
<div class="calendar-date next-month disabled">
<button class="date-item">1</button>
<div class="calendar-events">
<a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">April Fools' Day</a>
<a class="calendar-event bg-error text-light" href="#calendars">April Fools' Day</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -770,6 +769,8 @@ <h4>Lorem ipsum</h4>
</div>
</div>
</div>
</div>
<div class="docs-note">
<p>You can open the sidebar by adding the class <code>active</code> to <code>off-canvas-sidebar</code>. And remove the <code>active</code> to close it.</p>
</div>

Expand Down Expand Up @@ -868,18 +869,22 @@ <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>P
<h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3>
<div class="docs-note">
<p>Sliders are for selecting values from ranges.</p>
<p>You can add the class <code>tooltip</code> to have tooltip labels. If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.</p>
</div>
<div class="columns">
<div class="column col-6 col-xs-12">
<input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50">
<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
</div>
<div class="column col-6 col-xs-12">
<input class="slider" type="range" min="0" max="100" value="50" disabled>
</div>
</div>

<!-- sliders -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;slider&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;range&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;50&quot;</span> <span class="tag">/</span>&gt;
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Sliders --&gt;</span>
&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;slider&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;range&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;50&quot;</span>&gt;
<span class="com">&lt;!-- Sliders with tooltips --&gt;</span>
&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;slider tooltip&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;range&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;50&quot;</span> <span class="atn">oninput</span>=<span class="atv">&quot;this.setAttribute('value', this.value);&quot;</span>&gt;
</code></pre>

</div>
Expand Down
Loading