Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
WIP: Squashed commit of the following:
Browse files Browse the repository at this point in the history 
commit bffadd3
Author: Andrew C. Dvorak <[email protected]>
Date:   Wed Jan 17 09:09:56 2018 -0800

    style(demos): Clean up theme demo Sass and HTML (#1973)

    - Remove unused code
    - IE 11 compatible property values (`unset` -> `auto`)
    - Fix duplicate IDs
    - Use `--stroked` buttons instead of `--raised` for checkbox demo
    - Rename CSS classes to be more BEM-y
    - Rename and reorganize Sass demo vars
    - Reword text-field labels and helper text for clarity
    - Remove `getAll()`
    - Inline some JS vars

commit 3a1786f
Author: Dominic Carretto <[email protected]>
Date:   Wed Jan 17 11:37:03 2018 -0500

    fix(slider): Add MDCSliderFoundation export (#1959)

commit 815eade
Author: Simon Olofsson <[email protected]>
Date:   Wed Jan 17 17:36:07 2018 +0100

    docs(menu): Remove obsolete `mdc-simple-menu--open-from` classes. (#1927)

commit 6078784
Author: Chafic Najjar <[email protected]>
Date:   Wed Jan 17 18:26:00 2018 +0200

    docs: Rewrite all instances of "MDC-Web" as "MDC Web" (#1960)

    Resolves #1924

commit e87c110
Author: pndewit <[email protected]>
Date:   Wed Jan 17 17:23:03 2018 +0100

    docs(drawer): Fix missing link to temporary drawer demo (#1922)

commit 003dff4
Author: Chafic Najjar <[email protected]>
Date:   Wed Jan 17 18:20:35 2018 +0200

    docs: Fix broken links to AngularJS's Git commit guidelines (#1888)
  • Loading branch information
@acdvorak
acdvorak committed Jan 17, 2018
1 parent cbf2dd7 commit 082e2f3
Show file tree
Hide file tree
Showing 40 changed files with 264 additions and 347 deletions.
4 changes: 2 additions & 2 deletions .github/ISSUE_TEMPLATE.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ feature requests.
If you'd like to work on a component, please ensure that you *submit an Engineering Outline before
submitting a pull request*. You can read more about this in our [contributing docs](https://github.com/material-components/material-components-web/blob/master/CONTRIBUTING.md#building-components).

MDC-Web is still under active development. You can see our current progress on [master](https://github.com/material-components/material-components-web/tree/master) as well as an overview of our [architecture and practices](https://github.com/material-components/material-components-web/blob/master/docs/code).
MDC Web is still under active development. You can see our current progress on [master](https://github.com/material-components/material-components-web/tree/master) as well as an overview of our [architecture and practices](https://github.com/material-components/material-components-web/blob/master/docs/code).

If you're interested in information for a specific component, check out our [component issues](https://github.com/material-components/material-components-web/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Av2-component) to see which milestone it's associated with and subscribe to updates to it. If an issue has the `in-tracker` label, you can also take a look at our [public Pivotal Tracker](https://www.pivotaltracker.com/n/projects/1664011) for a rough estimate of when we'll get to it.

Expand All @@ -25,7 +25,7 @@ Our team prioritizes responding to as many engineering and user experience quest

Follow the template below to ensure the quickest and most accurate response to your issue.

### What MDC-Web Version are you using?
### What MDC Web Version are you using?

> Please be specific, e.g. _major.minor.patch_
Expand Down
16 changes: 8 additions & 8 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Contributing to Material Components Web (MDC-Web)
# Contributing to Material Components Web (MDC Web)

We'd love for you to contribute and make Material Components for the web even better than it is today!
Here are the guidelines we'd like you to follow:
Expand All @@ -8,7 +8,7 @@ Here are the guidelines we'd like you to follow:
- [Setting up your development environment](#setting-up-your-development-environment)
- [Building Components](#building-components)
- [Running the development server](#running-the-development-server)
- [Building MDC-Web](#building-mdc-web)
- [Building MDC Web](#building-mdc-web)
- [Linting / Testing / Coverage Enforcement](#linting--testing--coverage-enforcement)
- [Running Tests across browsers](#running-tests-across-browsers)
- [Coding Style](#coding-style)
Expand All @@ -20,11 +20,11 @@ The Material Components contributing policies and procedures can be found in the

## Development Process

We strive to make developing Material Components Web as frictionless as possible, both for ourselves and for our community. This section should get you up and running working on the MDC-Web codebase. Before beginning development, you may want to read through our overview on [architecture and best practices](./docs/code) to get a better understanding of our overall structure.
We strive to make developing Material Components Web as frictionless as possible, both for ourselves and for our community. This section should get you up and running working on the MDC Web codebase. Before beginning development, you may want to read through our overview on [architecture and best practices](./docs/code) to get a better understanding of our overall structure.

### Setting up your development environment

You'll need a recent version of [nodejs](https://nodejs.org/en/) to work on MDC-Web. We [test our builds](https://travis-ci.org/material-components/material-components-web) using both the latest and LTS node versions, so use of one of those is recommended. You can use [nvm](https://github.com/creationix/nvm) to easily install and manage different versions of node on your system.
You'll need a recent version of [nodejs](https://nodejs.org/en/) to work on MDC Web. We [test our builds](https://travis-ci.org/material-components/material-components-web) using both the latest and LTS node versions, so use of one of those is recommended. You can use [nvm](https://github.com/creationix/nvm) to easily install and manage different versions of node on your system.

> **NOTE**: If you expect to commit updated or new dependencies, please ensure you are using npm 5, which will
> also update `package-lock.json` correctly when you install or upgrade packages.
Expand Down Expand Up @@ -75,12 +75,12 @@ MDC_ENV=development npm run build && gcloud app deploy app.yaml --project google
gcloud app browse
```

The above script will build and deploy the app to mdc-web's dev server with your userid as its version number, you can switch to your version by prepending `$USER-dot-` to the URL opened when you run `gcloud app browse`. This would be helpful if we need to share work-in-progress work within teams and designers.
The above script will build and deploy the app to MDC Web's dev server with your userid as its version number, you can switch to your version by prepending `$USER-dot-` to the URL opened when you run `gcloud app browse`. This would be helpful if we need to share work-in-progress work within teams and designers.

### Building MDC-Web
### Building MDC Web

```
npm run build # Builds an unminified version of MDC-Web within build/
npm run build # Builds an unminified version of MDC Web within build/
npm run build:min # Same as above, but enables minification
npm run dist # Cleans out build/ and runs both of the above commands sequentially
```
Expand Down Expand Up @@ -124,7 +124,7 @@ Our entire coding style is enforced automatically through the use of linters. Ch

### Submitting Pull Requests

When submitting PRs, make sure you're following our commit message conventions (which are the same as [angular's](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit)); our `commit-msg` hook should automatically enforce this. We also support [commitizen](https://www.npmjs.com/package/commitizen), which you can
When submitting PRs, make sure you're following our commit message conventions (which are the same as [angular's](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits)); our `commit-msg` hook should automatically enforce this. We also support [commitizen](https://www.npmjs.com/package/commitizen), which you can
use to auto-format commit messages for you.

When submitting PRs for large changes, be sure to include an adequate background in the description
Expand Down
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

# Material Components for the web

Material Components for the web (MDC-Web) helps developers execute [Material Design](https://www.material.io).
Material Components for the web (MDC Web) helps developers execute [Material Design](https://www.material.io).
Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Components for the web is the successor to [Material Design Lite](https://getmdl.io/), and has 3 high-level goals:
Expand All @@ -16,11 +16,11 @@ Material Components for the web is the successor to [Material Design Lite](https
- [RMWC: React Material Web Components](https://github.com/jamesmfriedman/rmwc)
- [Angular MDC](https://github.com/trimox/angular-mdc-web)
- [Blox Material](https://blox.src.zone/material): Angular Integration Library.
- [Vue MDC Adapter](https://github.com/stasson/vue-mdc-adapter): MDC-Web Integration for Vue.js (using [foundation/adapters](./docs/integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).)
- [Material Components Vue](https://github.com/matsp/material-components-vue): MDC-Web Integration for Vue.js (using [vanilla components](./docs/integrating-into-frameworks.md#the-simple-approach-wrapping-mdc-web-vanilla-components))
- [Vue MDC Adapter](https://github.com/stasson/vue-mdc-adapter): MDC Web Integration for Vue.js (using [foundation/adapters](./docs/integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).)
- [Material Components Vue](https://github.com/matsp/material-components-vue): MDC Web Integration for Vue.js (using [vanilla components](./docs/integrating-into-frameworks.md#the-simple-approach-wrapping-mdc-web-vanilla-components))
- More coming soon! Feel free to submit a pull request adding your library to this list, so long as you meet our [criteria](docs/integrating-into-frameworks.md).

MDC-Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.
MDC Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

**[Demos](https://material-components-web.appspot.com/)** (updated with every release)

Expand Down Expand Up @@ -61,7 +61,7 @@ introduction to the library.

## Installing individual components

MDC-Web is modular by design. Each component lives within its own packages under the
MDC Web is modular by design. Each component lives within its own packages under the
[@material npm org](https://www.npmjs.com/org/material).

```
Expand Down
109 changes: 22 additions & 87 deletions demos/theme/_theme-shared.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,10 @@
// stylelint-disable selector-class-pattern, selector-max-type, scss/dollar-variable-pattern

$demo-section-margin: 48px;
$demo-custom-color: $material-color-red-500;

$demo-color-custom: $material-color-red-500;
$demo-color-low-luminance: $material-color-brown-900;
$demo-color-high-luminance: $material-color-amber-50;

//
// Global styles
Expand All @@ -60,7 +63,7 @@ body {
}

//
// Page toolbar
// Toolbar
//

.demo-anchor-with-toolbar-offset {
Expand Down Expand Up @@ -117,25 +120,20 @@ body {
transition: none;
}

.demo-component-section__heading .demo-component-section__permalink {
.demo-component-section__permalink {
color: inherit;
opacity: 0;
}

.demo-component-section__permalink {
.demo-component-section:hover &,
.demo-component-section__heading--focus & {
.demo-component-section__heading--focus-within & {
opacity: 1;
}
}

//
// Baseline theme color demo
// CSS class demo
//

$low-luminance-color: #3e2723;
$high-luminance-color: #fff8e1;

.demo-fieldset--color {
@include mdc-rtl-reflexive-box(margin, right, 36px);
}
Expand All @@ -151,16 +149,7 @@ $high-luminance-color: #fff8e1;
flex-direction: column;
}

.demo-theme-color-swatches__label {
display: inline-block;
box-sizing: border-box;
width: 130px;
margin-bottom: 1em;
}

.demo-theme-color-swatch {
// TODO(acdvorak): mdc-elevation (and other similar mixins) should figure out the correct contrast color automatically
// based on $mdc-theme-background.
@include mdc-elevation(1);

display: inline-block;
Expand All @@ -174,27 +163,27 @@ $high-luminance-color: #fff8e1;
}

.demo-theme-bg--low-luminance {
background-color: $low-luminance-color;
background-color: $demo-color-low-luminance;
}

.demo-theme-bg--low-luminance-light {
background-color: mdc-theme-light-variant($low-luminance-color);
background-color: mdc-theme-light-variant($demo-color-low-luminance);
}

.demo-theme-bg--low-luminance-dark {
background-color: mdc-theme-dark-variant($low-luminance-color);
background-color: mdc-theme-dark-variant($demo-color-low-luminance);
}

.demo-theme-bg--high-luminance {
background-color: $high-luminance-color;
background-color: $demo-color-high-luminance;
}

.demo-theme-bg--high-luminance-light {
background-color: mdc-theme-light-variant($high-luminance-color);
background-color: mdc-theme-light-variant($demo-color-high-luminance);
}

.demo-theme-bg--high-luminance-dark {
background-color: mdc-theme-dark-variant($high-luminance-color);
background-color: mdc-theme-dark-variant($demo-color-high-luminance);
}

.demo-theme-bg--custom-light {
Expand Down Expand Up @@ -228,44 +217,10 @@ $high-luminance-color: #fff8e1;
// Button demo
//

.mdc-button.secondary-text-button {
@include mdc-button-ink-color($mdc-theme-secondary);
@include mdc-states($mdc-theme-secondary);

@include mdc-theme-dark(".mdc-button") {
@include mdc-button-ink-color($mdc-theme-secondary);
@include mdc-states($mdc-theme-secondary);
}
}

.mdc-button.secondary-filled-button {
@include mdc-button-filled-accessible($mdc-theme-secondary);

@include mdc-theme-dark(".mdc-button") {
@include mdc-button-filled-accessible($mdc-theme-secondary);
}
}

.mdc-button.secondary-stroked-button {
@include mdc-button-ink-color($mdc-theme-secondary);
@include mdc-button-stroke-color($mdc-theme-secondary);
@include mdc-states($mdc-theme-secondary);

@include mdc-theme-dark(".mdc-button") {
@include mdc-button-ink-color($mdc-theme-secondary);
@include mdc-button-stroke-color($mdc-theme-secondary);
@include mdc-states($mdc-theme-secondary);
}
}

.demo-fieldset--button + .demo-fieldset--button {
margin-top: 16px;
}

.demo-button {
margin: 10px;
}

.demo-button__code {
font-size: smaller;
text-transform: none;
Expand Down Expand Up @@ -323,11 +278,11 @@ $high-luminance-color: #fff8e1;
@include mdc-rtl-reflexive-box(margin, right, 10px);
}

.demo-checkbox-toggle {
.demo-checkbox-toggle-button {
@include mdc-rtl-reflexive-box(margin, right, 10px);
}

.demo-checkbox-wrapper + .demo-checkbox-toggle {
.demo-checkbox-wrapper + .demo-checkbox-toggle-button {
@include mdc-rtl-reflexive-property(margin, 20px, 10px);
}

Expand All @@ -337,8 +292,8 @@ $high-luminance-color: #fff8e1;

.demo-dialog {
position: relative;
justify-content: unset;
z-index: unset;
justify-content: flex-start;
z-index: auto;
}

//
Expand Down Expand Up @@ -388,12 +343,12 @@ $high-luminance-color: #fff8e1;
display: inline-flex;
}

.demo-icon-toggle__row {
.demo-icon-toggle-row {
display: flex;
flex-wrap: wrap;
}

.demo-icon-toggle__tile {
.demo-icon-toggle-tile {
@include mdc-rtl-reflexive-box(margin, right, 10px);

margin-top: 0;
Expand All @@ -409,11 +364,11 @@ $high-luminance-color: #fff8e1;
// Linear Progress demo
//

.demo-linear-progress__row {
.demo-linear-progress-row {
margin: 32px 0;
}

.demo-linear-progress__row + .demo-linear-progress__row {
.demo-linear-progress-row + .demo-linear-progress-row {
margin-top: 64px;
}

Expand All @@ -434,26 +389,6 @@ $high-luminance-color: #fff8e1;
margin-right: 8px;
}

@mixin demo-radio-color($color) {
.mdc-radio__native-control:checked + .mdc-radio__background {
&::before {
@include mdc-theme-prop(background-color, $color);
}

.mdc-radio__outer-circle {
@include mdc-theme-prop(border-color, $color);
}

.mdc-radio__inner-circle {
@include mdc-theme-prop(background-color, $color);
}
}
}

.demo-radio--secondary {
@include demo-radio-color($mdc-theme-secondary);
}

//
// Switch demo
//
Expand Down
Loading

0 comments on commit 082e2f3

Please sign in to comment.