mirror of
https://github.com/Xevion/old.xevion.github.io.git
synced 2025-12-06 05:15:40 -06:00
v3
This commit is contained in:
Brittany Chiang
@@ -2,6 +2,9 @@
|
||||
"root": true,
|
||||
"extends": "starry",
|
||||
"rules": {
|
||||
"no-var": 0,
|
||||
"starry/space-in-parens": ["error", "never"],
|
||||
"starry/computed-property-spacing": ["error", "never"],
|
||||
"object-curly-spacing": [2, "never"],
|
||||
"array-bracket-spacing": ["error", "never"]
|
||||
}
|
||||
}
|
||||
|
||||
15
404.html
15
404.html
@@ -3,13 +3,8 @@ layout: not_found
|
||||
title: 404
|
||||
permalink: /404.html
|
||||
---
|
||||
|
||||
<div id="particles-js"></div>
|
||||
<div class="text-container">
|
||||
<div class="text">
|
||||
<h1>404</h1>
|
||||
<h3>Houston, we have a problem.</h3>
|
||||
<a href="http://brittanychiang.com">Back to Earth 🚀</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-particles"><span class="js-count-particles">--</span> particles </div>
|
||||
{% include switch.html %}
|
||||
<div class="name">Brittany Chiang</div>
|
||||
<img src="{{site.baseurl}}/img/emojis/thinking-face.png" alt="">
|
||||
<h1>Hmmm...</h1>
|
||||
<h2>Looks like there's nothing here.<br>Maybe you should go back <a href="{{site.url}}">home</a>.</h2>
|
||||
|
||||
28
README.md
28
README.md
@@ -1,24 +1,12 @@
|
||||
# Personal Website V2 🚀🔥
|
||||
# Personal Website V3
|
||||
|
||||
Hello! Thanks for checking out the repo for my latest portfolio website. This website isn't just my new portfolio, but also a personal project in and of itself. I think I've grown quite a bit as a developer & designer in the past year, so I wanted to create something to showcase some of what I've learned and done.
|
||||
|
||||
## Getting started
|
||||
## Dependencies
|
||||
- [Ruby](https://github.com/creationix/nvm)
|
||||
- [Node.js](https://github.com/creationix/nvm)
|
||||
- `npm install gulp-cli -g`
|
||||
- `npm install`
|
||||
- `gem install jekyll sass bundler jekyll-minifier jekyll-sitemap`
|
||||
- `gulp serve` to start a dev server
|
||||
- `gulp build` for prod
|
||||
|
||||
## What I used
|
||||
- [Sublime Text 3](https://www.sublimetext.com/3) my ride-or-die
|
||||
- [Github Pages](https://pages.github.com/) for easy push-to-deploy hosting
|
||||
- [Jekyll](https://jekyllrb.com/) for a static site generator
|
||||
- [Sass](http://sass-lang.com/) for less time-consuming and more modular CSS
|
||||
- [Bourbon](http://bourbon.io/) for sass mixins
|
||||
- [Gulp](http://gulpjs.com/) for an automated and enhanced workflow
|
||||
- [Flaticon](http://www.flaticon.com/) for images
|
||||
- [Unsplash](https://unsplash.com/) for stock photos
|
||||
- [Skrollr.js](https://github.com/Prinzhorn/skrollr) for parallax effects
|
||||
- [Formspree](https://formspree.io/) for a simple, sans-PHP contact form
|
||||
|
||||
Let me know what you think!
|
||||
## Getting Started
|
||||
1. `npm install`
|
||||
1. `gulp serve` for development
|
||||
1. `gulp build` for prod
|
||||
@@ -1,12 +1,12 @@
|
||||
# Site settings
|
||||
name: Brittany Chiang
|
||||
title: Brittany Chiang | Front End Software Engineer
|
||||
description: Design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design.
|
||||
url: http://brittanychiang.com/
|
||||
description: Design-minded front-end software engineer focused on building beautiful interfaces and experiences
|
||||
url: https://brittanychiang.com/
|
||||
baseurl: ""
|
||||
email: brittany.chiang@gmail.com
|
||||
cover: http://brittanychiang.com/img/og.jpg
|
||||
logo: http://brittanychiang.com/img/logo-black.png
|
||||
cover: http://brittanychiang.com/img/og.png
|
||||
logo: http://brittanychiang.com/img/emojis/technologist.png
|
||||
resume: http://brittanychiang.com/resume.pdf
|
||||
social:
|
||||
- title: email
|
||||
|
||||
45
_config_dev.yml
Normal file
45
_config_dev.yml
Normal file
@@ -0,0 +1,45 @@
|
||||
# Site settings
|
||||
name: Brittany Chiang
|
||||
title: Brittany Chiang | Front End Software Engineer
|
||||
description: Design-minded front-end software engineer focused on building beautiful interfaces and experiences
|
||||
url: https://brittanychiang.com/
|
||||
baseurl: ""
|
||||
email: brittany.chiang@gmail.com
|
||||
cover: http://brittanychiang.com/img/og.png
|
||||
logo: http://brittanychiang.com/img/emojis/technologist.png
|
||||
resume: http://brittanychiang.com/resume.pdf
|
||||
social:
|
||||
- title: email
|
||||
url: mailto:brittany.chiang@gmail.com
|
||||
- title: twitter
|
||||
url: https://twitter.com/bchiang7
|
||||
- title: instagram
|
||||
url: https://instagram.com/bchiang7
|
||||
- title: codepen
|
||||
url: http://codepen.io/bchiang7
|
||||
- title: github
|
||||
url: https://github.com/bchiang7
|
||||
- title: linkedin
|
||||
url: https://www.linkedin.com/in/bchiang7
|
||||
|
||||
# Build settings
|
||||
markdown: kramdown
|
||||
|
||||
exclude:
|
||||
- "Gemfile"
|
||||
- "Gemfile.lock"
|
||||
- "*.gemspec"
|
||||
- "README.md"
|
||||
- "node_modules"
|
||||
- "build"
|
||||
- "gulpfile.js"
|
||||
- "package.json"
|
||||
|
||||
keep_files:
|
||||
- "CNAME"
|
||||
- ".git"
|
||||
- ".gitignore"
|
||||
|
||||
plugins:
|
||||
- jekyll-minifier
|
||||
- jekyll-sitemap
|
||||
34
_data/experience.yml
Normal file
34
_data/experience.yml
Normal file
@@ -0,0 +1,34 @@
|
||||
- company: Apple
|
||||
url: https://www.apple.com/music/
|
||||
time: July 2017 - Present
|
||||
position: UI Engineer Co-op
|
||||
|
||||
- company: Scout
|
||||
url: https://web.northeastern.edu/scout/
|
||||
time: Jan - June 2017
|
||||
position: Studio Developer
|
||||
|
||||
- company: Starry
|
||||
url: https://starry.com/
|
||||
time: July - Dec 2016
|
||||
position: Software Engineer Co-op
|
||||
|
||||
- company: Northeastern University
|
||||
url: http://www.ccis.northeastern.edu/
|
||||
time: Jan - May 2016
|
||||
position: HCI Teaching Assistant
|
||||
|
||||
- company: NU Women in Tech
|
||||
url: http://nuwit.ccs.neu.edu/
|
||||
time: Jan 2016 - May 2017
|
||||
position: President & Web Chair
|
||||
|
||||
- company: MullenLowe U.S.
|
||||
url: https://us.mullenlowe.com/
|
||||
time: July - Dec 2015
|
||||
position: Creative Technologist Co-op
|
||||
|
||||
- company: Northeastern University
|
||||
url: http://www.ccis.northeastern.edu/
|
||||
time: Mar - May 2015
|
||||
position: HCI Research Assistant
|
||||
@@ -1,28 +0,0 @@
|
||||
- section: intro
|
||||
title: Intro
|
||||
number: 0
|
||||
|
||||
- section: about
|
||||
title: About
|
||||
number: 1
|
||||
|
||||
- section: services
|
||||
title: What I Do
|
||||
number: 2
|
||||
|
||||
- section: skills
|
||||
title: Skills
|
||||
number: 3
|
||||
|
||||
- section: experience
|
||||
title: Experience
|
||||
number: 4
|
||||
|
||||
- section: portfolio
|
||||
title: Portfolio
|
||||
number: 5
|
||||
|
||||
- section: contact
|
||||
title: Contact
|
||||
number: 6
|
||||
|
||||
127
_data/other-projects.yml
Normal file
127
_data/other-projects.yml
Normal file
@@ -0,0 +1,127 @@
|
||||
- name: Lonely Planet DBMS
|
||||
url: https://github.com/bchiang7/CS3200-Project
|
||||
code: https://github.com/bchiang7/CS3200-Project
|
||||
description: Final project for my Database Design course at Northeastern. A simple web application that allows users to filter through a database containing Lonely Planet's <a class="underline-link" href="https://www.amazon.com/Lonely-Planets-Ultimate-Travel-Places/dp/1760342777" target="_blank">Top 500 Travel Destinations</a>. Users are able to add themselves as visitors as well as leave reviews of the destinations.
|
||||
used:
|
||||
- thing: Python
|
||||
- thing: MySQL
|
||||
- thing: Flask
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: JavaScript
|
||||
|
||||
- name: myNEU Redesign
|
||||
url: http://brittanychiang.com/Redesign-myNEU/
|
||||
code: https://github.com/bchiang7/Redesign-myNEU
|
||||
description: myNEU student portal web prototype for my information science senior project. I conducted a study that aimed to answer the question of how myNEU can be improved to provide students at Northeastern with a better user experience. Informed by usability metrics gathered from user tests, I redesigned and developed a web prototype of myNEU.
|
||||
used:
|
||||
- thing: Jekyll
|
||||
- thing: HTML
|
||||
- thing: SCSS
|
||||
- thing: JavaScript
|
||||
|
||||
- name: Crowd DJ
|
||||
url: https://github.com/crowddj/crowddj-react
|
||||
code: https://github.com/crowddj/crowddj-react
|
||||
description: A web app that allows people who are at a party or social gathering with a DJ to request songs via their smartphones. The web app allows people to see the currently playing song, request songs, upvote songs, and rate songs so the DJ can see how the crowd is feeling and act accordingly. In other words, Crowd DJ is essentially a crowdsourced music queue. <br>
|
||||
<a class="small" href="http://projects.hackbeanpot.com/2017-projects.html">🏆 Won Best UI/UX Design at Hackbeanpot 2017 🏆</a>
|
||||
used:
|
||||
- thing: React
|
||||
- thing: Sass
|
||||
- thing: Firebase
|
||||
- thing: Spotify API
|
||||
|
||||
- name: Weather Widget
|
||||
url: http://quiet-dusk-89245.herokuapp.com/
|
||||
code: https://github.com/bchiang7/DemoWebApp
|
||||
description: A simple weather app I made at HubSpot's Fall 2016 Web App Workshop with Node.js, Express, and Heroku. I used the OpenWeatherMap API to get weather and forecast data, and then used the current city's coordinates to create a map background that reflected the current city using the Google Maps API.
|
||||
img: weather
|
||||
used:
|
||||
- thing: JavaScript
|
||||
- thing: CSS
|
||||
- thing: Node.js
|
||||
- thing: Express
|
||||
- thing: Heroku
|
||||
- thing: OpenWeatherMap API
|
||||
- thing: Google Maps API
|
||||
|
||||
# - name: ScreenTime 2.0
|
||||
# url: https://play.google.com/store/apps/details?id=com.starry.management
|
||||
# description: App-blocking feature on <a class="underline-link" href="https://starry.com/station" target="_blank">Starry Station</a> that provides functionality for users to easily filter content, pause the internet, and even create custom rules for blocking apps like Facebook and Twitter right from their mobile phones. Learn more about ScreenTime 2.0 on <a class="underline-link" href="https://www.producthunt.com/tech/screentime-for-starry-station" target="_blank">Product Hunt</a> and the <a class="underline-link" href="https://blog.starry.com/whats-new-screentime-just-got-better-for-parents/" target="_blank">Starry Blog</a>.
|
||||
# used:
|
||||
# - thing: JavaScript
|
||||
# - thing: CSS
|
||||
# - thing: Handlebars
|
||||
# - thing: Backbone
|
||||
# - thing: Marionette
|
||||
# - thing: Cordova
|
||||
|
||||
- name: React Resume
|
||||
url: http://brittanychiang.com/react-profile/
|
||||
code: https://github.com/bchiang7/react-profile/
|
||||
description: An online version of my 2016 resume I made for fun. I was interested in learning React.js, so I found this <a class="underline-link" href="https://medium.com/learning-new-stuff/building-your-first-react-js-app-d53b0c98dc#.1439cdewq">simple tutorial</a> and it kind of spun into this weekend project. I probably didn't need to use React at all, but hey, at least I learned a few things!
|
||||
used:
|
||||
- thing: JavaScript
|
||||
- thing: React
|
||||
- thing: CSS
|
||||
|
||||
- name: CourseSource
|
||||
url: http://webdevspring2016-chiangbrittany.rhcloud.com/project/client/#/login
|
||||
code: https://github.com/bchiang7/WebDevSpring2016/tree/master/public/project
|
||||
description: A web application built on the MEAN (MongoDB, Express, Angular, Node) stack for my web development course at Northeastern. I created this web app with the intention of providing Northeastern Students a better experience browsing the courses offered at Northeastern.
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: JavaScript
|
||||
- thing: Node.js
|
||||
- thing: Angular
|
||||
- thing: Express
|
||||
- thing: MongoDB
|
||||
|
||||
- name: NU Women in Tech
|
||||
url: http://nuwit.ccs.neu.edu/
|
||||
code: https://github.com/nuwit/website
|
||||
description: Complete overhaul and redesign of NU Women in Tech's club website using Jekyll, built while serving as web chair on the e-board.
|
||||
used:
|
||||
- thing: Jekyll
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: JavaScript
|
||||
- thing: Bootstrap
|
||||
|
||||
- name: Fontipsums
|
||||
url: http://brittanychiang.com/fontipsums
|
||||
code: https://github.com/bchiang7/fontipsums
|
||||
description: As someone who has an eye for typography, I wanted a way to visually see different font combinations together. I whipped up this simple website to display some of my favorite pairings combined with some fun lorem ipsum variations I found on the web.
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: SCSS
|
||||
|
||||
- name: Personal Website V1
|
||||
url: http://brittanychiang.com/v1
|
||||
code: https://github.com/bchiang7/website_2015/
|
||||
description: My first portfolio website I designed and built in 2014. I learned quite a bit about HTML, CSS, and SEO. Since then, I think my web development and design skills have improved immensely.
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: Bootstrap
|
||||
- thing: JavaScript
|
||||
- thing: jQuery
|
||||
|
||||
- name: One Card For All
|
||||
url: http://onecardforall.org
|
||||
description: MullenLowe's 2016 holiday site built around an algorithm that generates a holiday greeting to each and every person on the planet. As new names appear, visitors can watch them fall, like snowflakes, onto a stylized world map. Users can also find their own name and see it as part of the world collective. Check out this short <a class="underline-link" href="http://us.mullenlowe.com/work/one-card-for-all/" target="_blank">video</a> describing the project.
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: SCSS
|
||||
- thing: JavaScript
|
||||
- thing: jQuery
|
||||
|
||||
- name: JetBlue HumanKinda
|
||||
url: http://jetbluehumankinda.com
|
||||
description: Tumblr site complementing JetBlue's HumanKinda campaign and documentary. The site houses the video documentary, many graphics created by Mullen for the campaign, and an interactive quiz to determine how "HumanKinda" you are. Learn more about this project <a class="underline-link" href="http://us.mullenlowe.com/work/humankinda/" target="_blank">here</a>.
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: JavaScript
|
||||
- thing: jQuery
|
||||
@@ -1,118 +0,0 @@
|
||||
- title: Crowd DJ
|
||||
demo: https://github.com/crowddj/crowddj-react
|
||||
code: https://github.com/crowddj/crowddj-react
|
||||
description: Crowd DJ is a web app that allows people who are at a party or social gathering with a DJ (who uses Spotify) to request songs via their smartphones. The web app allows people to see the currently playing song, request songs, upvote songs, and rate songs so the DJ can see how the crowd is feeling and act accordingly. In other words, Crowd DJ is essentially a crowdsourced music queue.
|
||||
img: crowddj
|
||||
used:
|
||||
- thing: React.js
|
||||
- thing: Sass
|
||||
- thing: Firebase
|
||||
- thing: Spotify API
|
||||
|
||||
# - title: Weather Widget
|
||||
# demo: http://quiet-dusk-89245.herokuapp.com/
|
||||
# code: https://github.com/bchiang7/DemoWebApp
|
||||
# description: A simple weather app I made at HubSpot's Fall 2016 Web App Workshop utilizing Node.js, Express, and Heroku. I used the OpenWeatherMap API to get weather and forecast data, and then used the current city's coordinates to create a map background that reflected the current city using the Google Maps API.
|
||||
# img: weather
|
||||
# used:
|
||||
# - thing: OpenWeatherMap API
|
||||
# - thing: Google Maps API
|
||||
# - thing: JavaScript
|
||||
# - thing: jQuery
|
||||
# - thing: CSS
|
||||
# - thing: Node.js
|
||||
# - thing: Express
|
||||
# - thing: Heroku
|
||||
|
||||
- title: Screentime 2.0
|
||||
demo: https://play.google.com/store/apps/details?id=com.starry.management
|
||||
description: ScreenTime 2.0 was one of <a href="https://starry.com/" target="_blank">Starry</a>'s most important consumer-facing software updates on <a href="https://starry.com/station" target="_blank">Starry Station</a>, providing new functionality for users to easily filter content, pause the internet, and even create custom rules for blocking apps like Facebook and Twitter right from their mobile phones. As a co-op, I played a large role in the implementation of this feature on Starry's cordova android app, and was responsible for building out front-end designs, linking up back-end data, as well as communicating with designers and other engineers throughout the process. <br><br> Check out the Starry App on <a href="https://play.google.com/store/apps/details?id=com.starry.management" target="_blank">Google Play</a>, and learn more about ScreenTime 2.0 on <a href="https://www.producthunt.com/tech/screentime-for-starry-station" target="_blank">Product Hunt</a> and the <a href="https://blog.starry.com/whats-new-screentime-just-got-better-for-parents/" target="_blank">Starry Blog</a>.
|
||||
img: screentime
|
||||
used:
|
||||
- thing: JavaScript
|
||||
- thing: CSS
|
||||
- thing: Handlebars.js
|
||||
- thing: Backbone.js
|
||||
- thing: Marionette.js
|
||||
- thing: Cordova
|
||||
|
||||
- title: Online Resume
|
||||
demo: http://brittanychiang.com/react-profile/
|
||||
code: https://github.com/bchiang7/react-profile/
|
||||
description: This is just an online version of my resume I made for fun. I was interested in learning React.js, so I found this <a href="https://medium.com/learning-new-stuff/building-your-first-react-js-app-d53b0c98dc#.1439cdewq">simple tutorial</a> and it kind of spun into this weekend project. I probably didn't need to use React at all, but hey, at least I learned a few things!
|
||||
img: resume
|
||||
used:
|
||||
- thing: JavaScript
|
||||
- thing: React.js
|
||||
- thing: CSS
|
||||
|
||||
- title: Old Personal Website
|
||||
demo: http://brittanychiang.com/v1
|
||||
code: https://github.com/bchiang7/website_2015/
|
||||
description: This was my first portfolio website I built in 2014. It's a simple one-pager like this one, but relied heavily on Bootstrap. Since then, I think my web development and design skills have expanded immensely.
|
||||
img: websitev1
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: Bootstrap
|
||||
- thing: JavaScript
|
||||
- thing: jQuery
|
||||
|
||||
- title: CourseSource
|
||||
demo: http://webdevspring2016-chiangbrittany.rhcloud.com/project/client/#/login
|
||||
code: https://github.com/bchiang7/WebDevSpring2016/tree/master/public/project
|
||||
description: CourseSource is a web application built on the MEAN (MongoDB, Express, Angular, Node) stack for my web development class in 2015. I created this web app with the intention of providing Northeastern Students a better experience browsing the courses offered at Northeastern (which is currently a painstakingly tedious task on our current student portal).
|
||||
img: coursesource
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: Bootstrap
|
||||
- thing: JavaScript
|
||||
- thing: jQuery
|
||||
- thing: NodeJS
|
||||
- thing: AngularJS
|
||||
- thing: Express
|
||||
- thing: MongoDB
|
||||
|
||||
- title: NU Women in Tech
|
||||
demo: http://nuwit.ccs.neu.edu/
|
||||
code: https://github.com/nuwit/website
|
||||
description: While serving as web chair for Northeastern University Women in Technology, I did a complete overhaul of the club website. I designed and developed the current website using Jekyll as a static site generator, and was responsible for the upkeeping and maintainence of the site.
|
||||
img: nuwit
|
||||
used:
|
||||
- thing: Jekyll
|
||||
- thing: Liquid
|
||||
- thing: Yaml
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: Bootstrap
|
||||
- thing: jQuery
|
||||
|
||||
- title: Fontipsums
|
||||
demo: http://brittanychiang.com/fontipsums
|
||||
code: https://github.com/bchiang7/fontipsums
|
||||
description: As a typography nerd, I wanted a way to visually see different font combinations together. I whipped up this simple website to display some of my favorite pairings combined with some fun lorem ipsum variations I found on the web. Over the course of creating this site, I learned a lot about web fonts and best practices.
|
||||
img: fontipsums
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: SCSS
|
||||
|
||||
- title: One Card For All
|
||||
demo: http://onecardforall.org
|
||||
description: At MullenLowe, I helped build this 2015 holiday site around an algorithm that generated a holiday greeting to each and every person on the planet. We also accounted for newcomers being added at an amazing rate. Overall, the website is a tranquil, animated experience. As new names appear, visitors can watch them fall, like snowflakes, onto a stylized world map. Users can also find their own name and see it as part of the world collective. Check out this short <a href="http://us.mullenlowe.com/work/one-card-for-all/" target="_blank">video</a> describing the project!
|
||||
img: onecard
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: SCSS
|
||||
- thing: JavaScript
|
||||
- thing: jQuery
|
||||
|
||||
- title: JetBlue HumanKinda
|
||||
demo: http://jetbluehumankinda.com
|
||||
description: During my first co-op as a creative technologist at Mullen Lowe, I played a major role in the development of this Tumblr site to complement JetBlue's HumanKinda campaign and documentary. The site houses the video documentary at the top, the many graphics created by Mullen for the campaign, and an interactive quiz to determine how "HumanKinda" you are. Learn more about this project <a href="http://us.mullenlowe.com/work/humankinda/" target="_blank">here</a>!
|
||||
img: humankinda
|
||||
used:
|
||||
- thing: HTML
|
||||
- thing: CSS
|
||||
- thing: JavaScript
|
||||
- thing: jQuery
|
||||
@@ -1,19 +0,0 @@
|
||||
- row: row1
|
||||
services:
|
||||
- heading: Web Development
|
||||
sprite: webdev
|
||||
text: Using HTML, CSS, and JavaScript with pre-processors and build tools such as Sass and Grunt, I have a passion for developing pixel-perfect websites and apps while maintaining a semantic, modular, and DRY code base.
|
||||
|
||||
- heading: Responsive UI Design
|
||||
sprite: ui
|
||||
text: <strong><em>"A user interface is like a joke. If you have to explain it, it's not that good."</em></strong> I strive to develop and implement responsive and aesthetically pleasing interfaces for websites and apps that adapt to any type of device, platform, or browser.
|
||||
|
||||
- row: row2
|
||||
services:
|
||||
- heading: Experience Design
|
||||
sprite: xd
|
||||
text: There have been far too many times where I've been trying to accomplish a simple task on a website, and ended up wanting to throw my computer out the window in frustration. Needless to say, user experience is an aspect of software I believe is vital to a successful product.
|
||||
|
||||
- heading: Diversity in Tech
|
||||
sprite: wit
|
||||
text: Beyond coding, I am a strong advocate for diversity in the tech industry, especially for women. I currently serve as President for Northeastern's women in tech club, <a href="http://nuwit.ccs.neu.edu/" target="_blank">NUWIT</a>, and was a 2016 <a href="http://ghc.anitaborg.org/" target="_blank">Grace Hopper Conference</a> Scholar.
|
||||
@@ -1,31 +1,33 @@
|
||||
development:
|
||||
- item: JavaScript
|
||||
- item: HTML5
|
||||
- item: CSS3
|
||||
- item: Jekyll
|
||||
languages:
|
||||
- item: JavaScript (ES6)
|
||||
- item: HTML
|
||||
- item: CSS/Sass
|
||||
- item: Python
|
||||
- item: React
|
||||
- item: Backbone
|
||||
- item: Node.js
|
||||
- item: Angular
|
||||
- item: Java
|
||||
- item: SQL
|
||||
|
||||
design:
|
||||
- item: sketch
|
||||
- item: adobe-photoshop
|
||||
- item: adobe-indesign
|
||||
- item: adobe-illustrator
|
||||
- item: invision
|
||||
frameworks:
|
||||
- item: Jekyll
|
||||
- item: Ember
|
||||
- item: Backbone
|
||||
- item: D3
|
||||
- item: React
|
||||
- item: Angular
|
||||
- item: Cordova
|
||||
|
||||
tools:
|
||||
- item: Git + Github
|
||||
- item: Command Line
|
||||
- item: Node.js
|
||||
- item: Bash
|
||||
- item: Git & Github
|
||||
- item: Gulp & Grunt
|
||||
- item: Chrome DevTools
|
||||
- item: Grunt + Gulp
|
||||
- item: Postman
|
||||
- item: MongoDB
|
||||
- item: MySQL
|
||||
|
||||
knowledge:
|
||||
- item: CSS Detangling
|
||||
- item: ECMAScript 6
|
||||
- item: Usability
|
||||
- item: SEO
|
||||
- item: TDD
|
||||
design:
|
||||
- item: Sketch
|
||||
- item: InDesign
|
||||
- item: InVision
|
||||
- item: Prototyping
|
||||
- item: User Testing
|
||||
- item: Typography
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
- position: Northeastern University
|
||||
company: NU College of Computer & Information Science
|
||||
url: http://www.ccis.northeastern.edu/program/information-science-bs/
|
||||
description: Candidate for Bachelor of Science in Information Science with a concentration in Human Computer Interaction (HCI) and a minor in Interaction Design. <strong>Graduating in May 2018.</strong>
|
||||
sprite: university
|
||||
date: 2013 - Present
|
||||
|
||||
- position: HCI Research Assistant
|
||||
company: NU College of Computer & Information Science
|
||||
url: http://www.ccis.northeastern.edu/
|
||||
description: Assisted a computer science PhD student in the development of a software prototype built with HTML, CSS, JavaScript, and jQuery to facilitate better understanding of parent-child communication preferences in low-SES (Socio-Economic Status) families. Developed remotely to meet weekly deadlines and project checkpoints.
|
||||
sprite: research
|
||||
date: Mar - May 2015
|
||||
|
||||
- position: Creative Technologist Co-op
|
||||
company: MullenLowe U.S.
|
||||
url: http://us.mullenlowe.com/
|
||||
description: Developed and maintained code for in-house and client websites. Tested front-end code in various browsers and mobile devices to ensure cross-browser compatibility and responsiveness. Collaborated closely with other developers and digital producers to meet deadlines for clients including Lovesac, U.S. Cellular, JetBlue, and more.
|
||||
sprite: industry
|
||||
date: July - Dec 2015
|
||||
|
||||
- position: HCI Teaching Assistant
|
||||
company: NU College of Computer & Information Science
|
||||
url: http://www.ccis.northeastern.edu/
|
||||
description: Assisted professor with grading homework and project assignments. Held office hours to aid students in their understanding of core HCI concepts and reported to the professor the extent of their understanding.
|
||||
sprite: academic
|
||||
date: Jan - May 2016
|
||||
|
||||
- position: President
|
||||
company: NU Women in Tech
|
||||
url: http://nuwit.ccs.neu.edu
|
||||
description: Lead weekly club meetings to foster a community of diverse women in CS. Manage a variety of academic and social activities throughout the semester, including tech talks, student panels, and workshops. Communicate regularly with e-board and administrative organizations.
|
||||
sprite: university
|
||||
date: May 2016 - Present
|
||||
|
||||
- position: Software Engineer Co-op
|
||||
company: Starry
|
||||
url: https://starry.com/
|
||||
description: Engineered and maintained major features of Starry's customer-facing web app using ES6, Handlebars, Backbone, Marionette, and CSS. Proposed and implemented scalable solutions to issues identified with cloud services and applications responsible for communicating with Starry Station. Worked closely with designers and other developers to ensure thoughtful and coherent user experiences across Starry’s mobile apps.
|
||||
sprite: industry
|
||||
date: July - Dec 2016
|
||||
|
||||
- position: Developer
|
||||
company: Scout Studio
|
||||
url: http://www.northeastern.edu/scout/
|
||||
description: Collaborated with a small team of student designers to spearhead a new design system for Scout’s first annual student-led design conference at Northeastern. Worked closely with designers and management team to develop, document, and manage the conference’s marketing website using Jekyll, Sass, and JavaScript.
|
||||
sprite: university
|
||||
date: Jan 2017 - Present
|
||||
|
||||
# - position: UI Engineer Co-op
|
||||
# company: Apple
|
||||
# url: http://www.apple.com/
|
||||
# description: Worked on iTunes using Ember.js
|
||||
# sprite: industry
|
||||
# date: July - Dec 2017
|
||||
@@ -1,17 +0,0 @@
|
||||
<section id="about-section" class="section">
|
||||
<div class="section-wrapper">
|
||||
<div class="fade-in">
|
||||
<h1 class="section-heading">Hey, I'm Brittany.</h1>
|
||||
<h3 class="section-subheading">I'm a design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design.</h3>
|
||||
<span class="divider"></span>
|
||||
<div class="about-wrapper">
|
||||
<img class="headshot" src="img/headshot.jpg" alt="headshot">
|
||||
<div class="about-text-wrapper">
|
||||
<p class="about-text"><strong>I'm a fourth year student at Northeastern University</strong> in Boston studying computer science and interaction design. I have experience developing and designing software for the web, from simple landing pages to progressive web applications. I strive to create software that not only functions efficiently under the hood, but also provides intuitive, pixel-perfect user experiences.</p>
|
||||
<p class="about-text">I love learning new and better ways to create seamless user experiences with clean, efficient, and scalable code. I consider work an ongoing education, and I'm always looking for opportunities to work with those who are willing to share their knowledge as much as I want to learn. At the end of the day, my primary goal is to create something beautiful with people that bring out the best in me.</p>
|
||||
<p class="about-text"><strong>When I'm not in front of a computer screen,</strong> I'm probably snowboarding, traveling, petting dogs, or learning a new song on my uke.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
12
_includes/background.html
Normal file
12
_includes/background.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<section class="section background">
|
||||
<div class="section__title">Background</div>
|
||||
<div class="section__content">
|
||||
<p>I'm a fifth year student at <a class="underline-link" href="http://www.ccis.northeastern.edu/" target="_blank">Northeastern University</a> in Boston expecting to graduate in May 2018. Thanks to Northeastern's co-op program, I've had the privilege of completing two wonderful six-month co-ops at <a class="underline-link" href="https://us.mullenlowe.com/" target="_blank">MullenLowe U.S.</a> and <a class="underline-link" href="https://starry.com/" target="_blank">Starry</a>. Currently, I'm spending my third and final co-op as a UI Engineer on the iTunes & Apple Music team at <a class="underline-link" href="https://www.apple.com/music/" target="_blank">Apple</a>.</p>
|
||||
|
||||
<p>As a front-end engineer, I enjoy bridging the gap between engineering and design — combining my technical knowledge with my keen eye for design to help create a beautiful product. My goal is always to build products that are scalable and efficient under the hood while providing engaging, pixel-perfect user experiences.</p>
|
||||
|
||||
<p><strong>When I'm not in front of a computer screen</strong>, I'm probably snowboarding, cruising around on my penny board, or crossing off another item on my bucket list.</p>
|
||||
|
||||
<!-- {% include employment-status.html %} -->
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,39 +0,0 @@
|
||||
<section id="contact-section" class="section gap">
|
||||
<div class="bg" data-anchor-target="#contact-section"
|
||||
data-bottom-top="transform: translate3d(0px, -150px, 0px);"
|
||||
data-top-bottom="transform: translate3d(0px, 150px, 0px);"
|
||||
></div>
|
||||
<div class="overlay-wrapper">
|
||||
<div class="fade-in">
|
||||
<div class="center">
|
||||
<h1 class="section-heading">Get In Touch</h1>
|
||||
<span class="divider center"></span>
|
||||
<p class="contact-description">Have a sweet project in mind or just want to say hi? Feel free to send me a message!</p>
|
||||
</div>
|
||||
<div class="contact-wrapper">
|
||||
<form id="contactform" class="form-wrapper" method="POST" autocomplete="off">
|
||||
<input type="text" name="_gotcha" style="display:none" >
|
||||
<div class="input-wrapper">
|
||||
<label for="name" class="input-label">Name</label>
|
||||
<input type="text" name="name" class="contact-input" id="name" required>
|
||||
</div>
|
||||
<div class="input-wrapper">
|
||||
<label for="email" class="input-label">Email</label>
|
||||
<input type="email" name="_replyto" class="contact-input" id="email" required>
|
||||
</div>
|
||||
<div class="input-wrapper">
|
||||
<label for="subject" class="input-label">Subject</label>
|
||||
<input type="text" name="_subject" class="contact-input" id="subject" required>
|
||||
</div>
|
||||
<div class="input-wrapper">
|
||||
<label for="message" class="input-label" id="message-label">Message</label>
|
||||
<textarea name="message" class="contact-input autoExpand" id="message" required></textarea>
|
||||
</div>
|
||||
<button type="submit" name="submit" class="message-btn">
|
||||
<span>Send Message</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
7
_includes/employment-status.html
Normal file
7
_includes/employment-status.html
Normal file
@@ -0,0 +1,7 @@
|
||||
<div class="status">
|
||||
<div class="status__light">
|
||||
<div class="status__light__ring"></div>
|
||||
<div class="status__light__led"></div>
|
||||
</div>
|
||||
<div class="status__message">I'm currently seeking full-time opportunities!</div>
|
||||
</div>
|
||||
@@ -1,33 +1,18 @@
|
||||
<section id="experience-section" class="section gap">
|
||||
<div class="bg" data-anchor-target="#experience-section"
|
||||
data-bottom-top="transform: translate3d(0px, -150px, 0px);"
|
||||
data-top-bottom="transform: translate3d(0px, 150px, 0px);"
|
||||
></div>
|
||||
<div class="overlay-wrapper">
|
||||
<div class="fade-in">
|
||||
<div class="center">
|
||||
<h1 class="section-heading">Experience</h1>
|
||||
<span class="divider center"></span>
|
||||
<p class="experience-description">Thanks to Northeastern's co-op program, I've had the privilege of completing two awesome six-month co-ops as a Creative Technologist at <a href="http://us.mullenlowe.com/" target="_blank">MullenLowe U.S.</a> and Software Engineer at <a href="https://starry.com/" target="_blank">Starry</a>. Starting in July 2017, I'll be joining the iTunes team at <a href="https://apple.com/" target="_blank">Apple</a> as a UI Engineer for my third and final co-op!</p>
|
||||
</div>
|
||||
<div class="experience-wrapper">
|
||||
<div id="timeline">
|
||||
{% for item in site.data.timeline %}
|
||||
<div class="timeline-block">
|
||||
<div class="timeline-content">
|
||||
<h2 class="position">{{item.position}}</h2>
|
||||
<h3 class="company"><a href="{{item.url}}" target="_blank">{{item.company}}</a></h3>
|
||||
<p class="job-desc">{{item.description}}</p>
|
||||
</div>
|
||||
<div class="timeline-img">
|
||||
<div class="sprite {{item.sprite}}"></div>
|
||||
</div>
|
||||
<span class="date">{{item.date}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<section class="section experience">
|
||||
<div class="section__title">Experience</div>
|
||||
<div class="section__content">
|
||||
<div class="jobs">
|
||||
{% for job in site.data.experience %}
|
||||
<div class="job">
|
||||
<div class="time-place">
|
||||
<div class="job__company"><a href="{{job.url}}" target="_blank">{{job.company}}</a></div>
|
||||
<div class="job__time">{{job.time}}</div>
|
||||
</div>
|
||||
<i class="down-arrow"></i>
|
||||
<div class="job__position">{{job.position}}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<a href="{{site.resume}}" target="_blank" class="arrow-link">View My Resume</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
38
_includes/featured-projects.html
Normal file
38
_includes/featured-projects.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<section class="section featured-projects">
|
||||
<div class="section__title">Featured Projects</div>
|
||||
<div class="section__content">
|
||||
<div class="project interventions">
|
||||
<figure class="project__pic">
|
||||
<a href="https://interventions.design/" target="_blank"><img src="{{site.baseurl}}/img/featured/interventions/interventions.png" alt=""></a>
|
||||
</figure>
|
||||
<figcaption class="project__caption">
|
||||
<div class="project__name"><a href="https://interventions.design/" target="_blank">Interventions</a></div>
|
||||
<p>Interactive marketing website for Northeastern's first annual student-led design conference, Interventions. Coming in 2018!</p>
|
||||
</figcaption>
|
||||
</div>
|
||||
|
||||
<div class="project screentime">
|
||||
<figure class="project__pic phones">
|
||||
<a href="https://play.google.com/store/apps/details?id=com.starry.management" target="_blank">
|
||||
<div class="phone"><img src="{{site.baseurl}}/img/featured/screentime/screentime1.png" alt=""></div>
|
||||
<div class="phone"><img src="{{site.baseurl}}/img/featured/screentime/screentime3.png" alt=""></div>
|
||||
<div class="phone"><img src="{{site.baseurl}}/img/featured/screentime/screentime4.png" alt=""></div>
|
||||
</a>
|
||||
</figure>
|
||||
<figcaption class="project__caption">
|
||||
<div class="project__name"><a href="https://play.google.com/store/apps/details?id=com.starry.management" target="_blank">ScreenTime 2.0</a></div>
|
||||
<p>Starry Station feature that provided users with the ability to easily filter content, pause the internet, and even create custom rules for blocking apps like Facebook and Twitter right from their phones.</p>
|
||||
</figcaption>
|
||||
</div>
|
||||
|
||||
<div class="project v2">
|
||||
<figure class="project__pic">
|
||||
<a href="http://brittanychiang.com/v2" target="_blank"><img src="{{site.baseurl}}/img/featured/v2/v2.png" alt=""></a>
|
||||
</figure>
|
||||
<figcaption class="project__caption">
|
||||
<div class="project__name"><a href="http://brittanychiang.com/v2" target="_blank">Personal Website V2</a></div>
|
||||
<p>Second iteration of my personal website. Designed and developed with a conscious effort to avoid using any superfluous frameworks like Bootstrap.</p>
|
||||
</figcaption>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,12 +1,20 @@
|
||||
<section id="footer" class="section">
|
||||
<div class="section-wrapper">
|
||||
<ul class="soc">
|
||||
{% for link in site.social %}
|
||||
<li class="soc-item"><a href="{{link.url}}" target="_blank" class="icon {{link.title}}" title="{{link.title}}"><img src="img/icons/{{link.title}}.svg" alt="{{link.title}}"></a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="copyright-wrapper center">
|
||||
<p>© {{site.name}} 2017</p>
|
||||
<footer class="footer">
|
||||
<div class="footer__copyright">
|
||||
<div class="top">
|
||||
<span>Designed & Developed by</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span>Brittany Chiang</span>
|
||||
<img class="emoji" src="{{site.baseurl}}/img/emojis/rockon.png" alt="emoji">
|
||||
<span>2017</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="footer__links">
|
||||
{% for link in site.social %}
|
||||
<a href="{{link.url}}" target="_blank" title="{{link.title}}">
|
||||
<span class="text">{{link.title}}</span>
|
||||
<img src="{{site.baseurl}}/img/social/{{link.title}}.svg" alt="{{link.title}}">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
<a class="block-btn" href="https://github.com/bchiang7" target="_blank">
|
||||
<span class="text">See more projects</span>
|
||||
<img class="icon" src="img/icons/github.svg" alt="github">
|
||||
</a>
|
||||
@@ -26,5 +26,5 @@
|
||||
<meta name="twitter:title" content="{{site.title}}">
|
||||
<meta name="twitter:description" content="{{site.description}}">
|
||||
<meta name="twitter:image:src" content="{{site.cover}}">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" hreflang="en-us">
|
||||
|
||||
@@ -1,30 +1,11 @@
|
||||
<section id="intro-section" class="section">
|
||||
<div class="bg" data-anchor-target="#intro-section"
|
||||
data-bottom-top="transform: translate3d(0px, -150px, 0px);"
|
||||
data-top-bottom="transform: translate3d(0px, 150px, 0px);"
|
||||
></div>
|
||||
<div class="intro-wrapper">
|
||||
<div class="intro-body" data-anchor-target="#intro-section" data-top="opacity: 1;" data-top-bottom="opacity: 0;">
|
||||
<div class="intro-content">
|
||||
<h1 class="heading" data-content="Brittany Chiang"><span class="name">Brittany Chiang</span></h1>
|
||||
<div class="action-wrapper">
|
||||
<p class="subtext">
|
||||
<a class="btn main-action">Front End Software Engineer</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-down-wrapper">
|
||||
<a href="#about-section" title="About section" class="scroll-down">
|
||||
<img class="logo" src="img/logo-white.png" alt="scroll down">
|
||||
<span class="scroll-down-text">
|
||||
Learn More
|
||||
<svg class="chevron" viewBox="0 0 57.942 105.958" enable-background="new 0 0 11.893 6.503">
|
||||
<line fill="none" stroke="#fff" stroke-width="7" stroke-miterlimit="10" x1="2.475" y1="2.475" x2="55.467" y2="55.466" />
|
||||
<line fill="none" stroke="#fff" stroke-width="7" stroke-miterlimit="10" x1="55.467" y1="50.492" x2="2.475" y2="103.484" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<header class="intro">
|
||||
<h1 class="intro__hello">Hello! <span class="emoji wave-hand animated"></span></h1>
|
||||
|
||||
<h2 class="intro__tagline">I'm <span class="name">Brittany Chiang</span>, a design-minded front-end software engineer focused on building beautiful interfaces & experiences <span class="emoji technologist"></span></h2>
|
||||
|
||||
<h3 class="intro__contact">
|
||||
<span>Get in touch </span>
|
||||
<span class="emoji pointer"></span>
|
||||
<span><a href="mailto:brittany.chiang@gmail.com" target="_blank" class="highlight-link">brittany.chiang@gmail.com</a></span>
|
||||
</h3>
|
||||
</header>
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
<nav id="dot-nav">
|
||||
<ul>
|
||||
{% for item in site.data.navigation %}
|
||||
<li class="dot-container">
|
||||
<a href="#{{item.section}}-section" data-number="{{item.number}}">
|
||||
<span class="dot"></span>
|
||||
<span class="dot-label">{{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="toggle" class="container">
|
||||
<span class="line top"></span>
|
||||
<span class="line middle"></span>
|
||||
<span class="line bottom"></span>
|
||||
</div>
|
||||
|
||||
<div id="overlay" class="overlay">
|
||||
<div class="logo"><img class="logo-img" src="img/logo-white.png" alt="logo"><span>Brittany Chiang</span></div>
|
||||
<nav class="overlay-menu">
|
||||
<ul class="menu-container">
|
||||
{% for item in site.data.navigation %}
|
||||
<li class="menu-item"><a href="#{{item.section}}-section">{{item.title}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
16
_includes/other-projects.html
Normal file
16
_includes/other-projects.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<section class="section other-projects">
|
||||
<div class="section__title">Other Projects</div>
|
||||
<div class="section__content">
|
||||
{% for project in site.data.other-projects %}
|
||||
<div class="project">
|
||||
<div class="project__name"><a href="{{project.url}}" target="_blank" class="arrow-link">{{project.name}}</a></div>
|
||||
<p>{{project.description}}</p>
|
||||
<div class="project__used">
|
||||
{% for item in project.used %}
|
||||
<span class="project__used__item">{{item.thing}}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,44 +0,0 @@
|
||||
<section id="portfolio-section" class="section">
|
||||
<div class="section-wrapper">
|
||||
<div class="fade-in">
|
||||
<h1 class="section-heading">Some of My Work</h1>
|
||||
<span class="divider"></span>
|
||||
<div class="portfolio-item-wrapper">
|
||||
{% for project in site.data.portfolio %}
|
||||
<div class="portfolio-row">
|
||||
<div class="screenshots {% if project.title == 'Screentime 2.0' %}screentime{% endif %}">
|
||||
{% if project.title == "Screentime 2.0" %}
|
||||
<img class="img-{{project.img}}" src="img/portfolio/{{project.img}}/{{project.img}}-1.jpg" alt="screentime-1">
|
||||
<img class="img-{{project.img}}" src="img/portfolio/{{project.img}}/{{project.img}}-2.jpg" alt="screentime-2">
|
||||
<img class="img-{{project.img}}" src="img/portfolio/{{project.img}}/{{project.img}}-3.jpg" alt="screentime-3">
|
||||
<img class="img-{{project.img}}" src="img/portfolio/{{project.img}}/{{project.img}}-4.jpg" alt="screentime-4">
|
||||
{% else %}
|
||||
<img class="img-lg" src="img/portfolio/{{project.img}}/{{project.img}}.jpg" alt="desktop-screenshot">
|
||||
<img class="img-md" src="img/portfolio/{{project.img}}/{{project.img}}-tablet.jpg" alt="tablet-screenshot">
|
||||
<img class="img-sm" src="img/portfolio/{{project.img}}/{{project.img}}-mobile.jpg" alt="mobile-screenshot">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="description-title-container">
|
||||
<h2 class="description-title">{{project.title}}</h2>
|
||||
<div class="description-buttons">
|
||||
<a href="{{project.demo}}" target="_blank">Demo</a>
|
||||
{% if project.code %}
|
||||
<a href="{{project.code}}" target="_blank">Code</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<p class="portfolio-description">{{project.description}}</p>
|
||||
<div class="used">
|
||||
<ul class="used-items">
|
||||
{% for item in project.used %}
|
||||
<li class="used-item">{{item.thing}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<span class="divider"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,4 +0,0 @@
|
||||
<a class="block-btn" href="{{site.resume}}" target="_blank">
|
||||
<span class="text">View my full résumé</span>
|
||||
<img class="icon" src="img/icons/download.png" alt="download resume">
|
||||
</a>
|
||||
@@ -1,22 +1,3 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
{% if page.layout == "not_found" %}
|
||||
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
|
||||
<script src="{{site.baseurl}}/js/particles.js"></script>
|
||||
{% else %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
|
||||
<script src="{{site.baseurl}}/js/main.js"></script>
|
||||
<script>
|
||||
const contactform = document.getElementById('contactform');
|
||||
contactform.setAttribute('action', 'https:' + '//formspree.io/' + 'brittany.chiang' + '@' + 'gmail' + '.' + 'com');
|
||||
</script>
|
||||
{% endif %}
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-45666519-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' type="text/javascript" charset="utf-8"></script>
|
||||
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
|
||||
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
<section id="services-section" class="section gap">
|
||||
<div class="bg" data-anchor-target="#services-section"
|
||||
data-bottom-top="transform: translate3d(0px, -150px, 0px);"
|
||||
data-top-bottom="transform: translate3d(0px, 150px, 0px);"
|
||||
></div>
|
||||
<div class="overlay-wrapper">
|
||||
<div class="fade-in">
|
||||
<h1 class="section-heading">What I Do</h1>
|
||||
<span class="divider"></span>
|
||||
<div class="services-wrapper">
|
||||
{% for row in site.data.services %}
|
||||
<div class="service-row">
|
||||
{% for service in row.services %}
|
||||
<div class="service-column">
|
||||
<div class="sprite {{service.sprite}}"></div>
|
||||
<h2 class="service-heading">{{service.heading}}</h2>
|
||||
<p class="service-text">{{service.text}}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,55 +1,40 @@
|
||||
<section id="skills-section" class="section">
|
||||
<div class="section-wrapper">
|
||||
<div class="fade-in">
|
||||
<h1 class="section-heading">Skills</h1>
|
||||
<span class="divider"></span>
|
||||
<div class="skills-flex-wrapper">
|
||||
<div class="flex-item dev-wrapper">
|
||||
<h2 class="skills-heading">
|
||||
<span class="sprite dev"></span>
|
||||
<span>Development</span>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for dev in site.data.skills.development %}
|
||||
<li class="dev-item">{{dev.item}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-item design-wrapper">
|
||||
<h2 class="skills-heading">
|
||||
<span class="sprite design"></span>
|
||||
<span>Design</span>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for design in site.data.skills.design %}
|
||||
<li class="design-item"><img class="item-img" src="img/icons/{{design.item}}.png" alt="{{design.item}}"></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-item check-wrapper">
|
||||
<div class="tools-wrapper">
|
||||
<h2 class="skills-heading">
|
||||
<span class="sprite tools"></span>
|
||||
<span>Tools</span>
|
||||
</h2>
|
||||
<ul class="list">
|
||||
{% for tool in site.data.skills.tools %}
|
||||
<li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>{{tool.item}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="knowledge-wrapper">
|
||||
<h2 class="skills-heading">
|
||||
<span class="sprite knowledge"></span>
|
||||
<span>Knowledge</span></h2>
|
||||
<ul class="list">
|
||||
{% for thing in site.data.skills.knowledge %}
|
||||
<li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>{{thing.item}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="section skills">
|
||||
<div class="section__title">Skills</div>
|
||||
<div class="section__content">
|
||||
<!-- <p>I’ve picked up quite a few skills during the course of my three co-ops, and aim to improve these skills everyday. Here are a few of the technologies that I have experience with:</p> -->
|
||||
<div class="skillz">
|
||||
<div class="skillz__category">
|
||||
<div class="skillz__category__label">Languages</div>
|
||||
<ul>
|
||||
{% for language in site.data.skills.languages %}
|
||||
<li class="skillz__category__item">{{language.item}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skillz__category">
|
||||
<div class="skillz__category__label">Frameworks</div>
|
||||
<ul>
|
||||
{% for framework in site.data.skills.frameworks %}
|
||||
<li class="skillz__category__item">{{framework.item}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skillz__category">
|
||||
<div class="skillz__category__label">Tools</div>
|
||||
<ul>
|
||||
{% for tool in site.data.skills.tools %}
|
||||
<li class="skillz__category__item">{{tool.item}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skillz__category">
|
||||
<div class="skillz__category__label">Design</div>
|
||||
<ul>
|
||||
{% for thing in site.data.skills.design %}
|
||||
<li class="skillz__category__item">{{thing.item}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
8
_includes/switch.html
Normal file
8
_includes/switch.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="switch-wrapper">
|
||||
<div class="sun"></div>
|
||||
<div class="toggle-wrapper">
|
||||
<input id="switch" type="checkbox"/>
|
||||
<label for="switch" id="toggle">Toggle</label>
|
||||
</div>
|
||||
<div class="moon"></div>
|
||||
</div>
|
||||
3
_includes/top-button.html
Normal file
3
_includes/top-button.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<button id="top-button">
|
||||
<img src="{{site.baseurl}}/img/emojis/pointing-up.png" alt="">
|
||||
</button>
|
||||
@@ -1,14 +1,12 @@
|
||||
---
|
||||
layout: compress
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
{% include head.html %}
|
||||
</head>
|
||||
<body>
|
||||
{% include nav.html %}
|
||||
{{ content }}
|
||||
{% include scripts.html %}
|
||||
</body>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
{% include head.html %}
|
||||
</head>
|
||||
<body class="four-oh-four">
|
||||
<body class="not-found">
|
||||
{{ content }}
|
||||
{% include scripts.html %}
|
||||
</body>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<h2>{{ page.title }}</h2>
|
||||
<p class="meta">{{ page.date | date_to_string }}</p>
|
||||
|
||||
<div class="post">
|
||||
{{ content }}
|
||||
</div>
|
||||
177
_scripts/main.js
177
_scripts/main.js
@@ -1,140 +1,77 @@
|
||||
$(document).ready( function() {
|
||||
$(function() {
|
||||
|
||||
function updateNavigation() {
|
||||
$('.section').each(function() {
|
||||
const activeSection = $('#dot-nav a[href="#' + $(this).attr('id') + '"]').data('number');
|
||||
const offsetTop = $(this).offset().top;
|
||||
const halfWindowHeight = $(window).height() / 2;
|
||||
const distanceFromTop = $(window).scrollTop();
|
||||
const cond1 = offsetTop - halfWindowHeight < distanceFromTop;
|
||||
const cond2 = offsetTop + $(this).height() - halfWindowHeight > distanceFromTop;
|
||||
const d = new Date();
|
||||
const hours = d.getHours();
|
||||
const nighttime = (hours >= 19) || (hours <= 7); // 7pm <= hours <= 7am
|
||||
const body = document.querySelector('body');
|
||||
const toggle = document.getElementById('toggle');
|
||||
const input = document.getElementById('switch');
|
||||
|
||||
if (cond1 && cond2) {
|
||||
$('#dot-nav a').eq(activeSection).addClass('is-selected');
|
||||
} else {
|
||||
$('#dot-nav a').eq(activeSection).removeClass('is-selected');
|
||||
}
|
||||
});
|
||||
if (nighttime) {
|
||||
input.checked = true;
|
||||
body.classList.add('night');
|
||||
}
|
||||
|
||||
updateNavigation();
|
||||
window.addEventListener('scroll', updateNavigation);
|
||||
|
||||
|
||||
function smoothScroll(target) {
|
||||
$('body, html').animate({ 'scrollTop': target.offset().top + 50 }, 500);
|
||||
}
|
||||
|
||||
$('.scroll-down').on('click', function(ev) {
|
||||
ev.preventDefault();
|
||||
smoothScroll($(this.hash));
|
||||
});
|
||||
|
||||
$('#dot-nav a').on('click', function(ev) {
|
||||
ev.preventDefault();
|
||||
smoothScroll($(this.hash));
|
||||
});
|
||||
|
||||
$('#overlay a').on('click', function(ev) {
|
||||
ev.preventDefault();
|
||||
smoothScroll($(this.hash));
|
||||
$('#toggle').click();
|
||||
});
|
||||
|
||||
|
||||
const dotNav = document.querySelector('#dot-nav');
|
||||
const about = document.querySelector('#about-section');
|
||||
const hamburger = document.querySelector('#toggle');
|
||||
const overlay = document.querySelector('#overlay');
|
||||
|
||||
function handleNavs() {
|
||||
const isDesktop = window.innerWidth > 768;
|
||||
const topOfAbout = about.offsetTop - (about.offsetTop / 4);
|
||||
const isBelowIntro = window.scrollY > topOfAbout;
|
||||
const menuOpen = overlay.classList.contains('open');
|
||||
|
||||
if (isDesktop && isBelowIntro) {
|
||||
dotNav.classList.add('active');
|
||||
} else if (isDesktop && menuOpen) {
|
||||
toggleMenu();
|
||||
toggle.addEventListener('click', function() {
|
||||
const isChecked = input.checked;
|
||||
if (isChecked) {
|
||||
body.classList.remove('night');
|
||||
} else {
|
||||
dotNav.classList.remove('active');
|
||||
body.classList.add('night');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleNavs);
|
||||
window.addEventListener('resize', handleNavs);
|
||||
});
|
||||
|
||||
|
||||
// Toggle mobile menu open and closed
|
||||
function toggleMenu() {
|
||||
hamburger.classList.toggle('active');
|
||||
overlay.classList.toggle('open');
|
||||
document.body.classList.toggle('noScroll');
|
||||
}
|
||||
const introHeight = document.querySelector('.intro').offsetHeight;
|
||||
const topButton = document.getElementById('top-button');
|
||||
const $topButton = $('#top-button');
|
||||
|
||||
hamburger.addEventListener('click', toggleMenu);
|
||||
|
||||
|
||||
const isMobile = {
|
||||
Android: function() {
|
||||
return navigator.userAgent.match(/Android/i);
|
||||
},
|
||||
BlackBerry: function() {
|
||||
return navigator.userAgent.match(/BlackBerry/i);
|
||||
},
|
||||
iOS: function() {
|
||||
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
|
||||
},
|
||||
Opera: function() {
|
||||
return navigator.userAgent.match(/Opera Mini/i);
|
||||
},
|
||||
Windows: function() {
|
||||
return navigator.userAgent.match(/IEMobile/i);
|
||||
},
|
||||
any: function() {
|
||||
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > introHeight) {
|
||||
$topButton.fadeIn();
|
||||
} else {
|
||||
$topButton.fadeOut();
|
||||
}
|
||||
};
|
||||
}, false);
|
||||
|
||||
// turn off parallax effect on mobile devices
|
||||
if (!isMobile.any()) {
|
||||
skrollr.init({
|
||||
render: function(data) {
|
||||
//Debugging - Log the current scroll position.
|
||||
// console.log(data.curTop);
|
||||
},
|
||||
smoothScrolling: false,
|
||||
forceHeight: false
|
||||
});
|
||||
topButton.addEventListener('click', function() {
|
||||
$('html, body').animate({scrollTop: 0}, 500);
|
||||
});
|
||||
|
||||
|
||||
|
||||
const hand = document.querySelector('.emoji.wave-hand');
|
||||
|
||||
function waveOnLoad() {
|
||||
hand.classList.add('wave');
|
||||
setTimeout(function() {
|
||||
hand.classList.remove('wave');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
setTimeout(function() { waveOnLoad(); }, 1000);
|
||||
|
||||
// toggle contact input classes on focus or blur
|
||||
const contactInput = document.querySelectorAll('.contact-input');
|
||||
hand.addEventListener('mouseover', function() {
|
||||
hand.classList.add('wave');
|
||||
});
|
||||
|
||||
function focusInput() {
|
||||
this.parentElement.classList.add('is-active', 'is-completed');
|
||||
}
|
||||
function blurInput() {
|
||||
this.parentElement.classList.remove('is-active', 'is-completed');
|
||||
}
|
||||
|
||||
contactInput.forEach(input => input.addEventListener('focus', focusInput));
|
||||
contactInput.forEach(input => input.addEventListener('blur', blurInput));
|
||||
hand.addEventListener('mouseout', function() {
|
||||
hand.classList.remove('wave');
|
||||
});
|
||||
|
||||
|
||||
// dynamically expand textarea
|
||||
const textarea = document.querySelector('#message');
|
||||
const limit = 300;
|
||||
window.sr = ScrollReveal({
|
||||
reset: false,
|
||||
duration: 600,
|
||||
easing: 'cubic-bezier(.694,0,.335,1)',
|
||||
scale: 1,
|
||||
viewFactor: 0.3
|
||||
});
|
||||
|
||||
function autoExpand() {
|
||||
textarea.style.height = "";
|
||||
textarea.style.height = `${Math.min(textarea.scrollHeight, limit)}px`;
|
||||
}
|
||||
|
||||
textarea.addEventListener('input', autoExpand);
|
||||
sr.reveal('.background');
|
||||
sr.reveal('.skills');
|
||||
sr.reveal('.experience', {viewFactor: 0.2});
|
||||
sr.reveal('.featured-projects', {viewFactor: 0.1});
|
||||
sr.reveal('.other-projects', {viewFactor: 0.05});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
particlesJS("particles-js", {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 50,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 700
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.75,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 0.25,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 50,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 100,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.7,
|
||||
"width": 0.5
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 3,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 700,
|
||||
"rotateY": 1400
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 100,
|
||||
"duration": 0.3
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
});
|
||||
// var count_particles, stats, update;
|
||||
// stats = new Stats;
|
||||
// stats.setMode(0);
|
||||
// stats.domElement.style.position = 'absolute';
|
||||
// stats.domElement.style.left = '0px';
|
||||
// stats.domElement.style.top = '0px';
|
||||
// document.body.appendChild(stats.domElement);
|
||||
// count_particles = document.querySelector('.js-count-particles');
|
||||
// update = function() {
|
||||
// stats.begin();
|
||||
// stats.end();
|
||||
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
|
||||
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
|
||||
// }
|
||||
// requestAnimationFrame(update);
|
||||
// };
|
||||
// requestAnimationFrame(update);;
|
||||
BIN
_scss/.DS_Store
vendored
BIN
_scss/.DS_Store
vendored
Binary file not shown.
411
_scss/bourbon/_bourbon-deprecated-upcoming.scss
vendored
411
_scss/bourbon/_bourbon-deprecated-upcoming.scss
vendored
@@ -1,411 +0,0 @@
|
||||
// The following features have been deprecated and will be removed in the next MAJOR version release
|
||||
|
||||
@mixin inline-block {
|
||||
display: inline-block;
|
||||
|
||||
@warn "The inline-block mixin is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
|
||||
|
||||
@if type-of($style) == string and type-of($base-color) == color {
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == string and type-of($base-color) == number {
|
||||
$padding: $text-size;
|
||||
$text-size: $base-color;
|
||||
$base-color: #4294f0;
|
||||
|
||||
@if $padding == inherit {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == color and type-of($base-color) == color {
|
||||
$base-color: $style;
|
||||
$style: simple;
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == color and type-of($base-color) == number {
|
||||
$padding: $text-size;
|
||||
$text-size: $base-color;
|
||||
$base-color: $style;
|
||||
$style: simple;
|
||||
|
||||
@if $padding == inherit {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == number {
|
||||
$padding: $base-color;
|
||||
$text-size: $style;
|
||||
$base-color: #4294f0;
|
||||
$style: simple;
|
||||
|
||||
@if $padding == #4294f0 {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@warn "The button mixin is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
// Selector Style Button
|
||||
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
|
||||
// Grayscale button
|
||||
@if $type == simple and $b-color == grayscale($b-color) {
|
||||
@include simple($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == shiny and $b-color == grayscale($b-color) {
|
||||
@include shiny($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == pill and $b-color == grayscale($b-color) {
|
||||
@include pill($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == flat and $b-color == grayscale($b-color) {
|
||||
@include flat($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
// Colored button
|
||||
@if $type == simple {
|
||||
@include simple($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == shiny {
|
||||
@include shiny($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == pill {
|
||||
@include pill($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == flat {
|
||||
@include flat($b-color, false, $t-size, $pad);
|
||||
}
|
||||
}
|
||||
|
||||
// Simple Button
|
||||
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
||||
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: $padding;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 $text-shadow;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-active: grayscale($border-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
border: 1px solid $border-active;
|
||||
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Shiny Button
|
||||
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
||||
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
||||
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
||||
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
||||
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
||||
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
||||
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$fourth-stop: grayscale($fourth-stop);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$second-stop: grayscale($second-stop);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
$third-stop: grayscale($third-stop);
|
||||
}
|
||||
|
||||
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
||||
|
||||
border: 1px solid $border;
|
||||
border-bottom: 1px solid $border-bottom;
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
||||
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
||||
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
||||
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
||||
|
||||
@if $grayscale == true {
|
||||
$first-stop-hover: grayscale($first-stop-hover);
|
||||
$second-stop-hover: grayscale($second-stop-hover);
|
||||
$third-stop-hover: grayscale($third-stop-hover);
|
||||
$fourth-stop-hover: grayscale($fourth-stop-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient(top, $first-stop-hover 0%,
|
||||
$second-stop-hover 50%,
|
||||
$third-stop-hover 50%,
|
||||
$fourth-stop-hover 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
||||
|
||||
@if $grayscale == true {
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Pill Button
|
||||
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
||||
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
||||
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
||||
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
||||
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
$text-shadow-hover: grayscale($text-shadow-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
|
||||
background-clip: padding-box;
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 -1px 1px $text-shadow-hover;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
||||
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
||||
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
||||
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
||||
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$active-color: grayscale($active-color);
|
||||
$border-active: grayscale($border-active);
|
||||
$border-bottom-active: grayscale($border-bottom-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
$text-shadow-active: grayscale($text-shadow-active);
|
||||
}
|
||||
|
||||
background: $active-color;
|
||||
border: 1px solid $border-active;
|
||||
border-bottom: 1px solid $border-bottom-active;
|
||||
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
|
||||
text-shadow: 0 -1px 1px $text-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Flat Button
|
||||
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
}
|
||||
|
||||
background-color: $base-color;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
padding: $padding;
|
||||
text-decoration: none;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled){
|
||||
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
}
|
||||
|
||||
background-color: $base-color-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-active: grayscale($base-color-active);
|
||||
}
|
||||
|
||||
background-color: $base-color-active;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Flexible grid
|
||||
@function flex-grid($columns, $container-columns: $fg-max-columns) {
|
||||
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
@return percentage($width / $container-width);
|
||||
|
||||
@warn "The flex-grid function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
// Flexible gutter
|
||||
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
@return percentage($gutter / $container-width);
|
||||
|
||||
@warn "The flex-gutter function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@function grid-width($n) {
|
||||
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
||||
|
||||
@warn "The grid-width function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@function golden-ratio($value, $increment) {
|
||||
@return modular-scale($increment, $value, $ratio: $golden);
|
||||
|
||||
@warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead.";
|
||||
}
|
||||
|
||||
@mixin box-sizing($box) {
|
||||
@include prefixer(box-sizing, $box, webkit moz spec);
|
||||
|
||||
@warn "The box-sizing mixin is deprecated and will be removed in the next major version release. This property can now be used un-prefixed.";
|
||||
}
|
||||
87
_scss/bourbon/_bourbon.scss
vendored
87
_scss/bourbon/_bourbon.scss
vendored
@@ -1,87 +0,0 @@
|
||||
// Bourbon 4.2.7
|
||||
// http://bourbon.io
|
||||
// Copyright 2011-2015 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
@import "settings/prefixer";
|
||||
@import "settings/px-to-em";
|
||||
@import "settings/asset-pipeline";
|
||||
|
||||
@import "functions/assign-inputs";
|
||||
@import "functions/contains";
|
||||
@import "functions/contains-falsy";
|
||||
@import "functions/is-length";
|
||||
@import "functions/is-light";
|
||||
@import "functions/is-number";
|
||||
@import "functions/is-size";
|
||||
@import "functions/px-to-em";
|
||||
@import "functions/px-to-rem";
|
||||
@import "functions/shade";
|
||||
@import "functions/strip-units";
|
||||
@import "functions/tint";
|
||||
@import "functions/transition-property-name";
|
||||
@import "functions/unpack";
|
||||
@import "functions/modular-scale";
|
||||
|
||||
@import "helpers/convert-units";
|
||||
@import "helpers/directional-values";
|
||||
@import "helpers/font-source-declaration";
|
||||
@import "helpers/gradient-positions-parser";
|
||||
@import "helpers/linear-angle-parser";
|
||||
@import "helpers/linear-gradient-parser";
|
||||
@import "helpers/linear-positions-parser";
|
||||
@import "helpers/linear-side-corner-parser";
|
||||
@import "helpers/radial-arg-parser";
|
||||
@import "helpers/radial-positions-parser";
|
||||
@import "helpers/radial-gradient-parser";
|
||||
@import "helpers/render-gradients";
|
||||
@import "helpers/shape-size-stripper";
|
||||
@import "helpers/str-to-num";
|
||||
|
||||
@import "css3/animation";
|
||||
@import "css3/appearance";
|
||||
@import "css3/backface-visibility";
|
||||
@import "css3/background";
|
||||
@import "css3/background-image";
|
||||
@import "css3/border-image";
|
||||
@import "css3/calc";
|
||||
@import "css3/columns";
|
||||
@import "css3/filter";
|
||||
@import "css3/flex-box";
|
||||
@import "css3/font-face";
|
||||
@import "css3/font-feature-settings";
|
||||
@import "css3/hidpi-media-query";
|
||||
@import "css3/hyphens";
|
||||
@import "css3/image-rendering";
|
||||
@import "css3/keyframes";
|
||||
@import "css3/linear-gradient";
|
||||
@import "css3/perspective";
|
||||
@import "css3/placeholder";
|
||||
@import "css3/radial-gradient";
|
||||
@import "css3/selection";
|
||||
@import "css3/text-decoration";
|
||||
@import "css3/transform";
|
||||
@import "css3/transition";
|
||||
@import "css3/user-select";
|
||||
|
||||
@import "addons/border-color";
|
||||
@import "addons/border-radius";
|
||||
@import "addons/border-style";
|
||||
@import "addons/border-width";
|
||||
@import "addons/buttons";
|
||||
@import "addons/clearfix";
|
||||
@import "addons/ellipsis";
|
||||
@import "addons/font-stacks";
|
||||
@import "addons/hide-text";
|
||||
@import "addons/margin";
|
||||
@import "addons/padding";
|
||||
@import "addons/position";
|
||||
@import "addons/prefixer";
|
||||
@import "addons/retina-image";
|
||||
@import "addons/size";
|
||||
@import "addons/text-inputs";
|
||||
@import "addons/timing-functions";
|
||||
@import "addons/triangle";
|
||||
@import "addons/word-wrap";
|
||||
|
||||
@import "bourbon-deprecated-upcoming";
|
||||
26
_scss/bourbon/addons/_border-color.scss
vendored
26
_scss/bourbon/addons/_border-color.scss
vendored
@@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-left-color: #e8ae1a;
|
||||
/// border-right-color: #76cd9c;
|
||||
/// border-top-color: #a60b55;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-color`
|
||||
|
||||
@mixin border-color($vals...) {
|
||||
@include directional-property(border, color, $vals...);
|
||||
}
|
||||
48
_scss/bourbon/addons/_border-radius.scss
vendored
48
_scss/bourbon/addons/_border-radius.scss
vendored
@@ -1,48 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
|
||||
///
|
||||
/// @param {Number} $radii
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element-one {
|
||||
/// @include border-top-radius(5px);
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// @include border-left-radius(3px);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element-one {
|
||||
/// border-top-left-radius: 5px;
|
||||
/// border-top-right-radius: 5px;
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// border-bottom-left-radius: 3px;
|
||||
/// border-top-left-radius: 3px;
|
||||
/// }
|
||||
///
|
||||
/// @output `border-radius`
|
||||
|
||||
@mixin border-top-radius($radii) {
|
||||
border-top-left-radius: $radii;
|
||||
border-top-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radii) {
|
||||
border-bottom-right-radius: $radii;
|
||||
border-top-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radii) {
|
||||
border-bottom-left-radius: $radii;
|
||||
border-bottom-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radii) {
|
||||
border-bottom-left-radius: $radii;
|
||||
border-top-left-radius: $radii;
|
||||
}
|
||||
25
_scss/bourbon/addons/_border-style.scss
vendored
25
_scss/bourbon/addons/_border-style.scss
vendored
@@ -1,25 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-style(dashed null solid);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-bottom-style: solid;
|
||||
/// border-top-style: dashed;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-style`
|
||||
|
||||
@mixin border-style($vals...) {
|
||||
@include directional-property(border, style, $vals...);
|
||||
}
|
||||
25
_scss/bourbon/addons/_border-width.scss
vendored
25
_scss/bourbon/addons/_border-width.scss
vendored
@@ -1,25 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-width(1em null 20px);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-bottom-width: 20px;
|
||||
/// border-top-width: 1em;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-width`
|
||||
|
||||
@mixin border-width($vals...) {
|
||||
@include directional-property(border, width, $vals...);
|
||||
}
|
||||
64
_scss/bourbon/addons/_buttons.scss
vendored
64
_scss/bourbon/addons/_buttons.scss
vendored
@@ -1,64 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// #{$all-buttons} {
|
||||
/// background-color: #f00;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-buttons-focus},
|
||||
/// #{$all-buttons-hover} {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-buttons-active} {
|
||||
/// background-color: #00f;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// button,
|
||||
/// input[type="button"],
|
||||
/// input[type="reset"],
|
||||
/// input[type="submit"] {
|
||||
/// background-color: #f00;
|
||||
/// }
|
||||
///
|
||||
/// button:focus,
|
||||
/// input[type="button"]:focus,
|
||||
/// input[type="reset"]:focus,
|
||||
/// input[type="submit"]:focus,
|
||||
/// button:hover,
|
||||
/// input[type="button"]:hover,
|
||||
/// input[type="reset"]:hover,
|
||||
/// input[type="submit"]:hover {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
///
|
||||
/// button:active,
|
||||
/// input[type="button"]:active,
|
||||
/// input[type="reset"]:active,
|
||||
/// input[type="submit"]:active {
|
||||
/// background-color: #00f;
|
||||
/// }
|
||||
///
|
||||
/// @require assign-inputs
|
||||
///
|
||||
/// @type List
|
||||
///
|
||||
/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
|
||||
|
||||
$buttons-list: 'button',
|
||||
'input[type="button"]',
|
||||
'input[type="reset"]',
|
||||
'input[type="submit"]';
|
||||
|
||||
$all-buttons: assign-inputs($buttons-list);
|
||||
$all-buttons-active: assign-inputs($buttons-list, active);
|
||||
$all-buttons-focus: assign-inputs($buttons-list, focus);
|
||||
$all-buttons-hover: assign-inputs($buttons-list, hover);
|
||||
|
||||
$all-button-inputs: $all-buttons;
|
||||
$all-button-inputs-active: $all-buttons-active;
|
||||
$all-button-inputs-focus: $all-buttons-focus;
|
||||
$all-button-inputs-hover: $all-buttons-hover;
|
||||
25
_scss/bourbon/addons/_clearfix.scss
vendored
25
_scss/bourbon/addons/_clearfix.scss
vendored
@@ -1,25 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides an easy way to include a clearfix for containing floats.
|
||||
///
|
||||
/// @link http://cssmojo.com/latest_new_clearfix_so_far/
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include clearfix;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element::after {
|
||||
/// clear: both;
|
||||
/// content: "";
|
||||
/// display: table;
|
||||
/// }
|
||||
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
30
_scss/bourbon/addons/_ellipsis.scss
vendored
30
_scss/bourbon/addons/_ellipsis.scss
vendored
@@ -1,30 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Truncates text and adds an ellipsis to represent overflow.
|
||||
///
|
||||
/// @param {Number} $width [100%]
|
||||
/// Max-width for the string to respect before being truncated
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include ellipsis;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// display: inline-block;
|
||||
/// max-width: 100%;
|
||||
/// overflow: hidden;
|
||||
/// text-overflow: ellipsis;
|
||||
/// white-space: nowrap;
|
||||
/// word-wrap: normal;
|
||||
/// }
|
||||
|
||||
@mixin ellipsis($width: 100%) {
|
||||
display: inline-block;
|
||||
max-width: $width;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
31
_scss/bourbon/addons/_font-stacks.scss
vendored
31
_scss/bourbon/addons/_font-stacks.scss
vendored
@@ -1,31 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Georgia font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
|
||||
|
||||
/// Helvetica font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
|
||||
|
||||
/// Lucida Grande font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
|
||||
|
||||
/// Monospace font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
|
||||
|
||||
/// Verdana font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$verdana: "Verdana", "Geneva", sans-serif;
|
||||
27
_scss/bourbon/addons/_hide-text.scss
vendored
27
_scss/bourbon/addons/_hide-text.scss
vendored
@@ -1,27 +0,0 @@
|
||||
/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
|
||||
///
|
||||
/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include hide-text;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// overflow: hidden;
|
||||
/// text-indent: 101%;
|
||||
/// white-space: nowrap;
|
||||
/// }
|
||||
///
|
||||
/// @todo Remove height argument in v5.0.0
|
||||
|
||||
@mixin hide-text($height: null) {
|
||||
overflow: hidden;
|
||||
text-indent: 101%;
|
||||
white-space: nowrap;
|
||||
|
||||
@if $height {
|
||||
@warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
|
||||
}
|
||||
}
|
||||
26
_scss/bourbon/addons/_margin.scss
vendored
26
_scss/bourbon/addons/_margin.scss
vendored
@@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include margin(null 10px 3em 20vh);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// margin-bottom: 3em;
|
||||
/// margin-left: 20vh;
|
||||
/// margin-right: 10px;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `margin`
|
||||
|
||||
@mixin margin($vals...) {
|
||||
@include directional-property(margin, false, $vals...);
|
||||
}
|
||||
26
_scss/bourbon/addons/_padding.scss
vendored
26
_scss/bourbon/addons/_padding.scss
vendored
@@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include padding(12vh null 10px 5%);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// padding-bottom: 10px;
|
||||
/// padding-left: 5%;
|
||||
/// padding-top: 12vh;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `padding`
|
||||
|
||||
@mixin padding($vals...) {
|
||||
@include directional-property(padding, false, $vals...);
|
||||
}
|
||||
48
_scss/bourbon/addons/_position.scss
vendored
48
_scss/bourbon/addons/_position.scss
vendored
@@ -1,48 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Position} $position [relative]
|
||||
/// A CSS position value
|
||||
///
|
||||
/// @param {Arglist} $coordinates [null null null null]
|
||||
/// List of values that correspond to the 4-value syntax for the edges of a box
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include position(absolute, 0 null null 10em);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// left: 10em;
|
||||
/// position: absolute;
|
||||
/// top: 0;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} is-length
|
||||
/// @require {function} unpack
|
||||
|
||||
@mixin position($position: relative, $coordinates: null null null null) {
|
||||
@if type-of($position) == list {
|
||||
$coordinates: $position;
|
||||
$position: relative;
|
||||
}
|
||||
|
||||
$coordinates: unpack($coordinates);
|
||||
|
||||
$offsets: (
|
||||
top: nth($coordinates, 1),
|
||||
right: nth($coordinates, 2),
|
||||
bottom: nth($coordinates, 3),
|
||||
left: nth($coordinates, 4)
|
||||
);
|
||||
|
||||
position: $position;
|
||||
|
||||
@each $offset, $value in $offsets {
|
||||
@if is-length($value) {
|
||||
#{$offset}: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
66
_scss/bourbon/addons/_prefixer.scss
vendored
66
_scss/bourbon/addons/_prefixer.scss
vendored
@@ -1,66 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// A mixin for generating vendor prefixes on non-standardized properties.
|
||||
///
|
||||
/// @param {String} $property
|
||||
/// Property to prefix
|
||||
///
|
||||
/// @param {*} $value
|
||||
/// Value to use
|
||||
///
|
||||
/// @param {List} $prefixes
|
||||
/// Prefixes to define
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include prefixer(border-radius, 10px, webkit ms spec);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// -webkit-border-radius: 10px;
|
||||
/// -moz-border-radius: 10px;
|
||||
/// border-radius: 10px;
|
||||
/// }
|
||||
///
|
||||
/// @require {variable} $prefix-for-webkit
|
||||
/// @require {variable} $prefix-for-mozilla
|
||||
/// @require {variable} $prefix-for-microsoft
|
||||
/// @require {variable} $prefix-for-opera
|
||||
/// @require {variable} $prefix-for-spec
|
||||
|
||||
@mixin prefixer($property, $value, $prefixes) {
|
||||
@each $prefix in $prefixes {
|
||||
@if $prefix == webkit {
|
||||
@if $prefix-for-webkit {
|
||||
-webkit-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == moz {
|
||||
@if $prefix-for-mozilla {
|
||||
-moz-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == ms {
|
||||
@if $prefix-for-microsoft {
|
||||
-ms-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == o {
|
||||
@if $prefix-for-opera {
|
||||
-o-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == spec {
|
||||
@if $prefix-for-spec {
|
||||
#{$property}: $value;
|
||||
}
|
||||
} @else {
|
||||
@warn "Unrecognized prefix: #{$prefix}";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin disable-prefix-for-all() {
|
||||
$prefix-for-webkit: false !global;
|
||||
$prefix-for-mozilla: false !global;
|
||||
$prefix-for-microsoft: false !global;
|
||||
$prefix-for-opera: false !global;
|
||||
$prefix-for-spec: false !global;
|
||||
}
|
||||
25
_scss/bourbon/addons/_retina-image.scss
vendored
25
_scss/bourbon/addons/_retina-image.scss
vendored
@@ -1,25 +0,0 @@
|
||||
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
|
||||
@if $asset-pipeline {
|
||||
background-image: image-url("#{$filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: url("#{$filename}.#{$extension}");
|
||||
}
|
||||
|
||||
@include hidpi {
|
||||
@if $asset-pipeline {
|
||||
@if $retina-filename {
|
||||
background-image: image-url("#{$retina-filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||
}
|
||||
} @else {
|
||||
@if $retina-filename {
|
||||
background-image: url("#{$retina-filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||
}
|
||||
}
|
||||
|
||||
background-size: $background-size;
|
||||
}
|
||||
}
|
||||
51
_scss/bourbon/addons/_size.scss
vendored
51
_scss/bourbon/addons/_size.scss
vendored
@@ -1,51 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Sets the `width` and `height` of the element.
|
||||
///
|
||||
/// @param {List} $size
|
||||
/// A list of at most 2 size values.
|
||||
///
|
||||
/// If there is only a single value in `$size` it is used for both width and height. All units are supported.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .first-element {
|
||||
/// @include size(2em);
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// @include size(auto 10em);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .first-element {
|
||||
/// width: 2em;
|
||||
/// height: 2em;
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// width: auto;
|
||||
/// height: 10em;
|
||||
/// }
|
||||
///
|
||||
/// @todo Refactor in 5.0.0 to use a comma-separated argument
|
||||
|
||||
@mixin size($value) {
|
||||
$width: nth($value, 1);
|
||||
$height: $width;
|
||||
|
||||
@if length($value) > 1 {
|
||||
$height: nth($value, 2);
|
||||
}
|
||||
|
||||
@if is-size($height) {
|
||||
height: $height;
|
||||
} @else {
|
||||
@warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
|
||||
}
|
||||
|
||||
@if is-size($width) {
|
||||
width: $width;
|
||||
} @else {
|
||||
@warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
|
||||
}
|
||||
}
|
||||
113
_scss/bourbon/addons/_text-inputs.scss
vendored
113
_scss/bourbon/addons/_text-inputs.scss
vendored
@@ -1,113 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// #{$all-text-inputs} {
|
||||
/// border: 1px solid #f00;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-text-inputs-focus},
|
||||
/// #{$all-text-inputs-hover} {
|
||||
/// border: 1px solid #0f0;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-text-inputs-active} {
|
||||
/// border: 1px solid #00f;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// input[type="color"],
|
||||
/// input[type="date"],
|
||||
/// input[type="datetime"],
|
||||
/// input[type="datetime-local"],
|
||||
/// input[type="email"],
|
||||
/// input[type="month"],
|
||||
/// input[type="number"],
|
||||
/// input[type="password"],
|
||||
/// input[type="search"],
|
||||
/// input[type="tel"],
|
||||
/// input[type="text"],
|
||||
/// input[type="time"],
|
||||
/// input[type="url"],
|
||||
/// input[type="week"],
|
||||
/// textarea {
|
||||
/// border: 1px solid #f00;
|
||||
/// }
|
||||
///
|
||||
/// input[type="color"]:focus,
|
||||
/// input[type="date"]:focus,
|
||||
/// input[type="datetime"]:focus,
|
||||
/// input[type="datetime-local"]:focus,
|
||||
/// input[type="email"]:focus,
|
||||
/// input[type="month"]:focus,
|
||||
/// input[type="number"]:focus,
|
||||
/// input[type="password"]:focus,
|
||||
/// input[type="search"]:focus,
|
||||
/// input[type="tel"]:focus,
|
||||
/// input[type="text"]:focus,
|
||||
/// input[type="time"]:focus,
|
||||
/// input[type="url"]:focus,
|
||||
/// input[type="week"]:focus,
|
||||
/// textarea:focus,
|
||||
/// input[type="color"]:hover,
|
||||
/// input[type="date"]:hover,
|
||||
/// input[type="datetime"]:hover,
|
||||
/// input[type="datetime-local"]:hover,
|
||||
/// input[type="email"]:hover,
|
||||
/// input[type="month"]:hover,
|
||||
/// input[type="number"]:hover,
|
||||
/// input[type="password"]:hover,
|
||||
/// input[type="search"]:hover,
|
||||
/// input[type="tel"]:hover,
|
||||
/// input[type="text"]:hover,
|
||||
/// input[type="time"]:hover,
|
||||
/// input[type="url"]:hover,
|
||||
/// input[type="week"]:hover,
|
||||
/// textarea:hover {
|
||||
/// border: 1px solid #0f0;
|
||||
/// }
|
||||
///
|
||||
/// input[type="color"]:active,
|
||||
/// input[type="date"]:active,
|
||||
/// input[type="datetime"]:active,
|
||||
/// input[type="datetime-local"]:active,
|
||||
/// input[type="email"]:active,
|
||||
/// input[type="month"]:active,
|
||||
/// input[type="number"]:active,
|
||||
/// input[type="password"]:active,
|
||||
/// input[type="search"]:active,
|
||||
/// input[type="tel"]:active,
|
||||
/// input[type="text"]:active,
|
||||
/// input[type="time"]:active,
|
||||
/// input[type="url"]:active,
|
||||
/// input[type="week"]:active,
|
||||
/// textarea:active {
|
||||
/// border: 1px solid #00f;
|
||||
/// }
|
||||
///
|
||||
/// @require assign-inputs
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$text-inputs-list: 'input[type="color"]',
|
||||
'input[type="date"]',
|
||||
'input[type="datetime"]',
|
||||
'input[type="datetime-local"]',
|
||||
'input[type="email"]',
|
||||
'input[type="month"]',
|
||||
'input[type="number"]',
|
||||
'input[type="password"]',
|
||||
'input[type="search"]',
|
||||
'input[type="tel"]',
|
||||
'input[type="text"]',
|
||||
'input[type="time"]',
|
||||
'input[type="url"]',
|
||||
'input[type="week"]',
|
||||
'input:not([type])',
|
||||
'textarea';
|
||||
|
||||
$all-text-inputs: assign-inputs($text-inputs-list);
|
||||
$all-text-inputs-active: assign-inputs($text-inputs-list, active);
|
||||
$all-text-inputs-focus: assign-inputs($text-inputs-list, focus);
|
||||
$all-text-inputs-hover: assign-inputs($text-inputs-list, hover);
|
||||
34
_scss/bourbon/addons/_timing-functions.scss
vendored
34
_scss/bourbon/addons/_timing-functions.scss
vendored
@@ -1,34 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
|
||||
///
|
||||
/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
|
||||
///
|
||||
/// @type cubic-bezier
|
||||
|
||||
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
||||
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
||||
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
||||
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
||||
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
|
||||
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
||||
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
||||
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
||||
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
|
||||
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
||||
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
||||
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
||||
63
_scss/bourbon/addons/_triangle.scss
vendored
63
_scss/bourbon/addons/_triangle.scss
vendored
@@ -1,63 +0,0 @@
|
||||
@mixin triangle($size, $color, $direction) {
|
||||
$width: nth($size, 1);
|
||||
$height: nth($size, length($size));
|
||||
$foreground-color: nth($color, 1);
|
||||
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
||||
$width: $width / 2;
|
||||
$height: if(length($size) > 1, $height, $height/2);
|
||||
|
||||
@if $direction == up {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
} @else if $direction == right {
|
||||
border-bottom: $width solid $background-color;
|
||||
border-left: $height solid $foreground-color;
|
||||
border-top: $width solid $background-color;
|
||||
} @else if $direction == down {
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
border-top: $height solid $foreground-color;
|
||||
} @else if $direction == left {
|
||||
border-bottom: $width solid $background-color;
|
||||
border-right: $height solid $foreground-color;
|
||||
border-top: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == up-right) or ($direction == up-left) {
|
||||
border-top: $height solid $foreground-color;
|
||||
|
||||
@if $direction == up-right {
|
||||
border-left: $width solid $background-color;
|
||||
} @else if $direction == up-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == down-right) or ($direction == down-left) {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
|
||||
@if $direction == down-right {
|
||||
border-left: $width solid $background-color;
|
||||
} @else if $direction == down-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == inset-up) {
|
||||
border-color: $background-color $background-color $foreground-color;
|
||||
border-style: solid;
|
||||
border-width: $height $width;
|
||||
} @else if ($direction == inset-down) {
|
||||
border-color: $foreground-color $background-color $background-color;
|
||||
border-style: solid;
|
||||
border-width: $height $width;
|
||||
} @else if ($direction == inset-right) {
|
||||
border-color: $background-color $background-color $background-color $foreground-color;
|
||||
border-style: solid;
|
||||
border-width: $width $height;
|
||||
} @else if ($direction == inset-left) {
|
||||
border-color: $background-color $foreground-color $background-color $background-color;
|
||||
border-style: solid;
|
||||
border-width: $width $height;
|
||||
}
|
||||
}
|
||||
29
_scss/bourbon/addons/_word-wrap.scss
vendored
29
_scss/bourbon/addons/_word-wrap.scss
vendored
@@ -1,29 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides an easy way to change the `word-wrap` property.
|
||||
///
|
||||
/// @param {String} $wrap [break-word]
|
||||
/// Value for the `word-break` property.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .wrapper {
|
||||
/// @include word-wrap(break-word);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .wrapper {
|
||||
/// overflow-wrap: break-word;
|
||||
/// word-break: break-all;
|
||||
/// word-wrap: break-word;
|
||||
/// }
|
||||
|
||||
@mixin word-wrap($wrap: break-word) {
|
||||
overflow-wrap: $wrap;
|
||||
word-wrap: $wrap;
|
||||
|
||||
@if $wrap == break-word {
|
||||
word-break: break-all;
|
||||
} @else {
|
||||
word-break: $wrap;
|
||||
}
|
||||
}
|
||||
43
_scss/bourbon/css3/_animation.scss
vendored
43
_scss/bourbon/css3/_animation.scss
vendored
@@ -1,43 +0,0 @@
|
||||
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
||||
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
|
||||
|
||||
@mixin animation($animations...) {
|
||||
@include prefixer(animation, $animations, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-name($names...) {
|
||||
@include prefixer(animation-name, $names, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-duration($times...) {
|
||||
@include prefixer(animation-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-timing-function($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out
|
||||
@include prefixer(animation-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-iteration-count($values...) {
|
||||
// infinite | <number>
|
||||
@include prefixer(animation-iteration-count, $values, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-direction($directions...) {
|
||||
// normal | alternate
|
||||
@include prefixer(animation-direction, $directions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-play-state($states...) {
|
||||
// running | paused
|
||||
@include prefixer(animation-play-state, $states, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-delay($times...) {
|
||||
@include prefixer(animation-delay, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-fill-mode($modes...) {
|
||||
// none | forwards | backwards | both
|
||||
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
|
||||
}
|
||||
3
_scss/bourbon/css3/_appearance.scss
vendored
3
_scss/bourbon/css3/_appearance.scss
vendored
@@ -1,3 +0,0 @@
|
||||
@mixin appearance($value) {
|
||||
@include prefixer(appearance, $value, webkit moz ms o spec);
|
||||
}
|
||||
3
_scss/bourbon/css3/_backface-visibility.scss
vendored
3
_scss/bourbon/css3/_backface-visibility.scss
vendored
@@ -1,3 +0,0 @@
|
||||
@mixin backface-visibility($visibility) {
|
||||
@include prefixer(backface-visibility, $visibility, webkit spec);
|
||||
}
|
||||
42
_scss/bourbon/css3/_background-image.scss
vendored
42
_scss/bourbon/css3/_background-image.scss
vendored
@@ -1,42 +0,0 @@
|
||||
//************************************************************************//
|
||||
// Background-image property for adding multiple background images with
|
||||
// gradients, or for stringing multiple gradients together.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background-image($images...) {
|
||||
$webkit-images: ();
|
||||
$spec-images: ();
|
||||
|
||||
@each $image in $images {
|
||||
$webkit-image: ();
|
||||
$spec-image: ();
|
||||
|
||||
@if (type-of($image) == string) {
|
||||
$url-str: str-slice($image, 1, 3);
|
||||
$gradient-type: str-slice($image, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-image: $image;
|
||||
$spec-image: $image;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser($image);
|
||||
$webkit-image: map-get($gradients, webkit-image);
|
||||
$spec-image: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser($image);
|
||||
$webkit-image: map-get($gradients, webkit-image);
|
||||
$spec-image: map-get($gradients, spec-image);
|
||||
}
|
||||
}
|
||||
|
||||
$webkit-images: append($webkit-images, $webkit-image, comma);
|
||||
$spec-images: append($spec-images, $spec-image, comma);
|
||||
}
|
||||
|
||||
background-image: $webkit-images;
|
||||
background-image: $spec-images;
|
||||
}
|
||||
55
_scss/bourbon/css3/_background.scss
vendored
55
_scss/bourbon/css3/_background.scss
vendored
@@ -1,55 +0,0 @@
|
||||
//************************************************************************//
|
||||
// Background property for adding multiple backgrounds using shorthand
|
||||
// notation.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background($backgrounds...) {
|
||||
$webkit-backgrounds: ();
|
||||
$spec-backgrounds: ();
|
||||
|
||||
@each $background in $backgrounds {
|
||||
$webkit-background: ();
|
||||
$spec-background: ();
|
||||
$background-type: type-of($background);
|
||||
|
||||
@if $background-type == string or $background-type == list {
|
||||
$background-str: if($background-type == list, nth($background, 1), $background);
|
||||
|
||||
$url-str: str-slice($background-str, 1, 3);
|
||||
$gradient-type: str-slice($background-str, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser("#{$background}");
|
||||
$webkit-background: map-get($gradients, webkit-image);
|
||||
$spec-background: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser("#{$background}");
|
||||
$webkit-background: map-get($gradients, webkit-image);
|
||||
$spec-background: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
|
||||
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
|
||||
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
|
||||
}
|
||||
|
||||
background: $webkit-backgrounds;
|
||||
background: $spec-backgrounds;
|
||||
}
|
||||
59
_scss/bourbon/css3/_border-image.scss
vendored
59
_scss/bourbon/css3/_border-image.scss
vendored
@@ -1,59 +0,0 @@
|
||||
@mixin border-image($borders...) {
|
||||
$webkit-borders: ();
|
||||
$spec-borders: ();
|
||||
|
||||
@each $border in $borders {
|
||||
$webkit-border: ();
|
||||
$spec-border: ();
|
||||
$border-type: type-of($border);
|
||||
|
||||
@if $border-type == string or list {
|
||||
$border-str: if($border-type == list, nth($border, 1), $border);
|
||||
|
||||
$url-str: str-slice($border-str, 1, 3);
|
||||
$gradient-type: str-slice($border-str, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser("#{$border}");
|
||||
$webkit-border: map-get($gradients, webkit-image);
|
||||
$spec-border: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser("#{$border}");
|
||||
$webkit-border: map-get($gradients, webkit-image);
|
||||
$spec-border: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
|
||||
$webkit-borders: append($webkit-borders, $webkit-border, comma);
|
||||
$spec-borders: append($spec-borders, $spec-border, comma);
|
||||
}
|
||||
|
||||
-webkit-border-image: $webkit-borders;
|
||||
border-image: $spec-borders;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
//Examples:
|
||||
// @include border-image(url("image.png"));
|
||||
// @include border-image(url("image.png") 20 stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow));
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
|
||||
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
|
||||
4
_scss/bourbon/css3/_calc.scss
vendored
4
_scss/bourbon/css3/_calc.scss
vendored
@@ -1,4 +0,0 @@
|
||||
@mixin calc($property, $value) {
|
||||
#{$property}: -webkit-calc(#{$value});
|
||||
#{$property}: calc(#{$value});
|
||||
}
|
||||
47
_scss/bourbon/css3/_columns.scss
vendored
47
_scss/bourbon/css3/_columns.scss
vendored
@@ -1,47 +0,0 @@
|
||||
@mixin columns($arg: auto) {
|
||||
// <column-count> || <column-width>
|
||||
@include prefixer(columns, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-count($int: auto) {
|
||||
// auto || integer
|
||||
@include prefixer(column-count, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-gap($length: normal) {
|
||||
// normal || length
|
||||
@include prefixer(column-gap, $length, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-fill($arg: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-fill, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule($arg) {
|
||||
// <border-width> || <border-style> || <color>
|
||||
@include prefixer(column-rule, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-color($color) {
|
||||
@include prefixer(column-rule-color, $color, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-style($style: none) {
|
||||
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
|
||||
@include prefixer(column-rule-style, $style, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-width ($width: none) {
|
||||
@include prefixer(column-rule-width, $width, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-span($arg: none) {
|
||||
// none || all
|
||||
@include prefixer(column-span, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-width($length: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-width, $length, webkit moz spec);
|
||||
}
|
||||
4
_scss/bourbon/css3/_filter.scss
vendored
4
_scss/bourbon/css3/_filter.scss
vendored
@@ -1,4 +0,0 @@
|
||||
@mixin filter($function: none) {
|
||||
// <filter-function> [<filter-function]* | none
|
||||
@include prefixer(filter, $function, webkit spec);
|
||||
}
|
||||
287
_scss/bourbon/css3/_flex-box.scss
vendored
287
_scss/bourbon/css3/_flex-box.scss
vendored
@@ -1,287 +0,0 @@
|
||||
// CSS3 Flexible Box Model and property defaults
|
||||
|
||||
// Custom shorthand notation for flexbox
|
||||
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
|
||||
@include display-box;
|
||||
@include box-orient($orient);
|
||||
@include box-pack($pack);
|
||||
@include box-align($align);
|
||||
}
|
||||
|
||||
@mixin display-box {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox; // IE 10
|
||||
display: box;
|
||||
}
|
||||
|
||||
@mixin box-orient($orient: inline-axis) {
|
||||
// horizontal|vertical|inline-axis|block-axis|inherit
|
||||
@include prefixer(box-orient, $orient, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-pack($pack: start) {
|
||||
// start|end|center|justify
|
||||
@include prefixer(box-pack, $pack, webkit moz spec);
|
||||
-ms-flex-pack: $pack; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-align($align: stretch) {
|
||||
// start|end|center|baseline|stretch
|
||||
@include prefixer(box-align, $align, webkit moz spec);
|
||||
-ms-flex-align: $align; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-direction($direction: normal) {
|
||||
// normal|reverse|inherit
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
-ms-flex-direction: $direction; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-lines($lines: single) {
|
||||
// single|multiple
|
||||
@include prefixer(box-lines, $lines, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-ordinal-group($int: 1) {
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
-ms-flex-order: $int; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-flex($value: 0) {
|
||||
@include prefixer(box-flex, $value, webkit moz spec);
|
||||
-ms-flex: $value; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-flex-group($int: 1) {
|
||||
@include prefixer(box-flex-group, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
// CSS3 Flexible Box Model and property defaults
|
||||
// Unified attributes for 2009, 2011, and 2012 flavours.
|
||||
|
||||
// 2009 - display (box | inline-box)
|
||||
// 2011 - display (flexbox | inline-flexbox)
|
||||
// 2012 - display (flex | inline-flex)
|
||||
@mixin display($value) {
|
||||
// flex | inline-flex
|
||||
@if $value == "flex" {
|
||||
// 2009
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
|
||||
// 2012
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox; // 2011 (IE 10)
|
||||
display: flex;
|
||||
} @else if $value == "inline-flex" {
|
||||
display: -webkit-inline-box;
|
||||
display: -moz-inline-box;
|
||||
display: inline-box;
|
||||
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
} @else {
|
||||
display: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// 2009 - box-flex (integer)
|
||||
// 2011 - flex (decimal | width decimal)
|
||||
// 2012 - flex (integer integer width)
|
||||
@mixin flex($value) {
|
||||
|
||||
// Grab flex-grow for older browsers.
|
||||
$flex-grow: nth($value, 1);
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-flex, $flex-grow, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10), 2012
|
||||
@include prefixer(flex, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
|
||||
// - box-direction (normal | reverse)
|
||||
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
|
||||
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
|
||||
@mixin flex-direction($value: row) {
|
||||
|
||||
// Alt values.
|
||||
$value-2009: $value;
|
||||
$value-2011: $value;
|
||||
$direction: normal;
|
||||
|
||||
@if $value == row {
|
||||
$value-2009: horizontal;
|
||||
} @else if $value == "row-reverse" {
|
||||
$value-2009: horizontal;
|
||||
$direction: reverse;
|
||||
} @else if $value == column {
|
||||
$value-2009: vertical;
|
||||
} @else if $value == "column-reverse" {
|
||||
$value-2009: vertical;
|
||||
$direction: reverse;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-orient, $value-2009, webkit moz spec);
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(flex-direction, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-direction: $value;
|
||||
}
|
||||
|
||||
// 2009 - box-lines (single | multiple)
|
||||
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||
@mixin flex-wrap($value: nowrap) {
|
||||
// Alt values
|
||||
$alt-value: $value;
|
||||
@if $value == nowrap {
|
||||
$alt-value: single;
|
||||
} @else if $value == wrap {
|
||||
$alt-value: multiple;
|
||||
} @else if $value == "wrap-reverse" {
|
||||
$alt-value: multiple;
|
||||
}
|
||||
|
||||
@include prefixer(box-lines, $alt-value, webkit moz spec);
|
||||
@include prefixer(flex-wrap, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// 2009 - TODO: parse values into flex-direction/flex-wrap
|
||||
// 2011 - TODO: parse values into flex-direction/flex-wrap
|
||||
// 2012 - flex-flow (flex-direction || flex-wrap)
|
||||
@mixin flex-flow($value) {
|
||||
@include prefixer(flex-flow, $value, webkit moz spec);
|
||||
}
|
||||
|
||||
// 2009 - box-ordinal-group (integer)
|
||||
// 2011 - flex-order (integer)
|
||||
// 2012 - order (integer)
|
||||
@mixin order($int: 0) {
|
||||
// 2009
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(order, $int, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-order: $int;
|
||||
}
|
||||
|
||||
// 2012 - flex-grow (number)
|
||||
@mixin flex-grow($number: 0) {
|
||||
@include prefixer(flex-grow, $number, webkit moz spec);
|
||||
-ms-flex-positive: $number;
|
||||
}
|
||||
|
||||
// 2012 - flex-shrink (number)
|
||||
@mixin flex-shrink($number: 1) {
|
||||
@include prefixer(flex-shrink, $number, webkit moz spec);
|
||||
-ms-flex-negative: $number;
|
||||
}
|
||||
|
||||
// 2012 - flex-basis (number)
|
||||
@mixin flex-basis($width: auto) {
|
||||
@include prefixer(flex-basis, $width, webkit moz spec);
|
||||
-ms-flex-preferred-size: $width;
|
||||
}
|
||||
|
||||
// 2009 - box-pack (start | end | center | justify)
|
||||
// 2011 - flex-pack (start | end | center | justify)
|
||||
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
|
||||
@mixin justify-content($value: flex-start) {
|
||||
|
||||
// Alt values.
|
||||
$alt-value: $value;
|
||||
@if $value == "flex-start" {
|
||||
$alt-value: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$alt-value: end;
|
||||
} @else if $value == "space-between" {
|
||||
$alt-value: justify;
|
||||
} @else if $value == "space-around" {
|
||||
$alt-value: distribute;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-pack, $alt-value, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(justify-content, $value, webkit moz ms o spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-pack: $alt-value;
|
||||
}
|
||||
|
||||
// 2009 - box-align (start | end | center | baseline | stretch)
|
||||
// 2011 - flex-align (start | end | center | baseline | stretch)
|
||||
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
|
||||
@mixin align-items($value: stretch) {
|
||||
|
||||
$alt-value: $value;
|
||||
|
||||
@if $value == "flex-start" {
|
||||
$alt-value: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$alt-value: end;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-align, $alt-value, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-items, $value, webkit moz ms o spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-align: $alt-value;
|
||||
}
|
||||
|
||||
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
|
||||
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
|
||||
@mixin align-self($value: auto) {
|
||||
|
||||
$value-2011: $value;
|
||||
@if $value == "flex-start" {
|
||||
$value-2011: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$value-2011: end;
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-self, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-item-align: $value-2011;
|
||||
}
|
||||
|
||||
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
|
||||
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
|
||||
@mixin align-content($value: stretch) {
|
||||
|
||||
$value-2011: $value;
|
||||
@if $value == "flex-start" {
|
||||
$value-2011: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$value-2011: end;
|
||||
} @else if $value == "space-between" {
|
||||
$value-2011: justify;
|
||||
} @else if $value == "space-around" {
|
||||
$value-2011: distribute;
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-content, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-line-pack: $value-2011;
|
||||
}
|
||||
24
_scss/bourbon/css3/_font-face.scss
vendored
24
_scss/bourbon/css3/_font-face.scss
vendored
@@ -1,24 +0,0 @@
|
||||
@mixin font-face(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$weight: normal,
|
||||
$style: normal,
|
||||
$asset-pipeline: $asset-pipeline,
|
||||
$file-formats: eot woff2 woff ttf svg) {
|
||||
|
||||
$font-url-prefix: font-url-prefixer($asset-pipeline);
|
||||
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
font-style: $style;
|
||||
font-weight: $weight;
|
||||
|
||||
src: font-source-declaration(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$asset-pipeline,
|
||||
$file-formats,
|
||||
$font-url-prefix
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@mixin font-feature-settings($settings...) {
|
||||
@if length($settings) == 0 { $settings: none; }
|
||||
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
|
||||
}
|
||||
10
_scss/bourbon/css3/_hidpi-media-query.scss
vendored
10
_scss/bourbon/css3/_hidpi-media-query.scss
vendored
@@ -1,10 +0,0 @@
|
||||
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
|
||||
@mixin hidpi($ratio: 1.3) {
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
|
||||
only screen and (min--moz-device-pixel-ratio: $ratio),
|
||||
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
|
||||
only screen and (min-resolution: round($ratio * 96dpi)),
|
||||
only screen and (min-resolution: $ratio * 1dppx) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
4
_scss/bourbon/css3/_hyphens.scss
vendored
4
_scss/bourbon/css3/_hyphens.scss
vendored
@@ -1,4 +0,0 @@
|
||||
@mixin hyphens($hyphenation: none) {
|
||||
// none | manual | auto
|
||||
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
|
||||
}
|
||||
14
_scss/bourbon/css3/_image-rendering.scss
vendored
14
_scss/bourbon/css3/_image-rendering.scss
vendored
@@ -1,14 +0,0 @@
|
||||
@mixin image-rendering ($mode:auto) {
|
||||
|
||||
@if ($mode == crisp-edges) {
|
||||
-ms-interpolation-mode: nearest-neighbor; // IE8+
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
@else {
|
||||
image-rendering: $mode;
|
||||
}
|
||||
}
|
||||
36
_scss/bourbon/css3/_keyframes.scss
vendored
36
_scss/bourbon/css3/_keyframes.scss
vendored
@@ -1,36 +0,0 @@
|
||||
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
|
||||
@mixin keyframes($name) {
|
||||
$original-prefix-for-webkit: $prefix-for-webkit;
|
||||
$original-prefix-for-mozilla: $prefix-for-mozilla;
|
||||
$original-prefix-for-microsoft: $prefix-for-microsoft;
|
||||
$original-prefix-for-opera: $prefix-for-opera;
|
||||
$original-prefix-for-spec: $prefix-for-spec;
|
||||
|
||||
@if $original-prefix-for-webkit {
|
||||
@include disable-prefix-for-all();
|
||||
$prefix-for-webkit: true !global;
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if $original-prefix-for-mozilla {
|
||||
@include disable-prefix-for-all();
|
||||
$prefix-for-mozilla: true !global;
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$prefix-for-webkit: $original-prefix-for-webkit !global;
|
||||
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
|
||||
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
|
||||
$prefix-for-opera: $original-prefix-for-opera !global;
|
||||
$prefix-for-spec: $original-prefix-for-spec !global;
|
||||
|
||||
@if $original-prefix-for-spec {
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
_scss/bourbon/css3/_linear-gradient.scss
vendored
38
_scss/bourbon/css3/_linear-gradient.scss
vendored
@@ -1,38 +0,0 @@
|
||||
@mixin linear-gradient($pos, $g1, $g2: null,
|
||||
$g3: null, $g4: null,
|
||||
$g5: null, $g6: null,
|
||||
$g7: null, $g8: null,
|
||||
$g9: null, $g10: null,
|
||||
$fallback: null) {
|
||||
// Detect what type of value exists in $pos
|
||||
$pos-type: type-of(nth($pos, 1));
|
||||
$pos-spec: null;
|
||||
$pos-degree: null;
|
||||
|
||||
// If $pos is missing from mixin, reassign vars and add default position
|
||||
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
|
||||
$g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
|
||||
$g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
|
||||
$pos: null;
|
||||
}
|
||||
|
||||
@if $pos {
|
||||
$positions: _linear-positions-parser($pos);
|
||||
$pos-degree: nth($positions, 1);
|
||||
$pos-spec: nth($positions, 2);
|
||||
}
|
||||
|
||||
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
|
||||
|
||||
// Set $g1 as the default fallback color
|
||||
$fallback-color: nth($g1, 1);
|
||||
|
||||
// If $fallback is a color use that color as the fallback color
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
|
||||
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
|
||||
}
|
||||
8
_scss/bourbon/css3/_perspective.scss
vendored
8
_scss/bourbon/css3/_perspective.scss
vendored
@@ -1,8 +0,0 @@
|
||||
@mixin perspective($depth: none) {
|
||||
// none | <length>
|
||||
@include prefixer(perspective, $depth, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin perspective-origin($value: 50% 50%) {
|
||||
@include prefixer(perspective-origin, $value, webkit moz spec);
|
||||
}
|
||||
8
_scss/bourbon/css3/_placeholder.scss
vendored
8
_scss/bourbon/css3/_placeholder.scss
vendored
@@ -1,8 +0,0 @@
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
39
_scss/bourbon/css3/_radial-gradient.scss
vendored
39
_scss/bourbon/css3/_radial-gradient.scss
vendored
@@ -1,39 +0,0 @@
|
||||
// Requires Sass 3.1+
|
||||
@mixin radial-gradient($g1, $g2,
|
||||
$g3: null, $g4: null,
|
||||
$g5: null, $g6: null,
|
||||
$g7: null, $g8: null,
|
||||
$g9: null, $g10: null,
|
||||
$pos: null,
|
||||
$shape-size: null,
|
||||
$fallback: null) {
|
||||
|
||||
$data: _radial-arg-parser($g1, $g2, $pos, $shape-size);
|
||||
$g1: nth($data, 1);
|
||||
$g2: nth($data, 2);
|
||||
$pos: nth($data, 3);
|
||||
$shape-size: nth($data, 4);
|
||||
|
||||
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
|
||||
|
||||
// Strip deprecated cover/contain for spec
|
||||
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||
|
||||
// Set $g1 as the default fallback color
|
||||
$first-color: nth($full, 1);
|
||||
$fallback-color: nth($first-color, 1);
|
||||
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
// Add Commas and spaces
|
||||
$shape-size: if($shape-size, "#{$shape-size}, ", null);
|
||||
$pos: if($pos, "#{$pos}, ", null);
|
||||
$pos-spec: if($pos, "at #{$pos}", null);
|
||||
$shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} ");
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: -webkit-radial-gradient(#{$pos}#{$shape-size}#{$full});
|
||||
background-image: radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full});
|
||||
}
|
||||
42
_scss/bourbon/css3/_selection.scss
vendored
42
_scss/bourbon/css3/_selection.scss
vendored
@@ -1,42 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Outputs the spec and prefixed versions of the `::selection` pseudo-element.
|
||||
///
|
||||
/// @param {Bool} $current-selector [false]
|
||||
/// If set to `true`, it takes the current element into consideration.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include selection(true) {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element::-moz-selection {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
///
|
||||
/// .element::selection {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
|
||||
@mixin selection($current-selector: false) {
|
||||
@if $current-selector {
|
||||
&::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
_scss/bourbon/css3/_text-decoration.scss
vendored
19
_scss/bourbon/css3/_text-decoration.scss
vendored
@@ -1,19 +0,0 @@
|
||||
@mixin text-decoration($value) {
|
||||
// <text-decoration-line> || <text-decoration-style> || <text-decoration-color>
|
||||
@include prefixer(text-decoration, $value, moz);
|
||||
}
|
||||
|
||||
@mixin text-decoration-line($line: none) {
|
||||
// none || underline || overline || line-through
|
||||
@include prefixer(text-decoration-line, $line, moz);
|
||||
}
|
||||
|
||||
@mixin text-decoration-style($style: solid) {
|
||||
// solid || double || dotted || dashed || wavy
|
||||
@include prefixer(text-decoration-style, $style, moz webkit);
|
||||
}
|
||||
|
||||
@mixin text-decoration-color($color: currentColor) {
|
||||
// currentColor || <color>
|
||||
@include prefixer(text-decoration-color, $color, moz);
|
||||
}
|
||||
15
_scss/bourbon/css3/_transform.scss
vendored
15
_scss/bourbon/css3/_transform.scss
vendored
@@ -1,15 +0,0 @@
|
||||
@mixin transform($property: none) {
|
||||
// none | <transform-function>
|
||||
@include prefixer(transform, $property, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-origin($axes: 50%) {
|
||||
// x-axis - left | center | right | length | %
|
||||
// y-axis - top | center | bottom | length | %
|
||||
// z-axis - length
|
||||
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-style($style: flat) {
|
||||
@include prefixer(transform-style, $style, webkit moz ms o spec);
|
||||
}
|
||||
71
_scss/bourbon/css3/_transition.scss
vendored
71
_scss/bourbon/css3/_transition.scss
vendored
@@ -1,71 +0,0 @@
|
||||
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
|
||||
// Example: @include transition (all 2s ease-in-out);
|
||||
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
|
||||
// @include transition-property (transform, opacity);
|
||||
|
||||
@mixin transition($properties...) {
|
||||
// Fix for vendor-prefix transform property
|
||||
$needs-prefixes: false;
|
||||
$webkit: ();
|
||||
$moz: ();
|
||||
$spec: ();
|
||||
|
||||
// Create lists for vendor-prefixed transform
|
||||
@each $list in $properties {
|
||||
@if nth($list, 1) == "transform" {
|
||||
$needs-prefixes: true;
|
||||
$list1: -webkit-transform;
|
||||
$list2: -moz-transform;
|
||||
$list3: ();
|
||||
|
||||
@each $var in $list {
|
||||
$list3: join($list3, $var);
|
||||
|
||||
@if $var != "transform" {
|
||||
$list1: join($list1, $var);
|
||||
$list2: join($list2, $var);
|
||||
}
|
||||
}
|
||||
|
||||
$webkit: append($webkit, $list1);
|
||||
$moz: append($moz, $list2);
|
||||
$spec: append($spec, $list3);
|
||||
} @else {
|
||||
$webkit: append($webkit, $list, comma);
|
||||
$moz: append($moz, $list, comma);
|
||||
$spec: append($spec, $list, comma);
|
||||
}
|
||||
}
|
||||
|
||||
@if $needs-prefixes {
|
||||
-webkit-transition: $webkit;
|
||||
-moz-transition: $moz;
|
||||
transition: $spec;
|
||||
} @else {
|
||||
@if length($properties) >= 1 {
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
} @else {
|
||||
$properties: all 0.15s ease-out 0s;
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-property($properties...) {
|
||||
-webkit-transition-property: transition-property-names($properties, "webkit");
|
||||
-moz-transition-property: transition-property-names($properties, "moz");
|
||||
transition-property: transition-property-names($properties, false);
|
||||
}
|
||||
|
||||
@mixin transition-duration($times...) {
|
||||
@include prefixer(transition-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-timing-function($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
|
||||
@include prefixer(transition-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-delay($times...) {
|
||||
@include prefixer(transition-delay, $times, webkit moz spec);
|
||||
}
|
||||
3
_scss/bourbon/css3/_user-select.scss
vendored
3
_scss/bourbon/css3/_user-select.scss
vendored
@@ -1,3 +0,0 @@
|
||||
@mixin user-select($value: none) {
|
||||
@include prefixer(user-select, $value, webkit moz ms spec);
|
||||
}
|
||||
11
_scss/bourbon/functions/_assign-inputs.scss
vendored
11
_scss/bourbon/functions/_assign-inputs.scss
vendored
@@ -1,11 +0,0 @@
|
||||
@function assign-inputs($inputs, $pseudo: null) {
|
||||
$list: ();
|
||||
|
||||
@each $input in $inputs {
|
||||
$input: unquote($input);
|
||||
$input: if($pseudo, $input + ":" + $pseudo, $input);
|
||||
$list: append($list, $input, comma);
|
||||
}
|
||||
|
||||
@return $list;
|
||||
}
|
||||
20
_scss/bourbon/functions/_contains-falsy.scss
vendored
20
_scss/bourbon/functions/_contains-falsy.scss
vendored
@@ -1,20 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks if a list does not contains a value.
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {List} $list
|
||||
/// The list to check against.
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function contains-falsy($list) {
|
||||
@each $item in $list {
|
||||
@if not $item {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
26
_scss/bourbon/functions/_contains.scss
vendored
26
_scss/bourbon/functions/_contains.scss
vendored
@@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks if a list contains a value(s).
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {List} $list
|
||||
/// The list to check against.
|
||||
///
|
||||
/// @param {List} $values
|
||||
/// A single value or list of values to check for.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// contains($list, $value)
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function contains($list, $values...) {
|
||||
@each $value in $values {
|
||||
@if type-of(index($list, $value)) != "number" {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@return true;
|
||||
}
|
||||
11
_scss/bourbon/functions/_is-length.scss
vendored
11
_scss/bourbon/functions/_is-length.scss
vendored
@@ -1,11 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS length.
|
||||
///
|
||||
/// @param {String} $value
|
||||
|
||||
@function is-length($value) {
|
||||
@return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc"
|
||||
or index(auto inherit initial 0, $value)
|
||||
or (type-of($value) == "number" and not(unitless($value))));
|
||||
}
|
||||
21
_scss/bourbon/functions/_is-light.scss
vendored
21
_scss/bourbon/functions/_is-light.scss
vendored
@@ -1,21 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Programatically determines whether a color is light or dark.
|
||||
///
|
||||
/// @link http://robots.thoughtbot.com/closer-look-color-lightness
|
||||
///
|
||||
/// @param {Color (Hex)} $color
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// is-light($color)
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function is-light($hex-color) {
|
||||
$-local-red: red(rgba($hex-color, 1));
|
||||
$-local-green: green(rgba($hex-color, 1));
|
||||
$-local-blue: blue(rgba($hex-color, 1));
|
||||
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
|
||||
|
||||
@return $-local-lightness > 0.6;
|
||||
}
|
||||
11
_scss/bourbon/functions/_is-number.scss
vendored
11
_scss/bourbon/functions/_is-number.scss
vendored
@@ -1,11 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid number.
|
||||
///
|
||||
/// @param {Number} $value
|
||||
///
|
||||
/// @require {function} contains
|
||||
|
||||
@function is-number($value) {
|
||||
@return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value);
|
||||
}
|
||||
13
_scss/bourbon/functions/_is-size.scss
vendored
13
_scss/bourbon/functions/_is-size.scss
vendored
@@ -1,13 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS size.
|
||||
///
|
||||
/// @param {String} $value
|
||||
///
|
||||
/// @require {function} contains
|
||||
/// @require {function} is-length
|
||||
|
||||
@function is-size($value) {
|
||||
@return is-length($value)
|
||||
or contains("fill" "fit-content" "min-content" "max-content", $value);
|
||||
}
|
||||
69
_scss/bourbon/functions/_modular-scale.scss
vendored
69
_scss/bourbon/functions/_modular-scale.scss
vendored
@@ -1,69 +0,0 @@
|
||||
// Scaling Variables
|
||||
$golden: 1.618;
|
||||
$minor-second: 1.067;
|
||||
$major-second: 1.125;
|
||||
$minor-third: 1.2;
|
||||
$major-third: 1.25;
|
||||
$perfect-fourth: 1.333;
|
||||
$augmented-fourth: 1.414;
|
||||
$perfect-fifth: 1.5;
|
||||
$minor-sixth: 1.6;
|
||||
$major-sixth: 1.667;
|
||||
$minor-seventh: 1.778;
|
||||
$major-seventh: 1.875;
|
||||
$octave: 2;
|
||||
$major-tenth: 2.5;
|
||||
$major-eleventh: 2.667;
|
||||
$major-twelfth: 3;
|
||||
$double-octave: 4;
|
||||
|
||||
$modular-scale-ratio: $perfect-fourth !default;
|
||||
$modular-scale-base: em($em-base) !default;
|
||||
|
||||
@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {
|
||||
$v1: nth($value, 1);
|
||||
$v2: nth($value, length($value));
|
||||
$value: $v1;
|
||||
|
||||
// scale $v2 to just above $v1
|
||||
@while $v2 > $v1 {
|
||||
$v2: ($v2 / $ratio); // will be off-by-1
|
||||
}
|
||||
@while $v2 < $v1 {
|
||||
$v2: ($v2 * $ratio); // will fix off-by-1
|
||||
}
|
||||
|
||||
// check AFTER scaling $v2 to prevent double-counting corner-case
|
||||
$double-stranded: $v2 > $v1;
|
||||
|
||||
@if $increment > 0 {
|
||||
@for $i from 1 through $increment {
|
||||
@if $double-stranded and ($v1 * $ratio) > $v2 {
|
||||
$value: $v2;
|
||||
$v2: ($v2 * $ratio);
|
||||
} @else {
|
||||
$v1: ($v1 * $ratio);
|
||||
$value: $v1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $increment < 0 {
|
||||
// adjust $v2 to just below $v1
|
||||
@if $double-stranded {
|
||||
$v2: ($v2 / $ratio);
|
||||
}
|
||||
|
||||
@for $i from $increment through -1 {
|
||||
@if $double-stranded and ($v1 / $ratio) < $v2 {
|
||||
$value: $v2;
|
||||
$v2: ($v2 / $ratio);
|
||||
} @else {
|
||||
$v1: ($v1 / $ratio);
|
||||
$value: $v1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
13
_scss/bourbon/functions/_px-to-em.scss
vendored
13
_scss/bourbon/functions/_px-to-em.scss
vendored
@@ -1,13 +0,0 @@
|
||||
// Convert pixels to ems
|
||||
// eg. for a relational value of 12px write em(12) when the parent is 16px
|
||||
// if the parent is another value say 24px write em(12, 24)
|
||||
|
||||
@function em($pxval, $base: $em-base) {
|
||||
@if not unitless($pxval) {
|
||||
$pxval: strip-units($pxval);
|
||||
}
|
||||
@if not unitless($base) {
|
||||
$base: strip-units($base);
|
||||
}
|
||||
@return ($pxval / $base) * 1em;
|
||||
}
|
||||
15
_scss/bourbon/functions/_px-to-rem.scss
vendored
15
_scss/bourbon/functions/_px-to-rem.scss
vendored
@@ -1,15 +0,0 @@
|
||||
// Convert pixels to rems
|
||||
// eg. for a relational value of 12px write rem(12)
|
||||
// Assumes $em-base is the font-size of <html>
|
||||
|
||||
@function rem($pxval) {
|
||||
@if not unitless($pxval) {
|
||||
$pxval: strip-units($pxval);
|
||||
}
|
||||
|
||||
$base: $em-base;
|
||||
@if not unitless($base) {
|
||||
$base: strip-units($base);
|
||||
}
|
||||
@return ($pxval / $base) * 1rem;
|
||||
}
|
||||
24
_scss/bourbon/functions/_shade.scss
vendored
24
_scss/bourbon/functions/_shade.scss
vendored
@@ -1,24 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Mixes a color with black.
|
||||
///
|
||||
/// @param {Color} $color
|
||||
///
|
||||
/// @param {Number (Percentage)} $percent
|
||||
/// The amount of black to be mixed in.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// background-color: shade(#ffbb52, 60%);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// background-color: #664a20;
|
||||
/// }
|
||||
///
|
||||
/// @return {Color}
|
||||
|
||||
@function shade($color, $percent) {
|
||||
@return mix(#000, $color, $percent);
|
||||
}
|
||||
17
_scss/bourbon/functions/_strip-units.scss
vendored
17
_scss/bourbon/functions/_strip-units.scss
vendored
@@ -1,17 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Strips the unit from a number.
|
||||
///
|
||||
/// @param {Number (With Unit)} $value
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// $dimension: strip-units(10em);
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// $dimension: 10;
|
||||
///
|
||||
/// @return {Number (Unitless)}
|
||||
|
||||
@function strip-units($value) {
|
||||
@return ($value / ($value * 0 + 1));
|
||||
}
|
||||
24
_scss/bourbon/functions/_tint.scss
vendored
24
_scss/bourbon/functions/_tint.scss
vendored
@@ -1,24 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Mixes a color with white.
|
||||
///
|
||||
/// @param {Color} $color
|
||||
///
|
||||
/// @param {Number (Percentage)} $percent
|
||||
/// The amount of white to be mixed in.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// background-color: tint(#6ecaa6, 40%);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// background-color: #a8dfc9;
|
||||
/// }
|
||||
///
|
||||
/// @return {Color}
|
||||
|
||||
@function tint($color, $percent) {
|
||||
@return mix(#fff, $color, $percent);
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
// Return vendor-prefixed property names if appropriate
|
||||
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
|
||||
//************************************************************************//
|
||||
@function transition-property-names($props, $vendor: false) {
|
||||
$new-props: ();
|
||||
|
||||
@each $prop in $props {
|
||||
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
|
||||
}
|
||||
|
||||
@return $new-props;
|
||||
}
|
||||
|
||||
@function transition-property-name($prop, $vendor: false) {
|
||||
// put other properties that need to be prefixed here aswell
|
||||
@if $vendor and $prop == transform {
|
||||
@return unquote('-'+$vendor+'-'+$prop);
|
||||
}
|
||||
@else {
|
||||
@return $prop;
|
||||
}
|
||||
}
|
||||
27
_scss/bourbon/functions/_unpack.scss
vendored
27
_scss/bourbon/functions/_unpack.scss
vendored
@@ -1,27 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Converts shorthand to the 4-value syntax.
|
||||
///
|
||||
/// @param {List} $shorthand
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// margin: unpack(1em 2em);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// margin: 1em 2em 1em 2em;
|
||||
/// }
|
||||
|
||||
@function unpack($shorthand) {
|
||||
@if length($shorthand) == 1 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
|
||||
} @else if length($shorthand) == 2 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
|
||||
} @else if length($shorthand) == 3 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
|
||||
} @else {
|
||||
@return $shorthand;
|
||||
}
|
||||
}
|
||||
21
_scss/bourbon/helpers/_convert-units.scss
vendored
21
_scss/bourbon/helpers/_convert-units.scss
vendored
@@ -1,21 +0,0 @@
|
||||
//************************************************************************//
|
||||
// Helper function for str-to-num fn.
|
||||
// Source: http://sassmeister.com/gist/9647408
|
||||
//************************************************************************//
|
||||
@function _convert-units($number, $unit) {
|
||||
$strings: "px", "cm", "mm", "%", "ch", "pica", "in", "em", "rem", "pt", "pc", "ex", "vw", "vh", "vmin", "vmax", "deg", "rad", "grad", "turn";
|
||||
$units: 1px, 1cm, 1mm, 1%, 1ch, 1pica, 1in, 1em, 1rem, 1pt, 1pc, 1ex, 1vw, 1vh, 1vmin, 1vmax, 1deg, 1rad, 1grad, 1turn;
|
||||
$index: index($strings, $unit);
|
||||
|
||||
@if not $index {
|
||||
@warn "Unknown unit `#{$unit}`.";
|
||||
@return false;
|
||||
}
|
||||
|
||||
@if type-of($number) != "number" {
|
||||
@warn "`#{$number} is not a number`";
|
||||
@return false;
|
||||
}
|
||||
|
||||
@return $number * nth($units, $index);
|
||||
}
|
||||
96
_scss/bourbon/helpers/_directional-values.scss
vendored
96
_scss/bourbon/helpers/_directional-values.scss
vendored
@@ -1,96 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Directional-property mixins are shorthands for writing properties like the following
|
||||
///
|
||||
/// @ignore You can also use `false` instead of `null`.
|
||||
///
|
||||
/// @param {List} $vals
|
||||
/// List of directional values
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-style(dotted null);
|
||||
/// @include margin(null 0 10px);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-bottom-style: dotted;
|
||||
/// border-top-style: dotted;
|
||||
/// margin-bottom: 10px;
|
||||
/// margin-left: 0;
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} contains-falsy
|
||||
///
|
||||
/// @return {List}
|
||||
|
||||
@function collapse-directionals($vals) {
|
||||
$output: null;
|
||||
|
||||
$a: nth($vals, 1);
|
||||
$b: if(length($vals) < 2, $a, nth($vals, 2));
|
||||
$c: if(length($vals) < 3, $a, nth($vals, 3));
|
||||
$d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4)));
|
||||
|
||||
@if $a == 0 { $a: 0; }
|
||||
@if $b == 0 { $b: 0; }
|
||||
@if $c == 0 { $c: 0; }
|
||||
@if $d == 0 { $d: 0; }
|
||||
|
||||
@if $a == $b and $a == $c and $a == $d { $output: $a; }
|
||||
@else if $a == $c and $b == $d { $output: $a $b; }
|
||||
@else if $b == $d { $output: $a $b $c; }
|
||||
@else { $output: $a $b $c $d; }
|
||||
|
||||
@return $output;
|
||||
}
|
||||
|
||||
/// Output directional properties, for instance `margin`.
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {String} $pre
|
||||
/// Prefix to use
|
||||
/// @param {String} $suf
|
||||
/// Suffix to use
|
||||
/// @param {List} $vals
|
||||
/// List of values
|
||||
///
|
||||
/// @require {function} collapse-directionals
|
||||
/// @require {function} contains-falsy
|
||||
|
||||
@mixin directional-property($pre, $suf, $vals) {
|
||||
// Property Names
|
||||
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
|
||||
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
|
||||
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
|
||||
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
|
||||
$all: $pre + if($suf, "-#{$suf}", "");
|
||||
|
||||
$vals: collapse-directionals($vals);
|
||||
|
||||
@if contains-falsy($vals) {
|
||||
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
|
||||
|
||||
@if length($vals) == 1 {
|
||||
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
|
||||
} @else {
|
||||
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
|
||||
}
|
||||
|
||||
@if length($vals) == 2 {
|
||||
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
|
||||
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
||||
} @else if length($vals) == 3 {
|
||||
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
||||
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
||||
} @else if length($vals) == 4 {
|
||||
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
||||
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
|
||||
}
|
||||
} @else {
|
||||
#{$all}: $vals;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user