diff --git a/config/build.config.js b/config/build.config.js index d91c375c0dd..a52d6a415f5 100644 --- a/config/build.config.js +++ b/config/build.config.js @@ -92,6 +92,7 @@ module.exports = { 'src/components/toast/toast.js', 'src/components/toolbar/toolbar.js', 'src/components/whiteframe/whiteframe.js', + 'src/components/divider/divider.js', //Services 'src/services/decorators.js', diff --git a/src/components/divider/README.MD b/src/components/divider/README.MD new file mode 100644 index 00000000000..f49cfff116d --- /dev/null +++ b/src/components/divider/README.MD @@ -0,0 +1 @@ +Dividers, created with the `` directive. \ No newline at end of file diff --git a/src/components/divider/_divider.scss b/src/components/divider/_divider.scss index 8f0a4d0d7ba..75451ea1679 100644 --- a/src/components/divider/_divider.scss +++ b/src/components/divider/_divider.scss @@ -1,5 +1,9 @@ material-divider { display: block; - border-bottom: 1px solid #d2d2d2; - margin-top: 5px; -} + border-top: 1px solid $color-divider; + margin: 0; + + &[inset] { + margin-left: $baseline-grid * 10; + } +} \ No newline at end of file diff --git a/src/components/divider/demo1/index.html b/src/components/divider/demo1/index.html new file mode 100644 index 00000000000..08e975c2d6a --- /dev/null +++ b/src/components/divider/demo1/index.html @@ -0,0 +1,51 @@ +
+ + +

+ Full Bleed +

+ + + + + + +
+

{{item.what}}

+

{{item.who}}

+

+ {{item.notes}} +

+
+ + + + + + + +

+ Inset +

+ + + + + + +
+ {{item.who}} +
+
+

{{item.what}}

+

{{item.who}}

+

+ {{item.notes}} +

+
+ + + + + +
\ No newline at end of file diff --git a/src/components/divider/demo1/script.js b/src/components/divider/demo1/script.js new file mode 100644 index 00000000000..70c03e80e12 --- /dev/null +++ b/src/components/divider/demo1/script.js @@ -0,0 +1,34 @@ +angular.module('app', ['ngMaterial']) + .controller('AppCtrl', function($scope) { + $scope.messages = [{ + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }, { + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }, { + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }, { + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }, { + face: '/img/list/60.jpeg', + what: 'Brunch this weekend?', + who: 'Min Li Chan', + when: '3:08PM', + notes: " I'll be in your neighborhood doing errands" + }]; + }); \ No newline at end of file diff --git a/src/components/divider/demo1/style.css b/src/components/divider/demo1/style.css new file mode 100644 index 00000000000..a777b36f49e --- /dev/null +++ b/src/components/divider/demo1/style.css @@ -0,0 +1,6 @@ +.face { + border-radius: 30px; + border: 1px solid #ddd; + width: 48px; + margin: 16px; +} \ No newline at end of file diff --git a/src/components/divider/divider.js b/src/components/divider/divider.js new file mode 100644 index 00000000000..3a189eb0b36 --- /dev/null +++ b/src/components/divider/divider.js @@ -0,0 +1,37 @@ +/** + * @ngdoc module + * @name material.components.divider + * @description Divider module! + */ +angular.module('material.components.divider', [ + 'material.animations', + 'material.services.aria' +]) + .directive('materialDivider', MaterialDividerDirective); + +function MaterialDividerController(){} + +/** + * @ngdoc directive + * @name materialDivider + * @module material.components.divider + * @restrict E + * + * @description + * Dividers group and separate content within lists and page layouts using strong visual and spatial distinctions. This divider is a thin rule, lightweight enough to not distract the user from content. + * + * @param {boolean=} inset Add this attribute to activate the inset divider style. + * @usage + * + * + * + * + * + * + */ +function MaterialDividerDirective() { + return { + restrict: 'E', + controller: [MaterialDividerController] + }; +} diff --git a/src/components/divider/module.json b/src/components/divider/module.json new file mode 100644 index 00000000000..ac8b84f993d --- /dev/null +++ b/src/components/divider/module.json @@ -0,0 +1,10 @@ +{ + "module": "material.components.divider", + "name": "Divider", + "demos": { + "demo1": { + "name": "Divider Usage", + "files": ["demo1/*"] + } + } +} \ No newline at end of file diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss index c1d62afd81a..5723a1089c9 100644 --- a/src/components/list/_list.scss +++ b/src/components/list/_list.scss @@ -1,7 +1,12 @@ material-list { + } material-item { + +} + +material-item-content { @include flex-display(); @include flex-align-items(center); @include flex-direction(row); @@ -17,6 +22,7 @@ material-item { */ .material-tile-left { min-width: 56px; + margin-right: -16px; } /** @@ -25,9 +31,8 @@ material-item { .material-tile-content { @include flex(1); - padding: 15px 0 15px 0; + padding: $baseline-grid * 2; - border-bottom: 1px solid #eee; text-overflow: ellipsis; h2 { diff --git a/src/components/list/demo1/index.html b/src/components/list/demo1/index.html index 04ac1b38245..cdaa2898a1a 100644 --- a/src/components/list/demo1/index.html +++ b/src/components/list/demo1/index.html @@ -5,16 +5,18 @@ -
- {{item.who}} -
-
-

{{item.what}}

-

{{item.who}}

-

- {{item.notes}} -

-
+ +
+ {{item.who}} +
+
+

{{item.what}}

+

{{item.who}}

+

+ {{item.notes}} +

+
+ diff --git a/src/main.scss b/src/main.scss index d44198b29d5..9abf7f17e86 100644 --- a/src/main.scss +++ b/src/main.scss @@ -31,4 +31,5 @@ "components/toolbar/toolbar", "components/tabs/tabs", "components/list/list", +"components/divider/divider", "components/whiteframe/whiteframe"; diff --git a/src/theme/_colors.scss b/src/theme/_colors.scss index a954ba43a08..f10fd623c7f 100644 --- a/src/theme/_colors.scss +++ b/src/theme/_colors.scss @@ -2,6 +2,13 @@ // ----------------------------- // http://www.google.com/design/spec/style/color.html +// Text +// ---------------------------- + +$color-text: rgba(0,0,0,.87); +$color-text-secondary: rgba(0,0,0,.54); +$color-text-hint: rgba(0,0,0,.26); +$color-divider: rgba(0,0,0,.12); // Red // ----------------------------