mirror of
https://github.com/papercss/papercss
synced 2024-06-01 13:32:42 +02:00
Merge branch 'develop' into feature-tabs
This commit is contained in:
Afzal Sayed
GitHub
commit
6d66733172
9
.editorconfig
Normal file
9
.editorconfig
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
46
CODE_OF_CONDUCT.md
Normal file
46
CODE_OF_CONDUCT.md
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at getpapercss@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
[version]: http://contributor-covenant.org/version/1/4/
|
||||
19
CONTRIBUTING.md
Normal file
19
CONTRIBUTING.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
## Contributing
|
||||
Check out what's been added but not yet released at [develop.getpapercss.com](https://develop.getpapercss.com)
|
||||
|
||||
This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
|
||||
|
||||
Similar to customizing, make sure you have Git, Node, and NPM on your system.
|
||||
- fork the repo via the fork button in the upper left
|
||||
- run `git clone https://github.com/[your_username]/papercss.git`
|
||||
- change directories to papercss `cd papercss`
|
||||
- run `npm install`
|
||||
- switch to the develop branch `git checkout develop`. This is the branch where features are added. Checking it out will set up the remote tracking to the develop branch on Github.
|
||||
- create a new branch for your feature off of the develop branch `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
|
||||
- Start the local server to view changes with `npm start`
|
||||
- _code and stuff_
|
||||
- Once done, commit and push your changes to your fork
|
||||
- Finally, open a pull request on this repo. Be sure to include any pictures and details on what you changed!
|
||||
- Once approved, your changes will be merged to the develop branch where it will eventually be added to a release that ends up in the master branch. 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, create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-1.X.X master`
|
||||
|
|
@ -21,7 +21,7 @@ Don't want to download it? That's cool. You can just link to PaperCSS via unpkg'
|
|||
- https://unpkg.com/papercss@1.1.0/dist/paper.min.css
|
||||
|
||||
## Quick Start
|
||||
```
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -58,14 +58,18 @@ Here's the full workflow for customization:
|
|||
|
||||
### Adding a new color
|
||||
- Go to file `src/color.less`
|
||||
- Add a new varable and assign it to a color hex value
|
||||
- Add a new variable and assign it to a color hex value
|
||||
- Add the new variable to the list of colors
|
||||
- Add a new variable for the light variation
|
||||
- Once `npm start` or `npm run build` has been run then it will create the new css so that the new color can be used as a text, border or background
|
||||
|
||||
## Contributing
|
||||
Check out what's been added but not yet releases at [develop.getpapercss.com](https://develop.getpapercss.com)
|
||||
|
||||
This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
|
||||
|
||||
Please before sending a PR, make sure you are using the `.editorconfig` file with your IDE. If your IDE doesn't natively support editorconfig files, you can use an extension. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ...
|
||||
|
||||
Similar to customizing, make sure you have Git, Node, and NPM on your system.
|
||||
- fork the repo via the fork button in the upper left
|
||||
- run `git clone https://github.com/[your_username]/papercss.git`
|
||||
|
|
|
|||
BIN
img/favicon.ico
Normal file
BIN
img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
107
index.html
107
index.html
|
|
@ -7,6 +7,9 @@
|
|||
|
||||
<title>PaperCSS · the less formal CSS framework</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
|
||||
|
||||
<meta name="description" content="The less formal CSS framework.">
|
||||
<meta name="author" content="Rhyneav and PaperCSS contributors.">
|
||||
|
||||
|
|
@ -61,6 +64,7 @@
|
|||
<li><a href="#images">Images</a></li>
|
||||
<li><a href="#alerts">Alerts</a></li>
|
||||
<li><a href="#tabs">Tabs</a></li>
|
||||
<li><a href="#article">Article</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -167,7 +171,7 @@
|
|||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
<div class="sm-4 col">Center (flex-center)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
|
|
@ -279,30 +283,38 @@
|
|||
<div id="forms" class="section">
|
||||
<h2>Forms</h2>
|
||||
<div class="form-group">
|
||||
<label>Input</label>
|
||||
<input type="text" placeholder="Nice input">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sm-4">
|
||||
<div class="form-group">
|
||||
<label>Block Level</label>
|
||||
<input class="input-block" type="text">
|
||||
<label for="paperInputs2">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-8">
|
||||
<div class="form-group">
|
||||
<label>Block Level</label>
|
||||
<input class="input-block" type="text">
|
||||
<label for="paperInputs3">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Disabled</label>
|
||||
<input type="text" placeholder="Disabled" disabled>
|
||||
<label for="paperInputs4">Disabled</label>
|
||||
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select>
|
||||
<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">
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
|
|
@ -329,30 +341,38 @@
|
|||
<div class="docs">
|
||||
<pre>
|
||||
<div class="form-group">
|
||||
<label>Input</label>
|
||||
<input type="text" placeholder="Nice input">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sm-4">
|
||||
<div class="form-group">
|
||||
<label>Block Level</label>
|
||||
<input class="input-block" type="text">
|
||||
<label for="paperInputs2">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-8">
|
||||
<div class="form-group">
|
||||
<label>Block Level</label>
|
||||
<input class="input-block" type="text">
|
||||
<label for="paperInputs3">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Disabled</label>
|
||||
<input type="text" placeholder="Disabled" disabled>
|
||||
<label for="paperInputs4">Disabled</label>
|
||||
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select>
|
||||
<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">
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
|
|
@ -650,6 +670,7 @@ function add(x, y) {
|
|||
<button popover-top="Popover on top">Popover on top and on a button!</button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cards" class="section">
|
||||
<h2>Cards</h2>
|
||||
<h4>Full card example</h4>
|
||||
|
|
@ -716,7 +737,7 @@ function add(x, y) {
|
|||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<img class="image-bottom" src="http://via.placeholder.com/550x250" alt="Card example image">
|
||||
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -729,7 +750,7 @@ function add(x, y) {
|
|||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<img class="image-bottom" src="http://via.placeholder.com/550x250" alt="Card example image">
|
||||
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
|
|
@ -1163,6 +1184,46 @@ function add(x, y) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="article" class="section">
|
||||
<h2>Article</h2>
|
||||
|
||||
<article class="article">
|
||||
<h1 class="article-title"><a href="">Article Title</a></h1>
|
||||
<p class="article-meta">Written by <a href="#">Super User</a> on 24 November 2017. Posted in <a href="#">Blog</a></p>
|
||||
<p class="text-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellendus excepturi, consequatur illo rerum, non sint asperiores dolore sapiente, vitae blanditiis. Officiis at quaerat modi earum, fugiat magni impedit, aperiam.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?</p>
|
||||
|
||||
<div class="row">
|
||||
<button>Read More</button>
|
||||
<button>5 Comments</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<article class="article">
|
||||
<h1 class="article-title"><a href="">Article Title</a></h1>
|
||||
<p class="article-meta">Written by <a href="#">Super User</a></p>
|
||||
<p class="text-lead"> Lorem... </p>
|
||||
<p>Lorem...</p>
|
||||
|
||||
<div class="row">
|
||||
<button>Read More</button>
|
||||
<button>5 Comments</button>
|
||||
</div>
|
||||
</article>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section">
|
||||
<h2 id="download">Download and Link</h2>
|
||||
<h4>Download</h4>
|
||||
|
|
|
|||
26
src/article.less
Normal file
26
src/article.less
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
article {
|
||||
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
font-size: 15px;
|
||||
color: @muted;
|
||||
|
||||
a {
|
||||
color: @muted-text;
|
||||
background-image: none;
|
||||
|
||||
&:hover {
|
||||
color: @light-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-lead {
|
||||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
margin: 35px 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,6 +11,8 @@ button, .paper-btn, [type="button"] {
|
|||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
&.btn-large {
|
||||
.shadow-large;
|
||||
font-size:2rem;
|
||||
|
|
@ -25,10 +27,20 @@ button, .paper-btn, [type="button"] {
|
|||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover{
|
||||
&:hover {
|
||||
.shadow-hover;
|
||||
}
|
||||
&.disabled, &[disabled]{
|
||||
&:focus{
|
||||
border: 2px solid @secondary;
|
||||
-webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
-moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
}
|
||||
&:active {
|
||||
border-color: hsla(0,0%,0%,.2);
|
||||
transition: none;
|
||||
}
|
||||
&.disabled, &[disabled] {
|
||||
.disabled;
|
||||
}
|
||||
}
|
||||
|
|
@ -63,4 +75,4 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.make-button-color-classes();
|
||||
.make-button-color-classes();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
.card {
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
border: 2px solid @muted-light;
|
||||
|
||||
&:hover {
|
||||
.shadow-hover;
|
||||
}
|
||||
border: 2px solid @muted-light;
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,27 @@
|
|||
@columnNames: col, sm, md, lg;
|
||||
@columnSizes: 0px, 768px, 992px, 1200px;
|
||||
|
||||
@numberOfColumns: 12;
|
||||
|
||||
.make-column-class(@name, @size, @n, @p: 1) when (@p =< @n) {
|
||||
@percent: (@p * 100% / @n);
|
||||
.@{name}-@{p} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
|
||||
.make-column-class(@name, @size, @n, (@p + 1));
|
||||
}
|
||||
|
||||
.make-column-classes(@n, @j: 1) when (@j =< length(@columnNames)) {
|
||||
@columnName: extract(@columnNames, @j);
|
||||
@columnSize: extract(@columnSizes, @j);
|
||||
@media (min-width: @columnSize) {
|
||||
.make-column-class(@columnName, @columnSize, @n);
|
||||
}
|
||||
|
||||
.make-column-classes(@n, @j + 1);
|
||||
}
|
||||
|
||||
.center-all() {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
|
|
@ -11,47 +35,6 @@
|
|||
flex: 0 0 @percent;
|
||||
max-width: @percent;
|
||||
}
|
||||
.generate-col(@n, @i: 1) when (@i =< @n) {
|
||||
@percent: (@i * 100% / @n);
|
||||
.col-@{i} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
.generate-col(@n, (@i + 1));
|
||||
}
|
||||
|
||||
.generate-sm(@n, @i: 1) when (@i =< @n) {
|
||||
@percent: (@i * 100% / @n);
|
||||
@media (min-width: 768px) {
|
||||
.sm-@{i} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
}
|
||||
.generate-sm(@n, (@i + 1));
|
||||
}
|
||||
.generate-md(@n, @i: 1) when (@i =< @n) {
|
||||
@percent: (@i * 100% / @n);
|
||||
@media (min-width: 992px) {
|
||||
.md-@{i} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
}
|
||||
.generate-md(@n, (@i + 1));
|
||||
}
|
||||
.generate-lg(@n, @i: 1) when (@i =< @n) {
|
||||
@percent: (@i * 100% / @n);
|
||||
@media (min-width: 1200px) {
|
||||
.lg-@{i} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
}
|
||||
.generate-lg(@n, (@i + 1));
|
||||
}
|
||||
.generate-columns(@n) {
|
||||
.generate-col(@n);
|
||||
.generate-sm(@n);
|
||||
.generate-md(@n);
|
||||
.generate-lg(@n);
|
||||
}
|
||||
.row {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
|
@ -118,7 +101,7 @@
|
|||
width: auto;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
.generate-columns(12);
|
||||
.make-column-classes(@numberOfColumns);
|
||||
.align-top {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ html {
|
|||
font-family: @body-font, sans-serif;
|
||||
color: @font-color;
|
||||
}
|
||||
p, a, button, table, thead, tbody, th, tr, td, input, select, option {
|
||||
p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option {
|
||||
font-family: @body-font, sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
input, select {
|
||||
input, select, textarea {
|
||||
display: block;
|
||||
background:transparent;
|
||||
color:@primary;
|
||||
|
|
@ -32,6 +32,16 @@ input, select {
|
|||
.input-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea{
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
textarea.no-resize{
|
||||
resize: none;
|
||||
}
|
||||
|
||||
// TODO: make these classes implicit. We can find out what class to apply based on its type
|
||||
.paper-radio, .paper-check {
|
||||
display: block;
|
||||
|
|
@ -53,7 +63,7 @@ input, select {
|
|||
input + span:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: -.25rem;
|
||||
position: relative;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid @primary;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,32 @@
|
|||
@shadow-color-regular: hsla(0,0%,0%,.2);
|
||||
@shadow-color-hover: hsla(0,0%,0%,.3);
|
||||
|
||||
@shadow-small: 10px 19px 17px -13px @shadow-color-regular;
|
||||
@shadow-regular: 15px 28px 25px -18px @shadow-color-regular;
|
||||
@shadow-large: 20px 38px 34px -26px @shadow-color-regular;
|
||||
@shadow-hover: 2px 8px 8px -5px @shadow-color-hover;
|
||||
|
||||
.shadow {
|
||||
-webkit-box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
|
||||
-moz-box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
|
||||
box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
|
||||
transition:all .5s ease;
|
||||
-webkit-box-shadow: @shadow-regular;
|
||||
-moz-box-shadow: @shadow-regular;
|
||||
box-shadow: @shadow-regular;
|
||||
transition: all .5s ease;
|
||||
&.shadow-large {
|
||||
-webkit-box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
|
||||
-moz-box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
|
||||
box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
|
||||
-webkit-box-shadow: @shadow-large;
|
||||
-moz-box-shadow: @shadow-large;
|
||||
box-shadow: @shadow-large;
|
||||
}
|
||||
&.shadow-small {
|
||||
-webkit-box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
|
||||
-moz-box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
|
||||
box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
|
||||
-webkit-box-shadow: @shadow-small;
|
||||
-moz-box-shadow: @shadow-small;
|
||||
box-shadow: @shadow-small;
|
||||
}
|
||||
&.shadow-hover {
|
||||
&:hover{
|
||||
-webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
-moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
-webkit-box-shadow: @shadow-hover;
|
||||
-moz-box-shadow: @shadow-hover;
|
||||
box-shadow: @shadow-hover;
|
||||
transform: translate(0, 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,4 +17,5 @@
|
|||
@import (less) "./cards.less";
|
||||
@import (less) "./badges.less";
|
||||
@import (less) "./alerts.less";
|
||||
@import (less) "./tabs.less";
|
||||
@import (less) "./tabs.less";
|
||||
@import (less) "./article.less";
|
||||
|
|
|
|||
Loading…
Reference in a new issue