Skip to content

Commit

Permalink
Update 0.3.36
Browse files Browse the repository at this point in the history
  • Loading branch information
WebmonsterA committed Sep 28, 2022
1 parent 5cacc32 commit 9318636
Show file tree
Hide file tree
Showing 11 changed files with 233 additions and 16 deletions.
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,14 @@
## Change Log
All changes to this project are documented in this file. This project is [Semantic Versioning](http://semver.org/) compliant.

## [0.3.35] - 2022-09-23
## [0.3.36] - 2022-09-28
- MINOR Update accordion info + no border.
- MINOR Update accordion info.
- MINOR Update accordion success.
- MINOR Update accordion warning.
- MINOR Update accordion error.

## [0.3.35] - 2022-09-27
- MINOR Update package.json with unpkg.

## [0.3.33] - 2022-09-23
Expand Down
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
{
"name": "pimentcss",
"version": "0.3.35",
"version": "0.3.36",
"description": "CSS Framework",
"repository": "webmonstera/piment-css",
"homepage": "https://pimentcss.webmonster.tech/",
"main": "public/assets/css/piment.min.css",
"repository": "webmonstera/piment-css",
"bugs": {
"url": "https://github.com/WebmonsterA/Piment-Css/issues"
},
"scripts": {
"prepublish": "npm-auto-version",
"postpublish": "git push origin --tags"
Expand Down
80 changes: 80 additions & 0 deletions piment/components/_accordion.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
details {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid map-get($colors, "graylight");
transition: all 1s;

&.no-border {
border-bottom: none;
}

&:not([open]) summary ~ * {
animation-name: sweep-out;
animation-duration: 0.5s ease-in-out;
}
&[open] summary ~ * {
animation: sweep 0.5s ease-in-out;
}

&[open] summary::marker {
content: "\025BE";
font-size: 1.2rem;
}

summary {
position: relative;
cursor: pointer;
font-size: 24px;
font-weight: 600;
outline: none;

&::marker {
content: "\025B8";
font-size: 1.2rem;
transition: all 1s linear;
}

&.summary--info {
color: hsl(220, 92%, 51%);
}

&.summary--error {
color: hsl(357, 47%, 48%);
}

&.summary--warning {
color: hsl(29, 97%, 54%);
}

&.summary--success {
color: hsl(141, 50%, 35%);
}
}

p {
font-size: 1.5rem;
line-height: 2rem;
padding: 1rem;
}
}

@keyframes sweep {
0% {
opacity: 0;
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes sweep-out {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-10px);
}
}
2 changes: 2 additions & 0 deletions piment/components/_card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
position: relative;
display: block;
height: 100%;
padding: 1rem;
border: 1px solid map-get($colors, "graylight");
border-radius: calc(var(--curve) * 1px);
overflow: hidden;
text-decoration: none;
Expand Down
1 change: 1 addition & 0 deletions piment/index.scss → piment/pimentcss.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
@import "piment/colors";

// components (button, card, navbar)
@import "piment/components/accordion";
@import "piment/components/card";
@import "piment/components/buttons";
@import "piment/components/navbar";
Expand Down
2 changes: 0 additions & 2 deletions public/assets/css/index.min.css

This file was deleted.

1 change: 0 additions & 1 deletion public/assets/css/index.min.css.map

This file was deleted.

96 changes: 96 additions & 0 deletions public/assets/css/index.css → public/assets/css/pimentcss.css
Original file line number Diff line number Diff line change
Expand Up @@ -757,6 +757,100 @@ a:hover:before {
background-color: hsl(0deg, 0%, 18%);
}

details {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid whitesmoke;
transition: all 1s;
}
details.no-border {
border-bottom: none;
}
details:not([open]) summary ~ * {
-webkit-animation-name: sweep-out;
animation-name: sweep-out;
-webkit-animation-duration: 0.5s ease-in-out;
animation-duration: 0.5s ease-in-out;
}
details[open] summary ~ * {
-webkit-animation: sweep 0.5s ease-in-out;
animation: sweep 0.5s ease-in-out;
}
details[open] summary::marker {
content: "▾";
font-size: 1.2rem;
}
details summary {
position: relative;
cursor: pointer;
font-size: 24px;
font-weight: 600;
outline: none;
}
details summary::marker {
content: "▸";
font-size: 1.2rem;
transition: all 1s linear;
}
details summary.summary--info {
color: hsl(220deg, 92%, 51%);
}
details summary.summary--error {
color: hsl(357deg, 47%, 48%);
}
details summary.summary--warning {
color: hsl(29deg, 97%, 54%);
}
details summary.summary--success {
color: hsl(141deg, 50%, 35%);
}
details p {
font-size: 1.5rem;
line-height: 2rem;
padding: 1rem;
}

@-webkit-keyframes sweep {
0% {
opacity: 0;
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes sweep {
0% {
opacity: 0;
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes sweep-out {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-10px);
}
}
@keyframes sweep-out {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-10px);
}
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
Expand All @@ -770,6 +864,8 @@ a:hover:before {
position: relative;
display: block;
height: 100%;
padding: 1rem;
border: 1px solid whitesmoke;
border-radius: calc(var(--curve) * 1px);
overflow: hidden;
text-decoration: none;
Expand Down
2 changes: 2 additions & 0 deletions public/assets/css/pimentcss.min.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions public/assets/css/pimentcss.min.css.map

Large diffs are not rendered by default.

47 changes: 37 additions & 10 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="assets/css/pimentcss.min.css">
<title>Piment CSS</title>
<style>
.logo {
Expand Down Expand Up @@ -148,36 +148,36 @@ <h4 class="form-title">Input</h4>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-input">
<label class="label" for="field">Text Field + icon left</label>
<label class="label" for="field2">Text Field + icon left</label>
<div class="form-input-add left">
<input class="input" type="text" id="field" name="field" tabindex="3" minlength="1" maxlength="50" value="" required="required">
<input class="input" type="text" id="field2" name="field" tabindex="3" minlength="1" maxlength="50" value="" required="required">
<span class="form-input-icon form-input-icon-left">@</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-input">
<label class="label" for="field">Text Field + icon right</label>
<label class="label" for="field3">Text Field + icon right</label>
<div class="form-input-add right">
<input class="input" type="text" id="field" name="field" value="" tabindex="4" minlength="1" maxlength="50" required="required">
<input class="input" type="text" id="field3" name="field" value="" tabindex="4" minlength="1" maxlength="50" required="required">
<span class="form-input-icon form-input-icon-right">&euro;</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-input-styled">
<label class="label" for="field">Text Field + icon left</label>
<label class="label" for="field4">Text Field + icon left</label>
<div class="form-input-add left">
<input class="input" type="text" id="field" name="field" value="" tabindex="5" minlength="1" maxlength="50" required="required">
<input class="input" type="text" id="field4" name="field" value="" tabindex="5" minlength="1" maxlength="50" required="required">
<span class="form-input-icon form-input-icon-left">@</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-input-styled">
<label class="label" for="field">Text Field + icon right</label>
<label class="label" for="field5">Text Field + icon right</label>
<div class="form-input-add right">
<input class="input" type="text" id="field" name="field" value="" tabindex="6" minlength="1" maxlength="50" required="required">
<input class="input" type="text" id="field5" name="field" value="" tabindex="6" minlength="1" maxlength="50" required="required">
<span class="form-input-icon form-input-icon-right">&euro;</span>
</div>
</div>
Expand Down Expand Up @@ -392,12 +392,39 @@ <h3 class="mt-2 text-blue">Alert</h3>
<p>Error: We found an error.</p>
</div>
</section>
<section class="col-xs-12">
<h3 class="mt-2 text-blue">Accordion</h3>
<details class="no-border">
<summary>Accordion normal + no border</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nihil atque odit odio iusto libero adipisci provident, quibusdam aliquam eius perspiciatis dignissimos. Mollitia possimus neque harum voluptatem excepturi explicabo rerum.</p>
</details>
<details>
<summary>Accordion normal</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nihil atque odit odio iusto libero adipisci provident, quibusdam aliquam eius perspiciatis dignissimos. Mollitia possimus neque harum voluptatem excepturi explicabo rerum.</p>
</details>
<details>
<summary class="summary--info">Accordion info</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nihil atque odit odio iusto libero adipisci provident, quibusdam aliquam eius perspiciatis dignissimos. Mollitia possimus neque harum voluptatem excepturi explicabo rerum.</p>
</details>
<details>
<summary class="summary--success">Accordion success</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nihil atque odit odio iusto libero adipisci provident, quibusdam aliquam eius perspiciatis dignissimos. Mollitia possimus neque harum voluptatem excepturi explicabo rerum.</p>
</details>
<details>
<summary class="summary--warning">Accordion warning</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nihil atque odit odio iusto libero adipisci provident, quibusdam aliquam eius perspiciatis dignissimos. Mollitia possimus neque harum voluptatem excepturi explicabo rerum.</p>
</details>
<details>
<summary class="summary--error">Accordion error</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nihil atque odit odio iusto libero adipisci provident, quibusdam aliquam eius perspiciatis dignissimos. Mollitia possimus neque harum voluptatem excepturi explicabo rerum.</p>
</details>
</section>
</div>
</main>
<footer class="container mb-4 mt-4">
<div class="row">
<section class="col-sm-12 text-center">
<p class="font-xs">Version <span class="text-success">0.3.30</span><br>
<p class="font-xs">Version <span class="text-success">0.3.36</span><br>
Tous droits réservés &copy; 2022 Piment Css by <a class="font-xs text-red text-hover-blue" href="https://github.com/WebmonsterA" rel="noopener nofollow">Webmonster Community</a></p>
</section>
</div>
Expand Down

0 comments on commit 9318636

Please sign in to comment.