Adding icon font and wsk-icon utility classes
- Added Material-Design-Iconic-Font, while we're waiting for the official one - Added SASS variables for all the characters - Added a wsk-icon--<icon-name> class for every icon - Modified wsk-layout to use menu icon for opening the drawer, and chevrons for scrolling tabs - Modified tooltip demo to use icons rather than inline SVGs - Modified icon-toggle demo to use icons - Modified FAB and icon button demos to use iconsmaster
Sérgio Gomes
parent
d6b72823af
commit
7226fb0036
|
|
@ -0,0 +1,429 @@
|
|||
https://github.com/zavoloklom/material-design-iconic-font/blob/master/License.md
|
||||
https://github.com/google/material-design-icons/blob/master/LICENSE
|
||||
|
||||
|
||||
Attribution-ShareAlike 4.0 International
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons Corporation ("Creative Commons") is not a law firm and
|
||||
does not provide legal services or legal advice. Distribution of
|
||||
Creative Commons public licenses does not create a lawyer-client or
|
||||
other relationship. Creative Commons makes its licenses and related
|
||||
information available on an "as-is" basis. Creative Commons gives no
|
||||
warranties regarding its licenses, any material licensed under their
|
||||
terms and conditions, or any related information. Creative Commons
|
||||
disclaims all liability for damages resulting from their use to the
|
||||
fullest extent possible.
|
||||
|
||||
Using Creative Commons Public Licenses
|
||||
|
||||
Creative Commons public licenses provide a standard set of terms and
|
||||
conditions that creators and other rights holders may use to share
|
||||
original works of authorship and other material subject to copyright
|
||||
and certain other rights specified in the public license below. The
|
||||
following considerations are for informational purposes only, are not
|
||||
exhaustive, and do not form part of our licenses.
|
||||
|
||||
Considerations for licensors: Our public licenses are
|
||||
intended for use by those authorized to give the public
|
||||
permission to use material in ways otherwise restricted by
|
||||
copyright and certain other rights. Our licenses are
|
||||
irrevocable. Licensors should read and understand the terms
|
||||
and conditions of the license they choose before applying it.
|
||||
Licensors should also secure all rights necessary before
|
||||
applying our licenses so that the public can reuse the
|
||||
material as expected. Licensors should clearly mark any
|
||||
material not subject to the license. This includes other CC-
|
||||
licensed material, or material used under an exception or
|
||||
limitation to copyright. More considerations for licensors:
|
||||
wiki.creativecommons.org/Considerations_for_licensors
|
||||
|
||||
Considerations for the public: By using one of our public
|
||||
licenses, a licensor grants the public permission to use the
|
||||
licensed material under specified terms and conditions. If
|
||||
the licensor's permission is not necessary for any reason--for
|
||||
example, because of any applicable exception or limitation to
|
||||
copyright--then that use is not regulated by the license. Our
|
||||
licenses grant only permissions under copyright and certain
|
||||
other rights that a licensor has authority to grant. Use of
|
||||
the licensed material may still be restricted for other
|
||||
reasons, including because others have copyright or other
|
||||
rights in the material. A licensor may make special requests,
|
||||
such as asking that all changes be marked or described.
|
||||
Although not required by our licenses, you are encouraged to
|
||||
respect those requests where reasonable. More_considerations
|
||||
for the public:
|
||||
wiki.creativecommons.org/Considerations_for_licensees
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons Attribution-ShareAlike 4.0 International Public
|
||||
License
|
||||
|
||||
By exercising the Licensed Rights (defined below), You accept and agree
|
||||
to be bound by the terms and conditions of this Creative Commons
|
||||
Attribution-ShareAlike 4.0 International Public License ("Public
|
||||
License"). To the extent this Public License may be interpreted as a
|
||||
contract, You are granted the Licensed Rights in consideration of Your
|
||||
acceptance of these terms and conditions, and the Licensor grants You
|
||||
such rights in consideration of benefits the Licensor receives from
|
||||
making the Licensed Material available under these terms and
|
||||
conditions.
|
||||
|
||||
|
||||
Section 1 -- Definitions.
|
||||
|
||||
a. Adapted Material means material subject to Copyright and Similar
|
||||
Rights that is derived from or based upon the Licensed Material
|
||||
and in which the Licensed Material is translated, altered,
|
||||
arranged, transformed, or otherwise modified in a manner requiring
|
||||
permission under the Copyright and Similar Rights held by the
|
||||
Licensor. For purposes of this Public License, where the Licensed
|
||||
Material is a musical work, performance, or sound recording,
|
||||
Adapted Material is always produced where the Licensed Material is
|
||||
synched in timed relation with a moving image.
|
||||
|
||||
b. Adapter's License means the license You apply to Your Copyright
|
||||
and Similar Rights in Your contributions to Adapted Material in
|
||||
accordance with the terms and conditions of this Public License.
|
||||
|
||||
c. BY-SA Compatible License means a license listed at
|
||||
creativecommons.org/compatiblelicenses, approved by Creative
|
||||
Commons as essentially the equivalent of this Public License.
|
||||
|
||||
d. Copyright and Similar Rights means copyright and/or similar rights
|
||||
closely related to copyright including, without limitation,
|
||||
performance, broadcast, sound recording, and Sui Generis Database
|
||||
Rights, without regard to how the rights are labeled or
|
||||
categorized. For purposes of this Public License, the rights
|
||||
specified in Section 2(b)(1)-(2) are not Copyright and Similar
|
||||
Rights.
|
||||
|
||||
e. Effective Technological Measures means those measures that, in the
|
||||
absence of proper authority, may not be circumvented under laws
|
||||
fulfilling obligations under Article 11 of the WIPO Copyright
|
||||
Treaty adopted on December 20, 1996, and/or similar international
|
||||
agreements.
|
||||
|
||||
f. Exceptions and Limitations means fair use, fair dealing, and/or
|
||||
any other exception or limitation to Copyright and Similar Rights
|
||||
that applies to Your use of the Licensed Material.
|
||||
|
||||
g. License Elements means the license attributes listed in the name
|
||||
of a Creative Commons Public License. The License Elements of this
|
||||
Public License are Attribution and ShareAlike.
|
||||
|
||||
h. Licensed Material means the artistic or literary work, database,
|
||||
or other material to which the Licensor applied this Public
|
||||
License.
|
||||
|
||||
i. Licensed Rights means the rights granted to You subject to the
|
||||
terms and conditions of this Public License, which are limited to
|
||||
all Copyright and Similar Rights that apply to Your use of the
|
||||
Licensed Material and that the Licensor has authority to license.
|
||||
|
||||
j. Licensor means the individual(s) or entity(ies) granting rights
|
||||
under this Public License.
|
||||
|
||||
k. Share means to provide material to the public by any means or
|
||||
process that requires permission under the Licensed Rights, such
|
||||
as reproduction, public display, public performance, distribution,
|
||||
dissemination, communication, or importation, and to make material
|
||||
available to the public including in ways that members of the
|
||||
public may access the material from a place and at a time
|
||||
individually chosen by them.
|
||||
|
||||
l. Sui Generis Database Rights means rights other than copyright
|
||||
resulting from Directive 96/9/EC of the European Parliament and of
|
||||
the Council of 11 March 1996 on the legal protection of databases,
|
||||
as amended and/or succeeded, as well as other essentially
|
||||
equivalent rights anywhere in the world.
|
||||
|
||||
m. You means the individual or entity exercising the Licensed Rights
|
||||
under this Public License. Your has a corresponding meaning.
|
||||
|
||||
|
||||
Section 2 -- Scope.
|
||||
|
||||
a. License grant.
|
||||
|
||||
1. Subject to the terms and conditions of this Public License,
|
||||
the Licensor hereby grants You a worldwide, royalty-free,
|
||||
non-sublicensable, non-exclusive, irrevocable license to
|
||||
exercise the Licensed Rights in the Licensed Material to:
|
||||
|
||||
a. reproduce and Share the Licensed Material, in whole or
|
||||
in part; and
|
||||
|
||||
b. produce, reproduce, and Share Adapted Material.
|
||||
|
||||
2. Exceptions and Limitations. For the avoidance of doubt, where
|
||||
Exceptions and Limitations apply to Your use, this Public
|
||||
License does not apply, and You do not need to comply with
|
||||
its terms and conditions.
|
||||
|
||||
3. Term. The term of this Public License is specified in Section
|
||||
6(a).
|
||||
|
||||
4. Media and formats; technical modifications allowed. The
|
||||
Licensor authorizes You to exercise the Licensed Rights in
|
||||
all media and formats whether now known or hereafter created,
|
||||
and to make technical modifications necessary to do so. The
|
||||
Licensor waives and/or agrees not to assert any right or
|
||||
authority to forbid You from making technical modifications
|
||||
necessary to exercise the Licensed Rights, including
|
||||
technical modifications necessary to circumvent Effective
|
||||
Technological Measures. For purposes of this Public License,
|
||||
simply making modifications authorized by this Section 2(a)
|
||||
(4) never produces Adapted Material.
|
||||
|
||||
5. Downstream recipients.
|
||||
|
||||
a. Offer from the Licensor -- Licensed Material. Every
|
||||
recipient of the Licensed Material automatically
|
||||
receives an offer from the Licensor to exercise the
|
||||
Licensed Rights under the terms and conditions of this
|
||||
Public License.
|
||||
|
||||
b. Additional offer from the Licensor -- Adapted Material.
|
||||
Every recipient of Adapted Material from You
|
||||
automatically receives an offer from the Licensor to
|
||||
exercise the Licensed Rights in the Adapted Material
|
||||
under the conditions of the Adapter's License You apply.
|
||||
|
||||
c. No downstream restrictions. You may not offer or impose
|
||||
any additional or different terms or conditions on, or
|
||||
apply any Effective Technological Measures to, the
|
||||
Licensed Material if doing so restricts exercise of the
|
||||
Licensed Rights by any recipient of the Licensed
|
||||
Material.
|
||||
|
||||
6. No endorsement. Nothing in this Public License constitutes or
|
||||
may be construed as permission to assert or imply that You
|
||||
are, or that Your use of the Licensed Material is, connected
|
||||
with, or sponsored, endorsed, or granted official status by,
|
||||
the Licensor or others designated to receive attribution as
|
||||
provided in Section 3(a)(1)(A)(i).
|
||||
|
||||
b. Other rights.
|
||||
|
||||
1. Moral rights, such as the right of integrity, are not
|
||||
licensed under this Public License, nor are publicity,
|
||||
privacy, and/or other similar personality rights; however, to
|
||||
the extent possible, the Licensor waives and/or agrees not to
|
||||
assert any such rights held by the Licensor to the limited
|
||||
extent necessary to allow You to exercise the Licensed
|
||||
Rights, but not otherwise.
|
||||
|
||||
2. Patent and trademark rights are not licensed under this
|
||||
Public License.
|
||||
|
||||
3. To the extent possible, the Licensor waives any right to
|
||||
collect royalties from You for the exercise of the Licensed
|
||||
Rights, whether directly or through a collecting society
|
||||
under any voluntary or waivable statutory or compulsory
|
||||
licensing scheme. In all other cases the Licensor expressly
|
||||
reserves any right to collect such royalties.
|
||||
|
||||
|
||||
Section 3 -- License Conditions.
|
||||
|
||||
Your exercise of the Licensed Rights is expressly made subject to the
|
||||
following conditions.
|
||||
|
||||
a. Attribution.
|
||||
|
||||
1. If You Share the Licensed Material (including in modified
|
||||
form), You must:
|
||||
|
||||
a. retain the following if it is supplied by the Licensor
|
||||
with the Licensed Material:
|
||||
|
||||
i. identification of the creator(s) of the Licensed
|
||||
Material and any others designated to receive
|
||||
attribution, in any reasonable manner requested by
|
||||
the Licensor (including by pseudonym if
|
||||
designated);
|
||||
|
||||
ii. a copyright notice;
|
||||
|
||||
iii. a notice that refers to this Public License;
|
||||
|
||||
iv. a notice that refers to the disclaimer of
|
||||
warranties;
|
||||
|
||||
v. a URI or hyperlink to the Licensed Material to the
|
||||
extent reasonably practicable;
|
||||
|
||||
b. indicate if You modified the Licensed Material and
|
||||
retain an indication of any previous modifications; and
|
||||
|
||||
c. indicate the Licensed Material is licensed under this
|
||||
Public License, and include the text of, or the URI or
|
||||
hyperlink to, this Public License.
|
||||
|
||||
2. You may satisfy the conditions in Section 3(a)(1) in any
|
||||
reasonable manner based on the medium, means, and context in
|
||||
which You Share the Licensed Material. For example, it may be
|
||||
reasonable to satisfy the conditions by providing a URI or
|
||||
hyperlink to a resource that includes the required
|
||||
information.
|
||||
|
||||
3. If requested by the Licensor, You must remove any of the
|
||||
information required by Section 3(a)(1)(A) to the extent
|
||||
reasonably practicable.
|
||||
|
||||
b. ShareAlike.
|
||||
|
||||
In addition to the conditions in Section 3(a), if You Share
|
||||
Adapted Material You produce, the following conditions also apply.
|
||||
|
||||
1. The Adapter's License You apply must be a Creative Commons
|
||||
license with the same License Elements, this version or
|
||||
later, or a BY-SA Compatible License.
|
||||
|
||||
2. You must include the text of, or the URI or hyperlink to, the
|
||||
Adapter's License You apply. You may satisfy this condition
|
||||
in any reasonable manner based on the medium, means, and
|
||||
context in which You Share Adapted Material.
|
||||
|
||||
3. You may not offer or impose any additional or different terms
|
||||
or conditions on, or apply any Effective Technological
|
||||
Measures to, Adapted Material that restrict exercise of the
|
||||
rights granted under the Adapter's License You apply.
|
||||
|
||||
|
||||
Section 4 -- Sui Generis Database Rights.
|
||||
|
||||
Where the Licensed Rights include Sui Generis Database Rights that
|
||||
apply to Your use of the Licensed Material:
|
||||
|
||||
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
|
||||
to extract, reuse, reproduce, and Share all or a substantial
|
||||
portion of the contents of the database;
|
||||
|
||||
b. if You include all or a substantial portion of the database
|
||||
contents in a database in which You have Sui Generis Database
|
||||
Rights, then the database in which You have Sui Generis Database
|
||||
Rights (but not its individual contents) is Adapted Material,
|
||||
|
||||
including for purposes of Section 3(b); and
|
||||
c. You must comply with the conditions in Section 3(a) if You Share
|
||||
all or a substantial portion of the contents of the database.
|
||||
|
||||
For the avoidance of doubt, this Section 4 supplements and does not
|
||||
replace Your obligations under this Public License where the Licensed
|
||||
Rights include other Copyright and Similar Rights.
|
||||
|
||||
|
||||
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
|
||||
|
||||
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
|
||||
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
|
||||
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
|
||||
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
|
||||
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
|
||||
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
|
||||
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
|
||||
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
|
||||
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
|
||||
|
||||
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
|
||||
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
|
||||
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
|
||||
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
|
||||
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
|
||||
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
|
||||
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
|
||||
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
|
||||
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
|
||||
|
||||
c. The disclaimer of warranties and limitation of liability provided
|
||||
above shall be interpreted in a manner that, to the extent
|
||||
possible, most closely approximates an absolute disclaimer and
|
||||
waiver of all liability.
|
||||
|
||||
|
||||
Section 6 -- Term and Termination.
|
||||
|
||||
a. This Public License applies for the term of the Copyright and
|
||||
Similar Rights licensed here. However, if You fail to comply with
|
||||
this Public License, then Your rights under this Public License
|
||||
terminate automatically.
|
||||
|
||||
b. Where Your right to use the Licensed Material has terminated under
|
||||
Section 6(a), it reinstates:
|
||||
|
||||
1. automatically as of the date the violation is cured, provided
|
||||
it is cured within 30 days of Your discovery of the
|
||||
violation; or
|
||||
|
||||
2. upon express reinstatement by the Licensor.
|
||||
|
||||
For the avoidance of doubt, this Section 6(b) does not affect any
|
||||
right the Licensor may have to seek remedies for Your violations
|
||||
of this Public License.
|
||||
|
||||
c. For the avoidance of doubt, the Licensor may also offer the
|
||||
Licensed Material under separate terms or conditions or stop
|
||||
distributing the Licensed Material at any time; however, doing so
|
||||
will not terminate this Public License.
|
||||
|
||||
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
|
||||
License.
|
||||
|
||||
|
||||
Section 7 -- Other Terms and Conditions.
|
||||
|
||||
a. The Licensor shall not be bound by any additional or different
|
||||
terms or conditions communicated by You unless expressly agreed.
|
||||
|
||||
b. Any arrangements, understandings, or agreements regarding the
|
||||
Licensed Material not stated herein are separate from and
|
||||
independent of the terms and conditions of this Public License.
|
||||
|
||||
|
||||
Section 8 -- Interpretation.
|
||||
|
||||
a. For the avoidance of doubt, this Public License does not, and
|
||||
shall not be interpreted to, reduce, limit, restrict, or impose
|
||||
conditions on any use of the Licensed Material that could lawfully
|
||||
be made without permission under this Public License.
|
||||
|
||||
b. To the extent possible, if any provision of this Public License is
|
||||
deemed unenforceable, it shall be automatically reformed to the
|
||||
minimum extent necessary to make it enforceable. If the provision
|
||||
cannot be reformed, it shall be severed from this Public License
|
||||
without affecting the enforceability of the remaining terms and
|
||||
conditions.
|
||||
|
||||
c. No term or condition of this Public License will be waived and no
|
||||
failure to comply consented to unless expressly agreed to by the
|
||||
Licensor.
|
||||
|
||||
d. Nothing in this Public License constitutes or may be interpreted
|
||||
as a limitation upon, or waiver of, any privileges and immunities
|
||||
that apply to the Licensor or You, including from the legal
|
||||
processes of any jurisdiction or authority.
|
||||
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons is not a party to its public licenses.
|
||||
Notwithstanding, Creative Commons may elect to apply one of its public
|
||||
licenses to material it publishes and in those instances will be
|
||||
considered the "Licensor." Except for the limited purpose of indicating
|
||||
that material is shared under a Creative Commons public license or as
|
||||
otherwise permitted by the Creative Commons policies published at
|
||||
creativecommons.org/policies, Creative Commons does not authorize the
|
||||
use of the trademark "Creative Commons" or any other trademark or logo
|
||||
of Creative Commons without its prior written consent including,
|
||||
without limitation, in connection with any unauthorized modifications
|
||||
to any of its public licenses or any other arrangements,
|
||||
understandings, or agreements concerning use of licensed material. For
|
||||
the avoidance of doubt, this paragraph does not form part of the public
|
||||
licenses.
|
||||
|
||||
Creative Commons may be contacted at creativecommons.org.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -133,8 +133,7 @@
|
|||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Icons</h1>
|
||||
<p>See the material-design-icons pack that can be installed in your node_modules directory
|
||||
after running <code>npm install</code></p>
|
||||
<iframe src="./styleguide/icons/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -141,11 +141,23 @@ $button-icon-size-mini: 24px !default;
|
|||
overflow: hidden;
|
||||
background: $button-primary-color;
|
||||
@include shadow-z1();
|
||||
position: relative;
|
||||
|
||||
& .wsk-icon {
|
||||
position: absolute;
|
||||
top: ($button-fab-size - $button-fab-font-size) / 2;
|
||||
left: ($button-fab-size - $button-fab-font-size) / 2;
|
||||
}
|
||||
|
||||
&.wsk-button--mini-fab {
|
||||
height: $button-fab-size-mini;
|
||||
min-width: $button-fab-size-mini;
|
||||
width: $button-fab-size-mini;
|
||||
|
||||
& .wsk-icon {
|
||||
top: ($button-fab-size-mini - $button-fab-font-size) / 2;
|
||||
left: ($button-fab-size-mini - $button-fab-font-size) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
& .wsk-button__ripple-container {
|
||||
|
|
@ -206,10 +218,21 @@ $button-icon-size-mini: 24px !default;
|
|||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
& .wsk-icon {
|
||||
position: absolute;
|
||||
top: ($button-icon-size - $button-fab-font-size) / 2;
|
||||
left: ($button-icon-size - $button-fab-font-size) / 2;
|
||||
}
|
||||
|
||||
&.wsk-button--mini-icon {
|
||||
height: $button-icon-size-mini;
|
||||
min-width: $button-icon-size-mini;
|
||||
width: $button-icon-size-mini;
|
||||
|
||||
& .wsk-icon {
|
||||
top: ($button-icon-size-mini - $button-fab-font-size) / 2;
|
||||
left: ($button-icon-size-mini - $button-fab-font-size) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
& .wsk-button__ripple-container {
|
||||
|
|
|
|||
|
|
@ -17,38 +17,38 @@
|
|||
|
||||
<div class="button-block">Flat: <button class="wsk-button wsk-js-button">Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised">Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab">♥</button></div>
|
||||
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon">♥</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon"><span class="wsk-icon wsk-icon--create"/></button></div>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect">Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect">Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect">♥</button></div>
|
||||
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect">♥</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--create"/></button></div>
|
||||
|
||||
<h2>.wsk-button--colored</h2>
|
||||
|
||||
<div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-button--colored">Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored">Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored">♥</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-button--colored wsk-js-ripple-effect">Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored wsk-js-ripple-effect">Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-js-ripple-effect">♥</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
|
||||
<h2>.wsk-button--mini-fab</h2>
|
||||
|
||||
<div class="button-block"><button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab wsk-js-ripple-effect">♥</button></div>
|
||||
<div class="button-block"><button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab wsk-js-ripple-effect"><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect" disabled>Flat</button></div>
|
||||
<div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect" disabled>Raised</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect" disabled>♥</button></div>
|
||||
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect" disabled>♥</button></div>
|
||||
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect" disabled><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect" disabled><span class="wsk-icon wsk-icon--add"/></button></div>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
|
||||
<script src="../wskComponentHandler.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import "../shadow/_shadow";
|
||||
@import "../icons/_icons";
|
||||
@import "_button";
|
||||
|
||||
.button-block {
|
||||
|
|
|
|||
|
|
@ -19,22 +19,17 @@
|
|||
<div class="button-block">
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" class="wsk-icon-toggle__input" />
|
||||
<span class="wsk-icon-toggle__label">♠</span>
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-bold"></span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" class="wsk-icon-toggle__input" />
|
||||
<span class="wsk-icon-toggle__label">♣</span>
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-italic"></span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="checkbox-3">
|
||||
<input type="checkbox" id="checkbox-3" class="wsk-icon-toggle__input" />
|
||||
<span class="wsk-icon-toggle__label">♥</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="checkbox-4">
|
||||
<input type="checkbox" id="checkbox-4" class="wsk-icon-toggle__input" />
|
||||
<span class="wsk-icon-toggle__label">♦</span>
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-underline"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -43,22 +38,17 @@
|
|||
<div class="button-block">
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="disabled-checkbox-1">
|
||||
<input type="checkbox" id="disabled-checkbox-1" class="wsk-icon-toggle__input" disabled />
|
||||
<span class="wsk-icon-toggle__label">♠</span>
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-bold"></span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="disabled-checkbox-2">
|
||||
<input type="checkbox" id="disabled-checkbox-2" class="wsk-icon-toggle__input" disabled />
|
||||
<span class="wsk-icon-toggle__label">♣</span>
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-italic"></span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="disabled-checkbox-3">
|
||||
<input type="checkbox" id="disabled-checkbox-3" class="wsk-icon-toggle__input" disabled />
|
||||
<span class="wsk-icon-toggle__label">♥</span>
|
||||
</label>
|
||||
|
||||
<label class="wsk-icon-toggle wsk-js-icon-toggle wsk-js-ripple-effect" for="disabled-checkbox-4">
|
||||
<input type="checkbox" id="disabled-checkbox-4" class="wsk-icon-toggle__input" disabled />
|
||||
<span class="wsk-icon-toggle__label">♦</span>
|
||||
<span class="wsk-icon-toggle__label wsk-icon wsk-icon--format-underline"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import "../icons/_icons";
|
||||
@import "_icon-toggle";
|
||||
|
||||
.button-block {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,6 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import "../typography/typography";
|
||||
@import "_icons";
|
||||
|
||||
$icon-border-color: #ccc;
|
||||
|
||||
|
|
@ -8,30 +9,9 @@ h2 {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.preview {
|
||||
min-width: 85px;
|
||||
min-height: 85px;
|
||||
max-width: 80px;
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
float: left;
|
||||
text-align: center;
|
||||
border: 1px solid $icon-border-color;
|
||||
}
|
||||
|
||||
.preview a {
|
||||
display: block;
|
||||
text-transform: capitalize;
|
||||
position: relative;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview img {
|
||||
width: 48px;
|
||||
position: relative;
|
||||
.wsk-icon {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
min-width: 24px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
@import '../shadow/shadow';
|
||||
@import '../typography/typography';
|
||||
@import '../animation/animation';
|
||||
@import '../icons/icons';
|
||||
|
||||
// Dimensions
|
||||
$layout-drawer-narrow: 240px;
|
||||
|
|
@ -178,8 +179,8 @@ $layout-tab-highlight-thickness: 2px;
|
|||
z-index: 3;
|
||||
|
||||
&::after {
|
||||
// TODO(sgomes): Replace with proper menu icon once we have an icon font.
|
||||
content: '☰';
|
||||
@include wsk-icon();
|
||||
content: $icon-menu;
|
||||
}
|
||||
|
||||
.wsk-layout--overlay-drawer-button > & {
|
||||
|
|
@ -197,6 +198,7 @@ $layout-tab-highlight-thickness: 2px;
|
|||
width: $layout-header-icon-size;
|
||||
color: $layout-header-text-color;
|
||||
background-color: $layout-header-bg-color;
|
||||
z-index: 5;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
left: $layout-header-basic-mobile-indent;
|
||||
|
|
@ -554,9 +556,9 @@ $layout-tab-highlight-thickness: 2px;
|
|||
left: 0;
|
||||
|
||||
&::after {
|
||||
// TODO(sgomes): replace with left chevron when we have an icon font.
|
||||
font-size: 26px;
|
||||
content: "<";
|
||||
@include wsk-icon();
|
||||
content: $icon-chevron-left;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -564,9 +566,9 @@ $layout-tab-highlight-thickness: 2px;
|
|||
right: 0;
|
||||
|
||||
&::after {
|
||||
// TODO(sgomes): replace with left chevron when we have an icon font.
|
||||
font-size: 26px;
|
||||
content: ">";
|
||||
@include wsk-icon();
|
||||
content: $icon-chevron-right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,46 +16,25 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div class="PreviewBlock">
|
||||
<div class="preview-block">
|
||||
|
||||
<div id="el1" class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24h-24z" fill="none" />
|
||||
<path d="M14 2h-8c-1.1 0-1.99.9-1.99 2l-.01 16c0 1.1.89 2 1.99 2h12.01c1.1 0 2-.9 2-2v-12l-6-6zm2 14h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2zm-3-7v-5.5l5.5 5.5h-5.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div id="el1" class="icon wsk-icon wsk-icon--note-add"></div>
|
||||
<div class="wsk-tooltip" for="el1">
|
||||
Simple tooltip
|
||||
</div>
|
||||
|
||||
<div id="el2" class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M0 0h18v18h-18z" fill="none" />
|
||||
<path d="M6 8c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-3 5.5c2.14 0 3.92-1.5 4.38-3.5h-8.76c.46 2 2.24 3.5 4.38 3.5zm0-12.5c-4.43 0-8 3.58-8 8s3.57 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div id="el2" class="icon wsk-icon wsk-icon--mood"></div>
|
||||
<div class="wsk-tooltip" for="el2">
|
||||
This is a
|
||||
<strong>rich tooltip</strong>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="el3" class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M0 0h18v18h-18z" fill="none" />
|
||||
<path d="M6 8c1.11 0 2-.9 2-2s-.89-2-2-2c-1.1 0-2 .9-2 2s.9 2 2 2zm6 0c1.11 0 2-.9 2-2s-.89-2-2-2c-1.11 0-2 .9-2 2s.9 2 2 2zm-6 1.2c-1.67 0-5 .83-5 2.5v1.3h10v-1.3c0-1.67-3.33-2.5-5-2.5zm6 0c-.25 0-.54.02-.84.06.79.6 1.34 1.4 1.34 2.44v1.3h4.5v-1.3c0-1.67-3.33-2.5-5-2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="el3" class="icon wsk-icon wsk-icon--group"></div>
|
||||
<div class="wsk-tooltip" for="el3">
|
||||
This is an example of a long tooltip that wraps
|
||||
</div>
|
||||
<div id="el4" class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M0 0h18v18h-18z" fill="none" />
|
||||
<path d="M2 13.5h14v-1.5h-14v1.5zm0-4h14v-1.5h-14v1.5zm0-5.5v1.5h14v-1.5h-14z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="el4" class="icon wsk-icon wsk-icon--menu"></div>
|
||||
<div class="wsk-tooltip wsk-tooltip--large" for="el4">
|
||||
Element with a large tooltip
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import "../icons/_icons";
|
||||
@import "_tooltip";
|
||||
|
||||
body {
|
||||
|
|
@ -19,13 +20,14 @@ body {
|
|||
display: inline-block;
|
||||
height: 21px;
|
||||
margin: 0 50px;
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 21px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
icon:hover {
|
||||
.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue