mirror of
https://github.com/papercss/papercss
synced 2024-06-02 14:02:34 +02:00
Merge branch 'release-1.4' into develop
This commit is contained in:
rhyneav
commit
3ac70da119
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -1,7 +1,11 @@
|
|||
/node_modules
|
||||
npm-debug.log
|
||||
/dist
|
||||
/tests/node_modules
|
||||
.DS_Store
|
||||
/public
|
||||
.vscode
|
||||
|
||||
# Ignore compiled CSS
|
||||
/docs/static/assets/paper.css
|
||||
/docs/static/assets/paper.min.css
|
||||
/dist
|
||||
|
|
@ -2,5 +2,8 @@
|
|||
npm-debug.log
|
||||
index.html
|
||||
demo.css
|
||||
/img
|
||||
yarn.lock
|
||||
/img
|
||||
/docs
|
||||
/public
|
||||
/tests
|
||||
|
|
@ -74,20 +74,20 @@ Once you are ready to contribute, here the workflow you should follow:
|
|||
- Create your new branch where you will write your code: `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
|
||||
- Start the local web-server: `gulp` or `npm start`
|
||||
- Once done commit and push your changes to your fork.
|
||||
- Open a pull request on the origin papercss repo. Be sure to include any picture and/or details on what you have done, it will helps reviewers **a lot**!
|
||||
- Open a pull request on the origin papercss repo. Be sure to include any pictures and/or details on what you have done, it will help reviewers **a lot**!
|
||||
- When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone in terms of features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
|
||||
|
||||
Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-thing master`. The changes will be merged into both master and develop to keep the branches consistent.
|
||||
|
||||
## About
|
||||
|
||||
I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made PaperCSS to solve these two challenges of mine :)
|
||||
PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). In addition to the original creator, it is maintained by [@Fraham](https://github.com/Fraham) and [@TotomInc](https://github.com/TotomInc).
|
||||
|
||||
The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
|
||||
|
||||
While I'm proud of how it's turned out so far, I think there's a lot that can still be done to make it better. Such things as refactoring, adding more utility classes and more border types (like dashed/dotted) could really polish off this framework. That's why it's open sourced and available for pull requests!
|
||||
Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of!
|
||||
|
||||
If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.
|
||||
If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.
|
||||
|
||||
## Credits and license
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ publishDir = "../public"
|
|||
|
||||
# Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ )
|
||||
pygmentsCodefences = true
|
||||
pygmentsStyle = "emacs"
|
||||
|
||||
[params.info]
|
||||
description = "the less formal CSS framework"
|
||||
|
|
|
|||
|
|
@ -6,19 +6,18 @@ weight: -270
|
|||
|
||||
#### Download
|
||||
|
||||
`Download` the latest version (1.1.0) using either of the links below. Or
|
||||
Download the latest version (1.4.0) using either of the links below. Or
|
||||
download an older release via Github.
|
||||
|
||||
<div class="row flex-spaces text-center">
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.css">CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.min.css">Minified CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.4.0/paper.css">CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.4.0/paper.min.css">Minified CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
|
||||
</div>
|
||||
|
||||
#### NPM
|
||||
|
||||
PaperCSS is now available on NPM as of version 1.1.0. Install with <code>npm
|
||||
install papercss --save</code> and find the CSS in:
|
||||
PaperCSS is available on NPM as of version 1.4.0. Install with <code>npm install papercss --save</code> and find the CSS in:
|
||||
|
||||
* node_modules/papercss/dist/paper.css
|
||||
* node_modules/papercss/dist/paper.min.css
|
||||
|
|
@ -28,8 +27,8 @@ install papercss --save</code> and find the CSS in:
|
|||
Don't want to download it? That's cool. You can just link to PaperCSS via
|
||||
[unpkg's CDN](https://unpkg.com/#/). You can use either:
|
||||
|
||||
* [https://unpkg.com/papercss@1.1.0/dist/paper.css](https://unpkg.com/papercss@1.1.0/dist/paper.css)
|
||||
* [https://unpkg.com/papercss@1.1.0/dist/paper.min.css](https://unpkg.com/papercss@1.1.0/dist/paper.min.css)
|
||||
* [https://unpkg.com/papercss@1.4.0/dist/paper.css](https://unpkg.com/papercss@1.4.0/dist/paper.css)
|
||||
* [https://unpkg.com/papercss@1.4.0/dist/paper.min.css](https://unpkg.com/papercss@1.4.0/dist/paper.min.css)
|
||||
|
||||
Here's a quck snippet to get started with PaperCSS:
|
||||
|
||||
|
|
@ -40,7 +39,7 @@ Here's a quck snippet to get started with PaperCSS:
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.1.0/dist/paper.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.4.0/dist/paper.min.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -54,16 +53,15 @@ Here's a quck snippet to get started with PaperCSS:
|
|||
|
||||
#### Build it Yourself
|
||||
|
||||
If you'd rather customize things, you can build the CSS yourself via the git
|
||||
repo
|
||||
If you'd rather customize things, you can build the CSS yourself via the git repo
|
||||
|
||||
```sh
|
||||
git clone [repo url]
|
||||
git clone https://github.com/papercss/papercss.git
|
||||
cd papercss
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
Grab the CSS out of the /dist folder created
|
||||
|
||||
You can also go into src/colors.less before building to change around the colors
|
||||
of your new CSS.
|
||||
You can also go into src/core/_config.scss before building to change around the global styles of your new CSS.
|
||||
|
|
|
|||
|
|
@ -5,20 +5,10 @@ menu: main
|
|||
weight: -90
|
||||
---
|
||||
|
||||
I got tired of mODerN STylEs and clean pages on the internet. I also wanted to
|
||||
learn more about Flexbox and Less. So I made PaperCSS to solve these two
|
||||
challenges of mine :)
|
||||
PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). In addition to the original creator, it is maintained by [@Fraham](https://github.com/Fraham) and [@TotomInc](https://github.com/TotomInc).
|
||||
|
||||
The goal of PaperCSS is to be as minimal as possible when adding classes. For
|
||||
example, a button should just look like a paper button. There shouldn't be a
|
||||
need to add a class such as `paper-button`. Because of this, adding PaperCSS to
|
||||
a markdown generated page should instantly paper-ize it.
|
||||
The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
|
||||
|
||||
While I'm proud of how it's turned out so far, I think there's a lot that can
|
||||
still be done to make it better. Such things as refactoring, adding more utility
|
||||
classes and more border types (like dashed/dotted) could really polish off this
|
||||
framework. That's why it's open sourced and available for pull requests!
|
||||
Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/license), so use it wherever you want to.
|
||||
|
||||
If you are new to Git or Less, this would be a great project to get your feet
|
||||
wet with. I'd be happy to help walk you through the pull request process. Check
|
||||
out the Git repo for more info!
|
||||
If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. Check out the [Git repo](https://github.com/papercss/papercss) for more info!
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Docs
|
||||
title: Documentation
|
||||
menu: main
|
||||
weight: -240
|
||||
---
|
||||
|
|
|
|||
|
|
@ -24,6 +24,14 @@ description: PaperCSS Forms
|
|||
<label for="paperInputs4">Disabled</label>
|
||||
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Large Input</label>
|
||||
<textarea placeholder="Large input"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>No Resize</label>
|
||||
<textarea class="no-resize" placeholder="No resize"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperSelects1">Select</label>
|
||||
<select id="paperSelects1">
|
||||
|
|
@ -82,6 +90,14 @@ description: PaperCSS Forms
|
|||
<label for="paperInputs4">Disabled</label>
|
||||
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Large Input</label>
|
||||
<textarea placeholder="Large input"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>No Resize</label>
|
||||
<textarea class="no-resize" placeholder="No resize"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperSelects1">Select</label>
|
||||
<select id="paperSelects1">
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@ This can be used to implement modals along with features like title, subtitle, t
|
|||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-space child-borders">
|
||||
<div class="row flex-spaces child-borders">
|
||||
<a href="modal-1" class="paper-btn margin">Open Modal!</a>
|
||||
</div>
|
||||
<div class="modal row flex-space" id="modal-1">
|
||||
<div class="modal row flex-spaces" id="modal-1">
|
||||
<div class="modal-body">
|
||||
<a class="btn-close" href="#modals">x</a>
|
||||
<h4 class="modal-title">Modal Title</h4>
|
||||
|
|
@ -46,7 +46,7 @@ This can be used to implement modals along with features like title, subtitle, t
|
|||
<a href="#modals" class="btn-close">x</a>
|
||||
<h4 class="modal-title">Modal Title</h4>
|
||||
<h5 class="modal-subtitle">Modal Subtitle</h5>
|
||||
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
|
||||
<p class="modal-text">This is another example of modal which is implemented with pure CSS! :D</p>
|
||||
<a class="modal-link" href="#modals">OK</a>
|
||||
<a class="modal-link" href="#modals">Close</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,40 +8,40 @@ You can add popovers, also called tooltips, on your elements. popover attribute
|
|||
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on left" popover-position="left">Popover left position</p>
|
||||
<p popover-left="Popover on left">Popover left position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on top" popover-position="top">Popover top position</p>
|
||||
<p popover-top="Popover on top">Popover top position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
|
||||
<p popover-bottom="Popover on bottom">Popover bottom position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on right" popover-position="right">Popover right position</p>
|
||||
<p popover-right="Popover on right">Popover right position</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p popover="Popover on left" popover-position="left">Popover left position</p>
|
||||
<p popover="Popover on top" popover-position="top">Popover top position</p>
|
||||
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
|
||||
<p popover="Popover on right" popover-position="right">Popover right position</p>
|
||||
<p popover-left="Popover on left">Popover left position</p>
|
||||
<p popover-top="Popover on top">Popover top position</p>
|
||||
<p popover-bottom="Popover on bottom">Popover bottom position</p>
|
||||
<p popover-right="Popover on right">Popover right position</p>
|
||||
```
|
||||
|
||||
But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="sm-6 col">
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
|
||||
<button popover-top="Popover on top">Popover on top and on a button!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
|
||||
<button popover-top="Popover on top">Popover on top and on a button!</button>
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,34 +11,46 @@ description: PaperCSS Tabs
|
|||
<label for="tab3">Tab 3</label>
|
||||
<input id="tab4" type="radio" name="tabs">
|
||||
<label for="tab4">Tab 4</label>
|
||||
|
||||
<div class="content" id="content1">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter
|
||||
rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
</p>
|
||||
<p>
|
||||
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
|
||||
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump.
|
||||
Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="content2">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball
|
||||
t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine
|
||||
chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock.
|
||||
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork
|
||||
chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank.
|
||||
Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami
|
||||
beef ribs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="content3">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump.
|
||||
Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
|
||||
</p>
|
||||
<p>
|
||||
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter
|
||||
rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="content4">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
|
||||
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork
|
||||
chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank.
|
||||
Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami
|
||||
beef ribs.
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball
|
||||
t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine
|
||||
chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -89,4 +89,7 @@ description: PaperCSS Lists
|
|||
</ol>
|
||||
|
||||
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! -->
|
||||
|
||||
<!-- For inline lists -->
|
||||
<ul class="inline">...</ul>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -12,13 +12,11 @@
|
|||
<input id='collapsible-section-{{ .Title | urlize }}' type='checkbox' name='collapsible-section' checked>
|
||||
<label for="collapsible-section-{{ .Title | urlize }}">{{ .Title }}</label>
|
||||
<div class='collapsible-body'>
|
||||
<ul>
|
||||
<div class="row child-borders">
|
||||
{{ range .Pages }}
|
||||
<li>
|
||||
<a href='{{ .Permalink | relURL }}'>{{- .Title -}}</a>
|
||||
</li>
|
||||
<a class="paper-btn margin" href='{{ .Permalink | relURL }}'>{{- .Title -}}</a>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{ range .Site.Sections }}
|
||||
<div class='paper'>
|
||||
<h3 class='sidebar-title' style='text-align:center'>
|
||||
<a href='/docs'>PaperCSS Documentation</a>
|
||||
<a href='/docs'>Documentation</a>
|
||||
</h3>
|
||||
<div class='row'>
|
||||
{{ range .Sections }}
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
<div class='paper'>
|
||||
<div class="row flex-right">
|
||||
<div class="row flex-center">
|
||||
<p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
3
docs/static/assets/demo.css
vendored
3
docs/static/assets/demo.css
vendored
|
|
@ -1,6 +1,9 @@
|
|||
body {
|
||||
background-image: url("/img/geometry2.png")
|
||||
}
|
||||
#top {
|
||||
max-width: 1440px;
|
||||
}
|
||||
.demo .row .col {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
|
|
|||
1974
docs/static/assets/paper.css
vendored
1974
docs/static/assets/paper.css
vendored
File diff suppressed because it is too large
Load diff
1
docs/static/assets/paper.min.css
vendored
1
docs/static/assets/paper.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,53 +1,49 @@
|
|||
@mixin transition($transition){
|
||||
-webkit-transition: max-height $transition, padding $transition, opacity $transition;
|
||||
-moz-transition: max-height $transition, padding $transition, opacity $transition;
|
||||
-o-transition: max-height $transition, padding $transition, opacity $transition;
|
||||
transition: max-height $transition, padding $transition, opacity $transition;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:nth-of-type(1) {
|
||||
border-top: 1px solid $muted-light;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
border-top: 1px solid $muted-light;
|
||||
}
|
||||
|
||||
.collapsible-body {
|
||||
max-height: 0px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0rem 0.75rem;
|
||||
margin: 0;
|
||||
background-color: lighten($white-dark, 80%);
|
||||
border-bottom: 1px solid $muted-light;
|
||||
@include transition;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.collapsible-body {
|
||||
max-height: 0px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0rem 0.75rem;
|
||||
margin:0;
|
||||
background-color: lighten($white-dark,80%);
|
||||
border-bottom: 1px solid $muted-light;
|
||||
@include transition(#{"0.25s ease"});
|
||||
&[id^="collapsible"]:checked~div.collapsible-body {
|
||||
opacity: 1;
|
||||
max-height: 960px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: $primary;
|
||||
border-bottom: 1px solid $muted-light;
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: $primary;
|
||||
border-bottom: 1px solid $muted-light;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
}
|
||||
input:checked+label {
|
||||
color: $primary;
|
||||
}
|
||||
input[id ^="collapsible"]:checked ~ div.collapsible-body {
|
||||
opacity: 1;
|
||||
max-height: 960px;
|
||||
padding: 0.75rem 0.75rem;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ button,
|
|||
[type="button"] {
|
||||
align-self: center;
|
||||
background: transparent;
|
||||
transition: all .5s ease, background-color .1s ease;
|
||||
@include transition();
|
||||
color: $primary;
|
||||
display: inline;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -28,14 +28,15 @@
|
|||
position: fixed;
|
||||
z-index: 11;
|
||||
max-width: 960px;
|
||||
@include translate(0, -5000%);
|
||||
@include transition(transform);
|
||||
|
||||
@include resp(medium) {
|
||||
max-width: 85%;
|
||||
}
|
||||
@include resp(xsmall) {
|
||||
max-width: 90%;
|
||||
}
|
||||
@include translate(0, -500%);
|
||||
@include transition-transform(0.3s ease-out);
|
||||
}
|
||||
|
||||
.btn-close{
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
text-align: center;
|
||||
color: $white;
|
||||
background: $light-dark;
|
||||
transition: opacity .25s ease-out;
|
||||
@include transition(opacity);
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
|
|
|
|||
|
|
@ -170,19 +170,24 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin transition-transform($transition) {
|
||||
-webkit-transition: -webkit-transform $transition;
|
||||
-moz-transition: -moz-transform $transition;
|
||||
-o-transition: -o-transform $transition;
|
||||
transition: transform $transition;
|
||||
}
|
||||
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y);
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
|
||||
/*
|
||||
Add global transition styles to selector
|
||||
@param string
|
||||
@default all | 235ms | ease-in-out | 0
|
||||
*/
|
||||
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay:0s){
|
||||
-webkit-transition: $name $duration $animation $delay;
|
||||
-moz-transition: $name $duration $animation $delay;
|
||||
-o-transition: $name $duration $animation $delay;
|
||||
transition: $name $duration $animation $delay;
|
||||
}
|
||||
|
||||
/**
|
||||
Set the shadow type for a component
|
||||
@param string
|
||||
|
|
@ -193,15 +198,15 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
|||
box-shadow: $shadow-hover;
|
||||
@include translate(0, 2px);
|
||||
} @else if $type == small {
|
||||
transition: all .5s ease;
|
||||
@include transition($animation: ease);
|
||||
box-shadow: $shadow-small;
|
||||
} @else if $type == regular {
|
||||
transition: all .5s ease;
|
||||
@include transition($animation: ease);
|
||||
box-shadow: $shadow-regular;
|
||||
} @else if $type == large {
|
||||
transition: all .5s ease;
|
||||
@include transition($animation: ease);
|
||||
box-shadow: $shadow-large;
|
||||
} @else {
|
||||
@error "@mixin shadow(input) does not exist"
|
||||
@error "wrong $type. available types: small | regular | large | hover"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue