├── .bowerrc ├── .eslintignore ├── .eslintrc.json ├── .github ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── ci.yml │ └── commitlint.yml ├── .gitignore ├── .npmignore ├── AUTHORS ├── CHANGELOG.md ├── CONTRIBUTING.md ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── _config.yml ├── bower.json ├── gulp ├── .eslintrc.json ├── tasks │ ├── build-production.js │ ├── clean.js │ ├── default.js │ ├── doc-publish.js │ ├── jekyll.js │ ├── lint.js │ ├── preview.js │ └── webpack.js └── util │ ├── bundleLogger.js │ ├── gitUtils.js │ └── handleErrors.js ├── gulpfile.js ├── openedx.yaml ├── package-lock.json ├── package.json ├── pattern-library ├── fonts │ └── OpenSans │ │ ├── OpenSans-Bold-webfont.ttf │ │ ├── OpenSans-Bold-webfont.woff │ │ ├── OpenSans-Bold-webfont.woff2 │ │ ├── OpenSans-BoldItalic-webfont.ttf │ │ ├── OpenSans-BoldItalic-webfont.woff │ │ ├── OpenSans-BoldItalic-webfont.woff2 │ │ ├── OpenSans-Italic-webfont.ttf │ │ ├── OpenSans-Italic-webfont.woff │ │ ├── OpenSans-Italic-webfont.woff2 │ │ ├── OpenSans-Light-webfont.ttf │ │ ├── OpenSans-Light-webfont.woff │ │ ├── OpenSans-Light-webfont.woff2 │ │ ├── OpenSans-LightItalic-webfont.ttf │ │ ├── OpenSans-LightItalic-webfont.woff │ │ ├── OpenSans-LightItalic-webfont.woff2 │ │ ├── OpenSans-Regular-webfont.ttf │ │ ├── OpenSans-Regular-webfont.woff │ │ ├── OpenSans-Regular-webfont.woff2 │ │ ├── OpenSans-Semibold-webfont.ttf │ │ ├── OpenSans-Semibold-webfont.woff │ │ ├── OpenSans-Semibold-webfont.woff2 │ │ ├── OpenSans-SemiboldItalic-webfont.ttf │ │ ├── OpenSans-SemiboldItalic-webfont.woff │ │ └── OpenSans-SemiboldItalic-webfont.woff2 ├── html │ ├── boilerplate-blank-RTL.html │ ├── boilerplate-blank.html │ ├── boilerplate-header+footer+content+nav.html │ └── boilerplate-header+footer.html ├── js │ └── select-replace.js └── sass │ ├── _edx-pattern-library.scss │ ├── _normalize.scss │ ├── edx-pattern-library-ltr.scss │ ├── edx-pattern-library-rtl.scss │ ├── global │ ├── _core.scss │ ├── _functions.scss │ ├── _helpers.scss │ ├── _lib.scss │ ├── _ltr.scss │ ├── _mixins.scss │ ├── _reset.scss │ ├── _rtl.scss │ └── _settings.scss │ └── patterns │ ├── _alerts.scss │ ├── _breadcrumbs.scss │ ├── _buttons.scss │ ├── _copy.scss │ ├── _depth.scss │ ├── _dropdown-menu.scss │ ├── _forms.scss │ ├── _grid.scss │ ├── _headings.scss │ ├── _icons.scss │ ├── _layouts.scss │ ├── _lists.scss │ └── _tables.scss ├── pldoc ├── 404.html ├── CNAME ├── _components │ ├── alerts.md │ ├── breadcrumbs.md │ ├── buttons.md │ ├── dropdown-menu.md │ ├── forms.md │ ├── lists.md │ └── tables.md ├── _data │ ├── edx-pattern-library.yml │ └── edx-ui-toolkit.yml ├── _design_elements │ ├── colors.md │ ├── copy.md │ ├── depth.md │ ├── grid.md │ ├── headings.md │ ├── icons.md │ └── layouts.md ├── _includes │ ├── assets-primary.html │ ├── assets-secondary.html │ ├── canvas-assets-primary.html │ ├── canvas-assets-secondary.html │ ├── canvas-head.html │ ├── collection-page-list.html │ ├── examples │ │ ├── breadcrumbs-js.html │ │ └── dropdown-menu-js.html │ ├── footer.html │ ├── head.html │ ├── header.html │ ├── navigation-item.html │ ├── navigation.html │ └── pattern.html ├── _layouts │ ├── canvas.html │ ├── default.html │ ├── documentation.html │ ├── page.html │ └── pattern.html ├── about.md ├── examples │ ├── blank.html │ ├── depth.html │ ├── grid.html │ ├── kitchen-sink.html │ └── layouts.html ├── favicon.ico ├── index.md └── static │ ├── images │ └── edx-logo.svg │ ├── js │ ├── color-contrast.js │ ├── colors.js │ ├── colors_json.js │ ├── pattern-library-doc.js │ ├── size-slider.js │ ├── tabs.js │ └── ui.js │ └── sass │ ├── _build.scss │ ├── _components.scss │ ├── _layouts.scss │ ├── _ltr.scss │ ├── _overrides.scss │ ├── _rtl.scss │ ├── _syntax.scss │ ├── _utilities.scss │ ├── _views.scss │ └── pattern-library-doc.scss └── webpack.config.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "./bower_components/", 3 | "analytics": false 4 | } 5 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | _preview_site 2 | _site 3 | node_modules 4 | !pldoc/_includes/examples 5 | pldoc/public 6 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-edx" 3 | } 4 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | TODO: Link to a JIRA ticket if one has been created for this feature/issue. 4 | Use the following format for a link: `[FEDX-100](https://openedx.atlassian.net/browse/FEDX-100)` 5 | 6 | TODO: Include a detailed description of the changes in the body of the PR. 7 | 8 | TODO: Build a preview version of the documentation using ``gulp preview`` and add the generated link here. 9 | 10 | ## Manual Test Plan 11 | 12 | TODO: If your changes require manual tests, include instructions for any required manual tests, 13 | and any manual testing that has already been performed. 14 | 15 | ## Testing Checklist 16 | - [ ] Manually test responsive behavior. 17 | - [ ] Manually test right-to-left behavior. 18 | - [ ] Manually test a11y support. 19 | 20 | ## Non-testing Checklist 21 | - [ ] Consider any documentation your change might need, and which users will be affected by this change. 22 | 23 | ## Post-review 24 | - [ ] Squash commits into discrete sets of changes with descriptive commit messages. 25 | 26 | ## Reviewers 27 | TODO: In this section, tag specific reviewers you know will want to have a look at this PR. Please 28 | leave this section blank if you do not know who to tag, and we will automatically suggest reviewers 29 | based on the code it touches. 30 | 31 | TODO: You can use the checklist below for organization: 32 | 33 | - [ ] @mention a reviewer here 34 | - [ ] @mention a reviewer here 35 | 36 | TODO: Consider not just code reviewers but also including reviewers from Docs, UX, Accessibility and Product, if applicable. 37 | 38 | If you've been tagged for review, please check your corresponding box once you've given the :+1:. 39 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: node_js CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - "**" 10 | 11 | jobs: 12 | run_tests: 13 | name: Node Tests 14 | runs-on: ubuntu-20.04 15 | strategy: 16 | matrix: 17 | node: [10] 18 | steps: 19 | - name: Checkout 20 | uses: actions/checkout@v2 21 | 22 | - name: Setup Nodejs 23 | uses: actions/setup-node@v2 24 | with: 25 | node-version: ${{ matrix.node }} 26 | 27 | - name: Install Ruby 28 | uses: ruby/setup-ruby@477b21f02be01bcb8030d50f37cfec92bfa615b6 29 | with: 30 | ruby-version: 2.7 31 | 32 | - name: Install Dependencies 33 | run: npm install 34 | 35 | - name: Bundle Install 36 | run: bundle install 37 | 38 | # gulp checks fail on CI. These were already failing on Travis and will be fixed in a later PR. 39 | # - name: Run Gulp Build 40 | # run: gulp build-production 41 | # 42 | # - name: Run Gulp Lint 43 | # run: gulp lint 44 | -------------------------------------------------------------------------------- /.github/workflows/commitlint.yml: -------------------------------------------------------------------------------- 1 | # Run commitlint on the commit messages in a pull request. 2 | 3 | name: Lint Commit Messages 4 | 5 | on: 6 | - pull_request 7 | 8 | jobs: 9 | commitlint: 10 | uses: openedx/.github/.github/workflows/commitlint.yml@master 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore: docs files 2 | _gh_pages 3 | _site 4 | .ruby-version 5 | 6 | # Numerous always-ignore extensions 7 | *.diff 8 | *.err 9 | *.orig 10 | *.log 11 | *.rej 12 | *.swo 13 | *.swp 14 | *.zip 15 | *.vi 16 | *~ 17 | 18 | # Ignore: OS or Editor folders 19 | .DS_Store 20 | ._* 21 | Thumbs.db 22 | .cache 23 | .project 24 | .settings 25 | .tmproj 26 | *.esproj 27 | nbproject 28 | *.sublime-project 29 | *.sublime-workspace 30 | .idea 31 | 32 | # Ignore: Front End/Local Development 33 | .sass-cache 34 | *.map 35 | _tmp_preview_config.yml 36 | bower_components 37 | node_modules 38 | 39 | # Ignore: creative/resources 40 | _ux 41 | 42 | # Documentation 43 | .publish 44 | _site 45 | _preview_site 46 | public 47 | s3_website.yml 48 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | 2 | .bowerrc 3 | .gitignore 4 | .pr_cover_letter.md.j2 5 | CNAME 6 | Gemfile 7 | Gemfile.lock 8 | _config.yml 9 | _preview_site 10 | _site 11 | _tmp_preview_config.yml 12 | bower.json 13 | demo 14 | examples 15 | favicon.ico 16 | gulp 17 | gulpfile.js 18 | index.html 19 | node_modules 20 | package.json 21 | pldoc 22 | public 23 | s3_website.yml 24 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | Chris Rodriguez 2 | Brian Talbot 3 | Frances Botsford 4 | Marco Morales 5 | Tyler Nickerson 6 | Jamie Folsom 7 | Renzo Lucioni 8 | Dennis Jen 9 | Andy Armstrong 10 | Alasdair Swan 11 | Alisan Tang 12 | Brian Jacobel 13 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | This is an Open edX repo, and we welcome your contributions! 4 | Please read the [contributing guidelines](http://edx.readthedocs.org/projects/edx-developer-guide/en/latest/process/index.html). 5 | 6 | Here are some areas of heightened importance to consider when contributing to the edX Pattern Library: 7 | 8 | - RTL 9 | - Will the feature work for right-to-left languages? 10 | - a11y 11 | - Does markup make use of aria attributes, where applicable? 12 | - Browser support 13 | - Does the feature work at all screen sizes and pixel densities? 14 | - Are the browser features this code relies on available in all edX supported browsers? 15 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | gem 'github-pages' 3 | gem 'jekyll-seo-tag' 4 | gem 'nokogiri', '1.14.3' -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # edX Pattern Library 2 | 3 | The (working) UI library and Front End Styleguide for edX/Open edX applications and sites. 4 | 5 | [![GitHub version](https://badge.fury.io/gh/edx%2Fux-pattern-library.svg)](https://badge.fury.io/gh/edx%2Fux-pattern-library) 6 | [![npm version](https://badge.fury.io/js/edx-pattern-library.svg)](https://badge.fury.io/js/edx-pattern-library) 7 | [![Bower version](https://badge.fury.io/bo/edx-pattern-library.svg)](https://badge.fury.io/bo/edx-pattern-library) 8 | 9 | 10 | 11 | - - - 12 | 13 | ## Table of Contents 14 | 15 | 1. [Overview](#overview) 16 | 2. [License](#license) 17 | 3. [Dependencies](#dependencies) 18 | 4. [Documentation](#documentation) 19 | 5. [Getting Started](#getting-started) 20 | 6. [Contributions](#contributions) 21 | 22 | - - - 23 | 24 | ## Overview 25 | 26 | This library contains the following: 27 | 28 | * [A working preview and documentation system for edX application UI](http://ux.edx.org) - known as "PLDOC". 29 | * Styleguides and standards for [general Front End](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-General), [HTML](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-HTML), [Sass/CSS](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS), and [Accessibility-minded](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Accessibility) development. 30 | * Portable Sass/CSS utilities and modules for use within edX applications. 31 | 32 | ## License 33 | 34 | The code in this repository is licensed the Apache 2.0 license unless otherwise 35 | noted. Please see the [LICENSE file](https://github.com/edx/ux-pattern-library/blob/master/LICENSE) for details. 36 | 37 | ## Dependencies 38 | 39 | Using the edX Pattern Library source code in a project current requires: 40 | 41 | * Locally installing a package manager (either [Node/npm](https://nodejs.org) or [Bower)](http://bower.io/). 42 | * Use of modern web browsers - see [Open edX/edX browser support](http://docstrings.readthedocs.org/en/latest/front_matter/browsers.html) 43 | * The use and compilation of Sass into CSS using perferrably [LibSass](http://sass-lang.com/libsass) (if using the Sass method for including the pattern library). 44 | 45 | 46 | ### Third Party Dependencies 47 | 48 | Also, the Pattern Library currently relies on the following thrd party libraries: 49 | 50 | | Library | Version | Purpose | 51 | | ------------- | ------------- | ------------- | 52 | | [Bourbon](https://github.com/thoughtbot/bourbon) | 4.2.6 | basic sass/CSS utilities | 53 | | [bi-app-sass](https://github.com/anasnakawa/bi-app-sass) | latest | right-to-left/left-to-right directional support for layouts | 54 | | [breakpoint-sass](https://github.com/at-import/breakpoint) | 2.6.1 | CSS breakpoint/media-query management | 55 | | [Font Awesome](https://github.com/FortAwesome/Font-Awesome) | 4.6.3 | Accessibility-minded iconic font | 56 | 57 | ## Documentation 58 | 59 | The edX Pattern Library has its own living documentation site at 60 | http://ux.edx.org. Additionally, we have many [styleguides and how-to wiki 61 | documents](https://github.com/edx/ux-pattern-library/wiki) in the Github 62 | repository. 63 | 64 | ## Getting Started 65 | * If you want to use the edX Pattern Library in your project or work, please see [How to Work and Develop on Documentation Site (PLDOC)](https://github.com/edx/ux-pattern-library/wiki#how-to-use-and-deploy-the-uxpl-in-your-project) 66 | * If you'd like to set up or work on the living documentation site locally, check out [How to Work and Develop on Documentation Site (PLDOC)](https://github.com/edx/ux-pattern-library/wiki#how-to-work-and-develop-on-documentation-site-pldoc) 67 | * If you'd like to work on or contribute to the edX Pattern Library package, read [How to Work/Develop on the edX Pattern Library Package](https://github.com/edx/ux-pattern-library/wiki#how-to-workdevelop-on-the-ux-pattern-library-package) 68 | 69 | 70 | ## Contributions 71 | Contributions are very welcome. The easiest way is to fork this repo, and then 72 | make a pull request from your fork. The first time you make a pull request, you 73 | may be asked to sign a Contributor Agreement. 74 | 75 | Please refer to our [contributor guidelines](https://github.com/edx/edx-platform/blob/master/CONTRIBUTING.rst) in the main edx-platform repo for 76 | important additional information. 77 | 78 | ### Contributing and the edX Pattern Library 79 | There are a few additional details alongside our general guidelines to keep in mind contributing to the edX Pattern Library: 80 | 81 | #### Pattern Library Features, Ideas, and Improvements 82 | If you're looking to suggest an idea or you're thinking about developing a 83 | feature, start a discussion [by visiting the Open edX JIRA 84 | site](https://openedx.atlassian.net/secure/Dashboard.jspa) and create a new 85 | "Issue" by selecting the "Create" button at the top of the page. Choose the 86 | project "edX Pattern Library" and the issue type "New Feature" or "Improvement" 87 | (you may first need to [create a free JIRA 88 | account](https://openedx.atlassian.net/admin/users/sign-up)). 89 | 90 | #### Bugs and Issues 91 | If you notice an issue or a bug with the Pattern Library, we would love ot hear 92 | about it! Follow the above instructions on logging a new edX Pattern Library JIRA issue and then assign the issue type of "Bug" to your issue. An edX UX & Front End Development Team member will then take it from there and triage your bug. 93 | 94 | Conversely, if you want to help resolve any known [bugs/issues](https://openedx.atlassian.net/projects/UXPL/issues), which are tracked in JIRA, you can [create a free JIRA account](https://openedx.atlassian.net/admin/users/sign-up) and then comment on the ticket to indicate that you are working on it. Don't hesitate to ask clarifying questions on the ticket as needed, too, if anything is unclear. 95 | 96 | #### Submitting Code 97 | For code contributions, please open up a pull request! PRs will get OSPR tickets assigned to them, as mentioned in the above contributing guidelines. 98 | 99 | #### Approval by UX and Front End Team Members 100 | An edX UX or Front End Development Team member will be working with you on any pull requests you make. 101 | They will be evaulating your pull request from a design point of view as well as from a Front End Development perspective. Other team members as well as UI/Front End Developers may also lend a hand. 102 | 103 | #### Tests 104 | The edX Pattern Library source code doesn't currently leverage the Open edX test 105 | suite nor are there any automated tests configured for this codebase currently. 106 | 107 | #### Front End Development Standards 108 | In addition to the general contributor documentation, any contributions should 109 | meet specific Front End Development requirements, including the guidelines and 110 | principles listed in: 111 | 112 | * [General Front End Styleguide](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-General) 113 | * [Accessibility Styleguide](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Accessibility) 114 | * [HTML Styleguide](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-HTML) 115 | * [Forms Styleguide](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Forms) 116 | * [Sass & CSS Styleguide](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS), including [right-to-left support](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS#right-to-left-rtl-support) 117 | * [JavaScript Styleguide](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-JavaScript) 118 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # edX Pattern Library Documentation Site: Overall Config 2 | 3 | title: edX Pattern Library 4 | short_title: Pattern Library 5 | 6 | tagline: The Visual, UI, and Front End styleguide for edX's applications 7 | 8 | author: 9 | name: edX Pattern Library Team 10 | url: http://www.edx.org 11 | email: pattern-library@edx.org 12 | 13 | url: http://ux.edx.org 14 | url_example: examples/ 15 | url_dummy: http://ux.edx.org 16 | 17 | logo: /public/images/edx-logo.svg 18 | 19 | source: ./pldoc 20 | 21 | baseurl: / 22 | permalink: /:categories/:title/ 23 | 24 | source: ./pldoc 25 | 26 | exclude: [ 27 | "node_modules", 28 | "gulp", 29 | "gulpfile.js", 30 | "package.json", 31 | "bower.json", 32 | "pldoc", 33 | "pattern-library", 34 | "static" 35 | ] 36 | 37 | collections: 38 | components: 39 | output: true 40 | design_elements: 41 | output: true 42 | 43 | highlighter: rouge 44 | 45 | gems: 46 | - jekyll-seo-tag 47 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "edx-pattern-library", 3 | "version": "0.18.1", 4 | "authors": [ 5 | "edX Pattern Library Team " 6 | ], 7 | "description": "The (working) Visual, UI, and Front End Styleguide for edX Apps", 8 | "repository": { 9 | "type": "git", 10 | "url": "git://github.com/edx/ux-pattern-library.git" 11 | }, 12 | "keywords": [ 13 | "atomic design", 14 | "edx", 15 | "open edx", 16 | "patterns", 17 | "pattern library", 18 | "style guide", 19 | "UI starter" 20 | ], 21 | "main": "_variables.scss", 22 | "license": "Apache-2.0", 23 | "ignore": [ 24 | "**/.*", 25 | "404.html", 26 | "_config.yml", 27 | "_components", 28 | "_data", 29 | "_design_elements", 30 | "_includes", 31 | "_layouts", 32 | "_posts", 33 | "_site", 34 | "pldoc", 35 | "about.md", 36 | "bower_components", 37 | "CNAME", 38 | "demo", 39 | "examples", 40 | "favicon.ico", 41 | "gulp", 42 | "gulpfile.js", 43 | "index.html", 44 | "node_modules", 45 | "package.json", 46 | "public" 47 | ], 48 | "devDependencies": { 49 | "jquery": "~1.11.1", 50 | "requirejs-plugins": "~1.0.3" 51 | }, 52 | "dependencies": { 53 | "bi-app-sass": "~1.1.0", 54 | "bourbon": "~4.2.3", 55 | "breakpoint-sass": "~2.6.1", 56 | "font-awesome": "^4.6.3", 57 | "requirejs": "~2.1.15" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /gulp/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-console": "off", 4 | "strict": ["error", "global"] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /gulp/tasks/build-production.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | 5 | gulp.task('build-production', [ 6 | 'jekyll-build', 7 | 'webpack-prod' 8 | ]); 9 | -------------------------------------------------------------------------------- /gulp/tasks/clean.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | del = require('del'); 5 | 6 | gulp.task('clean', function() { 7 | return del([ 8 | './ploc/public', 9 | './_site', 10 | './_preview_site' 11 | ]); 12 | }); 13 | -------------------------------------------------------------------------------- /gulp/tasks/default.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | 5 | gulp.task('default', [ 6 | 'jekyll-serve', 7 | 'webpack-dev' 8 | ]); 9 | -------------------------------------------------------------------------------- /gulp/tasks/doc-publish.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | ghPages = require('gulp-gh-pages'); 5 | 6 | gulp.task('doc-publish', ['build-production'], function() { 7 | return gulp.src('./_site/**/*') 8 | .pipe(ghPages()); 9 | }); 10 | -------------------------------------------------------------------------------- /gulp/tasks/jekyll.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | childProcess = require('child_process'); 5 | 6 | gulp.task('jekyll-serve', function() { 7 | return childProcess.spawn('jekyll', ['serve', '--incremental'], {stdio: 'inherit'}); 8 | }); 9 | 10 | gulp.task('jekyll-build', function() { 11 | return childProcess.spawn('jekyll', ['build'], {stdio: 'inherit'}); 12 | }); 13 | -------------------------------------------------------------------------------- /gulp/tasks/lint.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | shell = require('gulp-shell'); 5 | 6 | gulp.task('lint', shell.task('eslint .')); 7 | -------------------------------------------------------------------------------- /gulp/tasks/preview.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Gulp tasks for managing an S3-based preview of the Pattern Library documentation. 3 | * 4 | * The tasks are as follows: 5 | * - preview: builds a preview site and uploads it to S3 6 | * - build-preview: build the preview site 7 | * - upload-preview: upload the preview site to S3 8 | * - show-preview: show the preview site in the default browser 9 | * - remove-preview: removes the preview site from S3 10 | * 11 | * Note: please set the environment variable S3_PREVIEW_DOMAIN to the domain 12 | * used to host your S3 preview. 13 | */ 14 | 15 | 'use strict'; 16 | 17 | var gulp = require('gulp'), 18 | childProcess = require('child_process'), 19 | gitUtils = require('../util/gitUtils'), 20 | previewConfigFile = '_tmp_preview_config.yml', 21 | previewSiteDir = '_preview_site', 22 | previewDomain = process.env.S3_PREVIEW_DOMAIN; 23 | 24 | gulp.task('preview', [ 25 | 'build-preview', 26 | 'upload-preview', 27 | 'show-preview' 28 | ]); 29 | 30 | gulp.task('build-preview', ['webpack-public-path-git-branch'], function() { 31 | var branch = gitUtils.currentBranch(), 32 | previewBaseUrl = '/' + branch + '/'; 33 | 34 | // Create a temporary Jekyll configuration file which specifies the base URL for the preview site 35 | childProcess.execSync('echo \'baseurl: ' + previewBaseUrl + '\' > ' + previewConfigFile); 36 | 37 | // Generate the preview version of the site 38 | console.log('Generating preview for branch ' + branch); 39 | childProcess.execSync( 40 | 'jekyll build --config _config.yml,' + previewConfigFile + ' --destination ' + previewSiteDir 41 | ); 42 | 43 | // Remove the configuration file since it is no longer needed 44 | childProcess.execSync('rm ' + previewConfigFile); 45 | }); 46 | 47 | gulp.task('upload-preview', ['build-preview'], function() { 48 | var branch = gitUtils.currentBranch(); 49 | if (previewDomain) { 50 | childProcess.execSync( 51 | 'aws s3 sync ' + previewSiteDir + ' s3://' + previewDomain + '/' + branch 52 | ); 53 | console.log('Preview site ready at http://' + previewDomain + '/' + branch); 54 | } else { 55 | console.error( 56 | 'No preview domain specified. Please export environment variable S3_PREVIEW_DOMAIN and try again.' 57 | ); 58 | } 59 | }); 60 | 61 | gulp.task('show-preview', ['upload-preview'], function() { 62 | var branch = gitUtils.currentBranch(); 63 | childProcess.execSync( 64 | 'open http://' + previewDomain + '/' + branch 65 | ); 66 | }); 67 | 68 | gulp.task('remove-preview', function() { 69 | var branch = gitUtils.currentBranch(); 70 | childProcess.execSync( 71 | 'aws s3 rm --recursive s3://' + previewDomain + '/' + branch 72 | ); 73 | console.log('Removed preview for branch ' + branch); 74 | }); 75 | -------------------------------------------------------------------------------- /gulp/tasks/webpack.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | gulpUtil = require('gulp-util'), 5 | webpack = require('webpack'), 6 | WebpackDevServer = require('webpack-dev-server'), 7 | gitUtils = require('../util/gitUtils'), 8 | wpConfig = require('../../webpack.config.js'), 9 | wpConfigFactory = wpConfig.configFactory, 10 | wpConfigDevServer = wpConfig.devServerConfig; 11 | 12 | /** 13 | * Builds a production bundle of the pattern library doc into /pldoc/public. 14 | * Runs like NODE_ENV = 'production' so that webpack builds a version where CSS is preloaded and JS is uglified. 15 | * For hot module reload and live browser updates (ie, a development site), use the webpackdev-server task below 16 | */ 17 | gulp.task('webpack-prod', ['clean'], function(callback) { 18 | webpack(wpConfigFactory({debug: false}), function(err, stats) { 19 | if (err) { 20 | throw new gulpUtil.PluginError('webpack', err); 21 | } else { 22 | gulpUtil.log('[webpack]', stats.toString({ 23 | colors: true 24 | })); 25 | } 26 | callback(); 27 | }); 28 | }); 29 | 30 | /* 31 | * Builds the pattern library documentation using webpack and serves it with webpack-dev-server. 32 | * Reloads modules (including CSS) using Webpack Hot Module Reload, at the cost of flashes of unstyled content 33 | * Serves from memory, not /pldoc/public, so clean that out first to assets from prod build don't turn up in dev 34 | * Also enables sourcemaps. Serves with the help of proxying to Jekyll's server - this won't work on its own. 35 | */ 36 | gulp.task('webpack-dev', ['clean'], function() { 37 | var compiler = webpack(wpConfigFactory({debug: true})); 38 | 39 | new WebpackDevServer(compiler, wpConfigDevServer).listen(8080, 'localhost', function(err) { 40 | if (err) { 41 | throw new gulpUtil.PluginError('webpack-dev-server', err); 42 | } else { 43 | gulpUtil.log( 44 | '[webpack-dev-server]', 45 | 'Open http://localhost:8080. Modules (CSS and JS) will be live updated as you save them.' 46 | ); 47 | } 48 | }); 49 | }); 50 | 51 | /* 52 | * Do a webpack build with a custom publicPath. 53 | * This is necessary because preview sites are served from subdirectories. 54 | * It's a little messy but the alternative is a lot of DNS or adding a lot of complexity to the webpack config. 55 | */ 56 | gulp.task('webpack-public-path-git-branch', ['clean'], function(callback) { 57 | var branch = gitUtils.currentBranch(), 58 | previewBaseUrl = '/' + branch + '/'; 59 | 60 | webpack(wpConfigFactory({ 61 | debug: false, 62 | publicPath: previewBaseUrl 63 | }), function(err, stats) { 64 | if (err) { 65 | throw new gulpUtil.PluginError('webpack', err); 66 | } else { 67 | gulpUtil.log('[webpack]', stats.toString({colors: true})); 68 | } 69 | callback(); 70 | }); 71 | }); 72 | -------------------------------------------------------------------------------- /gulp/util/bundleLogger.js: -------------------------------------------------------------------------------- 1 | // bundleLogger 2 | 3 | // Provides gulp style logs to the bundle method in browserify.js 4 | 5 | 'use strict'; 6 | 7 | var gutil = require('gulp-util'); 8 | var prettyHrtime = require('pretty-hrtime'); 9 | var startTime; 10 | 11 | module.exports = { 12 | start: function(filepath) { 13 | startTime = process.hrtime(); 14 | gutil.log('Bundling', gutil.colors.green(filepath) + '...'); 15 | }, 16 | 17 | watch: function(bundleName) { 18 | gutil.log('Watching files required by', gutil.colors.yellow(bundleName)); 19 | }, 20 | 21 | end: function(filepath) { 22 | var taskTime = process.hrtime(startTime); 23 | var prettyTime = prettyHrtime(taskTime); 24 | gutil.log('Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime)); 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /gulp/util/gitUtils.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var childProcess = require('child_process'); 4 | var gitBranchCommand = 'git rev-parse --abbrev-ref HEAD'; 5 | 6 | module.exports = { 7 | /** 8 | * Returns the current Git branch for the current directory. 9 | */ 10 | currentBranch: function() { 11 | var branch = childProcess.execSync(gitBranchCommand); 12 | return branch.toString().trim(); 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /gulp/util/handleErrors.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var notify = require('gulp-notify'); 4 | 5 | module.exports = function() { 6 | var args = Array.prototype.slice.call(arguments); 7 | 8 | // Send error to notification center with gulp-notify 9 | notify.onError({ 10 | title: 'Compile Error', 11 | message: '<%= error %>' 12 | }).apply(this, args); 13 | 14 | // Keep gulp from hanging on this task 15 | this.emit('end'); 16 | }; 17 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // gulpfile.js 2 | 3 | // Rather than manage one giant configuration file responsible 4 | // for creating multiple tasks, each task has been broken out into 5 | // its own file in gulp/tasks. Any files in that directory get 6 | // automatically required below. 7 | 8 | // To add a new task, simply add a new task file that directory. 9 | // gulp/tasks/default.js specifies the default set of tasks to run 10 | // when you run `gulp`. 11 | 12 | var requireDir = require('require-dir'); 13 | 14 | // Require all tasks in gulp/tasks, including subfolders 15 | requireDir('./gulp/tasks', {recurse: true}); 16 | -------------------------------------------------------------------------------- /openedx.yaml: -------------------------------------------------------------------------------- 1 | # This file describes this Open edX repo, as described in OEP-2: 2 | # http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification 3 | 4 | nick: uxpl 5 | oeps: {} 6 | owner: edx/edx-ux-team 7 | track-pulls: true 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "edx-pattern-library", 3 | "version": "0.18.1", 4 | "author": "edX Pattern Library Team ", 5 | "license": "Apache-2.0", 6 | "description": "The (working) Visual, UI, and Front End Styleguide for edX Apps", 7 | "keywords": [ 8 | "atomic design", 9 | "edx", 10 | "open edx", 11 | "patterns", 12 | "pattern library", 13 | "UI starter" 14 | ], 15 | "homepage": "http://ux.edx.org", 16 | "main": "_settings.scss", 17 | "repository": { 18 | "type": "git", 19 | "url": "git://github.com/edx/ux-pattern-library.git" 20 | }, 21 | "dependencies": { 22 | "bi-app-sass": "^1.1.0", 23 | "bourbon": "~4.2.7", 24 | "breakpoint-sass": "^2.6.1", 25 | "font-awesome": "^4.6.3", 26 | "jquery": "^3.5.0", 27 | "requirejs": "^2.1.22", 28 | "requirejs-plugins": "^1.0.2" 29 | }, 30 | "peerDependencies": { 31 | "font-awesome": "^4.6.3" 32 | }, 33 | "devDependencies": { 34 | "backbone": "*", 35 | "css-loader": "~0.23.1", 36 | "del": "*", 37 | "edx-ui-toolkit": "git+https://github.com/openedx/edx-ui-toolkit.git#v1.6.0", 38 | "eslint": "~8.39.0", 39 | "eslint-config-edx": "~4.0.4", 40 | "extract-text-webpack-plugin": "^1.0.1", 41 | "file-loader": "^0.9.0", 42 | "gulp": "*", 43 | "gulp-gh-pages": "~0.5.4", 44 | "gulp-notify": "*", 45 | "gulp-shell": "^0.5.2", 46 | "gulp-util": "*", 47 | "node-sass": "^3.10.0", 48 | "pretty-hrtime": "^1.0.2", 49 | "require-dir": "*", 50 | "sass-loader": "~4.0.2", 51 | "style-loader": "^0.13.1", 52 | "text-loader": "0.0.1", 53 | "url-loader": "^4.1.1", 54 | "webpack": "^1.13.2", 55 | "webpack-dev-server": "^1.16.2" 56 | }, 57 | "scripts": { 58 | "start": "gulp", 59 | "lint": "eslint ." 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2 -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2 -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2 -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2 -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2 -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2 -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2 -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff -------------------------------------------------------------------------------- /pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2 -------------------------------------------------------------------------------- /pattern-library/html/boilerplate-blank-RTL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {page/view's title} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 |
48 | 49 | 50 | 51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /pattern-library/html/boilerplate-blank.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {page/view's title} 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 38 | 39 | 40 |
41 | 42 |
43 | 44 | 45 |
46 | 47 | 48 | 49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /pattern-library/html/boilerplate-header+footer+content+nav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {page/view's title} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 41 | 42 | 43 |
44 | 45 | 49 |
50 |
51 | 52 |

53 | 58 |

59 | 60 | 61 | 65 |
66 | 72 |
73 |
74 |
75 | 76 | 79 |
80 | 88 |
89 | 90 | 94 |
95 |
96 | 97 |
98 | 99 | 102 |
103 | 104 | 108 |
109 |
110 | 111 |
112 |
113 |
114 | 115 | 116 |
117 | 118 | 119 | 120 |
121 | 122 | 123 | -------------------------------------------------------------------------------- /pattern-library/html/boilerplate-header+footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | {page/view's title} 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 39 | 40 | 41 |
42 | 43 | 47 |
48 |
49 | 50 |

51 | 56 |

57 | 58 |
59 |
60 | 61 |
62 | 68 |
69 | 70 | 74 |
75 | 76 |
77 | 78 | 82 |
83 |
84 | 85 |
86 |
87 |
88 | 89 | 90 |
91 | 92 | 93 | 94 |
95 | 96 | 97 | -------------------------------------------------------------------------------- /pattern-library/js/select-replace.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery' 3 | ], function($) { 4 | 'use strict'; 5 | /* 6 | * Select menu replacement 7 | * Handles functionality for the replacement select menus, which 8 | * allows us to style them to our liking. Accessibility is main- 9 | * tained via use of the default select control. The replacement 10 | * control is not visible to screen readers. 11 | * 12 | * Choosing an option in the replacement menu also updates the 13 | * default select menu thus maintaining accessibility. 14 | */ 15 | var CustomSelectReplacement = { 16 | 17 | vars: { 18 | replaced: $('.replace-select'), 19 | replacedClass: 'is-replaced is-transparent', 20 | customClass: 'wrapper-custom-select', 21 | wrapperClass: 'wrapper-replace-select', 22 | valueClass: 'replace-value', 23 | iconClass: 'fa-caret-down', 24 | hoverClass: 'is-hover' 25 | }, 26 | 27 | init: function() { 28 | this.replaceFoundSelects(); 29 | this.listenForSelectClick(); 30 | this.listenForSelectEvents(); 31 | }, 32 | 33 | replaceFoundSelects: function() { 34 | var variables = this.vars; 35 | 36 | if (variables.replaced.length) { 37 | variables.replaced.each(function(index, el) { 38 | var $el = $(el), 39 | replaced = $el.clone(), 40 | statuses = [], 41 | disabled; 42 | 43 | if ($el.hasClass('has-success')) { 44 | statuses.push('has-success'); 45 | } 46 | 47 | if ($el.hasClass('has-error')) { 48 | statuses.push('has-error'); 49 | } 50 | 51 | if ($el.is(':disabled')) { 52 | statuses.push('is-disabled'); 53 | disabled = 'disabled'; 54 | } 55 | 56 | $el.addClass(variables.replacedClass); 57 | 58 | /* eslint-disable indent, max-len */ 59 | $el.replaceWith([ 60 | '
', 61 | '', 62 | '', 67 | '
' 68 | ].join('')); 69 | /* eslint-enable indent, max-len */ 70 | }); 71 | } 72 | }, 73 | 74 | setInitialText: function(el) { 75 | return el.find('option:first').text(); 76 | }, 77 | 78 | listenForSelectClick: function() { 79 | $('.field').on('change', this.vars.replaced, function(event) { 80 | CustomSelectReplacement.updateReplacedOption($(event.target)); 81 | }); 82 | }, 83 | 84 | updateReplacedOption: function(el) { 85 | var val = el.val(), 86 | wrapper = el.parent('.' + this.vars.wrapperClass), 87 | text = wrapper.find('.' + this.vars.valueClass); 88 | 89 | text.text(val); 90 | }, 91 | 92 | listenForSelectEvents: function() { 93 | var variables = this.vars; 94 | 95 | variables.replaced.on('hover mouseover mouseenter', function(event) { 96 | var $el = $(event.target); 97 | 98 | $el.next(variables.customWrapper) 99 | .addClass(variables.hoverClass); 100 | }).on('blur mouseout mouseleave', function(event) { 101 | var $el = $(event.target); 102 | 103 | $el.next(variables.customWrapper) 104 | .removeClass(variables.hoverClass); 105 | }); 106 | } 107 | 108 | }; 109 | 110 | CustomSelectReplacement.init(); 111 | }); 112 | -------------------------------------------------------------------------------- /pattern-library/sass/_edx-pattern-library.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library : Complete Import 3 | 4 | // About: Import all dependencies and current pattern styling of the edX Pattern Library 5 | 6 | // ------------------------------ 7 | // #CORE 8 | // ------------------------------ 9 | @import 'global/core'; 10 | 11 | 12 | // ------------------------------ 13 | // #PATTERNS 14 | // ------------------------------ 15 | @import 'patterns/buttons'; 16 | @import 'patterns/headings'; 17 | @import 'patterns/copy'; 18 | @import 'patterns/lists'; 19 | @import 'patterns/forms'; 20 | @import 'patterns/grid'; 21 | @import 'patterns/icons'; 22 | @import 'patterns/layouts'; 23 | @import 'patterns/depth'; 24 | @import 'patterns/tables'; 25 | @import 'patterns/alerts'; 26 | @import 'patterns/dropdown-menu'; 27 | @import 'patterns/breadcrumbs'; 28 | -------------------------------------------------------------------------------- /pattern-library/sass/edx-pattern-library-ltr.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Static Style Compile - LTR 3 | 4 | // About: Sass compile for the edX Pattern Library's static CSS, for use in left-to-right styling. 5 | 6 | 7 | // ------------------------------ 8 | // #BUILD 9 | // ------------------------------ 10 | @import 'global/lib'; // third-party libraries 11 | @import 'global/ltr'; // LTR-specifc settings and utilities 12 | @import 'edx-pattern-library'; // shared compile/build order for both LTR and RTL UI 13 | -------------------------------------------------------------------------------- /pattern-library/sass/edx-pattern-library-rtl.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Static Style Compile - RTL 3 | 4 | // About: Sass compile for the edX Pattern Library's static CSS, for use in right-to-left styling. 5 | 6 | 7 | // ------------------------------ 8 | // #BUILD 9 | // ------------------------------ 10 | @import 'global/lib'; // third-party libraries 11 | @import 'global/rtl'; // LTR-specifc settings and utilities 12 | @import 'edx-pattern-library'; // shared compile/build order for both LTR and RTL UI 13 | -------------------------------------------------------------------------------- /pattern-library/sass/global/_core.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Global Utilities 3 | 4 | // About: Collection of global settings and utilities. 5 | 6 | @import 'functions'; 7 | @import 'settings'; 8 | @import 'mixins'; 9 | @import 'helpers'; 10 | @import '../normalize'; 11 | @import 'reset'; 12 | -------------------------------------------------------------------------------- /pattern-library/sass/global/_functions.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Functions 3 | 4 | // About: Sass partial for defining Sass helper functions. 5 | 6 | // #FUNCTIONS 7 | 8 | 9 | // ---------------------------- 10 | // FUNCTIONS 11 | // ---------------------------- 12 | // get colors from defined palettes map values 13 | @function palette($palette, $tone: 'base') { 14 | @return map-get(map-get($palettes, $palette), $tone); 15 | } 16 | 17 | // get font sizes from defined map values 18 | @function font-size($key) { 19 | @if map-has-key($font-sizes, $key) { 20 | @return rem(map-get($font-sizes, $key)); 21 | } 22 | 23 | @warn "Unknown `#{$key}` in $font-sizes."; 24 | @return null; 25 | } 26 | 27 | // get line-heights from defined map values 28 | @function line-height($key) { 29 | @if map-has-key($line-heights, $key) { 30 | @return map-get($line-heights, $key); 31 | } 32 | 33 | @warn "Unknown `#{$key}` in $line-heights."; 34 | @return null; 35 | } 36 | 37 | // get font sizes from defined map values 38 | @function font-weight($key) { 39 | @if map-has-key($font-weights, $key) { 40 | @return map-get($font-weights, $key); 41 | } 42 | 43 | @warn "Unknown `#{$key}` in $font-weights."; 44 | @return null; 45 | } 46 | 47 | // get letter spacing from defined map values 48 | @function letter-spacing($key) { 49 | @if map-has-key($letter-spacing, $key) { 50 | @return rem(map-get($letter-spacing, $key)); 51 | } 52 | 53 | @warn "Unknown `#{$key}` in $letter-spacing."; 54 | @return null; 55 | } 56 | 57 | // get z-indexes from defined map values 58 | @function z-index($key) { 59 | @if map-has-key($z-depths, $key) { 60 | @return map-get($z-depths, $key); 61 | } 62 | 63 | @warn "Unknown `#{$key}` in $z-depths."; 64 | @return null; 65 | } 66 | 67 | // get timing from defined map values 68 | @function timing($key) { 69 | @if map-has-key($timing, $key) { 70 | @return map-get($timing, $key); 71 | } 72 | 73 | @warn "Unknown `#{$key}` in $z-depths."; 74 | @return null; 75 | } 76 | 77 | // get vertical spacings from defined map values 78 | @function spacing-vertical($key) { 79 | @if map-has-key($spacing-vertical, $key) { 80 | @return rem(map-get($spacing-vertical, $key)); 81 | } 82 | 83 | @warn "Unknown `#{$key}` in $spacing-vertical."; 84 | @return null; 85 | } 86 | 87 | // get horizontal spacings from defined map values 88 | @function spacing-horizontal($key) { 89 | @if map-has-key($spacing-horizontal, $key) { 90 | @return rem(map-get($spacing-horizontal, $key)); 91 | } 92 | 93 | @warn "Unknown `#{$key}` in $spacing-horizontal."; 94 | @return null; 95 | } 96 | 97 | // get input heights from defined map values 98 | @function input-height($key) { 99 | @if map-has-key($input-height, $key) { 100 | @return (map-get($input-height, $key) + rem); 101 | } 102 | 103 | @warn "Unknown `#{$key}` in $input-height."; 104 | @return null; 105 | } 106 | 107 | // get input widths from defined map values 108 | @function input-width($key) { 109 | @if map-has-key($input-width, $key) { 110 | @if ($key == 'block') { 111 | @return 100%; 112 | } @else { 113 | @return rem(map-get($input-width, $key)); 114 | } 115 | } 116 | 117 | @warn "Unknown `#{$key}` in $input-width."; 118 | @return null; 119 | } 120 | -------------------------------------------------------------------------------- /pattern-library/sass/global/_helpers.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Helpers 3 | 4 | // About: Sass partial for defining extends and re-usable patterns at the Sass compile level. 5 | 6 | // #UTILITIES 7 | // #RESETS 8 | 9 | // ---------------------------- 10 | // #UTILITIES 11 | // ---------------------------- 12 | // visual disabled 13 | %state-disabled { 14 | pointer-events: none; 15 | outline: none; 16 | cursor: not-allowed; 17 | } 18 | 19 | // presentational wrapper 20 | %wrapper { 21 | @include clearfix(); 22 | width: 100%; 23 | } 24 | 25 | // remove spacing from first/last children 26 | %clear-first-child { 27 | 28 | &:first-child { 29 | margin-top: 0; 30 | padding-top: 0; 31 | border-top: none; 32 | } 33 | } 34 | 35 | %clear-last-child { 36 | 37 | &:last-child { 38 | margin-bottom: 0; 39 | padding-bottom: 0; 40 | border-bottom: none; 41 | } 42 | } 43 | 44 | %text-wrap { 45 | @include word-wrap(break-word); 46 | @include hyphens(auto); 47 | } 48 | 49 | %text-ellipsis { 50 | overflow: hidden; 51 | white-space: nowrap; 52 | text-overflow: ellipsis; 53 | } 54 | 55 | // accessibility 56 | %a11y-hide { 57 | // clip has been deprecated but is still supported 58 | clip: rect(1px 1px 1px 1px); 59 | clip: rect(1px, 1px, 1px, 1px); 60 | position: absolute; 61 | margin: -1px; 62 | height: 1px; 63 | width: 1px; 64 | border: 0; 65 | padding: 0; 66 | overflow: hidden; 67 | // ensure there are spaces in sr text 68 | word-wrap: normal; 69 | } 70 | 71 | %a11y-hide-image-text { 72 | overflow: hidden; 73 | text-indent: 100%; 74 | white-space: nowrap; 75 | } 76 | 77 | %a11y-ensure-contrast { 78 | background: $black !important; // a11y: Ensuring that color contrast is high for legibility 79 | color: $white !important; // a11y: Ensuring that color contrast is high for legibility 80 | } 81 | 82 | // ---------------------------- 83 | // #UTILITIES 84 | // ---------------------------- 85 | // reset of lists 86 | %reset-lists { 87 | margin: 0; 88 | padding: 0; 89 | list-style: none; 90 | text-indent: 0; 91 | } 92 | 93 | %list-unstyled { 94 | @extend %reset-lists; 95 | 96 | li, 97 | dt, 98 | dd { 99 | margin: 0; 100 | padding: 0; 101 | } 102 | } 103 | 104 | %list-inline { 105 | @extend %list-unstyled; 106 | 107 | li, 108 | dt, 109 | dd { 110 | display: inline-block; 111 | } 112 | } 113 | 114 | // reset of code 115 | %reset-code { 116 | font-family: $font-family-monospace; 117 | font-size: font-size(base); 118 | line-height: line-height(x-large); 119 | color: $text-base-color; 120 | } 121 | 122 | // links: base 123 | %link { 124 | @include transition( 125 | color timing(xx-fast) ease-in-out 0s 126 | ); 127 | 128 | color: $link-color; 129 | text-decoration: none; 130 | 131 | // STATE: hover, active, focus 132 | &:hover, 133 | &:active, 134 | &:focus { 135 | color: $link-focus-color; 136 | text-decoration: underline; 137 | } 138 | 139 | // STATE: is disabled 140 | &:disabled, 141 | &.is-disabled { 142 | display: none; 143 | color: palette(grayscale, base); 144 | } 145 | 146 | // STATE: is pressed or active 147 | &:active, 148 | &.is-pressed, 149 | &.is-active { 150 | color: $link-focus-color; 151 | } 152 | } 153 | 154 | // links: text-based 155 | %link-text { 156 | @extend %link; 157 | @include transition( 158 | box-shadow timing(xx-fast) ease-in-out 0s 159 | ); 160 | 161 | box-shadow: 0 1px 0 0 $transparent; 162 | } 163 | 164 | // align text 165 | %text-left { 166 | @include text-align(left); 167 | } 168 | 169 | %text-center { 170 | @include text-align(center); 171 | } 172 | 173 | %text-right { 174 | @include text-align(right); 175 | } 176 | -------------------------------------------------------------------------------- /pattern-library/sass/global/_lib.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Third Party Libraries 3 | 4 | // About: third party libraries and dependencies import 5 | 6 | @import 'bourbon/app/assets/stylesheets/bourbon'; 7 | @import 'breakpoint-sass/stylesheets/breakpoint'; 8 | -------------------------------------------------------------------------------- /pattern-library/sass/global/_ltr.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: LTR directional settings & support 3 | 4 | // About: Sass partial for defining settings and utilities for LTR-centric layouts. 5 | 6 | // #SETTINGS 7 | // #LIB 8 | 9 | 10 | // ---------------------------- 11 | // #SETTINGS 12 | // ---------------------------- 13 | $layout-direction: ltr; 14 | 15 | 16 | // ---------------------------- 17 | // #LIB 18 | // ---------------------------- 19 | @import 'bi-app-sass/bi-app/bi-app-ltr'; 20 | -------------------------------------------------------------------------------- /pattern-library/sass/global/_mixins.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Mixins 3 | 4 | // About: Sass partial containing mixins and functions for use within the application. 5 | 6 | // #MIXINS 7 | 8 | 9 | // ------------------------------ 10 | // #MIXINS 11 | // ------------------------------ 12 | @mixin font-smoothing($value: on) { 13 | @if $value == on { 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | @else { 18 | -webkit-font-smoothing: subpixel-antialiased; 19 | -moz-osx-font-smoothing: auto; 20 | } 21 | } 22 | 23 | // form fields 24 | // these should really be extends, but for some reason they weren't working. 25 | // there's some sort of limition on sass compilation when re-using extends with nested psueos 26 | // https://github.com/sass/libsass/issues/146 has more information 27 | @mixin input-track($is-interactive: true) { 28 | @include transition(all timing(xx-fast) ease-in-out 0s); 29 | @include transform-origin(center center); 30 | width: 100%; 31 | height: rem($baseline/2); 32 | border: 0; 33 | border-radius: 3px; 34 | background: palette(grayscale, back); 35 | @if $is-interactive == true { 36 | cursor: pointer; 37 | } 38 | } 39 | 40 | @mixin input-track-hover { 41 | background: palette(primary, back); 42 | } 43 | 44 | @mixin input-thumb { 45 | @include size(rem($baseline/2)); 46 | @include transition(all timing(xx-fast) ease-in-out 0s); 47 | border: 0; 48 | border-radius: 50%; 49 | background: palette(primary, base); 50 | -webkit-appearance: none; 51 | } 52 | 53 | @mixin input-thumb-hover { 54 | @include size(rem($baseline)); 55 | margin-top: -(rem($baseline/3.25)); 56 | background: palette(primary, accent); 57 | } 58 | 59 | @mixin input-progress-complete { 60 | @include transition(all timing(xx-fast) ease-in-out 0s); 61 | @include input-track-hover; 62 | border-radius: 3px; 63 | } 64 | 65 | @mixin input-radio { 66 | @include transition(all timing(xx-fast) ease-in-out 0s); 67 | @include margin-right(spacing-horizontal(small)); 68 | border: 1px solid palette(primary, accent); 69 | border-radius: 50%; 70 | background: $white; 71 | box-shadow: inset 0 0 0 3px palette(primary, x-back); 72 | } 73 | 74 | @mixin input-radio-checked { 75 | border-color: palette(primary, base); 76 | background: $white; 77 | box-shadow: inset 0 0 0 6px palette(primary, base); 78 | } 79 | 80 | @mixin input-checkbox { 81 | @include transition(all timing(xx-fast) ease-in-out 0s); 82 | @include margin-right(spacing-horizontal(small)); 83 | border: 1px solid palette(primary, accent); 84 | background: $white; 85 | box-shadow: inset 0 0 0 3px palette(primary, x-back); 86 | } 87 | 88 | @mixin input-checkbox-checked { 89 | border-color: palette(primary, base); 90 | background: $white; 91 | box-shadow: inset 0 0 0 6px palette(primary, base); 92 | } 93 | 94 | @mixin input-radio-disabled { 95 | border: 1px solid palette(grayscale, back); 96 | border-radius: 50%; 97 | background: $white; 98 | box-shadow: inset 0 0 0 3px palette(grayscale, x-back); 99 | cursor: not-allowed; 100 | } 101 | 102 | @mixin input-checkbox-disabled { 103 | border: 1px solid palette(grayscale, back); 104 | background: $white; 105 | box-shadow: inset 0 0 0 3px palette(grayscale, x-back); 106 | cursor: not-allowed; 107 | } 108 | -------------------------------------------------------------------------------- /pattern-library/sass/global/_reset.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Reset 3 | 4 | // About: Sass partial for resetting and setting base elements. 5 | 6 | // #GLOBAL: Global overrides and resets 7 | // #BASE: Base overrides and resets 8 | // #FORMS: Form-focused overrides and resets 9 | // #ACTIONS: links, buttons, controls overrides and resets 10 | // #MEDIA: images, video, mutlmedia overrides and resets 11 | // #UTILITIES: layout and use case utilities 12 | // #TYPOGRAPHY: basic typography rules and settings 13 | 14 | 15 | // ---------------------------- 16 | // #GLOBAL 17 | // ---------------------------- 18 | * { 19 | box-sizing: border-box; 20 | } 21 | 22 | 23 | // ---------------------------- 24 | // #BASE 25 | // ---------------------------- 26 | html, body { 27 | 28 | } 29 | 30 | audio, 31 | canvas, 32 | iframe, 33 | img, 34 | svg, 35 | video { 36 | vertical-align: middle; 37 | } 38 | 39 | body { 40 | @include font-smoothing(on); 41 | @extend %depth-0; 42 | color: $text-base-color; 43 | font-size: font-size(base); 44 | font-family: $text-base-font-family; 45 | } 46 | 47 | p, 48 | ol, 49 | ul, 50 | dl { 51 | margin: 0 0 spacing-vertical(small) 0; 52 | } 53 | 54 | 55 | // ---------------------------- 56 | // #FORMS 57 | // ---------------------------- 58 | fieldset { 59 | margin: 0; 60 | border: 0; 61 | padding: 0; 62 | } 63 | 64 | textarea { 65 | resize: vertical; 66 | } 67 | 68 | 69 | // ---------------------------- 70 | // #ACTIONS 71 | // ---------------------------- 72 | a, 73 | .link { 74 | @extend %link; 75 | } 76 | 77 | 78 | // ---------------------------- 79 | // #MEDIA 80 | // ---------------------------- 81 | figure { 82 | display: inline-block; 83 | margin: 0; 84 | padding: 0; 85 | 86 | img { 87 | display: block; 88 | } 89 | 90 | figcaption { 91 | 92 | } 93 | } 94 | 95 | // images 96 | .img, 97 | picture { 98 | max-width: 100%; 99 | margin: 0; 100 | } 101 | 102 | pre { 103 | font-family: $font-family-monospace; 104 | margin: 0; 105 | } 106 | 107 | 108 | // ---------------------------- 109 | // #UTILITIES 110 | // ---------------------------- 111 | .sr-only { 112 | @extend %a11y-hide; 113 | @extend %a11y-ensure-contrast; 114 | 115 | * { 116 | @extend %a11y-ensure-contrast; 117 | } 118 | } 119 | 120 | .bg-replace { 121 | @extend %a11y-hide-image-text; 122 | } 123 | 124 | .is-hidden { 125 | display: none; 126 | } 127 | 128 | [class^='wrapper'] { 129 | @extend %wrapper; 130 | } 131 | 132 | 133 | // ---------------------------- 134 | // #TYPOGRAPHY 135 | // ---------------------------- 136 | // headings 137 | h1, h2, h3, h4, h5, h6 { 138 | @extend %reset-headings; 139 | } 140 | 141 | h1 { 142 | font-size: font-size(xxx-large); 143 | } 144 | 145 | h2 { 146 | font-size: font-size(xx-large); 147 | } 148 | 149 | h3 { 150 | font-size: font-size(x-large); 151 | } 152 | 153 | h4 { 154 | font-size: font-size(large); 155 | } 156 | 157 | h5 { 158 | font-size: font-size(base); 159 | } 160 | 161 | h6 { 162 | font-size: font-size(small); 163 | } 164 | -------------------------------------------------------------------------------- /pattern-library/sass/global/_rtl.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: RTL directional settings & support 3 | 4 | // About: Sass partial for defining settings and utilities for RTL-centric layouts. 5 | 6 | // #SETTINGS 7 | // #LIB 8 | 9 | 10 | // ---------------------------- 11 | // #SETTINGS 12 | // ---------------------------- 13 | $layout-direction: rtl; 14 | 15 | 16 | // ---------------------------- 17 | // #LIB 18 | // ---------------------------- 19 | @import 'bi-app-sass/bi-app/bi-app-rtl'; 20 | -------------------------------------------------------------------------------- /pattern-library/sass/patterns/_alerts.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Utilities - Alerts 3 | // 4 | // About: Contains base styling for alerts. 5 | // ---------------------------- 6 | 7 | // #UTILITIES 8 | // #GENERAL 9 | // #INDIVIDUAL CASES 10 | 11 | // ---------------------------- 12 | // #UTILITIES 13 | // ---------------------------- 14 | @mixin alert($alert-color, $alert-color-glow) { 15 | border: rem(1) solid $alert-color; 16 | box-shadow: inset 0 0 0 rem(4) $alert-color-glow; 17 | 18 | .alert-icon { 19 | color: $white; 20 | background-color: $alert-color; 21 | } 22 | } 23 | 24 | @mixin alert-message($width) { 25 | 26 | @media(min-width: $bp-screen-md) { 27 | @include float(left); 28 | width: $width; 29 | padding: spacing-vertical(small); 30 | padding-top: 0; 31 | padding-bottom: 0; 32 | } 33 | 34 | :last-child { 35 | // keeps the message compact 36 | margin-bottom: 0; 37 | } 38 | } 39 | 40 | // ---------------------------- 41 | // #GENERAL 42 | // ---------------------------- 43 | .alert { 44 | background-color: $white; 45 | border: rem(1) solid palette(grayscale, accent); 46 | padding: spacing-vertical(small) spacing-horizontal(base); 47 | box-shadow: inset 0 0 0 rem(4) palette(grayscale, back); 48 | overflow: auto; 49 | 50 | &.alert-slim { 51 | padding: spacing-vertical(x-small); 52 | 53 | .alert-message { 54 | padding: spacing-vertical(small) spacing-horizontal(base); 55 | font-size: font-size(small); 56 | 57 | .copy { 58 | margin-bottom: 0; 59 | } 60 | } 61 | } 62 | 63 | &.alert-tiny { 64 | padding: spacing-vertical(x-small); 65 | 66 | .alert-message { 67 | padding: spacing-vertical(x-small) spacing-horizontal(small); 68 | font-size: font-size(small); 69 | 70 | .copy { 71 | margin-bottom: 0; 72 | 73 | .icon { 74 | display: inline-block; 75 | margin-right: $baseline; 76 | } 77 | } 78 | } 79 | } 80 | } 81 | 82 | .alert-icon { 83 | // hide icons on small screens 84 | display: none; 85 | 86 | @media(min-width: $bp-screen-md) { 87 | @include float(left); 88 | display: block; 89 | 90 | // create a circle around the icon 91 | border-radius: 50%; 92 | 93 | // create room around the icon for the circle 94 | padding: spacing-vertical(x-small); 95 | } 96 | } 97 | 98 | .alert-message-with-action { 99 | // provide room for the action to be displayed next to the alert message 100 | @include alert-message(70%); 101 | } 102 | 103 | .alert-message { 104 | @include alert-message(90%); 105 | } 106 | 107 | .alert-title { 108 | @extend %hd-5; 109 | @extend %headings-emphasized; 110 | 111 | @media(min-width: $bp-screen-md) { 112 | // shift the section up to make the alert more compact 113 | margin-top: - spacing-vertical(x-small); 114 | } 115 | 116 | } 117 | 118 | .alert-copy { 119 | @extend %copy-base; 120 | 121 | @media(min-width: $bp-screen-md) { 122 | // shift the message down to be in line with the icon 123 | margin-top: spacing-vertical(xx-small); 124 | } 125 | } 126 | 127 | .alert-copy-with-title { 128 | @extend %copy-base; 129 | } 130 | 131 | .alert-action { 132 | width: 100%; 133 | 134 | @media(min-width: $bp-screen-md) { 135 | @include float(right); 136 | width: inherit; 137 | } 138 | } 139 | 140 | // ---------------------------- 141 | // #INDIVIDUAL CASES 142 | // ---------------------------- 143 | 144 | // information-based alert 145 | .alert-information { 146 | @include alert(palette(information, accent), palette(information, back)); 147 | } 148 | 149 | // warning-based alert 150 | .alert-warning { 151 | @include alert(palette(warning, accent), palette(warning, back)); 152 | } 153 | 154 | // error-based alert 155 | .alert-error { 156 | @include alert(palette(error, accent), palette(error, back)); 157 | } 158 | 159 | // success-based alert 160 | .alert-success { 161 | @include alert(palette(success, accent), palette(success, back)); 162 | } 163 | -------------------------------------------------------------------------------- /pattern-library/sass/patterns/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | .breadcrumbs { 2 | font-family: $font-family-sans-serif; 3 | font-size: font-size(small); 4 | line-height: line-height(small); 5 | 6 | .nav-item { 7 | @include margin-left($baseline/4); 8 | display: inline-block; 9 | } 10 | 11 | .fa-angle-right { 12 | @include margin-left($baseline/4); 13 | display: inline-block; 14 | color: palette(grayscale, x-dark); 15 | 16 | @include rtl { 17 | @include transform(rotateY(180deg)); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /pattern-library/sass/patterns/_copy.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Components - Copy 3 | 4 | // About: Contains base styling for copy (general text and type used in content and functionaly). 5 | 6 | // #SETTINGS 7 | // #GLOBAL 8 | // #INDIVIDUAL CASES 9 | // #CANNED 10 | 11 | 12 | // ---------------------------- 13 | // #SETTINGS 14 | // ---------------------------- 15 | 16 | 17 | // ---------------------------- 18 | // #GLOBAL 19 | // ---------------------------- 20 | 21 | // broad stroke extend for emphasized/de-emphasized copy 22 | %copy-emphasized { 23 | color: $text-emphasized-color; 24 | font-weight: $text-emphasized-font-weight; 25 | } 26 | 27 | %copy-de-emphasized { 28 | color: $text-de-emphasized-color; 29 | font-weight: $text-de-emphasized-font-weight; 30 | } 31 | 32 | %copy { 33 | color: $text-base-color; 34 | 35 | &.emphasized { 36 | @extend %copy-emphasized; 37 | } 38 | 39 | &.de-emphasized { 40 | @extend %copy-de-emphasized; 41 | } 42 | 43 | a { 44 | @extend %link-text; 45 | } 46 | } 47 | 48 | 49 | // ---------------------------- 50 | // #INDIVIDUAL COPY CASES 51 | // ---------------------------- 52 | // archetypes 53 | %copy-lead { 54 | @extend %copy; 55 | font-size: font-size(x-large); 56 | line-height: line-height(x-large); 57 | 58 | p, 59 | ol, 60 | ul, 61 | dl { 62 | margin-bottom: spacing-vertical(mid-small); 63 | } 64 | } 65 | 66 | %copy-large { 67 | @extend %copy; 68 | font-size: font-size(large); 69 | line-height: line-height(large); 70 | 71 | p, 72 | ol, 73 | ul, 74 | dl { 75 | margin-bottom: spacing-vertical(small); 76 | } 77 | } 78 | 79 | %copy-base { 80 | @extend %copy; 81 | font-size: font-size(base); 82 | line-height: line-height(large); 83 | 84 | p, 85 | ol, 86 | ul, 87 | dl { 88 | margin-bottom: spacing-vertical(small); 89 | } 90 | } 91 | 92 | %copy-meta { 93 | @extend %copy; 94 | font-size: font-size(small); 95 | line-height: line-height(large); 96 | 97 | p, 98 | ol, 99 | ul, 100 | dl { 101 | margin-bottom: spacing-vertical(small); 102 | } 103 | } 104 | 105 | %copy-micro { 106 | @extend %copy; 107 | font-size: font-size(x-small); 108 | line-height: line-height(x-small); 109 | 110 | p, 111 | ol, 112 | ul, 113 | dl { 114 | margin-bottom: spacing-vertical(small); 115 | } 116 | } 117 | 118 | // ---------------------------- 119 | // #CANNED 120 | // ---------------------------- 121 | .copy-lead { 122 | @extend %copy-lead; 123 | } 124 | 125 | .copy-large { 126 | @extend %copy-large; 127 | } 128 | 129 | .copy-base { 130 | @extend %copy-base; 131 | } 132 | 133 | .copy-meta { 134 | @extend %copy-meta; 135 | } 136 | 137 | .copy-micro { 138 | @extend %copy-micro; 139 | } 140 | -------------------------------------------------------------------------------- /pattern-library/sass/patterns/_depth.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Components - UI Depth 3 | 4 | // About: Contains base settings and options for the preset default Pattern Library UI depth levels. 5 | 6 | // #SETTINGS 7 | // #UTILITY 8 | // #CANNED 9 | 10 | 11 | // ---------------------------- 12 | // #SETTINGS 13 | // ---------------------------- 14 | $depth--3-bg: palette(grayscale, dark) !default; // -3 depth level 15 | $depth--3-color: $white !default; 16 | $depth--2-bg: palette(grayscale, base) !default; // -2 depth level 17 | $depth--2-color: $white !default; 18 | $depth--1-bg: palette(grayscale, back) !default; // -1 depth level 19 | $depth-0-bg: palette(grayscale, x-back) !default; // -0 depth level 20 | $depth-1-bg: $white !default; // +1 depth level 21 | $depth-2-bg: $white !default; // +2 depth level 22 | 23 | 24 | // ---------------------------- 25 | // #UTILITY 26 | // ---------------------------- 27 | %depth--3 { 28 | background: $depth--3-bg; 29 | color: $depth--3-color; 30 | } 31 | 32 | %depth--2 { 33 | background: $depth--2-bg; 34 | color: $depth--2-color; 35 | } 36 | 37 | %depth--1 { 38 | background: $depth--1-bg; 39 | } 40 | 41 | %depth-0 { 42 | background: $depth-0-bg; 43 | } 44 | 45 | %depth-1 { 46 | background: $depth-1-bg; 47 | } 48 | 49 | %depth-2 { 50 | background: $depth-2-bg; 51 | box-shadow: 0 1px 2px 1px $shadow; 52 | } 53 | 54 | // specific UI elements based on depth 55 | %well { 56 | @extend %depth--1; 57 | box-shadow: inset 0 1px 2px 1px $shadow; 58 | padding: spacing-vertical(small) spacing-horizontal(base); 59 | } 60 | 61 | %slat { 62 | @extend %depth-1; 63 | padding: spacing-vertical(small) spacing-horizontal(base); 64 | } 65 | 66 | %card { 67 | @extend %depth-2; 68 | padding: spacing-vertical(small) spacing-horizontal(base); 69 | } 70 | 71 | // zebra striped elements (direct children are affected) 72 | %zebra-stripe { 73 | 74 | > * { 75 | 76 | &:nth-child(odd) { 77 | @extend %depth-0; 78 | } 79 | 80 | &:nth-child(even) { 81 | @extend %depth-1; 82 | } 83 | } 84 | } 85 | 86 | 87 | // ---------------------------- 88 | // #CANNED 89 | // ---------------------------- 90 | 91 | // class-based 92 | .depth--3 { 93 | @extend %depth--3; 94 | } 95 | 96 | .depth--2 { 97 | @extend %depth--2; 98 | } 99 | 100 | .depth--1 { 101 | @extend %depth--1; 102 | } 103 | 104 | .depth-0 { 105 | @extend %depth-0; 106 | } 107 | 108 | .depth-1 { 109 | @extend %depth-1; 110 | } 111 | 112 | .depth-2 { 113 | @extend %depth-2; 114 | } 115 | 116 | // UI specifics 117 | .card { 118 | @extend %card; 119 | } 120 | 121 | .slat { 122 | @extend %slat; 123 | } 124 | 125 | .well { 126 | @extend %well; 127 | } 128 | 129 | .zebra-stripe { 130 | @extend %zebra-stripe; 131 | } 132 | -------------------------------------------------------------------------------- /pattern-library/sass/patterns/_dropdown-menu.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Utilities - Dropdown Menu 3 | // 4 | // About: Contains base styling for alerts. 5 | // ---------------------------- 6 | 7 | // #CONFIG 8 | // #UTILITIES 9 | // #GENERAL 10 | // #INDIVIDUAL CASES 11 | 12 | 13 | // ---------------------------- 14 | // #CONFIG 15 | // ---------------------------- 16 | $dropdown-menu-title-height: 40px !default; 17 | $dropdown-menu-button-height: calc(#{$dropdown-menu-title-height} * 0.75) !default; 18 | $dropdown-menu-button-top-offset: 6px !default; 19 | $dropdown-menu-image-title-spacer: 6px !default; 20 | $dropdown-menu-list-spacing-base: spacing-vertical(x-small) !default; 21 | $dropdown-menu-button-font-size: font-size(small) !default; 22 | $dropdown-menu-list-font-size: font-size(base) !default; 23 | $dropdown-menu-z-index: z-index(very-front) !default; 24 | $dropdown-menu-list-text-align: left !default; 25 | $dropdown-menu-width: 170px !default; 26 | 27 | $dropdown-menu-focus-border-color: palette(primary, light) !default; 28 | $dropdown-link-hover-color: palette(primary, light) !default; 29 | $dropdown-menu-font-color: $black !default; 30 | $dropdown-menu-list-font-color: $black !default; 31 | $dropdown-menu-list-hover-color: palette(primary, base) !default; 32 | $dropdown-menu-background-color: $white !default; 33 | $dropdown-menu-border-color: $gray !default; 34 | $dropdown-menu-list-border-color: palette(grayscale, dark) !default; 35 | $dropdown-menu-list-border-bottom: 1px dotted $dropdown-menu-list-border-color !default; 36 | 37 | // ---------------------------- 38 | // #UTILITIES 39 | // ---------------------------- 40 | 41 | 42 | // ---------------------------- 43 | // #GENERAL 44 | // ---------------------------- 45 | 46 | .dropdown-menu-container { 47 | height: $dropdown-menu-title-height; 48 | position: relative; 49 | display: inline; 50 | 51 | .dropdown-menu { 52 | list-style-type: none; 53 | } 54 | 55 | .menu-title { 56 | font: { 57 | family: $font-family-sans-serif; 58 | size: $dropdown-menu-button-font-size; 59 | weight: font-weight(bold); 60 | } 61 | color: $dropdown-menu-font-color; 62 | line-height: $dropdown-menu-title-height; 63 | 64 | &:active, 65 | &:hover, 66 | &:focus { 67 | color: $dropdown-link-hover-color; 68 | } 69 | } 70 | 71 | .menu-image { 72 | @include margin-right($dropdown-menu-image-title-spacer); 73 | width: $dropdown-menu-title-height; 74 | height: $dropdown-menu-title-height; 75 | } 76 | 77 | .menu-button { 78 | @extend %text-center; 79 | background: none; 80 | width: $dropdown-menu-button-height; 81 | height: $dropdown-menu-button-height; 82 | padding: 0; 83 | margin-top: $dropdown-menu-button-top-offset; 84 | border: none; 85 | vertical-align: top; 86 | position: relative; 87 | 88 | &:active, 89 | &:hover, 90 | &:focus { 91 | &:after { 92 | border-top-color: $dropdown-menu-focus-border-color; 93 | } 94 | } 95 | 96 | // The down caret \/ 97 | &.default-icon:after { 98 | content: ''; 99 | width: 0; 100 | height: 0; 101 | border: 5px solid transparent; 102 | border-top-color: $dropdown-menu-font-color; 103 | border-top-width: 6px; 104 | position: absolute; 105 | top: 11px; 106 | right: 10px; 107 | } 108 | } 109 | 110 | .dropdown-menu { 111 | position: absolute; 112 | top: $dropdown-menu-button-height; 113 | right: 0; 114 | background: $dropdown-menu-background-color; 115 | z-index: $dropdown-menu-z-index; 116 | border-radius: 4px; 117 | box-shadow: 0 2px 24px 0 rgba(0,0,0,0.3); 118 | border: 1px solid $dropdown-menu-border-color; 119 | margin-top: 0; 120 | padding: $dropdown-menu-list-spacing-base; 121 | width: $dropdown-menu-width; 122 | 123 | // The background triangle /\ that looks like a speech bubble 124 | &:before { 125 | @include transform( rotate(-45deg) ); 126 | background: $dropdown-menu-background-color; 127 | width: 12px; 128 | height: 12px; 129 | border: 1px solid $dropdown-menu-border-color; 130 | border-bottom-color: transparent; 131 | border-left-color: transparent; 132 | content: ''; 133 | display: block; 134 | position: absolute; 135 | right: 7px; 136 | top: -7px; 137 | } 138 | 139 | 140 | .dropdown-item { 141 | @include text-align($dropdown-menu-list-text-align); 142 | padding-bottom: $dropdown-menu-list-spacing-base; 143 | margin-bottom: $dropdown-menu-list-spacing-base; 144 | position: relative; 145 | 146 | &:last-of-type { 147 | margin-bottom: 0; 148 | padding-bottom: 0; 149 | } 150 | 151 | a { 152 | color: $dropdown-menu-list-font-color; 153 | font-size: $dropdown-menu-list-font-size; 154 | 155 | &:hover, 156 | &:active, 157 | &:focus { 158 | color: $dropdown-menu-list-hover-color; 159 | text-decoration: underline; 160 | } 161 | } 162 | 163 | } 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /pattern-library/sass/patterns/_headings.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Components - Headings 3 | 4 | // About: Contains base styling for headings (leading type for sections of content and UI). 5 | 6 | // SETTINGS 7 | // HELPERS 8 | // #GLOBAL 9 | // #INDIVIDUAL CASES 10 | // #CANNED 11 | 12 | 13 | // ---------------------------- 14 | // #SETTINGS 15 | // ---------------------------- 16 | $headings-count: 8; 17 | 18 | $headings-font-weight-normal: font-weight(normal) !default; 19 | $headings-font-weight-bold: font-weight(semi-bold) !default; 20 | $headings-font-weight-x-bold: font-weight(bold) !default; 21 | 22 | $headings-base-font-family: inherit !default; 23 | $headings-base-font-weight: $headings-font-weight-normal !default; 24 | $headings-base-color: palette(grayscale, x-dark) !default; 25 | 26 | $headings-emphasized-font-family: $font-family-sans-serif !default; 27 | $headings-emphasized-color: palette(grayscale, black) !default; 28 | 29 | $headings-de-emphasized-font-family: $font-family-sans-serif !default; 30 | $headings-de-emphasized-color: palette(grayscale, dark) !default; 31 | 32 | 33 | // ---------------------------- 34 | // #HELPERS 35 | // ---------------------------- 36 | %reset-headings { 37 | margin: 0 0 spacing-horizontal(base) 0; 38 | font-weight: $headings-base-font-weight; 39 | font-size: font-size(base); 40 | line-height: line-height(base); 41 | color: $headings-base-color; 42 | } 43 | 44 | // ---------------------------- 45 | // #GLOBAL 46 | // ---------------------------- 47 | // broad stroke extend for emphasized/de-emphasized headings 48 | %headings-emphasized { 49 | color: $headings-emphasized-color; 50 | font-weight: $headings-font-weight-bold; 51 | } 52 | 53 | %headings-de-emphasized { 54 | color: $headings-de-emphasized-color; 55 | } 56 | 57 | .hd-1, 58 | .hd-2, 59 | .hd-3, 60 | .hd-4, 61 | .hd-5, 62 | .hd-6 { 63 | @extend %reset-headings; 64 | 65 | &.emphasized { 66 | @extend %headings-emphasized; 67 | } 68 | 69 | &.de-emphasized { 70 | @extend %headings-de-emphasized; 71 | } 72 | } 73 | 74 | .hd-6, 75 | .hd-7 { 76 | 77 | 78 | &.emphasized { 79 | font-weight: $headings-font-weight-x-bold; 80 | } 81 | } 82 | 83 | 84 | // ---------------------------- 85 | // #INDIVIDUAL CASES 86 | // ---------------------------- 87 | // Level one heading 88 | %hd-1 { 89 | margin-bottom: spacing-vertical(small); 90 | font-size: font-size(xxxx-large); 91 | line-height: line-height(xxx-large); 92 | } 93 | 94 | 95 | // Level two heading 96 | %hd-2 { 97 | margin-bottom: spacing-vertical(small); 98 | font-size: font-size(xxx-large); 99 | line-height: line-height(xx-large); 100 | } 101 | 102 | 103 | // Level three heading 104 | %hd-3 { 105 | margin-bottom: spacing-vertical(x-small); 106 | font-size: font-size(xx-large); 107 | line-height: line-height(x-large); 108 | } 109 | 110 | 111 | // Level four heading 112 | %hd-4 { 113 | margin-bottom: spacing-vertical(x-small); 114 | font-size: font-size(x-large); 115 | line-height: line-height(large); 116 | } 117 | 118 | 119 | // Level five heading 120 | %hd-5 { 121 | margin-bottom: spacing-vertical(x-small); 122 | font-size: font-size(large); 123 | line-height: line-height(large); 124 | } 125 | 126 | 127 | // Level six heading 128 | %hd-6 { 129 | margin-bottom: spacing-vertical(xx-small); 130 | font-size: font-size(base); 131 | font-weight: $headings-font-weight-bold; 132 | line-height: line-height(large); 133 | 134 | &.emphasized { 135 | font-weight: $headings-font-weight-x-bold; 136 | } 137 | } 138 | 139 | // Level seven heading 140 | %hd-7 { 141 | margin-bottom: spacing-vertical(x-small); 142 | font-size: font-size(small); 143 | font-weight: $headings-font-weight-bold; 144 | text-transform: uppercase; 145 | line-height: line-height(small); 146 | letter-spacing: letter-spacing(x-loose); 147 | 148 | &.emphasized { 149 | font-weight: $headings-font-weight-x-bold; 150 | } 151 | } 152 | 153 | // Level eight heading 154 | %hd-8 { 155 | margin-bottom: spacing-vertical(xx-small); 156 | font-size: font-size(x-small); 157 | font-weight: $headings-font-weight-bold; 158 | text-transform: uppercase; 159 | line-height: line-height(x-small); 160 | letter-spacing: letter-spacing(loose); 161 | 162 | &.emphasized { 163 | font-weight: $headings-font-weight-x-bold; 164 | } 165 | } 166 | 167 | 168 | // ---------------------------- 169 | // #CANNED 170 | // ---------------------------- 171 | // canned heading classes 172 | @for $i from 1 through $headings-count { 173 | .hd-#{$i} { 174 | @extend %hd-#{$i}; 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /pattern-library/sass/patterns/_icons.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------- 2 | // #GLOBAL 3 | // ---------------------------- 4 | .icon { 5 | display: inline-block; 6 | color: currentColor; 7 | height: auto; 8 | width: auto; 9 | speak: none; 10 | font-style: normal; 11 | font-weight: normal; 12 | font-variant: normal; 13 | text-transform: none; 14 | line-height: 1; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | -------------------------------------------------------------------------------- /pattern-library/sass/patterns/_tables.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library: Components - Tables 3 | 4 | // About: Contains base styling for tabular data 5 | 6 | // #SETTINGS 7 | // #GLOBAL 8 | // #CANNED 9 | // #RESPONSIVE 10 | // #SORTABLE 11 | 12 | 13 | // ---------------------------- 14 | // #SETTINGS 15 | // ---------------------------- 16 | // tables 17 | $table-cell-padding: spacing-vertical(x-small) spacing-horizontal(small) !default; 18 | $table-condensed-cell-padding: spacing-vertical(xx-small) spacing-horizontal(x-small) !default; 19 | $table-extra-cell-padding: spacing-vertical(small) spacing-horizontal(base) !default; 20 | $table-bg: palette(grayscale, base) !default; 21 | $table-accent-bg: palette(primary, light) !default; 22 | $table-focus-bg: palette(grayscale, trans) !default; 23 | $table-active-bg: $component-active-bg !default; 24 | $table-border-color: palette(grayscale, base) !default; 25 | 26 | 27 | // ---------------------------- 28 | // #GLOBAL 29 | // ---------------------------- 30 | 31 | %highlight { 32 | background-color: palette(warning, back); 33 | } 34 | 35 | %table-base { 36 | 37 | caption { 38 | @extend %copy-meta; 39 | @extend %copy-de-emphasized; 40 | @include text-align(left); 41 | margin-bottom: spacing-vertical(x-small); 42 | } 43 | 44 | tr:hover { 45 | background-color: $table-focus-bg; 46 | } 47 | 48 | th { 49 | @include text-align(left); 50 | font-weight: font-weight(semi-bold); 51 | } 52 | 53 | th, 54 | td { 55 | padding: $table-cell-padding; 56 | border: 1px solid $table-border-color; 57 | } 58 | 59 | tfoot { 60 | 61 | tr { 62 | border-top: 2px solid palette(grayscale, base); 63 | font-weight: font-weight(semi-bold); 64 | } 65 | } 66 | 67 | // can be used on cols, rows, or cells 68 | .is-highlighted { 69 | @extend %highlight; 70 | } 71 | 72 | // can be used on rows or cells only 73 | .align-left { 74 | @include text-align(left); 75 | } 76 | 77 | .align-center { 78 | @include text-align(center); 79 | } 80 | 81 | .align-right { 82 | @include text-align(right); 83 | } 84 | } 85 | 86 | .table { 87 | @extend %table-base; 88 | } 89 | 90 | // ---------------------------- 91 | // #CANNED 92 | // ---------------------------- 93 | 94 | // less lines 95 | .table-simplified { 96 | @extend %table-base; 97 | 98 | th, 99 | td { 100 | border: none; 101 | border-bottom: 1px solid $table-border-color; 102 | } 103 | } 104 | 105 | // extra cozy 106 | .table-cozy { 107 | 108 | th, 109 | td { 110 | padding: $table-condensed-cell-padding; 111 | } 112 | } 113 | 114 | // extra comfortable 115 | .table-comfortable { 116 | 117 | th, 118 | td { 119 | padding: $table-extra-cell-padding; 120 | } 121 | } 122 | 123 | // ---------------------------- 124 | // #RESPONSIVE 125 | // ---------------------------- 126 | // wrapping div allows horizontally large tables to scroll on small screens 127 | .wrapper-table-scrollable { 128 | width: 100%; 129 | overflow-y: auto; 130 | } 131 | 132 | // responsive table enables `supplemental` columns to hide on small screens 133 | .table-responsive { 134 | 135 | th.supplemental, 136 | td.supplemental { 137 | display: none; 138 | } 139 | 140 | @media(min-width: $bp-screen-md) { 141 | 142 | th.supplemental, 143 | td.supplemental { 144 | display: table-cell; 145 | } 146 | } 147 | } 148 | 149 | // ---------------------------- 150 | // #SORTABLE 151 | // ---------------------------- 152 | // sortable table includes button to sort by column - needs JS to actually sort 153 | .table-sortable { 154 | 155 | // sortable header 156 | .sortable { 157 | position: relative; 158 | @include margin-left(spacing-horizontal(x-small)); 159 | 160 | // sorting button 161 | .action-sort { 162 | @extend %btn-link; 163 | position: absolute; 164 | @include right(0); 165 | border: 0; 166 | color: palette(grayscale, base); 167 | 168 | &:hover { 169 | color: palette(primary, base); 170 | } 171 | } 172 | 173 | &.sort-current { 174 | 175 | .action-sort { 176 | color: palette(primary, base); 177 | } 178 | } 179 | } 180 | } 181 | -------------------------------------------------------------------------------- /pldoc/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: "Page not found" 4 | permalink: 404.html 5 | --- 6 | 7 |
8 | 19 |
20 | -------------------------------------------------------------------------------- /pldoc/CNAME: -------------------------------------------------------------------------------- 1 | ux.edx.org 2 | -------------------------------------------------------------------------------- /pldoc/_components/alerts.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: Alerts 4 | date: 2016-01-28 00:00:00 5 | 6 | categories: component 7 | tags: 8 | - atomic 9 | - pattern 10 | - alerts 11 | 12 | slug: alerts 13 | 14 | url_styles: "patterns/_alerts.scss" 15 | 16 | description: Examples of alerts in a semi-real world context. 17 | 18 | info: When something goes wrong, alerts clarify an issue and/or notify users of the problem, communicate the severity of the issue, and provide an actionable next step, if necessary. When implementing the alert pattern, consider the alert’s location; closer proximity to the action/event associates the issue (and hence resolution) with a specific page element, whereas more distant placement communicates a more systematic issue. Seek to balance graphic and content elements, where less is usually more. We recommend reading stuff about "microcopy." 19 | --- 20 | 21 |

Error Alert with Message and Button

22 |
23 | 41 |
42 | 43 |

Success Alert with Title and Message

44 |
45 | 62 |
63 | 64 |

Warning Alert with Title, Message, and Button

65 |
66 | 87 |
88 | 89 | 90 |

Warning Alert with Message Only

91 |
92 | 108 |
109 | 110 |

Information Alert with Title and Message

111 |
112 | 127 |
128 | 129 |

Slim Information Alert

130 |
131 | 143 |
144 | 145 |

Tiny Information Alert

146 |
147 | 155 |
156 | 157 |

Tiny Information Alert with an icon

158 |
159 | 168 |
169 | -------------------------------------------------------------------------------- /pldoc/_components/breadcrumbs.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: Breadcrumbs 4 | date: 2016-02-29 00:00:00 5 | 6 | categories: component 7 | tags: 8 | - atomic 9 | - pattern 10 | - js 11 | - breadcrumbs 12 | - nav 13 | 14 | slug: breadcrumbs 15 | 16 | url_styles: "patterns/_breadcrumbs.scss" 17 | 18 | description: Breadcrumb navigation. 19 | 20 | info: Accessible tiered navigation using breadcrumbs. 21 | ui-toolkit-component: breadcrumbs 22 | js: "/examples/breadcrumbs-js.html" 23 | --- 24 |
25 |

Basic breadcrumbs

26 |
27 | Add breadcrumb 28 |
29 | 30 |
31 |

Pre-rendered breadcrumbs

32 |
33 | 52 |
53 |
54 | -------------------------------------------------------------------------------- /pldoc/_components/buttons.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: Buttons 4 | date: 2015-12-28 00:00:00 5 | 6 | categories: component 7 | tags: 8 | - atomic 9 | - pattern 10 | - buttons 11 | 12 | slug: buttons 13 | 14 | url_styles: "patterns/_buttons.scss" 15 | url_documentation: Styleguide:-Accessibility#buttons-and-links 16 | 17 | description: A collection of buttons available for using within the edX platform. 18 | 19 | info: Buttons should be used for performing actions within the edX environment. While you may apply the visual style of these elements to both semantic links and buttons, a good rule of thumb is that buttons do something while links go somewhere. Buttons have several visual weights, sizes, and add-ons that can be configured alongside their use. 20 | --- 21 | 22 |

Default

23 |
24 | 25 | 26 | 27 | 28 |
29 | 30 |

Neutral

31 |
32 | 33 | 34 | 35 | 36 |
37 | 38 |

Brand

39 |
40 | 41 | 42 | 43 | 44 |
45 | 46 |

Buttons with icons

47 |
48 | 52 | 56 | 60 |
61 | 62 |

Combo

63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 |
71 | 72 |
73 | 74 | 75 |
76 |
77 | 78 |

Inverse

79 |
80 |
81 | 82 | 83 | 84 | 85 |
86 |
87 | 88 |

Links with visual styling applied

89 |
90 | View the UX Pattern Library 91 | View the UX Pattern Library 92 | View the UX Pattern Library 93 |
94 | 95 |

Links without visual styling

96 |

Note: unread links use the primary color, while read/visited links use primary dark.

97 |
98 | 99 | 100 | 101 |
102 | -------------------------------------------------------------------------------- /pldoc/_components/dropdown-menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: Dropdown Menu 4 | date: 2016-02-29 00:00:00 5 | 6 | categories: component 7 | tags: 8 | - atomic 9 | - pattern 10 | - js 11 | - dropdown 12 | - menu 13 | 14 | slug: dropdown-menu 15 | 16 | url_styles: "patterns/_dropdown-menu.scss" 17 | 18 | description: Dropdown Menu in a view. 19 | 20 | info: A JavaScript controlled dropdown menu. 21 | ui-toolkit-component: dropdown-menu 22 | js: "/examples/dropdown-menu-js.html" 23 | --- 24 |

Basic Dropdown

25 |
26 |
27 |
28 | 29 |

Dropdown with Image

30 |
31 |
32 |
33 | 34 |

Pre-Rendered DOM

35 |
36 |
37 | Vol 4 38 | 41 | 53 |
54 |
-------------------------------------------------------------------------------- /pldoc/_data/edx-pattern-library.yml: -------------------------------------------------------------------------------- 1 | # edX Pattern Library Documentation Site: UXPL Config 2 | 3 | name: edX Pattern Library 4 | 5 | description: The (working) Visual, UI, and Front End Styleguide for edX 6 | 7 | url_github: https://github.com/edx/ux-pattern-library 8 | 9 | url_site: http://ux.edx.org 10 | url_documentation: https://github.com/edx/ux-pattern-library/wiki/ 11 | url_project: https://openedx.atlassian.net/projects/UXPL/issues 12 | 13 | path_styles: /blob/master/pattern-library/sass/ 14 | 15 | -------------------------------------------------------------------------------- /pldoc/_data/edx-ui-toolkit.yml: -------------------------------------------------------------------------------- 1 | # edX Pattern Library Documentation Site: UI Toolkit Config 2 | 3 | name: edX UI Toolkit 4 | 5 | description: 6 | 7 | url_github: https://github.com/edx/edx-ui-toolkit 8 | 9 | url_site: 10 | url_documentation: https://github.com/edx/edx-ui-toolkit/blob/master/README.md 11 | 12 | path_components: /blob/master/src/js/ 13 | -------------------------------------------------------------------------------- /pldoc/_design_elements/copy.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: Copy 4 | date: 2015-07-09 00:00:00 5 | 6 | categories: design_element 7 | tags: 8 | - atomic 9 | - pattern 10 | - copy 11 | 12 | slug: copy 13 | 14 | url_styles: "patterns/_copy.scss" 15 | 16 | description: Examples of copy in a semi-real world context. 17 | 18 | info: Copy encapsulates many of the basic text rendered in our content and UI elements. Basic style properties such as size, weight, line-height, and initial color are managed here. 19 | --- 20 | 21 |

Lead Copy

22 |
23 |
24 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (lead copy)

25 |
26 | 27 |
28 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (emphasized lead copy)

29 | 30 |
31 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (de-emphasized lead copy)

32 |
33 |
34 | 35 |

Large Copy

36 |
37 |
38 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (large copy)

39 |
40 | 41 |
42 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (emphasized large copy)

43 |
44 | 45 |
46 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (de-emphasized large copy)

47 |
48 |
49 | 50 |

Base Copy

51 |
52 |
53 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (base copy)

54 |
55 | 56 |
57 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (emphasized base copy)

58 |
59 | 60 |
61 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success. (de-emphasized base copy)

62 |
63 |
64 | 65 |

Meta Copy

66 |
67 |
68 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (meta copy)

69 |
70 | 71 |
72 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (emphasized meta copy)

73 |
74 | 75 |
76 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (de-emphasized meta copy)

77 |
78 |
79 | 80 |

Micro Copy

81 |
82 |
83 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (micro copy)

84 |
85 | 86 |
87 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (emphasized micro copy)

88 |
89 | 90 |
91 |

Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming. (de-emphasized micro copy)

92 |
93 |
94 | -------------------------------------------------------------------------------- /pldoc/_design_elements/depth.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: pattern 3 | title: UI Depth 4 | date: 2015-07-21 00:00:00 5 | 6 | categories: design_element 7 | tags: 8 | - atomic 9 | - pattern 10 | - depth 11 | 12 | slug: depth 13 | 14 | url_styles: "patterns/_depth.scss" 15 | url_example: depth 16 | 17 | description: Visual depth system that be used throughout a UI. 18 | 19 | info: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi labore pariatur nam minima unde nobis, repellat enim quo illo veniam perspiciatis fugiat quibusdam voluptatibus. Vero atque alias, nostrum quidem commodi. 20 | --- 21 | 22 |

UI Depth-level -3

23 |
24 |
25 |

Darkwell has a troubled economy

26 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

27 |
28 |
29 | 30 |

UI Depth-level -2

31 |
32 |
33 |

Darkwell has a troubled economy

34 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

35 |
36 |
37 | 38 |

UI Depth-level -1

39 |
40 |
41 |

Darkwell has a troubled economy

42 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

43 |
44 |
45 | 46 |

UI Depth-level 0

47 |
48 |
49 |

Darkwell has a troubled economy

50 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

51 |
52 |
53 | 54 |

UI Depth-level 1

55 |
56 |
57 |

Darkwell has a troubled economy

58 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

59 |
60 |
61 | 62 |

UI Depth-level 2

63 |
64 |
65 |

Darkwell has a troubled economy

66 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

67 |
68 |
69 | 70 |

Well

71 |
72 |
73 |

Darkwell has a troubled economy

74 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

75 |
76 |
77 | 78 |

Slat

79 |
80 |
81 |

Darkwell has a troubled economy

82 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

83 |
84 | 85 |
86 |

Darkwell has a troubled economy

87 |

This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

88 |
89 |
90 | 91 |

Card

92 |
93 |
94 |

Darkwell has a troubled economy

95 |

Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

96 |
97 | 98 |
99 |

Darkwell has a troubled economy

100 |

This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

101 |
102 |
103 | 104 |

Zebra Stripe

105 |
106 |
    107 |
  • 108 |

    Darkwell has a troubled economy

    109 |

    This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    110 |
    • 111 |
  • 112 |

    Darkwell has a troubled economy

    113 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

    114 |
    • 115 |
  • 116 |

    Darkwell has a troubled economy

    117 |

    This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    118 |
    • 119 |
  • 120 |

    Darkwell has a troubled economy

    121 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

    122 |
    • 123 |
  • 124 |

    Darkwell has a troubled economy

    125 |

    This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    126 |
    • 127 |
  • 128 |

    Darkwell has a troubled economy

    129 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

    130 |
    • 131 |
132 |
133 | -------------------------------------------------------------------------------- /pldoc/_includes/assets-primary.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /pldoc/_includes/assets-secondary.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /pldoc/_includes/canvas-assets-primary.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /pldoc/_includes/canvas-assets-secondary.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /pldoc/_includes/canvas-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{ page.title }} · {{ site.title }} 11 | 12 | 13 | 14 | 15 | {% include canvas-assets-primary.html %} 16 | 17 | -------------------------------------------------------------------------------- /pldoc/_includes/collection-page-list.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /pldoc/_includes/examples/breadcrumbs-js.html: -------------------------------------------------------------------------------- 1 | /** 2 | * Starts the breadcrumbs example component. 3 | */ 4 | define([ 5 | 'backbone', 6 | 'jquery', 7 | 'edx-ui-toolkit/js/breadcrumbs/breadcrumbs-view.js', 8 | 'edx-ui-toolkit/js/breadcrumbs/breadcrumbs-model.js' 9 | ], 10 | function(Backbone, $, BreadcrumbsView, BreadcrumbsModel) { 11 | 'use strict'; 12 | 13 | var router = new Backbone.Router(); 14 | var $wrapper = $('.breadcrumbs-basic'); 15 | 16 | var breadcrumbsView = new BreadcrumbsView({ 17 | el: $('.has-breadcrumbs', $wrapper), 18 | model: new BreadcrumbsModel({ 19 | breadcrumbs: [{url: '/components/breadcrumbs/', title: 'Initial page'}], 20 | label: 'Example of breadcrumbs navigation' 21 | }), 22 | events: { 23 | 'click nav.breadcrumbs a.nav-item': function(event) { 24 | var url = $(event.currentTarget).attr('href'), 25 | currentCrumbs = breadcrumbsView.model.get('breadcrumbs'), 26 | indexOfCrumbClick = currentCrumbs.findIndex(function(crumb) { 27 | return crumb.url === url; 28 | }); 29 | 30 | event.preventDefault(); 31 | 32 | // Remove crumbs after the one that's been clicked from the stack 33 | breadcrumbsView.model.set('breadcrumbs', currentCrumbs.slice(0, indexOfCrumbClick + 1)); 34 | 35 | router.navigate(url, {trigger: true}); 36 | } 37 | } 38 | }).render(); 39 | 40 | // This view wraps the component you will be navigating with breadcrumbs 41 | new Backbone.View({ 42 | el: $wrapper, 43 | events: { 44 | 'click .add-breadcrumb': function(event) { 45 | // You may choose to direct to the href of a link here, e.g.: 46 | // var url = $(event.currentTarget).attr('href'); 47 | 48 | // This example instead generates a new random breadcrumb 49 | var path = window.location.pathname, 50 | crumbs = ['foo', 'bar', 'fizz', 'buzz'], 51 | randString = crumbs[Math.floor(Math.random() * crumbs.length)], 52 | url = path + (path.slice(-1) === '/' ? '' : '/') + randString; 53 | 54 | breadcrumbsView.model.set( 55 | 'breadcrumbs', 56 | breadcrumbsView.model.get('breadcrumbs').concat([{ 57 | url: url, 58 | title: randString 59 | }]) 60 | ); 61 | 62 | event.preventDefault(); 63 | router.navigate(url, {trigger: true}); 64 | } 65 | } 66 | }).render(); 67 | 68 | Backbone.history.start({pushState: true}); 69 | } 70 | ); 71 | -------------------------------------------------------------------------------- /pldoc/_includes/examples/dropdown-menu-js.html: -------------------------------------------------------------------------------- 1 | /** 2 | * Starts the dropdown menu view example component. 3 | */ 4 | define([ 5 | 'backbone', 6 | 'edx-ui-toolkit/js/dropdown-menu/dropdown-menu-view.js' 7 | ], 8 | function(Backbone, DropdownMenuView) { 9 | 'use strict'; 10 | 11 | var userModel = new Backbone.Model(), 12 | bearModel = new Backbone.Model(); 13 | 14 | // The Basic Example 15 | userModel.set({ 16 | main: { 17 | text: 'username', 18 | url: '/' 19 | }, 20 | button: { 21 | label: 'User options dropdown' 22 | }, 23 | items: [ 24 | { 25 | text: 'Dashboard', 26 | url: '/' 27 | }, { 28 | text: 'Account', 29 | url: '/' 30 | }, { 31 | text: 'Profile', 32 | url: '/' 33 | }, { 34 | text: 'Sign Out', 35 | url: '/' 36 | } 37 | ] 38 | }); 39 | 40 | new DropdownMenuView({ 41 | className: 'wrapper-more-actions dropdown-menu-container logged-in', 42 | menuId: 'basic-example', 43 | model: userModel, 44 | parent: '.js-user-cta' 45 | }).render(); 46 | 47 | // The Full Options Example 48 | bearModel.set({ 49 | main: { 50 | image: 'https://placebear.com/50/50', 51 | screenreader_label: 'Homepage for:', 52 | text: 'bears', 53 | url: '/' 54 | }, 55 | button: { 56 | icon: 'fa fa-angle-down', 57 | label: 'Bear type dropdown' 58 | }, 59 | items: [ 60 | { 61 | text: 'Grizzly', 62 | url: '/' 63 | }, { 64 | text: 'Kodiak', 65 | url: '/' 66 | }, { 67 | text: 'Polar', 68 | url: '/' 69 | }, { 70 | text: 'Sun', 71 | url: '/' 72 | } 73 | ] 74 | }); 75 | 76 | new DropdownMenuView({ 77 | className: 'wrapper-more-actions dropdown-menu-container logged-in', 78 | menuId: 'full-example', 79 | model: bearModel, 80 | parent: '.js-user-cta-img' 81 | }).render(); 82 | 83 | // Example with an already rendered DOM 84 | new DropdownMenuView({ 85 | el: '.js-dropdown-menu-vol-4' 86 | }).postRender(); 87 | } 88 | ); 89 | -------------------------------------------------------------------------------- /pldoc/_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 | 16 |
17 | -------------------------------------------------------------------------------- /pldoc/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {% if page.title == "Home" %} 11 | {{ site.title }} · {{ site.tagline }} 12 | {% else %} 13 | {{ page.title }} · {{ site.title }} 14 | {% endif %} 15 | 16 | 17 | 18 | 19 | {% include assets-primary.html %} 20 | {% seo %} 21 | 22 | -------------------------------------------------------------------------------- /pldoc/_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 | 12 |
13 | -------------------------------------------------------------------------------- /pldoc/_includes/navigation-item.html: -------------------------------------------------------------------------------- 1 |
  • 2 | {% unless include.url == page.url %} 3 | 4 | {% endunless %} 5 | {{ include.title }} 6 | {% unless include.url == page.url %} 7 | 8 | {% endunless %} 9 |
    • 10 | -------------------------------------------------------------------------------- /pldoc/_includes/navigation.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | {% assign sorted_pages = site.design_elements | sort: 'title' %} 9 | {% include collection-page-list.html title="Design Elements" pages=sorted_pages %} 10 | 11 | {% assign sorted_pages = site.components | sort: 'title' %} 12 | {% include collection-page-list.html title="Components" pages=sorted_pages %} 13 | -------------------------------------------------------------------------------- /pldoc/_includes/pattern.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 |
    5 |

    {{ post.title }}

    6 | 7 | 19 |
    20 | 21 |
    22 |

    {{post.info}}

    23 |
    24 | 25 | {% if post.ui-toolkit-component %} 26 |
    27 | 39 |
    40 | {% endif %} 41 | 42 |
    43 | {% if post.tags contains "pattern" %} 44 |
      45 |
    • 46 | 47 |
      • 48 |
    • 49 | 50 |
      • 51 | {% if post.tags contains "js" %} 52 |
    • 53 | 54 |
      • 55 | {% endif %} 56 | {% if post.url_styles %} 57 |
    • 58 | 59 |
      • 60 | {% endif %} 61 |
    62 | {% endif %} 63 | 64 |
    65 |
    66 |

    {{post.title}} Preview

    67 | 68 |
    69 | {% if post.tags contains "icons" %} 70 |
    71 |
    72 | 73 | 74 | 75 | px 76 |
    77 |
    78 | {% endif %} 79 | 80 | {{ body }} 81 |
    82 |
    83 | 84 | {% if post.tags contains "pattern" %} 85 | 92 | 93 | 100 | {% endif %} 101 | {% if post.tags contains "js" %} 102 | 109 | {% endif %} 110 |
    111 |
    112 | 113 |
    114 |
    115 | -------------------------------------------------------------------------------- /pldoc/_layouts/canvas.html: -------------------------------------------------------------------------------- 1 | --- 2 | category: canvas 3 | --- 4 | 5 | 6 | 7 | 8 | {% include canvas-head.html %} 9 | 10 | 11 | {{ content }} 12 | 13 |
    14 | 15 | {% include footer.html %} 16 | 17 | {% include canvas-assets-secondary.html %} 18 | 19 | 20 | -------------------------------------------------------------------------------- /pldoc/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 |
    8 | Skip to the main content 9 |
    10 | 11 |
    12 | 13 |
    14 | {% include header.html %} 15 | 16 |
    17 |
    18 |
    19 | {% include navigation.html %} 20 |
    21 | 22 |
    23 | 24 |
    25 |
    26 | {{ content }} 27 |
    28 |
    29 |
    30 |
    31 | 32 | {% include footer.html %} 33 |
    34 | 35 | {% include assets-secondary.html %} 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /pldoc/_layouts/documentation.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | category: documentation 4 | viewclass: documentation 5 | --- 6 | 7 |
    8 |
    9 |

    {{ page.title }}

    10 | 11 |
    12 | {{ content }} 13 |
    14 | 15 |
    16 | 17 |
    18 |
    19 |
    20 | -------------------------------------------------------------------------------- /pldoc/_layouts/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 |
    8 | Skip to the main content 9 |
    10 | 11 |
    12 | 13 |
    14 | {% include header.html %} 15 | 16 |
    17 |
    18 |
    19 |
    20 | {{ content }} 21 |
    22 |
    23 |
    24 |
    25 |
    26 | 27 | {% include assets-secondary.html %} 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /pldoc/_layouts/pattern.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | category: patterns 4 | viewclass: pattern 5 | --- 6 | {% assign post = page %} 7 | {% assign body = content %} 8 | 9 | {% include pattern.html %} 10 | -------------------------------------------------------------------------------- /pldoc/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | --- 5 | 6 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 7 | 8 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 9 | 10 | Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. 11 | 12 | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. 13 | -------------------------------------------------------------------------------- /pldoc/examples/blank.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: canvas 3 | title: View - Blank 4 | viewclass: pldoc-view-example pldoc-view-example-blank 5 | --- 6 | 7 | 38 | 39 |
    40 | 41 |
    42 | 43 | -------------------------------------------------------------------------------- /pldoc/examples/depth.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: canvas 3 | title: UI Depth Examples 4 | viewclass: pldoc-view-example pldoc-view-example-depth 5 | related-pattern: depth 6 | --- 7 | 8 | 22 | 23 |
    24 |
    25 | 26 |
    27 | 30 | 31 |

    {{ page.title }}

    32 |
    33 |
    34 | 35 |
    36 |

    UI Depth-level -3

    37 |
    38 |

    Darkwell has a troubled economy

    39 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    40 |
    41 |
    42 | 43 |
    44 |

    UI Depth-level -2

    45 |
    46 |

    Darkwell has a troubled economy

    47 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    48 |
    49 |
    50 | 51 |
    52 |

    UI Depth-level -1

    53 |
    54 |

    Darkwell has a troubled economy

    55 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    56 |
    57 |
    58 | 59 |
    60 |

    UI Depth-level 0

    61 |
    62 |

    Darkwell has a troubled economy

    63 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    64 |
    65 |
    66 | 67 |
    68 |

    UI Depth-level 1

    69 |
    70 |

    Darkwell has a troubled economy

    71 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    72 |
    73 |
    74 | 75 |
    76 |

    UI Depth-level 2

    77 |
    78 |

    Darkwell has a troubled economy

    79 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    80 |
    81 |
    82 | 83 |
    84 |

    Well

    85 |
    86 |

    Darkwell has a troubled economy

    87 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    88 |
    89 |
    90 | 91 |
    92 |

    Slat

    93 |
    94 |

    Darkwell has a troubled economy

    95 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

    96 |
    97 | 98 |
    99 |

    Darkwell has a troubled economy

    100 |

    This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    101 |
    102 |
    103 | 104 |
    105 |

    Card

    106 |
    107 |

    Darkwell has a troubled economy

    108 |

    Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

    109 |
    110 | 111 |
    112 |

    Darkwell has a troubled economy

    113 |

    This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

    114 |
    115 |
    116 | 117 |
    118 |

    Zebra Stripe

    119 |
      120 |
    • 121 |

      Darkwell has a troubled economy

      122 |

      This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

      123 |
      • 124 |
    • 125 |

      Darkwell has a troubled economy

      126 |

      Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

      127 |
      • 128 |
    • 129 |

      Darkwell has a troubled economy

      130 |

      This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

      131 |
      • 132 |
    • 133 |

      Darkwell has a troubled economy

      134 |

      Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

      135 |
      • 136 |
    • 137 |

      Darkwell has a troubled economy

      138 |

      This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.

      139 |
      • 140 |
    • 141 |

      Darkwell has a troubled economy

      142 |

      Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson.

      143 |
      • 144 |
    145 |
    146 |
    147 | 148 | 149 | -------------------------------------------------------------------------------- /pldoc/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edx/ux-pattern-library/35d8f8485e4bd863866802d9e726850ed7a80198/pldoc/favicon.ico -------------------------------------------------------------------------------- /pldoc/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Home 4 | viewclass: index 5 | --- 6 | 7 | The edX Pattern Library is the visual, UI, and front end style guide for edX's applications. 8 | 9 | The Pattern Library is an open source project that is hosted on 10 | [GitHub]({{ site.data.edx-pattern-library.url_github }}), and that can be installed as an 11 | [npm package](https://www.npmjs.com/package/edx-pattern-library). 12 | 13 | [![edX Pattern Library](https://nodei.co/npm/edx-pattern-library.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/edx-pattern-library/) 14 | 15 | You can read more on the [edX Front End Development wiki](https://openedx.atlassian.net/wiki/display/FEDX/). 16 | -------------------------------------------------------------------------------- /pldoc/static/images/edx-logo.svg: -------------------------------------------------------------------------------- 1 | edx-logo -------------------------------------------------------------------------------- /pldoc/static/js/color-contrast.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery' 3 | ], function($) { 4 | 'use strict'; 5 | /* 6 | * Accessibility Color Contrast Tool 7 | * Runs through our list of swatches checking the contrast variance between foreground 8 | * and background, and highlights those swatch color combinations that don't meet AA 9 | * acceptance criteria. 10 | */ 11 | var AccessibilityColorContrast = (function() { 12 | return { 13 | vars: { 14 | failClass: 'fail-a11y-color' // Class for failed palettes 15 | }, 16 | 17 | init: function() { 18 | AccessibilityColorContrast.checkContrast(); 19 | }, 20 | 21 | checkContrast: function() { 22 | var bg, fg, ratio, ratios; 23 | 24 | $('button.swatch').each(function() { 25 | bg = AccessibilityColorContrast.getL( 26 | AccessibilityColorContrast.rgbaToHex( 27 | $(this).css('backgroundColor') 28 | ) 29 | ); 30 | fg = AccessibilityColorContrast.getL( 31 | AccessibilityColorContrast.rgbaToHex( 32 | $(this).parent().parent() 33 | .css('backgroundColor') 34 | ) 35 | ); 36 | 37 | ratio = (Math.max(bg, fg) + 0.05) / (Math.min(bg, fg) + 0.05); 38 | ratios = [4.5, 3]; // 4.5 normal text AA, 3 large text AA 39 | 40 | if (ratio < ratios[0]) { 41 | // Text should pass for normal sized text (non-headings) 42 | AccessibilityColorContrast.applyHighlighting($(this)); 43 | } 44 | 45 | if (ratio < ratios[1]) { 46 | // Text should pass for heading sized text 47 | // Unused at this time, since text is smaller 48 | } 49 | }); 50 | }, 51 | 52 | rgbaToHex: function(rgba) { 53 | // matches rgba(r, g, b, a) 54 | var rgbaValue = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i), 55 | hex; 56 | 57 | hex = (rgbaValue && rgbaValue.length === 4) ? '#' + 58 | ('0' + parseInt(rgbaValue[1], 10).toString(16)).slice(-2) + 59 | ('0' + parseInt(rgbaValue[2], 10).toString(16)).slice(-2) + 60 | ('0' + parseInt(rgbaValue[3], 10).toString(16)).slice(-2) : ''; 61 | 62 | hex = hex.replace('#', ''); 63 | 64 | return hex; 65 | }, 66 | 67 | getL: function(color) { 68 | var R, G, B, L, 69 | update = false; 70 | 71 | if (color.length === 3) { 72 | R = AccessibilityColorContrast.getsRGB(color.substring(0, 1) + color.substring(0, 1)); 73 | G = AccessibilityColorContrast.getsRGB(color.substring(1, 2) + color.substring(1, 2)); 74 | B = AccessibilityColorContrast.getsRGB(color.substring(2, 3) + color.substring(2, 3)); 75 | update = true; 76 | } else if (color.length === 6) { 77 | R = AccessibilityColorContrast.getsRGB(color.substring(0, 2)); 78 | G = AccessibilityColorContrast.getsRGB(color.substring(2, 4)); 79 | B = AccessibilityColorContrast.getsRGB(color.substring(4, 6)); 80 | update = true; 81 | } else { 82 | update = false; 83 | } 84 | 85 | if (update) { 86 | L = (0.2126 * R + 0.7152 * G + 0.0722 * B); 87 | return L; 88 | } else { 89 | return false; 90 | } 91 | }, 92 | 93 | getsRGB: function(color) { 94 | var colorValue = AccessibilityColorContrast.getRGB(color); 95 | if (colorValue !== false) { 96 | colorValue = colorValue / 255; 97 | colorValue = (colorValue <= 0.03928) ? colorValue / 12.92 : 98 | Math.pow(((colorValue + 0.055) / 1.055), 2.4); 99 | return colorValue; 100 | } else { 101 | return false; 102 | } 103 | }, 104 | 105 | getRGB: function(col) { 106 | var color; 107 | 108 | try { 109 | color = parseInt(col, 16); 110 | } catch (err) { 111 | color = false; 112 | } 113 | 114 | return color; 115 | }, 116 | 117 | applyHighlighting: function(swatch) { 118 | var title, newTitle; 119 | 120 | $(swatch) 121 | .addClass(AccessibilityColorContrast.vars.failClass); 122 | 123 | title = $(swatch).attr('title'); 124 | newTitle = title + '. Take care when using this color with certain color combinations!'; 125 | 126 | $(swatch).attr('title', newTitle); 127 | } 128 | }; 129 | }()); 130 | 131 | return AccessibilityColorContrast; 132 | }); 133 | -------------------------------------------------------------------------------- /pldoc/static/js/colors.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery', 3 | './colors_json', 4 | './color-contrast', 5 | 'edx-ui-toolkit/js/utils/constants.js' 6 | ], function($, Colors, AccessibilityColorContrast, Constants) { 7 | 'use strict'; 8 | 9 | var $pane = $('#colors-preview .info-pane'), 10 | $title = $pane.find('.color-info-title'), 11 | $desc = $pane.find('.color-description'), 12 | $back = $pane.find('.color-combinations.background'), 13 | $ref = $pane.find('.color-reference'), 14 | $rgb = $pane.find('.color-rgb'), 15 | $hex = $pane.find('.color-hex'); 16 | 17 | var $button; 18 | 19 | var colors = Colors.colors; 20 | 21 | var ColorHandler = { 22 | 23 | init: function() { 24 | AccessibilityColorContrast.init(); 25 | ColorHandler.listenForClick(); 26 | ColorHandler.listenForKeypress(); 27 | ColorHandler.listenForClose(); 28 | }, 29 | 30 | listenForClick: function() { 31 | var classes; 32 | 33 | $('#colors-preview').on('click', 'button.swatch', function() { 34 | $button = $(this); 35 | classes = $button.attr('class').split(/\s+/); 36 | 37 | ColorHandler.showInformationWindow(classes, $button); 38 | }); 39 | }, 40 | 41 | listenForKeypress: function() { 42 | var key; 43 | 44 | $(document).on('keydown', function(e) { 45 | key = e.which; 46 | 47 | if (key === Constants.keyCodes.esc) { 48 | if (!$pane.hasClass('is-hidden')) { 49 | ColorHandler.clearValues(); 50 | ColorHandler.hideInformationWindow(); 51 | } 52 | } 53 | }); 54 | }, 55 | 56 | listenForClose: function() { 57 | $('#colors-preview .info-pane').on('click', '.close-button', function() { 58 | ColorHandler.clearValues(); 59 | ColorHandler.hideInformationWindow(); 60 | }); 61 | }, 62 | 63 | showInformationWindow: function(classes, button) { 64 | var info = false, 65 | back = [], 66 | backHtml = ''; 67 | 68 | $(colors).each(function(i) { 69 | if (colors[i].color === classes[1]) { 70 | info = colors[i][classes[2]]; 71 | } 72 | }); 73 | 74 | if (info) { 75 | $title.text(info[0].title); 76 | $desc.text(info[0].description); 77 | $ref.text('palette(' + classes[1] + ', ' + classes[2] + ')'); 78 | 79 | $(info[0].recs[0].back).each(function(i) { 80 | back.push(info[0].recs[0].back[i]); 81 | }); 82 | 83 | $('#colors-preview .info-pane').removeClass('is-hidden').focus(); 84 | } 85 | 86 | if (back.length > 0) { 87 | $(back).each(function(i) { 88 | backHtml += '
  • ' + back[i] + '
    • '; 89 | }); 90 | 91 | $back.html(backHtml); 92 | } 93 | 94 | $hex.text(AccessibilityColorContrast.rgbaToHex($(button).css('backgroundColor'))); 95 | $rgb.text($(button).css('backgroundColor')); 96 | }, 97 | 98 | hideInformationWindow: function() { 99 | $pane.addClass('is-hidden'); 100 | $button.focus(); 101 | }, 102 | 103 | clearValues: function() { 104 | $title.text(''); 105 | $desc.text(''); 106 | $back.html(''); 107 | } 108 | }; 109 | 110 | ColorHandler.init(); 111 | }); 112 | -------------------------------------------------------------------------------- /pldoc/static/js/colors_json.js: -------------------------------------------------------------------------------- 1 | define(function() { 2 | 'use strict'; 3 | 4 | return { 5 | colors: [{ 6 | color: 'primary', 7 | dark: [{ 8 | title: 'Primary Dark', 9 | description: 'The darkest shade of the primary color.', 10 | recs: [{ 11 | back: ['white', 'back', 'x-back'] 12 | }] 13 | }], 14 | base: [{ 15 | title: 'Primary Base', 16 | description: 'The base primary color intended for main use.', 17 | recs: [{ 18 | back: ['white', 'back', 'x-back'] 19 | }] 20 | }], 21 | accent: [{ 22 | title: 'Accent Primary', 23 | description: 'The primary accent color.', 24 | recs: [{ 25 | back: ['white', 'back', 'x-back'] 26 | }] 27 | }], 28 | back: [{ 29 | title: 'Primary Background', 30 | description: 'A lighter tint of the primary base color used for backgrounds.', 31 | recs: [{ 32 | back: ['dark', 'black'] 33 | }] 34 | }], 35 | 'x-back': [{ 36 | title: 'Primary Lighter Background', 37 | description: 'A very light, near white, tint of the primary base color for lighter backgrounds.', 38 | recs: [{ 39 | back: ['dark', 'black'] 40 | }] 41 | }] 42 | }, { 43 | color: 'secondary', 44 | dark: [{ 45 | title: 'Secondary Dark', 46 | description: 'The darkest shade of the secondary color.', 47 | recs: [{ 48 | back: ['white', 'back', 'x-back'] 49 | }] 50 | }], 51 | base: [{ 52 | title: 'Secondary Base', 53 | description: 'The base secondary color intended for main use.', 54 | recs: [{ 55 | back: ['white', 'back', 'x-back'] 56 | }] 57 | }], 58 | accent: [{ 59 | title: 'Accent Secondary', 60 | description: 'The secondary accent color.', 61 | recs: [{ 62 | back: ['white', 'back', 'x-back'] 63 | }] 64 | }], 65 | back: [{ 66 | title: 'Secondary Background', 67 | description: 'A lighter tint of the secondary base color used for backgrounds.', 68 | recs: [{ 69 | back: ['dark', 'black'] 70 | }] 71 | }], 72 | 'x-back': [{ 73 | title: 'Secondary Lighter Background', 74 | description: 'A very light, near white, tint of the secondary base color for lighter backgrounds.', 75 | recs: [{ 76 | back: ['dark', 'black'] 77 | }] 78 | }] 79 | }, { 80 | color: 'grayscale', 81 | dark: [{ 82 | title: 'Gray Dark', 83 | description: 'The darkest shade of the gray color.', 84 | recs: [{ 85 | back: ['white', 'back', 'x-back'] 86 | }] 87 | }], 88 | base: [{ 89 | title: 'Gray Base', 90 | description: 'The base gray color intended for main use.', 91 | recs: [{ 92 | back: ['white', 'back', 'x-back'] 93 | }] 94 | }], 95 | accent: [{ 96 | title: 'Accent Gray', 97 | description: 'The gray accent color.', 98 | recs: [{ 99 | back: ['white', 'back', 'x-back'] 100 | }] 101 | }], 102 | back: [{ 103 | title: 'Gray Background', 104 | description: 'A lighter tint of the gray base color used for backgrounds.', 105 | recs: [{ 106 | back: ['dark', 'black'] 107 | }] 108 | }], 109 | 'x-back': [{ 110 | title: 'Gray Lighter Background', 111 | description: 'A very light, near white, tint of the gray base color for lighter backgrounds.', 112 | recs: [{ 113 | back: ['dark', 'black'] 114 | }] 115 | }] 116 | }, { 117 | color: 'success', 118 | text: [{ 119 | title: 'Success Text', 120 | description: 'Text color for success messaging.', 121 | recs: [{ 122 | back: ['white', 'back'] 123 | }] 124 | }], 125 | accent: [{ 126 | title: 'Success Accent', 127 | description: 'A slightly lighter tint for success messaging accents.', 128 | recs: [{ 129 | back: ['white', 'back'] 130 | }] 131 | }], 132 | back: [{ 133 | title: 'Success Background', 134 | description: 'Success messaging background color.', 135 | recs: [{ 136 | back: ['black', 'dark'] 137 | }] 138 | }] 139 | }, { 140 | color: 'error', 141 | text: [{ 142 | title: 'Error Text', 143 | description: 'Text color for error messaging.', 144 | recs: [{ 145 | back: ['white', 'back'] 146 | }] 147 | }], 148 | accent: [{ 149 | title: 'Error Accent', 150 | description: 'A slightly lighter tint for error messaging accents.', 151 | recs: [{ 152 | back: ['white', 'back'] 153 | }] 154 | }], 155 | back: [{ 156 | title: 'Error Background', 157 | description: 'Error messaging background color.', 158 | recs: [{ 159 | back: ['black', 'dark'] 160 | }] 161 | }] 162 | }, { 163 | color: 'warning', 164 | accent: [{ 165 | title: 'Warning Accent', 166 | description: 'A slightly lighter tint for warning messaging accents.', 167 | recs: [{ 168 | back: ['white', 'back'] 169 | }] 170 | }], 171 | back: [{ 172 | title: 'Warning Background', 173 | description: 'Warning messaging background color.', 174 | recs: [{ 175 | back: ['black', 'dark'] 176 | }] 177 | }] 178 | }] 179 | }; 180 | }()); 181 | -------------------------------------------------------------------------------- /pldoc/static/js/pattern-library-doc.js: -------------------------------------------------------------------------------- 1 | require('../sass/pattern-library-doc.scss'); 2 | require('font-awesome/css/font-awesome.css'); 3 | require( 4 | [ 5 | './ui.js', 6 | '../../_includes/examples/dropdown-menu-js.html', 7 | '../../_includes/examples/breadcrumbs-js.html' 8 | ], 9 | function() { 10 | 'use strict'; 11 | } 12 | ); 13 | -------------------------------------------------------------------------------- /pldoc/static/js/size-slider.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery' 3 | ], function($) { 4 | 'use strict'; 5 | 6 | /* 7 | * Icon size slider 8 | * Creates a slider control which lets users scale the icons to see how 9 | * they might look in various sizes. The size in pixels is also displayed 10 | * with the control. 11 | */ 12 | 13 | var IconFontSliderControl = { 14 | 15 | vars: { 16 | wrapper: $('#icons-preview'), 17 | heading: $('.pldoc-tab-heading'), 18 | example: $('.example-icon .icon-display .icon'), 19 | exampleContainer: $('.example-icon .icon-display'), 20 | sliderControl: $('#iconFontSlider'), 21 | sliderValue: $('#iconFontSliderValue') 22 | }, 23 | 24 | init: function() { 25 | this.listenForSlider(); 26 | }, 27 | 28 | listenForSlider: function() { 29 | IconFontSliderControl.vars.sliderControl.on('input change', function(event) { 30 | var size = event.target.value; 31 | // oninput - chrome, firefox, safari 32 | // onchange - ie9-11 33 | // console.log(event.target.value); 34 | IconFontSliderControl.updateIconSize(size); 35 | IconFontSliderControl.updateAria(size); 36 | IconFontSliderControl.updateInputText(size); 37 | }); 38 | }, 39 | 40 | updateAria: function(size) { 41 | IconFontSliderControl.vars.sliderControl 42 | .attr('aria-now', size); 43 | }, 44 | 45 | updateIconSize: function(size) { 46 | IconFontSliderControl.vars.example.css({fontSize: size + 'px'}); 47 | IconFontSliderControl.vars.exampleContainer.css({width: size + 'px'}); 48 | }, 49 | 50 | updateInputText: function(size) { 51 | IconFontSliderControl.vars.sliderValue.val(size); 52 | } 53 | 54 | }; 55 | 56 | IconFontSliderControl.init(); 57 | }); 58 | -------------------------------------------------------------------------------- /pldoc/static/js/tabs.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery' 3 | ], function($) { 4 | 'use strict'; 5 | 6 | var Tabs = { 7 | 8 | vars: { 9 | tabContainer: $('.pldoc-tab-wrapper'), 10 | tabs: $('.pldoc-tab-labels'), 11 | tab: $('.pldoc-tab-label'), 12 | panels: $('.pldoc-tabs'), 13 | panel: $('.pldoc-tab'), 14 | activeClass: 'is-active', 15 | hiddenClass: 'is-hidden' 16 | }, 17 | 18 | init: function() { 19 | Tabs.handleTabClick(); 20 | }, 21 | 22 | resetInterface: function(wrapper) { 23 | wrapper.find('.pldoc-link').each(function(i, target) { 24 | $(target).removeClass(Tabs.vars.activeClass); 25 | }); 26 | 27 | wrapper.find(Tabs.vars.panel).each(function(i, target) { 28 | $(target).removeClass(Tabs.vars.activeClass) 29 | .addClass(Tabs.vars.hiddenClass); 30 | }); 31 | }, 32 | 33 | smoothScroll: function(target) { 34 | $('html, body').stop().animate({ 35 | scrollTop: ($(target).offset().top - 50) 36 | }, 1000, 'swing', function() { 37 | $(target).focus(); 38 | }); 39 | }, 40 | 41 | handleTabClick: function() { 42 | Tabs.vars.tab.find('.pldoc-link').on('click', function(event) { 43 | var $el, 44 | content; 45 | 46 | $el = $(event.currentTarget); 47 | content = $el.data('href'); 48 | if (content) { 49 | event.preventDefault(); 50 | Tabs.resetInterface($el.closest(Tabs.vars.tabContainer)); 51 | Tabs.makeActive($el, content); 52 | Tabs.smoothScroll(content); 53 | } 54 | }); 55 | }, 56 | 57 | makeActive: function(tab, content) { 58 | tab.addClass(Tabs.vars.activeClass); 59 | $(content).addClass(Tabs.vars.activeClass) 60 | .removeClass(Tabs.vars.hiddenClass); 61 | } 62 | }; 63 | 64 | Tabs.init(); 65 | }); 66 | -------------------------------------------------------------------------------- /pldoc/static/js/ui.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery', 3 | './tabs.js', 4 | './size-slider.js', 5 | './color-contrast.js', 6 | './colors.js', 7 | 'edx-pattern-library/js/select-replace.js', 8 | 'edx-ui-toolkit/js/disclosure/disclosure-view.js' 9 | ], function($) { 10 | 'use strict'; 11 | 12 | var Ui = { 13 | 14 | // JS is enabled/available 15 | init: function() { 16 | Ui.setupHtml(); 17 | Ui.smoothScrollLink(); 18 | Ui.openNewWindow(); 19 | Ui.navigationHighlight(); 20 | Ui.setupPalettes(); 21 | Ui.listenForPaletteClick(); 22 | }, 23 | 24 | setupHtml: function() { 25 | $('html').removeClass('no-js'); 26 | $('.pldoc-nav-patterns .pldoc-link').each(function(index, element) { 27 | var $el = $(element); 28 | if ($el.attr('href') === window.location.pathname) { 29 | $el.addClass('is-current'); 30 | return false; 31 | } else { 32 | return true; 33 | } 34 | }); 35 | }, 36 | 37 | setupPalettes: function() { 38 | $('.example').each(function(i, el) { 39 | var $el = $(el), 40 | rgb = $el.css('backgroundColor'); 41 | 42 | $el.find('.color-meta .color-rgb').text(rgb); 43 | $el.find('.color-meta .color-hex').text(Ui.rgbaToHex(rgb)); 44 | }); 45 | }, 46 | 47 | // smoothscroll to target links 48 | smoothScrollLink: function() { 49 | var target; 50 | $('a[href^="#"]').not('.pldoc-tab-wrapper .pldoc-link').on('click', function(event) { 51 | event.preventDefault(); 52 | 53 | target = $(event.currentTarget).attr('href'); 54 | 55 | $('html, body').stop().animate({ 56 | scrollTop: $(target).offset().top 57 | }, 1000, 'swing', function() { 58 | Ui.sendFocus(target); 59 | }); 60 | }); 61 | }, 62 | 63 | sendFocus: function(target) { 64 | $(target).find('.pldoc-pattern-title:first') 65 | .attr('tabindex', '-1') 66 | .focus(); 67 | }, 68 | 69 | openNewWindow: function() { 70 | $('a[rel="external"]').on('click', function(event) { 71 | event.preventDefault(); 72 | window.open($(event.currentTarget).attr('href')); 73 | }); 74 | }, 75 | 76 | // smoothscroll to target links 77 | navigationHighlight: function() { 78 | $('.pldoc-nav-patterns .pldoc-link').on('click', function(event) { 79 | $('.pldoc-nav-patterns .pldoc-link').removeClass('is-current'); 80 | $(event.currentTarget).addClass('is-current'); 81 | }); 82 | }, 83 | 84 | // open external links in new windows 85 | newWindowLink: function(event) { 86 | event.preventDefault(); 87 | window.open($(event.currentTarget).attr('href')); 88 | }, 89 | 90 | rgbaToHex: function(rgb) { 91 | var rgbValue, hex; 92 | if (typeof(rgb) !== 'undefined') { 93 | rgbValue = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); 94 | 95 | hex = (rgbValue && rgbValue.length === 4) ? '#' + 96 | ('0' + parseInt(rgbValue[1], 10).toString(16)).slice(-2) + 97 | ('0' + parseInt(rgbValue[2], 10).toString(16)).slice(-2) + 98 | ('0' + parseInt(rgbValue[3], 10).toString(16)).slice(-2) : ''; 99 | 100 | return hex; 101 | } else { 102 | return false; 103 | } 104 | }, 105 | 106 | selectText: function(textToBeSelected) { 107 | // this selects all the text in an element 108 | // http://stackoverflow.com/questions/12243898/how-to-select-all-text-in-contenteditable-div 109 | var doc = document, 110 | range, selection, 111 | element = textToBeSelected[0]; 112 | 113 | if (doc.body.createTextRange) { 114 | range = doc.body.createTextRange(); 115 | range.moveToElementText(element); 116 | range.select(); 117 | } else if (window.getSelection) { 118 | selection = window.getSelection(); 119 | range = doc.createRange(); 120 | range.selectNodeContents(element); 121 | selection.removeAllRanges(); 122 | selection.addRange(range); 123 | } 124 | }, 125 | 126 | listenForPaletteClick: function() { 127 | $('.is-copyable').on('click', function() { 128 | Ui.selectText($(event.currentTarget)); 129 | }); 130 | } 131 | }; 132 | 133 | Ui.init(); 134 | }); 135 | -------------------------------------------------------------------------------- /pldoc/static/sass/_build.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library Site: Build Partial 3 | 4 | // About: Shared sass compilation between LTR/RTL produced stylesheets 5 | 6 | 7 | // ------------------------------ 8 | // #LIB 9 | // ------------------------------ 10 | @import 'syntax'; 11 | @import '../../../pattern-library/sass/global/lib'; 12 | @import '../../../pattern-library/sass/edx-pattern-library'; 13 | 14 | 15 | // ------------------------------ 16 | // #EXTENSIONS 17 | // ------------------------------ 18 | @import 'utilities'; 19 | @import 'components'; 20 | @import 'layouts'; 21 | @import 'views'; 22 | @import 'overrides'; 23 | -------------------------------------------------------------------------------- /pldoc/static/sass/_layouts.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library Site: Layouts 3 | 4 | // About: styling for generic layouts and responsive support. 5 | 6 | // ------------------------------ 7 | // #DOC SITE LAYOUT 8 | // ------------------------------ 9 | // header 10 | .pldoc-wrapper-header-site, .pldoc-wrapper-footer-site { 11 | @extend %grid-wrapper; 12 | } 13 | 14 | .pldoc-header-site { 15 | @include grid-container; 16 | padding-top: spacing-vertical(x-small); 17 | 18 | .pldoc-header-links { 19 | @include float(right); 20 | } 21 | } 22 | 23 | .pldoc-header-site-title { 24 | margin-bottom: 0; 25 | font-weight: font-weight(bold); 26 | 27 | .pldoc-header-logo { 28 | @include float(left); 29 | height: 40px; 30 | margin-right: spacing-horizontal(small); 31 | content: url('../images/edx-logo.svg'); 32 | } 33 | } 34 | 35 | // content 36 | %grid-wrapper { 37 | @include padding-left(spacing-horizontal(base)); 38 | @include padding-right(spacing-horizontal(base)); 39 | } 40 | 41 | .pldoc-wrapper-content { 42 | @extend %grid-wrapper; 43 | } 44 | 45 | .pldoc-content { 46 | @include grid-container; 47 | margin-top: spacing-vertical(x-small); 48 | } 49 | 50 | // main content 51 | .pldoc-wrapper-content-main { 52 | padding-top: spacing-vertical(small); 53 | 54 | @media(min-width: $bp-screen-md) { 55 | @include span(9); 56 | } 57 | 58 | h1 { 59 | @extend %hd-3; 60 | line-height: 1; 61 | color: palette(primary, dark); 62 | } 63 | 64 | h2 { 65 | @extend %hd-4; 66 | color: palette(primary, dark); 67 | } 68 | } 69 | 70 | // sidebar 71 | .pldoc-wrapper-content-supplemental { 72 | background-color: palette(grayscale, x-back); 73 | padding: spacing-vertical(small); 74 | @include padding-left(0); 75 | 76 | @media(min-width: $bp-screen-md) { 77 | @include span(3); 78 | } 79 | } 80 | 81 | // pattern 82 | .pldoc-wrapper-pattern { 83 | border-bottom: rem(2) solid palette(grayscale, back); 84 | box-shadow: inset spacing-horizontal(xx-small) 0 0 0 $transparent; 85 | 86 | &:last-child { 87 | border-bottom: none; 88 | } 89 | } 90 | 91 | .pldoc-pattern { 92 | @include grid-row; 93 | } 94 | 95 | .pldoc-pattern-header { 96 | @include clearfix(); 97 | 98 | @media(min-width: $bp-screen-xl) { 99 | display: flex; 100 | justify-content: space-between; 101 | } 102 | } 103 | 104 | .pldoc-pattern-title { 105 | margin-bottom: spacing-vertical(x-small); 106 | font-size: font-size(xx-large); 107 | line-height: 1; 108 | 109 | @media(min-width: $bp-screen-xl) { 110 | flex-grow: 1; 111 | margin-bottom: 0; 112 | } 113 | } 114 | 115 | .pldoc-pattern-meta { 116 | .meta-updated { 117 | margin-bottom: spacing-vertical(x-small); 118 | 119 | @media(min-width: $bp-screen-md) { 120 | margin-bottom: 0; 121 | } 122 | } 123 | 124 | @media(min-width: $bp-screen-xl) { 125 | flex-grow: 1; 126 | @include text-align(right); 127 | } 128 | } 129 | 130 | // ------------------------------ 131 | // #GENERAL CANVAS LAYOUT 132 | // ------------------------------ 133 | .pldoc-view-example { 134 | // @extend %depth-0; 135 | 136 | .pldoc-wrapper-view-header { 137 | margin-bottom: spacing-vertical(base); 138 | padding: spacing-vertical(mid-small); 139 | @extend %depth-1; 140 | } 141 | 142 | .pldoc-view-header { 143 | @include grid-container; 144 | 145 | .pldoc-breadcrumbs, 146 | .pldoc-view-header-title { 147 | @include span(12); 148 | } 149 | } 150 | 151 | .example { 152 | margin-bottom: spacing-vertical(base); 153 | 154 | &:last-child { 155 | margin-bottom: 0; 156 | } 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /pldoc/static/sass/_ltr.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library Site: LTR directional settings & support 3 | 4 | // About: Sass partial for defining settings and utilities for LTR-centric layouts. 5 | 6 | // #SETTINGS 7 | // #LIB 8 | 9 | 10 | // ---------------------------- 11 | // #SETTINGS 12 | // ---------------------------- 13 | $layout-direction: ltr; 14 | 15 | 16 | // ---------------------------- 17 | // #LIB 18 | // ---------------------------- 19 | @import '../../../node_modules/bi-app-sass/bi-app/bi-app-ltr'; 20 | -------------------------------------------------------------------------------- /pldoc/static/sass/_overrides.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library Site: Overrides 3 | 4 | // About: Additional sass rules that must come at the end of the compilation for overriding purposes - either for temporary/specific developer styling needs or for known poorly scoped/written styling (aka shame CSS). 5 | 6 | // #TEMP 7 | // #DEVELOPERS 8 | // #SHAME 9 | 10 | // ------------------------------ 11 | // #TEMP 12 | // ------------------------------ 13 | 14 | 15 | // ------------------------------ 16 | // #DEVELOPERS 17 | // ------------------------------ 18 | 19 | 20 | // ------------------------------ 21 | // #SHAME 22 | // ------------------------------ 23 | 24 | -------------------------------------------------------------------------------- /pldoc/static/sass/_rtl.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library Site: RTL directional settings & support 3 | 4 | // About: Sass partial for defining settings and utilities for RTL-centric layouts. 5 | 6 | // #SETTINGS 7 | // #LIB 8 | 9 | 10 | // ---------------------------- 11 | // #SETTINGS 12 | // ---------------------------- 13 | $layout-direction: rtl; 14 | 15 | 16 | // ---------------------------- 17 | // #LIB 18 | // ---------------------------- 19 | @import '../../../node_modules/bi-app-sass/bi-app/bi-app-rtl'; 20 | -------------------------------------------------------------------------------- /pldoc/static/sass/_syntax.scss: -------------------------------------------------------------------------------- 1 | .highlight { max-width: 100%; } /* Don't expand beyond the available space */ 2 | .highlight pre { white-space: pre-wrap; } /* Wrap long lines */ 3 | 4 | .highlight .hll { background-color: #ffc; } 5 | .highlight .c { color: #999; } /* Comment */ 6 | .highlight .err { color: #a00; background-color: #faa } /* Error */ 7 | .highlight .k { color: #069; } /* Keyword */ 8 | .highlight .o { color: #555 } /* Operator */ 9 | .highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ 10 | .highlight .cp { color: #099 } /* Comment.Preproc */ 11 | .highlight .c1 { color: #999; } /* Comment.Single */ 12 | .highlight .cs { color: #999; } /* Comment.Special */ 13 | .highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ 14 | .highlight .ge { font-style: italic } /* Generic.Emph */ 15 | .highlight .gr { color: #f00 } /* Generic.Error */ 16 | .highlight .gh { color: #030; } /* Generic.Heading */ 17 | .highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ 18 | .highlight .go { color: #aaa } /* Generic.Output */ 19 | .highlight .gp { color: #009; } /* Generic.Prompt */ 20 | .highlight .gs { } /* Generic.Strong */ 21 | .highlight .gu { color: #030; } /* Generic.Subheading */ 22 | .highlight .gt { color: #9c6 } /* Generic.Traceback */ 23 | .highlight .kc { color: #069; } /* Keyword.Constant */ 24 | .highlight .kd { color: #069; } /* Keyword.Declaration */ 25 | .highlight .kn { color: #069; } /* Keyword.Namespace */ 26 | .highlight .kp { color: #069 } /* Keyword.Pseudo */ 27 | .highlight .kr { color: #069; } /* Keyword.Reserved */ 28 | .highlight .kt { color: #078; } /* Keyword.Type */ 29 | .highlight .m { color: #f60 } /* Literal.Number */ 30 | .highlight .s { color: #d44950 } /* Literal.String */ 31 | .highlight .na { color: #4f9fcf } /* Name.Attribute */ 32 | .highlight .nb { color: #366 } /* Name.Builtin */ 33 | .highlight .nc { color: #0a8; } /* Name.Class */ 34 | .highlight .no { color: #360 } /* Name.Constant */ 35 | .highlight .nd { color: #99f } /* Name.Decorator */ 36 | .highlight .ni { color: #999; } /* Name.Entity */ 37 | .highlight .ne { color: #c00; } /* Name.Exception */ 38 | .highlight .nf { color: #c0f } /* Name.Function */ 39 | .highlight .nl { color: #99f } /* Name.Label */ 40 | .highlight .nn { color: #0cf; } /* Name.Namespace */ 41 | .highlight .nt { color: #2f6f9f; } /* Name.Tag */ 42 | .highlight .nv { color: #033 } /* Name.Variable */ 43 | .highlight .ow { color: #000; } /* Operator.Word */ 44 | .highlight .w { color: #bbb } /* Text.Whitespace */ 45 | .highlight .mf { color: #f60 } /* Literal.Number.Float */ 46 | .highlight .mh { color: #f60 } /* Literal.Number.Hex */ 47 | .highlight .mi { color: #f60 } /* Literal.Number.Integer */ 48 | .highlight .mo { color: #f60 } /* Literal.Number.Oct */ 49 | .highlight .sb { color: #c30 } /* Literal.String.Backtick */ 50 | .highlight .sc { color: #c30 } /* Literal.String.Char */ 51 | .highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ 52 | .highlight .s2 { color: #c30 } /* Literal.String.Double */ 53 | .highlight .se { color: #c30; } /* Literal.String.Escape */ 54 | .highlight .sh { color: #c30 } /* Literal.String.Heredoc */ 55 | .highlight .si { color: #a00 } /* Literal.String.Interpol */ 56 | .highlight .sx { color: #c30 } /* Literal.String.Other */ 57 | .highlight .sr { color: #3aa } /* Literal.String.Regex */ 58 | .highlight .s1 { color: #c30 } /* Literal.String.Single */ 59 | .highlight .ss { color: #fc3 } /* Literal.String.Symbol */ 60 | .highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ 61 | .highlight .vc { color: #033 } /* Name.Variable.Class */ 62 | .highlight .vg { color: #033 } /* Name.Variable.Global */ 63 | .highlight .vi { color: #033 } /* Name.Variable.Instance */ 64 | .highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ 65 | 66 | .css .o, 67 | .css .o + .nt, 68 | .css .nt + .nt { color: #999; } 69 | -------------------------------------------------------------------------------- /pldoc/static/sass/_utilities.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library Site: Utilities 3 | 4 | // About: configuration, functions, variables, mixins, and general helpers for rendering. 5 | 6 | // ------------------------------ 7 | // #VARIABLES 8 | // ------------------------------ 9 | // pl UI 10 | $pldoc-content-supplemental-width: rem(330); // width of supplemental content sidebar 11 | $pldoc-tab-label-height: rem(4); // height of tab labels 12 | $pldoc-ui-toolkit-color: rgb(255, 222, 32); 13 | $pldoc-background-color: palette(grayscale, x-back); 14 | $pldoc-link-color: palette(primary, base); 15 | 16 | 17 | // ------------------------------ 18 | // #HELPERS 19 | // ------------------------------ 20 | 21 | // pattern: hide styling tab 22 | %pattern-hide-styling { 23 | 24 | .pldoc-tab-label .pldoc-link-styling, 25 | .pldoc-pattern-styling { 26 | display: none; 27 | } 28 | } 29 | 30 | // pattern: hide markup tab 31 | %pattern-hide-markup { 32 | 33 | .pldoc-tab-label .pldoc-link-markup, 34 | .pldoc-pattern-markup { 35 | display: none; 36 | } 37 | } 38 | 39 | // ------------------------------ 40 | // #BASE RESET 41 | // ------------------------------ 42 | // basic 43 | html, body { 44 | height: 100%; 45 | color: $text-base-color; 46 | } 47 | 48 | .pldoc { 49 | @extend %depth-0; 50 | background-color: $pldoc-background-color; 51 | } 52 | 53 | a { 54 | color: $pldoc-link-color; 55 | } 56 | -------------------------------------------------------------------------------- /pldoc/static/sass/_views.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library Site: Views 3 | 4 | // About: styling for specific views. 5 | 6 | // ------------------------------ 7 | // #INDEX 8 | // ------------------------------ 9 | .pldoc.view-index { 10 | 11 | // link back to top 12 | .pldoc-wrapper-link-top { 13 | padding: 0 spacing-horizontal(large) spacing-vertical(small) spacing-horizontal(large); 14 | } 15 | 16 | .pldoc-link-top { 17 | display: block; 18 | text-align: center; 19 | } 20 | } 21 | 22 | 23 | // ------------------------------ 24 | // #DETAIL 25 | // ------------------------------ 26 | .pldoc.view-pattern { 27 | 28 | } 29 | 30 | .meta { 31 | font-size: font-size(large); 32 | 33 | a { 34 | color: $pldoc-link-color; 35 | } 36 | } 37 | 38 | // ------------------------------ 39 | // #EXAMPLE - UI DEPTH 40 | // ------------------------------ 41 | .pldoc-view-example-depth { 42 | 43 | .example-set { 44 | @include grid-container; 45 | margin-bottom: spacing-vertical(base); 46 | } 47 | 48 | // padding for demo purposes 49 | .depth { 50 | padding: spacing-vertical(small) spacing-horizontal(base); 51 | } 52 | 53 | // light text on darker backgrounds for demo purposes 54 | .depth--2, 55 | .depth--3 { 56 | 57 | .hd { 58 | color: palette(grayscale, dark); 59 | } 60 | 61 | .copy { 62 | color: palette(grayscale, dark); 63 | } 64 | } 65 | 66 | // spacing for demo purposes 67 | .slat, 68 | .card { 69 | margin-bottom: spacing-vertical(x-small); 70 | 71 | &:last-child { 72 | margin-bottom: 0; 73 | } 74 | } 75 | 76 | .zebra-stripe { 77 | @extend %reset-lists; 78 | 79 | .slat { 80 | margin-bottom: 0; 81 | } 82 | } 83 | } 84 | 85 | 86 | // ------------------------------ 87 | // #EXAMPLE - GRID 88 | // ------------------------------ 89 | .pldoc-view-example-grid { 90 | .example-grid { 91 | .row { 92 | margin-bottom: spacing-vertical(mid-small); 93 | 94 | &:last-child { 95 | margin-bottom: 0; 96 | } 97 | } 98 | 99 | .col { 100 | @extend %demo-grid-column; 101 | } 102 | } 103 | 104 | // semantic grid 105 | #example-grid-1 { 106 | .wrapper-content { 107 | @include grid-container; 108 | } 109 | 110 | .content-main { 111 | @include span(8, after); 112 | @include grid-container; 113 | @extend %demo-grid-column; 114 | } 115 | 116 | .story { 117 | @extend %demo-grid-column; 118 | margin-bottom: spacing-vertical(small); 119 | 120 | &:last-child { 121 | margin-bottom: 0; 122 | } 123 | } 124 | 125 | .story-secondary { 126 | @include span(6); 127 | @extend %demo-grid-column; 128 | 129 | &:nth-child(2n) { 130 | @include span(6, after); 131 | } 132 | 133 | &:nth-child(2n+1) { 134 | @include span(6, before); 135 | } 136 | } 137 | 138 | .content-secondary { 139 | @include span(4, before); 140 | @extend %demo-grid-column; 141 | } 142 | 143 | .list-related { 144 | @extend %reset-lists; 145 | } 146 | } 147 | } 148 | 149 | // ------------------------------ 150 | // #EXAMPLE - LAYOUTS 151 | // ------------------------------ 152 | .pldoc-view-example-layouts { 153 | 154 | .example-layout { 155 | margin-bottom: spacing-vertical(large); 156 | 157 | &:last-child { 158 | margin-bottom: 0; 159 | } 160 | } 161 | 162 | .example-layout-hd { 163 | @include grid-container; 164 | } 165 | } 166 | 167 | // ------------------------------ 168 | // #EXAMPLE - DROPDOWN MENU 169 | // ------------------------------ 170 | .prerendered-dropdown { 171 | .dropdown-menu { 172 | width: 190px; 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /pldoc/static/sass/pattern-library-doc.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------ 2 | // edX Pattern Library Site: Main Style Compile - LTR 3 | 4 | // About: Sass compile for the edX Pattern Library Site. This does not contain styles for other edX products/experiences (e.g. account/onboarding). Any styles defined in the partials contained here should be prefixed with ".pldoc-" to avoid cascade/run-off into the element stylings. 5 | 6 | 7 | // ------------------------------ 8 | // #CONFIG - layout direction 9 | // ------------------------------ 10 | @import 'ltr'; // LTR-specifc settings and utilities 11 | 12 | // ------------------------------ 13 | // #BUILD 14 | // ------------------------------ 15 | @import 'build'; // shared compile/build order for both LTR and RTL UI 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint "strict": ["error", "global"] */ 2 | 3 | 'use strict'; 4 | 5 | var path = require('path'), 6 | webpack = require('webpack'), 7 | ExtractTextPlugin = require('extract-text-webpack-plugin'), 8 | 9 | // Config specifically for webpack-dev-server (appended to main config in local development) 10 | devServerConfig = { 11 | // enables Hot Module Replacement (https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) 12 | hot: true, 13 | publicPath: '/public', 14 | 15 | // Proxy all requests outside of the publicPath to Jekyll's server 16 | proxy: { 17 | '!/public': { 18 | target: 'http://127.0.0.1:4000', 19 | secure: false 20 | } 21 | }, 22 | stats: { 23 | colors: true // Colorize output, even when piped through Gulp 24 | } 25 | }, 26 | 27 | /** 28 | * Builds a Webpack (https://webpack.github.io/) config from an options object 29 | * Supported options: 30 | * - debug: true (default) if Webpack will be running in a local development mode (enables HMR and source maps) 31 | * false if Webpack is building a production bundle (separate CSS file, uglified JS, no local server) 32 | * - publicPath: if the bundle you're building needs to be served from a subdirectory, pass the path here. 33 | * Otherwise, omit this setting. Currently only used while building S3 previews 34 | */ 35 | configFactory = function(options) { 36 | var wpconfig = { 37 | output: { 38 | path: path.resolve(__dirname, 'pldoc/public/'), 39 | publicPath: (options.publicPath || '/') + 'public/', 40 | filename: '[name].js', // Serve bundle from http://server/public/[name].js 41 | 42 | // Webpack 'chunks' are a loading mechanism for common code, more chunks can improve perf (esp. with H2) 43 | // There is more optimization to be done here! For more see: 44 | // https://webpack.github.io/docs/code-splitting.html 45 | chunkFilename: 'chunk.[id].js' 46 | }, 47 | entry: { 48 | 'pattern-library-doc': [ 49 | path.resolve(__dirname, 'pldoc/static/js/pattern-library-doc.js') 50 | ] 51 | }, 52 | module: { 53 | loaders: [ 54 | { 55 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 56 | // Inline WOFF(2) files using url-loader. WOFF(2) is the best format, so inline it for speed. 57 | loader: 'url?limit=64000' 58 | }, 59 | { 60 | test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 61 | // Load the other font formats as external with another network request if using a WOFF fails. 62 | loader: 'file' 63 | }, 64 | { 65 | test: /\.css$/, // Required for precompiled FontAwesome 66 | // In debug mode, uses css-loader and adds stylesheets to the JS bundle for HMR (and simplicity) 67 | // In production, uses ExtractTextPlugin to build a separate CSS file 68 | loader: options.debug ? 'style!css' : ExtractTextPlugin.extract('style', 'css') 69 | }, 70 | { 71 | test: /\.scss$/, 72 | // Same as above, but with the added step of running through node-sass in both dev and prod 73 | loader: options.debug ? 'style!css!sass' : ExtractTextPlugin.extract('style', 'css!sass') 74 | } 75 | ] 76 | }, 77 | resolve: { 78 | alias: { 79 | // Aliases so we can use RequireJS with these bases and have it pick up the right folders 80 | // See pldoc/static/js/ui.js for an example 81 | 'edx-pattern-library': path.resolve(__dirname, 'pattern-library'), 82 | 'edx-ui-toolkit': path.resolve(__dirname, 'node_modules/edx-ui-toolkit/src') 83 | }, 84 | extensions: ['', '.js', '.css', '.scss', '.woff', '.woff2', '.ttf', '.eot', '.svg'] 85 | }, 86 | sassLoader: { 87 | // Similar to the aliases above, so we can @import the pattern library from a cleaner base in the pldoc 88 | data: "$pattern-library-path: '../../../pattern-library' !default;", 89 | includePaths: [ 90 | './node_modules' 91 | ], 92 | sourceMap: true // Enable Sass sourcemaps regardless of environment type 93 | }, 94 | plugins: [ 95 | new webpack.NoErrorsPlugin() // Don't emit anything when errors are encountered 96 | ], 97 | debug: options.debug, 98 | devtool: options.debug ? 'source-map' : null // Enable JS sourcemaps in dev mode 99 | }; 100 | 101 | // In debug (local) mode, we want hot module reload and CSS inlined into JS. 102 | // In prod mode, we disable HMR and use ExtractTextPlugin to generate .css files, avoiding a FOUC 103 | if (options.debug) { 104 | // For more on this WDS/HMR configuration, see: 105 | // http://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement 106 | wpconfig.entry['pattern-library-doc'] = [].concat( 107 | 'webpack-dev-server/client?http://localhost:8080', 108 | 'webpack/hot/only-dev-server', 109 | wpconfig.entry['pattern-library-doc'] 110 | ); 111 | wpconfig.plugins = [].concat( 112 | new webpack.HotModuleReplacementPlugin(), 113 | wpconfig.plugins 114 | ); 115 | wpconfig.devServer = devServerConfig; 116 | } else { 117 | wpconfig.plugins = [].concat( 118 | new ExtractTextPlugin('[name].css'), // Build a separate css file and emit it at publicPath/[name].css 119 | new webpack.optimize.UglifyJsPlugin(), // Uglify (http://lisperator.net/uglifyjs/) the Javascript 120 | wpconfig.plugins 121 | ); 122 | } 123 | 124 | return wpconfig; 125 | }; 126 | 127 | module.exports = { 128 | // By default, build an export a version of the config for development (unless NODE_ENV is production) 129 | default: configFactory({debug: process.env.NODE_ENV !== 'production'}), 130 | 131 | // Also export the configFactory, so programmatic users of Webpack can build their own configs by passing options 132 | // For an example of using configFactory, see gulp/tasks/webpack.js 133 | configFactory: configFactory, 134 | devServerConfig: devServerConfig 135 | }; 136 | --------------------------------------------------------------------------------