diff --git a/docs/app/css/style.css b/docs/app/css/style.css index f022644a1d1..80bc8988d35 100644 --- a/docs/app/css/style.css +++ b/docs/app/css/style.css @@ -554,7 +554,7 @@ md-content.demo-source-container > hljs > pre > code.highlight { } .dashed-bottom { - border-bottom: dashed 1px rgb(224, 224, 224);; + border-bottom: dashed 1px rgb(224, 224, 224); padding-bottom: 10px; } diff --git a/docs/app/img/icons/copy.svg b/docs/app/img/icons/copy.svg new file mode 100644 index 00000000000..51ab2e6064f --- /dev/null +++ b/docs/app/img/icons/copy.svg @@ -0,0 +1 @@ + diff --git a/docs/app/img/icons/copy2.svg b/docs/app/img/icons/copy2.svg new file mode 100644 index 00000000000..8609b587c08 --- /dev/null +++ b/docs/app/img/icons/copy2.svg @@ -0,0 +1 @@ + diff --git a/docs/app/img/icons/facebook.svg b/docs/app/img/icons/facebook.svg new file mode 100644 index 00000000000..a18345ddfd0 --- /dev/null +++ b/docs/app/img/icons/facebook.svg @@ -0,0 +1 @@ + diff --git a/docs/app/img/icons/hangout.svg b/docs/app/img/icons/hangout.svg new file mode 100644 index 00000000000..d16fde786b8 --- /dev/null +++ b/docs/app/img/icons/hangout.svg @@ -0,0 +1 @@ + diff --git a/docs/app/img/icons/mail.svg b/docs/app/img/icons/mail.svg new file mode 100644 index 00000000000..8a36e4971ec --- /dev/null +++ b/docs/app/img/icons/mail.svg @@ -0,0 +1 @@ + diff --git a/docs/app/img/icons/message.svg b/docs/app/img/icons/message.svg new file mode 100644 index 00000000000..10d347dac1a --- /dev/null +++ b/docs/app/img/icons/message.svg @@ -0,0 +1 @@ + diff --git a/docs/app/img/icons/print.svg b/docs/app/img/icons/print.svg new file mode 100644 index 00000000000..91365b29db2 --- /dev/null +++ b/docs/app/img/icons/print.svg @@ -0,0 +1 @@ + diff --git a/docs/app/img/icons/share-arrow.svg b/docs/app/img/icons/share-arrow.svg new file mode 100644 index 00000000000..2d6befc0093 --- /dev/null +++ b/docs/app/img/icons/share-arrow.svg @@ -0,0 +1 @@ + diff --git a/docs/app/img/icons/twitter.svg b/docs/app/img/icons/twitter.svg new file mode 100644 index 00000000000..e4f85eb8760 --- /dev/null +++ b/docs/app/img/icons/twitter.svg @@ -0,0 +1,2 @@ + diff --git a/docs/app/img/icons/upload.svg b/docs/app/img/icons/upload.svg new file mode 100644 index 00000000000..6a673db1219 --- /dev/null +++ b/docs/app/img/icons/upload.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/bottomSheet.scss b/src/components/bottomSheet/bottomSheet.scss index 01015718b48..43ee2b778f4 100644 --- a/src/components/bottomSheet/bottomSheet.scss +++ b/src/components/bottomSheet/bottomSheet.scss @@ -146,6 +146,7 @@ md-bottom-sheet { } .md-grid-item-content { + border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; diff --git a/src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html b/src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html index cee2600e133..8feaef22ef8 100644 --- a/src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html +++ b/src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html @@ -2,10 +2,8 @@ - -
- -
+ +
{{ item.name }}
diff --git a/src/components/bottomSheet/demoBasicUsage/bottom-sheet-list-template.html b/src/components/bottomSheet/demoBasicUsage/bottom-sheet-list-template.html index 3482205185d..1ed4c1582f7 100644 --- a/src/components/bottomSheet/demoBasicUsage/bottom-sheet-list-template.html +++ b/src/components/bottomSheet/demoBasicUsage/bottom-sheet-list-template.html @@ -2,9 +2,8 @@ Comment Actions - - - + + {{ item.name }} diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/copy.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/copy.svg new file mode 100644 index 00000000000..51ab2e6064f --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/copy.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/copy2.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/copy2.svg new file mode 100644 index 00000000000..8609b587c08 --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/copy2.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/facebook.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/facebook.svg new file mode 100644 index 00000000000..a18345ddfd0 --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/facebook.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/hangout.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/hangout.svg new file mode 100644 index 00000000000..d16fde786b8 --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/hangout.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/mail.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/mail.svg new file mode 100644 index 00000000000..8a36e4971ec --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/mail.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/message.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/message.svg new file mode 100644 index 00000000000..10d347dac1a --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/message.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/print.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/print.svg new file mode 100644 index 00000000000..91365b29db2 --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/print.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/share-arrow.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/share-arrow.svg new file mode 100644 index 00000000000..2d6befc0093 --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/share-arrow.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/twitter.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/twitter.svg new file mode 100644 index 00000000000..e4f85eb8760 --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/twitter.svg @@ -0,0 +1,2 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/img/icons/upload.svg b/src/components/bottomSheet/demoBasicUsage/img/icons/upload.svg new file mode 100644 index 00000000000..6a673db1219 --- /dev/null +++ b/src/components/bottomSheet/demoBasicUsage/img/icons/upload.svg @@ -0,0 +1 @@ + diff --git a/src/components/bottomSheet/demoBasicUsage/index.html b/src/components/bottomSheet/demoBasicUsage/index.html index b3fee6f9ee6..49e511847f2 100644 --- a/src/components/bottomSheet/demoBasicUsage/index.html +++ b/src/components/bottomSheet/demoBasicUsage/index.html @@ -2,11 +2,10 @@

Bottom sheet can be dismissed with the service or a swipe down.

-
+
Show as List -
Show as Grid diff --git a/src/components/bottomSheet/demoBasicUsage/script.js b/src/components/bottomSheet/demoBasicUsage/script.js index 25351a284b3..c3f64e5d8d1 100644 --- a/src/components/bottomSheet/demoBasicUsage/script.js +++ b/src/components/bottomSheet/demoBasicUsage/script.js @@ -1,5 +1,17 @@ angular.module('bottomSheetDemo1', ['ngMaterial']) - +.config(function($mdIconProvider) { + $mdIconProvider + .icon('share-arrow', 'img/icons/share-arrow.svg', 24) + .icon('upload', 'img/icons/upload.svg', 24) + .icon('copy', 'img/icons/copy.svg', 24) + .icon('print', 'img/icons/print.svg', 24) + .icon('hangout', 'img/icons/hangout.svg', 24) + .icon('mail', 'img/icons/mail.svg', 24) + .icon('message', 'img/icons/message.svg', 24) + .icon('copy2', 'img/icons/copy2.svg', 24) + .icon('facebook', 'img/icons/facebook.svg', 24) + .icon('twitter', 'img/icons/twitter.svg', 24); + }) .controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet) { $scope.alert = ''; @@ -29,7 +41,7 @@ angular.module('bottomSheetDemo1', ['ngMaterial']) .controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) { $scope.items = [ - { name: 'Share', icon: 'share' }, + { name: 'Share', icon: 'share-arrow' }, { name: 'Upload', icon: 'upload' }, { name: 'Copy', icon: 'copy' }, { name: 'Print this page', icon: 'print' }, @@ -41,12 +53,11 @@ angular.module('bottomSheetDemo1', ['ngMaterial']) }; }) .controller('GridBottomSheetCtrl', function($scope, $mdBottomSheet) { - $scope.items = [ { name: 'Hangout', icon: 'hangout' }, { name: 'Mail', icon: 'mail' }, { name: 'Message', icon: 'message' }, - { name: 'Copy', icon: 'copy' }, + { name: 'Copy', icon: 'copy2' }, { name: 'Facebook', icon: 'facebook' }, { name: 'Twitter', icon: 'twitter' }, ]; @@ -55,4 +66,24 @@ angular.module('bottomSheetDemo1', ['ngMaterial']) var clickedItem = $scope.items[$index]; $mdBottomSheet.hide(clickedItem); }; -}); +}) +.run(function($http, $templateCache) { + + var urls = [ + 'img/icons/share-arrow.svg', + 'img/icons/upload.svg', + 'img/icons/copy.svg', + 'img/icons/print.svg', + 'img/icons/hangout.svg', + 'img/icons/mail.svg', + 'img/icons/message.svg', + 'img/icons/copy2.svg', + 'img/icons/facebook.svg', + 'img/icons/twitter.svg' + ]; + + angular.forEach(urls, function(url) { + $http.get(url, {cache: $templateCache}); + }); + + }); diff --git a/src/components/bottomSheet/demoBasicUsage/style.css b/src/components/bottomSheet/demoBasicUsage/style.css index 6999d9d33c0..b0412285886 100644 --- a/src/components/bottomSheet/demoBasicUsage/style.css +++ b/src/components/bottomSheet/demoBasicUsage/style.css @@ -1,64 +1,17 @@ - -/* Temporary fix until md-icon is working, DO NOT USE! */ -md-inline-list-icon { - display: inline-block; - height: 24px; - width: 24px; -} - .md-inline-list-icon-label { - padding-left: 20px; display: inline-block; - margin-top: -5px; + padding-left: 10px; + padding-right:10px; + margin-top: -10px; height: 24px; vertical-align: middle; -} - -md-inline-list-icon[icon=share] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCINCgkgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItNjE4IiB5PSItMTA4MCIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbCI+DQo8L2c+DQo8ZyBpZD0iSWNvbiI+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiM3ZDdkN2QiIGQ9Ik0yMSwxMWwtNy03djRDNyw5LDQsMTQsMywxOWMyLjUtMy41LDYtNS4xLDExLTUuMVYxOEwyMSwxMXoiLz4NCgkJPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+DQoJPC9nPg0KPC9nPg0KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPg0KCTxnIGRpc3BsYXk9ImlubGluZSI+DQoJPC9nPg0KPC9nPg0KPC9zdmc+'); -} - -md-inline-list-icon[icon=upload] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCINCgkgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbCI+DQo8L2c+DQo8ZyBpZD0iSWNvbiI+DQoJPGc+DQoJCTxyZWN0IGZpbGw9Im5vbmUiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPg0KCQk8cGF0aCBmaWxsPSIjN2Q3ZDdkIiBkPSJNMTkuNCwxMGMtMC43LTMuNC0zLjctNi03LjQtNkM5LjEsNCw2LjYsNS42LDUuNCw4QzIuMyw4LjQsMCwxMC45LDAsMTRjMCwzLjMsMi43LDYsNiw2aDEzYzIuOCwwLDUtMi4yLDUtNQ0KCQkJQzI0LDEyLjQsMjEuOSwxMC4yLDE5LjQsMTB6IE0xNCwxM3Y0aC00di00SDdsNS01bDUsNUgxNHoiLz4NCgk8L2c+DQo8L2c+DQo8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+DQoJPGcgZGlzcGxheT0iaW5saW5lIj4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4='); -} -md-inline-list-icon[icon=copy] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCINCgkgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItNjE4IiB5PSItMTcyMCIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbHMiPg0KPC9nPg0KPGcgaWQ9Ikljb24iPg0KCTxnPg0KCQk8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4NCgkJPHBhdGggZmlsbD0iIzdkN2Q3ZCIgZD0iTTE2LDFINEMyLjksMSwyLDEuOSwyLDN2MTRoMlYzaDEyVjF6IE0xOSw1SDhDNi45LDUsNiw1LjksNiw3djE0YzAsMS4xLDAuOSwyLDIsMmgxMWMxLjEsMCwyLTAuOSwyLTJWNw0KCQkJQzIxLDUuOSwyMC4xLDUsMTksNXogTTE5LDIxSDhWN2gxMVYyMXoiLz4NCgk8L2c+DQo8L2c+DQo8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+DQoJPGcgZGlzcGxheT0iaW5saW5lIj4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4='); } - -md-inline-list-icon[icon=print] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCINCgkgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItNjE4IiB5PSItMTQ2NCIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbCI+DQo8L2c+DQo8ZyBpZD0iSWNvbiI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTE5LDhINWMtMS43LDAtMywxLjMtMywzdjZoNHY0aDEydi00aDR2LTZDMjIsOS4zLDIwLjcsOCwxOSw4eiBNMTYsMTlIOHYtNWg4VjE5eiBNMTksMTJjLTAuNiwwLTEtMC40LTEtMXMwLjQtMSwxLTENCgkJCQljMC42LDAsMSwwLjQsMSwxUzE5LjYsMTIsMTksMTJ6IE0xOCwzSDZ2NGgxMlYzeiIgZmlsbD0iIzdkN2Q3ZCIvPg0KCQk8L2c+DQoJCTxyZWN0IGZpbGw9Im5vbmUiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4NCgk8ZyBkaXNwbGF5PSJpbmxpbmUiPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg=='); -} - -.md-icon-container md-inline-grid-icon { - display: inline-block; +.md-grid-item-content md-icon { height: 48px; width: 48px; } -md-inline-grid-icon[icon=hangout] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCINCgkgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItODM4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbHMiPg0KPC9nPg0KPGcgaWQ9Ikljb24iPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjMTU5RjVDIiBkPSJNMjMsNEMxMy42LDQsNiwxMS42LDYsMjFzNy42LDE3LDE3LDE3aDF2N2M5LjctNC43LDE2LTE1LDE2LTI0QzQwLDExLjYsMzIuNCw0LDIzLDR6IE0yMiwyMmwtMiw0aC0zbDItNGgtM3YtNmg2VjIyeg0KCQkJIE0zMCwyMmwtMiw0aC0zbDItNGgtM3YtNmg2VjIyeiIvPg0KCQk8cmVjdCB4PSIwIiBmaWxsPSJub25lIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiLz4NCgk8L2c+DQo8L2c+DQo8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+DQoJPGcgZGlzcGxheT0iaW5saW5lIj4NCgkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDBFNUZGIiBzdHJva2Utd2lkdGg9IjAuMSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNDIiIHkxPSItMjIzMiIgeDI9IjQyIiB5Mj0iMTMyMCIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K'); -} - -md-inline-grid-icon[icon=mail] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCINCgkgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItODM4IiB5PSItMjg3MiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbHMiPg0KPC9nPg0KPGcgaWQ9Ikljb24iPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjN2Q3ZDdkIiBkPSJNNDAsOEg4Yy0yLjIsMC00LDEuOC00LDRsMCwyNGMwLDIuMiwxLjgsNCw0LDRoMzJjMi4yLDAsNC0xLjgsNC00VjEyQzQ0LDkuOCw0Mi4yLDgsNDAsOHogTTQwLDE2TDI0LDI2TDgsMTZ2LTRsMTYsMTANCgkJCWwxNi0xMFYxNnoiLz4NCgkJPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ii8+DQoJPC9nPg0KPC9nPg0KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPg0KCTxnIGRpc3BsYXk9ImlubGluZSI+DQoJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwRTVGRiIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjQyIiB5MT0iLTI4NzIiIHgyPSI0MiIgeTI9IjY4MCIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K'); -} - -md-inline-grid-icon[icon=message] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCINCgkgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItODM4IiB5PSItMjc0NCIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbHMiPg0KPC9nPg0KPGcgaWQ9Ikljb24iPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjN2Q3ZDdkIiBkPSJNNDAsNEg4QzUuOCw0LDQsNS44LDQsOGwwLDM2bDgtOGgyOGMyLjIsMCw0LTEuOCw0LTRWOEM0NCw1LjgsNDIuMiw0LDQwLDR6IE0zNiwyOEgxMnYtNGgyNFYyOHogTTM2LDIySDEydi00aDI0VjIyeg0KCQkJIE0zNiwxNkgxMnYtNGgyNFYxNnoiLz4NCgkJPHJlY3QgeD0iMCIgZmlsbD0ibm9uZSIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ii8+DQoJPC9nPg0KPC9nPg0KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPg0KCTxnIGRpc3BsYXk9ImlubGluZSI+DQoJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwRTVGRiIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjQyIiB5MT0iLTI3NDQiIHgyPSI0MiIgeTI9IjgwOCIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K'); -} - -md-inline-grid-icon[icon=copy] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCINCgkgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItODM4IiB5PSItMTcyMCIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbHMiPg0KPC9nPg0KPGcgaWQ9Ikljb24iPg0KCTxnPg0KCQk8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiLz4NCgkJPHBhdGggZmlsbD0iIzdkN2Q3ZCIgZD0iTTMyLDJIOEM1LjgsMiw0LDMuOCw0LDZ2MjhoNFY2aDI0VjJ6IE0zOCwxMEgxNmMtMi4yLDAtNCwxLjgtNCw0djI4YzAsMi4yLDEuOCw0LDQsNGgyMmMyLjIsMCw0LTEuOCw0LTRWMTQNCgkJCUM0MiwxMS44LDQwLjIsMTAsMzgsMTB6IE0zOCw0MkgxNlYxNGgyMlY0MnoiLz4NCgk8L2c+DQo8L2c+DQo8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+DQoJPGcgZGlzcGxheT0iaW5saW5lIj4NCgkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDBFNUZGIiBzdHJva2Utd2lkdGg9IjAuMSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNDIiIHkxPSItMTcyMCIgeDI9IjQyIiB5Mj0iMTgzMiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K'); -} - -md-inline-grid-icon[icon=facebook] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCINCgkgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItODM4IiB5PSItMzI1NiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYWJlbCI+DQo8L2c+DQo8ZyBpZD0iSWNvbiI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZmlsbD0iIzdkN2Q3ZCIgZD0iTTQwLDRIOEM1LjgsNCw0LDUuOCw0LDhsMCwzMmMwLDIuMiwxLjgsNCw0LDRoMzJjMi4yLDAsNC0xLjgsNC00VjhDNDQsNS44LDQyLjIsNCw0MCw0eiBNMzgsOHY2aC00Yy0xLjEsMC0yLDAuOS0yLDJ2NA0KCQkJCWg2djZoLTZ2MTRoLTZWMjZoLTR2LTZoNHYtNWMwLTMuOSwzLjEtNyw3LTdIMzh6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4NCgk8ZyBkaXNwbGF5PSJpbmxpbmUiPg0KCQk8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMwMEU1RkYiIHN0cm9rZS13aWR0aD0iMC4xIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI0MiIgeTE9Ii0zMjU2IiB4Mj0iNDIiIHkyPSIyOTYiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg=='); -} - -md-inline-grid-icon[icon=twitter] { - background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDhweCINCgkgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJIZWFkZXIiPg0KCTxnPg0KCQk8cmVjdCB4PSItODM4IiB5PSItOTUyIiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+DQoJPC9nPg0KPC9nPg0KPGcgaWQ9IkxhYmVsIj4NCjwvZz4NCjxnIGlkPSJJY29uIj4NCgk8Zz4NCgkJPGc+DQoJCQk8cGF0aCBmaWxsPSIjN2Q3ZDdkIiBkPSJNNDAsNEg4QzUuOCw0LDQsNS44LDQsOGwwLDMyYzAsMi4yLDEuOCw0LDQsNGgzMmMyLjIsMCw0LTEuOCw0LTRWOEM0NCw1LjgsNDIuMiw0LDQwLDR6IE0zNS40LDE4LjcNCgkJCQljLTAuMSw5LjItNiwxNS42LTE0LjgsMTZjLTMuNiwwLjItNi4zLTEtOC42LTIuNWMyLjcsMC40LDYtMC42LDcuOC0yLjJjLTIuNi0wLjMtNC4yLTEuNi00LjktMy44YzAuOCwwLjEsMS42LDAuMSwyLjMtMC4xDQoJCQkJYy0yLjQtMC44LTQuMS0yLjMtNC4yLTUuM2MwLjcsMC4zLDEuNCwwLjYsMi4zLDAuNmMtMS44LTEtMy4xLTQuNy0xLjYtNy4yYzIuNiwyLjksNS44LDUuMywxMSw1LjZjLTEuMy01LjYsNi4xLTguNiw5LjItNC45DQoJCQkJYzEuMy0wLjMsMi40LTAuOCwzLjQtMS4zYy0wLjQsMS4zLTEuMiwyLjItMi4yLDIuOWMxLjEtMC4xLDIuMS0wLjQsMi45LTAuOEMzNy41LDE2LjksMzYuNCwxNy45LDM1LjQsMTguN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxyZWN0IGZpbGw9Im5vbmUiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPg0KCTxnIGRpc3BsYXk9ImlubGluZSI+DQoJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwRTVGRiIgc3Ryb2tlLXdpZHRoPSIwLjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjQyIiB5MT0iLTk1MiIgeDI9IjQyIiB5Mj0iMjYwMCIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K'); -} - - - +.md-grid-text { + padding-bottom: 5px; + } diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss index b51a7eab942..fd5a5cee664 100644 --- a/src/components/button/button-theme.scss +++ b/src/components/button/button-theme.scss @@ -1,20 +1,26 @@ $button-border-radius: 3px !default; $button-fab-border-radius: 50% !default; -md-toolbar .md-button.md-THEME_NAME-theme.md-fab { - background-color: white; -} - .md-button.md-THEME_NAME-theme { border-radius: $button-border-radius; &:not([disabled]) { - &:hover, &:focus { background-color: '{{background-500-0.2}}'; } } + &.md-fab { + border-radius: $button-fab-border-radius; + background-color: '{{accent-color}}'; + color: '{{accent-contrast}}'; + &:not([disabled]) { + &:focus { + background-color: '{{accent-A700}}'; + } + } + } + &.md-primary { color: '{{primary-color}}'; &.md-raised, @@ -22,7 +28,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { color: '{{primary-contrast}}'; background-color: '{{primary-color}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{primary-600}}'; } @@ -30,23 +35,10 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { } } - &.md-fab { - border-radius: $button-fab-border-radius; - background-color: '{{accent-color}}'; - color: '{{accent-contrast}}'; - &:not([disabled]) { - &:hover, - &:focus { - background-color: '{{accent-A700}}'; - } - } - } - &.md-raised { color: '{{background-contrast}}'; background-color: '{{background-50}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{background-200}}'; } @@ -61,7 +53,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { color: '{{warn-contrast}}'; background-color: '{{warn-color}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{warn-700}}'; } @@ -77,7 +68,6 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { color: '{{accent-contrast}}'; background-color: '{{accent-color}}'; &:not([disabled]) { - &:hover, &:focus { background-color: '{{accent-700}}'; } @@ -88,8 +78,14 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab { &[disabled], &.md-raised[disabled], &.md-fab[disabled] { - color: '{{foreground-3}}'; - background-color: transparent; + color: '{{foreground-2}}'; cursor: not-allowed; } + &.md-raised[disabled], + &.md-fab[disabled] { + background-color: '{{foreground-4}}'; + } + &[disabled] { + background-color: 'transparent'; + } } diff --git a/src/components/button/button.js b/src/components/button/button.js index bb658d24153..014198c6551 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -39,13 +39,22 @@ angular.module('material.components.button', [ * @usage * * - * Button + * Flat Button * - * - * I'm a link + * + * Flat link * - * - * I'm a disabled button + * + * Raised Button + * + * + * Disabled Button + * + * + * + * + * + * * * */ diff --git a/src/components/button/button.scss b/src/components/button/button.scss index b4e40ed492b..f8f27004893 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -1,12 +1,16 @@ -$button-line-height: 25px !default; -$button-padding: 2px 6px 3px !default; +$button-line-height: 3.60rem !default; +$button-padding: 0 0.600rem !default; +$button-margin: 0.600rem 0.800rem !default; +$button-min-width: 8.800rem !default; // Fab buttons -$button-fab-width: 56px !default; -$button-fab-height: 56px !default; -$button-fab-padding: 16px !default; -$button-fab-mini-width: 40px !default; -$button-fab-mini-height: 40px !default; +$button-fab-width: 5.600rem !default; +$button-fab-height: 5.600rem !default; +$button-fab-line-height: 5.600rem !default; +$button-fab-padding: 1.60rem !default; +$button-fab-mini-width: 4.00rem !default; +$button-fab-mini-height: 4.00rem !default; +$button-fab-mini-line-height: 4.00rem !default; $button-fab-toast-offset: $button-fab-height * 0.75; @@ -24,6 +28,7 @@ $button-fab-toast-offset: $button-fab-height * 0.75; } .md-button { + box-sizing: border-box; color: currentColor; user-select: none; @@ -31,8 +36,10 @@ $button-fab-toast-offset: $button-fab-height * 0.75; outline: none; border: 0; - padding: 6px; - margin: 0; + display: inline-block; + padding: $button-padding; + margin: $button-margin; + line-height: $button-line-height; background: transparent; white-space: nowrap; @@ -45,21 +52,24 @@ $button-fab-toast-offset: $button-fab-height * 0.75; font-style: inherit; font-variant: inherit; font-family: inherit; - line-height: inherit; text-decoration: none; cursor: pointer; overflow: hidden; // for ink containment transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function, - background-color $swift-ease-out-duration $swift-ease-out-timing-function, - transform $swift-ease-out-duration $swift-ease-out-timing-function; + background-color $swift-ease-out-duration $swift-ease-out-timing-function; + *, + *:before, + *:after { + box-sizing: border-box; + } &:focus { outline: none; } - &:hover { + &:hover, &:focus { text-decoration: none; } @@ -77,13 +87,15 @@ $button-fab-toast-offset: $button-fab-height * 0.75; } &.md-raised { - transform: translate3d(0, 0, 0); - &:not([disabled]) { @extend .md-shadow-bottom-z-1; } } + &:not(.md-fab) { + min-width: $button-min-width; + } + &.md-fab { @include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto); @@ -93,18 +105,18 @@ $button-fab-toast-offset: $button-fab-height * 0.75; z-index: $z-index-fab; + line-height: $button-fab-line-height; width: $button-fab-width; height: $button-fab-height; + vertical-align: middle; @extend .md-shadow-bottom-z-1; border-radius: 50%; background-clip: padding-box; overflow: hidden; - transform: translate3d(0,0,0); - transition: 0.2s linear; - transition-property: transform, box-shadow; + transition-property: background-color, box-shadow; .md-ripple-container { border-radius: 50%; background-clip: padding-box; @@ -118,10 +130,9 @@ $button-fab-toast-offset: $button-fab-height * 0.75; } &.md-mini { + line-height: $button-fab-mini-line-height; width: $button-fab-mini-width; height: $button-fab-mini-height; - md-icon { - } } } @@ -129,9 +140,10 @@ $button-fab-toast-offset: $button-fab-height * 0.75; &:not([disabled]) { &.md-raised, &.md-fab { - &:focus, - &:hover { - transform: translate3d(0, -1px, 0); + &:focus { + @extend .md-shadow-bottom-z-1; + } + &:active { @extend .md-shadow-bottom-z-2; } } diff --git a/src/components/button/demoBasicUsage/index.html b/src/components/button/demoBasicUsage/index.html index d8ccf60c110..c4dca531b94 100644 --- a/src/components/button/demoBasicUsage/index.html +++ b/src/components/button/demoBasicUsage/index.html @@ -18,13 +18,13 @@
- - + + - - - + + + @@ -33,6 +33,14 @@ + + + + + + + +
FAB
diff --git a/src/components/button/demoBasicUsage/style.css b/src/components/button/demoBasicUsage/style.css index ca8f3a7b681..0be1a48bedb 100644 --- a/src/components/button/demoBasicUsage/style.css +++ b/src/components/button/demoBasicUsage/style.css @@ -1,6 +1,3 @@ - -/** From vulcanized demo **/ - section { background: #f7f7f7; border-radius: 3px; @@ -12,13 +9,9 @@ section { md-content { margin-right: 7px; } -section .md-button:not(.md-fab) { - min-width: 10em; -} section .md-button { - display: block; - margin: 1em; - line-height: 25px; + margin-top: 16px; + margin-bottom: 16px; } .label { position: absolute; diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss index c7154b14a94..98f9fbf9b42 100644 --- a/src/components/dialog/dialog.scss +++ b/src/components/dialog/dialog.scss @@ -59,6 +59,7 @@ md-dialog { > * { margin-left: 8px; + margin-right: 0; } } &.md-content-overflow .md-actions { diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 578c6313463..54f056d676d 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -113,6 +113,10 @@ md-tabs { font-size: 16px; background: transparent no-repeat center center; transition: $swift-ease-in-out; + + &:focus { + outline: none; + } md-icon { position: absolute; top: 50%;