third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab.html - Issue 1187823002: Update Polymer components and re-run reproduce.sh

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab.html

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Rebase Created 5 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-fab/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!--	1 <!--

2 @license	2 @license

3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.	3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt	4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt	5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

7 Code distributed by Google as part of the polymer project is also	7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

9 --><html><head><link rel="import" href="../polymer/polymer.html">	9 --><html><head><link rel="import" href="../polymer/polymer.html">

10 <link rel="import" href="../iron-icon/iron-icon.html">	10 <link rel="import" href="../iron-icon/iron-icon.html">

(...skipping 22 matching lines...) Expand all Loading...
33 <paper-fab mini icon="favorite"></paper-fab>	33 <paper-fab mini icon="favorite"></paper-fab>

34 <paper-fab src="star.png"></paper-fab>	34 <paper-fab src="star.png"></paper-fab>

35	35

36	36

37 ### Styling	37 ### Styling

38	38

39 The following custom properties and mixins are available for styling:	39 The following custom properties and mixins are available for styling:

40	40

41 Custom property \| Description \| Default	41 Custom property \| Description \| Default

42 ----------------\|-------------\|----------	42 ----------------\|-------------\|----------

43 `--paper-fab-background` \| The background color of the button \| `--paper-indigo- 500`	43 `--paper-fab-background` \| The background color of the button \| `--accent-color`

	44 `--paper-fab-keyboard-focus-background` \| The background color of the button whe n focused \| `--paper-pink-900`

44 `--paper-fab-disabled-background` \| The background color of the button when it's disabled \| `--paper-grey-300`	45 `--paper-fab-disabled-background` \| The background color of the button when it's disabled \| `--paper-grey-300`

45 `--paper-fab-disabled-text` \| The text color of the button when it's disabled \| `--paper-grey-500`	46 `--paper-fab-disabled-text` \| The text color of the button when it's disabled \| `--paper-grey-500`

46 `--paper-fab` \| Mixin applied to the button \| `{}`	47 `--paper-fab` \| Mixin applied to the button \| `{}`

47 `--paper-fab-mini` \| Mixin applied to a mini button \| `{}`	48 `--paper-fab-mini` \| Mixin applied to a mini button \| `{}`

48 `--paper-fab-disabled` \| Mixin applied to a disabled button \| `{}`	49 `--paper-fab-disabled` \| Mixin applied to a disabled button \| `{}`

49	50

50 @group Paper Elements	51 @group Paper Elements

51 @demo demo/index.html	52 @demo demo/index.html

52	53

53 -->	54 -->

54	55

55 </head><body><dom-module id="paper-fab">	56 </head><body><dom-module id="paper-fab">

56 <style>	57 <style>

57	58

58 :host {	59 :host {

59 display: inline-block;	60 display: inline-block;

60 position: relative;	61 position: relative;

61 outline: none;	62 outline: none;

62 -moz-user-select: none;	63 -moz-user-select: none;

63 -ms-user-select: none;	64 -ms-user-select: none;

64 -webkit-user-select: none;	65 -webkit-user-select: none;

65 user-select: none;	66 user-select: none;

66 cursor: pointer;	67 cursor: pointer;

67	68

68 box-sizing: border-box;	69 box-sizing: border-box;

69 min-width: 0;	70 min-width: 0;

70 width: 56px;	71 width: 56px;

71 height: 56px;	72 height: 56px;

72 background: var(--paper-fab-background, --paper-indigo-500);	73 background: var(--paper-fab-background, --accent-color);

73 color: var(--text-primary-color);	74 color: var(--text-primary-color);

74 border-radius: 50%;	75 border-radius: 50%;

75 padding: 16px;	76 padding: 16px;

76	77

77 z-index: 0;	78 z-index: 0;

78	79

79 @apply(--paper-fab);	80 @apply(--paper-fab);

80 }	81 }

81	82

82 :host([mini]) {	83 :host([mini]) {

83 width: 40px;	84 width: 40px;

84 height: 40px;	85 height: 40px;

85 padding: 8px;	86 padding: 8px;

86	87

87 @apply(--paper-fab-mini);	88 @apply(--paper-fab-mini);

88 }	89 }

89	90

90 :host([disabled]) {	91 :host([disabled]) {

91 color: var(--paper-fab-disabled-text, --paper-grey-500);	92 color: var(--paper-fab-disabled-text, --paper-grey-500);

92 background: var(--paper-fab-disabled-background, --paper-grey-300);	93 background: var(--paper-fab-disabled-background, --paper-grey-300);

93 @apply(--paper-fab-disabled);	94 @apply(--paper-fab-disabled);

94 }	95 }

95	96

96 paper-material {	97 paper-material {

97 border-radius: inherit;	98 border-radius: inherit;

	99 @apply(--layout-fit);

	100 @apply(--layout-vertical);

	101 @apply(--layout-center-center);

	102 }

	103

	104 .keyboard-focus {

	105 background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);

98 }	106 }

99 </style>	107 </style>

100 <template>	108 <template>

101 <paper-ripple></paper-ripple>	109 <paper-ripple></paper-ripple>

102 <paper-material class="content fit flex layout vertical center-center" eleva tion="[[elevation]]" animated="">	110 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated="">

103 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>	111 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>

104 </paper-material>	112 </paper-material>

105 </template>	113 </template>

106 </dom-module>	114 </dom-module>

107 <script src="paper-fab-extracted.js"></script></body></html>	115 <script src="paper-fab-extracted.js"></script></body></html>

OLD	NEW