├── .editorconfig ├── .gitignore ├── .npmignore ├── ATTRIB.md ├── CHANGELOG.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── build ├── postcss.config.js └── webpack.config.js ├── dist ├── agency-landing.html ├── app-promo.html ├── css │ ├── shards-demo.css │ ├── shards-demo.css.map │ ├── shards-demo.min.css │ ├── shards-demo.min.css.map │ ├── shards-extras.css │ ├── shards-extras.css.map │ ├── shards-extras.min.css │ ├── shards-extras.min.css.map │ ├── shards.css │ ├── shards.css.map │ ├── shards.min.css │ └── shards.min.css.map ├── images │ ├── agency-landing │ │ ├── shards-logo-white.svg │ │ └── welcome-cover.jpg │ ├── app-promo │ │ ├── badge-apple-store.png │ │ ├── badge-google-play-store.png │ │ ├── features-background.jpg │ │ ├── iphone-app-mockup.png │ │ ├── iphone-app-screenshot.png │ │ ├── shards-logo-green.svg │ │ └── welcome-cover.jpg │ ├── common │ │ ├── avatar-1.jpeg │ │ ├── avatar-2.jpeg │ │ ├── avatar-3.jpeg │ │ ├── card-1.jpg │ │ ├── card-2.jpg │ │ └── card-3.jpg │ └── demo │ │ ├── fontawesome-icons.svg │ │ ├── material-icons.svg │ │ ├── shard-1-5x-3.png │ │ ├── shards-agency-landing-page-demo.jpg │ │ ├── shards-app-demo-page-demo.jpg │ │ ├── shards-logo-black.svg │ │ ├── shards-logo.svg │ │ └── stock-photos │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg ├── js │ ├── demo.js │ ├── demo.min.js │ ├── shards.js │ └── shards.min.js └── shards-demo.html ├── logo.jpg ├── package-lock.json ├── package.json └── src ├── extras ├── agency-landing.html ├── app-promo.html ├── images │ ├── agency-landing │ │ ├── shards-logo-white.svg │ │ └── welcome-cover.jpg │ ├── app-promo │ │ ├── badge-apple-store.png │ │ ├── badge-google-play-store.png │ │ ├── features-background.jpg │ │ ├── iphone-app-mockup.png │ │ ├── iphone-app-screenshot.png │ │ ├── shards-logo-green.svg │ │ └── welcome-cover.jpg │ ├── common │ │ ├── avatar-1.jpeg │ │ ├── avatar-2.jpeg │ │ ├── avatar-3.jpeg │ │ ├── card-1.jpg │ │ ├── card-2.jpg │ │ └── card-3.jpg │ └── demo │ │ ├── fontawesome-icons.svg │ │ ├── material-icons.svg │ │ ├── shard-1-5x-3.png │ │ ├── shards-agency-landing-page-demo.jpg │ │ ├── shards-app-demo-page-demo.jpg │ │ ├── shards-logo-black.svg │ │ ├── shards-logo.svg │ │ └── stock-photos │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg ├── js │ └── shards-demo.js ├── scss │ ├── _agency-landing.scss │ ├── _app-promo.scss │ ├── shards-demo.scss │ └── shards-extras.scss └── shards-demo.html ├── js ├── index.js └── sliderPlugin.js └── scss ├── _alert.scss ├── _badge.scss ├── _button-group.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _code.scss ├── _custom-datepicker.scss ├── _custom-forms.scss ├── _custom-sliders.scss ├── _dropdown.scss ├── _forms.scss ├── _functions.scss ├── _icons.scss ├── _images.scss ├── _input-group.scss ├── _jumbotron.scss ├── _list-group.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _navbar.scss ├── _pagination.scss ├── _popover.scss ├── _progress.scss ├── _reboot.scss ├── _root.scss ├── _tables.scss ├── _tooltip.scss ├── _transitions.scss ├── _type.scss ├── _utilities.scss ├── _variables.scss ├── mixins ├── _alert.scss ├── _background-variant.scss ├── _badge.scss ├── _border-radius.scss ├── _box-shadow.scss ├── _breakpoints.scss ├── _buttons.scss ├── _clearfix.scss ├── _float.scss ├── _forms.scss ├── _gradients.scss ├── _hover.scss ├── _image.scss ├── _list-group.scss ├── _lists.scss ├── _nav-divider.scss ├── _pagination.scss ├── _reset-text.scss ├── _resize.scss ├── _screen-reader.scss ├── _size.scss ├── _table-row.scss ├── _text-emphasis.scss ├── _text-hide.scss ├── _text-truncate.scss ├── _transition.scss └── _visibility.scss ├── shards.scss └── utilities ├── _background.scss ├── _borders.scss ├── _position.scss ├── _shadows.scss └── _text.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | yarn.lock 4 | 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Generated files 2 | .DS_Store 3 | 4 | # node_modules 5 | node_modules 6 | 7 | # Configs 8 | .editorconfig 9 | .gitignore 10 | .npmignore 11 | 12 | # Repo related files 13 | /logo.png 14 | /ATTRIB.md 15 | /CHANGELOG.md 16 | /CONTRIBUTING.md 17 | /ISSUE_TEMPLATE.md 18 | 19 | # Lockfiles 20 | npm-shrinkwrap.json 21 | package-lock.json 22 | yarn.lock 23 | 24 | # Builder files 25 | /build 26 | 27 | # Logs 28 | *.log 29 | -------------------------------------------------------------------------------- /ATTRIB.md: -------------------------------------------------------------------------------- 1 | # ATTRIBUTIONS 2 | 3 | While building this project we used various free resources built and made 4 | available by some wonderful people around the world. Below is a list with 5 | some of them. Thank you! 🙇 6 | 7 | ## 📱 Mockups 8 | * [Anthony Boyd's iPhone X Mockup](https://www.anthonyboyd.graphics) 9 | 10 | ## 📸 Stock Photography 11 | * [Christopher Gower](https://unsplash.com/photos/vjMgqUkS8q8) 12 | * [Alesia Kazantceva](https://unsplash.com/photos/XLm6-fPwK5Q) 13 | * [Jeremy Bishop](https://unsplash.com/photos/_CFv3bntQlQ) 14 | * [Ariel Lustre](https://unsplash.com/photos/DcwF1bhq4CY) 15 | * [Pixabay - Beach](https://pixabay.com/en/sea-ocean-water-waves-nature-2559826/) 16 | 17 | ## 📦 Libraries 18 | * [Bootstrap Datepicker by Stefan Petre and Andrew Rowls (Apache 2.0)](https://github.com/uxsolutions/bootstrap-datepicker) 19 | * [noUiSlider by Léon Gersen (WTFPL License)](https://refreshless.com/nouislider/download/) 20 | 21 | ## 📦 Icon Packs 22 | * [Material Icons](http://material.io/icons) 23 | * [FontAwesome Icons](http://fontawesome.io) 24 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). 6 | 7 | ## 📦 2.1.0 - 2018/09/16 8 | 9 | *General support for Bootstrap 4.1.3.* 10 | * **Changed:** Custom controls, fixed misalignments. 11 | * **Changed:** Form controls misalignments and height adjustments. 12 | * **Added:** Support for `.text-body` and `.text-monospace` utils. 13 | 14 | ## 📦 2.0.3 - 2018/05/03 15 | 16 | ### Added 17 | - Support for [noUiSlider 11.1.0](https://github.com/leongersen/noUiSlider#1110-2018-04-02). 18 | 19 | ### Changed 20 | - Fixed `$popover-arrow-width` interpolation issue [(#32)](https://github.com/DesignRevision/shards-ui/issues/32). 21 | - Fixed demo page responsive display issues. [(#29)](https://github.com/DesignRevision/shards-ui/issues/29). 22 | - Updated dependencies. 23 | 24 | 25 | ## 📦 2.0.2 - 2018/03/28 26 | 27 | ### Added 28 | - Added `.input-group-middle` input group add-on. 29 | - Added `.custom-toggle-sm` class modifier. 30 | - Added `.list-group-sm` class modifier. 31 | 32 | ### Changed 33 | - Added small toggle size variation to demo page 34 | - Adjusted small addon variable (sm resulted in padding larger than default). 35 | - Updated the demo page with new `.input-group-middle` add-on. 36 | 37 | ## 📦 2.0.1 - 2018-02-19 38 | 39 | ### Added 40 | - Small dropdown menu modifier class. 41 | - Small card modifier. 42 | 43 | ### Changed 44 | - BS4 dependency import path. 45 | - Fixed the package entrypoint path so Shards' JavaScript package could be imported as a module. 46 | - Input group append/prepend z-index issue. 47 | 48 | ## 📦 2.0.0 - 2018-02-08 49 | 50 | - Skipped minor version due to changes that break backward compatibility. 51 | 52 | ### Changed 53 | - Upgraded compatibility with Bootstrap 4 final. 54 | - Improved outlined buttons active state styles. 55 | - Improved form label sizing. 56 | - Improved default select element styles. 57 | - Improved toggle elements focused state styles. 58 | - Fixed indeterminate checkbox styles. 59 | - Fixed multiple IE11 app promo extra page layout issues [(#11)](https://github.com/DesignRevision/shards-ui/issues/11) 60 | 61 | ### Added 62 | - Extended support for customisation options via variables. 63 | 64 | ### Removed 65 | - Removed redundant margin adjustments on paragraphs following headings. 66 | - Removed unused SCSS variables. 67 | 68 | ## 📦 1.1.2 - 2017-12-04 69 | 70 | ### Changed 71 | - Fixed custom toggle issues [(#8)](https://github.com/DesignRevision/shards-ui/issues/8) and [(#9)](https://github.com/DesignRevision/shards-ui/issues/9). 72 | - Fixed demo page elements issues [(#10)](https://github.com/DesignRevision/shards-ui/issues/10). 73 | - Corrected first field "type" in the bottom form of the demo agency landing page. 74 | 75 | 76 | ## 📦 1.1.0 - 2017-11-10 77 | 78 | ### Added 79 | - Demo example page as extra. 80 | 81 | ### Changed 82 | - Updated license to MIT. 83 | 84 | 85 | ## [1.0.0] - 2017-11-07 86 | - Initial release. 87 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Submitting an Issue 9 | Before submitting an issue please review the [issue template](ISSUE_TEMPLATE.md) and use it as a starting point. 10 | 11 | ## Pull Request Process 12 | 13 | 1. Update the README.md with details of changes. 14 | 2. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 15 | 3. You may merge the Pull Request in once you have the sign-off of other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you. 16 | 17 | ## Code of Conduct 18 | 19 | ### Our Pledge 20 | 21 | In the interest of fostering an open and welcoming environment, we as 22 | contributors and maintainers pledge to making participation in our project and 23 | our community a harassment-free experience for everyone, regardless of age, body 24 | size, disability, ethnicity, gender identity and expression, level of experience, 25 | nationality, personal appearance, race, religion, or sexual identity and 26 | orientation. 27 | 28 | ### Our Standards 29 | 30 | Examples of behavior that contributes to creating a positive environment 31 | include: 32 | 33 | * Using welcoming and inclusive language 34 | * Being respectful of differing viewpoints and experiences 35 | * Gracefully accepting constructive criticism 36 | * Focusing on what is best for the community 37 | * Showing empathy towards other community members 38 | 39 | Examples of unacceptable behavior by participants include: 40 | 41 | * The use of sexualized language or imagery and unwelcome sexual attention or 42 | advances 43 | * Trolling, insulting/derogatory comments, and personal or political attacks 44 | * Public or private harassment 45 | * Publishing others' private information, such as a physical or electronic 46 | address, without explicit permission 47 | * Other conduct which could reasonably be considered inappropriate in a 48 | professional setting 49 | 50 | ### Our Responsibilities 51 | 52 | Project maintainers are responsible for clarifying the standards of acceptable 53 | behavior and are expected to take appropriate and fair corrective action in 54 | response to any instances of unacceptable behavior. 55 | 56 | Project maintainers have the right and responsibility to remove, edit, or 57 | reject comments, commits, code, wiki edits, issues, and other contributions 58 | that are not aligned to this Code of Conduct, or to ban temporarily or 59 | permanently any contributor for other behaviors that they deem inappropriate, 60 | threatening, offensive, or harmful. 61 | 62 | ### Scope 63 | 64 | This Code of Conduct applies both within project spaces and in public spaces 65 | when an individual is representing the project or its community. Examples of 66 | representing a project or community include using an official project e-mail 67 | address, posting via an official social media account, or acting as an appointed 68 | representative at an online or offline event. Representation of a project may be 69 | further defined and clarified by project maintainers. 70 | 71 | ### Enforcement 72 | 73 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 74 | reported by contacting the project team at contact@designrevision.com. All 75 | complaints will be reviewed and investigated and will result in a response that 76 | is deemed necessary and appropriate to the circumstances. The project team is 77 | obligated to maintain confidentiality with regard to the reporter of an incident. 78 | Further details of specific enforcement policies may be posted separately. 79 | 80 | Project maintainers who do not follow or enforce the Code of Conduct in good 81 | faith may face temporary or permanent repercussions as determined by other 82 | members of the project's leadership. 83 | 84 | ### Attribution 85 | 86 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 87 | available at [http://contributor-covenant.org/version/1/4][version] 88 | 89 | [homepage]: http://contributor-covenant.org 90 | [version]: http://contributor-covenant.org/version/1/4/ 91 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Issue tracker is **ONLY** used for reporting bugs. 2 | 3 | 4 | 5 | ## Expected Behavior 6 | 7 | 8 | ## Current Behavior 9 | 10 | 11 | ## Possible Solution 12 | 13 | 14 | ## Steps to Reproduce 15 | 16 | 17 | 1. ... 18 | 2. ... 19 | 3. ... 20 | 21 | ## Context (Environment) 22 | 23 | 24 | 25 | ## Detailed Description 26 | 27 | 28 | ## Possible Implementation 29 | 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 DesignRevision 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 | A modern UI kit packed with 2 custom page templates and 11 extra
custom components built on top of Bootstrap (4.3.1). 7 |

8 | 9 |
10 | 11 |

12 | 13 | `npm` version 14 | 15 | 16 | `npm` downloads 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | Dependencies 33 | 34 | 35 | DevDependencies 36 | 37 |

38 | 39 |
40 | 41 |

42 | Components Demo • 43 | Templates Demo • 44 | Documentation • 45 | Official Page 46 |

47 | 48 |
49 | 50 | 51 | ### Getting Started 52 | 53 | Currently there are only three ways of downloading Shards: 54 | 55 | * [Official Website](https://designrevision.com/download/shards) 56 | * [Release Package](https://github.com/DesignRevision/shards-ui/releases) 57 | * [`npm`](https://www.npmjs.com/package/shards-ui) 58 | 59 | The distributed Shards assets are also available via CDN through [unpkg](https://unpkg.com/shards-ui@latest/) and [jsDelivr](https://cdn.jsdelivr.net/npm/shards-ui@latest/). 60 | 61 | To install with `npm`: 62 | 63 | ```bash 64 | npm install --save shards-ui bootstrap 65 | ``` 66 | 67 |
68 | 69 | ### Dependencies 70 | 71 | The only hard dependency is Bootstrap 4.3.1 which needs to be included in your HTML document before Shards. Datepickers and slider controls also require the Shards JavaScript dependency. 72 | 73 |
74 | 75 | ### Quick Start 76 | 77 | If you're using a bundler like `webpack`, you should skip to [Usage with Bundlers](#usage-with-bundlers). 78 | 79 | In order to take advantage of both Bootstrap and Shards' features you may want to use the following starter template that includes all dependencies. 80 | 81 | ```html 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |

Hello, world!

94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | ``` 104 | 105 |
106 | 107 | ### Usage with Bundlers 108 | 109 | If you're using a bundler like [`webpack`](https://webpack.js.org) (with [`style-loader`](https://github.com/webpack-contrib/style-loader)/[`css-loader`](https://github.com/webpack-contrib/css-loader)) or [`parcel`](https://parceljs.org), you can [install `shards` with `npm`](#getting-started) and import it: 110 | 111 | ```javascript 112 | // app.js 113 | import 'bootstrap/dist/css/bootstrap.min.css'; 114 | import 'shards-ui/dist/css/shards.min.css'; 115 | // Optional JavaScript 116 | // JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS 117 | // Install them with `npm` as well 118 | import 'jquery/dist/jquery.slim.min'; 119 | import 'popper.js/dist/umd/popper.min'; 120 | import 'bootstrap/dist/js/bootstrap.min'; 121 | import 'shards-ui/dist/js/shards.min'; 122 | ``` 123 | 124 |
125 | 126 | ### Built using 127 | 128 | * [Bootstrap Datepicker by Stefan Petre and Andrew Rowls (Apache 2.0)](https://github.com/uxsolutions/bootstrap-datepicker) 129 | * [noUiSlider by Léon Gersen (WTFPL License)](https://refreshless.com/nouislider/download/) 130 | * [Material Icons](http://material.io/icons) 131 | * [FontAwesome Icons](http://fontawesome.io) 132 | 133 |
134 | 135 | ### Contributing 136 | 137 | Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us. 138 | 139 |
140 | 141 | ### Feedback 142 | 143 | Building better products is something I'm trying to get really good at. I’d love to hear more about how you plan on using Shards and what features you consider important in similar products. If you could spare a few minutes, please fill out [this Google Form](https://docs.google.com/forms/d/e/1FAIpQLScyj8F-fyVlb-AAeM-UFXSpDgrfdC81yWm1BNF8_gVCpXN8jw/viewform?usp=sf_link) to help me better understand your current context and what I could do to improve my products. 144 | 145 |
146 | 147 | ### Acknowledgments 148 | 149 | While building this project we used various free resources built and made 150 | available by some wonderful people around the world. See the [ATTRIB.md](ATTRIB.md) file for details. 151 | 152 |
153 | 154 | ### Changelog 155 | 156 | [View notable changes.](CHANGELOG.md) 157 | -------------------------------------------------------------------------------- /build/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = (context) => ({ 2 | plugins: { 3 | autoprefixer: { 4 | browsers: [ 5 | 'Chrome >= 45', 6 | 'Firefox ESR', 7 | 'Edge >= 12', 8 | 'Explorer >= 10', 9 | 'iOS >= 9', 10 | 'Safari >= 9', 11 | 'Android >= 4.4', 12 | 'Opera >= 30' 13 | ] 14 | } 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /build/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: { 5 | shards: './src/js/index.js', 6 | demo: './src/extras/js/shards-demo.js' 7 | }, 8 | target: 'web', 9 | output: { 10 | path: path.resolve(__dirname, '../dist/js'), 11 | filename: '[name].js' 12 | }, 13 | externals: { 14 | 'jquery': 'jQuery' 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /dist/css/shards-demo.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";.loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1500;transition:opacity .5s ease-in-out}.page-loader{width:40px;height:40px;margin:auto;top:50%;left:50%;position:absolute;margin-top:-20px;margin-left:-20px;background-color:#333;background:#007bff;border-radius:100%;transition-timing-function:cubic-bezier(.86,0,.07,1);-webkit-animation:pulse-load 1.2s infinite ease-in-out;animation:pulse-load 1.2s infinite ease-in-out}@-webkit-keyframes pulse-load{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes pulse-load{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.fb-like>span,.fb-share-button>span{height:34px!important}.welcome{background:#fff;height:100vh;text-align:center;overflow:hidden;position:relative}.welcome h1{font-size:6.25rem;font-weight:500;letter-spacing:-.3125rem;margin-top:35vh;margin-bottom:20px;color:#1f2429;line-height:1}@media (max-width:575.98px){.welcome h1{font-size:5.9rem}}.welcome .inner-wrapper{position:relative;z-index:3}.welcome .inner-wrapper>p{margin-bottom:20px;color:#5f738e;transition-delay:150ms}.welcome .inner-wrapper>.action-links{transition-delay:.3s}.welcome .product-by{position:relative;z-index:3;margin-bottom:30px}.welcome .product-by a:hover{text-decoration:none}.welcome .product-by p{font-size:10px;color:#b1b4bd;text-transform:uppercase;margin:0}.welcome .product-by img{max-width:180px}.welcome:after,.welcome:before{content:'';position:absolute;width:50vw;height:80vh;-webkit-transform:rotate(-25deg);transform:rotate(-25deg);z-index:1}.welcome:before{left:-15vw;top:-30%;background:#fff;background:linear-gradient(to right,#e2e7ef 0,#fff 100%)}@media (max-width:991.98px){.welcome:before{left:-30%}}@media (max-width:767.98px){.welcome:before{left:-35%}}.welcome:after{right:-5vw;top:-15%;background:#fff;background:linear-gradient(to right,#fff 0,#e2e7ef 100%)}@media (max-width:991.98px){.welcome:after{right:-17%}}.shard{will-change:transform;position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);top:40px;z-index:1;width:280px;-webkit-animation:float 7s ease-in-out infinite;animation:float 7s ease-in-out infinite;z-index:2}@-webkit-keyframes float{0%{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}50%{-webkit-transform:translate(-50%,-20px);transform:translate(-50%,-20px)}100%{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}}@keyframes float{0%{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}50%{-webkit-transform:translate(-50%,-20px);transform:translate(-50%,-20px)}100%{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}}.page-content{position:relative;background:#fafafa;padding-top:5.3125rem}.page-content:before{content:'';height:500px;width:100%;position:absolute;top:0;right:0;background:linear-gradient(to bottom,#fff 0,#fafafa 100%)}.page-content .color-wrapper{float:left}@media (max-width:575.98px){.page-content .color-wrapper{float:none;max-width:230px;margin:0 auto}}.page-content .color{padding:25px 20px;text-align:center;background:#fff;margin-bottom:30px;box-shadow:0 0 25px rgba(40,47,60,.05),0 20px 25px rgba(40,47,60,.05),0 3px 4px rgba(40,47,60,.05)}.page-content .color:last-child{margin-right:0}.page-content .color .swatch{position:relative;border-radius:50%;margin:0 auto 15px auto;width:110px;height:110px}.page-content .color .title{display:inline-block;font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;width:100%;font-size:1rem}.page-content .color .hex-value{font-family:"Roboto Mono",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;color:#8f99ac;font-size:12px;text-transform:uppercase}.page-content .content .example{margin:45px 0 60px 0}.page-content .content .example.emphasized{padding:25px 20px;background:#fff;box-shadow:0 0 25px rgba(40,47,60,.05),0 20px 25px rgba(40,47,60,.05),0 3px 4px rgba(40,47,60,.05)}.page-content .content .table{background:#fff;box-shadow:0 0 25px rgba(40,47,60,.05),0 20px 25px rgba(40,47,60,.05),0 3px 4px rgba(40,47,60,.05)}.page-content .content .table-striped tbody tr:nth-of-type(odd){background-color:#f7f8fb}.page-content .content .table td,.page-content .content .table th{padding:30px 25px}.page-content .content .table th{padding:15px 25px;font-size:11px;font-weight:300;text-transform:uppercase;line-height:1;color:#9ba4ae;border:none}.page-content .content .table tbody td{font-size:.8125rem;vertical-align:middle}.page-content .content .table tbody td h1,.page-content .content .table tbody td h2,.page-content .content .table tbody td h3,.page-content .content .table tbody td h4,.page-content .content .table tbody td h5,.page-content .content .table tbody td h6,.page-content .content .table tbody td p{margin:0;line-height:1}.page-content .content .table tbody td p{font-size:1rem!important}@media (max-width:767.98px){.sm-hidden{display:none}}.ll-image{text-indent:-9000px}.hidden{opacity:0}.slide-in{will-change:transform;opacity:0;-webkit-transform:translateY(50%);transform:translateY(50%);transition:opacity 850ms cubic-bezier(.785,.135,.15,.86),-webkit-transform 850ms cubic-bezier(.785,.135,.15,.86);transition:transform 850ms cubic-bezier(.785,.135,.15,.86),opacity 850ms cubic-bezier(.785,.135,.15,.86);transition:transform 850ms cubic-bezier(.785,.135,.15,.86),opacity 850ms cubic-bezier(.785,.135,.15,.86),-webkit-transform 850ms cubic-bezier(.785,.135,.15,.86)}.slide-in.visible{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.icons-example .icons-example-wrapper{padding:100px 0}@media (max-width:850px){.icons-example .icons-example-wrapper{min-width:100%}}.icons-example .icons-example-wrapper.material-icons{background:#1c1e21}.icons-example .icons-example-wrapper.font-awesome{background:#212529}@media (max-width:1199px){.example-buttons .buttons-wrapper button{margin:0 5px}}@media (max-width:850px){.example-buttons .buttons-wrapper{-ms-flex-flow:column!important;flex-flow:column!important;-ms-flex-flow:wrap;flex-flow:wrap}.example-buttons .buttons-wrapper button{min-width:30%;margin-bottom:20px;-ms-flex:1;flex:1}}@media (max-width:450px){.example-buttons .buttons-wrapper button{min-width:50%}}@media (max-width:991.98px){#cards .last{display:block!important}}@media (max-width:767.98px){#cards .card{max-width:350px;display:table;margin-left:auto;margin-right:auto}}@media (max-width:767.98px){#progress-bars .pb-widths{margin-bottom:1.875rem}}@media (max-width:767.98px){#popups-popovers .row>div{margin-bottom:1.875rem}}@media (max-width:420px){#popups-popovers button{display:block;width:100%;margin-bottom:10px}}@media (max-width:767.98px){#badges .badge{display:table;margin-left:auto;margin-right:auto;margin-bottom:10px;width:100%}}@media (max-width:767.98px){#forms .custom-dropdown-example{margin-bottom:1.5rem}}@media (max-width:767.98px){.custom-controls-example{width:100%;max-width:100%;-ms-flex:none;flex:none;display:block;padding:0!important;margin-bottom:1.5rem}.custom-controls-example:last-child{margin-bottom:0}}#documentation{border-top:1px solid #ddd}.footer-cta{padding:100px 0}.main-footer a:hover{text-decoration:none} 2 | /*# sourceMappingURL=shards-demo.min.css.map */ -------------------------------------------------------------------------------- /dist/css/shards-extras.css: -------------------------------------------------------------------------------- 1 | .shards-landing-page--1 .welcome { 2 | position: relative; 3 | height: 100vh; 4 | min-height: 700px; 5 | background: url("../images/agency-landing/welcome-cover.jpg") no-repeat center center fixed; 6 | background-size: cover; 7 | } 8 | 9 | .shards-landing-page--1 .welcome:before { 10 | position: absolute; 11 | z-index: 0; 12 | content: ''; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | opacity: .8; 18 | background: #007bff; 19 | } 20 | 21 | @media (max-width: 767.98px) { 22 | .shards-landing-page--1 .welcome .inner-wrapper { 23 | text-align: center; 24 | } 25 | } 26 | 27 | @media (max-width: 400px) { 28 | .shards-landing-page--1 .welcome .welcome-heading { 29 | font-size: 2.415rem; 30 | } 31 | } 32 | 33 | .shards-landing-page--1 .section-title { 34 | position: relative; 35 | } 36 | 37 | .shards-landing-page--1 .section-title:after { 38 | content: ''; 39 | width: 30px; 40 | height: 2px; 41 | background: #007bff; 42 | position: absolute; 43 | left: 50%; 44 | margin-left: -15px; 45 | bottom: -20px; 46 | } 47 | 48 | .shards-landing-page--1 .feature .icon { 49 | border-radius: 50%; 50 | min-width: 65px; 51 | height: 65px; 52 | line-height: 65px; 53 | text-align: center; 54 | box-shadow: 0 2px 4px rgba(33, 37, 41, 0.1), 0 7px 14px rgba(33, 37, 41, 0.1); 55 | font-size: 27px; 56 | } 57 | 58 | .shards-landing-page--1 .section { 59 | border-bottom: 1px solid #eaebed; 60 | } 61 | 62 | .shards-landing-page--1 .section-invert { 63 | background: #f9fafc; 64 | } 65 | 66 | .shards-landing-page--1 .testimonials .avatar { 67 | max-width: 80px; 68 | overflow: hidden; 69 | } 70 | 71 | .shards-app-promo-page--1 .welcome { 72 | position: relative; 73 | height: 100vh; 74 | min-height: 700px; 75 | background: url("../images/app-promo/welcome-cover.jpg") no-repeat center center fixed; 76 | background-size: cover; 77 | } 78 | 79 | .shards-app-promo-page--1 .welcome:before { 80 | position: absolute; 81 | z-index: 0; 82 | content: ''; 83 | top: 0; 84 | left: 0; 85 | right: 0; 86 | bottom: 0; 87 | opacity: .9; 88 | background: #212529; 89 | } 90 | 91 | @media (max-width: 991.98px) { 92 | .shards-app-promo-page--1 .welcome { 93 | height: auto; 94 | } 95 | .shards-app-promo-page--1 .welcome .header-social-icons { 96 | display: none; 97 | } 98 | } 99 | 100 | @media (max-width: 767.98px) { 101 | .shards-app-promo-page--1 .welcome { 102 | height: auto; 103 | } 104 | .shards-app-promo-page--1 .welcome .inner-wrapper { 105 | padding-top: 4.5rem; 106 | text-align: center; 107 | } 108 | } 109 | 110 | @media (max-width: 400px) { 111 | .shards-app-promo-page--1 .welcome .welcome-heading { 112 | font-size: 2.415rem; 113 | } 114 | } 115 | 116 | .shards-app-promo-page--1 .welcome .iphone-mockup { 117 | max-width: 85%; 118 | } 119 | 120 | .shards-app-promo-page--1 .section-title { 121 | position: relative; 122 | } 123 | 124 | .shards-app-promo-page--1 .section-title:after { 125 | content: ''; 126 | width: 30px; 127 | height: 2px; 128 | background: #17c671; 129 | position: absolute; 130 | left: 50%; 131 | margin-left: -15px; 132 | bottom: -20px; 133 | } 134 | 135 | .shards-app-promo-page--1 .section-title.underline--left:after { 136 | left: 0; 137 | margin-left: 0; 138 | } 139 | 140 | .shards-app-promo-page--1 .app-screenshot { 141 | background: url("../images/app-promo/features-background.jpg") no-repeat center center fixed; 142 | background-size: cover; 143 | } 144 | 145 | .shards-app-promo-page--1 .app-screenshot:before { 146 | content: ''; 147 | position: absolute; 148 | top: 0; 149 | left: 0; 150 | bottom: 0; 151 | right: 0; 152 | background: #e9ecef; 153 | opacity: .6; 154 | } 155 | 156 | .shards-app-promo-page--1 .app-screenshot img { 157 | max-width: 300px; 158 | position: absolute; 159 | z-index: 1; 160 | top: 50%; 161 | left: 100%; 162 | -webkit-transform: translate(-50%, -50%); 163 | transform: translate(-50%, -50%); 164 | box-shadow: 0 13px 25px rgba(0, 0, 0, 0.05), 0 60px 100px rgba(192, 192, 192, 0.5); 165 | } 166 | 167 | @media (max-width: 991.98px) { 168 | .shards-app-promo-page--1 .app-screenshot img { 169 | display: table; 170 | position: static; 171 | -webkit-transform: translate(0); 172 | transform: translate(0); 173 | margin: 0 auto; 174 | } 175 | } 176 | 177 | .shards-app-promo-page--1 .feature .icon { 178 | border-radius: 50%; 179 | min-width: 65px; 180 | height: 65px; 181 | line-height: 65px; 182 | text-align: center; 183 | box-shadow: 0 2px 4px rgba(33, 37, 41, 0.1), 0 7px 14px rgba(33, 37, 41, 0.1); 184 | font-size: 27px; 185 | } 186 | 187 | @media (max-width: 767.98px) { 188 | .shards-app-promo-page--1 .feature .icon { 189 | margin-right: 1.5rem !important; 190 | } 191 | } 192 | 193 | .shards-app-promo-page--1 .blog .card-img-top { 194 | height: 100%; 195 | } 196 | 197 | .shards-app-promo-page--1 .section { 198 | border-bottom: 1px solid #eaebed; 199 | } 200 | 201 | .shards-app-promo-page--1 .section-invert { 202 | background: #f9fafc; 203 | } 204 | 205 | .shards-app-promo-page--1 .testimonials .avatar { 206 | max-width: 80px; 207 | overflow: hidden; 208 | } 209 | 210 | @media (max-width: 767.98px) { 211 | .shards-app-promo-page--1 .subscribe input, .shards-app-promo-page--1 .subscribe button { 212 | width: 100%; 213 | } 214 | } 215 | /*# sourceMappingURL=shards-extras.css.map */ -------------------------------------------------------------------------------- /dist/css/shards-extras.min.css: -------------------------------------------------------------------------------- 1 | .shards-landing-page--1 .welcome{position:relative;height:100vh;min-height:700px;background:url(../images/agency-landing/welcome-cover.jpg) no-repeat center center fixed;background-size:cover}.shards-landing-page--1 .welcome:before{position:absolute;z-index:0;content:'';top:0;left:0;right:0;bottom:0;opacity:.8;background:#007bff}@media (max-width:767.98px){.shards-landing-page--1 .welcome .inner-wrapper{text-align:center}}@media (max-width:400px){.shards-landing-page--1 .welcome .welcome-heading{font-size:2.415rem}}.shards-landing-page--1 .section-title{position:relative}.shards-landing-page--1 .section-title:after{content:'';width:30px;height:2px;background:#007bff;position:absolute;left:50%;margin-left:-15px;bottom:-20px}.shards-landing-page--1 .feature .icon{border-radius:50%;min-width:65px;height:65px;line-height:65px;text-align:center;box-shadow:0 2px 4px rgba(33,37,41,.1),0 7px 14px rgba(33,37,41,.1);font-size:27px}.shards-landing-page--1 .section{border-bottom:1px solid #eaebed}.shards-landing-page--1 .section-invert{background:#f9fafc}.shards-landing-page--1 .testimonials .avatar{max-width:80px;overflow:hidden}.shards-app-promo-page--1 .welcome{position:relative;height:100vh;min-height:700px;background:url(../images/app-promo/welcome-cover.jpg) no-repeat center center fixed;background-size:cover}.shards-app-promo-page--1 .welcome:before{position:absolute;z-index:0;content:'';top:0;left:0;right:0;bottom:0;opacity:.9;background:#212529}@media (max-width:991.98px){.shards-app-promo-page--1 .welcome{height:auto}.shards-app-promo-page--1 .welcome .header-social-icons{display:none}}@media (max-width:767.98px){.shards-app-promo-page--1 .welcome{height:auto}.shards-app-promo-page--1 .welcome .inner-wrapper{padding-top:4.5rem;text-align:center}}@media (max-width:400px){.shards-app-promo-page--1 .welcome .welcome-heading{font-size:2.415rem}}.shards-app-promo-page--1 .welcome .iphone-mockup{max-width:85%}.shards-app-promo-page--1 .section-title{position:relative}.shards-app-promo-page--1 .section-title:after{content:'';width:30px;height:2px;background:#17c671;position:absolute;left:50%;margin-left:-15px;bottom:-20px}.shards-app-promo-page--1 .section-title.underline--left:after{left:0;margin-left:0}.shards-app-promo-page--1 .app-screenshot{background:url(../images/app-promo/features-background.jpg) no-repeat center center fixed;background-size:cover}.shards-app-promo-page--1 .app-screenshot:before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;background:#e9ecef;opacity:.6}.shards-app-promo-page--1 .app-screenshot img{max-width:300px;position:absolute;z-index:1;top:50%;left:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-shadow:0 13px 25px rgba(0,0,0,.05),0 60px 100px rgba(192,192,192,.5)}@media (max-width:991.98px){.shards-app-promo-page--1 .app-screenshot img{display:table;position:static;-webkit-transform:translate(0);transform:translate(0);margin:0 auto}}.shards-app-promo-page--1 .feature .icon{border-radius:50%;min-width:65px;height:65px;line-height:65px;text-align:center;box-shadow:0 2px 4px rgba(33,37,41,.1),0 7px 14px rgba(33,37,41,.1);font-size:27px}@media (max-width:767.98px){.shards-app-promo-page--1 .feature .icon{margin-right:1.5rem!important}}.shards-app-promo-page--1 .blog .card-img-top{height:100%}.shards-app-promo-page--1 .section{border-bottom:1px solid #eaebed}.shards-app-promo-page--1 .section-invert{background:#f9fafc}.shards-app-promo-page--1 .testimonials .avatar{max-width:80px;overflow:hidden}@media (max-width:767.98px){.shards-app-promo-page--1 .subscribe button,.shards-app-promo-page--1 .subscribe input{width:100%}} 2 | /*# sourceMappingURL=shards-extras.min.css.map */ -------------------------------------------------------------------------------- /dist/css/shards-extras.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/extras/scss/_agency-landing.scss","../../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../../src/extras/scss/_app-promo.scss"],"names":[],"mappings":"AACA,iCAII,SAAA,SACA,OAAA,MACA,WAAA,MACA,WAAA,gDAAA,UAAA,OAAA,OAAA,MACA,gBAAA,MARJ,wCAWM,SAAA,SACA,QAAA,EACA,QAAA,GACA,IAAA,EACA,KAAA,EACA,MAAA,EACA,OAAA,EACA,QAAA,GACA,WAAA,QCqDF,4BDxEJ,gDAwBQ,WAAA,QAIJ,yBA5BJ,kDA8BQ,UAAA,UA9BR,uCAsCI,SAAA,SAtCJ,6CAwCM,QAAA,GACA,MAAA,KACA,OAAA,IACA,WAAA,QACA,SAAA,SACA,KAAA,IACA,YAAA,MACA,OAAA,MA/CN,uCAsDM,cAAA,IACA,UAAA,KACA,OAAA,KACA,YAAA,KACA,WAAA,OACA,WAAA,EAAA,IAAA,IAAA,iBAAA,CAAA,EAAA,IAAA,KAAA,kBACA,UAAA,KA5DN,iCAkEI,cAAA,IAAA,MAAA,QAlEJ,wCAuEI,WAAA,QAvEJ,8CA4EI,UAAA,KACA,SAAA,OE7EJ,mCAKQ,SAAA,SACA,OAAA,MACA,WAAA,MACA,WAAA,2CAAA,UAAA,OAAA,OAAA,MACA,gBAAA,MATR,0CAYU,SAAA,SACA,QAAA,EACA,QAAA,GACA,IAAA,EACA,KAAA,EACA,MAAA,EACA,OAAA,EACA,QAAA,GACA,WAAA,QDoDN,4BCxEJ,mCAyBU,OAAA,KAzBV,wDA2BiC,QAAA,MD6C7B,4BCxEJ,mCA+BU,OAAA,KA/BV,kDAkCY,YAAA,OACA,WAAA,QAIJ,yBAvCR,oDAwC6B,UAAA,UAxC7B,kDA4CyB,UAAA,IA5CzB,yCAkDQ,SAAA,SAlDR,+CAqDU,QAAA,GACA,MAAA,KACA,OAAA,IACA,WAAA,QACA,SAAA,SACA,KAAA,IACA,YAAA,MACA,OAAA,MA5DV,+DAkEY,KAAA,EACA,YAAA,EAnEZ,0CA0EQ,WAAA,iDAAA,UAAA,OAAA,OAAA,MACA,gBAAA,MA3ER,iDA8EU,QAAA,GACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,OAAA,EACA,MAAA,EACA,WAAA,QACA,QAAA,GArFV,8CAyFU,UAAA,MACA,SAAA,SACA,QAAA,EACA,IAAA,IACA,KAAA,KACA,kBAAA,qBAAA,UAAA,qBACA,WAAA,EAAA,KAAA,KAAA,eAAA,CAAA,EAAA,KAAA,MAAA,qBDvBN,4BCxEJ,8CAmGY,QAAA,MACA,SAAA,OACA,kBAAA,aAAA,UAAA,aACA,OAAA,EAAA,MAtGZ,yCA8GU,cAAA,IACA,UAAA,KACA,OAAA,KACA,YAAA,KACA,WAAA,OACA,WAAA,EAAA,IAAA,IAAA,iBAAA,CAAA,EAAA,IAAA,KAAA,kBACA,UAAA,KD5CN,4BCxEJ,yCAuHY,aAAA,kBAvHZ,8CA6HQ,OAAA,KA7HR,mCAiIiB,cAAA,IAAA,MAAA,QAjIjB,0CAoIwB,WAAA,QApIxB,gDAwIQ,UAAA,KACA,SAAA,ODjEJ,4BCxEJ,4CAAA,2CA+I0B,MAAA","sourcesContent":["// Landing page styles.\n.shards-landing-page--1 {\n // Welcome section\n // Sets up the background cover image and the overlay gradient.\n .welcome {\n position: relative;\n height: 100vh;\n min-height: 700px;\n background: url('../images/agency-landing/welcome-cover.jpg') no-repeat center center fixed;\n background-size: cover;\n\n &:before {\n position: absolute;\n z-index: 0;\n content: '';\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: .8;\n background: theme-color(\"primary\");\n }\n\n @include media-breakpoint-down(sm) {\n .inner-wrapper {\n text-align: center;\n }\n }\n\n @media (max-width: 400px) {\n .welcome-heading {\n font-size: 2.415rem;\n }\n }\n }\n\n // Custom section title styling.\n // Adds the small border at the bottom of each section title.\n .section-title {\n position: relative;\n &:after {\n content: '';\n width: 30px;\n height: 2px;\n background: theme-color(\"primary\");\n position: absolute;\n left: 50%;\n margin-left: -15px;\n bottom: -20px;\n }\n }\n\n // Features\n .feature {\n .icon {\n border-radius: 50%;\n min-width: 65px;\n height: 65px;\n line-height: 65px;\n text-align: center;\n box-shadow: 0 2px 4px rgba(#212529, .1), 0 7px 14px rgba(#212529, .1);\n font-size: 27px;\n }\n }\n\n // Better separation between sections.\n .section {\n border-bottom: 1px solid lighten($blueish-grey, 54);\n }\n\n // Add a different tint to some sections.\n .section-invert {\n background: #f9fafc;\n }\n\n // Testimonials Section\n .testimonials .avatar {\n max-width: 80px;\n overflow: hidden;\n }\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n","// App promo landing page styles.\n.shards-app-promo-page--1 {\n\n // Welcome section.\n // Sets up the background cover image and the overlay gradient.\n .welcome {\n position: relative;\n height: 100vh;\n min-height: 700px;\n background: url('../images/app-promo/welcome-cover.jpg') no-repeat center center fixed;\n background-size: cover;\n\n &:before {\n position: absolute;\n z-index: 0;\n content: '';\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: .9;\n background: theme-color(\"dark\");\n }\n\n // Responsive adjustments.\n @include media-breakpoint-down(md) {\n height: auto;\n\n .header-social-icons { display: none; }\n }\n\n @include media-breakpoint-down(sm) {\n height: auto;\n\n .inner-wrapper {\n padding-top: $spacer * 3;\n text-align: center;\n }\n }\n\n @media (max-width: 400px) {\n .welcome-heading { font-size: 2.415rem; }\n }\n\n // Fine tuning the width as there's no utility class for 85 (yet).\n .iphone-mockup { max-width: 85%; }\n }\n\n // Custom section title styling.\n // Adds the small border at the bottom of each section title.\n .section-title {\n position: relative;\n\n &:after {\n content: '';\n width: 30px;\n height: 2px;\n background: theme-color(\"success\");\n position: absolute;\n left: 50%;\n margin-left: -15px;\n bottom: -20px;\n }\n\n // Modifier that positions the bottom border in the left side.\n &.underline--left {\n &:after {\n left: 0;\n margin-left: 0;\n }\n }\n }\n\n // App screenshot.\n .app-screenshot {\n background: url('../images/app-promo/features-background.jpg') no-repeat center center fixed;\n background-size: cover;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background: theme-color(\"light\");\n opacity: .6;\n }\n\n img {\n max-width: 300px;\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 100%;\n transform: translate(-50%, -50%);\n box-shadow: 0 13px 25px rgba(#000000, .05),\n 0 60px 100px rgba(#C0C0C0, .5);\n\n @include media-breakpoint-down(md) {\n display: table;\n position: static;\n transform: translate(0);\n margin: 0 auto;\n }\n }\n }\n\n // Product feature (individual elements).\n .feature {\n .icon {\n border-radius: 50%;\n min-width: 65px;\n height: 65px;\n line-height: 65px;\n text-align: center;\n box-shadow: 0 2px 4px rgba(#212529, .1), 0 7px 14px rgba(#212529, .1);\n font-size: 27px;\n\n @include media-breakpoint-down(sm) {\n margin-right: $spacer !important;\n }\n }\n }\n\n .blog .card-img-top {\n height: 100%;\n }\n\n // Better separation between sections.\n .section { border-bottom: 1px solid lighten($blueish-grey, 54); }\n\n // Section background variation for better separation.\n .section-invert { background: #f9fafc; }\n\n // Testimonials section avatar styling.\n .testimonials .avatar {\n max-width: 80px;\n overflow: hidden;\n }\n\n // Subscribe box.\n .subscribe {\n @include media-breakpoint-down(sm) {\n input, button { width: 100%; }\n }\n }\n }\n"]} -------------------------------------------------------------------------------- /dist/images/agency-landing/shards-logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shards - Logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /dist/images/agency-landing/welcome-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/agency-landing/welcome-cover.jpg -------------------------------------------------------------------------------- /dist/images/app-promo/badge-apple-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/app-promo/badge-apple-store.png -------------------------------------------------------------------------------- /dist/images/app-promo/badge-google-play-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/app-promo/badge-google-play-store.png -------------------------------------------------------------------------------- /dist/images/app-promo/features-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/app-promo/features-background.jpg -------------------------------------------------------------------------------- /dist/images/app-promo/iphone-app-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/app-promo/iphone-app-mockup.png -------------------------------------------------------------------------------- /dist/images/app-promo/iphone-app-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/app-promo/iphone-app-screenshot.png -------------------------------------------------------------------------------- /dist/images/app-promo/shards-logo-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shards - Logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /dist/images/app-promo/welcome-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/app-promo/welcome-cover.jpg -------------------------------------------------------------------------------- /dist/images/common/avatar-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/common/avatar-1.jpeg -------------------------------------------------------------------------------- /dist/images/common/avatar-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/common/avatar-2.jpeg -------------------------------------------------------------------------------- /dist/images/common/avatar-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/common/avatar-3.jpeg -------------------------------------------------------------------------------- /dist/images/common/card-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/common/card-1.jpg -------------------------------------------------------------------------------- /dist/images/common/card-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/common/card-2.jpg -------------------------------------------------------------------------------- /dist/images/common/card-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/common/card-3.jpg -------------------------------------------------------------------------------- /dist/images/demo/fontawesome-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | font awesome logo copy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /dist/images/demo/material-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | material icons logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /dist/images/demo/shard-1-5x-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/demo/shard-1-5x-3.png -------------------------------------------------------------------------------- /dist/images/demo/shards-agency-landing-page-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/demo/shards-agency-landing-page-demo.jpg -------------------------------------------------------------------------------- /dist/images/demo/shards-app-demo-page-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/demo/shards-app-demo-page-demo.jpg -------------------------------------------------------------------------------- /dist/images/demo/shards-logo-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shards 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /dist/images/demo/shards-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shards 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /dist/images/demo/stock-photos/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/demo/stock-photos/1.jpg -------------------------------------------------------------------------------- /dist/images/demo/stock-photos/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/demo/stock-photos/2.jpg -------------------------------------------------------------------------------- /dist/images/demo/stock-photos/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/dist/images/demo/stock-photos/3.jpg -------------------------------------------------------------------------------- /dist/js/demo.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { 40 | /******/ configurable: false, 41 | /******/ enumerable: true, 42 | /******/ get: getter 43 | /******/ }); 44 | /******/ } 45 | /******/ }; 46 | /******/ 47 | /******/ // getDefaultExport function for compatibility with non-harmony modules 48 | /******/ __webpack_require__.n = function(module) { 49 | /******/ var getter = module && module.__esModule ? 50 | /******/ function getDefault() { return module['default']; } : 51 | /******/ function getModuleExports() { return module; }; 52 | /******/ __webpack_require__.d(getter, 'a', getter); 53 | /******/ return getter; 54 | /******/ }; 55 | /******/ 56 | /******/ // Object.prototype.hasOwnProperty.call 57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 58 | /******/ 59 | /******/ // __webpack_public_path__ 60 | /******/ __webpack_require__.p = ""; 61 | /******/ 62 | /******/ // Load entry module and return exports 63 | /******/ return __webpack_require__(__webpack_require__.s = 5); 64 | /******/ }) 65 | /************************************************************************/ 66 | /******/ ({ 67 | 68 | /***/ 5: 69 | /***/ (function(module, exports) { 70 | 71 | /** 72 | * Shards — Main demo page script. 73 | */ 74 | 75 | // Main demo script. 76 | (function ($) { 77 | $(document).ready(function() { 78 | 79 | // Hide the loader and show the elements. 80 | setTimeout(function () { 81 | $('.loader').addClass('hidden').delay(200).remove(); 82 | $('.slide-in').each(function() { 83 | $(this).addClass('visible'); 84 | }); 85 | }, 1900); 86 | 87 | // Enable popovers everywhere. 88 | $('[data-toggle="popover"]').popover(); 89 | 90 | // Enable tooltips everywhere. 91 | $('[data-toggle="tooltip"]').tooltip(); 92 | 93 | // Disable example anchors scroll to top action. 94 | $('.example a').click(function(event) { 95 | event.target.getAttribute('href') === '#' && event.preventDefault(); 96 | }); 97 | 98 | // Hook the "Learn More" button event to scroll to content. 99 | $('#scroll-to-content').click(function(ev) { 100 | ev.preventDefault(); 101 | if (typeof ev.target.dataset.scrollTo === 'undefined') { 102 | return; 103 | } 104 | 105 | $('html, body').animate({ 106 | scrollTop: $(ev.target.dataset.scrollTo).offset().top - 100 107 | }, 1000) 108 | }); 109 | 110 | // 111 | // Setup examples. 112 | // 113 | 114 | // Slider example 1. 115 | $('#slider-example-1').customSlider({ 116 | start: [20, 80], 117 | range: { 118 | min: 0, 119 | max: 100 120 | }, 121 | connect: true 122 | }); 123 | 124 | // Slider example 2. 125 | $('#slider-example-2').customSlider({ 126 | start: [20, 80], 127 | range: { 128 | min: 0, 129 | max: 100 130 | }, 131 | connect: true, 132 | tooltips: true 133 | }); 134 | 135 | // Slider example 3. 136 | $('#slider-example-3').customSlider({ 137 | start: [20, 80], 138 | range: { 139 | min: 0, 140 | max: 100 141 | }, 142 | connect: true, 143 | tooltips: true, 144 | pips: { 145 | mode: 'positions', 146 | values: [0, 25, 50, 75, 100], 147 | density: 5 148 | } 149 | }); 150 | 151 | // Datepicker example 1. 152 | $('#datepicker-example-1').datepicker({}); 153 | 154 | // Datepicker example 2. 155 | $('#datepicker-example-2').datepicker({}); 156 | }); 157 | })(jQuery); 158 | 159 | 160 | /***/ }) 161 | 162 | /******/ }); -------------------------------------------------------------------------------- /dist/js/demo.min.js: -------------------------------------------------------------------------------- 1 | !function(o){var r={};function n(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return o[e].call(t.exports,t,t.exports,n),t.l=!0,t.exports}n.m=o,n.c=r,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}({5:function(e,t){var o;(o=jQuery)(document).ready(function(){setTimeout(function(){o(".loader").addClass("hidden").delay(200).remove(),o(".slide-in").each(function(){o(this).addClass("visible")})},1900),o('[data-toggle="popover"]').popover(),o('[data-toggle="tooltip"]').tooltip(),o(".example a").click(function(e){"#"===e.target.getAttribute("href")&&e.preventDefault()}),o("#scroll-to-content").click(function(e){e.preventDefault(),void 0!==e.target.dataset.scrollTo&&o("html, body").animate({scrollTop:o(e.target.dataset.scrollTo).offset().top-100},1e3)}),o("#slider-example-1").customSlider({start:[20,80],range:{min:0,max:100},connect:!0}),o("#slider-example-2").customSlider({start:[20,80],range:{min:0,max:100},connect:!0,tooltips:!0}),o("#slider-example-3").customSlider({start:[20,80],range:{min:0,max:100},connect:!0,tooltips:!0,pips:{mode:"positions",values:[0,25,50,75,100],density:5}}),o("#datepicker-example-1").datepicker({}),o("#datepicker-example-2").datepicker({})})}}); -------------------------------------------------------------------------------- /logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/logo.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shards-ui", 3 | "description": "A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.", 4 | "version": "3.0.0", 5 | "main": "dist/js/shards", 6 | "scripts": { 7 | "start": "npm-run-all --parallel watch serve-dist", 8 | "copy-html": "copyfiles -f src/extras/*.html dist", 9 | "copy-images": "copyfiles -u 3 src/extras/images/**/**/**/* dist/images/", 10 | "css": "npm-run-all css-compile css-prefix css-minify && npm run bundlesize", 11 | "css-compile": "npm-run-all css-compile:main css-compile:extras css-compile:demo", 12 | "css-compile:demo": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/extras/scss/shards-demo.scss dist/css/shards-demo.css", 13 | "css-compile:extras": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/extras/scss/shards-extras.scss dist/css/shards-extras.css", 14 | "css-compile:main": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/scss/shards.scss dist/css/shards.css", 15 | "css-minify": "npm-run-all css-minify:main css-minify:extras css-minify:demo", 16 | "css-minify:demo": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/shards-demo.min.css dist/css/shards-demo.css", 17 | "css-minify:extras": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/shards-extras.min.css dist/css/shards-extras.css", 18 | "css-minify:main": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/shards.min.css dist/css/shards.css", 19 | "css-prefix": "postcss --config build/postcss.config.js --replace dist/css/*.css", 20 | "js": "npm-run-all js-compile js-minify", 21 | "js-compile": "webpack --config build/webpack.config.js", 22 | "js-minify": "npm-run-all js-minify:main js-minify:demo", 23 | "js-minify:demo": "uglifyjs --compress --mangle --output dist/js/demo.min.js dist/js/demo.js", 24 | "js-minify:main": "uglifyjs --compress --mangle --output dist/js/shards.min.js dist/js/shards.js", 25 | "serve-dist": "browser-sync start --server \"./dist\" --files \".\" --no-open --no-online --no-notify", 26 | "watch": "npm-run-all --parallel watch-css watch-html watch-images watch-js", 27 | "watch-css": "nodemon --ignore src/js --ignore dist/ -e scss -x \"npm run css\"", 28 | "watch-html": "nodemon --ignore src/js --ignore src/scss --ignore src/extras/js --ignore src/extras/scss --ignore dist/ -e html -x \"npm run copy-html\"", 29 | "watch-images": "nodemon --ignore src/js --ignore src/scss --ignore src/extras/js --ignore src/extras/scss --ignore dist/ -e jpg,jpeg,png -x \"npm run copy-images\"", 30 | "watch-js": "nodemon --ignore src/scss --ignore dist/ -e js -x \"npm run js\"", 31 | "bundlesize": "bundlesize" 32 | }, 33 | "bundlesize": [ 34 | { 35 | "path": "./dist/css/shards.min.css", 36 | "maxSize": "14.5 kB" 37 | } 38 | ], 39 | "repository": { 40 | "type": "git", 41 | "url": "git+https://github.com/DesignRevision/shards-ui" 42 | }, 43 | "author": "Catalin Vasile", 44 | "license": "MIT", 45 | "bugs": { 46 | "url": "https://github.com/DesignRevision/shards-ui/issues" 47 | }, 48 | "homepage": "https://designrevision.com/downloads/shards", 49 | "keywords": [ 50 | "ui", 51 | "kit", 52 | "ui kit", 53 | "free", 54 | "bootstrap 4" 55 | ], 56 | "devDependencies": { 57 | "autoprefixer": "^7.2.6", 58 | "bootstrap-datepicker": "^1.8.0", 59 | "browser-sync": "^2.26.7", 60 | "bundlesize": "^0.18.0", 61 | "clean-css-cli": "^4.1.11", 62 | "copyfiles": "^1.2.0", 63 | "node-sass": "^4.9.3", 64 | "nodemon": "^1.18.4", 65 | "nouislider": "^11.1.0", 66 | "npm-run-all": "^4.1.2", 67 | "postcss-cli": "^6.1.2", 68 | "sass-lint": "^1.12.1", 69 | "sass-unused": "^0.2.2", 70 | "uglify-js": "^3.3.23", 71 | "webpack": "^3.11.0" 72 | }, 73 | "dependencies": { 74 | "bootstrap": "4.3.1" 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/extras/images/agency-landing/shards-logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shards - Logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/extras/images/agency-landing/welcome-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/agency-landing/welcome-cover.jpg -------------------------------------------------------------------------------- /src/extras/images/app-promo/badge-apple-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/app-promo/badge-apple-store.png -------------------------------------------------------------------------------- /src/extras/images/app-promo/badge-google-play-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/app-promo/badge-google-play-store.png -------------------------------------------------------------------------------- /src/extras/images/app-promo/features-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/app-promo/features-background.jpg -------------------------------------------------------------------------------- /src/extras/images/app-promo/iphone-app-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/app-promo/iphone-app-mockup.png -------------------------------------------------------------------------------- /src/extras/images/app-promo/iphone-app-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/app-promo/iphone-app-screenshot.png -------------------------------------------------------------------------------- /src/extras/images/app-promo/shards-logo-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shards - Logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/extras/images/app-promo/welcome-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/app-promo/welcome-cover.jpg -------------------------------------------------------------------------------- /src/extras/images/common/avatar-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/common/avatar-1.jpeg -------------------------------------------------------------------------------- /src/extras/images/common/avatar-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/common/avatar-2.jpeg -------------------------------------------------------------------------------- /src/extras/images/common/avatar-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/common/avatar-3.jpeg -------------------------------------------------------------------------------- /src/extras/images/common/card-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/common/card-1.jpg -------------------------------------------------------------------------------- /src/extras/images/common/card-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/common/card-2.jpg -------------------------------------------------------------------------------- /src/extras/images/common/card-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/common/card-3.jpg -------------------------------------------------------------------------------- /src/extras/images/demo/fontawesome-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | font awesome logo copy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/extras/images/demo/material-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | material icons logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/extras/images/demo/shard-1-5x-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/demo/shard-1-5x-3.png -------------------------------------------------------------------------------- /src/extras/images/demo/shards-agency-landing-page-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/demo/shards-agency-landing-page-demo.jpg -------------------------------------------------------------------------------- /src/extras/images/demo/shards-app-demo-page-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/demo/shards-app-demo-page-demo.jpg -------------------------------------------------------------------------------- /src/extras/images/demo/shards-logo-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shards 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/extras/images/demo/shards-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shards 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/extras/images/demo/stock-photos/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/demo/stock-photos/1.jpg -------------------------------------------------------------------------------- /src/extras/images/demo/stock-photos/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/demo/stock-photos/2.jpg -------------------------------------------------------------------------------- /src/extras/images/demo/stock-photos/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-ui/a5caac63f6131b01180a3e7e532a2fcf9cb21687/src/extras/images/demo/stock-photos/3.jpg -------------------------------------------------------------------------------- /src/extras/js/shards-demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Shards — Main demo page script. 3 | */ 4 | 5 | // Main demo script. 6 | (function ($) { 7 | $(document).ready(function() { 8 | 9 | // Hide the loader and show the elements. 10 | setTimeout(function () { 11 | $('.loader').addClass('hidden').delay(200).remove(); 12 | $('.slide-in').each(function() { 13 | $(this).addClass('visible'); 14 | }); 15 | }, 1900); 16 | 17 | // Enable popovers everywhere. 18 | $('[data-toggle="popover"]').popover(); 19 | 20 | // Enable tooltips everywhere. 21 | $('[data-toggle="tooltip"]').tooltip(); 22 | 23 | // Disable example anchors scroll to top action. 24 | $('.example a').click(function(event) { 25 | event.target.getAttribute('href') === '#' && event.preventDefault(); 26 | }); 27 | 28 | // Hook the "Learn More" button event to scroll to content. 29 | $('#scroll-to-content').click(function(ev) { 30 | ev.preventDefault(); 31 | if (typeof ev.target.dataset.scrollTo === 'undefined') { 32 | return; 33 | } 34 | 35 | $('html, body').animate({ 36 | scrollTop: $(ev.target.dataset.scrollTo).offset().top - 100 37 | }, 1000) 38 | }); 39 | 40 | // 41 | // Setup examples. 42 | // 43 | 44 | // Slider example 1. 45 | $('#slider-example-1').customSlider({ 46 | start: [20, 80], 47 | range: { 48 | min: 0, 49 | max: 100 50 | }, 51 | connect: true 52 | }); 53 | 54 | // Slider example 2. 55 | $('#slider-example-2').customSlider({ 56 | start: [20, 80], 57 | range: { 58 | min: 0, 59 | max: 100 60 | }, 61 | connect: true, 62 | tooltips: true 63 | }); 64 | 65 | // Slider example 3. 66 | $('#slider-example-3').customSlider({ 67 | start: [20, 80], 68 | range: { 69 | min: 0, 70 | max: 100 71 | }, 72 | connect: true, 73 | tooltips: true, 74 | pips: { 75 | mode: 'positions', 76 | values: [0, 25, 50, 75, 100], 77 | density: 5 78 | } 79 | }); 80 | 81 | // Datepicker example 1. 82 | $('#datepicker-example-1').datepicker({}); 83 | 84 | // Datepicker example 2. 85 | $('#datepicker-example-2').datepicker({}); 86 | }); 87 | })(jQuery); 88 | -------------------------------------------------------------------------------- /src/extras/scss/_agency-landing.scss: -------------------------------------------------------------------------------- 1 | // Landing page styles. 2 | .shards-landing-page--1 { 3 | // Welcome section 4 | // Sets up the background cover image and the overlay gradient. 5 | .welcome { 6 | position: relative; 7 | height: 100vh; 8 | min-height: 700px; 9 | background: url('../images/agency-landing/welcome-cover.jpg') no-repeat center center fixed; 10 | background-size: cover; 11 | 12 | &:before { 13 | position: absolute; 14 | z-index: 0; 15 | content: ''; 16 | top: 0; 17 | left: 0; 18 | right: 0; 19 | bottom: 0; 20 | opacity: .8; 21 | background: theme-color("primary"); 22 | } 23 | 24 | @include media-breakpoint-down(sm) { 25 | .inner-wrapper { 26 | text-align: center; 27 | } 28 | } 29 | 30 | @media (max-width: 400px) { 31 | .welcome-heading { 32 | font-size: 2.415rem; 33 | } 34 | } 35 | } 36 | 37 | // Custom section title styling. 38 | // Adds the small border at the bottom of each section title. 39 | .section-title { 40 | position: relative; 41 | &:after { 42 | content: ''; 43 | width: 30px; 44 | height: 2px; 45 | background: theme-color("primary"); 46 | position: absolute; 47 | left: 50%; 48 | margin-left: -15px; 49 | bottom: -20px; 50 | } 51 | } 52 | 53 | // Features 54 | .feature { 55 | .icon { 56 | border-radius: 50%; 57 | min-width: 65px; 58 | height: 65px; 59 | line-height: 65px; 60 | text-align: center; 61 | box-shadow: 0 2px 4px rgba(#212529, .1), 0 7px 14px rgba(#212529, .1); 62 | font-size: 27px; 63 | } 64 | } 65 | 66 | // Better separation between sections. 67 | .section { 68 | border-bottom: 1px solid lighten($blueish-grey, 54); 69 | } 70 | 71 | // Add a different tint to some sections. 72 | .section-invert { 73 | background: #f9fafc; 74 | } 75 | 76 | // Testimonials Section 77 | .testimonials .avatar { 78 | max-width: 80px; 79 | overflow: hidden; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/extras/scss/_app-promo.scss: -------------------------------------------------------------------------------- 1 | // App promo landing page styles. 2 | .shards-app-promo-page--1 { 3 | 4 | // Welcome section. 5 | // Sets up the background cover image and the overlay gradient. 6 | .welcome { 7 | position: relative; 8 | height: 100vh; 9 | min-height: 700px; 10 | background: url('../images/app-promo/welcome-cover.jpg') no-repeat center center fixed; 11 | background-size: cover; 12 | 13 | &:before { 14 | position: absolute; 15 | z-index: 0; 16 | content: ''; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | bottom: 0; 21 | opacity: .9; 22 | background: theme-color("dark"); 23 | } 24 | 25 | // Responsive adjustments. 26 | @include media-breakpoint-down(md) { 27 | height: auto; 28 | 29 | .header-social-icons { display: none; } 30 | } 31 | 32 | @include media-breakpoint-down(sm) { 33 | height: auto; 34 | 35 | .inner-wrapper { 36 | padding-top: $spacer * 3; 37 | text-align: center; 38 | } 39 | } 40 | 41 | @media (max-width: 400px) { 42 | .welcome-heading { font-size: 2.415rem; } 43 | } 44 | 45 | // Fine tuning the width as there's no utility class for 85 (yet). 46 | .iphone-mockup { max-width: 85%; } 47 | } 48 | 49 | // Custom section title styling. 50 | // Adds the small border at the bottom of each section title. 51 | .section-title { 52 | position: relative; 53 | 54 | &:after { 55 | content: ''; 56 | width: 30px; 57 | height: 2px; 58 | background: theme-color("success"); 59 | position: absolute; 60 | left: 50%; 61 | margin-left: -15px; 62 | bottom: -20px; 63 | } 64 | 65 | // Modifier that positions the bottom border in the left side. 66 | &.underline--left { 67 | &:after { 68 | left: 0; 69 | margin-left: 0; 70 | } 71 | } 72 | } 73 | 74 | // App screenshot. 75 | .app-screenshot { 76 | background: url('../images/app-promo/features-background.jpg') no-repeat center center fixed; 77 | background-size: cover; 78 | 79 | &:before { 80 | content: ''; 81 | position: absolute; 82 | top: 0; 83 | left: 0; 84 | bottom: 0; 85 | right: 0; 86 | background: theme-color("light"); 87 | opacity: .6; 88 | } 89 | 90 | img { 91 | max-width: 300px; 92 | position: absolute; 93 | z-index: 1; 94 | top: 50%; 95 | left: 100%; 96 | transform: translate(-50%, -50%); 97 | box-shadow: 0 13px 25px rgba(#000000, .05), 98 | 0 60px 100px rgba(#C0C0C0, .5); 99 | 100 | @include media-breakpoint-down(md) { 101 | display: table; 102 | position: static; 103 | transform: translate(0); 104 | margin: 0 auto; 105 | } 106 | } 107 | } 108 | 109 | // Product feature (individual elements). 110 | .feature { 111 | .icon { 112 | border-radius: 50%; 113 | min-width: 65px; 114 | height: 65px; 115 | line-height: 65px; 116 | text-align: center; 117 | box-shadow: 0 2px 4px rgba(#212529, .1), 0 7px 14px rgba(#212529, .1); 118 | font-size: 27px; 119 | 120 | @include media-breakpoint-down(sm) { 121 | margin-right: $spacer !important; 122 | } 123 | } 124 | } 125 | 126 | .blog .card-img-top { 127 | height: 100%; 128 | } 129 | 130 | // Better separation between sections. 131 | .section { border-bottom: 1px solid lighten($blueish-grey, 54); } 132 | 133 | // Section background variation for better separation. 134 | .section-invert { background: #f9fafc; } 135 | 136 | // Testimonials section avatar styling. 137 | .testimonials .avatar { 138 | max-width: 80px; 139 | overflow: hidden; 140 | } 141 | 142 | // Subscribe box. 143 | .subscribe { 144 | @include media-breakpoint-down(sm) { 145 | input, button { width: 100%; } 146 | } 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/extras/scss/shards-demo.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Shards — Demo Page Adjustments 3 | */ 4 | 5 | // Dependencies 6 | @import "../../scss/functions"; 7 | @import "../../scss/mixins"; 8 | @import '../../scss/variables'; 9 | 10 | // Page loader 11 | .loader { 12 | position: fixed; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | background: #fff; 18 | z-index: 1500; 19 | transition: opacity 500ms ease-in-out; 20 | } 21 | 22 | .page-loader { 23 | width: 40px; 24 | height: 40px; 25 | margin: auto; 26 | top: 50%; 27 | left: 50%; 28 | position: absolute; 29 | margin-top: -20px; 30 | margin-left: -20px; 31 | background-color: #333; 32 | background: theme-color("primary"); 33 | border-radius: 100%; 34 | transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); 35 | -webkit-animation: pulse-load 1200ms infinite ease-in-out; 36 | animation: pulse-load 1200ms infinite ease-in-out; 37 | } 38 | 39 | // Page loader animations. 40 | @-webkit-keyframes pulse-load { 41 | 0% { 42 | -webkit-transform: scale(0) 43 | } 44 | 100% { 45 | -webkit-transform: scale(1.0); 46 | opacity: 0; 47 | } 48 | } 49 | 50 | @keyframes pulse-load { 51 | 0% { 52 | -webkit-transform: scale(0); 53 | transform: scale(0); 54 | } 55 | 100% { 56 | -webkit-transform: scale(1.0); 57 | transform: scale(1.0); 58 | opacity: 0; 59 | } 60 | } 61 | 62 | .fb-share-button > span, 63 | .fb-like > span { 64 | height: 34px !important; 65 | } 66 | 67 | // Welcome sections. 68 | .welcome { 69 | background: $white; 70 | height: 100vh; 71 | text-align: center; 72 | overflow: hidden; 73 | position: relative; 74 | 75 | h1 { 76 | font-size: 6.25rem; 77 | font-weight: 500; 78 | letter-spacing: -0.3125rem; 79 | margin-top: 35vh; 80 | margin-bottom: 20px; 81 | color: #1f2429; 82 | line-height: 1; 83 | 84 | @include media-breakpoint-down(xs) { 85 | font-size: 5.90rem; 86 | } 87 | } 88 | 89 | .inner-wrapper { 90 | position: relative; 91 | z-index: 3; 92 | 93 | > p { 94 | margin-bottom: 20px; 95 | color: #5f738e; 96 | transition-delay: 150ms; 97 | } 98 | 99 | > .action-links { 100 | transition-delay: 300ms; 101 | } 102 | } 103 | 104 | .product-by { 105 | position: relative; 106 | z-index: 3; 107 | margin-bottom: 30px; 108 | 109 | a:hover { 110 | text-decoration: none; 111 | } 112 | 113 | p { 114 | font-size: 10px; 115 | color: #b1b4bd; 116 | text-transform: uppercase; 117 | margin: 0; 118 | } 119 | 120 | img { 121 | max-width: 180px; 122 | } 123 | } 124 | 125 | &:before, 126 | &:after { 127 | content: ''; 128 | position: absolute; 129 | width: 50vw; 130 | height: 80vh; 131 | transform: rotate(-25deg); 132 | z-index: 1; 133 | } 134 | 135 | &:before { 136 | left: -15vw; 137 | top: -30%; 138 | background: #fff; 139 | background: -moz-linear-gradient(left, #e2e7ef 0%, #ffffff 100%); 140 | background: -webkit-linear-gradient(left, #e2e7ef 0%, #ffffff 100%); 141 | background: linear-gradient(to right, #e2e7ef 0%, #ffffff 100%); 142 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e7ef', endColorstr='#ffffff', GradientType=1); // Responsive 143 | 144 | @include media-breakpoint-down(md) { 145 | left: -30%; 146 | } 147 | 148 | @include media-breakpoint-down(sm) { 149 | left: -35%; 150 | } 151 | } 152 | 153 | &:after { 154 | right: -5vw; 155 | top: -15%; 156 | background: #ffffff; 157 | background: -moz-linear-gradient(left, #ffffff 0%, #e2e7ef 100%); 158 | background: -webkit-linear-gradient(left, #ffffff 0%, #e2e7ef 100%); 159 | background: linear-gradient(to right, #ffffff 0%, #e2e7ef 100%); 160 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e7ef', GradientType=1); // Responsive 161 | @include media-breakpoint-down(md) { 162 | right: -17%; 163 | } 164 | } 165 | } 166 | 167 | .shard { 168 | will-change: transform; 169 | position: absolute; 170 | left: 50%; 171 | transform: translate(-50%); 172 | top: 40px; 173 | z-index: 1; 174 | width: 280px; 175 | animation: float 7s ease-in-out infinite; 176 | z-index: 2; 177 | } 178 | 179 | // Floating animation 180 | @keyframes float { 181 | 0% { 182 | transform: translate(-50%, 0px); 183 | } 184 | 50% { 185 | transform: translate(-50%, -20px); 186 | } 187 | 100% { 188 | transform: translate(-50%, 0px); 189 | } 190 | } 191 | 192 | // Page content adjustments. 193 | .page-content { 194 | position: relative; 195 | background: #fafafa; 196 | padding-top: 5.3125rem; 197 | 198 | &:before { 199 | content: ''; 200 | height: 500px; 201 | width: 100%; 202 | position: absolute; 203 | top: 0; 204 | right: 0; 205 | background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 100%); 206 | background: -webkit-linear-gradient(top, #ffffff 0%, #fafafa 100%); 207 | background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%); 208 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa', GradientType=0); 209 | } 210 | 211 | // Color swatches wrapper. 212 | .color-wrapper { 213 | float: left; 214 | @include media-breakpoint-down(xs) { 215 | float: none; 216 | max-width: 230px; 217 | margin: 0 auto; 218 | } 219 | } 220 | 221 | .color { 222 | padding: 25px 20px; 223 | text-align: center; 224 | background: $white; 225 | margin-bottom: 30px; 226 | box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05); 227 | 228 | &:last-child { 229 | margin-right: 0; 230 | } 231 | 232 | .swatch { 233 | position: relative; 234 | border-radius: 50%; 235 | margin: 0 auto 15px auto; 236 | width: 110px; 237 | height: 110px; 238 | } 239 | 240 | .title { 241 | display: inline-block; 242 | font-family: $headings-font-family; 243 | width: 100%; 244 | font-size: 1rem; 245 | } 246 | 247 | .hex-value { 248 | font-family: $font-family-monospace; 249 | color: #8f99ac; 250 | font-size: 12px; 251 | text-transform: uppercase; 252 | } 253 | } 254 | .content { 255 | .example { 256 | margin: 45px 0 60px 0; 257 | 258 | &.emphasized { 259 | padding: 25px 20px; 260 | background: $white; 261 | box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05); 262 | } 263 | } 264 | 265 | .table { 266 | background: $white; 267 | box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05); 268 | 269 | &-striped tbody tr:nth-of-type(odd) { 270 | background-color: #f7f8fb; 271 | } 272 | 273 | td, 274 | th { 275 | padding: 30px 25px; 276 | } 277 | 278 | th { 279 | padding: 15px 25px; 280 | font-size: 11px; 281 | font-weight: 300; 282 | text-transform: uppercase; 283 | line-height: 1; 284 | color: #9ba4ae; 285 | border: none; 286 | } 287 | 288 | tbody { 289 | td { 290 | font-size: 0.8125rem; 291 | vertical-align: middle; 292 | h1, 293 | h2, 294 | h3, 295 | h4, 296 | h5, 297 | h6, 298 | p { 299 | margin: 0; 300 | line-height: 1; 301 | } 302 | 303 | p { 304 | font-size: 1rem !important; 305 | } 306 | } 307 | } 308 | } 309 | } 310 | } 311 | 312 | // Utilities 313 | @include media-breakpoint-down(sm) { 314 | .sm-hidden { 315 | display: none; 316 | } 317 | } 318 | 319 | .ll-image { 320 | text-indent: -9000px; 321 | } 322 | 323 | .hidden { 324 | opacity: 0; 325 | } 326 | 327 | .slide-in { 328 | will-change: transform; 329 | opacity: 0; 330 | transform: translateY(50%); 331 | transition: transform 850ms cubic-bezier(0.785, 0.135, 0.150, 0.860), opacity 850ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 332 | 333 | &.visible { 334 | transform: translateY(0); 335 | opacity: 1; 336 | } 337 | } 338 | 339 | // 340 | // Examples 341 | // 342 | 343 | // Icons 344 | .icons-example { 345 | .icons-example-wrapper { 346 | padding: 100px 0; 347 | @media (max-width: 850px) { 348 | min-width: 100%; 349 | } 350 | 351 | &.material-icons { 352 | background: #1C1E21; 353 | } 354 | 355 | &.font-awesome { 356 | background: #212529; 357 | } 358 | } 359 | } 360 | 361 | // Buttons 362 | .example-buttons { 363 | @media (max-width: 1199px) { 364 | .buttons-wrapper { 365 | button { 366 | margin: 0 5px; 367 | } 368 | } 369 | } 370 | 371 | @media (max-width: 850px) { 372 | .buttons-wrapper { 373 | flex-flow: column !important; 374 | flex-flow: wrap; 375 | 376 | button { 377 | min-width: 30%; 378 | margin-bottom: 20px; 379 | flex: 1; 380 | } 381 | } 382 | } 383 | 384 | @media (max-width: 450px) { 385 | .buttons-wrapper button { 386 | min-width: 50%; 387 | } 388 | } 389 | } 390 | 391 | // Cards 392 | @include media-breakpoint-down(md) { 393 | #cards .last { 394 | display: block !important; 395 | } 396 | } 397 | 398 | @include media-breakpoint-down(sm) { 399 | #cards .card { 400 | max-width: 350px; 401 | display: table; 402 | margin-left: auto; 403 | margin-right: auto; 404 | } 405 | } 406 | 407 | // Progress bars 408 | @include media-breakpoint-down(sm) { 409 | #progress-bars { 410 | .pb-widths { 411 | margin-bottom: $spacer * 1.25; 412 | } 413 | } 414 | } 415 | 416 | 417 | // Popups/Popovers 418 | #popups-popovers { 419 | @include media-breakpoint-down(sm) { 420 | .row>div { 421 | margin-bottom: $spacer * 1.25; 422 | } 423 | } 424 | 425 | @media (max-width: 420px) { 426 | button { 427 | display: block; 428 | width: 100%; 429 | margin-bottom: 10px; 430 | } 431 | } 432 | } 433 | 434 | // Badges 435 | #badges { 436 | @include media-breakpoint-down(sm) { 437 | .badge { 438 | display: table; 439 | margin-left: auto; 440 | margin-right: auto; 441 | margin-bottom: 10px; 442 | width: 100%; 443 | } 444 | } 445 | } 446 | 447 | // Forms 448 | #forms { 449 | @include media-breakpoint-down(sm) { 450 | .custom-dropdown-example { 451 | margin-bottom: $spacer; 452 | } 453 | } 454 | } 455 | 456 | // Custom controls 457 | @include media-breakpoint-down(sm) { 458 | .custom-controls-example { 459 | width: 100%; 460 | max-width: 100%; 461 | flex: none; 462 | display: block; 463 | padding: 0 !important; 464 | margin-bottom: $spacer; 465 | 466 | &:last-child { 467 | margin-bottom: 0; 468 | } 469 | } 470 | } 471 | 472 | 473 | #documentation { 474 | border-top: 1px solid #ddd; 475 | } 476 | 477 | // Footer 478 | .footer-cta { 479 | padding: 100px 0; 480 | } 481 | 482 | .main-footer a:hover { text-decoration: none; } 483 | -------------------------------------------------------------------------------- /src/extras/scss/shards-extras.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Shards Agency landing page styles. 3 | // 4 | 5 | // Bootstrap 4 dependencies. 6 | @import "../../../node_modules/bootstrap/scss/functions"; 7 | @import "../../../node_modules/bootstrap/scss/mixins"; 8 | 9 | // Shards Variables 10 | @import '../../scss/variables'; 11 | 12 | // Extra pages styles. 13 | // Note: If you plan on using only one of the pages it's best to comment out 14 | // the other and re-compile this file. Please make sure you keep the 15 | // dependencies included above as they're used in all partials. 16 | @import 'agency-landing'; 17 | @import 'app-promo'; 18 | 19 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import BootstrapDatepicker from 'bootstrap-datepicker'; 2 | import sliderPlugin from './sliderPlugin'; 3 | -------------------------------------------------------------------------------- /src/js/sliderPlugin.js: -------------------------------------------------------------------------------- 1 | import noUiSlider from 'nouislider'; 2 | 3 | if ( jQuery && typeof jQuery !== 'undefined' ) { 4 | jQuery.fn.customSlider = function( config ) { 5 | var errExtraMsg = ' Please consult the documentation for more information: https://designrevision.com/docs/shards'; 6 | 7 | if ( typeof config === 'undefined' ) { 8 | throw new Error('Shards\'s custom slider component requires a configuration object.' + errExtraMsg); 9 | } 10 | 11 | var requiredConfigProps = [ 12 | { 13 | prop: 'start', 14 | example: 'start: [25, 70]' 15 | }, 16 | { 17 | prop: 'range', 18 | example: 'range: { \'min\': 0, \'max\': 100 }' 19 | } 20 | ]; 21 | 22 | requiredConfigProps.map(function(requiredProp) { 23 | if ( typeof config[requiredProp.prop] === 'undefined' ) { 24 | throw new Error('Shards\'s custom slider component requires a `' + requiredProp.prop + '` property passed in the configuration object. For example: `' + requiredProp.example + '`' + errExtraMsg); 25 | } 26 | }); 27 | 28 | if ( this.length && this[0] !== undefined ) { 29 | for ( var i = 0; i < this.length; i++ ) { 30 | noUiSlider.create(this[i], config); 31 | 32 | var inputs = jQuery(this[i]).find('.custom-slider-input'); 33 | 34 | if ( ! inputs.length || inputs.length < config.start.length ) { 35 | throw new Error('You need to provide a .custom-slider-input for each start value.'); 36 | return; 37 | } 38 | 39 | var self = this; 40 | 41 | jQuery.each(inputs, function(index, value) { 42 | // Do not update the extra inputs (if any). 43 | if ( index === config.start.length ) { 44 | return; 45 | } 46 | 47 | // Hook on the update event. 48 | self[i].noUiSlider.on('update', function( values, handle ) { 49 | inputs[index].value = values[index]; 50 | }); 51 | }); 52 | } 53 | } 54 | 55 | return this; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | padding: $alert-padding-y $alert-padding-x; 7 | margin-bottom: $alert-margin-bottom; 8 | border: none; 9 | @include border-radius($alert-border-radius); 10 | } 11 | 12 | // Provide class for links that match alerts 13 | .alert-link { 14 | font-weight: $alert-link-font-weight; 15 | } 16 | 17 | 18 | // Dismissible alerts 19 | .alert-dismissible { 20 | .close { 21 | top: 0; 22 | right: 0; 23 | padding: $alert-padding-y $alert-padding-x; 24 | @include transition($transition-base); 25 | 26 | &:hover { 27 | cursor: pointer; 28 | } 29 | } 30 | } 31 | 32 | 33 | // Alternate styles 34 | // Override alert theme colors without mixin. 35 | @each $color, $value in $theme-colors { 36 | .alert-#{$color} { 37 | color: lighten($value, 48%); 38 | background-color: $value; 39 | 40 | .alert-link { 41 | color: lighten($value, 48%); 42 | } 43 | 44 | // Exception for alerts with a light background. 45 | @if $color == "light" { 46 | color: color-yiq($value); 47 | 48 | .alert-link { 49 | color: color-yiq($value); 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/scss/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | padding: $badge-padding-y $badge-padding-x; 8 | font-size: $badge-font-size; 9 | font-weight: $badge-font-weight; 10 | font-family: $badge-font-family; 11 | color: $badge-color; 12 | 13 | @include border-radius($badge-border-radius); 14 | } 15 | 16 | // Badge anchor transitions 17 | a.badge { 18 | @include transition($transition-base); 19 | } 20 | 21 | // Pill badges 22 | .badge-pill { 23 | padding-right: $badge-pill-padding-x; 24 | padding-left: $badge-pill-padding-x; 25 | @include border-radius($badge-pill-border-radius); 26 | } 27 | 28 | // Squared badges 29 | .badge-squared { 30 | @include border-radius(0); 31 | } 32 | 33 | // Contextual Colors 34 | @each $color, $value in $theme-colors { 35 | .badge-#{$color} { 36 | @include badge-variant($value); 37 | } 38 | 39 | .badge-outline-#{$color} { 40 | background: none; 41 | border: 1px solid $value; 42 | color: $value; 43 | 44 | // Fix light outlined badges 45 | @if ( $value == theme-color("light") ) { 46 | color: color-yiq($value); 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/_button-group.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | // Make the div behave like a button 4 | .btn-group { 5 | // Prevent double borders when buttons are next to each other 6 | .btn + .btn, 7 | .btn + .btn-group, 8 | .btn-group + .btn, 9 | .btn-group + .btn-group { 10 | margin-left: -$btn-border-width; 11 | } 12 | } 13 | 14 | .btn-group { 15 | // Reset rounded corners 16 | > .btn:not(:last-child):not(.dropdown-toggle), 17 | > .btn-group:not(:last-child) > .btn { 18 | @include border-right-radius(0); 19 | } 20 | 21 | > .btn:not(:first-child), 22 | > .btn-group:not(:first-child) > .btn { 23 | @include border-left-radius(0); 24 | } 25 | } 26 | 27 | // Sizing 28 | // 29 | // Remix the default button sizing classes into new ones for easier manipulation. 30 | 31 | .btn-group-sm > .btn { @extend .btn-sm; } 32 | .btn-group-lg > .btn { @extend .btn-lg; } 33 | 34 | 35 | // 36 | // Split button dropdowns 37 | // 38 | 39 | .dropdown-toggle-split { 40 | padding-right: $btn-padding-x * .75; 41 | padding-left: $btn-padding-x * .75; 42 | } 43 | 44 | .btn-sm + .dropdown-toggle-split { 45 | padding-right: $btn-padding-x-sm * .75; 46 | padding-left: $btn-padding-x-sm * .75; 47 | } 48 | 49 | .btn-lg + .dropdown-toggle-split { 50 | padding-right: $btn-padding-x-lg * .75; 51 | padding-left: $btn-padding-x-lg * .75; 52 | } 53 | 54 | 55 | // The clickable button for toggling the menu 56 | // Set the same inset shadow as the :active state 57 | .btn-group.show .dropdown-toggle { 58 | @include box-shadow($btn-active-box-shadow); 59 | 60 | // Show no shadow for `.btn-link` since it has no other button styles. 61 | &.btn-link { 62 | @include box-shadow(none); 63 | } 64 | } 65 | 66 | 67 | // 68 | // Vertical button groups 69 | // 70 | 71 | .btn-group-vertical { 72 | > .btn + .btn, 73 | > .btn + .btn-group, 74 | > .btn-group + .btn, 75 | > .btn-group + .btn-group { 76 | margin-top: -$btn-border-width; 77 | } 78 | 79 | // Reset rounded corners 80 | > .btn:not(:last-child):not(.dropdown-toggle), 81 | > .btn-group:not(:last-child) > .btn { 82 | @include border-bottom-radius(0); 83 | } 84 | 85 | > .btn:not(:first-child), 86 | > .btn-group:not(:first-child) > .btn { 87 | @include border-top-radius(0); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | // scss-lint:disable QualifyingElement 2 | 3 | // 4 | // Base styles 5 | // 6 | 7 | .btn { 8 | font-weight: $btn-font-weight; 9 | font-family: $btn-font-family; 10 | border: $input-btn-border-width solid transparent; 11 | 12 | @include button-size( 13 | $btn-padding-y, 14 | $btn-padding-x, 15 | $btn-font-size, 16 | $input-btn-line-height, 17 | $btn-border-radius 18 | ); 19 | 20 | @include transition($btn-transition); 21 | 22 | &:hover, 23 | &.hover { 24 | cursor: pointer; 25 | } 26 | 27 | &:focus, 28 | &.focus { 29 | @include box-shadow(none); 30 | } 31 | 32 | &:not([disabled]):not(.disabled):active, 33 | &:not([disabled]):not(.disabled).active { 34 | background-image: none; 35 | @include box-shadow(none); 36 | } 37 | 38 | // 39 | // Class modifiers 40 | // 41 | 42 | &.btn-squared { 43 | border-radius: 0; 44 | } 45 | 46 | &.btn-pill { 47 | border-radius: $btn-pill-border-radius; 48 | } 49 | } 50 | 51 | // 52 | // Alternate buttons 53 | // 54 | 55 | @each $color, $value in $theme-colors { 56 | .btn-#{$color} { 57 | @include button-variant($value); 58 | } 59 | } 60 | 61 | // White buttons 62 | .btn-white { 63 | @include button-variant($white); 64 | } 65 | 66 | // Black buttons 67 | .btn-black { 68 | @include button-variant($black); 69 | } 70 | 71 | // Outlined default buttons 72 | @each $color, $value in $theme-colors { 73 | .btn-outline-#{$color} { 74 | @include button-outline-variant($value); 75 | } 76 | } 77 | 78 | // White outline buttons 79 | .btn-outline-white { 80 | @include button-outline-variant($white); 81 | color: $white; 82 | 83 | &:not(:disabled):not(.disabled):active, 84 | &:not(:disabled):not(.disabled).active { 85 | color: $black; 86 | } 87 | } 88 | 89 | // Black outline buttons 90 | .btn-outline-black { 91 | @include button-outline-variant($black); 92 | color: $black; 93 | 94 | &:not(:disabled):not(.disabled):active, 95 | &:not(:disabled):not(.disabled).active { 96 | color: $white; 97 | } 98 | } 99 | 100 | 101 | // 102 | // Link buttons 103 | // 104 | 105 | // Make a button look and behave like a link 106 | .btn-link { 107 | font-weight: $font-weight-normal; 108 | color: $link-color; 109 | 110 | @include hover { 111 | color: $link-hover-color; 112 | text-decoration: $link-hover-decoration; 113 | } 114 | 115 | &:focus, 116 | &.focus { 117 | text-decoration: $link-hover-decoration; 118 | } 119 | 120 | &:disabled { 121 | color: $btn-link-disabled-color; 122 | } 123 | } 124 | 125 | 126 | // 127 | // Button Sizes 128 | // 129 | 130 | .btn-lg { 131 | @include button-size( 132 | $btn-padding-y-lg, 133 | $btn-padding-x-lg, 134 | $btn-font-size-lg, 135 | $btn-line-height-lg, 136 | $btn-border-radius-lg 137 | ); 138 | } 139 | 140 | .btn-sm { 141 | @include button-size( 142 | $btn-padding-y-sm, 143 | $btn-padding-x-sm, 144 | $btn-font-size-sm, 145 | $btn-line-height-sm, 146 | $btn-border-radius-sm 147 | ); 148 | } 149 | 150 | 151 | // 152 | // Block button 153 | // 154 | 155 | // Vertically space out multiple block buttons 156 | .btn-block + .btn-block { 157 | margin-top: $btn-block-spacing-y; 158 | } 159 | -------------------------------------------------------------------------------- /src/scss/_card.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .card { 6 | background-color: $card-bg; 7 | border: none; 8 | 9 | @include border-radius($card-border-radius); 10 | @include box-shadow($card-box-shadow); 11 | 12 | > .list-group:first-child { 13 | .list-group-item:first-child { 14 | @include border-top-radius($card-border-radius); 15 | } 16 | } 17 | 18 | > .list-group:last-child { 19 | .list-group-item:last-child { 20 | @include border-bottom-radius($card-border-radius); 21 | } 22 | } 23 | 24 | .list-group-item { 25 | padding: $card-list-group-item-padding; 26 | } 27 | 28 | // Fix paragraph margins inside cards 29 | .card-text { 30 | margin-bottom: $card-paragraph-margin-bottom; 31 | } 32 | 33 | // Remove text decoration. 34 | a:hover { 35 | text-decoration: none; 36 | } 37 | 38 | // Small card modifier. 39 | &-small { 40 | .card-header, 41 | .card-body, 42 | .card-footer { 43 | padding: $card-small-spacer-y $card-small-spacer-x; 44 | } 45 | 46 | box-shadow: $card-small-box-shadow; 47 | } 48 | } 49 | 50 | .card-body { 51 | padding: $card-spacer-x; 52 | 53 | > p:last-child { 54 | margin-bottom: 0; 55 | } 56 | } 57 | 58 | .card-title { 59 | font-weight: $card-title-font-weight; 60 | margin-bottom: $card-title-margin-bottom; 61 | } 62 | 63 | .card-subtitle { 64 | margin-top: -($card-spacer-y / 2); 65 | } 66 | 67 | .card-link { 68 | font-family: $card-link-font-family; 69 | 70 | + .card-link { 71 | margin-left: $card-spacer-x; 72 | } 73 | } 74 | 75 | // 76 | // Optional textual caps 77 | // 78 | 79 | .card-header { 80 | padding: $card-header-spacer-y $card-header-spacer-x; 81 | background-color: $card-cap-bg; 82 | border-bottom: none; 83 | 84 | &:first-child { 85 | @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); 86 | } 87 | } 88 | 89 | .card-footer { 90 | padding: $card-footer-spacer-y $card-footer-spacer-x; 91 | background-color: $card-cap-bg; 92 | border-top: none; 93 | 94 | &:last-child { 95 | @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); 96 | } 97 | } 98 | 99 | 100 | // 101 | // Header navs 102 | // 103 | 104 | .card-header-tabs { 105 | margin-bottom: -1rem; 106 | border-bottom: 0; 107 | 108 | .nav-link, 109 | .nav-link:hover { 110 | border-bottom: transparent; 111 | } 112 | } 113 | 114 | .card-header-pills { 115 | margin-right: -($card-spacer-x / 2); 116 | margin-left: -($card-spacer-x / 2); 117 | 118 | &:hover { 119 | background: transparent; 120 | } 121 | } 122 | 123 | // Card image 124 | .card-img-overlay { 125 | padding: $card-img-overlay-padding; 126 | background: rgba($blueish-grey, .5); 127 | border-radius: $card-border-radius; 128 | 129 | .card-title { 130 | color: $white; 131 | } 132 | } 133 | 134 | .card-img { 135 | @include border-radius($card-inner-border-radius); 136 | } 137 | 138 | // Card image caps 139 | .card-img-top { 140 | @include border-top-radius($card-inner-border-radius); 141 | } 142 | 143 | .card-img-bottom { 144 | @include border-bottom-radius($card-inner-border-radius); 145 | } 146 | 147 | 148 | // Card deck 149 | 150 | .card-deck { 151 | .card { 152 | margin-bottom: $card-deck-margin; 153 | } 154 | 155 | @include media-breakpoint-up(sm) { 156 | margin-right: -$card-deck-margin; 157 | margin-left: -$card-deck-margin; 158 | 159 | .card { 160 | margin-right: $card-deck-margin; 161 | margin-left: $card-deck-margin; 162 | } 163 | } 164 | } 165 | 166 | 167 | // 168 | // Card groups 169 | // 170 | 171 | .card-group { 172 | // The child selector allows nested `.card` within `.card-group` 173 | // to display properly. 174 | > .card { 175 | @include box-shadow($card-box-shadow); 176 | 177 | &:last-child .card-body, 178 | &:last-child .card-footer { 179 | border-right: none; 180 | } 181 | } 182 | 183 | .card-body, 184 | .card-footer { 185 | border-right: $card-group-card-border; 186 | } 187 | 188 | @include media-breakpoint-up(sm) { 189 | @include box-shadow($card-box-shadow); 190 | @include border-radius($card-border-radius); 191 | 192 | > .card { 193 | box-shadow: none; 194 | 195 | // Handle rounded corners 196 | @if $enable-rounded { 197 | &:first-child { 198 | @include border-right-radius(0); 199 | } 200 | 201 | &:last-child { 202 | @include border-left-radius(0); 203 | } 204 | 205 | &:only-child { 206 | @include border-radius($card-border-radius); 207 | 208 | .card-img-top, 209 | .card-header { 210 | @include border-top-radius($card-border-radius); 211 | } 212 | .card-img-bottom, 213 | .card-footer { 214 | @include border-bottom-radius($card-border-radius); 215 | } 216 | } 217 | 218 | &:not(:first-child):not(:last-child):not(:only-child) { 219 | @include border-radius(0); 220 | 221 | .card-img-top, 222 | .card-img-bottom, 223 | .card-header, 224 | .card-footer { 225 | @include border-radius(0); 226 | } 227 | } 228 | } 229 | } 230 | } 231 | } 232 | 233 | // 234 | // Columns 235 | // 236 | 237 | .card-columns { 238 | .card { 239 | margin-bottom: $card-columns-margin; 240 | } 241 | 242 | @include media-breakpoint-up(sm) { 243 | column-count: $card-columns-count; 244 | column-gap: $card-columns-gap; 245 | } 246 | } 247 | -------------------------------------------------------------------------------- /src/scss/_carousel.scss: -------------------------------------------------------------------------------- 1 | // Carousel adjustments 2 | 3 | .carousel { 4 | box-shadow: $card-box-shadow; 5 | } 6 | 7 | .carousel-item { 8 | @include transition($carousel-transition); 9 | } 10 | 11 | // Left/right controls for nav 12 | .carousel-control-prev, 13 | .carousel-control-next { 14 | width: $carousel-control-width; 15 | color: $carousel-control-color; 16 | opacity: $carousel-control-opacity; 17 | 18 | // Hover/focus state 19 | @include hover-focus { 20 | color: $carousel-control-color; 21 | } 22 | } 23 | 24 | // Icons for within 25 | .carousel-control-prev-icon, 26 | .carousel-control-next-icon { 27 | width: $carousel-control-icon-width; 28 | height: $carousel-control-icon-width; 29 | } 30 | 31 | .carousel-control-prev-icon { 32 | background-image: $carousel-control-prev-icon-bg; 33 | } 34 | 35 | .carousel-control-next-icon { 36 | background-image: $carousel-control-next-icon-bg; 37 | } 38 | 39 | // Optional indicator pips 40 | .carousel-indicators { 41 | margin-right: $carousel-control-width; 42 | margin-left: $carousel-control-width; 43 | 44 | li { 45 | width: $carousel-indicator-width; 46 | height: $carousel-indicator-height; 47 | margin-right: $carousel-indicator-spacer; 48 | margin-left: $carousel-indicator-spacer; 49 | background-color: rgba($carousel-indicator-active-bg, .5); 50 | border-radius: $carousel-indicator-border-radius; 51 | } 52 | 53 | .active { 54 | background-color: $carousel-indicator-active-bg; 55 | } 56 | } 57 | 58 | // Optional captions 59 | .carousel-caption { 60 | right: ((100% - $carousel-caption-width) / 2); 61 | left: ((100% - $carousel-caption-width) / 2); 62 | color: $carousel-caption-color; 63 | } -------------------------------------------------------------------------------- /src/scss/_close.scss: -------------------------------------------------------------------------------- 1 | // Close button adjustments 2 | 3 | .close { 4 | font-size: $close-font-size; 5 | font-weight: $close-font-weight; 6 | color: $close-color; 7 | text-shadow: $close-text-shadow; 8 | @include transition($transition-base); 9 | 10 | @include hover-focus { 11 | color: $close-color; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/_code.scss: -------------------------------------------------------------------------------- 1 | // Code Styling Adjustments 2 | 3 | // Inline and block code styles 4 | code, 5 | kbd, 6 | pre, 7 | samp { 8 | font-family: $font-family-monospace; 9 | } 10 | 11 | // Inline code 12 | code { 13 | font-size: $code-font-size; 14 | padding: $code-padding-y $code-padding-x; 15 | } 16 | 17 | // User input typically entered via keyboard 18 | kbd { 19 | padding: $kbd-padding-y $kbd-padding-x; 20 | font-size: $kbd-font-size; 21 | color: $kbd-color; 22 | background-color: $kbd-bg; 23 | @include border-radius($kbd-border-radius); 24 | @include box-shadow($kbd-box-shadow); 25 | 26 | kbd { 27 | font-weight: $nested-kbd-font-weight; 28 | } 29 | } 30 | 31 | // Blocks of code 32 | pre { 33 | margin-bottom: .75rem; 34 | font-size: $code-font-size; 35 | color: $pre-color; 36 | line-height: $code-line-height; 37 | } 38 | 39 | // Scrollable blocks of code 40 | .pre-scrollable { 41 | max-height: $pre-scrollable-max-height; 42 | } -------------------------------------------------------------------------------- /src/scss/_custom-datepicker.scss: -------------------------------------------------------------------------------- 1 | // Custom datepickers 2 | 3 | .datepicker { 4 | border-radius: $datepicker-border-radius; 5 | 6 | &-inline { 7 | width: 220px; 8 | } 9 | 10 | direction: ltr; 11 | 12 | &-rtl { 13 | direction: rtl; 14 | &.dropdown-menu { left: auto; } 15 | table tr td span { 16 | float: right; 17 | } 18 | } 19 | 20 | &-dropdown { 21 | top: 0; 22 | left: 0; 23 | padding: $datepicker-dropdown-padding; 24 | 25 | &:before, 26 | &:after { 27 | content: ''; 28 | display: inline-block; 29 | border-top: 0; 30 | position: absolute; 31 | } 32 | 33 | &:before { 34 | border-left: 7px solid transparent; 35 | border-right: 7px solid transparent; 36 | border-bottom: 7px solid $datepicker-dropdown-border; 37 | border-bottom-color: rgba(0,0,0,.2); 38 | } 39 | 40 | &:after { 41 | border-left: 6px solid transparent; 42 | border-right: 6px solid transparent; 43 | border-bottom: 6px solid $datepicker-dropdown-bg; 44 | } 45 | 46 | &.datepicker-orient-left:before { left: 6px; } 47 | &.datepicker-orient-left:after { left: 7px; } 48 | &.datepicker-orient-right:before { right: 6px; } 49 | &.datepicker-orient-right:after { right: 7px; } 50 | &.datepicker-orient-bottom:before { top: -7px; } 51 | &.datepicker-orient-bottom:after { top: -6px; } 52 | 53 | &.datepicker-orient-top:before { 54 | bottom: -7px; 55 | border-bottom: 0; 56 | border-top: 7px solid $datepicker-dropdown-border; 57 | } 58 | 59 | &.datepicker-orient-top:after { 60 | bottom: -6px; 61 | border-bottom: 0; 62 | border-top: 6px solid $datepicker-dropdown-bg; 63 | } 64 | 65 | } 66 | 67 | table { 68 | margin: 0; 69 | -webkit-touch-callout: none; 70 | user-select: none; 71 | 72 | tr { 73 | td { 74 | border-radius: $datepicker-cell-border-radius; 75 | } 76 | 77 | th { 78 | border-radius: $datepicker-header-cell-border-radius; 79 | font-weight: 500; 80 | } 81 | 82 | td, th { 83 | transition: $datepicker-cell-transition; 84 | width: $datepicker-cell-width; 85 | height: $datepicker-cell-height; 86 | border: none; 87 | text-align: center; 88 | } 89 | } 90 | } 91 | 92 | // Inline display inside a table presents some problems with 93 | // border and background colors. 94 | .table-striped & table tr { 95 | td, th { 96 | background-color: transparent; 97 | } 98 | } 99 | 100 | table tr td { 101 | &.old, 102 | &.new { 103 | color: $datepicker-disabled-old-new-color; 104 | } 105 | 106 | &.day:hover, 107 | &.focused { 108 | background: $datepicker-cell-hover-background; 109 | cursor: pointer; 110 | } 111 | 112 | &.disabled, 113 | &.disabled:hover { 114 | background: none; 115 | color: $datepicker-disabled-cell-color; 116 | cursor: default; 117 | } 118 | 119 | &.highlighted { 120 | border-radius: 0; 121 | 122 | &.focused { 123 | background: $datepicker-highlighted-bg 124 | } 125 | 126 | &.disabled, 127 | &.disabled:active { 128 | background: $datepicker-highlighted-bg; 129 | color: $blueish-grey; 130 | } 131 | } 132 | 133 | &.today { 134 | background: lighten($datepicker-active-background, 45%); 135 | &.focused { 136 | background: lighten($blueish-grey, 58%); 137 | } 138 | 139 | &.disabled, 140 | &.disabled:active { 141 | background: lighten($blueish-grey, 58%); 142 | color: $btn-link-disabled-color; 143 | } 144 | } 145 | 146 | // Range selection 147 | 148 | &.range { 149 | background: $datepicker-range-background; 150 | color: $datepicker-range-color; 151 | border-radius: 0; 152 | 153 | &.focused { 154 | background: darken($datepicker-range-cell-focused-background, 3%); 155 | } 156 | 157 | &.disabled, 158 | &.disabled:active, 159 | &.day.disabled:hover { 160 | background: darken($datepicker-active-background, 10%); 161 | color: lighten($datepicker-active-background, 10%); 162 | } 163 | } 164 | 165 | &.range.highlighted { 166 | &.focused { 167 | background: darken($datepicker-range-highlighted-bg, 10%); 168 | } 169 | 170 | &.disabled, 171 | &.disabled:active { 172 | background: $datepicker-range-highlighted-bg; 173 | color: $datepicker-disabled-cell-color; 174 | } 175 | } 176 | 177 | &.range.today { 178 | &.disabled, 179 | &.disabled:active { 180 | background: $blue; 181 | color: $white; 182 | } 183 | } 184 | 185 | &.day.range-start { 186 | border-top-right-radius: 0; 187 | border-bottom-right-radius: 0; 188 | } 189 | 190 | &.day.range-end { 191 | border-top-left-radius: 0; 192 | border-bottom-left-radius: 0; 193 | } 194 | 195 | &.day.range-start.range-end { 196 | border-radius: $datepicker-cell-border-radius; 197 | } 198 | 199 | &.selected, 200 | &.selected.highlighted, 201 | &.selected:hover, 202 | &.selected.highlighted:hover, 203 | &.day.range:hover { 204 | background: $datepicker-active-background; 205 | color: $datepicker-active-color; 206 | } 207 | 208 | &.active, 209 | &.active.highlighted, 210 | &.active:hover, 211 | &.active.highlighted:hover { 212 | background: $datepicker-active-background; 213 | color: $datepicker-active-color; 214 | } 215 | 216 | span { 217 | display: block; 218 | width: 23%; 219 | height: 54px; 220 | line-height: 54px; 221 | float: left; 222 | margin: 1%; 223 | cursor: pointer; 224 | border-radius: 4px; 225 | 226 | &:hover, 227 | &.focused { 228 | background: $gray-200; 229 | } 230 | 231 | &.disabled, 232 | &.disabled:hover { 233 | background: none; 234 | color: $datepicker-disabled-cell-color; 235 | cursor: default; 236 | } 237 | 238 | &.active, 239 | &.active:hover, 240 | &.active.disabled, 241 | &.active.disabled:hover { 242 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 243 | } 244 | 245 | &.old, 246 | &.new { 247 | color: $btn-link-disabled-color; 248 | } 249 | } 250 | } 251 | 252 | .datepicker-switch { 253 | width: 145px; 254 | } 255 | 256 | .datepicker-switch, 257 | .prev, 258 | .next, 259 | tfoot tr th { 260 | cursor: pointer; 261 | &:hover { 262 | background: $gray-200; 263 | } 264 | } 265 | 266 | .prev, .next { 267 | &.disabled { 268 | visibility: hidden; 269 | } 270 | } 271 | 272 | // Basic styling for calendar-week cells 273 | .cw { 274 | font-size: 10px; 275 | width: 12px; 276 | padding: 0 2px 0 5px; 277 | vertical-align: middle; 278 | } 279 | } 280 | 281 | .input-daterange { 282 | input { 283 | text-align: center; 284 | } 285 | } 286 | -------------------------------------------------------------------------------- /src/scss/_custom-sliders.scss: -------------------------------------------------------------------------------- 1 | // Custom Sliders 2 | // Powered by nouislider - 11.1.0 3 | 4 | .noUi-target, 5 | .noUi-target * { 6 | -webkit-touch-callout: none; 7 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 8 | -webkit-user-select: none; 9 | -ms-touch-action: none; 10 | touch-action: none; 11 | -ms-user-select: none; 12 | -moz-user-select: none; 13 | user-select: none; 14 | -moz-box-sizing: border-box; 15 | box-sizing: border-box; 16 | } 17 | 18 | .noUi-target { 19 | position: relative; 20 | direction: ltr; 21 | background: $slider-base-background; 22 | border-radius: $slider-base-border-radius; 23 | box-shadow: $slider-base-box-shadow; 24 | margin: $slider-base-margin-top 0; 25 | 26 | &:focus { 27 | outline: 0; 28 | box-shadow: $slider-handle-focus-box-shadow; 29 | } 30 | } 31 | 32 | .noUi-base, 33 | .noUi-connects { 34 | width: 100%; 35 | height: 100%; 36 | position: relative; 37 | z-index: 1; 38 | } 39 | 40 | // Wrapper for all connect elements. 41 | .noUi-connects { 42 | overflow: hidden; 43 | z-index: 0; 44 | } 45 | 46 | .noUi-connect, 47 | .noUi-origin { 48 | position: absolute; 49 | will-change: transform; 50 | z-index: 1; 51 | top: 0; 52 | left: 0; 53 | height: 100%; 54 | width: 100%; 55 | -ms-transform-origin: 0 0; 56 | -webkit-transform-origin: 0 0; 57 | transform-origin: 0 0; 58 | 59 | &:focus { 60 | outline: 0; 61 | } 62 | } 63 | 64 | .noUi-connect { 65 | background: $slider-connect-color; 66 | border-radius: $slider-base-border-radius; 67 | } 68 | 69 | // LTR Adjustments 70 | html:not([dir="rtl"]) { 71 | .noUi-horizontal { 72 | .noUi-origin { 73 | left: auto; 74 | right: 0; 75 | } 76 | 77 | .noUi-handle { 78 | right: -11.5px; 79 | left: auto; 80 | } 81 | } 82 | } 83 | 84 | // RTL Adjustments 85 | .noUi-rtl { 86 | .noUi-value-horizontal { 87 | -webkit-transform: translate(50%, 50%); 88 | transform: translate(50%, 50%); 89 | } 90 | 91 | .noUi-value-vertical { 92 | -webkit-transform: translate(0, 50%); 93 | transform: translate(0, 50%); 94 | } 95 | } 96 | 97 | // Vertical 98 | .noUi-vertical { 99 | width: $slider-base-size; 100 | 101 | .noUi-origin { 102 | width: 0; 103 | } 104 | 105 | .noUi-handle { 106 | left: -10px; 107 | top: -$slider-handle-width / 2; 108 | 109 | &:before, 110 | &:after { 111 | width: 14px; 112 | height: 1px; 113 | left: 6px; 114 | top: 14px; 115 | } 116 | 117 | &:after { 118 | top: 17px; 119 | } 120 | } 121 | 122 | .noUi-tooltip { 123 | -webkit-transform: translate(0, -50%); 124 | transform: translate(0, -50%); 125 | top: 50%; 126 | right: 30px; 127 | } 128 | 129 | .noUi-draggable { 130 | cursor: ns-resize; 131 | } 132 | } 133 | 134 | // Horizontal. 135 | .noUi-horizontal { 136 | height: $slider-base-size; 137 | 138 | .noUi-origin { 139 | height: 0; 140 | } 141 | 142 | .noUi-handle { 143 | left: -$slider-handle-width / 2; 144 | top: -10px; 145 | } 146 | 147 | .noUi-tooltip { 148 | -webkit-transform: translate(-50%, 0); 149 | transform: translate(-50%, 0); 150 | left: 50%; 151 | bottom: 30px; 152 | } 153 | } 154 | 155 | .noUi-handle { 156 | position: absolute; 157 | border: $slider-handle-border; 158 | border-radius: $slider-handle-border-radius; 159 | width: $slider-handle-width; 160 | height: $slider-handle-height; 161 | box-shadow: $slider-handle-box-shadow; 162 | background: $slider-handle-background; 163 | transition: $slider-handle-transition; 164 | 165 | // Change the cursor to a grab hand on hover. 166 | &:hover { 167 | cursor: grab; 168 | cursor: -webkit-grab; 169 | cursor:-moz-grab; 170 | } 171 | 172 | // Change the cursor to a grabbing hand on active. 173 | &:active { 174 | cursor: grabbing; 175 | cursor: -webkit-grabbing; 176 | cursor:-moz-grabbing; 177 | } 178 | 179 | &:focus { 180 | outline: 0; 181 | box-shadow: $slider-handle-focus-box-shadow; 182 | } 183 | 184 | &:after { 185 | left: 17px; 186 | } 187 | } 188 | 189 | // Tap and drag states. 190 | .noUi-state-tap { 191 | .noUi-connect, 192 | .noUi-origin { 193 | -webkit-transition: transform 0.3s; 194 | transition: transform 0.3s; 195 | } 196 | } 197 | 198 | .noUi-state-drag * { 199 | cursor: inherit !important; 200 | } 201 | 202 | .noUi-connects { 203 | border-radius: $slider-base-border-radius; 204 | } 205 | 206 | .noUi-draggable { 207 | cursor: ew-resize; 208 | } 209 | 210 | .noUi-active { 211 | transform: scale(1.1); 212 | } 213 | 214 | // Disabled state 215 | [disabled] { 216 | .noUi-connect { 217 | background: #B8B8B8; 218 | } 219 | 220 | &.noUi-target, 221 | &.noUi-handle, 222 | .noUi-handle { 223 | cursor: not-allowed; 224 | } 225 | 226 | .noUi-handle { 227 | background: $slider-handle-disabled-background; 228 | 229 | // Override to the default handle box shadow when the slider is disabled. 230 | &:focus { 231 | box-shadow: $slider-handle-box-shadow; 232 | } 233 | } 234 | } 235 | 236 | // Pips 237 | 238 | // Pips: Base 239 | .noUi-pips, 240 | .noUi-pips * { 241 | -moz-box-sizing: border-box; 242 | box-sizing: border-box; 243 | } 244 | 245 | .noUi-pips { 246 | position: absolute; 247 | color: $slider-pips-color; 248 | font-size: 12px; 249 | } 250 | 251 | // Pips: Values 252 | .noUi-value { 253 | position: absolute; 254 | white-space: nowrap; 255 | text-align: center; 256 | } 257 | 258 | .noUi-value-sub { 259 | color: $slider-pips-color; 260 | font-size: 10px; 261 | } 262 | 263 | // Pips: Markings 264 | .noUi-marker { 265 | position: absolute; 266 | background: $slider-pips-color; 267 | } 268 | 269 | .noUi-marker-sub { 270 | background: $slider-pips-color; 271 | } 272 | 273 | .noUi-marker-large { 274 | background: $slider-pips-color; 275 | } 276 | 277 | // Pips: Horizontal 278 | .noUi-pips-horizontal { 279 | padding: 10px 0; 280 | height: auto; 281 | top: 100%; 282 | left: 0; 283 | width: 100%; 284 | } 285 | 286 | .noUi-value-horizontal { 287 | transform: translate3d(-50%, 50%, 0); 288 | } 289 | 290 | .noUi-marker-horizontal { 291 | &.noUi-marker { 292 | margin-left: -1px; 293 | width: 1px; 294 | height: 4px; 295 | } 296 | 297 | &.noUi-marker-sub { 298 | height: 5px; 299 | } 300 | 301 | &.noUi-marker-large { 302 | height: 7px; 303 | } 304 | } 305 | 306 | // Pips: Vertical 307 | .noUi-pips-vertical { 308 | padding: 0 10px; 309 | height: 100%; 310 | top: 0; 311 | left: 100%; 312 | } 313 | 314 | .noUi-value-vertical { 315 | transform: translate3d(0, -50%, 0); 316 | padding-left: 15px; 317 | } 318 | 319 | .noUi-marker-vertical { 320 | &.noUi-marker { 321 | width: 4px; 322 | height: 1px; 323 | margin-top: -1px; 324 | } 325 | 326 | &.noUi-marker-sub { 327 | width: 10px; 328 | } 329 | 330 | &.noUi-marker-large { 331 | width: 7px; 332 | } 333 | } 334 | 335 | .noUi-tooltip { 336 | display: block; 337 | position: absolute; 338 | text-align: center; 339 | white-space: nowrap; 340 | border-radius: $slider-tooltip-border-radius; 341 | border-radius: $slider-tooltip-border-radius; 342 | background: $slider-tooltip-background; 343 | color: $slider-tooltip-color; 344 | box-shadow: $slider-tooltip-box-shadow; 345 | font-size: $slider-tooltip-font-size; 346 | padding: $slider-tooltip-padding; 347 | } 348 | 349 | // Color variations 350 | @each $color, $value in $theme-colors { 351 | .slider-#{$color} { 352 | .noUi-connect { 353 | background: $value; 354 | } 355 | } 356 | } 357 | -------------------------------------------------------------------------------- /src/scss/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // The dropdown menu 2 | .dropdown-menu { 3 | z-index: $zindex-dropdown; 4 | min-width: $dropdown-min-width; 5 | padding: $dropdown-padding-y 0; 6 | margin: $dropdown-spacer 0 0; 7 | font-size: $font-size-base; 8 | color: $body-color; 9 | background-color: $dropdown-bg; 10 | border: $dropdown-border-width solid $dropdown-border-color; 11 | @include border-radius($dropdown-border-radius); 12 | @include box-shadow($dropdown-box-shadow); 13 | 14 | &-small { 15 | @include box-shadow($dropdown-small-box-shadow); 16 | padding: $dropdown-small-padding-y 0; 17 | font-size: $dropdown-small-font-size; 18 | 19 | .dropdown-item { 20 | padding: $dropdown-small-item-padding-y $dropdown-small-item-padding-x; 21 | font-size: $dropdown-small-item-font-size; 22 | } 23 | 24 | .dropdown-divider { 25 | margin: $dropdown-small-divider-margin-y $dropdown-small-divider-margin-x; 26 | } 27 | } 28 | } 29 | 30 | .dropup .dropdown-menu { 31 | margin-bottom: $dropdown-spacer; 32 | } 33 | 34 | .dropright .dropdown-menu { 35 | margin-left: $dropdown-spacer; 36 | } 37 | 38 | .dropleft .dropdown-menu { 39 | margin-right: $dropdown-spacer; 40 | } 41 | 42 | // Dividers (basically an `
`) within the dropdown 43 | .dropdown-divider { 44 | @include nav-divider($dropdown-divider-bg); 45 | } 46 | 47 | // Links, buttons, and more within the dropdown menu 48 | // 49 | // `