WIP: CSS: update bootstrap, improve figure classes, change row/column display #1745
|
@ -1,79 +0,0 @@
|
|||
# Contributing to Bootstrap
|
||||
|
||||
Looking to contribute something to Bootstrap? **Here's how you can help.**
|
||||
|
||||
|
||||
|
||||
## Reporting issues
|
||||
|
||||
We only accept issues that are bug reports or feature requests. Bugs must be isolated and reproducible problems that we can fix within the Bootstrap core. Please read the following guidelines before opening any issue.
|
||||
|
||||
1. **Search for existing issues.** We get a lot of duplicate issues, and you'd help us out a lot by first checking if someone else has reported the same issue. Moreover, the issue may have already been resolved with a fix available.
|
||||
2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test case](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report.
|
||||
3. **Include a live example.** Make use of jsFiddle or jsBin to share your isolated test cases.
|
||||
4. **Share as much information as possible.** Include operating system and version, browser and version, version of Bootstrap, customized or vanilla build, etc. where appropriate. Also include steps to reproduce the bug.
|
||||
|
||||
|
||||
|
||||
## Pull requests
|
||||
|
||||
- CSS changes must be done in `.less` files first, never just in the compiled `.css` files
|
||||
- If modifying the `.less` files, always recompile and commit the compiled files `bootstrap.css` and `bootstrap.min.css`
|
||||
- Try not to pollute your pull request with unintended changes--keep them simple and small
|
||||
- Try to share which browsers your code has been tested in before submitting a pull request
|
||||
- Pull requests should always be against the `master` branch, never against `gh-pages`.
|
||||
|
||||
|
||||
|
||||
## Coding standards
|
||||
|
||||
### HTML
|
||||
|
||||
- Two spaces for indentation, never tabs
|
||||
- Double quotes only, never single quotes
|
||||
- Always use proper indentation
|
||||
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags)
|
||||
- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
|
||||
|
||||
### CSS
|
||||
|
||||
- Adhere to the [RECESS CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
|
||||
- Multiple-line approach (one property and value per line)
|
||||
- Always a space after a property's colon (e.g., `display: block;` and not `display:block;`)
|
||||
- End all lines with a semi-colon
|
||||
- For multiple, comma-separated selectors, place each selector on its own line
|
||||
- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
|
||||
|
||||
### JS
|
||||
|
||||
- No semicolons
|
||||
- Comma first
|
||||
- 2 spaces (no tabs)
|
||||
- strict mode
|
||||
- "Attractive"
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). We're in the process of collecting permissions from all Bootstrap contributors with code still part of the project to make this happen. For details, please see [#2054](https://github.com/twbs/bootstrap/issues/2054).
|
||||
|
||||
By contributing your code, you agree to dual-license your contribution under the [Apache 2](https://github.com/twbs/bootstrap/blob/master/LICENSE) and [MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE-MIT) licenses.
|
||||
|
||||
|
||||
|
||||
## Release checklist
|
||||
|
||||
1. Close ship list issue for the release.
|
||||
2. Close the milestone for the release.
|
||||
3. Open new release issue that includes this checklist.
|
||||
4. Ping folks to coordinate release (mainly @jdorfman for BootstrapCDN).
|
||||
5. Update version numbers using `grunt change-version-number --oldver=A.B.C --newver=X.Y.Z`. Review the changes and stage them manually.
|
||||
6. Run `grunt` one last time.
|
||||
7. Push to `master` branch.
|
||||
8. Merge `master` into `gh-pages`.
|
||||
9. Generate `bootstrap-X.Y.Z-dist.zip` file for release.
|
||||
10. Create release on GitHub with `/dist/` folder and release notes.
|
||||
11. Push `gh-pages`.
|
||||
12. Publish blog post.
|
||||
13. Tweet tweet.
|
|
@ -1,319 +0,0 @@
|
|||
Creative Commons Legal Code
|
||||
|
||||
Attribution 3.0 Unported
|
||||
|
||||
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
|
||||
LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN
|
||||
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
|
||||
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
|
||||
REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR
|
||||
DAMAGES RESULTING FROM ITS USE.
|
||||
|
||||
License
|
||||
|
||||
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE
|
||||
COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY
|
||||
COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS
|
||||
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
|
||||
|
||||
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE
|
||||
TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY
|
||||
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS
|
||||
CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND
|
||||
CONDITIONS.
|
||||
|
||||
1. Definitions
|
||||
|
||||
a. "Adaptation" means a work based upon the Work, or upon the Work and
|
||||
other pre-existing works, such as a translation, adaptation,
|
||||
derivative work, arrangement of music or other alterations of a
|
||||
literary or artistic work, or phonogram or performance and includes
|
||||
cinematographic adaptations or any other form in which the Work may be
|
||||
recast, transformed, or adapted including in any form recognizably
|
||||
derived from the original, except that a work that constitutes a
|
||||
Collection will not be considered an Adaptation for the purpose of
|
||||
this License. For the avoidance of doubt, where the Work is a musical
|
||||
work, performance or phonogram, the synchronization of the Work in
|
||||
timed-relation with a moving image ("synching") will be considered an
|
||||
Adaptation for the purpose of this License.
|
||||
b. "Collection" means a collection of literary or artistic works, such as
|
||||
encyclopedias and anthologies, or performances, phonograms or
|
||||
broadcasts, or other works or subject matter other than works listed
|
||||
in Section 1(f) below, which, by reason of the selection and
|
||||
arrangement of their contents, constitute intellectual creations, in
|
||||
which the Work is included in its entirety in unmodified form along
|
||||
with one or more other contributions, each constituting separate and
|
||||
independent works in themselves, which together are assembled into a
|
||||
collective whole. A work that constitutes a Collection will not be
|
||||
considered an Adaptation (as defined above) for the purposes of this
|
||||
License.
|
||||
c. "Distribute" means to make available to the public the original and
|
||||
copies of the Work or Adaptation, as appropriate, through sale or
|
||||
other transfer of ownership.
|
||||
d. "Licensor" means the individual, individuals, entity or entities that
|
||||
offer(s) the Work under the terms of this License.
|
||||
e. "Original Author" means, in the case of a literary or artistic work,
|
||||
the individual, individuals, entity or entities who created the Work
|
||||
or if no individual or entity can be identified, the publisher; and in
|
||||
addition (i) in the case of a performance the actors, singers,
|
||||
musicians, dancers, and other persons who act, sing, deliver, declaim,
|
||||
play in, interpret or otherwise perform literary or artistic works or
|
||||
expressions of folklore; (ii) in the case of a phonogram the producer
|
||||
being the person or legal entity who first fixes the sounds of a
|
||||
performance or other sounds; and, (iii) in the case of broadcasts, the
|
||||
organization that transmits the broadcast.
|
||||
f. "Work" means the literary and/or artistic work offered under the terms
|
||||
of this License including without limitation any production in the
|
||||
literary, scientific and artistic domain, whatever may be the mode or
|
||||
form of its expression including digital form, such as a book,
|
||||
pamphlet and other writing; a lecture, address, sermon or other work
|
||||
of the same nature; a dramatic or dramatico-musical work; a
|
||||
choreographic work or entertainment in dumb show; a musical
|
||||
composition with or without words; a cinematographic work to which are
|
||||
assimilated works expressed by a process analogous to cinematography;
|
||||
a work of drawing, painting, architecture, sculpture, engraving or
|
||||
lithography; a photographic work to which are assimilated works
|
||||
expressed by a process analogous to photography; a work of applied
|
||||
art; an illustration, map, plan, sketch or three-dimensional work
|
||||
relative to geography, topography, architecture or science; a
|
||||
performance; a broadcast; a phonogram; a compilation of data to the
|
||||
extent it is protected as a copyrightable work; or a work performed by
|
||||
a variety or circus performer to the extent it is not otherwise
|
||||
considered a literary or artistic work.
|
||||
g. "You" means an individual or entity exercising rights under this
|
||||
License who has not previously violated the terms of this License with
|
||||
respect to the Work, or who has received express permission from the
|
||||
Licensor to exercise rights under this License despite a previous
|
||||
violation.
|
||||
h. "Publicly Perform" means to perform public recitations of the Work and
|
||||
to communicate to the public those public recitations, by any means or
|
||||
process, including by wire or wireless means or public digital
|
||||
performances; to make available to the public Works in such a way that
|
||||
members of the public may access these Works from a place and at a
|
||||
place individually chosen by them; to perform the Work to the public
|
||||
by any means or process and the communication to the public of the
|
||||
performances of the Work, including by public digital performance; to
|
||||
broadcast and rebroadcast the Work by any means including signs,
|
||||
sounds or images.
|
||||
i. "Reproduce" means to make copies of the Work by any means including
|
||||
without limitation by sound or visual recordings and the right of
|
||||
fixation and reproducing fixations of the Work, including storage of a
|
||||
protected performance or phonogram in digital form or other electronic
|
||||
medium.
|
||||
|
||||
2. Fair Dealing Rights. Nothing in this License is intended to reduce,
|
||||
limit, or restrict any uses free from copyright or rights arising from
|
||||
limitations or exceptions that are provided for in connection with the
|
||||
copyright protection under copyright law or other applicable laws.
|
||||
|
||||
3. License Grant. Subject to the terms and conditions of this License,
|
||||
Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
|
||||
perpetual (for the duration of the applicable copyright) license to
|
||||
exercise the rights in the Work as stated below:
|
||||
|
||||
a. to Reproduce the Work, to incorporate the Work into one or more
|
||||
Collections, and to Reproduce the Work as incorporated in the
|
||||
Collections;
|
||||
b. to create and Reproduce Adaptations provided that any such Adaptation,
|
||||
including any translation in any medium, takes reasonable steps to
|
||||
clearly label, demarcate or otherwise identify that changes were made
|
||||
to the original Work. For example, a translation could be marked "The
|
||||
original work was translated from English to Spanish," or a
|
||||
modification could indicate "The original work has been modified.";
|
||||
c. to Distribute and Publicly Perform the Work including as incorporated
|
||||
in Collections; and,
|
||||
d. to Distribute and Publicly Perform Adaptations.
|
||||
e. For the avoidance of doubt:
|
||||
|
||||
i. Non-waivable Compulsory License Schemes. In those jurisdictions in
|
||||
which the right to collect royalties through any statutory or
|
||||
compulsory licensing scheme cannot be waived, the Licensor
|
||||
reserves the exclusive right to collect such royalties for any
|
||||
exercise by You of the rights granted under this License;
|
||||
ii. Waivable Compulsory License Schemes. In those jurisdictions in
|
||||
which the right to collect royalties through any statutory or
|
||||
compulsory licensing scheme can be waived, the Licensor waives the
|
||||
exclusive right to collect such royalties for any exercise by You
|
||||
of the rights granted under this License; and,
|
||||
iii. Voluntary License Schemes. The Licensor waives the right to
|
||||
collect royalties, whether individually or, in the event that the
|
||||
Licensor is a member of a collecting society that administers
|
||||
voluntary licensing schemes, via that society, from any exercise
|
||||
by You of the rights granted under this License.
|
||||
|
||||
The above rights may be exercised in all media and formats whether now
|
||||
known or hereafter devised. The above rights include the right to make
|
||||
such modifications as are technically necessary to exercise the rights in
|
||||
other media and formats. Subject to Section 8(f), all rights not expressly
|
||||
granted by Licensor are hereby reserved.
|
||||
|
||||
4. Restrictions. The license granted in Section 3 above is expressly made
|
||||
subject to and limited by the following restrictions:
|
||||
|
||||
a. You may Distribute or Publicly Perform the Work only under the terms
|
||||
of this License. You must include a copy of, or the Uniform Resource
|
||||
Identifier (URI) for, this License with every copy of the Work You
|
||||
Distribute or Publicly Perform. You may not offer or impose any terms
|
||||
on the Work that restrict the terms of this License or the ability of
|
||||
the recipient of the Work to exercise the rights granted to that
|
||||
recipient under the terms of the License. You may not sublicense the
|
||||
Work. You must keep intact all notices that refer to this License and
|
||||
to the disclaimer of warranties with every copy of the Work You
|
||||
Distribute or Publicly Perform. When You Distribute or Publicly
|
||||
Perform the Work, You may not impose any effective technological
|
||||
measures on the Work that restrict the ability of a recipient of the
|
||||
Work from You to exercise the rights granted to that recipient under
|
||||
the terms of the License. This Section 4(a) applies to the Work as
|
||||
incorporated in a Collection, but this does not require the Collection
|
||||
apart from the Work itself to be made subject to the terms of this
|
||||
License. If You create a Collection, upon notice from any Licensor You
|
||||
must, to the extent practicable, remove from the Collection any credit
|
||||
as required by Section 4(b), as requested. If You create an
|
||||
Adaptation, upon notice from any Licensor You must, to the extent
|
||||
practicable, remove from the Adaptation any credit as required by
|
||||
Section 4(b), as requested.
|
||||
b. If You Distribute, or Publicly Perform the Work or any Adaptations or
|
||||
Collections, You must, unless a request has been made pursuant to
|
||||
Section 4(a), keep intact all copyright notices for the Work and
|
||||
provide, reasonable to the medium or means You are utilizing: (i) the
|
||||
name of the Original Author (or pseudonym, if applicable) if supplied,
|
||||
and/or if the Original Author and/or Licensor designate another party
|
||||
or parties (e.g., a sponsor institute, publishing entity, journal) for
|
||||
attribution ("Attribution Parties") in Licensor's copyright notice,
|
||||
terms of service or by other reasonable means, the name of such party
|
||||
or parties; (ii) the title of the Work if supplied; (iii) to the
|
||||
extent reasonably practicable, the URI, if any, that Licensor
|
||||
specifies to be associated with the Work, unless such URI does not
|
||||
refer to the copyright notice or licensing information for the Work;
|
||||
and (iv) , consistent with Section 3(b), in the case of an Adaptation,
|
||||
a credit identifying the use of the Work in the Adaptation (e.g.,
|
||||
"French translation of the Work by Original Author," or "Screenplay
|
||||
based on original Work by Original Author"). The credit required by
|
||||
this Section 4 (b) may be implemented in any reasonable manner;
|
||||
provided, however, that in the case of a Adaptation or Collection, at
|
||||
a minimum such credit will appear, if a credit for all contributing
|
||||
authors of the Adaptation or Collection appears, then as part of these
|
||||
credits and in a manner at least as prominent as the credits for the
|
||||
other contributing authors. For the avoidance of doubt, You may only
|
||||
use the credit required by this Section for the purpose of attribution
|
||||
in the manner set out above and, by exercising Your rights under this
|
||||
License, You may not implicitly or explicitly assert or imply any
|
||||
connection with, sponsorship or endorsement by the Original Author,
|
||||
Licensor and/or Attribution Parties, as appropriate, of You or Your
|
||||
use of the Work, without the separate, express prior written
|
||||
permission of the Original Author, Licensor and/or Attribution
|
||||
Parties.
|
||||
c. Except as otherwise agreed in writing by the Licensor or as may be
|
||||
otherwise permitted by applicable law, if You Reproduce, Distribute or
|
||||
Publicly Perform the Work either by itself or as part of any
|
||||
Adaptations or Collections, You must not distort, mutilate, modify or
|
||||
take other derogatory action in relation to the Work which would be
|
||||
prejudicial to the Original Author's honor or reputation. Licensor
|
||||
agrees that in those jurisdictions (e.g. Japan), in which any exercise
|
||||
of the right granted in Section 3(b) of this License (the right to
|
||||
make Adaptations) would be deemed to be a distortion, mutilation,
|
||||
modification or other derogatory action prejudicial to the Original
|
||||
Author's honor and reputation, the Licensor will waive or not assert,
|
||||
as appropriate, this Section, to the fullest extent permitted by the
|
||||
applicable national law, to enable You to reasonably exercise Your
|
||||
right under Section 3(b) of this License (right to make Adaptations)
|
||||
but not otherwise.
|
||||
|
||||
5. Representations, Warranties and Disclaimer
|
||||
|
||||
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR
|
||||
OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY
|
||||
KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE,
|
||||
INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF
|
||||
LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS,
|
||||
WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION
|
||||
OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
|
||||
|
||||
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE
|
||||
LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR
|
||||
ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES
|
||||
ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS
|
||||
BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
|
||||
|
||||
7. Termination
|
||||
|
||||
a. This License and the rights granted hereunder will terminate
|
||||
automatically upon any breach by You of the terms of this License.
|
||||
Individuals or entities who have received Adaptations or Collections
|
||||
from You under this License, however, will not have their licenses
|
||||
terminated provided such individuals or entities remain in full
|
||||
compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will
|
||||
survive any termination of this License.
|
||||
b. Subject to the above terms and conditions, the license granted here is
|
||||
perpetual (for the duration of the applicable copyright in the Work).
|
||||
Notwithstanding the above, Licensor reserves the right to release the
|
||||
Work under different license terms or to stop distributing the Work at
|
||||
any time; provided, however that any such election will not serve to
|
||||
withdraw this License (or any other license that has been, or is
|
||||
required to be, granted under the terms of this License), and this
|
||||
License will continue in full force and effect unless terminated as
|
||||
stated above.
|
||||
|
||||
8. Miscellaneous
|
||||
|
||||
a. Each time You Distribute or Publicly Perform the Work or a Collection,
|
||||
the Licensor offers to the recipient a license to the Work on the same
|
||||
terms and conditions as the license granted to You under this License.
|
||||
b. Each time You Distribute or Publicly Perform an Adaptation, Licensor
|
||||
offers to the recipient a license to the original Work on the same
|
||||
terms and conditions as the license granted to You under this License.
|
||||
c. If any provision of this License is invalid or unenforceable under
|
||||
applicable law, it shall not affect the validity or enforceability of
|
||||
the remainder of the terms of this License, and without further action
|
||||
by the parties to this agreement, such provision shall be reformed to
|
||||
the minimum extent necessary to make such provision valid and
|
||||
enforceable.
|
||||
d. No term or provision of this License shall be deemed waived and no
|
||||
breach consented to unless such waiver or consent shall be in writing
|
||||
and signed by the party to be charged with such waiver or consent.
|
||||
e. This License constitutes the entire agreement between the parties with
|
||||
respect to the Work licensed here. There are no understandings,
|
||||
agreements or representations with respect to the Work not specified
|
||||
here. Licensor shall not be bound by any additional provisions that
|
||||
may appear in any communication from You. This License may not be
|
||||
modified without the mutual written agreement of the Licensor and You.
|
||||
f. The rights granted under, and the subject matter referenced, in this
|
||||
License were drafted utilizing the terminology of the Berne Convention
|
||||
for the Protection of Literary and Artistic Works (as amended on
|
||||
September 28, 1979), the Rome Convention of 1961, the WIPO Copyright
|
||||
Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996
|
||||
and the Universal Copyright Convention (as revised on July 24, 1971).
|
||||
These rights and subject matter take effect in the relevant
|
||||
jurisdiction in which the License terms are sought to be enforced
|
||||
according to the corresponding provisions of the implementation of
|
||||
those treaty provisions in the applicable national law. If the
|
||||
standard suite of rights granted under applicable copyright law
|
||||
includes additional rights not granted under this License, such
|
||||
additional rights are deemed to be included in the License; this
|
||||
License is not intended to restrict the license of any rights under
|
||||
applicable law.
|
||||
|
||||
|
||||
Creative Commons Notice
|
||||
|
||||
Creative Commons is not a party to this License, and makes no warranty
|
||||
whatsoever in connection with the Work. Creative Commons will not be
|
||||
liable to You or any party on any legal theory for any damages
|
||||
whatsoever, including without limitation any general, special,
|
||||
incidental or consequential damages arising in connection to this
|
||||
license. Notwithstanding the foregoing two (2) sentences, if Creative
|
||||
Commons has expressly identified itself as the Licensor hereunder, it
|
||||
shall have all rights and obligations of Licensor.
|
||||
|
||||
Except for the limited purpose of indicating to the public that the
|
||||
Work is licensed under the CCPL, Creative Commons does not authorize
|
||||
the use by either party of the trademark "Creative Commons" or any
|
||||
related trademark or logo of Creative Commons without the prior
|
||||
written consent of Creative Commons. Any permitted use will be in
|
||||
compliance with Creative Commons' then-current trademark usage
|
||||
guidelines, as may be published on its website or otherwise made
|
||||
available upon request from time to time. For the avoidance of doubt,
|
||||
this trademark restriction does not form part of this License.
|
||||
|
||||
Creative Commons may be contacted at http://creativecommons.org/.
|
|
@ -1,176 +1,21 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
The MIT License (MIT)
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
Copyright (c) 2011-2019 Twitter, Inc.
|
||||
|
||||
1. Definitions.
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
|
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 Twitter, Inc
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
|
@ -1,21 +1,42 @@
|
|||
# [Bootstrap](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap) [![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.png)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
|
||||
[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
|
||||
# [Bootstrap](https://getbootstrap.com/)
|
||||
|
||||
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
|
||||
[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com/)
|
||||
![Bower version](https://img.shields.io/bower/v/bootstrap.svg)
|
||||
[![npm version](https://img.shields.io/npm/v/bootstrap.svg)](https://www.npmjs.com/package/bootstrap)
|
||||
[![Build Status](https://img.shields.io/travis/twbs/bootstrap/master.svg)](https://travis-ci.org/twbs/bootstrap)
|
||||
[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
|
||||
[![NuGet](https://img.shields.io/nuget/v/bootstrap.svg)](https://www.nuget.org/packages/Bootstrap)
|
||||
|
||||
To get started, check out <http://getbootstrap.com>!
|
||||
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
|
||||
|
||||
To get started, check out <https://getbootstrap.com/>!
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
* [Quick start](#quick-start)
|
||||
* [Bugs and feature requests](#bugs-and-feature-requests)
|
||||
* [Documentation](#documentation)
|
||||
* [Contributing](#contributing)
|
||||
* [Community](#community)
|
||||
* [Versioning](#versioning)
|
||||
* [Creators](#creators)
|
||||
* [Thanks](#thanks)
|
||||
* [Copyright and license](#copyright-and-license)
|
||||
|
||||
|
||||
## Quick start
|
||||
|
||||
Three quick start options are available:
|
||||
Several quick start options are available:
|
||||
|
||||
* [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.0.3.zip).
|
||||
* [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.4.1.zip).
|
||||
* Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
|
||||
* Install with [Bower](http://bower.io): `bower install bootstrap`.
|
||||
* Install with [Bower](https://bower.io/): `bower install bootstrap`.
|
||||
* Install with [npm](https://www.npmjs.com/): `npm install bootstrap@3`.
|
||||
* Install with [Meteor](https://www.meteor.com/): `meteor add twbs:bootstrap`.
|
||||
* Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap`.
|
||||
|
||||
Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
|
||||
Read the [Getting started page](https://getbootstrap.com/docs/3.4/getting-started/) for information on the framework contents, templates and examples, and more.
|
||||
|
||||
### What's included
|
||||
|
||||
|
@ -25,9 +46,13 @@ Within the download you'll find the following directories and files, logically g
|
|||
bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap.css
|
||||
│ ├── bootstrap.css.map
|
||||
│ ├── bootstrap.min.css
|
||||
│ ├── bootstrap.min.css.map
|
||||
│ ├── bootstrap-theme.css
|
||||
│ └── bootstrap-theme.min.css
|
||||
│ ├── bootstrap-theme.css.map
|
||||
│ ├── bootstrap-theme.min.css
|
||||
│ └── bootstrap-theme.min.css.map
|
||||
├── js/
|
||||
│ ├── bootstrap.js
|
||||
│ └── bootstrap.min.js
|
||||
|
@ -35,132 +60,90 @@ bootstrap/
|
|||
├── glyphicons-halflings-regular.eot
|
||||
├── glyphicons-halflings-regular.svg
|
||||
├── glyphicons-halflings-regular.ttf
|
||||
└── glyphicons-halflings-regular.woff
|
||||
├── glyphicons-halflings-regular.woff
|
||||
└── glyphicons-halflings-regular.woff2
|
||||
```
|
||||
|
||||
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). Fonts from Glyphicons are included, as is the optional Bootstrap theme.
|
||||
|
||||
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
|
||||
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
Have a bug or a feature request? [Please open a new issue](https://github.com/twbs/bootstrap/issues). Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/).
|
||||
|
||||
You may use [this JS Bin](http://jsbin.com/aKiCIDO/1/edit) as a template for your bug reports.
|
||||
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
|
||||
|
||||
Note that **feature requests must target [Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev),** because Bootstrap v3 is now in maintenance mode and is closed off to new features. This is so that we can focus our efforts on Bootstrap v4.
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.
|
||||
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.
|
||||
|
||||
### Running documentation locally
|
||||
|
||||
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
|
||||
2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
|
||||
- **Windows users:** run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors.
|
||||
3. Open <http://localhost:9001> in your browser, and voilà.
|
||||
1. If necessary, [install Jekyll](https://jekyllrb.com/docs/installation/) and other Ruby dependencies with `bundle install`.
|
||||
**Note for Windows users:** Read [this guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
|
||||
2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
|
||||
4. Open `http://localhost:9001` in your browser, and voilà.
|
||||
|
||||
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
|
||||
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/).
|
||||
|
||||
### Documentation for previous releases
|
||||
|
||||
Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
|
||||
Documentation for v2.3.2 has been made available for the time being at <https://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
|
||||
|
||||
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
|
||||
|
||||
|
||||
|
||||
## Compiling CSS and JavaScript
|
||||
|
||||
Bootstrap uses [Grunt](http://gruntjs.com/) with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed and then run some Grunt commands.
|
||||
|
||||
### Install Grunt
|
||||
|
||||
From the command line:
|
||||
|
||||
1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
|
||||
2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](package.json) and automatically install the necessary local dependencies listed there.
|
||||
|
||||
When completed, you'll be able to run the various Grunt commands provided from the command line.
|
||||
|
||||
**Unfamiliar with `npm`? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
|
||||
|
||||
### Available Grunt commands
|
||||
|
||||
#### Build - `grunt`
|
||||
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [recess](http://twitter.github.io/recess/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
|
||||
|
||||
#### Only compile CSS and JavaScript - `grunt dist`
|
||||
`grunt dist` creates the `/dist` directory with compiled files. **Uses [recess](http://twitter.github.io/recess/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
|
||||
|
||||
#### Tests - `grunt test`
|
||||
Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
|
||||
|
||||
#### Watch - `grunt watch`
|
||||
This is a convenience method for watching just Less files and automatically building them whenever you save.
|
||||
|
||||
### Troubleshooting dependencies
|
||||
|
||||
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
|
||||
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
|
||||
|
||||
More over, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
|
||||
Moreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/master/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
|
||||
|
||||
Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
|
||||
**Bootstrap v3 is now closed off to new features.** It has gone into maintenance mode so that we can focus our efforts on [Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev), the future of the framework. Pull requests which add new features (rather than fix bugs) should target [Bootstrap v4 (the `v4-dev` git branch)](https://github.com/twbs/bootstrap/tree/v4-dev) instead.
|
||||
|
||||
With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). Please see the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for more information.
|
||||
Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
|
||||
|
||||
|
||||
## Community
|
||||
|
||||
Keep track of development and community news.
|
||||
|
||||
* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
|
||||
* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
|
||||
* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
|
||||
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
|
||||
|
||||
Get updates on Bootstrap's development and chat with the project maintainers and community members.
|
||||
|
||||
* Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
|
||||
* Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
|
||||
* Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
|
||||
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
|
||||
* Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
|
||||
* Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
|
||||
|
||||
|
||||
## Versioning
|
||||
|
||||
For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible.
|
||||
For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](https://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
|
||||
|
||||
Releases will be numbered with the following format:
|
||||
|
||||
`<major>.<minor>.<patch>`
|
||||
|
||||
And constructed with the following guidelines:
|
||||
|
||||
* Breaking backward compatibility bumps the major (and resets the minor and patch)
|
||||
* New additions without breaking backward compatibility bumps the minor (and resets the patch)
|
||||
* Bug fixes and misc changes bumps the patch
|
||||
|
||||
For more information on SemVer, please visit <http://semver.org/>.
|
||||
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
|
||||
|
||||
|
||||
## Thanks
|
||||
|
||||
## Authors
|
||||
<img src="https://live.browserstack.com/images/opensource/browserstack-logo.svg" alt="BrowserStack Logo" width="490" height="106">
|
||||
|
||||
Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
|
||||
|
||||
|
||||
## Creators
|
||||
|
||||
**Mark Otto**
|
||||
|
||||
+ <http://twitter.com/mdo>
|
||||
+ <http://github.com/mdo>
|
||||
* <https://twitter.com/mdo>
|
||||
* <https://github.com/mdo>
|
||||
|
||||
**Jacob Thornton**
|
||||
|
||||
+ <http://twitter.com/fat>
|
||||
+ <http://github.com/fat>
|
||||
|
||||
* <https://twitter.com/fat>
|
||||
* <https://github.com/fat>
|
||||
|
||||
|
||||
## Copyright and license
|
||||
|
||||
Copyright 2013 Twitter, Inc under [the Apache 2.0 license](LICENSE).
|
||||
Code and documentation copyright 2011-2019 Twitter, Inc. Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).
|
||||
|
|
|
@ -15,9 +15,9 @@
|
|||
// Headings for larger alerts
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
// Specified for the h4 to prevent conflicts of changing @headings-color
|
||||
color: inherit;
|
||||
color: inherit; // Specified for the h4 to prevent conflicts of changing @headings-color
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: @alert-link-font-weight;
|
||||
|
@ -28,17 +28,20 @@
|
|||
> ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dismissable alerts
|
||||
// Dismissible alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissable {
|
||||
padding-right: (@alert-padding + 20);
|
||||
// The misspelled .alert-dismissable was deprecated in 3.2.0.
|
||||
.alert-dismissable,
|
||||
.alert-dismissible {
|
||||
padding-right: (@alert-padding + 20);
|
||||
|
||||
// Adjust close link position
|
||||
.close {
|
||||
|
@ -56,12 +59,15 @@
|
|||
.alert-success {
|
||||
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
|
||||
}
|
||||
|
|
|
@ -3,18 +3,18 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base classes
|
||||
// Base class
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 3px 7px;
|
||||
font-size: @font-size-small;
|
||||
font-weight: @badge-font-weight;
|
||||
color: @badge-color;
|
||||
line-height: @badge-line-height;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
color: @badge-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background-color: @badge-bg;
|
||||
border-radius: @badge-border-radius;
|
||||
|
||||
|
@ -28,24 +28,39 @@
|
|||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state, but only for links
|
||||
a.badge {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @badge-link-hover-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
.btn-xs &,
|
||||
.btn-group-xs > .btn & {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
// Hover state, but only for links
|
||||
a& {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @badge-link-hover-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Account for badges in navs
|
||||
.list-group-item.active > &,
|
||||
.nav-pills > .active > a > & {
|
||||
color: @badge-active-color;
|
||||
background-color: @badge-active-bg;
|
||||
}
|
||||
|
||||
.list-group-item > & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.list-group-item > & + & {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.nav-pills > li > a > & {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Account for counters in navs
|
||||
a.list-group-item.active > .badge,
|
||||
.nav-pills > .active > a > .badge {
|
||||
color: @badge-active-color;
|
||||
background-color: @badge-active-bg;
|
||||
}
|
||||
.nav-pills > li > a > .badge {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
|
|
@ -1,10 +1,17 @@
|
|||
/*!
|
||||
* Bootstrap v3.4.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
// Core variables and mixins
|
||||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
|
||||
// Reset
|
||||
// Reset and dependencies
|
||||
@import "normalize.less";
|
||||
@import "print.less";
|
||||
@import "glyphicons.less";
|
||||
|
||||
// Core CSS
|
||||
@import "scaffolding.less";
|
||||
|
@ -17,7 +24,6 @@
|
|||
|
||||
// Components
|
||||
@import "component-animations.less";
|
||||
@import "glyphicons.less";
|
||||
@import "dropdowns.less";
|
||||
@import "button-groups.less";
|
||||
@import "input-groups.less";
|
||||
|
@ -35,6 +41,7 @@
|
|||
@import "media.less";
|
||||
@import "list-group.less";
|
||||
@import "panels.less";
|
||||
@import "responsive-embed.less";
|
||||
@import "wells.less";
|
||||
@import "close.less";
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4,19 +4,22 @@
|
|||
|
||||
|
||||
.breadcrumb {
|
||||
padding: 8px 15px;
|
||||
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
|
||||
margin-bottom: @line-height-computed;
|
||||
list-style: none;
|
||||
background-color: @breadcrumb-bg;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
|
||||
+ li:before {
|
||||
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
|
||||
padding: 0 5px;
|
||||
color: @breadcrumb-color;
|
||||
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
|
||||
}
|
||||
}
|
||||
|
||||
> .active {
|
||||
color: @breadcrumb-active-color;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-no-qualifying-type */
|
||||
|
||||
//
|
||||
// Button groups
|
||||
// --------------------------------------------------
|
||||
|
@ -18,10 +20,6 @@
|
|||
&.active {
|
||||
z-index: 2;
|
||||
}
|
||||
&:focus {
|
||||
// Remove focus outline when dropdown JS adds it after closing the menu
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -37,18 +35,18 @@
|
|||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
.clearfix();
|
||||
margin-left: -5px; // Offset the first child's margin
|
||||
&:extend(.clearfix all);
|
||||
|
||||
.btn-group {
|
||||
.btn,
|
||||
.btn-group,
|
||||
.input-group {
|
||||
float: left;
|
||||
}
|
||||
// Space out series of button groups
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
+ .btn,
|
||||
+ .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
> .btn-group,
|
||||
> .input-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -63,7 +61,7 @@
|
|||
.border-right-radius(0);
|
||||
}
|
||||
}
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
||||
// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
|
||||
.btn-group > .btn:last-child:not(:first-child),
|
||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
||||
.border-left-radius(0);
|
||||
|
@ -76,13 +74,13 @@
|
|||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group > .btn-group:first-child {
|
||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
.border-right-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group > .btn-group:last-child > .btn:first-child {
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
|
||||
|
@ -97,9 +95,9 @@
|
|||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-xs > .btn { .btn-xs(); }
|
||||
.btn-group-sm > .btn { .btn-sm(); }
|
||||
.btn-group-lg > .btn { .btn-lg(); }
|
||||
.btn-group-xs > .btn { &:extend(.btn-xs); }
|
||||
.btn-group-sm > .btn { &:extend(.btn-sm); }
|
||||
.btn-group-lg > .btn { &:extend(.btn-lg); }
|
||||
|
||||
|
||||
// Split button dropdowns
|
||||
|
@ -107,18 +105,18 @@
|
|||
|
||||
// Give the line between buttons some depth
|
||||
.btn-group > .btn + .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.btn-group > .btn-lg + .dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Remove the gradient and set the same inset shadow as the :active state
|
||||
.btn-group.open .dropdown-toggle {
|
||||
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
||||
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
|
@ -157,7 +155,7 @@
|
|||
|
||||
// Clear floats so dropdown menus can be properly placed
|
||||
> .btn-group {
|
||||
.clearfix();
|
||||
&:extend(.clearfix all);
|
||||
> .btn {
|
||||
float: none;
|
||||
}
|
||||
|
@ -177,29 +175,28 @@
|
|||
border-radius: 0;
|
||||
}
|
||||
&:first-child:not(:last-child) {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
.border-top-radius(@btn-border-radius-base);
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
.border-top-radius(0);
|
||||
.border-bottom-radius(@btn-border-radius-base);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group-vertical > .btn-group:first-child {
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Justified button groups
|
||||
// ----------------------
|
||||
|
||||
|
@ -210,18 +207,40 @@
|
|||
border-collapse: separate;
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
float: none;
|
||||
width: 1%;
|
||||
}
|
||||
> .btn-group .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .btn-group .dropdown-menu {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkbox and radio options
|
||||
[data-toggle="buttons"] > .btn > input[type="radio"],
|
||||
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
|
||||
display: none;
|
||||
//
|
||||
// In order to support the browser's form validation feedback, powered by the
|
||||
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
||||
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
||||
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
||||
// certain cases which is prevented by using `clip` and `pointer-events`.
|
||||
// This way, we ensure a DOM element is visible to position the popover from.
|
||||
//
|
||||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||
|
||||
[data-toggle="buttons"] {
|
||||
> .btn,
|
||||
> .btn-group > .btn {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
@ -11,39 +13,52 @@
|
|||
margin-bottom: 0; // For input.btn
|
||||
font-weight: @btn-font-weight;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
|
||||
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
|
||||
.user-select(none);
|
||||
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus,
|
||||
&.focus {
|
||||
.tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: @btn-default-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
||||
outline: 0;
|
||||
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none; // Future-proof disabling of clicks
|
||||
cursor: @cursor-disabled;
|
||||
.opacity(.65);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
a& {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -56,14 +71,6 @@
|
|||
.btn-primary {
|
||||
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
|
||||
}
|
||||
// Warning appears as orange
|
||||
.btn-warning {
|
||||
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
||||
}
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
||||
}
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
|
||||
|
@ -72,6 +79,14 @@
|
|||
.btn-info {
|
||||
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
|
||||
}
|
||||
// Warning appears as orange
|
||||
.btn-warning {
|
||||
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
||||
}
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
||||
}
|
||||
|
||||
|
||||
// Link buttons
|
||||
|
@ -79,13 +94,13 @@
|
|||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
font-weight: 400;
|
||||
color: @link-color;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
|
@ -100,7 +115,7 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
color: @link-hover-color;
|
||||
text-decoration: underline;
|
||||
text-decoration: @link-hover-decoration;
|
||||
background-color: transparent;
|
||||
}
|
||||
&[disabled],
|
||||
|
@ -119,14 +134,14 @@
|
|||
|
||||
.btn-lg {
|
||||
// line-height: ensure even-numbered height of button next to large input
|
||||
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
||||
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
|
||||
}
|
||||
.btn-sm {
|
||||
// line-height: ensure proper height of button next to small input
|
||||
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
|
||||
}
|
||||
.btn-xs {
|
||||
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
|
||||
}
|
||||
|
||||
|
||||
|
@ -136,8 +151,6 @@
|
|||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable media-feature-name-no-unknown
|
||||
|
||||
//
|
||||
// Carousel
|
||||
// --------------------------------------------------
|
||||
|
@ -10,25 +12,51 @@
|
|||
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
> .item {
|
||||
display: none;
|
||||
position: relative;
|
||||
display: none;
|
||||
.transition(.6s ease-in-out left);
|
||||
|
||||
// Account for jankitude on images
|
||||
> img,
|
||||
> a > img {
|
||||
.img-responsive();
|
||||
&:extend(.img-responsive);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// WebKit CSS3 transforms for supported devices
|
||||
@media all and (transform-3d), (-webkit-transform-3d) {
|
||||
.transition-transform(~"0.6s ease-in-out");
|
||||
.backface-visibility(~"hidden");
|
||||
.perspective(1000px);
|
||||
|
||||
&.next,
|
||||
&.active.right {
|
||||
.translate3d(100%, 0, 0);
|
||||
left: 0;
|
||||
}
|
||||
&.prev,
|
||||
&.active.left {
|
||||
.translate3d(-100%, 0, 0);
|
||||
left: 0;
|
||||
}
|
||||
&.next.left,
|
||||
&.prev.right,
|
||||
&.active {
|
||||
.translate3d(0, 0, 0);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .active,
|
||||
> .next,
|
||||
> .prev { display: block; }
|
||||
> .prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .active {
|
||||
left: 0;
|
||||
|
@ -67,33 +95,34 @@
|
|||
.carousel-control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: @carousel-control-width;
|
||||
.opacity(@carousel-control-opacity);
|
||||
font-size: @carousel-control-font-size;
|
||||
color: @carousel-control-color;
|
||||
text-align: center;
|
||||
text-shadow: @carousel-text-shadow;
|
||||
background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
|
||||
.opacity(@carousel-control-opacity);
|
||||
// We can't have this transition here because WebKit cancels the carousel
|
||||
// animation if you trip this while in the middle of another animation.
|
||||
|
||||
// Set gradients for backgrounds
|
||||
&.left {
|
||||
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
|
||||
#gradient > .horizontal(@start-color: rgba(0, 0, 0, .5); @end-color: rgba(0, 0, 0, .0001));
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
|
||||
left: auto;
|
||||
#gradient > .horizontal(@start-color: rgba(0, 0, 0, .0001); @end-color: rgba(0, 0, 0, .5));
|
||||
}
|
||||
|
||||
// Hover/focus state
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: @carousel-control-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
.opacity(.9);
|
||||
}
|
||||
|
||||
|
@ -106,32 +135,34 @@
|
|||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.icon-prev,
|
||||
.glyphicon-chevron-left {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.icon-next,
|
||||
.glyphicon-chevron-right {
|
||||
right: 50%;
|
||||
margin-right: -10px;
|
||||
}
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
width: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
font-family: serif;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.icon-prev {
|
||||
&:before {
|
||||
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
|
||||
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
|
||||
}
|
||||
}
|
||||
.icon-next {
|
||||
&:before {
|
||||
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
|
||||
content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -147,36 +178,38 @@
|
|||
left: 50%;
|
||||
z-index: 15;
|
||||
width: 60%;
|
||||
margin-left: -30%;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-left: -30%;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 1px;
|
||||
text-indent: -999px;
|
||||
border: 1px solid @carousel-indicator-border-color;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
// IE8-9 hack for event handling
|
||||
//
|
||||
// Internet Explorer 8-9 does not support clicks on elements without a set
|
||||
// `background-color`. We cannot use `filter` since that's not viewed as a
|
||||
// background color by the browser. Thus, a hack is needed.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
|
||||
//
|
||||
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
|
||||
// set alpha transparency for the best results possible.
|
||||
background-color: #000 \9; // IE8
|
||||
background-color: rgba(0,0,0,0); // IE9
|
||||
background-color: rgba(0, 0, 0, 0); // IE9
|
||||
|
||||
border: 1px solid @carousel-indicator-border-color;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
margin: 0;
|
||||
width: 12px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0;
|
||||
background-color: @carousel-indicator-active-bg;
|
||||
}
|
||||
}
|
||||
|
@ -186,15 +219,16 @@
|
|||
// Hidden by default for smaller viewports
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
bottom: 20px;
|
||||
left: 15%;
|
||||
z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
color: @carousel-caption-color;
|
||||
text-align: center;
|
||||
text-shadow: @carousel-text-shadow;
|
||||
|
||||
& .btn {
|
||||
text-shadow: none; // No shadow for button elements in carousel-caption
|
||||
}
|
||||
|
@ -206,22 +240,29 @@
|
|||
|
||||
// Scale up the controls a smidge
|
||||
.carousel-control {
|
||||
.glyphicons-chevron-left,
|
||||
.glyphicons-chevron-right,
|
||||
.glyphicon-chevron-left,
|
||||
.glyphicon-chevron-right,
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
font-size: 30px;
|
||||
width: (@carousel-control-font-size * 1.5);
|
||||
height: (@carousel-control-font-size * 1.5);
|
||||
margin-top: (@carousel-control-font-size / -2);
|
||||
font-size: (@carousel-control-font-size * 1.5);
|
||||
}
|
||||
.glyphicon-chevron-left,
|
||||
.icon-prev {
|
||||
margin-left: (@carousel-control-font-size / -2);
|
||||
}
|
||||
.glyphicon-chevron-right,
|
||||
.icon-next {
|
||||
margin-right: (@carousel-control-font-size / -2);
|
||||
}
|
||||
}
|
||||
|
||||
// Show and left align the captions
|
||||
.carousel-caption {
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
left: 20%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable property-no-vendor-prefix
|
||||
|
||||
//
|
||||
// Close icons
|
||||
// --------------------------------------------------
|
||||
|
@ -23,11 +25,13 @@
|
|||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
button& {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -17,10 +17,26 @@ code {
|
|||
font-size: 90%;
|
||||
color: @code-color;
|
||||
background-color: @code-bg;
|
||||
white-space: nowrap;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// User input typically entered via keyboard
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
font-size: 90%;
|
||||
color: @kbd-color;
|
||||
background-color: @kbd-bg;
|
||||
border-radius: @border-radius-small;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
font-weight: 700;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
|
@ -28,9 +44,9 @@ pre {
|
|||
margin: 0 0 (@line-height-computed / 2);
|
||||
font-size: (@font-size-base - 1); // 14px to 13px
|
||||
line-height: @line-height-base;
|
||||
color: @pre-color;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
color: @pre-color;
|
||||
background-color: @pre-bg;
|
||||
border: 1px solid @pre-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Component animations
|
||||
// --------------------------------------------------
|
||||
|
@ -5,11 +7,12 @@
|
|||
// Heads up!
|
||||
//
|
||||
// We don't use the `.opacity()` mixin here since it causes a bug with text
|
||||
// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.
|
||||
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
.transition(opacity .15s linear);
|
||||
|
||||
&.in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
@ -17,13 +20,17 @@
|
|||
|
||||
.collapse {
|
||||
display: none;
|
||||
&.in {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.in { display: block; }
|
||||
tr&.in { display: table-row; }
|
||||
tbody&.in { display: table-row-group; }
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
.transition(height .35s ease);
|
||||
.transition-property(~"height, visibility");
|
||||
.transition-duration(.35s);
|
||||
.transition-timing-function(ease);
|
||||
}
|
||||
|
|
|
@ -10,12 +10,14 @@
|
|||
height: 0;
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
border-top: @caret-width-base solid;
|
||||
border-top: @caret-width-base dashed;
|
||||
border-top: @caret-width-base solid ~"\9"; // IE8
|
||||
border-right: @caret-width-base solid transparent;
|
||||
border-left: @caret-width-base solid transparent;
|
||||
border-left: @caret-width-base solid transparent;
|
||||
}
|
||||
|
||||
// The dropdown wrapper (div)
|
||||
.dropup,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -36,16 +38,19 @@
|
|||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0; // override default ul
|
||||
list-style: none;
|
||||
font-size: @font-size-base;
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: @dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid @dropdown-fallback-border; // IE8 fallback
|
||||
border: 1px solid @dropdown-border;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 6px 12px rgba(0,0,0,.175));
|
||||
background-clip: padding-box;
|
||||
.box-shadow(0 6px 12px rgba(0, 0, 0, .175));
|
||||
|
||||
// Aligns the dropdown menu to right
|
||||
//
|
||||
// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
|
||||
&.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
|
@ -61,20 +66,17 @@
|
|||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: @line-height-base;
|
||||
color: @dropdown-link-color;
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
}
|
||||
}
|
||||
|
||||
// Hover/Focus state
|
||||
.dropdown-menu > li > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: @dropdown-link-hover-color;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -85,8 +87,8 @@
|
|||
&:focus {
|
||||
color: @dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: @dropdown-link-active-bg;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -100,16 +102,15 @@
|
|||
&:focus {
|
||||
color: @dropdown-link-disabled-color;
|
||||
}
|
||||
}
|
||||
// Nuke hover/focus effects
|
||||
.dropdown-menu > .disabled > a {
|
||||
|
||||
// Nuke hover/focus effects
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
cursor: @cursor-disabled;
|
||||
background-color: transparent;
|
||||
background-image: none; // Remove CSS gradient
|
||||
.reset-filter();
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -126,6 +127,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
// With v3, we enabled auto-flipping if you have a dropdown within a right
|
||||
// aligned nav component. To enable the undoing of that, we provide an override
|
||||
// to restore the default dropdown menu alignment.
|
||||
//
|
||||
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
|
||||
// `.pull-right` nav component.
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
|
@ -133,16 +153,17 @@
|
|||
font-size: @font-size-small;
|
||||
line-height: @line-height-base;
|
||||
color: @dropdown-header-color;
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
|
||||
// Backdrop to catch body clicks on mobile, etc.
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: @zindex-dropdown - 10;
|
||||
left: 0;
|
||||
z-index: (@zindex-dropdown - 10);
|
||||
}
|
||||
|
||||
// Right aligned dropdowns
|
||||
|
@ -160,15 +181,16 @@
|
|||
.navbar-fixed-bottom .dropdown {
|
||||
// Reverse the caret
|
||||
.caret {
|
||||
border-top: 0;
|
||||
border-bottom: @caret-width-base solid;
|
||||
content: "";
|
||||
border-top: 0;
|
||||
border-bottom: @caret-width-base dashed;
|
||||
border-bottom: @caret-width-base solid ~"\9"; // IE8
|
||||
}
|
||||
// Different positioning for bottom up menu
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-bottom: 1px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -180,8 +202,12 @@
|
|||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar-right {
|
||||
.dropdown-menu {
|
||||
.pull-right > .dropdown-menu();
|
||||
.dropdown-menu-right();
|
||||
}
|
||||
// Necessary for overrides of the default right aligned menu.
|
||||
// Will remove come v4 in all likelihood.
|
||||
.dropdown-menu-left {
|
||||
.dropdown-menu-left();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable value-list-comma-newline-after, value-list-comma-space-after, indentation, declaration-colon-newline-after, font-family-no-missing-generic-family-keyword
|
||||
|
||||
//
|
||||
// Glyphicons for Bootstrap
|
||||
//
|
||||
|
@ -9,12 +11,13 @@
|
|||
|
||||
// Import the fonts
|
||||
@font-face {
|
||||
font-family: 'Glyphicons Halflings';
|
||||
src: ~"url('@{icon-font-path}@{icon-font-name}.eot')";
|
||||
src: ~"url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype')",
|
||||
~"url('@{icon-font-path}@{icon-font-name}.woff') format('woff')",
|
||||
~"url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype')",
|
||||
~"url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg')";
|
||||
font-family: "Glyphicons Halflings";
|
||||
src: url("@{icon-font-path}@{icon-font-name}.eot");
|
||||
src: url("@{icon-font-path}@{icon-font-name}.eot?#iefix") format("embedded-opentype"),
|
||||
url("@{icon-font-path}@{icon-font-name}.woff2") format("woff2"),
|
||||
url("@{icon-font-path}@{icon-font-name}.woff") format("woff"),
|
||||
url("@{icon-font-path}@{icon-font-name}.ttf") format("truetype"),
|
||||
url("@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}") format("svg");
|
||||
}
|
||||
|
||||
// Catchall baseclass
|
||||
|
@ -22,22 +25,19 @@
|
|||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
font-family: 'Glyphicons Halflings';
|
||||
font-family: "Glyphicons Halflings";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
&:empty {
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Individual icons
|
||||
.glyphicon-asterisk { &:before { content: "\2a"; } }
|
||||
.glyphicon-plus { &:before { content: "\2b"; } }
|
||||
.glyphicon-euro { &:before { content: "\20ac"; } }
|
||||
.glyphicon-asterisk { &:before { content: "\002a"; } }
|
||||
.glyphicon-plus { &:before { content: "\002b"; } }
|
||||
.glyphicon-euro,
|
||||
.glyphicon-eur { &:before { content: "\20ac"; } }
|
||||
.glyphicon-minus { &:before { content: "\2212"; } }
|
||||
.glyphicon-cloud { &:before { content: "\2601"; } }
|
||||
.glyphicon-envelope { &:before { content: "\2709"; } }
|
||||
|
@ -235,3 +235,73 @@
|
|||
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
|
||||
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
|
||||
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }
|
||||
.glyphicon-cd { &:before { content: "\e201"; } }
|
||||
.glyphicon-save-file { &:before { content: "\e202"; } }
|
||||
.glyphicon-open-file { &:before { content: "\e203"; } }
|
||||
.glyphicon-level-up { &:before { content: "\e204"; } }
|
||||
.glyphicon-copy { &:before { content: "\e205"; } }
|
||||
.glyphicon-paste { &:before { content: "\e206"; } }
|
||||
// The following 2 Glyphicons are omitted for the time being because
|
||||
// they currently use Unicode codepoints that are outside the
|
||||
// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
|
||||
// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
|
||||
// Notably, the bug affects some older versions of the Android Browser.
|
||||
// More info: https://github.com/twbs/bootstrap/issues/10106
|
||||
// .glyphicon-door { &:before { content: "\1f6aa"; } }
|
||||
// .glyphicon-key { &:before { content: "\1f511"; } }
|
||||
.glyphicon-alert { &:before { content: "\e209"; } }
|
||||
.glyphicon-equalizer { &:before { content: "\e210"; } }
|
||||
.glyphicon-king { &:before { content: "\e211"; } }
|
||||
.glyphicon-queen { &:before { content: "\e212"; } }
|
||||
.glyphicon-pawn { &:before { content: "\e213"; } }
|
||||
.glyphicon-bishop { &:before { content: "\e214"; } }
|
||||
.glyphicon-knight { &:before { content: "\e215"; } }
|
||||
.glyphicon-baby-formula { &:before { content: "\e216"; } }
|
||||
.glyphicon-tent { &:before { content: "\26fa"; } }
|
||||
.glyphicon-blackboard { &:before { content: "\e218"; } }
|
||||
.glyphicon-bed { &:before { content: "\e219"; } }
|
||||
.glyphicon-apple { &:before { content: "\f8ff"; } }
|
||||
.glyphicon-erase { &:before { content: "\e221"; } }
|
||||
.glyphicon-hourglass { &:before { content: "\231b"; } }
|
||||
.glyphicon-lamp { &:before { content: "\e223"; } }
|
||||
.glyphicon-duplicate { &:before { content: "\e224"; } }
|
||||
.glyphicon-piggy-bank { &:before { content: "\e225"; } }
|
||||
.glyphicon-scissors { &:before { content: "\e226"; } }
|
||||
.glyphicon-bitcoin { &:before { content: "\e227"; } }
|
||||
.glyphicon-btc { &:before { content: "\e227"; } }
|
||||
.glyphicon-xbt { &:before { content: "\e227"; } }
|
||||
.glyphicon-yen { &:before { content: "\00a5"; } }
|
||||
.glyphicon-jpy { &:before { content: "\00a5"; } }
|
||||
.glyphicon-ruble { &:before { content: "\20bd"; } }
|
||||
.glyphicon-rub { &:before { content: "\20bd"; } }
|
||||
.glyphicon-scale { &:before { content: "\e230"; } }
|
||||
.glyphicon-ice-lolly { &:before { content: "\e231"; } }
|
||||
.glyphicon-ice-lolly-tasted { &:before { content: "\e232"; } }
|
||||
.glyphicon-education { &:before { content: "\e233"; } }
|
||||
.glyphicon-option-horizontal { &:before { content: "\e234"; } }
|
||||
.glyphicon-option-vertical { &:before { content: "\e235"; } }
|
||||
.glyphicon-menu-hamburger { &:before { content: "\e236"; } }
|
||||
.glyphicon-modal-window { &:before { content: "\e237"; } }
|
||||
.glyphicon-oil { &:before { content: "\e238"; } }
|
||||
.glyphicon-grain { &:before { content: "\e239"; } }
|
||||
.glyphicon-sunglasses { &:before { content: "\e240"; } }
|
||||
.glyphicon-text-size { &:before { content: "\e241"; } }
|
||||
.glyphicon-text-color { &:before { content: "\e242"; } }
|
||||
.glyphicon-text-background { &:before { content: "\e243"; } }
|
||||
.glyphicon-object-align-top { &:before { content: "\e244"; } }
|
||||
.glyphicon-object-align-bottom { &:before { content: "\e245"; } }
|
||||
.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
|
||||
.glyphicon-object-align-left { &:before { content: "\e247"; } }
|
||||
.glyphicon-object-align-vertical { &:before { content: "\e248"; } }
|
||||
.glyphicon-object-align-right { &:before { content: "\e249"; } }
|
||||
.glyphicon-triangle-right { &:before { content: "\e250"; } }
|
||||
.glyphicon-triangle-left { &:before { content: "\e251"; } }
|
||||
.glyphicon-triangle-bottom { &:before { content: "\e252"; } }
|
||||
.glyphicon-triangle-top { &:before { content: "\e253"; } }
|
||||
.glyphicon-console { &:before { content: "\e254"; } }
|
||||
.glyphicon-superscript { &:before { content: "\e255"; } }
|
||||
.glyphicon-subscript { &:before { content: "\e256"; } }
|
||||
.glyphicon-menu-left { &:before { content: "\e257"; } }
|
||||
.glyphicon-menu-right { &:before { content: "\e258"; } }
|
||||
.glyphicon-menu-down { &:before { content: "\e259"; } }
|
||||
.glyphicon-menu-up { &:before { content: "\e260"; } }
|
||||
|
|
|
@ -2,14 +2,18 @@
|
|||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
|
||||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
.container {
|
||||
.container-fixed();
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: @container-sm;
|
||||
}
|
||||
@media (min-width: @screen-md) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
width: @container-md;
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
|
@ -17,12 +21,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
// mobile first defaults
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but without any defined
|
||||
// width for fluid, full width layouts.
|
||||
|
||||
.container-fluid {
|
||||
.container-fixed();
|
||||
}
|
||||
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
.row {
|
||||
.make-row();
|
||||
}
|
||||
|
||||
.row-no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
[class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
.make-grid-columns();
|
||||
|
||||
|
||||
|
@ -31,11 +63,7 @@
|
|||
// Columns, offsets, pushes, and pulls for extra small devices like
|
||||
// smartphones.
|
||||
|
||||
.make-grid-columns-float(xs);
|
||||
.make-grid(@grid-columns, xs, width);
|
||||
.make-grid(@grid-columns, xs, pull);
|
||||
.make-grid(@grid-columns, xs, push);
|
||||
.make-grid(@grid-columns, xs, offset);
|
||||
.make-grid(xs);
|
||||
|
||||
|
||||
// Small grid
|
||||
|
@ -44,11 +72,7 @@
|
|||
// to tablets.
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.make-grid-columns-float(sm);
|
||||
.make-grid(@grid-columns, sm, width);
|
||||
.make-grid(@grid-columns, sm, pull);
|
||||
.make-grid(@grid-columns, sm, push);
|
||||
.make-grid(@grid-columns, sm, offset);
|
||||
.make-grid(sm);
|
||||
}
|
||||
|
||||
|
||||
|
@ -57,11 +81,7 @@
|
|||
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.make-grid-columns-float(md);
|
||||
.make-grid(@grid-columns, md, width);
|
||||
.make-grid(@grid-columns, md, pull);
|
||||
.make-grid(@grid-columns, md, push);
|
||||
.make-grid(@grid-columns, md, offset);
|
||||
.make-grid(md);
|
||||
}
|
||||
|
||||
|
||||
|
@ -70,10 +90,5 @@
|
|||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.make-grid-columns-float(lg);
|
||||
.make-grid(@grid-columns, lg, width);
|
||||
.make-grid(@grid-columns, lg, pull);
|
||||
.make-grid(@grid-columns, lg, push);
|
||||
.make-grid(@grid-columns, lg, offset);
|
||||
.make-grid(lg);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Input groups
|
||||
// --------------------------------------------------
|
||||
|
@ -12,13 +14,27 @@
|
|||
// Undo padding and float of grid classes
|
||||
&[class*="col-"] {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
// Ensure that the input is always above the *appended* addon button for
|
||||
// proper border colors.
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
// IE9 fubars the placeholder attribute in text inputs and the arrows on
|
||||
// select elements in input groups. To fix it, we float the input. Details:
|
||||
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
|
||||
float: left;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -29,10 +45,14 @@
|
|||
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-addon,
|
||||
.input-group-lg > .input-group-btn > .btn { .input-lg(); }
|
||||
.input-group-lg > .input-group-btn > .btn {
|
||||
.input-lg();
|
||||
}
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .btn { .input-sm(); }
|
||||
.input-group-sm > .input-group-btn > .btn {
|
||||
.input-sm();
|
||||
}
|
||||
|
||||
|
||||
// Display as table-cell
|
||||
|
@ -59,24 +79,24 @@
|
|||
.input-group-addon {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: @input-color;
|
||||
text-align: center;
|
||||
background-color: @input-group-addon-bg;
|
||||
border: 1px solid @input-group-addon-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @input-border-radius;
|
||||
|
||||
// Sizing
|
||||
&.input-sm {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
border-radius: @border-radius-small;
|
||||
border-radius: @input-border-radius-small;
|
||||
}
|
||||
&.input-lg {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-large;
|
||||
border-radius: @input-border-radius-large;
|
||||
}
|
||||
|
||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||
|
@ -90,8 +110,10 @@
|
|||
.input-group .form-control:first-child,
|
||||
.input-group-addon:first-child,
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .btn-group > .btn,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
|
||||
.border-right-radius(0);
|
||||
}
|
||||
.input-group-addon:first-child {
|
||||
|
@ -100,8 +122,10 @@
|
|||
.input-group .form-control:last-child,
|
||||
.input-group-addon:last-child,
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .btn-group > .btn,
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child) {
|
||||
.input-group-btn:first-child > .btn:not(:first-child),
|
||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
.input-group-addon:last-child {
|
||||
|
@ -112,25 +136,38 @@
|
|||
// -------------------------
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||
// `font-size` in combination with `inline-block` on buttons.
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
// Negative margin for spacing, position for bringing hovered/focused/actived
|
||||
// element above the siblings.
|
||||
> .btn {
|
||||
position: relative;
|
||||
+ .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
// Bring the "active" button to the front
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Negative margin to only have a 1px border between the two
|
||||
&:first-child > .btn {
|
||||
margin-right: -1px;
|
||||
&:first-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
&:last-child > .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
.input-group-btn > .btn {
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping
|
||||
+ .btn {
|
||||
margin-left: -4px;
|
||||
}
|
||||
// Bring the "active" button to the front
|
||||
&:hover,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
&:last-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,24 +4,31 @@
|
|||
|
||||
|
||||
.jumbotron {
|
||||
padding: @jumbotron-padding;
|
||||
padding-top: @jumbotron-padding;
|
||||
padding-bottom: @jumbotron-padding;
|
||||
margin-bottom: @jumbotron-padding;
|
||||
font-size: @jumbotron-font-size;
|
||||
font-weight: 200;
|
||||
line-height: (@line-height-base * 1.5);
|
||||
color: @jumbotron-color;
|
||||
background-color: @jumbotron-bg;
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
line-height: 1;
|
||||
color: @jumbotron-heading-color;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.4;
|
||||
margin-bottom: (@jumbotron-padding / 2);
|
||||
font-size: @jumbotron-font-size;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.container & {
|
||||
> hr {
|
||||
border-top-color: darken(@jumbotron-bg, 10%);
|
||||
}
|
||||
|
||||
.container &,
|
||||
.container-fluid & {
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
|
||||
}
|
||||
|
||||
|
@ -30,17 +37,18 @@
|
|||
}
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
padding-top: (@jumbotron-padding * 1.6);
|
||||
padding-top: (@jumbotron-padding * 1.6);
|
||||
padding-bottom: (@jumbotron-padding * 1.6);
|
||||
|
||||
.container & {
|
||||
padding-left: (@jumbotron-padding * 2);
|
||||
.container &,
|
||||
.container-fluid & {
|
||||
padding-right: (@jumbotron-padding * 2);
|
||||
padding-left: (@jumbotron-padding * 2);
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: (@font-size-base * 4.5);
|
||||
font-size: @jumbotron-heading-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
display: inline;
|
||||
padding: .2em .6em .3em;
|
||||
font-size: 75%;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: @label-color;
|
||||
text-align: center;
|
||||
|
@ -15,7 +15,7 @@
|
|||
border-radius: .25em;
|
||||
|
||||
// Add hover effects, but only for links
|
||||
&[href] {
|
||||
a& {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @label-link-hover-color;
|
||||
|
|
|
@ -1,18 +1,24 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// List groups
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base class
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
.list-group {
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
// Individual list items
|
||||
// -------------------------
|
||||
//
|
||||
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
|
@ -32,28 +38,21 @@
|
|||
.border-bottom-radius(@list-group-border-radius);
|
||||
}
|
||||
|
||||
// Align badges within list items
|
||||
> .badge {
|
||||
float: right;
|
||||
}
|
||||
> .badge + .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
// Disabled state
|
||||
&.disabled,
|
||||
&.disabled:hover,
|
||||
&.disabled:focus {
|
||||
color: @list-group-disabled-color;
|
||||
cursor: @cursor-disabled;
|
||||
background-color: @list-group-disabled-bg;
|
||||
|
||||
// Linked list items
|
||||
a.list-group-item {
|
||||
color: @list-group-link-color;
|
||||
|
||||
.list-group-item-heading {
|
||||
color: @list-group-link-heading-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: @list-group-hover-bg;
|
||||
// Force color to inherit for custom content
|
||||
.list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item-text {
|
||||
color: @list-group-disabled-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Active class on item itself, not parent
|
||||
|
@ -66,17 +65,60 @@ a.list-group-item {
|
|||
border-color: @list-group-active-border;
|
||||
|
||||
// Force color to inherit for custom content
|
||||
.list-group-item-heading {
|
||||
.list-group-item-heading,
|
||||
.list-group-item-heading > small,
|
||||
.list-group-item-heading > .small {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item-text {
|
||||
color: lighten(@list-group-active-bg, 40%);
|
||||
color: @list-group-active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
|
||||
// Includes an extra `.active` modifier class for showing selected items.
|
||||
|
||||
a.list-group-item,
|
||||
button.list-group-item {
|
||||
color: @list-group-link-color;
|
||||
|
||||
.list-group-item-heading {
|
||||
color: @list-group-link-heading-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @list-group-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: @list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
button.list-group-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
// Contextual variants
|
||||
//
|
||||
// Add modifier classes to change text and background color on individual items.
|
||||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
.list-group-item-variant(success; @state-success-bg; @state-success-text);
|
||||
.list-group-item-variant(info; @state-info-bg; @state-info-text);
|
||||
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
|
||||
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
|
||||
|
||||
|
||||
// Custom content options
|
||||
// -------------------------
|
||||
//
|
||||
// Extra classes for creating well-formatted content within `.list-group-item`s.
|
||||
|
||||
.list-group-item-heading {
|
||||
margin-top: 0;
|
||||
|
|
|
@ -1,54 +1,64 @@
|
|||
// Media objects
|
||||
// Source: http://stubbornella.org/content/?p=497
|
||||
// --------------------------------------------------
|
||||
.media {
|
||||
// Proper spacing between instances of .media
|
||||
margin-top: 15px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Common styles
|
||||
// -------------------------
|
||||
|
||||
// Clear the floats
|
||||
.media,
|
||||
.media-body {
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
// Proper spacing between instances of .media
|
||||
.media,
|
||||
.media .media {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.media:first-child {
|
||||
margin-top: 0;
|
||||
.media-body {
|
||||
width: 10000px;
|
||||
}
|
||||
|
||||
// For images and videos, set to block
|
||||
.media-object {
|
||||
display: block;
|
||||
|
||||
// Fix collapse in webkit from max-width: 100% and display: table-cell.
|
||||
&.img-thumbnail {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.media-right,
|
||||
.media > .pull-right {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.media-left,
|
||||
.media > .pull-left {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.media-left,
|
||||
.media-right,
|
||||
.media-body {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.media-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.media-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// Reset margins on headings for tighter default spacing
|
||||
.media-heading {
|
||||
margin: 0 0 5px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
// Media image alignment
|
||||
// -------------------------
|
||||
|
||||
.media {
|
||||
> .pull-left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
> .pull-right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Media list variation
|
||||
// -------------------------
|
||||
|
||||
//
|
||||
// Undo default ul/ol styles
|
||||
.media-list {
|
||||
padding-left: 0;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,15 @@
|
|||
// Alerts
|
||||
|
||||
.alert-variant(@background; @border; @text-color) {
|
||||
color: @text-color;
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
|
||||
hr {
|
||||
border-top-color: darken(@border, 5%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: darken(@text-color, 10%);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
// Contextual backgrounds
|
||||
|
||||
.bg-variant(@color) {
|
||||
background-color: @color;
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
background-color: darken(@color, 10%);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
// Single side border-radius
|
||||
|
||||
.border-top-radius(@radius) {
|
||||
border-top-left-radius: @radius;
|
||||
border-top-right-radius: @radius;
|
||||
}
|
||||
.border-right-radius(@radius) {
|
||||
border-top-right-radius: @radius;
|
||||
border-bottom-right-radius: @radius;
|
||||
}
|
||||
.border-bottom-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
}
|
||||
.border-left-radius(@radius) {
|
||||
border-top-left-radius: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
}
|
|
@ -0,0 +1,61 @@
|
|||
// Button variants
|
||||
//
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
.button-variant(@color; @background; @border) {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: @color;
|
||||
background-color: darken(@background, 10%);
|
||||
border-color: darken(@border, 25%);
|
||||
}
|
||||
&:hover {
|
||||
color: @color;
|
||||
background-color: darken(@background, 10%);
|
||||
border-color: darken(@border, 12%);
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
color: @color;
|
||||
background-color: darken(@background, 10%);
|
||||
background-image: none;
|
||||
border-color: darken(@border, 12%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: @color;
|
||||
background-color: darken(@background, 17%);
|
||||
border-color: darken(@border, 25%);
|
||||
}
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: @background;
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
font-size: @font-size;
|
||||
line-height: @line-height;
|
||||
border-radius: @border-radius;
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
// Center-align a block level element
|
||||
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
// Clearfix
|
||||
//
|
||||
// For modern browsers
|
||||
// 1. The space content is one way to avoid an Opera bug when the
|
||||
// contenteditable attribute is included anywhere else in the document.
|
||||
// Otherwise it causes space to appear at the top and bottom of elements
|
||||
// that are clearfixed.
|
||||
// 2. The use of `table` rather than `block` is only necessary if using
|
||||
// `:before` to contain the top-margins of child elements.
|
||||
//
|
||||
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
|
||||
.clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
display: table; // 2
|
||||
content: " "; // 1
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,85 @@
|
|||
// Form validation states
|
||||
//
|
||||
// Used in forms.less to generate the form validation CSS for warnings, errors,
|
||||
// and successes.
|
||||
|
||||
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
|
||||
// Color the label and help text
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline,
|
||||
&.radio label,
|
||||
&.checkbox label,
|
||||
&.radio-inline label,
|
||||
&.checkbox-inline label {
|
||||
color: @text-color;
|
||||
}
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: @border-color;
|
||||
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
border-color: darken(@border-color, 10%);
|
||||
@shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@border-color, 20%);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
// Set validation states also for addons
|
||||
.input-group-addon {
|
||||
color: @text-color;
|
||||
background-color: @background-color;
|
||||
border-color: @border-color;
|
||||
}
|
||||
// Optional feedback icon
|
||||
.form-control-feedback {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control focus state
|
||||
//
|
||||
// Generate a customized focus state and for any input with the specified color,
|
||||
// which defaults to the `@input-border-focus` variable.
|
||||
//
|
||||
// We highly encourage you to not customize the default value, but instead use
|
||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
||||
// WebKit's default styles, but applicable to a wider range of browsers. Its
|
||||
// usability and accessibility should be taken into account with any change.
|
||||
//
|
||||
// Example usage: change the default blue border and shadow to white for better
|
||||
// contrast against a dark gray background.
|
||||
.form-control-focus(@color: @input-border-focus) {
|
||||
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
|
||||
&:focus {
|
||||
border-color: @color;
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px @{color-rgba}");
|
||||
}
|
||||
}
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Relative text size, padding, and border-radii changes for form controls. For
|
||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
||||
// element gets special love because it's special, and that's a fact!
|
||||
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
|
||||
height: @input-height;
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
font-size: @font-size;
|
||||
line-height: @line-height;
|
||||
border-radius: @border-radius;
|
||||
|
||||
select& {
|
||||
height: @input-height;
|
||||
line-height: @input-height;
|
||||
}
|
||||
|
||||
textarea&,
|
||||
select[multiple]& {
|
||||
height: auto;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,59 @@
|
|||
// stylelint-disable value-no-vendor-prefix, selector-max-id
|
||||
|
||||
#gradient {
|
||||
|
||||
// Horizontal gradient, from left to right
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9 and below.
|
||||
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
|
||||
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
|
||||
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
// Vertical gradient, from top to bottom
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
// Color stops are not available in IE9 and below.
|
||||
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
|
||||
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12
|
||||
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
|
||||
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
|
||||
background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
|
||||
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
|
||||
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
||||
background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
||||
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
|
||||
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
||||
background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
||||
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.radial(@inner-color: #555; @outer-color: #333) {
|
||||
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
|
||||
background-image: radial-gradient(circle, @inner-color, @outer-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.striped(@color: rgba(255, 255, 255, .15); @angle: 45deg) {
|
||||
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,91 @@
|
|||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `@grid-columns`.
|
||||
|
||||
.make-grid-columns() {
|
||||
// Common styles for all sizes of grid columns, widths 1-12
|
||||
.col(@index) { // initial
|
||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
|
||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-right: floor((@grid-gutter-width / 2));
|
||||
padding-left: ceil((@grid-gutter-width / 2));
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
}
|
||||
|
||||
.float-grid-columns(@class) {
|
||||
.col(@index) { // initial
|
||||
@item: ~".col-@{class}-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||
@item: ~".col-@{class}-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
}
|
||||
|
||||
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
|
||||
.col-@{class}-@{index} {
|
||||
width: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
|
||||
.col-@{class}-push-@{index} {
|
||||
left: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
|
||||
.col-@{class}-push-0 {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
|
||||
.col-@{class}-pull-@{index} {
|
||||
right: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
|
||||
.col-@{class}-pull-0 {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
.calc-grid-column(@index, @class, @type) when (@type = offset) {
|
||||
.col-@{class}-offset-@{index} {
|
||||
margin-left: percentage((@index / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Basic looping in LESS
|
||||
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
|
||||
.calc-grid-column(@index, @class, @type);
|
||||
// next iteration
|
||||
.loop-grid-columns((@index - 1), @class, @type);
|
||||
}
|
||||
|
||||
// Create grid for specific class
|
||||
.make-grid(@class) {
|
||||
.float-grid-columns(@class);
|
||||
.loop-grid-columns(@grid-columns, @class, width);
|
||||
.loop-grid-columns(@grid-columns, @class, pull);
|
||||
.loop-grid-columns(@grid-columns, @class, push);
|
||||
.loop-grid-columns(@grid-columns, @class, offset);
|
||||
}
|
|
@ -0,0 +1,122 @@
|
|||
// Grid system
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
// Centered container element
|
||||
.container-fixed(@gutter: @grid-gutter-width) {
|
||||
padding-right: ceil((@gutter / 2));
|
||||
padding-left: floor((@gutter / 2));
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
// Creates a wrapper for a series of columns
|
||||
.make-row(@gutter: @grid-gutter-width) {
|
||||
margin-right: floor((@gutter / -2));
|
||||
margin-left: ceil((@gutter / -2));
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
// Generate the extra small columns
|
||||
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
min-height: 1px;
|
||||
padding-right: (@gutter / 2);
|
||||
padding-left: (@gutter / 2);
|
||||
}
|
||||
.make-xs-column-offset(@columns) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
.make-xs-column-push(@columns) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
.make-xs-column-pull(@columns) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
|
||||
// Generate the small columns
|
||||
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: (@gutter / 2);
|
||||
padding-left: (@gutter / 2);
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-sm-column-offset(@columns) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-sm-column-push(@columns) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-sm-column-pull(@columns) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the medium columns
|
||||
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: (@gutter / 2);
|
||||
padding-left: (@gutter / 2);
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-md-column-offset(@columns) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-md-column-push(@columns) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-md-column-pull(@columns) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large columns
|
||||
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: (@gutter / 2);
|
||||
padding-left: (@gutter / 2);
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-lg-column-offset(@columns) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-lg-column-push(@columns) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-lg-column-pull(@columns) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
// stylelint-disable font-family-name-quotes, font-family-no-missing-generic-family-keyword
|
||||
|
||||
// CSS image replacement
|
||||
//
|
||||
// Heads up! v3 launched with only `.hide-text()`, but per our pattern for
|
||||
// mixins being reused as classes with the same name, this doesn't hold up. As
|
||||
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
|
||||
//
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||
|
||||
// Deprecated as of v3.0.1 (has been removed in v4)
|
||||
.hide-text() {
|
||||
font: ~"0/0" a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// New mixin to use as of v3.0.1
|
||||
.text-hide() {
|
||||
.hide-text();
|
||||
}
|
|
@ -0,0 +1,30 @@
|
|||
// stylelint-disable media-feature-name-no-vendor-prefix, media-feature-parentheses-space-inside, media-feature-name-no-unknown, indentation, at-rule-name-space-after
|
||||
|
||||
// Responsive image
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
.img-responsive(@display: block) {
|
||||
display: @display;
|
||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||
}
|
||||
|
||||
|
||||
// Retina image
|
||||
//
|
||||
// Short retina mixin for setting background-image and -size. Note that the
|
||||
// spelling of `min--moz-device-pixel-ratio` is intentional.
|
||||
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
|
||||
background-image: url("@{file-1x}");
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
background-image: url("@{file-2x}");
|
||||
background-size: @width-1x @height-1x;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
// Labels
|
||||
|
||||
.label-variant(@color) {
|
||||
background-color: @color;
|
||||
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken(@color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,30 @@
|
|||
// List Groups
|
||||
|
||||
.list-group-item-variant(@state; @background; @color) {
|
||||
.list-group-item-@{state} {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
|
||||
a&,
|
||||
button& {
|
||||
color: @color;
|
||||
|
||||
.list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @color;
|
||||
background-color: darken(@background, 5%);
|
||||
}
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
color: #fff;
|
||||
background-color: @color;
|
||||
border-color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
// Horizontal dividers
|
||||
//
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
|
||||
.nav-divider(@color: #e5e5e5) {
|
||||
height: 1px;
|
||||
margin: ((@line-height-computed / 2) - 1) 0;
|
||||
overflow: hidden;
|
||||
background-color: @color;
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
// Navbar vertical align
|
||||
//
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
|
||||
|
||||
.navbar-vertical-align(@element-height) {
|
||||
margin-top: ((@navbar-height - @element-height) / 2);
|
||||
margin-bottom: ((@navbar-height - @element-height) / 2);
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
// Opacity
|
||||
|
||||
.opacity(@opacity) {
|
||||
@opacity-ie: (@opacity * 100); // IE8 filter
|
||||
filter: ~"alpha(opacity=@{opacity-ie})";
|
||||
opacity: @opacity;
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
// Pagination
|
||||
|
||||
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
font-size: @font-size;
|
||||
line-height: @line-height;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-left-radius(@border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-right-radius(@border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
// Panels
|
||||
|
||||
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
|
||||
border-color: @border;
|
||||
|
||||
& > .panel-heading {
|
||||
color: @heading-text-color;
|
||||
background-color: @heading-bg-color;
|
||||
border-color: @heading-border;
|
||||
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-top-color: @border;
|
||||
}
|
||||
.badge {
|
||||
color: @heading-bg-color;
|
||||
background-color: @heading-text-color;
|
||||
}
|
||||
}
|
||||
& > .panel-footer {
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-bottom-color: @border;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
// Progress bars
|
||||
|
||||
.progress-bar-variant(@color) {
|
||||
background-color: @color;
|
||||
|
||||
// Deprecated parent class requirement as of v3.2.0
|
||||
.progress-striped & {
|
||||
#gradient > .striped();
|
||||
}
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
// Reset filters for IE
|
||||
//
|
||||
// When you need to remove a gradient background, do not forget to use this to reset
|
||||
// the IE filter for IE9 and below.
|
||||
|
||||
.reset-filter() {
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
.reset-text() {
|
||||
font-family: @font-family-base;
|
||||
// We deliberately do NOT reset font-size.
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: @line-height-base;
|
||||
line-break: auto;
|
||||
text-align: left; // Fallback for where `start` is not supported
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: normal;
|
||||
}
|
|
@ -0,0 +1,6 @@
|
|||
// Resize anything
|
||||
|
||||
.resizable(@direction) {
|
||||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
||||
resize: @direction; // Options: horizontal, vertical, both
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
.responsive-visibility() {
|
||||
display: block !important;
|
||||
table& { display: table !important; }
|
||||
tr& { display: table-row !important; }
|
||||
th&,
|
||||
td& { display: table-cell !important; }
|
||||
}
|
||||
|
||||
.responsive-invisibility() {
|
||||
display: none !important;
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
// Sizing shortcuts
|
||||
|
||||
.size(@width; @height) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.square(@size) {
|
||||
.size(@size; @size);
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
// WebKit-style focus
|
||||
|
||||
.tab-focus() {
|
||||
// WebKit-specific. Other browsers will keep their default outline style.
|
||||
// (Initially tried to also force default via `outline: initial`,
|
||||
// but that seems to erroneously remove the outline in Firefox altogether.)
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
|
@ -0,0 +1,28 @@
|
|||
// Tables
|
||||
|
||||
.table-row-variant(@state; @background) {
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
.table > thead > tr,
|
||||
.table > tbody > tr,
|
||||
.table > tfoot > tr {
|
||||
> td.@{state},
|
||||
> th.@{state},
|
||||
&.@{state} > td,
|
||||
&.@{state} > th {
|
||||
background-color: @background;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for `.table-hover`
|
||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||
.table-hover > tbody > tr {
|
||||
> td.@{state}:hover,
|
||||
> th.@{state}:hover,
|
||||
&.@{state}:hover > td,
|
||||
&:hover > .@{state},
|
||||
&.@{state}:hover > th {
|
||||
background-color: darken(@background, 5%);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
// Typography
|
||||
|
||||
.text-emphasis-variant(@color) {
|
||||
color: @color;
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
color: darken(@color, 10%);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
// Text overflow
|
||||
// Requires inline-block or block for proper styling
|
||||
|
||||
.text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
|
@ -0,0 +1,229 @@
|
|||
// stylelint-disable indentation, property-no-vendor-prefix, selector-no-vendor-prefix
|
||||
|
||||
// Vendor Prefixes
|
||||
//
|
||||
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
|
||||
// Autoprefixer in our Gruntfile. They have been removed in v4.
|
||||
|
||||
// - Animations
|
||||
// - Backface visibility
|
||||
// - Box shadow
|
||||
// - Box sizing
|
||||
// - Content columns
|
||||
// - Hyphens
|
||||
// - Placeholder text
|
||||
// - Transformations
|
||||
// - Transitions
|
||||
// - User Select
|
||||
|
||||
|
||||
// Animations
|
||||
.animation(@animation) {
|
||||
-webkit-animation: @animation;
|
||||
-o-animation: @animation;
|
||||
animation: @animation;
|
||||
}
|
||||
.animation-name(@name) {
|
||||
-webkit-animation-name: @name;
|
||||
animation-name: @name;
|
||||
}
|
||||
.animation-duration(@duration) {
|
||||
-webkit-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
}
|
||||
.animation-timing-function(@timing-function) {
|
||||
-webkit-animation-timing-function: @timing-function;
|
||||
animation-timing-function: @timing-function;
|
||||
}
|
||||
.animation-delay(@delay) {
|
||||
-webkit-animation-delay: @delay;
|
||||
animation-delay: @delay;
|
||||
}
|
||||
.animation-iteration-count(@iteration-count) {
|
||||
-webkit-animation-iteration-count: @iteration-count;
|
||||
animation-iteration-count: @iteration-count;
|
||||
}
|
||||
.animation-direction(@direction) {
|
||||
-webkit-animation-direction: @direction;
|
||||
animation-direction: @direction;
|
||||
}
|
||||
.animation-fill-mode(@fill-mode) {
|
||||
-webkit-animation-fill-mode: @fill-mode;
|
||||
animation-fill-mode: @fill-mode;
|
||||
}
|
||||
|
||||
// Backface visibility
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
// Default value is `visible`, but can be changed to `hidden`
|
||||
|
||||
.backface-visibility(@visibility) {
|
||||
-webkit-backface-visibility: @visibility;
|
||||
-moz-backface-visibility: @visibility;
|
||||
backface-visibility: @visibility;
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
//
|
||||
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
|
||||
// supported browsers that have box shadow capabilities now support it.
|
||||
|
||||
.box-shadow(@shadow) {
|
||||
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
.box-sizing(@boxmodel) {
|
||||
-webkit-box-sizing: @boxmodel;
|
||||
-moz-box-sizing: @boxmodel;
|
||||
box-sizing: @boxmodel;
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
|
||||
-webkit-column-count: @column-count;
|
||||
-moz-column-count: @column-count;
|
||||
column-count: @column-count;
|
||||
-webkit-column-gap: @column-gap;
|
||||
-moz-column-gap: @column-gap;
|
||||
column-gap: @column-gap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
.hyphens(@mode: auto) {
|
||||
-webkit-hyphens: @mode;
|
||||
-moz-hyphens: @mode;
|
||||
-ms-hyphens: @mode; // IE10+
|
||||
-o-hyphens: @mode;
|
||||
hyphens: @mode;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
.placeholder(@color: @input-color-placeholder) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: @color;
|
||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
|
||||
}
|
||||
|
||||
// Transformations
|
||||
.scale(@ratio) {
|
||||
-webkit-transform: scale(@ratio);
|
||||
-ms-transform: scale(@ratio); // IE9 only
|
||||
-o-transform: scale(@ratio);
|
||||
transform: scale(@ratio);
|
||||
}
|
||||
.scale(@ratioX; @ratioY) {
|
||||
-webkit-transform: scale(@ratioX, @ratioY);
|
||||
-ms-transform: scale(@ratioX, @ratioY); // IE9 only
|
||||
-o-transform: scale(@ratioX, @ratioY);
|
||||
transform: scale(@ratioX, @ratioY);
|
||||
}
|
||||
.scaleX(@ratio) {
|
||||
-webkit-transform: scaleX(@ratio);
|
||||
-ms-transform: scaleX(@ratio); // IE9 only
|
||||
-o-transform: scaleX(@ratio);
|
||||
transform: scaleX(@ratio);
|
||||
}
|
||||
.scaleY(@ratio) {
|
||||
-webkit-transform: scaleY(@ratio);
|
||||
-ms-transform: scaleY(@ratio); // IE9 only
|
||||
-o-transform: scaleY(@ratio);
|
||||
transform: scaleY(@ratio);
|
||||
}
|
||||
.skew(@x; @y) {
|
||||
-webkit-transform: skewX(@x) skewY(@y);
|
||||
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||
-o-transform: skewX(@x) skewY(@y);
|
||||
transform: skewX(@x) skewY(@y);
|
||||
}
|
||||
.translate(@x; @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y); // IE9 only
|
||||
-o-transform: translate(@x, @y);
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.translate3d(@x; @y; @z) {
|
||||
-webkit-transform: translate3d(@x, @y, @z);
|
||||
transform: translate3d(@x, @y, @z);
|
||||
}
|
||||
.rotate(@degrees) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
-ms-transform: rotate(@degrees); // IE9 only
|
||||
-o-transform: rotate(@degrees);
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
.rotateX(@degrees) {
|
||||
-webkit-transform: rotateX(@degrees);
|
||||
-ms-transform: rotateX(@degrees); // IE9 only
|
||||
-o-transform: rotateX(@degrees);
|
||||
transform: rotateX(@degrees);
|
||||
}
|
||||
.rotateY(@degrees) {
|
||||
-webkit-transform: rotateY(@degrees);
|
||||
-ms-transform: rotateY(@degrees); // IE9 only
|
||||
-o-transform: rotateY(@degrees);
|
||||
transform: rotateY(@degrees);
|
||||
}
|
||||
.perspective(@perspective) {
|
||||
-webkit-perspective: @perspective;
|
||||
-moz-perspective: @perspective;
|
||||
perspective: @perspective;
|
||||
}
|
||||
.perspective-origin(@perspective) {
|
||||
-webkit-perspective-origin: @perspective;
|
||||
-moz-perspective-origin: @perspective;
|
||||
perspective-origin: @perspective;
|
||||
}
|
||||
.transform-origin(@origin) {
|
||||
-webkit-transform-origin: @origin;
|
||||
-moz-transform-origin: @origin;
|
||||
-ms-transform-origin: @origin; // IE9 only
|
||||
transform-origin: @origin;
|
||||
}
|
||||
|
||||
|
||||
// Transitions
|
||||
|
||||
.transition(@transition) {
|
||||
-webkit-transition: @transition;
|
||||
-o-transition: @transition;
|
||||
transition: @transition;
|
||||
}
|
||||
.transition-property(@transition-property) {
|
||||
-webkit-transition-property: @transition-property;
|
||||
transition-property: @transition-property;
|
||||
}
|
||||
.transition-delay(@transition-delay) {
|
||||
-webkit-transition-delay: @transition-delay;
|
||||
transition-delay: @transition-delay;
|
||||
}
|
||||
.transition-duration(@transition-duration) {
|
||||
-webkit-transition-duration: @transition-duration;
|
||||
transition-duration: @transition-duration;
|
||||
}
|
||||
.transition-timing-function(@timing-function) {
|
||||
-webkit-transition-timing-function: @timing-function;
|
||||
transition-timing-function: @timing-function;
|
||||
}
|
||||
.transition-transform(@transition) {
|
||||
-webkit-transition: -webkit-transform @transition;
|
||||
-moz-transition: -moz-transform @transition;
|
||||
-o-transition: -o-transform @transition;
|
||||
transition: transform @transition;
|
||||
}
|
||||
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
|
||||
.user-select(@select) {
|
||||
-webkit-user-select: @select;
|
||||
-moz-user-select: @select;
|
||||
-ms-user-select: @select; // IE10+
|
||||
user-select: @select;
|
||||
}
|
|
@ -14,22 +14,30 @@
|
|||
|
||||
// Container that the modal scrolls within
|
||||
.modal {
|
||||
display: none;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-modal-background;
|
||||
z-index: @zindex-modal;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
&.fade .modal-dialog {
|
||||
.translate(0, -25%);
|
||||
.transition-transform(~"0.3s ease-out");
|
||||
}
|
||||
&.in .modal-dialog { .translate(0, 0)}
|
||||
&.in .modal-dialog { .translate(0, 0); }
|
||||
}
|
||||
.modal-open .modal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
|
@ -37,20 +45,19 @@
|
|||
position: relative;
|
||||
width: auto;
|
||||
margin: 10px;
|
||||
z-index: (@zindex-modal-background + 10);
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: @modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
|
||||
border: 1px solid @modal-content-border-color;
|
||||
border-radius: @border-radius-large;
|
||||
.box-shadow(0 3px 9px rgba(0,0,0,.5));
|
||||
background-clip: padding-box;
|
||||
.box-shadow(0 3px 9px rgba(0, 0, 0, .5));
|
||||
// Remove focus outline from opened modal
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Modal background
|
||||
|
@ -60,11 +67,11 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: (@zindex-modal-background - 10);
|
||||
z-index: @zindex-modal-background;
|
||||
background-color: @modal-backdrop-bg;
|
||||
// Fade for backdrop
|
||||
&.fade { .opacity(0); }
|
||||
&.in { .opacity(.5); }
|
||||
&.in { .opacity(@modal-backdrop-opacity); }
|
||||
}
|
||||
|
||||
// Modal header
|
||||
|
@ -72,7 +79,7 @@
|
|||
.modal-header {
|
||||
padding: @modal-title-padding;
|
||||
border-bottom: 1px solid @modal-header-border-color;
|
||||
min-height: (@modal-title-padding + @modal-title-line-height);
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
// Close icon
|
||||
.modal-header .close {
|
||||
|
@ -94,16 +101,15 @@
|
|||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
margin-top: 15px;
|
||||
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
|
||||
padding: @modal-inner-padding;
|
||||
text-align: right; // right align buttons
|
||||
border-top: 1px solid @modal-footer-border-color;
|
||||
.clearfix(); // clear it in case folks use .pull-* classes on buttons
|
||||
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
|
||||
|
||||
// Properly space out buttons
|
||||
.btn + .btn {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
|
||||
margin-left: 5px;
|
||||
}
|
||||
// but override that for button groups
|
||||
.btn-group .btn + .btn {
|
||||
|
@ -115,15 +121,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
.modal-scrollbar-measure {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@media (min-width: @screen-sm-min) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
width: 600px;
|
||||
width: @modal-md;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.modal-content {
|
||||
.box-shadow(0 5px 15px rgba(0,0,0,.5));
|
||||
.box-shadow(0 5px 15px rgba(0, 0, 0, .5));
|
||||
}
|
||||
|
||||
// Modal sizes
|
||||
.modal-sm { width: @modal-sm; }
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.modal-lg { width: @modal-lg; }
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-max-type, selector-max-compound-selectors, selector-max-combinators, selector-max-class, declaration-no-important, selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Navbars
|
||||
// --------------------------------------------------
|
||||
|
@ -15,7 +17,7 @@
|
|||
border: 1px solid transparent;
|
||||
|
||||
// Prevent floats from breaking the navbar
|
||||
.clearfix();
|
||||
&:extend(.clearfix all);
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
border-radius: @navbar-border-radius;
|
||||
|
@ -29,7 +31,7 @@
|
|||
// styling of responsive aspects.
|
||||
|
||||
.navbar-header {
|
||||
.clearfix();
|
||||
&:extend(.clearfix all);
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
float: left;
|
||||
|
@ -48,13 +50,12 @@
|
|||
// content for the user's viewport.
|
||||
|
||||
.navbar-collapse {
|
||||
max-height: 340px;
|
||||
overflow-x: visible;
|
||||
padding-right: @navbar-padding-horizontal;
|
||||
padding-left: @navbar-padding-horizontal;
|
||||
padding-left: @navbar-padding-horizontal;
|
||||
overflow-x: visible;
|
||||
border-top: 1px solid transparent;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
|
||||
.clearfix();
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
|
||||
&:extend(.clearfix all);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.in {
|
||||
|
@ -82,25 +83,60 @@
|
|||
.navbar-fixed-top &,
|
||||
.navbar-static-top &,
|
||||
.navbar-fixed-bottom & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
.navbar-collapse {
|
||||
max-height: @navbar-collapse-max-height;
|
||||
|
||||
@media (max-device-width: @screen-xs-min) and (orientation: landscape) {
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix the top/bottom navbars when screen real estate supports it
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-navbar-fixed;
|
||||
|
||||
// Undo the rounded corners
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
.navbar-fixed-bottom {
|
||||
bottom: 0;
|
||||
margin-bottom: 0; // override .navbar defaults
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
|
||||
// Both navbar header and collapse
|
||||
//
|
||||
// When a container is present, change the behavior of the header and collapse.
|
||||
|
||||
.container > .navbar-header,
|
||||
.container > .navbar-collapse {
|
||||
margin-right: -@navbar-padding-horizontal;
|
||||
margin-left: -@navbar-padding-horizontal;
|
||||
.container,
|
||||
.container-fluid {
|
||||
> .navbar-header,
|
||||
> .navbar-collapse {
|
||||
margin-right: -@navbar-padding-horizontal;
|
||||
margin-left: -@navbar-padding-horizontal;
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -121,34 +157,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Fix the top/bottom navbars when screen real estate supports it
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-navbar-fixed;
|
||||
|
||||
// Undo the rounded corners
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
.navbar-fixed-bottom {
|
||||
bottom: 0;
|
||||
margin-bottom: 0; // override .navbar defaults
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
|
||||
// Brand/project name
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
height: @navbar-height;
|
||||
padding: @navbar-padding-vertical @navbar-padding-horizontal;
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-computed;
|
||||
|
@ -158,8 +172,13 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar > .container & {
|
||||
.navbar > .container &,
|
||||
.navbar > .container-fluid & {
|
||||
margin-left: -@navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
@ -174,14 +193,20 @@
|
|||
.navbar-toggle {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-right: @navbar-padding-horizontal;
|
||||
padding: 9px 10px;
|
||||
margin-right: @navbar-padding-horizontal;
|
||||
.navbar-vertical-align(34px);
|
||||
background-color: transparent;
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
border: 1px solid transparent;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// We remove the `outline` here, but later compensate by attaching `:hover`
|
||||
// styles to `:focus`.
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Bars
|
||||
.icon-bar {
|
||||
display: block;
|
||||
|
@ -201,14 +226,14 @@
|
|||
|
||||
// Navbar nav links
|
||||
//
|
||||
// Builds on top of the `.nav` components with it's own modifier class to make
|
||||
// Builds on top of the `.nav` components with its own modifier class to make
|
||||
// the nav the full height of the horizontal nav (above 768px).
|
||||
|
||||
.navbar-nav {
|
||||
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
|
||||
|
||||
> li > a {
|
||||
padding-top: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
line-height: @line-height-computed;
|
||||
}
|
||||
|
@ -245,42 +270,26 @@
|
|||
> li {
|
||||
float: left;
|
||||
> a {
|
||||
padding-top: @navbar-padding-vertical;
|
||||
padding-top: @navbar-padding-vertical;
|
||||
padding-bottom: @navbar-padding-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right:last-child {
|
||||
margin-right: -@navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Component alignment
|
||||
//
|
||||
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
|
||||
// issues with parents and chaining. Only do this when the navbar is uncollapsed
|
||||
// though so that navbar contents properly stack and align in mobile.
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar-left { .pull-left(); }
|
||||
.navbar-right { .pull-right(); }
|
||||
}
|
||||
|
||||
|
||||
// Navbar form
|
||||
//
|
||||
// Extension of the `.form-inline` with some extra flavor for optimum display in
|
||||
// our navbars.
|
||||
|
||||
.navbar-form {
|
||||
margin-left: -@navbar-padding-horizontal;
|
||||
margin-right: -@navbar-padding-horizontal;
|
||||
padding: 10px @navbar-padding-horizontal;
|
||||
margin-right: -@navbar-padding-horizontal;
|
||||
margin-left: -@navbar-padding-horizontal;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
@shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
|
||||
.box-shadow(@shadow);
|
||||
|
||||
// Mixin behavior for optimum display
|
||||
|
@ -289,6 +298,10 @@
|
|||
.form-group {
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -298,17 +311,12 @@
|
|||
// Undo 100% width for pull classes
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
width: auto;
|
||||
border: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border: 0;
|
||||
.box-shadow(none);
|
||||
|
||||
// Outdent the form if last child to line up with content down the page
|
||||
&.navbar-right:last-child {
|
||||
margin-right: -@navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -322,16 +330,11 @@
|
|||
}
|
||||
// Menu position and menu caret support for dropups via extra dropup class
|
||||
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
||||
margin-bottom: 0;
|
||||
.border-top-radius(@navbar-border-radius);
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
// Right aligned menus need alt position
|
||||
.navbar-nav.pull-right > li > .dropdown-menu,
|
||||
.navbar-nav > li > .dropdown-menu.pull-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
// Buttons in navbars
|
||||
//
|
||||
|
@ -358,16 +361,33 @@
|
|||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
float: left;
|
||||
margin-left: @navbar-padding-horizontal;
|
||||
margin-right: @navbar-padding-horizontal;
|
||||
margin-left: @navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Outdent the form if last child to line up with content down the page
|
||||
&.navbar-right:last-child {
|
||||
|
||||
// Component alignment
|
||||
//
|
||||
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
|
||||
// issues with parents and chaining. Only do this when the navbar is uncollapsed
|
||||
// though so that navbar contents properly stack and align in mobile.
|
||||
//
|
||||
// Declared after the navbar components to ensure more specificity on the margins.
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar-left { .pull-left(); }
|
||||
.navbar-right {
|
||||
.pull-right();
|
||||
margin-right: -@navbar-padding-horizontal;
|
||||
|
||||
~ .navbar-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate navbars
|
||||
// --------------------------------------------------
|
||||
|
||||
|
@ -415,33 +435,15 @@
|
|||
background-color: @navbar-default-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
border-color: @navbar-default-toggle-border-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-default-toggle-hover-bg;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: @navbar-default-toggle-icon-bar-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: @navbar-default-border;
|
||||
}
|
||||
|
||||
// Dropdown menu items
|
||||
.navbar-nav {
|
||||
// Dropdown menu items
|
||||
// Remove background color from open dropdown
|
||||
> .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-default-link-active-bg;
|
||||
color: @navbar-default-link-active-color;
|
||||
background-color: @navbar-default-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -476,6 +478,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
border-color: @navbar-default-toggle-border-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-default-toggle-hover-bg;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: @navbar-default-toggle-icon-bar-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: @navbar-default-border;
|
||||
}
|
||||
|
||||
|
||||
// Links in navbars
|
||||
//
|
||||
|
@ -488,6 +506,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: @navbar-default-link-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-default-link-hover-color;
|
||||
}
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-default-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inverse navbar
|
||||
|
@ -535,33 +567,14 @@
|
|||
background-color: @navbar-inverse-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Darken the responsive nav toggle
|
||||
.navbar-toggle {
|
||||
border-color: @navbar-inverse-toggle-border-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-inverse-toggle-hover-bg;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: @navbar-inverse-toggle-icon-bar-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: darken(@navbar-inverse-bg, 7%);
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
.navbar-nav {
|
||||
// Dropdowns
|
||||
> .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-inverse-link-active-bg;
|
||||
color: @navbar-inverse-link-active-color;
|
||||
background-color: @navbar-inverse-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -602,6 +615,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Darken the responsive nav toggle
|
||||
.navbar-toggle {
|
||||
border-color: @navbar-inverse-toggle-border-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-inverse-toggle-hover-bg;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: @navbar-inverse-toggle-icon-bar-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: darken(@navbar-inverse-bg, 7%);
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
color: @navbar-inverse-link-color;
|
||||
&:hover {
|
||||
|
@ -609,4 +639,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: @navbar-inverse-link-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-inverse-link-hover-color;
|
||||
}
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-inverse-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-no-qualifying-type, selector-max-type
|
||||
|
||||
//
|
||||
// Navs
|
||||
// --------------------------------------------------
|
||||
|
@ -7,10 +9,10 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
.nav {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; // Override default ul/ol
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
.clearfix();
|
||||
&:extend(.clearfix all);
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
|
@ -35,8 +37,8 @@
|
|||
&:focus {
|
||||
color: @nav-disabled-link-hover-color;
|
||||
text-decoration: none;
|
||||
cursor: @cursor-disabled;
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -91,16 +93,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Active state, and it's :hover to override normal :hover
|
||||
// Active state, and its :hover to override normal :hover
|
||||
&.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-tabs-active-link-hover-color;
|
||||
cursor: default;
|
||||
background-color: @nav-tabs-active-link-hover-bg;
|
||||
border: 1px solid @nav-tabs-active-link-hover-border-color;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -162,9 +164,9 @@
|
|||
|
||||
> li {
|
||||
float: none;
|
||||
> a {
|
||||
text-align: center;
|
||||
> a {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,66 +1,11 @@
|
|||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
|
||||
// stylelint-disable
|
||||
|
||||
// ==========================================================================
|
||||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Correct `block` display not defined in IE 8/9.
|
||||
//
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct `inline-block` display not defined in IE 8/9.
|
||||
//
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
//
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `[hidden]` styling not present in IE 8/9.
|
||||
// Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
//
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Base
|
||||
// ==========================================================================
|
||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
// user zoom.
|
||||
// 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
// without disabling user zoom.
|
||||
//
|
||||
|
||||
html {
|
||||
|
@ -77,7 +22,65 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
// and Firefox.
|
||||
// Correct `block` display not defined for `main` in IE 11.
|
||||
//
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
//
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
//
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `[hidden]` styling not present in IE 8/9/10.
|
||||
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||
//
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Links
|
||||
// ==========================================================================
|
||||
|
||||
|
@ -86,19 +89,12 @@ body {
|
|||
//
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `outline` inconsistency between Chrome and other browsers.
|
||||
//
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
//
|
||||
// Improve readability when focused and also mouse hovered in all browsers.
|
||||
// Improve readability of focused elements when they are also in an
|
||||
// active/hover state.
|
||||
//
|
||||
|
||||
a:active,
|
||||
|
@ -106,30 +102,22 @@ a:hover {
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Typography
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address variable `h1` font-size and margin within `section` and `article`
|
||||
// contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
//
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
// 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
//
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
border-bottom: none; // 1
|
||||
text-decoration: underline; // 2
|
||||
text-decoration: underline dotted; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
b,
|
||||
|
@ -138,7 +126,7 @@ strong {
|
|||
}
|
||||
|
||||
//
|
||||
// Address styling not present in Safari 5 and Chrome.
|
||||
// Address styling not present in Safari and Chrome.
|
||||
//
|
||||
|
||||
dfn {
|
||||
|
@ -146,13 +134,13 @@ dfn {
|
|||
}
|
||||
|
||||
//
|
||||
// Address differences between Firefox and other browsers.
|
||||
// Address variable `h1` font-size and margin within `section` and `article`
|
||||
// contexts in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
//
|
||||
|
@ -164,34 +152,6 @@ mark {
|
|||
color: #000;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct font family set oddly in Safari 5 and Chrome.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
//
|
||||
// Improve readability of pre-formatted text in all browsers.
|
||||
//
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
//
|
||||
// Set consistent quote types.
|
||||
//
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent and variable font size in all browsers.
|
||||
//
|
||||
|
@ -220,12 +180,11 @@ sub {
|
|||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Embedded content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove border when inside `a` element in IE 8/9.
|
||||
// Remove border when inside `a` element in IE 8/9/10.
|
||||
//
|
||||
|
||||
img {
|
||||
|
@ -233,79 +192,91 @@ img {
|
|||
}
|
||||
|
||||
//
|
||||
// Correct overflow displayed oddly in IE 9.
|
||||
// Correct overflow not hidden in IE 9/10/11.
|
||||
//
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Figures
|
||||
// Grouping content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address margin not present in IE 8/9 and Safari 5.
|
||||
// Address margin not present in IE 8/9 and Safari.
|
||||
//
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
//
|
||||
// Address differences between Firefox and other browsers.
|
||||
//
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Contain overflow in all browsers.
|
||||
//
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address odd `em`-unit font size rendering in all browsers.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Define consistent border, margin, and padding.
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `select`, unless a `border` property is set.
|
||||
//
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `color` not being inherited in IE 8/9.
|
||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
//
|
||||
|
||||
legend {
|
||||
border: 0; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct font family not being inherited in all browsers.
|
||||
// 2. Correct font size not being inherited in all browsers.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; // 1
|
||||
font-size: 100%; // 2
|
||||
color: inherit; // 1
|
||||
font: inherit; // 2
|
||||
margin: 0; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
// Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
//
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
// All other form control elements do not inherit `text-transform` values.
|
||||
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
// Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
// Correct `select` style inheritance in Firefox.
|
||||
//
|
||||
|
||||
button,
|
||||
|
@ -338,6 +309,28 @@ html input[disabled] {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
//
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
//
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
//
|
||||
// It's recommended that you don't attempt to style these elements.
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
//
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
|
@ -350,21 +343,30 @@ input[type="radio"] {
|
|||
}
|
||||
|
||||
//
|
||||
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
// (include `-moz` to future-proof).
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
// `font-size` values of the `input`, it causes the cursor style of the
|
||||
// decrement button to change from `default` to `text`.
|
||||
//
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
|
||||
//
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; // 2
|
||||
box-sizing: content-box;
|
||||
box-sizing: content-box; //2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
// on OS X.
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
//
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
|
@ -373,26 +375,42 @@ input[type="search"]::-webkit-search-decoration {
|
|||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
// Define consistent border, margin, and padding.
|
||||
//
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Remove default vertical scrollbar in IE 8/9.
|
||||
// 2. Improve readability and alignment in all browsers.
|
||||
// 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
//
|
||||
|
||||
legend {
|
||||
border: 0; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
//
|
||||
|
||||
textarea {
|
||||
overflow: auto; // 1
|
||||
vertical-align: top; // 2
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Don't inherit the `font-weight` (applied by a rule above).
|
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
//
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Tables
|
||||
// ==========================================================================
|
||||
|
||||
|
@ -404,3 +422,8 @@ table {
|
|||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
@ -1,51 +0,0 @@
|
|||
{
|
||||
"name": "bootstrap"
|
||||
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
|
||||
, "version": "3.0.3"
|
||||
, "keywords": ["bootstrap", "css"]
|
||||
, "homepage": "http://getbootstrap.com"
|
||||
, "author": "Twitter, Inc."
|
||||
, "scripts": { "test": "grunt test" }
|
||||
, "repository": {
|
||||
"type": "git"
|
||||
, "url": "https://github.com/twbs/bootstrap.git"
|
||||
}
|
||||
, "bugs": {
|
||||
"url": "https://github.com/twbs/bootstrap/issues"
|
||||
}
|
||||
, "licenses": [
|
||||
{
|
||||
"type": "Apache-2.0"
|
||||
, "url": "http://www.apache.org/licenses/LICENSE-2.0"
|
||||
}
|
||||
]
|
||||
, "devDependencies": {
|
||||
"btoa": "~1.1.1"
|
||||
, "grunt": "~0.4.1"
|
||||
, "grunt-contrib-clean": "~0.5.0"
|
||||
, "grunt-contrib-concat": "~0.3.0"
|
||||
, "grunt-contrib-connect": "~0.5.0"
|
||||
, "grunt-contrib-copy": "~0.4.1"
|
||||
, "grunt-contrib-jshint": "~0.7.0"
|
||||
, "grunt-contrib-qunit": "~0.3.0"
|
||||
, "grunt-contrib-uglify": "~0.2.4"
|
||||
, "grunt-contrib-watch": "~0.5.3"
|
||||
, "grunt-html-validation": "~0.1.6"
|
||||
, "grunt-jekyll": "~0.4.0"
|
||||
, "grunt-recess": "~0.5.0"
|
||||
, "grunt-saucelabs": "~4.1.2"
|
||||
, "grunt-sed": "~0.1.1"
|
||||
, "regexp-quote": "~0.0.0"
|
||||
}
|
||||
, "jspm": {
|
||||
"main": "js/bootstrap"
|
||||
, "directories": { "lib": "dist" }
|
||||
, "shim": {
|
||||
"js/bootstrap": {
|
||||
"imports": "jquery"
|
||||
, "exports": "$"
|
||||
}
|
||||
}
|
||||
, "buildConfig": { "uglify": true }
|
||||
}
|
||||
}
|
|
@ -6,24 +6,24 @@
|
|||
.pager {
|
||||
padding-left: 0;
|
||||
margin: @line-height-computed 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
.clearfix();
|
||||
list-style: none;
|
||||
&:extend(.clearfix all);
|
||||
li {
|
||||
display: inline;
|
||||
> a,
|
||||
> span {
|
||||
display: inline-block;
|
||||
padding: 5px 14px;
|
||||
background-color: @pagination-bg;
|
||||
border: 1px solid @pagination-border;
|
||||
background-color: @pager-bg;
|
||||
border: 1px solid @pager-border;
|
||||
border-radius: @pager-border-radius;
|
||||
}
|
||||
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
text-decoration: none;
|
||||
background-color: @pagination-hover-bg;
|
||||
background-color: @pager-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -47,9 +47,8 @@
|
|||
> a:focus,
|
||||
> span {
|
||||
color: @pager-disabled-color;
|
||||
background-color: @pagination-bg;
|
||||
cursor: not-allowed;
|
||||
cursor: @cursor-disabled;
|
||||
background-color: @pager-bg;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -14,11 +14,20 @@
|
|||
position: relative;
|
||||
float: left; // Collapse white-space
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
margin-left: -1px;
|
||||
line-height: @line-height-base;
|
||||
color: @pagination-color;
|
||||
text-decoration: none;
|
||||
background-color: @pagination-bg;
|
||||
border: 1px solid @pagination-border;
|
||||
margin-left: -1px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
color: @pagination-hover-color;
|
||||
background-color: @pagination-hover-bg;
|
||||
border-color: @pagination-hover-border;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
|
@ -35,24 +44,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
> li > a,
|
||||
> li > span {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @pagination-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
color: @pagination-active-color;
|
||||
background-color: @pagination-active-bg;
|
||||
border-color: @pagination-active-bg;
|
||||
cursor: default;
|
||||
background-color: @pagination-active-bg;
|
||||
border-color: @pagination-active-border;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -64,9 +65,9 @@
|
|||
> a:hover,
|
||||
> a:focus {
|
||||
color: @pagination-disabled-color;
|
||||
background-color: @pagination-bg;
|
||||
border-color: @pagination-border;
|
||||
cursor: not-allowed;
|
||||
cursor: @cursor-disabled;
|
||||
background-color: @pagination-disabled-bg;
|
||||
border-color: @pagination-disabled-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -76,10 +77,10 @@
|
|||
|
||||
// Large
|
||||
.pagination-lg {
|
||||
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
|
||||
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-sm {
|
||||
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
|
||||
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-max-type, selector-max-compound-selectors, selector-max-combinators, no-duplicate-selectors
|
||||
|
||||
//
|
||||
// Panels
|
||||
// --------------------------------------------------
|
||||
|
@ -9,13 +11,48 @@
|
|||
background-color: @panel-bg;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @panel-border-radius;
|
||||
.box-shadow(0 1px 1px rgba(0,0,0,.05));
|
||||
.box-shadow(0 1px 1px rgba(0, 0, 0, .05));
|
||||
}
|
||||
|
||||
// Panel contents
|
||||
.panel-body {
|
||||
padding: 15px;
|
||||
.clearfix();
|
||||
padding: @panel-body-padding;
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
// Optional heading
|
||||
.panel-heading {
|
||||
padding: @panel-heading-padding;
|
||||
border-bottom: 1px solid transparent;
|
||||
.border-top-radius((@panel-border-radius - 1));
|
||||
|
||||
> .dropdown .dropdown-toggle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Within heading, strip any `h*` tag of its default margins for spacing.
|
||||
.panel-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: ceil((@font-size-base * 1.125));
|
||||
color: inherit;
|
||||
|
||||
> a,
|
||||
> small,
|
||||
> .small,
|
||||
> small > a,
|
||||
> .small > a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional footer (stays gray in every modifier class)
|
||||
.panel-footer {
|
||||
padding: @panel-footer-padding;
|
||||
background-color: @panel-footer-bg;
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
.border-bottom-radius((@panel-border-radius - 1));
|
||||
}
|
||||
|
||||
|
||||
|
@ -25,22 +62,36 @@
|
|||
// any kind of custom content between the two.
|
||||
|
||||
.panel {
|
||||
> .list-group {
|
||||
> .list-group,
|
||||
> .panel-collapse > .list-group {
|
||||
margin-bottom: 0;
|
||||
|
||||
.list-group-item {
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Remove border radius for top one
|
||||
&:first-child {
|
||||
.border-top-radius(0);
|
||||
// Add border top radius for first one
|
||||
&:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
.border-top-radius((@panel-border-radius - 1));
|
||||
}
|
||||
// But keep it for the last one
|
||||
&:last-child {
|
||||
}
|
||||
|
||||
// Add border bottom radius for last one
|
||||
&:last-child {
|
||||
.list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
.border-bottom-radius((@panel-border-radius - 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
> .panel-heading + .panel-collapse > .list-group {
|
||||
.list-group-item:first-child {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Collapse space between when there's no additional content.
|
||||
.panel-heading + .list-group {
|
||||
|
@ -48,7 +99,9 @@
|
|||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group + .panel-footer {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
// Tables in panels
|
||||
//
|
||||
|
@ -57,15 +110,67 @@
|
|||
|
||||
.panel {
|
||||
> .table,
|
||||
> .table-responsive > .table {
|
||||
> .table-responsive > .table,
|
||||
> .panel-collapse > .table {
|
||||
margin-bottom: 0;
|
||||
|
||||
caption {
|
||||
padding-right: @panel-body-padding;
|
||||
padding-left: @panel-body-padding;
|
||||
}
|
||||
}
|
||||
// Add border top radius for first one
|
||||
> .table:first-child,
|
||||
> .table-responsive:first-child > .table:first-child {
|
||||
.border-top-radius((@panel-border-radius - 1));
|
||||
|
||||
> thead:first-child,
|
||||
> tbody:first-child {
|
||||
> tr:first-child {
|
||||
border-top-left-radius: (@panel-border-radius - 1);
|
||||
border-top-right-radius: (@panel-border-radius - 1);
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-top-left-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-top-right-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Add border bottom radius for last one
|
||||
> .table:last-child,
|
||||
> .table-responsive:last-child > .table:last-child {
|
||||
.border-bottom-radius((@panel-border-radius - 1));
|
||||
|
||||
> tbody:last-child,
|
||||
> tfoot:last-child {
|
||||
> tr:last-child {
|
||||
border-bottom-right-radius: (@panel-border-radius - 1);
|
||||
border-bottom-left-radius: (@panel-border-radius - 1);
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-bottom-left-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-bottom-right-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .panel-body + .table,
|
||||
> .panel-body + .table-responsive {
|
||||
> .panel-body + .table-responsive,
|
||||
> .table + .panel-body,
|
||||
> .table-responsive + .panel-body {
|
||||
border-top: 1px solid @table-border-color;
|
||||
}
|
||||
> .table > tbody:first-child th,
|
||||
> .table > tbody:first-child td {
|
||||
> .table > tbody:first-child > tr:first-child th,
|
||||
> .table > tbody:first-child > tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
> .table-bordered,
|
||||
|
@ -83,64 +188,47 @@
|
|||
> td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&:last-child > th,
|
||||
&:last-child > td {
|
||||
}
|
||||
}
|
||||
> thead,
|
||||
> tbody {
|
||||
> tr:first-child {
|
||||
> td,
|
||||
> th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr:last-child {
|
||||
> td,
|
||||
> th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .table-responsive {
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional heading
|
||||
.panel-heading {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid transparent;
|
||||
.border-top-radius(@panel-border-radius - 1);
|
||||
|
||||
> .dropdown .dropdown-toggle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Within heading, strip any `h*` tag of it's default margins for spacing.
|
||||
.panel-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: ceil((@font-size-base * 1.125));
|
||||
color: inherit;
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional footer (stays gray in every modifier class)
|
||||
.panel-footer {
|
||||
padding: 10px 15px;
|
||||
background-color: @panel-footer-bg;
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
.border-bottom-radius(@panel-border-radius - 1);
|
||||
}
|
||||
|
||||
|
||||
// Collapsable panels (aka, accordion)
|
||||
// Collapsible panels (aka, accordion)
|
||||
//
|
||||
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
|
||||
// the help of our collapse JavaScript plugin.
|
||||
|
||||
.panel-group {
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
// Tighten up margin so it's only between panels
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
border-radius: @panel-border-radius;
|
||||
overflow: hidden; // crop contents when collapsed
|
||||
|
||||
+ .panel {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
@ -148,10 +236,13 @@
|
|||
|
||||
.panel-heading {
|
||||
border-bottom: 0;
|
||||
+ .panel-collapse .panel-body {
|
||||
|
||||
+ .panel-collapse > .panel-body,
|
||||
+ .panel-collapse > .list-group {
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
border-top: 0;
|
||||
+ .panel-collapse .panel-body {
|
||||
|
@ -171,12 +262,12 @@
|
|||
.panel-success {
|
||||
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
|
||||
}
|
||||
.panel-info {
|
||||
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
|
||||
}
|
||||
.panel-warning {
|
||||
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
|
||||
}
|
||||
.panel-danger {
|
||||
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
|
||||
}
|
||||
.panel-info {
|
||||
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
|
||||
}
|
||||
|
|
|
@ -11,110 +11,91 @@
|
|||
display: none;
|
||||
max-width: @popover-max-width;
|
||||
padding: 1px;
|
||||
text-align: left; // Reset given new insertion method
|
||||
// Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
.reset-text();
|
||||
font-size: @font-size-base;
|
||||
background-color: @popover-bg;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid @popover-fallback-border-color;
|
||||
border: 1px solid @popover-border-color;
|
||||
border-radius: @border-radius-large;
|
||||
.box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
|
||||
// Overrides for proper insertion
|
||||
white-space: normal;
|
||||
.box-shadow(0 5px 10px rgba(0, 0, 0, .2));
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
&.top { margin-top: -10px; }
|
||||
&.right { margin-left: 10px; }
|
||||
&.bottom { margin-top: 10px; }
|
||||
&.left { margin-left: -10px; }
|
||||
}
|
||||
&.top { margin-top: -@popover-arrow-width; }
|
||||
&.right { margin-left: @popover-arrow-width; }
|
||||
&.bottom { margin-top: @popover-arrow-width; }
|
||||
&.left { margin-left: -@popover-arrow-width; }
|
||||
|
||||
.popover-title {
|
||||
margin: 0; // reset heading margin
|
||||
padding: 8px 14px;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
background-color: @popover-title-bg;
|
||||
border-bottom: 1px solid darken(@popover-title-bg, 5%);
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
// Arrows
|
||||
// .arrow is outer, .arrow:after is inner
|
||||
> .arrow {
|
||||
border-width: @popover-arrow-outer-width;
|
||||
|
||||
.popover-content {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
//
|
||||
// .arrow is outer, .arrow:after is inner
|
||||
|
||||
.popover .arrow {
|
||||
&,
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
.popover .arrow {
|
||||
border-width: @popover-arrow-outer-width;
|
||||
}
|
||||
.popover .arrow:after {
|
||||
border-width: @popover-arrow-width;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.popover {
|
||||
&.top .arrow {
|
||||
left: 50%;
|
||||
margin-left: -@popover-arrow-outer-width;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
|
||||
border-top-color: @popover-arrow-outer-color;
|
||||
bottom: -@popover-arrow-outer-width;
|
||||
&,
|
||||
&:after {
|
||||
content: " ";
|
||||
bottom: 1px;
|
||||
margin-left: -@popover-arrow-width;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: @popover-arrow-color;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
border-width: @popover-arrow-width;
|
||||
}
|
||||
}
|
||||
&.right .arrow {
|
||||
|
||||
&.top > .arrow {
|
||||
bottom: -@popover-arrow-outer-width;
|
||||
left: 50%;
|
||||
margin-left: -@popover-arrow-outer-width;
|
||||
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
|
||||
border-top-color: @popover-arrow-outer-color;
|
||||
border-bottom-width: 0;
|
||||
&:after {
|
||||
bottom: 1px;
|
||||
margin-left: -@popover-arrow-width;
|
||||
content: " ";
|
||||
border-top-color: @popover-arrow-color;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
&.right > .arrow {
|
||||
top: 50%;
|
||||
left: -@popover-arrow-outer-width;
|
||||
margin-top: -@popover-arrow-outer-width;
|
||||
border-left-width: 0;
|
||||
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
|
||||
border-right-color: @popover-arrow-outer-color;
|
||||
border-left-width: 0;
|
||||
&:after {
|
||||
content: " ";
|
||||
left: 1px;
|
||||
bottom: -@popover-arrow-width;
|
||||
border-left-width: 0;
|
||||
left: 1px;
|
||||
content: " ";
|
||||
border-right-color: @popover-arrow-color;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
&.bottom .arrow {
|
||||
&.bottom > .arrow {
|
||||
top: -@popover-arrow-outer-width;
|
||||
left: 50%;
|
||||
margin-left: -@popover-arrow-outer-width;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
|
||||
border-bottom-color: @popover-arrow-outer-color;
|
||||
top: -@popover-arrow-outer-width;
|
||||
&:after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -@popover-arrow-width;
|
||||
content: " ";
|
||||
border-top-width: 0;
|
||||
border-bottom-color: @popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.left .arrow {
|
||||
&.left > .arrow {
|
||||
top: 50%;
|
||||
right: -@popover-arrow-outer-width;
|
||||
margin-top: -@popover-arrow-outer-width;
|
||||
|
@ -122,12 +103,24 @@
|
|||
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
|
||||
border-left-color: @popover-arrow-outer-color;
|
||||
&:after {
|
||||
content: " ";
|
||||
right: 1px;
|
||||
bottom: -@popover-arrow-width;
|
||||
content: " ";
|
||||
border-right-width: 0;
|
||||
border-left-color: @popover-arrow-color;
|
||||
bottom: -@popover-arrow-width;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
padding: 8px 14px;
|
||||
margin: 0; // reset heading margin
|
||||
font-size: @font-size-base;
|
||||
background-color: @popover-title-bg;
|
||||
border-bottom: 1px solid darken(@popover-title-bg, 5%);
|
||||
border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
//
|
||||
// Basic print styles
|
||||
// --------------------------------------------------
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
|
||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
||||
|
||||
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
|
||||
|
||||
// ==========================================================================
|
||||
// Print styles.
|
||||
// Inlined to avoid the additional HTTP request: h5bp.com/r
|
||||
// ==========================================================================
|
||||
|
||||
@media print {
|
||||
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
color: #000 !important; // Black prints faster: h5bp.com/s
|
||||
text-shadow: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
@ -25,9 +30,10 @@
|
|||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
// Don't show links for images, or javascript/internal links
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
// Don't show links that are fragment identifiers,
|
||||
// or use the `javascript:` pseudo protocol
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
@ -50,10 +56,6 @@
|
|||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 2cm .5cm;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
|
@ -66,22 +68,12 @@
|
|||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
// Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
|
||||
// Once fixed, we can just straight up remove this.
|
||||
select {
|
||||
background: #fff !important;
|
||||
}
|
||||
// Bootstrap specific changes start
|
||||
|
||||
// Bootstrap components
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
.table {
|
||||
td,
|
||||
th {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
.btn,
|
||||
.dropup > .btn {
|
||||
> .caret {
|
||||
|
@ -94,6 +86,11 @@
|
|||
|
||||
.table {
|
||||
border-collapse: collapse !important;
|
||||
|
||||
td,
|
||||
th {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
.table-bordered {
|
||||
th,
|
||||
|
@ -101,5 +98,4 @@
|
|||
border: 1px solid #ddd !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable at-rule-no-vendor-prefix
|
||||
|
||||
//
|
||||
// Progress bars
|
||||
// --------------------------------------------------
|
||||
|
@ -19,18 +21,17 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
// Bar itself
|
||||
// -------------------------
|
||||
|
||||
// Outer container
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
height: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
overflow: hidden;
|
||||
background-color: @progress-bg;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
||||
border-radius: @progress-border-radius;
|
||||
.box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
|
||||
}
|
||||
|
||||
// Bar of progress
|
||||
|
@ -43,23 +44,31 @@
|
|||
color: @progress-bar-color;
|
||||
text-align: center;
|
||||
background-color: @progress-bar-bg;
|
||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
|
||||
.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
|
||||
.transition(width .6s ease);
|
||||
}
|
||||
|
||||
// Striped bars
|
||||
.progress-striped .progress-bar {
|
||||
//
|
||||
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
|
||||
// `.progress-bar-striped` class, which you just add to an existing
|
||||
// `.progress-bar`.
|
||||
.progress-striped .progress-bar,
|
||||
.progress-bar-striped {
|
||||
#gradient > .striped();
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
// Call animation for the active one
|
||||
.progress.active .progress-bar {
|
||||
//
|
||||
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
|
||||
// `.progress-bar.active` approach.
|
||||
.progress.active .progress-bar,
|
||||
.progress-bar.active {
|
||||
.animation(progress-bar-stripes 2s linear infinite);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Variations
|
||||
// -------------------------
|
||||
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
// Embeds responsive
|
||||
//
|
||||
// Credit: Nicolas Gallagher and SUIT CSS.
|
||||
|
||||
.embed-responsive {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.embed-responsive-item,
|
||||
iframe,
|
||||
embed,
|
||||
object,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier class for 16:9 aspect ratio
|
||||
.embed-responsive-16by9 {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
// Modifier class for 4:3 aspect ratio
|
||||
.embed-responsive-4by3 {
|
||||
padding-bottom: 75%;
|
||||
}
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important, at-rule-no-vendor-prefix
|
||||
|
||||
//
|
||||
// Responsive: Utility classes
|
||||
// --------------------------------------------------
|
||||
|
@ -14,8 +16,9 @@
|
|||
// For more information, see the following:
|
||||
//
|
||||
// Issue: https://github.com/twbs/bootstrap/issues/10497
|
||||
// Docs: http://getbootstrap.com/getting-started/#browsers
|
||||
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
|
||||
// Docs: https://getbootstrap.com/docs/3.4/getting-started/#support-ie10-width
|
||||
// Source: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/
|
||||
// Source: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
|
@ -23,187 +26,171 @@
|
|||
|
||||
|
||||
// Visibility utilities
|
||||
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
|
||||
.visible-xs,
|
||||
.visible-sm,
|
||||
.visible-md,
|
||||
.visible-lg {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
|
||||
.visible-xs-block,
|
||||
.visible-xs-inline,
|
||||
.visible-xs-inline-block,
|
||||
.visible-sm-block,
|
||||
.visible-sm-inline,
|
||||
.visible-sm-inline-block,
|
||||
.visible-md-block,
|
||||
.visible-md-inline,
|
||||
.visible-md-inline-block,
|
||||
.visible-lg-block,
|
||||
.visible-lg-inline,
|
||||
.visible-lg-inline-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.visible-xs {
|
||||
.responsive-invisibility();
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-xs-block {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-sm {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
.visible-xs-inline {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-xs-inline-block {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-sm-block {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-sm-inline {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-sm-inline-block {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-md {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-md-block {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-md-inline {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-md-inline-block {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visible-lg {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
.visible-lg-block {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-lg-inline {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-lg-inline-block {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-xs {
|
||||
.responsive-visibility();
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-sm {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-md {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-lg {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Print utilities
|
||||
//
|
||||
// Media queries are placed on the inside to be mixin-friendly.
|
||||
|
||||
// Note: Deprecated .visible-print as of v3.2.0
|
||||
.visible-print {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
|
||||
@media print {
|
||||
.visible-print {
|
||||
@media print {
|
||||
.responsive-visibility();
|
||||
}
|
||||
.hidden-print {
|
||||
}
|
||||
.visible-print-block {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-print-inline {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-print-inline-block {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-print {
|
||||
@media print {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,8 +4,13 @@
|
|||
|
||||
|
||||
// Reset the box-sizing
|
||||
|
||||
*,
|
||||
//
|
||||
// Heads up! This reset may cause conflicts with some third-party widgets.
|
||||
// For recommendations on resolving such conflicts, see
|
||||
// https://getbootstrap.com/docs/3.4/getting-started/#third-box-sizing
|
||||
* {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
.box-sizing(border-box);
|
||||
|
@ -15,8 +20,8 @@
|
|||
// Body reset
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
font-size: 10px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -47,7 +52,7 @@ a {
|
|||
&:hover,
|
||||
&:focus {
|
||||
color: @link-hover-color;
|
||||
text-decoration: underline;
|
||||
text-decoration: @link-hover-decoration;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
@ -56,6 +61,16 @@ a {
|
|||
}
|
||||
|
||||
|
||||
// Figures
|
||||
//
|
||||
// We reset this here because previously Normalize had no `figure` margins. This
|
||||
// ensures we don't break anyone's use of the element.
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// Images
|
||||
|
||||
img {
|
||||
|
@ -96,7 +111,7 @@ img {
|
|||
// Horizontal rules
|
||||
|
||||
hr {
|
||||
margin-top: @line-height-computed;
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
border: 0;
|
||||
border-top: 1px solid @hr-border;
|
||||
|
@ -105,15 +120,42 @@ hr {
|
|||
|
||||
// Only display content to screen readers
|
||||
//
|
||||
// See: http://a11yproject.com/posts/how-to-hide-content/
|
||||
// See: https://a11yproject.com/posts/how-to-hide-content
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Use in conjunction with .sr-only to only display content when it's focused.
|
||||
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
.sr-only-focusable {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS "clickable elements" fix for role="button"
|
||||
//
|
||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
||||
// for traditionally non-focusable elements with role="button"
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -1,12 +1,40 @@
|
|||
// stylelint-disable selector-max-type, selector-max-compound-selectors, selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Tables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
background-color: @table-bg;
|
||||
|
||||
// Table cell sizing
|
||||
//
|
||||
// Reset default table behavior
|
||||
|
||||
col[class*="col-"] {
|
||||
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
|
||||
display: table-column;
|
||||
float: none;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
&[class*="col-"] {
|
||||
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
|
||||
display: table-cell;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: @table-cell-padding;
|
||||
padding-bottom: @table-cell-padding;
|
||||
color: @text-muted;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
@ -16,6 +44,7 @@ th {
|
|||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: @line-height-computed;
|
||||
// Cells
|
||||
> thead,
|
||||
|
@ -105,11 +134,8 @@ th {
|
|||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
|
||||
.table-striped {
|
||||
> tbody > tr:nth-child(odd) {
|
||||
> td,
|
||||
> th {
|
||||
background-color: @table-bg-accent;
|
||||
}
|
||||
> tbody > tr:nth-of-type(odd) {
|
||||
background-color: @table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -120,30 +146,7 @@ th {
|
|||
|
||||
.table-hover {
|
||||
> tbody > tr:hover {
|
||||
> td,
|
||||
> th {
|
||||
background-color: @table-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table cell sizing
|
||||
//
|
||||
// Reset default table behavior
|
||||
|
||||
table col[class*="col-"] {
|
||||
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
|
||||
float: none;
|
||||
display: table-column;
|
||||
}
|
||||
table {
|
||||
td,
|
||||
th {
|
||||
&[class*="col-"] {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
}
|
||||
background-color: @table-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -156,8 +159,9 @@ table {
|
|||
// Generate the contextual variants
|
||||
.table-row-variant(active; @table-bg-active);
|
||||
.table-row-variant(success; @state-success-bg);
|
||||
.table-row-variant(danger; @state-danger-bg);
|
||||
.table-row-variant(info; @state-info-bg);
|
||||
.table-row-variant(warning; @state-warning-bg);
|
||||
.table-row-variant(danger; @state-danger-bg);
|
||||
|
||||
|
||||
// Responsive tables
|
||||
|
@ -166,15 +170,16 @@ table {
|
|||
// by enabling horizontal scrolling. Only applies <768px. Everything above that
|
||||
// will display normally.
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.table-responsive {
|
||||
.table-responsive {
|
||||
min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
|
||||
overflow-x: auto;
|
||||
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
width: 100%;
|
||||
margin-bottom: (@line-height-computed * 0.75);
|
||||
margin-bottom: (@line-height-computed * .75);
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
border: 1px solid @table-border-color;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Tighten up spacing
|
||||
> .table {
|
||||
|
|
|
@ -1,3 +1,10 @@
|
|||
// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
|
||||
|
||||
/*!
|
||||
* Bootstrap v3.4.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
//
|
||||
// Load core variables and mixins
|
||||
|
@ -7,7 +14,6 @@
|
|||
@import "mixins.less";
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
@ -19,21 +25,31 @@
|
|||
.btn-info,
|
||||
.btn-warning,
|
||||
.btn-danger {
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
|
||||
@shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||
.box-shadow(@shadow);
|
||||
|
||||
// Reset the shadow
|
||||
&:active,
|
||||
&.active {
|
||||
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
||||
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.badge {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for generating new styles
|
||||
.btn-styles(@btn-color: #555) {
|
||||
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
|
||||
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
|
||||
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
|
||||
background-repeat: repeat-x;
|
||||
border-color: darken(@btn-color, 14%);
|
||||
|
||||
|
@ -48,6 +64,20 @@
|
|||
background-color: darken(@btn-color, 12%);
|
||||
border-color: darken(@btn-color, 14%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken(@btn-color, 12%);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Common styles
|
||||
|
@ -60,13 +90,16 @@
|
|||
}
|
||||
|
||||
// Apply the mixin to the buttons
|
||||
.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
|
||||
.btn-default {
|
||||
.btn-styles(@btn-default-bg);
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-primary { .btn-styles(@btn-primary-bg); }
|
||||
.btn-success { .btn-styles(@btn-success-bg); }
|
||||
.btn-info { .btn-styles(@btn-info-bg); }
|
||||
.btn-warning { .btn-styles(@btn-warning-bg); }
|
||||
.btn-danger { .btn-styles(@btn-danger-bg); }
|
||||
.btn-info { .btn-styles(@btn-info-bg); }
|
||||
|
||||
|
||||
|
||||
//
|
||||
|
@ -75,11 +108,10 @@
|
|||
|
||||
.thumbnail,
|
||||
.img-thumbnail {
|
||||
.box-shadow(0 1px 2px rgba(0,0,0,.075));
|
||||
.box-shadow(0 1px 2px rgba(0, 0, 0, .075));
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Dropdowns
|
||||
// --------------------------------------------------
|
||||
|
@ -97,7 +129,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Navbar
|
||||
// --------------------------------------------------
|
||||
|
@ -107,32 +138,34 @@
|
|||
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
|
||||
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
|
||||
border-radius: @navbar-border-radius;
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
|
||||
@shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
|
||||
.box-shadow(@shadow);
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .active > a {
|
||||
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
|
||||
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
|
||||
#gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%));
|
||||
.box-shadow(inset 0 3px 9px rgba(0, 0, 0, .075));
|
||||
}
|
||||
}
|
||||
.navbar-brand,
|
||||
.navbar-nav > li > a {
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.25);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
// Inverted navbar
|
||||
.navbar-inverse {
|
||||
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
|
||||
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
|
||||
|
||||
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
|
||||
border-radius: @navbar-border-radius;
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .active > a {
|
||||
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
|
||||
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
|
||||
#gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
|
||||
.box-shadow(inset 0 3px 9px rgba(0, 0, 0, .25));
|
||||
}
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-nav > li > a {
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -143,6 +176,17 @@
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Fix active state of dropdown items in collapsed mode
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
|
@ -151,8 +195,8 @@
|
|||
|
||||
// Common styles
|
||||
.alert {
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.2);
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
|
||||
@shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
|
@ -169,7 +213,6 @@
|
|||
.alert-danger { .alert-styles(@alert-danger-bg); }
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Progress bars
|
||||
// --------------------------------------------------
|
||||
|
@ -191,6 +234,11 @@
|
|||
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
|
||||
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
|
||||
|
||||
// Reset the striped class because our mixins don't do multiple gradients and
|
||||
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
|
||||
.progress-bar-striped {
|
||||
#gradient > .striped();
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
|
@ -199,7 +247,7 @@
|
|||
|
||||
.list-group {
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 1px 2px rgba(0,0,0,.075));
|
||||
.box-shadow(0 1px 2px rgba(0, 0, 0, .075));
|
||||
}
|
||||
.list-group-item.active,
|
||||
.list-group-item.active:hover,
|
||||
|
@ -207,8 +255,11 @@
|
|||
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
|
||||
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
|
||||
border-color: darken(@list-group-active-border, 7.5%);
|
||||
}
|
||||
|
||||
.badge {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
|
@ -217,7 +268,7 @@
|
|||
|
||||
// Common styles
|
||||
.panel {
|
||||
.box-shadow(0 1px 2px rgba(0,0,0,.05));
|
||||
.box-shadow(0 1px 2px rgba(0, 0, 0, .05));
|
||||
}
|
||||
|
||||
// Mixin for generating new styles
|
||||
|
@ -234,7 +285,6 @@
|
|||
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Wells
|
||||
// --------------------------------------------------
|
||||
|
@ -242,6 +292,6 @@
|
|||
.well {
|
||||
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
|
||||
border-color: darken(@well-bg, 10%);
|
||||
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
|
||||
@shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Thumbnails
|
||||
// --------------------------------------------------
|
||||
|
@ -12,13 +14,13 @@
|
|||
background-color: @thumbnail-bg;
|
||||
border: 1px solid @thumbnail-border;
|
||||
border-radius: @thumbnail-border-radius;
|
||||
.transition(all .2s ease-in-out);
|
||||
.transition(border .2s ease-in-out);
|
||||
|
||||
> img,
|
||||
a > img {
|
||||
.img-responsive();
|
||||
margin-left: auto;
|
||||
&:extend(.img-responsive);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Add a hover state for linked versions only
|
||||
|
|
|
@ -8,38 +8,32 @@
|
|||
position: absolute;
|
||||
z-index: @zindex-tooltip;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
.reset-text();
|
||||
font-size: @font-size-small;
|
||||
line-height: 1.4;
|
||||
|
||||
.opacity(0);
|
||||
|
||||
&.in { .opacity(.9); }
|
||||
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
|
||||
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
|
||||
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
|
||||
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
|
||||
}
|
||||
&.in { .opacity(@tooltip-opacity); }
|
||||
&.top {
|
||||
padding: @tooltip-arrow-width 0;
|
||||
margin-top: -3px;
|
||||
}
|
||||
&.right {
|
||||
padding: 0 @tooltip-arrow-width;
|
||||
margin-left: 3px;
|
||||
}
|
||||
&.bottom {
|
||||
padding: @tooltip-arrow-width 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
&.left {
|
||||
padding: 0 @tooltip-arrow-width;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: @tooltip-max-width;
|
||||
padding: 3px 8px;
|
||||
color: @tooltip-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.tooltip {
|
||||
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
|
||||
&.top .tooltip-arrow {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
|
@ -48,14 +42,16 @@
|
|||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
&.top-left .tooltip-arrow {
|
||||
right: @tooltip-arrow-width;
|
||||
bottom: 0;
|
||||
left: @tooltip-arrow-width;
|
||||
margin-bottom: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
&.top-right .tooltip-arrow {
|
||||
bottom: 0;
|
||||
right: @tooltip-arrow-width;
|
||||
left: @tooltip-arrow-width;
|
||||
margin-bottom: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
@ -82,14 +78,35 @@
|
|||
}
|
||||
&.bottom-left .tooltip-arrow {
|
||||
top: 0;
|
||||
left: @tooltip-arrow-width;
|
||||
right: @tooltip-arrow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-color;
|
||||
}
|
||||
&.bottom-right .tooltip-arrow {
|
||||
top: 0;
|
||||
right: @tooltip-arrow-width;
|
||||
left: @tooltip-arrow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: @tooltip-max-width;
|
||||
padding: 3px 8px;
|
||||
color: @tooltip-color;
|
||||
text-align: center;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-list-comma-newline-after, selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
@ -15,16 +17,15 @@ h1, h2, h3, h4, h5, h6,
|
|||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: @headings-small-color;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
|
@ -33,8 +34,9 @@ h4 {
|
|||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
h5,
|
||||
h6 {
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-top: (@line-height-computed / 2);
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
|
@ -61,8 +63,8 @@ p {
|
|||
|
||||
.lead {
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: floor(@font-size-base * 1.15);
|
||||
font-weight: 200;
|
||||
font-size: floor((@font-size-base * 1.15));
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
@ -74,52 +76,71 @@ p {
|
|||
// Emphasis & misc
|
||||
// -------------------------
|
||||
|
||||
// Ex: 14px base font * 85% = about 12px
|
||||
// Ex: (12px small font / 14px base font) * 100% = about 85%
|
||||
small,
|
||||
.small { font-size: 85%; }
|
||||
.small {
|
||||
font-size: floor((100% * @font-size-small / @font-size-base));
|
||||
}
|
||||
|
||||
// Undo browser default styling
|
||||
cite { font-style: normal; }
|
||||
|
||||
// Contextual emphasis
|
||||
.text-muted {
|
||||
color: @text-muted;
|
||||
}
|
||||
.text-primary {
|
||||
color: @brand-primary;
|
||||
&:hover {
|
||||
color: darken(@brand-primary, 10%);
|
||||
}
|
||||
}
|
||||
.text-warning {
|
||||
color: @state-warning-text;
|
||||
&:hover {
|
||||
color: darken(@state-warning-text, 10%);
|
||||
}
|
||||
}
|
||||
.text-danger {
|
||||
color: @state-danger-text;
|
||||
&:hover {
|
||||
color: darken(@state-danger-text, 10%);
|
||||
}
|
||||
}
|
||||
.text-success {
|
||||
color: @state-success-text;
|
||||
&:hover {
|
||||
color: darken(@state-success-text, 10%);
|
||||
}
|
||||
}
|
||||
.text-info {
|
||||
color: @state-info-text;
|
||||
&:hover {
|
||||
color: darken(@state-info-text, 10%);
|
||||
}
|
||||
mark,
|
||||
.mark {
|
||||
padding: .2em;
|
||||
background-color: @state-warning-bg;
|
||||
}
|
||||
|
||||
// Alignment
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
.text-nowrap { white-space: nowrap; }
|
||||
|
||||
// Transformation
|
||||
.text-lowercase { text-transform: lowercase; }
|
||||
.text-uppercase { text-transform: uppercase; }
|
||||
.text-capitalize { text-transform: capitalize; }
|
||||
|
||||
// Contextual colors
|
||||
.text-muted {
|
||||
color: @text-muted;
|
||||
}
|
||||
.text-primary {
|
||||
.text-emphasis-variant(@brand-primary);
|
||||
}
|
||||
.text-success {
|
||||
.text-emphasis-variant(@state-success-text);
|
||||
}
|
||||
.text-info {
|
||||
.text-emphasis-variant(@state-info-text);
|
||||
}
|
||||
.text-warning {
|
||||
.text-emphasis-variant(@state-warning-text);
|
||||
}
|
||||
.text-danger {
|
||||
.text-emphasis-variant(@state-danger-text);
|
||||
}
|
||||
|
||||
// Contextual backgrounds
|
||||
// For now we'll leave these alongside the text classes until v4 when we can
|
||||
// safely shift things around (per SemVer rules).
|
||||
.bg-primary {
|
||||
// Given the contrast here, this is the only class to have its color inverted
|
||||
// automatically.
|
||||
color: #fff;
|
||||
.bg-variant(@brand-primary);
|
||||
}
|
||||
.bg-success {
|
||||
.bg-variant(@state-success-bg);
|
||||
}
|
||||
.bg-info {
|
||||
.bg-variant(@state-info-bg);
|
||||
}
|
||||
.bg-warning {
|
||||
.bg-variant(@state-warning-bg);
|
||||
}
|
||||
.bg-danger {
|
||||
.bg-variant(@state-danger-bg);
|
||||
}
|
||||
|
||||
|
||||
// Page header
|
||||
|
@ -133,7 +154,7 @@ cite { font-style: normal; }
|
|||
|
||||
|
||||
// Lists
|
||||
// --------------------------------------------------
|
||||
// -------------------------
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul,
|
||||
|
@ -157,15 +178,12 @@ ol {
|
|||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
.list-unstyled();
|
||||
margin-left: -5px;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -179,7 +197,7 @@ dd {
|
|||
line-height: @line-height-base;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
dd {
|
||||
margin-left: 0; // Undo browser default
|
||||
|
@ -190,84 +208,93 @@ dd {
|
|||
// Defaults to being stacked without any of the below styles applied, until the
|
||||
// grid breakpoint is reached (default of ~768px).
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.dl-horizontal {
|
||||
.dl-horizontal {
|
||||
dd {
|
||||
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
|
||||
}
|
||||
|
||||
@media (min-width: @dl-horizontal-breakpoint) {
|
||||
dt {
|
||||
float: left;
|
||||
width: (@component-offset-horizontal - 20);
|
||||
width: (@dl-horizontal-offset - 20);
|
||||
clear: left;
|
||||
text-align: right;
|
||||
.text-overflow();
|
||||
}
|
||||
dd {
|
||||
margin-left: @component-offset-horizontal;
|
||||
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
|
||||
margin-left: @dl-horizontal-offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MISC
|
||||
// ----
|
||||
|
||||
// Misc
|
||||
// -------------------------
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr[title],
|
||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted @abbr-border-color;
|
||||
}
|
||||
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
.text-uppercase();
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
padding: (@line-height-computed / 2) @line-height-computed;
|
||||
margin: 0 0 @line-height-computed;
|
||||
font-size: @blockquote-font-size;
|
||||
border-left: 5px solid @blockquote-border-color;
|
||||
p {
|
||||
font-size: (@font-size-base * 1.25);
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
small,
|
||||
.small {
|
||||
display: block;
|
||||
line-height: @line-height-base;
|
||||
color: @blockquote-small-color;
|
||||
&:before {
|
||||
content: '\2014 \00A0'; // EM DASH, NBSP
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Float right with text-align: right
|
||||
&.pull-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
border-right: 5px solid @blockquote-border-color;
|
||||
border-left: 0;
|
||||
p,
|
||||
small,
|
||||
.small {
|
||||
text-align: right;
|
||||
}
|
||||
small,
|
||||
.small {
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
&:after {
|
||||
content: '\00A0 \2014'; // NBSP, EM DASH
|
||||
}
|
||||
// Note: Deprecated small and .small as of v3.1.0
|
||||
// Context: https://github.com/twbs/bootstrap/issues/11660
|
||||
footer,
|
||||
small,
|
||||
.small {
|
||||
display: block;
|
||||
font-size: 80%; // back to default font-size
|
||||
line-height: @line-height-base;
|
||||
color: @blockquote-small-color;
|
||||
|
||||
&:before {
|
||||
content: "\2014 \00A0"; // em dash, nbsp
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Opposite alignment of blockquote
|
||||
//
|
||||
// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
|
||||
.blockquote-reverse,
|
||||
blockquote.pull-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
border-right: 5px solid @blockquote-border-color;
|
||||
border-left: 0;
|
||||
|
||||
// Account for citation
|
||||
footer,
|
||||
small,
|
||||
.small {
|
||||
&:before { content: ""; }
|
||||
&:after {
|
||||
content: "\00A0 \2014"; // nbsp, em dash
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Addresses
|
||||
address {
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
//
|
||||
// Utility classes
|
||||
// --------------------------------------------------
|
||||
|
@ -44,7 +46,6 @@
|
|||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -59,6 +59,7 @@
|
|||
|
||||
@link-color: @brand-primary;
|
||||
@link-hover-color: darken(@link-color, 15%);
|
||||
@link-hover-decoration: underline;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
|
@ -93,6 +94,7 @@
|
|||
|
||||
@icon-font-path: "../fonts/";
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
@icon-font-svg-id: "glyphicons-halflings-regular";
|
||||
|
||||
|
||||
// Components
|
||||
|
@ -169,6 +171,10 @@
|
|||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
@btn-border-radius-base: @border-radius-base;
|
||||
@btn-border-radius-large: @border-radius-large;
|
||||
@btn-border-radius-small: @border-radius-small;
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
|
@ -193,6 +199,15 @@
|
|||
@input-group-addon-bg: @gray-lighter;
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
// Disabled cursor for form controls and buttons.
|
||||
@cursor-disabled: not-allowed;
|
||||
|
||||
// .form-group margin
|
||||
@form-group-margin-bottom: 15px;
|
||||
//** Large `.form-control` border radius
|
||||
@input-border-radius-large: @border-radius-large;
|
||||
//** Small `.form-control` border radius
|
||||
@input-border-radius-small: @border-radius-small;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
|
@ -289,6 +304,7 @@
|
|||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: #777;
|
||||
@navbar-default-bg: #f8f8f8;
|
||||
|
@ -373,22 +389,36 @@
|
|||
// Pagination
|
||||
// -------------------------
|
||||
|
||||
@pagination-color: @link-color;
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
@pagination-hover-color: @link-hover-color;
|
||||
@pagination-hover-bg: @gray-lighter;
|
||||
@pagination-hover-border: #ddd;
|
||||
|
||||
@pagination-active-bg: @brand-primary;
|
||||
@pagination-active-color: #fff;
|
||||
@pagination-active-bg: @brand-primary;
|
||||
@pagination-active-border: @brand-primary;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
// Pager
|
||||
// -------------------------
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @pagination-disabled-color;
|
||||
|
||||
|
||||
// Jumbotron
|
||||
|
@ -398,7 +428,8 @@
|
|||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: @gray-lighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil(@font-size-base * 1.5);
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
|
@ -426,6 +457,7 @@
|
|||
@tooltip-max-width: 200px;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-bg: #000;
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
@tooltip-arrow-width: 5px;
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
@ -474,9 +506,13 @@
|
|||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
@modal-backdrop-bg: #000;
|
||||
@modal-backdrop-opacity: .5;
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
// Alerts
|
||||
// -------------------------
|
||||
|
@ -505,6 +541,7 @@
|
|||
// -------------------------
|
||||
@progress-bg: #f5f5f5;
|
||||
@progress-bar-color: #fff;
|
||||
@progress-border-radius: @border-radius-base;
|
||||
|
||||
@progress-bar-bg: @brand-primary;
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
|
@ -523,16 +560,28 @@
|
|||
@list-group-active-color: @component-active-color;
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
// Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
// Panels
|
||||
// -------------------------
|
||||
@panel-bg: #fff;
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: @gray-dark;
|
||||
|
@ -574,6 +623,7 @@
|
|||
// Wells
|
||||
// -------------------------
|
||||
@well-bg: #f5f5f5;
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
// Badges
|
||||
|
@ -596,6 +646,8 @@
|
|||
@breadcrumb-color: #ccc;
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
@breadcrumb-separator: "/";
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
|
||||
|
||||
// Carousel
|
||||
|
@ -626,6 +678,9 @@
|
|||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
|
@ -639,6 +694,12 @@
|
|||
@blockquote-small-color: @gray-light;
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
@page-header-border-color: @gray-lighter;
|
||||
// Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
// Point at which .dl-horizontal becomes horizontal
|
||||
@dl-horizontal-breakpoint: @grid-float-breakpoint;
|
||||
// Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
|
||||
// Miscellaneous
|
||||
// -------------------------
|
||||
|
|
|
@ -9,12 +9,12 @@
|
|||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
background-color: @well-bg;
|
||||
border: 1px solid darken(@well-bg, 7%);
|
||||
border: 1px solid @well-border;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
||||
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));
|
||||
blockquote {
|
||||
border-color: #ddd;
|
||||
border-color: rgba(0,0,0,.15);
|
||||
border-color: rgba(0, 0, 0, .15);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -50,7 +50,7 @@ figure {
|
|||
|
||||
&.float-left,
|
||||
&.float-right {
|
||||
margin: 0;
|
||||
margin: 30px 0 40px 0;
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
|
@ -64,4 +64,21 @@ figure {
|
|||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------- */
|
||||
/* .width-XX classes for max-width from 0-100 */
|
||||
/* -------------------------------------------------------------------- */
|
||||
// Only applies with figures, and in screen sizes >= md
|
||||
// Create a loop for the values 0-100 in steps of 5, and create a class for any of these
|
||||
@numSizes: 20;
|
||||
.buildSizeClasses(@size) when (@size =< @numSizes) {
|
||||
&.width-@{size} {
|
||||
max-width: percentage((@size/100)) !important;
|
||||
}
|
||||
.buildSizeClasses((@size + 5));
|
||||
}
|
||||
//end loop
|
||||
.buildSizeClasses(@size) when (@size > @numSizes) {}
|
||||
//start loop
|
||||
.buildSizeClasses(0);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,64 @@
|
|||
// ============================================================================
|
||||
// Smaller styles to structure text and images
|
||||
// ============================================================================
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Classes to place a decorative image beside a block element
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Common styles for images on the left or right side
|
||||
.with-image() {
|
||||
.make-row();
|
||||
|
||||
// The image must be the first child of the .with-image-* container, and
|
||||
// takes 1/4 of the total width. On XS sized screens, it will go above the
|
||||
// text.
|
||||
> img:first-child {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
.make-sm-column(3);
|
||||
@media (max-width: @screen-xs-max) {
|
||||
width: 180px; // includes grid padding of 30px!
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// All other children of the .with-image-* container take 3/4 of the total
|
||||
// width.
|
||||
> :nth-child(n+2) {
|
||||
.make-sm-column(9);
|
||||
}
|
||||
}
|
||||
|
||||
// Image on the left side of text
|
||||
.with-image-left {
|
||||
.with-image();
|
||||
|
||||
// The second child element will go beside the image. All further children
|
||||
// (starting with #3) need an explicit offset to go below the second.
|
||||
> :nth-child(n+3) {
|
||||
.make-sm-column-offset(3);
|
||||
}
|
||||
}
|
||||
|
||||
// Image on the right side of text
|
||||
.with-image-right {
|
||||
.with-image();
|
||||
|
||||
// The image is pushed to the right side...
|
||||
> img:first-child {
|
||||
.make-sm-column-push(9);
|
||||
}
|
||||
|
||||
// ...and the text pulled to the left side.
|
||||
> :nth-child(2) {
|
||||
.make-sm-column-pull(3);
|
||||
}
|
||||
|
||||
// Need an explicit clear below the image
|
||||
> :nth-child(3) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
|
@ -24,25 +24,14 @@ div.topbanner {
|
|||
.text-button-box {
|
||||
// Make all columns same height by using flexbox
|
||||
// This is used to have the button centered also vertically
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.row div:nth-child(2) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > [class*='col-'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Style and position button (2nd column)
|
||||
& div:nth-child(2) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
// Make button as significant as on the front-page donation modules
|
||||
.btn-success {
|
||||
font-weight: 500;
|
||||
font-size: 125%;
|
||||
}
|
||||
// Make button as significant as on the front-page donation modules
|
||||
.btn-success {
|
||||
font-weight: 500;
|
||||
font-size: 125%;
|
||||
}
|
||||
}
|
||||
} // /.text-button-box
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
@import "elements/search-box";
|
||||
@import "elements/sharebuttons";
|
||||
@import "elements/people";
|
||||
@import "elements/text-structure";
|
||||
@import "elements/topbanner";
|
||||
@import "pages/frontpage";
|
||||
@import "pages/news";
|
||||
|
|
110
look/style.less
110
look/style.less
|
@ -69,72 +69,58 @@ h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
|
|||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Classes to place a decorative image beside a block element
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Common styles for images on the left or right side
|
||||
.with-image() {
|
||||
.make-row();
|
||||
|
||||
// The image must be the first child of the .with-image-* container, and
|
||||
// takes 1/4 of the total width. On XS sized screens, it will go above the
|
||||
// text.
|
||||
> img:first-child {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
.make-sm-column(3);
|
||||
@media (max-width: @screen-xs-max) {
|
||||
width: 180px; // includes grid padding of 30px!
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// All other children of the .with-image-* container take 3/4 of the total
|
||||
// width.
|
||||
> :nth-child(n+2) {
|
||||
.make-sm-column(9);
|
||||
}
|
||||
}
|
||||
|
||||
// Image on the left side of text
|
||||
.with-image-left {
|
||||
.with-image();
|
||||
|
||||
// The second child element will go beside the image. All further children
|
||||
// (starting with #3) need an explicit offset to go below the second.
|
||||
> :nth-child(n+3) {
|
||||
.make-sm-column-offset(3);
|
||||
}
|
||||
}
|
||||
|
||||
// Image on the right side of text
|
||||
.with-image-right {
|
||||
.with-image();
|
||||
|
||||
// The image is pushed to the right side...
|
||||
> img:first-child {
|
||||
.make-sm-column-push(9);
|
||||
}
|
||||
|
||||
// ...and the text pulled to the left side.
|
||||
> :nth-child(2) {
|
||||
.make-sm-column-pull(3);
|
||||
}
|
||||
|
||||
// Need an explicit clear below the image
|
||||
> :nth-child(3) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ============================================================================
|
||||
// Page structure and grids
|
||||
// ============================================================================
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Row / Column Overrides
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Make all columns same height by using flexbox
|
||||
// This is used to have the button centered also vertically
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > [class*='col-'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// Update mixins for the things above
|
||||
.make-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Class and mixin to center all content in a column vertically and horizontally
|
||||
.center-all {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.make-center-all {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Translation selector
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
|
@ -7,93 +7,66 @@
|
|||
|
||||
<title>FSFE Local Group Zurich receives DINAcon Award</title>
|
||||
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>FSFE Local Group Zurich receives DINAcon Award</h1>
|
||||
|
||||
|
||||
<p>In 2019, the FSFE's local group Zurich has launched the "Learn like the pros" campaign. Goal of the campaign is to present solutions for the use of Free Software in education. Recently, the campaign was awarded the DINACon Award. On this behalf we interviewed the coordinators Ralf Hersel and Gian-Maria Daffré.</p>
|
||||
|
||||
|
||||
|
||||
<p>Unfortunately, non-Free Software is still increasingly used in the educational environment. Proprietary software however does not offer students and teachers the opportunity to study and adapt the functionality and principles of the software in use. In order to promote the digital maturity and sovereignty of the students as well as the teaching staff, Free Software should be consistently used in education instead. In order to get one step closer to this goal, the <a href="https://wiki.fsfe.org/LocalGroups/Zurich">FSFE local group Zurich</a> has picked up the topic with its own campaign called <a href="https://lernenwiedieprofis.ch/">"Lernen wie die Profis"</a> (German for "Learning like the pros"). The content of the campaign includes arguments and background information about the use of Free Software in the educational environment - combined with concrete solution and software proposals.</p>
|
||||
|
||||
|
||||
<figure>
|
||||
<a href="https://lernenwiedieprofis.ch/"><img src="https://pics.fsfe.org/uploads/medium/bacf4914a46fbdee9af54b7e9f122e31.jpg" /></a>
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Recently the campaign won the <a href="https://awards.dinacon.ch/gewinner2020/">DINAcon Special Award 2020</a>. This is an award for the campaign, but also for the local engagement and commitment of the FSFE local group Zurich. We took this award as an opportunity to introduce the campaign through an interview with the local Zurich coordinators Ralf Hersel and Gian-Maria Daffré ('Giammi').</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0 col-md-3 pr-3">
|
||||
<figure>
|
||||
<img src="https://pics.fsfe.org/uploads/small/32cdef458ba0503c57a89779722d9f16.jpg" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-8 col-md-9 pt-3">
|
||||
<p class="pt-5">
|
||||
Ralf Hersel has been involved since 2015, when the Tuxeros group merged with FSFE's Zurich local group. Since 2020 he is the coordinator of the group.
|
||||
</p>
|
||||
</div>
|
||||
<div class="with-image-left center-all">
|
||||
<img src="https://pics.fsfe.org/uploads/small/32cdef458ba0503c57a89779722d9f16.jpg" />
|
||||
<p>
|
||||
<em>Ralf Hersel has been involved since 2015, when the Tuxeros group merged with FSFE's Zurich local group. Since 2020 he is the coordinator of the group.</em>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0 col-md-3 pr-3">
|
||||
<figure>
|
||||
<img src="https://pics.fsfe.org/uploads/small/6818812743e98326b4db2d26cd23489f.jpg" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-8 col-md-9">
|
||||
<p>
|
||||
Gian-Maria Daffré ('Giammi') has also been a member of the local group in Zurich since 2015, where he is vice-coordinator. Giammi is also coordinator of the Swiss team.
|
||||
</p>
|
||||
</div>
|
||||
<div class="with-image-left center-all">
|
||||
<img src="https://pics.fsfe.org/uploads/small/6818812743e98326b4db2d26cd23489f.jpg" />
|
||||
<p>
|
||||
<em>Gian-Maria Daffré ('Giammi') has also been a member of the local group in Zurich since 2015, where he is vice-coordinator. Giammi is also coordinator of the Swiss team.</em>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="question"><strong>FSFE: 2020 is a year in which e-learning and remote digital learning has increased in use and distribution worldwide. Is this a development to be welcomed and to what extent have these developments influenced the individual digital sovereignty of students?</strong></p>
|
||||
|
||||
<div class="answer"><p><strong>Ralf and Giammi:</strong> 'Welcomed' is probably the wrong word for the circumstances, which have been caused by the pandemic. We would rather see it as a necessity introduced by reality. E-learning already existed before, but not to the extent that we currently see. Due to the deferral from physical to digital space the significance of digital sovereignty has increased enormously. Both, students and teachers, are confronted with a situation for which they were not prepared; neither mentally nor technically.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="answer"><p><strong>Ralf and Giammi:</strong> 'Welcomed' is probably the wrong word for the circumstances, which have been caused by the pandemic. We would rather see it as a necessity introduced by reality. E-learning already existed before, but not to the extent that we currently see. Due to the deferral from physical to digital space the significance of digital sovereignty has increased enormously. Both, students and teachers, are confronted with a situation for which they were not prepared; neither mentally nor technically.</p>
|
||||
|
||||
<blockquote><em>"Our task is to help understand digital
|
||||
sovereignty as an essential criteria for self-determined decisions and to establish action accordingly."</em></blockquote>
|
||||
|
||||
|
||||
<p>The concept and meaning of 'digital sovereignty' is still far from being consciously adopted by those affected. Unfortunately, the popularity of proprietary applications like Zoom and Microsoft Teams just proves that. Our task is to help understand digital
|
||||
sovereignty as an essential criteria for self-determined decisions and to establish action accordingly.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<p class="question"><strong>In this light, the FSFE's Zurich local group has launched the campaign "Learning how the
|
||||
Professionals", "to promote the use of Free Software in schools and
|
||||
universities". What exactly does the concept of "Learning for
|
||||
the professionals" include?</strong></p>
|
||||
|
||||
|
||||
|
||||
<div class="answer"><p>The 'Learn like the pros' campaign has three goals:</p>
|
||||
|
||||
<div class="answer"><p>The 'Learn like the pros' campaign has three goals:</p>
|
||||
<ol>
|
||||
<li>Inform about the importance of digital sovereignty at educational institutions.</li>
|
||||
<li>To show concrete solutions for the use of Free Software systems in education.</li>
|
||||
<li>To show concrete solutions for the use of Free Software systems in education.</li>
|
||||
<li>Cite positive examples where schools and universities have taken up the challenge and successfully completed a transformation towards Free Software.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p class="question"><strong>Is the campaign specifically tailored towards the Swiss audience or is the collected knowledge of universal validity?</strong></p>
|
||||
|
||||
|
||||
<div class="answer"><p>At the FSFE local group Zurich we think both, locally and globally. The
|
||||
concrete alignments however depend on the target audience. For example, one of our
|
||||
campaigns, <a href="https://freedomvote.ch/">'Freedomvote'</a>, is targeting the political process in Switzerland. Also our
|
||||
|
@ -102,96 +75,76 @@
|
|||
the Swiss market. The campaigns 'Fotobuch' and <a href="https://lernenwiedieprofis.ch/">'Lernen wie die Profis'</a>, and
|
||||
the news channel <a href="https://gnulinux.ch/">'GNU/Linux.ch'</a> however are targeting to the European, respectively German
|
||||
society.</p></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<blockquote><em>"The team and all involved were convinced by the positive power of the
|
||||
of the name."</em></blockquote>
|
||||
|
||||
|
||||
<p class="question"><strong>How did you come up with the campaign, was there an initial spark and how
|
||||
did the implementation work?</strong></p>
|
||||
|
||||
|
||||
<div class="answer"><p>The idea of addressing educational institutions has been fermenting for some years now in
|
||||
our heads. Different ideas were discussed, tried out and
|
||||
discarded. An important milestone was <a href="https://home.cern/news/news/computing/migrating-open-source-technologies">CERN's decision to withdraw from
|
||||
Microsoft and to rely more on Free Software</a>. This event
|
||||
gave Ralf the idea to develop a campaign and give it the name 'Learning like the pros' (#LwdP).
|
||||
gave Ralf the idea to develop a campaign and give it the name 'Learning like the pros' (#LwdP).
|
||||
We coordinated this in the team and all invovled were convinced by the positive power of the
|
||||
of the name. 'Learning like the pros' attracts the curios mind of research among female and male students. When professionals use Free Software, students will do alike.</p></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="question"><strong>The FSFE local group Zurich recently won the DINAcon award for
|
||||
campaign. What does this award mean for you and for the project?</strong></p>
|
||||
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0 col-md-3 pr-3">
|
||||
<figure>
|
||||
<img src="https://pics.fsfe.org/uploads/big/a00ef515187f639c4a1725225729cfef.jpeg" alt="picture of DINACon Special Award 2020"/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-8 col-md-9">
|
||||
<p>
|
||||
Since there was only one nomination in the award category 'Open Education', we have been very pleased
|
||||
that DINAcon created a new category especially for us, the 'Special Award'.
|
||||
<figure class="float-left width-20">
|
||||
<img src="https://pics.fsfe.org/uploads/big/a00ef515187f639c4a1725225729cfef.jpeg" alt="picture of DINACon Special Award 2020"/>
|
||||
</figure>
|
||||
|
||||
<p class="answer">
|
||||
Since there was only one nomination in the award category 'Open Education', we have been very pleased
|
||||
that DINAcon created a new category especially for us, the 'Special Award'.
|
||||
We are very happy about this award, because it is
|
||||
the first one ever and because it means that we have an appreciation and support
|
||||
which we can use as a reward for our work. It is
|
||||
a great motivation for the past and future efforts in
|
||||
this FSFE campaign.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<figure>
|
||||
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://peertube.social/videos/embed/c4460cc0-c9c0-4dd6-b559-cd40f3a8f4ae" frameborder="0"></iframe>
|
||||
<figcaption>Ralf Hersel, Coordinator of the FSFE lokal group Zürich on behalf of the DINACon Special Award 2020. (in German)</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<p class="question"><strong>Are there experiences and learnings you would like to share with others?
|
||||
Maybe with a view to other local groups of the FSFE who might
|
||||
plan a similar project?</strong></p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="answer"><p>There are many experiences and lessons that we can learn from this project.
|
||||
On the one hand, we got to know many like-minded initiatives, such as
|
||||
Digitalcourage's commitment to Free Software in schools.
|
||||
Especially with regard to the current developments in Baden-Württemberg, we were
|
||||
astonished by the commitment of civil society actors towards digital sovereignty in
|
||||
schools.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>On the news portal GNU/Linux.ch, which is maintained by Ralf and Lioh,
|
||||
there were many helpful discussions and ideas on this topic. Besides the
|
||||
many positive experiences we can also draw a worrying conclusion from the
|
||||
FSFE campaign work. The <a href="https://gnulinux.ch/die-wenigen-die-mueden-die-open-source-entwickler">metaphor of the few and tired Free Software
|
||||
developers</a>, also applies to this project work.</p></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<blockquote>
|
||||
<p>Background: <a href="https://wiki.fsfe.org/LocalGroups/Zurich">The FSFE local group Zurich</a> exists since 2010. Current coordinators are Ralf Hersel with Gian-Maria Daffré as vice-coordinator. Prior to the "Learn like the pros" campaign presented in this article, the group has already launched the campaign <a href="https://freedomvote.ch/">Freedomvote</a>. The group meets every second Thursday of the month. Usually at the digital agency Liip in Zurich, currently online via Big Blue Button. If you feel like joining the group now, just drop by.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>If you don't live in Zurich and now feel like getting actively involved in a local FSFE group, then <a href="https://wiki.fsfe.org/LocalGroups">see if there is a group in your city</a>. Or join our <a href="https://lists.fsfe.org/mailman/listinfo/fsfe-de">German language mailing list</a>. And please support our association with a <a href="https://my.fsfe.org/donate">small donation</a>.</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
@ -202,7 +155,6 @@
|
|||
<tag key="ch">Switzerland</tag>
|
||||
</tags>
|
||||
|
||||
<discussion href="https://community.fsfe.org/t/557"/>
|
||||
<image url="https://pics.fsfe.org/uploads/medium/bacf4914a46fbdee9af54b7e9f122e31.jpg"/>
|
||||
<discussion href="https://community.fsfe.org/t/557"/>
|
||||
<image url="https://pics.fsfe.org/uploads/medium/bacf4914a46fbdee9af54b7e9f122e31.jpg"/>
|
||||
</html>
|
||||
|
||||
|
|
Loading…
Reference in New Issue