process_engine 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/Rakefile +37 -0
- data/app/assets/bower_components/process_engine/Snap.svg/CONTRIBUTING +3 -0
- data/app/assets/bower_components/process_engine/Snap.svg/Gruntfile.js +59 -0
- data/app/assets/bower_components/process_engine/Snap.svg/LICENSE +202 -0
- data/app/assets/bower_components/process_engine/Snap.svg/NOTICE +190 -0
- data/app/assets/bower_components/process_engine/Snap.svg/README.md +62 -0
- data/app/assets/bower_components/process_engine/Snap.svg/bower.json +25 -0
- data/app/assets/bower_components/process_engine/Snap.svg/component.json +13 -0
- data/app/assets/bower_components/process_engine/Snap.svg/dist/snap.svg-min.js +20 -0
- data/app/assets/bower_components/process_engine/Snap.svg/dist/snap.svg.js +7653 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/css/dr.css +144 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/css/main.css +508 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/css/prism.css +168 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/css/topcoat-desktop-light.css +3700 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcecodepro-regular-webfont.eot +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcecodepro-regular-webfont.svg +242 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcecodepro-regular-webfont.ttf +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcecodepro-regular-webfont.woff +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-light-webfont.eot +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-light-webfont.svg +243 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-light-webfont.ttf +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-light-webfont.woff +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-regular-webfont.eot +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-regular-webfont.svg +243 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-regular-webfont.ttf +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-regular-webfont.woff +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-semibold-webfont.eot +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-semibold-webfont.svg +243 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-semibold-webfont.ttf +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/sourcesanspro-semibold-webfont.woff +0 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/fonts/stylesheet.css +57 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/img/search.svg +11 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/img/search_dark.svg +16 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/js/prism.js +9 -0
- data/app/assets/bower_components/process_engine/Snap.svg/doc/reference.html +13633 -0
- data/app/assets/bower_components/process_engine/Snap.svg/dr.json +33 -0
- data/app/assets/bower_components/process_engine/Snap.svg/history.md +31 -0
- data/app/assets/bower_components/process_engine/Snap.svg/package.json +22 -0
- data/app/assets/bower_components/process_engine/Snap.svg/template.dot +157 -0
- data/app/assets/bower_components/process_engine/Snap.svg/test.html +75 -0
- data/app/assets/bower_components/process_engine/bpmn-js/LICENSE +22 -0
- data/app/assets/bower_components/process_engine/bpmn-js/README.md +46 -0
- data/app/assets/bower_components/process_engine/bpmn-js/bower.json +28 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css +40 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/assets/bpmn-font/font/bpmn.eot +0 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/assets/bpmn-font/font/bpmn.svg +21 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/assets/bpmn-font/font/bpmn.ttf +0 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/assets/bpmn-font/font/bpmn.woff +0 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/assets/diagram-js.css +355 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-modeler.js +21552 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-modeler.js.map +1 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-modeler.min.js +8 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-navigated-viewer.js +13542 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-navigated-viewer.js.map +1 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-navigated-viewer.min.js +5 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-viewer.js +13294 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-viewer.js.map +1 -0
- data/app/assets/bower_components/process_engine/bpmn-js/dist/bpmn-viewer.min.js +5 -0
- data/app/assets/bower_components/process_engine/hammerjs/CHANGELOG.md +30 -0
- data/app/assets/bower_components/process_engine/hammerjs/CONTRIBUTING.md +41 -0
- data/app/assets/bower_components/process_engine/hammerjs/Gruntfile.coffee +123 -0
- data/app/assets/bower_components/process_engine/hammerjs/LICENSE.md +21 -0
- data/app/assets/bower_components/process_engine/hammerjs/README.md +6 -0
- data/app/assets/bower_components/process_engine/hammerjs/bower.json +9 -0
- data/app/assets/bower_components/process_engine/hammerjs/component.json +8 -0
- data/app/assets/bower_components/process_engine/hammerjs/hammer.js +2463 -0
- data/app/assets/bower_components/process_engine/hammerjs/hammer.min.js +7 -0
- data/app/assets/bower_components/process_engine/hammerjs/hammer.min.map +1 -0
- data/app/assets/bower_components/process_engine/hammerjs/package.json +50 -0
- data/app/assets/bower_components/process_engine/jquery/MIT-LICENSE.txt +21 -0
- data/app/assets/bower_components/process_engine/jquery/bower.json +27 -0
- data/app/assets/bower_components/process_engine/jquery/dist/jquery.js +9205 -0
- data/app/assets/bower_components/process_engine/jquery/dist/jquery.min.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/dist/jquery.min.map +1 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax/jsonp.js +89 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax/load.js +75 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax/parseJSON.js +13 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax/parseXML.js +28 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax/script.js +64 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax/var/nonce.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax/var/rquery.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax/xhr.js +136 -0
- data/app/assets/bower_components/process_engine/jquery/src/ajax.js +786 -0
- data/app/assets/bower_components/process_engine/jquery/src/attributes/attr.js +141 -0
- data/app/assets/bower_components/process_engine/jquery/src/attributes/classes.js +158 -0
- data/app/assets/bower_components/process_engine/jquery/src/attributes/prop.js +94 -0
- data/app/assets/bower_components/process_engine/jquery/src/attributes/support.js +35 -0
- data/app/assets/bower_components/process_engine/jquery/src/attributes/val.js +161 -0
- data/app/assets/bower_components/process_engine/jquery/src/attributes.js +11 -0
- data/app/assets/bower_components/process_engine/jquery/src/callbacks.js +205 -0
- data/app/assets/bower_components/process_engine/jquery/src/core/access.js +60 -0
- data/app/assets/bower_components/process_engine/jquery/src/core/init.js +123 -0
- data/app/assets/bower_components/process_engine/jquery/src/core/parseHTML.js +39 -0
- data/app/assets/bower_components/process_engine/jquery/src/core/ready.js +97 -0
- data/app/assets/bower_components/process_engine/jquery/src/core/var/rsingleTag.js +4 -0
- data/app/assets/bower_components/process_engine/jquery/src/core.js +497 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/addGetHookIf.js +22 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/curCSS.js +57 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/defaultDisplay.js +70 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/hiddenVisibleSelectors.js +15 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/support.js +96 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/swap.js +28 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/var/cssExpand.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/var/getStyles.js +12 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/var/isHidden.js +13 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/var/rmargin.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/css/var/rnumnonpx.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/css.js +450 -0
- data/app/assets/bower_components/process_engine/jquery/src/data/Data.js +181 -0
- data/app/assets/bower_components/process_engine/jquery/src/data/accepts.js +20 -0
- data/app/assets/bower_components/process_engine/jquery/src/data/var/data_priv.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/data/var/data_user.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/data.js +178 -0
- data/app/assets/bower_components/process_engine/jquery/src/deferred.js +149 -0
- data/app/assets/bower_components/process_engine/jquery/src/deprecated.js +13 -0
- data/app/assets/bower_components/process_engine/jquery/src/dimensions.js +50 -0
- data/app/assets/bower_components/process_engine/jquery/src/effects/Tween.js +114 -0
- data/app/assets/bower_components/process_engine/jquery/src/effects/animatedSelector.js +13 -0
- data/app/assets/bower_components/process_engine/jquery/src/effects.js +648 -0
- data/app/assets/bower_components/process_engine/jquery/src/event/ajax.js +13 -0
- data/app/assets/bower_components/process_engine/jquery/src/event/alias.js +39 -0
- data/app/assets/bower_components/process_engine/jquery/src/event/support.js +9 -0
- data/app/assets/bower_components/process_engine/jquery/src/event.js +868 -0
- data/app/assets/bower_components/process_engine/jquery/src/exports/amd.js +24 -0
- data/app/assets/bower_components/process_engine/jquery/src/exports/global.js +32 -0
- data/app/assets/bower_components/process_engine/jquery/src/intro.js +44 -0
- data/app/assets/bower_components/process_engine/jquery/src/jquery.js +37 -0
- data/app/assets/bower_components/process_engine/jquery/src/manipulation/_evalUrl.js +18 -0
- data/app/assets/bower_components/process_engine/jquery/src/manipulation/support.js +32 -0
- data/app/assets/bower_components/process_engine/jquery/src/manipulation/var/rcheckableType.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/manipulation.js +580 -0
- data/app/assets/bower_components/process_engine/jquery/src/offset.js +207 -0
- data/app/assets/bower_components/process_engine/jquery/src/outro.js +1 -0
- data/app/assets/bower_components/process_engine/jquery/src/queue/delay.js +22 -0
- data/app/assets/bower_components/process_engine/jquery/src/queue.js +142 -0
- data/app/assets/bower_components/process_engine/jquery/src/selector-native.js +172 -0
- data/app/assets/bower_components/process_engine/jquery/src/selector-sizzle.js +14 -0
- data/app/assets/bower_components/process_engine/jquery/src/selector.js +1 -0
- data/app/assets/bower_components/process_engine/jquery/src/serialize.js +111 -0
- data/app/assets/bower_components/process_engine/jquery/src/sizzle/dist/sizzle.js +2067 -0
- data/app/assets/bower_components/process_engine/jquery/src/sizzle/dist/sizzle.min.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/sizzle/dist/sizzle.min.map +1 -0
- data/app/assets/bower_components/process_engine/jquery/src/traversing/findFilter.js +100 -0
- data/app/assets/bower_components/process_engine/jquery/src/traversing/var/rneedsContext.js +6 -0
- data/app/assets/bower_components/process_engine/jquery/src/traversing.js +199 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/arr.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/class2type.js +4 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/concat.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/hasOwn.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/indexOf.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/pnum.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/push.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/rnotwhite.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/slice.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/strundefined.js +3 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/support.js +4 -0
- data/app/assets/bower_components/process_engine/jquery/src/var/toString.js +5 -0
- data/app/assets/bower_components/process_engine/jquery/src/wrap.js +79 -0
- data/app/assets/bower_components/process_engine/jquery-mousewheel/ChangeLog.md +141 -0
- data/app/assets/bower_components/process_engine/jquery-mousewheel/LICENSE.txt +20 -0
- data/app/assets/bower_components/process_engine/jquery-mousewheel/README.md +85 -0
- data/app/assets/bower_components/process_engine/jquery-mousewheel/bower.json +17 -0
- data/app/assets/bower_components/process_engine/jquery-mousewheel/jquery.mousewheel.js +221 -0
- data/app/assets/bower_components/process_engine/jquery-mousewheel/jquery.mousewheel.min.js +8 -0
- data/app/assets/bower_components/process_engine/lodash/LICENSE.txt +22 -0
- data/app/assets/bower_components/process_engine/lodash/bower.json +23 -0
- data/app/assets/bower_components/process_engine/lodash/dist/lodash.compat.js +7157 -0
- data/app/assets/bower_components/process_engine/lodash/dist/lodash.compat.min.js +61 -0
- data/app/assets/bower_components/process_engine/lodash/dist/lodash.js +6785 -0
- data/app/assets/bower_components/process_engine/lodash/dist/lodash.min.js +56 -0
- data/app/assets/bower_components/process_engine/lodash/dist/lodash.underscore.js +4979 -0
- data/app/assets/bower_components/process_engine/lodash/dist/lodash.underscore.min.js +39 -0
- data/app/assets/bower_components/process_engine/sax/AUTHORS +10 -0
- data/app/assets/bower_components/process_engine/sax/LICENSE +32 -0
- data/app/assets/bower_components/process_engine/sax/LICENSE-W3C.html +188 -0
- data/app/assets/bower_components/process_engine/sax/README.md +216 -0
- data/app/assets/bower_components/process_engine/sax/component.json +12 -0
- data/app/assets/bower_components/process_engine/sax/examples/big-not-pretty.xml +8002 -0
- data/app/assets/bower_components/process_engine/sax/examples/example.js +29 -0
- data/app/assets/bower_components/process_engine/sax/examples/get-products.js +58 -0
- data/app/assets/bower_components/process_engine/sax/examples/hello-world.js +4 -0
- data/app/assets/bower_components/process_engine/sax/examples/not-pretty.xml +8 -0
- data/app/assets/bower_components/process_engine/sax/examples/pretty-print.js +74 -0
- data/app/assets/bower_components/process_engine/sax/examples/shopping.xml +2 -0
- data/app/assets/bower_components/process_engine/sax/examples/strict.dtd +870 -0
- data/app/assets/bower_components/process_engine/sax/examples/test.html +15 -0
- data/app/assets/bower_components/process_engine/sax/examples/test.xml +1254 -0
- data/app/assets/bower_components/process_engine/sax/lib/sax.js +1410 -0
- data/app/assets/bower_components/process_engine/sax/package.json +12 -0
- data/app/assets/bower_components/process_engine/sax/test/attribute-name.js +33 -0
- data/app/assets/bower_components/process_engine/sax/test/attribute-no-space.js +75 -0
- data/app/assets/bower_components/process_engine/sax/test/buffer-overrun.js +26 -0
- data/app/assets/bower_components/process_engine/sax/test/case.js +50 -0
- data/app/assets/bower_components/process_engine/sax/test/cdata-chunked.js +11 -0
- data/app/assets/bower_components/process_engine/sax/test/cdata-end-split.js +15 -0
- data/app/assets/bower_components/process_engine/sax/test/cdata-fake-end.js +28 -0
- data/app/assets/bower_components/process_engine/sax/test/cdata-multiple.js +15 -0
- data/app/assets/bower_components/process_engine/sax/test/cdata.js +10 -0
- data/app/assets/bower_components/process_engine/sax/test/cyrillic.js +8 -0
- data/app/assets/bower_components/process_engine/sax/test/duplicate-attribute.js +13 -0
- data/app/assets/bower_components/process_engine/sax/test/emoji.js +12 -0
- data/app/assets/bower_components/process_engine/sax/test/end_empty_stream.js +5 -0
- data/app/assets/bower_components/process_engine/sax/test/entities.js +10 -0
- data/app/assets/bower_components/process_engine/sax/test/entity-mega.js +16 -0
- data/app/assets/bower_components/process_engine/sax/test/flush.js +13 -0
- data/app/assets/bower_components/process_engine/sax/test/index.js +86 -0
- data/app/assets/bower_components/process_engine/sax/test/issue-23.js +43 -0
- data/app/assets/bower_components/process_engine/sax/test/issue-30.js +24 -0
- data/app/assets/bower_components/process_engine/sax/test/issue-35.js +15 -0
- data/app/assets/bower_components/process_engine/sax/test/issue-47.js +12 -0
- data/app/assets/bower_components/process_engine/sax/test/issue-49.js +31 -0
- data/app/assets/bower_components/process_engine/sax/test/issue-84.js +13 -0
- data/app/assets/bower_components/process_engine/sax/test/parser-position.js +28 -0
- data/app/assets/bower_components/process_engine/sax/test/script-close-better.js +12 -0
- data/app/assets/bower_components/process_engine/sax/test/script.js +12 -0
- data/app/assets/bower_components/process_engine/sax/test/self-closing-child-strict.js +44 -0
- data/app/assets/bower_components/process_engine/sax/test/self-closing-child.js +44 -0
- data/app/assets/bower_components/process_engine/sax/test/self-closing-tag.js +25 -0
- data/app/assets/bower_components/process_engine/sax/test/stray-ending.js +17 -0
- data/app/assets/bower_components/process_engine/sax/test/trailing-attribute-no-value.js +10 -0
- data/app/assets/bower_components/process_engine/sax/test/trailing-non-whitespace.js +18 -0
- data/app/assets/bower_components/process_engine/sax/test/unclosed-root.js +11 -0
- data/app/assets/bower_components/process_engine/sax/test/unquoted.js +18 -0
- data/app/assets/bower_components/process_engine/sax/test/utf8-split.js +32 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-as-tag-name.js +15 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-issue-41.js +68 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-rebinding.js +63 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-strict.js +74 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-unbound-element.js +33 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-unbound.js +15 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-xml-default-ns.js +31 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-xml-default-prefix-attribute.js +36 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-xml-default-prefix.js +21 -0
- data/app/assets/bower_components/process_engine/sax/test/xmlns-xml-default-redefine.js +41 -0
- data/app/assets/javascripts/process_engine/application.js +65 -0
- data/app/assets/stylesheets/process_engine/application.css +39 -0
- data/app/controllers/process_engine/application_controller.rb +28 -0
- data/app/controllers/process_engine/process_definitions_controller.rb +63 -0
- data/app/controllers/process_engine/process_instances_controller.rb +42 -0
- data/app/controllers/process_engine/process_tasks_controller.rb +23 -0
- data/app/helpers/process_engine/application_helper.rb +4 -0
- data/app/models/process_engine/consumer/consumer_task.rb +15 -0
- data/app/models/process_engine/error/false_task_state.rb +2 -0
- data/app/models/process_engine/listener/base.rb +49 -0
- data/app/models/process_engine/node_data_injection.rb +22 -0
- data/app/models/process_engine/parser/complex_gateway.rb +21 -0
- data/app/models/process_engine/parser/end_event.rb +23 -0
- data/app/models/process_engine/parser/exclusive_gateway.rb +25 -0
- data/app/models/process_engine/parser/extension/condition_expression.rb +39 -0
- data/app/models/process_engine/parser/extension/execution_listener.rb +15 -0
- data/app/models/process_engine/parser/extension/form_field.rb +50 -0
- data/app/models/process_engine/parser/extension/input_output.rb +28 -0
- data/app/models/process_engine/parser/extension/listener.rb +43 -0
- data/app/models/process_engine/parser/extension/property.rb +20 -0
- data/app/models/process_engine/parser/extension/task_listener.rb +15 -0
- data/app/models/process_engine/parser/extension/transitional_parameter.rb +53 -0
- data/app/models/process_engine/parser/inclusive_gateway.rb +25 -0
- data/app/models/process_engine/parser/parallel_gateway.rb +19 -0
- data/app/models/process_engine/parser/script_task.rb +37 -0
- data/app/models/process_engine/parser/sequence_flow.rb +36 -0
- data/app/models/process_engine/parser/start_event.rb +27 -0
- data/app/models/process_engine/parser/user_task.rb +36 -0
- data/app/models/process_engine/parser/xml_node.rb +125 -0
- data/app/models/process_engine/process_definition.rb +50 -0
- data/app/models/process_engine/process_instance.rb +72 -0
- data/app/models/process_engine/process_query.rb +52 -0
- data/app/models/process_engine/process_schema.rb +30 -0
- data/app/models/process_engine/process_task.rb +70 -0
- data/app/models/process_engine/schema/interceptor/exclusive_gateway.rb +39 -0
- data/app/models/process_engine/schema/node.rb +48 -0
- data/app/models/process_engine/schema/node_extension.rb +79 -0
- data/app/models/process_engine/schema/transition.rb +22 -0
- data/app/views/layouts/process_engine/application.html.erb +14 -0
- data/app/views/process_engine/layouts/_menu.html.haml +6 -0
- data/app/views/process_engine/layouts/application.html.haml +11 -0
- data/app/views/process_engine/process_definitions/_form.html.haml +6 -0
- data/app/views/process_engine/process_definitions/edit.html.haml +3 -0
- data/app/views/process_engine/process_definitions/index.html.haml +26 -0
- data/app/views/process_engine/process_definitions/new.html.haml +3 -0
- data/app/views/process_engine/process_definitions/show.html.haml +51 -0
- data/app/views/process_engine/process_instances/_form.html.haml +5 -0
- data/app/views/process_engine/process_instances/edit.html.haml +3 -0
- data/app/views/process_engine/process_instances/index.html.haml +29 -0
- data/app/views/process_engine/process_instances/show.html.haml +38 -0
- data/app/views/process_engine/process_tasks/index.html.haml +44 -0
- data/app/views/process_engine/share/_bpmn_canvas.html.haml +7 -0
- data/config/initializers/bower_rails.rb +16 -0
- data/config/initializers/simple_form.rb +166 -0
- data/config/initializers/simple_form_bootstrap.rb +135 -0
- data/config/locales/simple_form.en.yml +31 -0
- data/config/routes.rb +18 -0
- data/db/migrate/20150313063311_create_process_engine_process_definitions.rb +14 -0
- data/db/migrate/20150313063508_create_process_engine_process_instances.rb +15 -0
- data/db/migrate/20150313063633_create_process_engine_process_tasks.rb +30 -0
- data/lib/process_engine/engine.rb +12 -0
- data/lib/process_engine/version.rb +3 -0
- data/lib/process_engine.rb +8 -0
- data/lib/tasks/process_engine_tasks.rake +4 -0
- data/lib/templates/erb/scaffold/_form.html.erb +13 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/javascripts/application.js +13 -0
- data/test/dummy/app/assets/stylesheets/application.css +15 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/bin/setup +29 -0
- data/test/dummy/config/application.rb +26 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +85 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +41 -0
- data/test/dummy/config/environments/production.rb +79 -0
- data/test/dummy/config/environments/test.rb +42 -0
- data/test/dummy/config/initializers/assets.rb +11 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +4 -0
- data/test/dummy/config/secrets.yml +22 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/db/schema.rb +66 -0
- data/test/dummy/log/development.log +9722 -0
- data/test/dummy/public/404.html +67 -0
- data/test/dummy/public/422.html +67 -0
- data/test/dummy/public/500.html +66 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/tmp/cache/assets/development/sass/8afee1847b645742b0d2535a7c32f4f22e7926ec/bootstrap.scssc +0 -0
- data/test/dummy/tmp/cache/assets/development/sass/b5911aa594334efca1023d6f01abce0758e9648a/bootstrap.scssc +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/014d8413350c7d85a5429f5e2c9ac911 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/0cbd667d0fbf9e0e6f60b5ebf2f95fa3 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/0f7ba040a442530a6d4a5bc8307769c1 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/0fca2cc9aa38138660d8c7d492cf81e4 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/0ff24903c54f534941fbc96ff862e475 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/11100f87277a2892323fe5581af75a7b +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/13fe41fee1fe35b49d145bcc06610705 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/18a34084783e8b7f9bc871bc64b13eed +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/1a3821ce28e0196075ed0830fcb45f38 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/1cf94b9a49ee68cb0f4065d48e9cbaf3 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/21a6373d6c40614fd05be57194c68248 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/26276ae8df51c046f3adc0b50a1521ba +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/2eea4a8f4854d438cd03cb23a89b6d8c +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/2f5173deea6c795b8fdde723bb4b63af +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/357970feca3ac29060c1e3861e2c0953 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/3993bcd8bae4771e550d8fc91d1debbc +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/3ccc4edae36a9c4bd70fc330c9c83dc9 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/3e391b0f37505fffc40ba9ffa13330a2 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/42e258b77f5dd532dfb9344a2d766de6 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/43a5910cb7a330ece5856c0e9099efa2 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/4e65ec1149f01e749e1e372861210d4d +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/501160bcee63ae68449a5a5eb78b6d41 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/517beb0bf366ec3c8649da9ac8a8a01e +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/525a556b1eaacfa041722e1250d9859a +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/56edbae38e4e0ff9f4b4fc576ae3d746 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/5b04f4a7058d92f88f89f2248bcc16b0 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/5c3c69f7c2520b57620931c150032d7e +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/5d1f8f2111e14084ebf711412c9230d2 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/5f9833d6835900c56d0e76a1b2924cc2 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/67c653cc36eb639f7a7af5159e9f9de3 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/704b33432a5ba417bcd5962ad999c671 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/7301f83e8e67f30be13546a794a553ef +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/7482c8f712712a79937caf41413bca15 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/761cb171e67ddca71e8b9c74f0220457 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/7e23bd4385e166267961b6d936363042 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/7e5100f290c9ba0d4c026e43b58d0d79 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/80743880e8d46958e9839ff9408c3113 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/8b8941aae968854bafb4638a86cad77b +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/9c292f3b6b577a92970303c351e1d4a1 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/a3435b13cfa60fb7469a19703350bda7 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/a6ce1b2837383f1e8b62b7f1ddcc6820 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/a7e90acc68ba69b7cd5c0a7005467c4b +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/be4d00fb7bf467b370f0fda7e453ec68 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/c4fbf44e63e40cbbf825fe750374728f +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/c593bacb8d3f003125f91763a7b36b10 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/c5ae3bc69f7b1e1fdb51a667c9f3cdd6 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/cc843b336460771bf75c97cf0935301b +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/ce3b6127737ed36f7b62a54acec06b3e +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/cffd775d018f68ce5dba1ee0d951a994 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/d58931b13c55c146d21475e532b126ba +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/d771ace226fc8215a3572e0aa35bb0d6 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/dc6bbdc1e385c7bb2743011e9c2a7407 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/dd7270e11b484ae10f601e1dd014445a +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/de86beefc60e0cd84dd1525af863e64d +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/e0953e6e4a6c208e350f7f25d85bdce8 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/ec3b479833be43bf164a3deb119c3aee +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/ef2cb0afc9a61a3d5819b4dfc84720ad +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/f0511bbd6f6cd5530acddebb6d7e7044 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/f7009bba030498129042e0c542d4f264 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/f7cbd26ba1d28d48de824f0e94586655 +0 -0
- data/test/fixtures/process_engine/process_definitions.yml +17 -0
- data/test/fixtures/process_engine/process_instances.yml +11 -0
- data/test/fixtures/process_engine/process_tasks.yml +11 -0
- data/test/integration/navigation_test.rb +10 -0
- data/test/models/process_engine/process_definition_test.rb +9 -0
- data/test/models/process_engine/process_instance_test.rb +9 -0
- data/test/models/process_engine/process_task_test.rb +9 -0
- data/test/process_engine_test.rb +7 -0
- data/test/test_helper.rb +19 -0
- metadata +740 -0
|
@@ -0,0 +1,3700 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
.button-bar {
|
|
20
|
+
display: table;
|
|
21
|
+
table-layout: fixed;
|
|
22
|
+
white-space: nowrap;
|
|
23
|
+
margin: 0;
|
|
24
|
+
padding: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.button-bar__item {
|
|
28
|
+
display: table-cell;
|
|
29
|
+
width: auto;
|
|
30
|
+
border-radius: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.button-bar__item > input {
|
|
34
|
+
position: absolute;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
padding: 0;
|
|
37
|
+
border: 0;
|
|
38
|
+
opacity: 0.001;
|
|
39
|
+
z-index: 1;
|
|
40
|
+
vertical-align: top;
|
|
41
|
+
outline: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.button-bar__button {
|
|
45
|
+
border-radius: inherit;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.button-bar__item:disabled {
|
|
49
|
+
opacity: 0.3;
|
|
50
|
+
cursor: default;
|
|
51
|
+
pointer-events: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
*
|
|
56
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
57
|
+
*
|
|
58
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
59
|
+
* you may not use this file except in compliance with the License.
|
|
60
|
+
* You may obtain a copy of the License at
|
|
61
|
+
*
|
|
62
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
63
|
+
*
|
|
64
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
65
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
66
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
67
|
+
* See the License for the specific language governing permissions and
|
|
68
|
+
* limitations under the License.
|
|
69
|
+
*
|
|
70
|
+
*/
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
*
|
|
74
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
75
|
+
*
|
|
76
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
77
|
+
* you may not use this file except in compliance with the License.
|
|
78
|
+
* You may obtain a copy of the License at
|
|
79
|
+
*
|
|
80
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
81
|
+
*
|
|
82
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
83
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
84
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
85
|
+
* See the License for the specific language governing permissions and
|
|
86
|
+
* limitations under the License.
|
|
87
|
+
*
|
|
88
|
+
*/
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
*
|
|
92
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
93
|
+
*
|
|
94
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
95
|
+
* you may not use this file except in compliance with the License.
|
|
96
|
+
* You may obtain a copy of the License at
|
|
97
|
+
*
|
|
98
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
99
|
+
*
|
|
100
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
101
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
102
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
103
|
+
* See the License for the specific language governing permissions and
|
|
104
|
+
* limitations under the License.
|
|
105
|
+
*
|
|
106
|
+
*/
|
|
107
|
+
|
|
108
|
+
.button,
|
|
109
|
+
.topcoat-button,
|
|
110
|
+
.topcoat-button--quiet,
|
|
111
|
+
.topcoat-button--large,
|
|
112
|
+
.topcoat-button--large--quiet,
|
|
113
|
+
.topcoat-button--cta,
|
|
114
|
+
.topcoat-button--large--cta,
|
|
115
|
+
.topcoat-button-bar__button,
|
|
116
|
+
.topcoat-button-bar__button--large {
|
|
117
|
+
position: relative;
|
|
118
|
+
display: inline-block;
|
|
119
|
+
vertical-align: top;
|
|
120
|
+
-moz-box-sizing: border-box;
|
|
121
|
+
box-sizing: border-box;
|
|
122
|
+
background-clip: padding-box;
|
|
123
|
+
padding: 0;
|
|
124
|
+
margin: 0;
|
|
125
|
+
font: inherit;
|
|
126
|
+
color: inherit;
|
|
127
|
+
background: transparent;
|
|
128
|
+
border: none;
|
|
129
|
+
cursor: default;
|
|
130
|
+
-webkit-user-select: none;
|
|
131
|
+
-moz-user-select: none;
|
|
132
|
+
-ms-user-select: none;
|
|
133
|
+
user-select: none;
|
|
134
|
+
text-overflow: ellipsis;
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
overflow: hidden;
|
|
137
|
+
text-decoration: none;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.button--quiet {
|
|
141
|
+
background: transparent;
|
|
142
|
+
border: 1px solid transparent;
|
|
143
|
+
box-shadow: none;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.button--disabled,
|
|
147
|
+
.topcoat-button:disabled,
|
|
148
|
+
.topcoat-button--quiet:disabled,
|
|
149
|
+
.topcoat-button--large:disabled,
|
|
150
|
+
.topcoat-button--large--quiet:disabled,
|
|
151
|
+
.topcoat-button--cta:disabled,
|
|
152
|
+
.topcoat-button--large--cta:disabled,
|
|
153
|
+
.topcoat-button-bar__button:disabled,
|
|
154
|
+
.topcoat-button-bar__button--large:disabled {
|
|
155
|
+
opacity: 0.3;
|
|
156
|
+
cursor: default;
|
|
157
|
+
pointer-events: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.topcoat-button,
|
|
161
|
+
.topcoat-button--quiet,
|
|
162
|
+
.topcoat-button--large,
|
|
163
|
+
.topcoat-button--large--quiet,
|
|
164
|
+
.topcoat-button--cta,
|
|
165
|
+
.topcoat-button--large--cta,
|
|
166
|
+
.topcoat-button-bar__button,
|
|
167
|
+
.topcoat-button-bar__button--large {
|
|
168
|
+
padding: 0 1.25rem;
|
|
169
|
+
font-size: 16px;
|
|
170
|
+
line-height: 3rem;
|
|
171
|
+
letter-spacing: 1px;
|
|
172
|
+
color: #454545;
|
|
173
|
+
text-shadow: 0 1px #fff;
|
|
174
|
+
vertical-align: top;
|
|
175
|
+
background-color: #e5e9e8;
|
|
176
|
+
box-shadow: inset 0 1px #fff;
|
|
177
|
+
border: 1px solid #a5a8a8;
|
|
178
|
+
border-radius: 6px;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.topcoat-button:hover,
|
|
182
|
+
.topcoat-button--quiet:hover,
|
|
183
|
+
.topcoat-button--large:hover,
|
|
184
|
+
.topcoat-button--large--quiet:hover,
|
|
185
|
+
.topcoat-button-bar__button:hover,
|
|
186
|
+
.topcoat-button-bar__button--large:hover {
|
|
187
|
+
background-color: #edf1f1;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.topcoat-button:active,
|
|
191
|
+
.topcoat-button--large:active,
|
|
192
|
+
.topcoat-button-bar__button:active,
|
|
193
|
+
.topcoat-button-bar__button--large:active,
|
|
194
|
+
:checked + .topcoat-button-bar__button {
|
|
195
|
+
background-color: #d3d7d7;
|
|
196
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.topcoat-button:focus,
|
|
200
|
+
.topcoat-button--quiet:focus,
|
|
201
|
+
.topcoat-button--large:focus,
|
|
202
|
+
.topcoat-button--large--quiet:focus,
|
|
203
|
+
.topcoat-button--cta:focus,
|
|
204
|
+
.topcoat-button--large--cta:focus,
|
|
205
|
+
.topcoat-button-bar__button:focus,
|
|
206
|
+
.topcoat-button-bar__button--large:focus {
|
|
207
|
+
border: 1px solid #0940fd;
|
|
208
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
209
|
+
outline: 0;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.topcoat-button--quiet {
|
|
213
|
+
background: transparent;
|
|
214
|
+
border: 1px solid transparent;
|
|
215
|
+
box-shadow: none;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.topcoat-button--quiet:hover,
|
|
219
|
+
.topcoat-button--large--quiet:hover {
|
|
220
|
+
text-shadow: 0 1px #fff;
|
|
221
|
+
border: 1px solid #a5a8a8;
|
|
222
|
+
box-shadow: inset 0 1px #fff;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.topcoat-button--quiet:active,
|
|
226
|
+
.topcoat-button--large--quiet:active {
|
|
227
|
+
color: #454545;
|
|
228
|
+
text-shadow: 0 1px #fff;
|
|
229
|
+
background-color: #d3d7d7;
|
|
230
|
+
border: 1px solid #a5a8a8;
|
|
231
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.topcoat-button--large,
|
|
235
|
+
.topcoat-button--large--quiet,
|
|
236
|
+
.topcoat-button-bar__button--large {
|
|
237
|
+
font-size: 1.3rem;
|
|
238
|
+
font-weight: 400;
|
|
239
|
+
line-height: 4.375rem;
|
|
240
|
+
padding: 0 1.25rem;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.topcoat-button--large--quiet {
|
|
244
|
+
background: transparent;
|
|
245
|
+
border: 1px solid transparent;
|
|
246
|
+
box-shadow: none;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.topcoat-button--cta,
|
|
250
|
+
.topcoat-button--large--cta {
|
|
251
|
+
border: 1px solid #143250;
|
|
252
|
+
background-color: #288edf;
|
|
253
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
|
254
|
+
color: #fff;
|
|
255
|
+
font-weight: 500;
|
|
256
|
+
text-shadow: 0 -1px rgba(0,0,0,0.36);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.topcoat-button--cta:hover,
|
|
260
|
+
.topcoat-button--large--cta:hover {
|
|
261
|
+
background-color: #509bef;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.topcoat-button--cta:active,
|
|
265
|
+
.topcoat-button--large--cta:active {
|
|
266
|
+
background-color: #0380e8;
|
|
267
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.topcoat-button--large--cta {
|
|
271
|
+
font-size: 1.3rem;
|
|
272
|
+
font-weight: 400;
|
|
273
|
+
line-height: 4.375rem;
|
|
274
|
+
padding: 0 1.25rem;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.button-bar,
|
|
278
|
+
.topcoat-button-bar {
|
|
279
|
+
display: table;
|
|
280
|
+
table-layout: fixed;
|
|
281
|
+
white-space: nowrap;
|
|
282
|
+
margin: 0;
|
|
283
|
+
padding: 0;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.button-bar__item,
|
|
287
|
+
.topcoat-button-bar__item {
|
|
288
|
+
display: table-cell;
|
|
289
|
+
width: auto;
|
|
290
|
+
border-radius: 0;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.button-bar__item > input,
|
|
294
|
+
.topcoat-button-bar__item > input {
|
|
295
|
+
position: absolute;
|
|
296
|
+
overflow: hidden;
|
|
297
|
+
padding: 0;
|
|
298
|
+
border: 0;
|
|
299
|
+
opacity: 0.001;
|
|
300
|
+
z-index: 1;
|
|
301
|
+
vertical-align: top;
|
|
302
|
+
outline: none;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.button-bar__button {
|
|
306
|
+
border-radius: inherit;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.button-bar__item:disabled {
|
|
310
|
+
opacity: 0.3;
|
|
311
|
+
cursor: default;
|
|
312
|
+
pointer-events: none;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* topdoc
|
|
316
|
+
name: Button Bar
|
|
317
|
+
description: Component of grouped buttons
|
|
318
|
+
modifiers:
|
|
319
|
+
:disabled: Disabled state
|
|
320
|
+
markup:
|
|
321
|
+
<div class="topcoat-button-bar">
|
|
322
|
+
<div class="topcoat-button-bar__item">
|
|
323
|
+
<button class="topcoat-button-bar__button">One</button>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="topcoat-button-bar__item">
|
|
326
|
+
<button class="topcoat-button-bar__button">Two</button>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="topcoat-button-bar__item">
|
|
329
|
+
<button class="topcoat-button-bar__button">Three</button>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
examples:
|
|
333
|
+
mobile button bar: http://codepen.io/Topcoat/pen/kdKyg
|
|
334
|
+
tags:
|
|
335
|
+
- desktop
|
|
336
|
+
- light
|
|
337
|
+
- dark
|
|
338
|
+
- mobile
|
|
339
|
+
- button
|
|
340
|
+
- group
|
|
341
|
+
- bar
|
|
342
|
+
*/
|
|
343
|
+
|
|
344
|
+
.topcoat-button-bar > .topcoat-button-bar__item:first-child {
|
|
345
|
+
border-top-left-radius: 6px;
|
|
346
|
+
border-bottom-left-radius: 6px;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.topcoat-button-bar > .topcoat-button-bar__item:last-child {
|
|
350
|
+
border-top-right-radius: 6px;
|
|
351
|
+
border-bottom-right-radius: 6px;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.topcoat-button-bar__item:first-child > .topcoat-button-bar__button,
|
|
355
|
+
.topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {
|
|
356
|
+
border-right: none;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,
|
|
360
|
+
.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {
|
|
361
|
+
border-left: none;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.topcoat-button-bar__button {
|
|
365
|
+
border-radius: inherit;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.topcoat-button-bar__button:focus,
|
|
369
|
+
.topcoat-button-bar__button--large:focus {
|
|
370
|
+
z-index: 1;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
/* topdoc
|
|
374
|
+
name: Large Button Bar
|
|
375
|
+
description: A button bar, only larger
|
|
376
|
+
modifiers:
|
|
377
|
+
:disabled: Disabled state
|
|
378
|
+
markup:
|
|
379
|
+
<div class="topcoat-button-bar">
|
|
380
|
+
<div class="topcoat-button-bar__item">
|
|
381
|
+
<button class="topcoat-button-bar__button--large">One</button>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="topcoat-button-bar__item">
|
|
384
|
+
<button class="topcoat-button-bar__button--large">Two</button>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="topcoat-button-bar__item">
|
|
387
|
+
<button class="topcoat-button-bar__button--large">Three</button>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
tags:
|
|
391
|
+
- desktop
|
|
392
|
+
- light
|
|
393
|
+
- dark
|
|
394
|
+
- mobile
|
|
395
|
+
- button
|
|
396
|
+
- group
|
|
397
|
+
- bar
|
|
398
|
+
- large
|
|
399
|
+
*/
|
|
400
|
+
|
|
401
|
+
.topcoat-button-bar__button--large {
|
|
402
|
+
border-radius: inherit;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/**
|
|
406
|
+
*
|
|
407
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
408
|
+
*
|
|
409
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
410
|
+
* you may not use this file except in compliance with the License.
|
|
411
|
+
* You may obtain a copy of the License at
|
|
412
|
+
*
|
|
413
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
414
|
+
*
|
|
415
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
416
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
417
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
418
|
+
* See the License for the specific language governing permissions and
|
|
419
|
+
* limitations under the License.
|
|
420
|
+
*
|
|
421
|
+
*/
|
|
422
|
+
|
|
423
|
+
.button {
|
|
424
|
+
position: relative;
|
|
425
|
+
display: inline-block;
|
|
426
|
+
vertical-align: top;
|
|
427
|
+
-moz-box-sizing: border-box;
|
|
428
|
+
box-sizing: border-box;
|
|
429
|
+
background-clip: padding-box;
|
|
430
|
+
padding: 0;
|
|
431
|
+
margin: 0;
|
|
432
|
+
font: inherit;
|
|
433
|
+
color: inherit;
|
|
434
|
+
background: transparent;
|
|
435
|
+
border: none;
|
|
436
|
+
cursor: default;
|
|
437
|
+
-webkit-user-select: none;
|
|
438
|
+
-moz-user-select: none;
|
|
439
|
+
-ms-user-select: none;
|
|
440
|
+
user-select: none;
|
|
441
|
+
text-overflow: ellipsis;
|
|
442
|
+
white-space: nowrap;
|
|
443
|
+
overflow: hidden;
|
|
444
|
+
text-decoration: none;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.button--quiet {
|
|
448
|
+
background: transparent;
|
|
449
|
+
border: 1px solid transparent;
|
|
450
|
+
box-shadow: none;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.button--disabled {
|
|
454
|
+
opacity: 0.3;
|
|
455
|
+
cursor: default;
|
|
456
|
+
pointer-events: none;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
/**
|
|
460
|
+
*
|
|
461
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
462
|
+
*
|
|
463
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
464
|
+
* you may not use this file except in compliance with the License.
|
|
465
|
+
* You may obtain a copy of the License at
|
|
466
|
+
*
|
|
467
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
468
|
+
*
|
|
469
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
470
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
471
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
472
|
+
* See the License for the specific language governing permissions and
|
|
473
|
+
* limitations under the License.
|
|
474
|
+
*
|
|
475
|
+
*/
|
|
476
|
+
|
|
477
|
+
/**
|
|
478
|
+
*
|
|
479
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
480
|
+
*
|
|
481
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
482
|
+
* you may not use this file except in compliance with the License.
|
|
483
|
+
* You may obtain a copy of the License at
|
|
484
|
+
*
|
|
485
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
486
|
+
*
|
|
487
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
488
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
489
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
490
|
+
* See the License for the specific language governing permissions and
|
|
491
|
+
* limitations under the License.
|
|
492
|
+
*
|
|
493
|
+
*/
|
|
494
|
+
|
|
495
|
+
/**
|
|
496
|
+
*
|
|
497
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
498
|
+
*
|
|
499
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
500
|
+
* you may not use this file except in compliance with the License.
|
|
501
|
+
* You may obtain a copy of the License at
|
|
502
|
+
*
|
|
503
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
504
|
+
*
|
|
505
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
506
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
507
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
508
|
+
* See the License for the specific language governing permissions and
|
|
509
|
+
* limitations under the License.
|
|
510
|
+
*
|
|
511
|
+
*/
|
|
512
|
+
|
|
513
|
+
.button,
|
|
514
|
+
.topcoat-button,
|
|
515
|
+
.topcoat-button--quiet,
|
|
516
|
+
.topcoat-button--large,
|
|
517
|
+
.topcoat-button--large--quiet,
|
|
518
|
+
.topcoat-button--cta,
|
|
519
|
+
.topcoat-button--large--cta {
|
|
520
|
+
position: relative;
|
|
521
|
+
display: inline-block;
|
|
522
|
+
vertical-align: top;
|
|
523
|
+
-moz-box-sizing: border-box;
|
|
524
|
+
box-sizing: border-box;
|
|
525
|
+
background-clip: padding-box;
|
|
526
|
+
padding: 0;
|
|
527
|
+
margin: 0;
|
|
528
|
+
font: inherit;
|
|
529
|
+
color: inherit;
|
|
530
|
+
background: transparent;
|
|
531
|
+
border: none;
|
|
532
|
+
cursor: default;
|
|
533
|
+
-webkit-user-select: none;
|
|
534
|
+
-moz-user-select: none;
|
|
535
|
+
-ms-user-select: none;
|
|
536
|
+
user-select: none;
|
|
537
|
+
text-overflow: ellipsis;
|
|
538
|
+
white-space: nowrap;
|
|
539
|
+
overflow: hidden;
|
|
540
|
+
text-decoration: none;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.button--quiet {
|
|
544
|
+
background: transparent;
|
|
545
|
+
border: 1px solid transparent;
|
|
546
|
+
box-shadow: none;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.button--disabled,
|
|
550
|
+
.topcoat-button:disabled,
|
|
551
|
+
.topcoat-button--quiet:disabled,
|
|
552
|
+
.topcoat-button--large:disabled,
|
|
553
|
+
.topcoat-button--large--quiet:disabled,
|
|
554
|
+
.topcoat-button--cta:disabled,
|
|
555
|
+
.topcoat-button--large--cta:disabled {
|
|
556
|
+
opacity: 0.3;
|
|
557
|
+
cursor: default;
|
|
558
|
+
pointer-events: none;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
/* topdoc
|
|
562
|
+
name: Button
|
|
563
|
+
description: A simple button
|
|
564
|
+
modifiers:
|
|
565
|
+
:active: Active state
|
|
566
|
+
:disabled: Disabled state
|
|
567
|
+
:hover: Hover state
|
|
568
|
+
:focus: Focused
|
|
569
|
+
markup:
|
|
570
|
+
<button class="topcoat-button">Button</button>
|
|
571
|
+
<button class="topcoat-button" disabled>Button</button>
|
|
572
|
+
examples:
|
|
573
|
+
mobile button: http://codepen.io/Topcoat/pen/DpKtf
|
|
574
|
+
tags:
|
|
575
|
+
- desktop
|
|
576
|
+
- light
|
|
577
|
+
- mobile
|
|
578
|
+
- button
|
|
579
|
+
*/
|
|
580
|
+
|
|
581
|
+
.topcoat-button,
|
|
582
|
+
.topcoat-button--quiet,
|
|
583
|
+
.topcoat-button--large,
|
|
584
|
+
.topcoat-button--large--quiet,
|
|
585
|
+
.topcoat-button--cta,
|
|
586
|
+
.topcoat-button--large--cta {
|
|
587
|
+
padding: 0 1.25rem;
|
|
588
|
+
font-size: 16px;
|
|
589
|
+
line-height: 3rem;
|
|
590
|
+
letter-spacing: 1px;
|
|
591
|
+
color: #454545;
|
|
592
|
+
text-shadow: 0 1px #fff;
|
|
593
|
+
vertical-align: top;
|
|
594
|
+
background-color: #e5e9e8;
|
|
595
|
+
box-shadow: inset 0 1px #fff;
|
|
596
|
+
border: 1px solid #a5a8a8;
|
|
597
|
+
border-radius: 6px;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.topcoat-button:hover,
|
|
601
|
+
.topcoat-button--quiet:hover,
|
|
602
|
+
.topcoat-button--large:hover,
|
|
603
|
+
.topcoat-button--large--quiet:hover {
|
|
604
|
+
background-color: #edf1f1;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.topcoat-button:active,
|
|
608
|
+
.topcoat-button--large:active {
|
|
609
|
+
background-color: #d3d7d7;
|
|
610
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.topcoat-button:focus,
|
|
614
|
+
.topcoat-button--quiet:focus,
|
|
615
|
+
.topcoat-button--large:focus,
|
|
616
|
+
.topcoat-button--large--quiet:focus,
|
|
617
|
+
.topcoat-button--cta:focus,
|
|
618
|
+
.topcoat-button--large--cta:focus {
|
|
619
|
+
border: 1px solid #0940fd;
|
|
620
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
621
|
+
outline: 0;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
/* topdoc
|
|
625
|
+
name: Quiet Button
|
|
626
|
+
description: A simple, yet quiet button
|
|
627
|
+
modifiers:
|
|
628
|
+
:active: Quiet button active state
|
|
629
|
+
:disabled: Disabled state
|
|
630
|
+
:hover: Hover state
|
|
631
|
+
:focus: Focused
|
|
632
|
+
markup:
|
|
633
|
+
<button class="topcoat-button--quiet">Button</button>
|
|
634
|
+
<button class="topcoat-button--quiet" disabled>Button</button>
|
|
635
|
+
tags:
|
|
636
|
+
- desktop
|
|
637
|
+
- light
|
|
638
|
+
- mobile
|
|
639
|
+
- button
|
|
640
|
+
- quiet
|
|
641
|
+
*/
|
|
642
|
+
|
|
643
|
+
.topcoat-button--quiet {
|
|
644
|
+
background: transparent;
|
|
645
|
+
border: 1px solid transparent;
|
|
646
|
+
box-shadow: none;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.topcoat-button--quiet:hover,
|
|
650
|
+
.topcoat-button--large--quiet:hover {
|
|
651
|
+
text-shadow: 0 1px #fff;
|
|
652
|
+
border: 1px solid #a5a8a8;
|
|
653
|
+
box-shadow: inset 0 1px #fff;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
.topcoat-button--quiet:active,
|
|
657
|
+
.topcoat-button--large--quiet:active {
|
|
658
|
+
color: #454545;
|
|
659
|
+
text-shadow: 0 1px #fff;
|
|
660
|
+
background-color: #d3d7d7;
|
|
661
|
+
border: 1px solid #a5a8a8;
|
|
662
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
/* topdoc
|
|
666
|
+
name: Large Button
|
|
667
|
+
description: A big ol button
|
|
668
|
+
modifiers:
|
|
669
|
+
:active: Active state
|
|
670
|
+
:disabled: Disabled state
|
|
671
|
+
:hover: Hover state
|
|
672
|
+
:focus: Focused
|
|
673
|
+
markup:
|
|
674
|
+
<button class="topcoat-button--large" >Button</button>
|
|
675
|
+
<button class="topcoat-button--large" disabled>Button</button>
|
|
676
|
+
tags:
|
|
677
|
+
- desktop
|
|
678
|
+
- light
|
|
679
|
+
- mobile
|
|
680
|
+
- button
|
|
681
|
+
- large
|
|
682
|
+
*/
|
|
683
|
+
|
|
684
|
+
.topcoat-button--large,
|
|
685
|
+
.topcoat-button--large--quiet {
|
|
686
|
+
font-size: 1.3rem;
|
|
687
|
+
font-weight: 400;
|
|
688
|
+
line-height: 4.375rem;
|
|
689
|
+
padding: 0 1.25rem;
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
/* topdoc
|
|
693
|
+
name: Large Quiet Button
|
|
694
|
+
description: A large, yet quiet button
|
|
695
|
+
modifiers:
|
|
696
|
+
:active: Active state
|
|
697
|
+
:disabled: Disabled state
|
|
698
|
+
:hover: Hover state
|
|
699
|
+
:focus: Focused
|
|
700
|
+
markup:
|
|
701
|
+
<button class="topcoat-button--large--quiet" >Button</button>
|
|
702
|
+
<button class="topcoat-button--large--quiet" disabled>Button</button>
|
|
703
|
+
tags:
|
|
704
|
+
- desktop
|
|
705
|
+
- light
|
|
706
|
+
- mobile
|
|
707
|
+
- button
|
|
708
|
+
- large
|
|
709
|
+
- quiet
|
|
710
|
+
*/
|
|
711
|
+
|
|
712
|
+
.topcoat-button--large--quiet {
|
|
713
|
+
background: transparent;
|
|
714
|
+
border: 1px solid transparent;
|
|
715
|
+
box-shadow: none;
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
/* topdoc
|
|
719
|
+
name: Call To Action Button
|
|
720
|
+
description: A CALL TO ARMS, er, ACTION!
|
|
721
|
+
modifiers:
|
|
722
|
+
:active: Active state
|
|
723
|
+
:disabled: Disabled state
|
|
724
|
+
:hover: Hover state
|
|
725
|
+
:focus: Focused
|
|
726
|
+
markup:
|
|
727
|
+
<button class="topcoat-button--cta" >Button</button>
|
|
728
|
+
<button class="topcoat-button--cta" disabled>Button</button>
|
|
729
|
+
tags:
|
|
730
|
+
- desktop
|
|
731
|
+
- light
|
|
732
|
+
- mobile
|
|
733
|
+
- button
|
|
734
|
+
- call to action
|
|
735
|
+
*/
|
|
736
|
+
|
|
737
|
+
.topcoat-button--cta,
|
|
738
|
+
.topcoat-button--large--cta {
|
|
739
|
+
border: 1px solid #143250;
|
|
740
|
+
background-color: #288edf;
|
|
741
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
|
742
|
+
color: #fff;
|
|
743
|
+
font-weight: 500;
|
|
744
|
+
text-shadow: 0 -1px rgba(0,0,0,0.36);
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
.topcoat-button--cta:hover,
|
|
748
|
+
.topcoat-button--large--cta:hover {
|
|
749
|
+
background-color: #509bef;
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
.topcoat-button--cta:active,
|
|
753
|
+
.topcoat-button--large--cta:active {
|
|
754
|
+
background-color: #0380e8;
|
|
755
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
/* topdoc
|
|
759
|
+
name: Large Call To Action Button
|
|
760
|
+
description: Like call to action, but bigger
|
|
761
|
+
modifiers:
|
|
762
|
+
:active: Active state
|
|
763
|
+
:disabled: Disabled state
|
|
764
|
+
:hover: Hover state
|
|
765
|
+
:focus: Focused
|
|
766
|
+
markup:
|
|
767
|
+
<button class="topcoat-button--large--cta" >Button</button>
|
|
768
|
+
<button class="topcoat-button--large--cta" disabled>Button</button>
|
|
769
|
+
tags:
|
|
770
|
+
- desktop
|
|
771
|
+
- light
|
|
772
|
+
- mobile
|
|
773
|
+
- button
|
|
774
|
+
- large
|
|
775
|
+
- call to action
|
|
776
|
+
*/
|
|
777
|
+
|
|
778
|
+
.topcoat-button--large--cta {
|
|
779
|
+
font-size: 1.3rem;
|
|
780
|
+
font-weight: 400;
|
|
781
|
+
line-height: 4.375rem;
|
|
782
|
+
padding: 0 1.25rem;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
/**
|
|
786
|
+
*
|
|
787
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
788
|
+
*
|
|
789
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
790
|
+
* you may not use this file except in compliance with the License.
|
|
791
|
+
* You may obtain a copy of the License at
|
|
792
|
+
*
|
|
793
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
794
|
+
*
|
|
795
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
796
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
797
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
798
|
+
* See the License for the specific language governing permissions and
|
|
799
|
+
* limitations under the License.
|
|
800
|
+
*
|
|
801
|
+
*/
|
|
802
|
+
|
|
803
|
+
input[type="checkbox"] {
|
|
804
|
+
position: absolute;
|
|
805
|
+
overflow: hidden;
|
|
806
|
+
padding: 0;
|
|
807
|
+
border: 0;
|
|
808
|
+
opacity: 0.001;
|
|
809
|
+
z-index: 1;
|
|
810
|
+
vertical-align: top;
|
|
811
|
+
outline: none;
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
.checkbox {
|
|
815
|
+
-moz-box-sizing: border-box;
|
|
816
|
+
box-sizing: border-box;
|
|
817
|
+
background-clip: padding-box;
|
|
818
|
+
position: relative;
|
|
819
|
+
display: inline-block;
|
|
820
|
+
vertical-align: top;
|
|
821
|
+
cursor: default;
|
|
822
|
+
-webkit-user-select: none;
|
|
823
|
+
-moz-user-select: none;
|
|
824
|
+
-ms-user-select: none;
|
|
825
|
+
user-select: none;
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
.checkbox__label {
|
|
829
|
+
position: relative;
|
|
830
|
+
display: inline-block;
|
|
831
|
+
vertical-align: top;
|
|
832
|
+
cursor: default;
|
|
833
|
+
-webkit-user-select: none;
|
|
834
|
+
-moz-user-select: none;
|
|
835
|
+
-ms-user-select: none;
|
|
836
|
+
user-select: none;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.checkbox--disabled {
|
|
840
|
+
opacity: 0.3;
|
|
841
|
+
cursor: default;
|
|
842
|
+
pointer-events: none;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.checkbox:before,
|
|
846
|
+
.checkbox:after {
|
|
847
|
+
content: '';
|
|
848
|
+
position: absolute;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
.checkbox:before {
|
|
852
|
+
-moz-box-sizing: border-box;
|
|
853
|
+
box-sizing: border-box;
|
|
854
|
+
background-clip: padding-box;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
/**
|
|
858
|
+
*
|
|
859
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
860
|
+
*
|
|
861
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
862
|
+
* you may not use this file except in compliance with the License.
|
|
863
|
+
* You may obtain a copy of the License at
|
|
864
|
+
*
|
|
865
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
866
|
+
*
|
|
867
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
868
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
869
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
870
|
+
* See the License for the specific language governing permissions and
|
|
871
|
+
* limitations under the License.
|
|
872
|
+
*
|
|
873
|
+
*/
|
|
874
|
+
|
|
875
|
+
/**
|
|
876
|
+
*
|
|
877
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
878
|
+
*
|
|
879
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
880
|
+
* you may not use this file except in compliance with the License.
|
|
881
|
+
* You may obtain a copy of the License at
|
|
882
|
+
*
|
|
883
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
884
|
+
*
|
|
885
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
886
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
887
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
888
|
+
* See the License for the specific language governing permissions and
|
|
889
|
+
* limitations under the License.
|
|
890
|
+
*
|
|
891
|
+
*/
|
|
892
|
+
|
|
893
|
+
/**
|
|
894
|
+
*
|
|
895
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
896
|
+
*
|
|
897
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
898
|
+
* you may not use this file except in compliance with the License.
|
|
899
|
+
* You may obtain a copy of the License at
|
|
900
|
+
*
|
|
901
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
902
|
+
*
|
|
903
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
904
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
905
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
906
|
+
* See the License for the specific language governing permissions and
|
|
907
|
+
* limitations under the License.
|
|
908
|
+
*
|
|
909
|
+
*/
|
|
910
|
+
|
|
911
|
+
input[type="checkbox"] {
|
|
912
|
+
position: absolute;
|
|
913
|
+
overflow: hidden;
|
|
914
|
+
padding: 0;
|
|
915
|
+
border: 0;
|
|
916
|
+
opacity: 0.001;
|
|
917
|
+
z-index: 1;
|
|
918
|
+
vertical-align: top;
|
|
919
|
+
outline: none;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
.checkbox,
|
|
923
|
+
.topcoat-checkbox__checkmark {
|
|
924
|
+
-moz-box-sizing: border-box;
|
|
925
|
+
box-sizing: border-box;
|
|
926
|
+
background-clip: padding-box;
|
|
927
|
+
position: relative;
|
|
928
|
+
display: inline-block;
|
|
929
|
+
vertical-align: top;
|
|
930
|
+
cursor: default;
|
|
931
|
+
-webkit-user-select: none;
|
|
932
|
+
-moz-user-select: none;
|
|
933
|
+
-ms-user-select: none;
|
|
934
|
+
user-select: none;
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
.checkbox__label,
|
|
938
|
+
.topcoat-checkbox {
|
|
939
|
+
position: relative;
|
|
940
|
+
display: inline-block;
|
|
941
|
+
vertical-align: top;
|
|
942
|
+
cursor: default;
|
|
943
|
+
-webkit-user-select: none;
|
|
944
|
+
-moz-user-select: none;
|
|
945
|
+
-ms-user-select: none;
|
|
946
|
+
user-select: none;
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
.checkbox--disabled,
|
|
950
|
+
input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {
|
|
951
|
+
opacity: 0.3;
|
|
952
|
+
cursor: default;
|
|
953
|
+
pointer-events: none;
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.checkbox:before,
|
|
957
|
+
.checkbox:after,
|
|
958
|
+
.topcoat-checkbox__checkmark:before,
|
|
959
|
+
.topcoat-checkbox__checkmark:after {
|
|
960
|
+
content: '';
|
|
961
|
+
position: absolute;
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
.checkbox:before,
|
|
965
|
+
.topcoat-checkbox__checkmark:before {
|
|
966
|
+
-moz-box-sizing: border-box;
|
|
967
|
+
box-sizing: border-box;
|
|
968
|
+
background-clip: padding-box;
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
/* topdoc
|
|
972
|
+
name: Checkbox
|
|
973
|
+
description: Default skin for Topcoat checkbox
|
|
974
|
+
modifiers:
|
|
975
|
+
:focus: Focus state
|
|
976
|
+
:disabled: Disabled state
|
|
977
|
+
markup:
|
|
978
|
+
<label class="topcoat-checkbox">
|
|
979
|
+
<input type="checkbox">
|
|
980
|
+
<div class="topcoat-checkbox__checkmark"></div>
|
|
981
|
+
Default
|
|
982
|
+
</label>
|
|
983
|
+
<br>
|
|
984
|
+
<br>
|
|
985
|
+
<label class="topcoat-checkbox">
|
|
986
|
+
<input type="checkbox" disabled>
|
|
987
|
+
<div class="topcoat-checkbox__checkmark"></div>
|
|
988
|
+
Disabled
|
|
989
|
+
</label>
|
|
990
|
+
examples:
|
|
991
|
+
mobile checkbox: http://codepen.io/Topcoat/pen/piHcs
|
|
992
|
+
tags:
|
|
993
|
+
- desktop
|
|
994
|
+
- light
|
|
995
|
+
- mobile
|
|
996
|
+
- checkbox
|
|
997
|
+
*/
|
|
998
|
+
|
|
999
|
+
.topcoat-checkbox__checkmark {
|
|
1000
|
+
height: 2rem;
|
|
1001
|
+
}
|
|
1002
|
+
|
|
1003
|
+
input[type="checkbox"] {
|
|
1004
|
+
height: 2rem;
|
|
1005
|
+
width: 2rem;
|
|
1006
|
+
margin-top: 0;
|
|
1007
|
+
margin-right: -2rem;
|
|
1008
|
+
margin-bottom: -2rem;
|
|
1009
|
+
margin-left: 0;
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
|
|
1013
|
+
opacity: 1;
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
.topcoat-checkbox {
|
|
1017
|
+
line-height: 2rem;
|
|
1018
|
+
}
|
|
1019
|
+
|
|
1020
|
+
.topcoat-checkbox__checkmark:before {
|
|
1021
|
+
width: 2rem;
|
|
1022
|
+
height: 2rem;
|
|
1023
|
+
background: #e5e9e8;
|
|
1024
|
+
border: 1px solid #a5a8a8;
|
|
1025
|
+
border-radius: 3px;
|
|
1026
|
+
box-shadow: inset 0 1px #fff;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
.topcoat-checkbox__checkmark {
|
|
1030
|
+
width: 2rem;
|
|
1031
|
+
height: 2rem;
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
.topcoat-checkbox__checkmark:after {
|
|
1035
|
+
top: 1px;
|
|
1036
|
+
left: 2px;
|
|
1037
|
+
opacity: 0;
|
|
1038
|
+
width: 28px;
|
|
1039
|
+
height: 11px;
|
|
1040
|
+
background: transparent;
|
|
1041
|
+
border: 7px solid #666;
|
|
1042
|
+
border-width: 7px;
|
|
1043
|
+
border-top: none;
|
|
1044
|
+
border-right: none;
|
|
1045
|
+
border-radius: 2px;
|
|
1046
|
+
-webkit-transform: rotate(-50deg);
|
|
1047
|
+
-ms-transform: rotate(-50deg);
|
|
1048
|
+
transform: rotate(-50deg);
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
|
1052
|
+
border: 1px solid #0940fd;
|
|
1053
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
/**
|
|
1057
|
+
*
|
|
1058
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1059
|
+
*
|
|
1060
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1061
|
+
* you may not use this file except in compliance with the License.
|
|
1062
|
+
* You may obtain a copy of the License at
|
|
1063
|
+
*
|
|
1064
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1065
|
+
*
|
|
1066
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1067
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1068
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1069
|
+
* See the License for the specific language governing permissions and
|
|
1070
|
+
* limitations under the License.
|
|
1071
|
+
*
|
|
1072
|
+
*/
|
|
1073
|
+
|
|
1074
|
+
/**
|
|
1075
|
+
*
|
|
1076
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1077
|
+
*
|
|
1078
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1079
|
+
* you may not use this file except in compliance with the License.
|
|
1080
|
+
* You may obtain a copy of the License at
|
|
1081
|
+
*
|
|
1082
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1083
|
+
*
|
|
1084
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1085
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1086
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1087
|
+
* See the License for the specific language governing permissions and
|
|
1088
|
+
* limitations under the License.
|
|
1089
|
+
*
|
|
1090
|
+
*/
|
|
1091
|
+
|
|
1092
|
+
.button,
|
|
1093
|
+
.topcoat-icon-button,
|
|
1094
|
+
.topcoat-icon-button--quiet,
|
|
1095
|
+
.topcoat-icon-button--large,
|
|
1096
|
+
.topcoat-icon-button--large--quiet {
|
|
1097
|
+
position: relative;
|
|
1098
|
+
display: inline-block;
|
|
1099
|
+
vertical-align: top;
|
|
1100
|
+
-moz-box-sizing: border-box;
|
|
1101
|
+
box-sizing: border-box;
|
|
1102
|
+
background-clip: padding-box;
|
|
1103
|
+
padding: 0;
|
|
1104
|
+
margin: 0;
|
|
1105
|
+
font: inherit;
|
|
1106
|
+
color: inherit;
|
|
1107
|
+
background: transparent;
|
|
1108
|
+
border: none;
|
|
1109
|
+
cursor: default;
|
|
1110
|
+
-webkit-user-select: none;
|
|
1111
|
+
-moz-user-select: none;
|
|
1112
|
+
-ms-user-select: none;
|
|
1113
|
+
user-select: none;
|
|
1114
|
+
text-overflow: ellipsis;
|
|
1115
|
+
white-space: nowrap;
|
|
1116
|
+
overflow: hidden;
|
|
1117
|
+
text-decoration: none;
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
.button--quiet {
|
|
1121
|
+
background: transparent;
|
|
1122
|
+
border: 1px solid transparent;
|
|
1123
|
+
box-shadow: none;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
.button--disabled,
|
|
1127
|
+
.topcoat-icon-button:disabled,
|
|
1128
|
+
.topcoat-icon-button--quiet:disabled,
|
|
1129
|
+
.topcoat-icon-button--large:disabled,
|
|
1130
|
+
.topcoat-icon-button--large--quiet:disabled {
|
|
1131
|
+
opacity: 0.3;
|
|
1132
|
+
cursor: default;
|
|
1133
|
+
pointer-events: none;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
/* topdoc
|
|
1137
|
+
name: Icon Button
|
|
1138
|
+
description: Like button, but it has an icon.
|
|
1139
|
+
modifiers:
|
|
1140
|
+
:active: Active state
|
|
1141
|
+
:disabled: Disabled state
|
|
1142
|
+
:hover: Hover state
|
|
1143
|
+
:focus: Focused
|
|
1144
|
+
markup:
|
|
1145
|
+
<button class="topcoat-icon-button">
|
|
1146
|
+
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
|
|
1147
|
+
</button>
|
|
1148
|
+
<button class="topcoat-icon-button" disabled>
|
|
1149
|
+
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
|
|
1150
|
+
</button>
|
|
1151
|
+
tags:
|
|
1152
|
+
- desktop
|
|
1153
|
+
- light
|
|
1154
|
+
- mobile
|
|
1155
|
+
- button
|
|
1156
|
+
- icon
|
|
1157
|
+
*/
|
|
1158
|
+
|
|
1159
|
+
.topcoat-icon-button,
|
|
1160
|
+
.topcoat-icon-button--quiet,
|
|
1161
|
+
.topcoat-icon-button--large,
|
|
1162
|
+
.topcoat-icon-button--large--quiet {
|
|
1163
|
+
padding: 0 0.75rem;
|
|
1164
|
+
line-height: 3rem;
|
|
1165
|
+
letter-spacing: 1px;
|
|
1166
|
+
color: #454545;
|
|
1167
|
+
text-shadow: 0 1px #fff;
|
|
1168
|
+
vertical-align: baseline;
|
|
1169
|
+
background-color: #e5e9e8;
|
|
1170
|
+
box-shadow: inset 0 1px #fff;
|
|
1171
|
+
border: 1px solid #a5a8a8;
|
|
1172
|
+
border-radius: 6px;
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
.topcoat-icon-button:hover,
|
|
1176
|
+
.topcoat-icon-button--quiet:hover,
|
|
1177
|
+
.topcoat-icon-button--large:hover,
|
|
1178
|
+
.topcoat-icon-button--large--quiet:hover {
|
|
1179
|
+
background-color: #edf1f1;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
.topcoat-icon-button:active {
|
|
1183
|
+
background-color: #d3d7d7;
|
|
1184
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.topcoat-icon-button:focus,
|
|
1188
|
+
.topcoat-icon-button--quiet:focus,
|
|
1189
|
+
.topcoat-icon-button--quiet:hover:focus,
|
|
1190
|
+
.topcoat-icon-button--large:focus,
|
|
1191
|
+
.topcoat-icon-button--large--quiet:focus,
|
|
1192
|
+
.topcoat-icon-button--large--quiet:hover:focus {
|
|
1193
|
+
border: 1px solid #0940fd;
|
|
1194
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
1195
|
+
outline: 0;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
/* topdoc
|
|
1199
|
+
name: Quiet Icon Button
|
|
1200
|
+
description: Like quiet button, but it has an icon.
|
|
1201
|
+
modifiers:
|
|
1202
|
+
:active: Active state
|
|
1203
|
+
:disabled: Disabled state
|
|
1204
|
+
:hover: Hover state
|
|
1205
|
+
:focus: Focused
|
|
1206
|
+
markup:
|
|
1207
|
+
<button class="topcoat-icon-button--quiet">
|
|
1208
|
+
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
|
|
1209
|
+
</button>
|
|
1210
|
+
<button class="topcoat-icon-button--quiet" disabled>
|
|
1211
|
+
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
|
|
1212
|
+
</button>
|
|
1213
|
+
tags:
|
|
1214
|
+
- desktop
|
|
1215
|
+
- light
|
|
1216
|
+
- mobile
|
|
1217
|
+
- button
|
|
1218
|
+
- icon
|
|
1219
|
+
- quiet
|
|
1220
|
+
*/
|
|
1221
|
+
|
|
1222
|
+
.topcoat-icon-button--quiet {
|
|
1223
|
+
background: transparent;
|
|
1224
|
+
border: 1px solid transparent;
|
|
1225
|
+
box-shadow: none;
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
.topcoat-icon-button--quiet:hover,
|
|
1229
|
+
.topcoat-icon-button--large--quiet:hover {
|
|
1230
|
+
text-shadow: 0 1px #fff;
|
|
1231
|
+
border: 1px solid #a5a8a8;
|
|
1232
|
+
box-shadow: inset 0 1px #fff;
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
.topcoat-icon-button--quiet:active,
|
|
1236
|
+
.topcoat-icon-button--large--quiet:active {
|
|
1237
|
+
color: #454545;
|
|
1238
|
+
text-shadow: 0 1px #fff;
|
|
1239
|
+
background-color: #d3d7d7;
|
|
1240
|
+
border: 1px solid #a5a8a8;
|
|
1241
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
/* topdoc
|
|
1245
|
+
name: Large Icon Button
|
|
1246
|
+
description: Like large button, but it has an icon.
|
|
1247
|
+
modifiers:
|
|
1248
|
+
:active: Active state
|
|
1249
|
+
:disabled: Disabled state
|
|
1250
|
+
:hover: Hover state
|
|
1251
|
+
:focus: Focused
|
|
1252
|
+
markup:
|
|
1253
|
+
<button class="topcoat-icon-button--large">
|
|
1254
|
+
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
|
|
1255
|
+
</button>
|
|
1256
|
+
<button class="topcoat-icon-button--large" disabled>
|
|
1257
|
+
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
|
|
1258
|
+
</button>
|
|
1259
|
+
tags:
|
|
1260
|
+
- desktop
|
|
1261
|
+
- light
|
|
1262
|
+
- mobile
|
|
1263
|
+
- button
|
|
1264
|
+
- icon
|
|
1265
|
+
- large
|
|
1266
|
+
*/
|
|
1267
|
+
|
|
1268
|
+
.topcoat-icon-button--large,
|
|
1269
|
+
.topcoat-icon-button--large--quiet {
|
|
1270
|
+
width: 4.375rem;
|
|
1271
|
+
height: 4.375rem;
|
|
1272
|
+
line-height: 4.375rem;
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
.topcoat-icon-button--large:active {
|
|
1276
|
+
background-color: #d3d7d7;
|
|
1277
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
1278
|
+
}
|
|
1279
|
+
|
|
1280
|
+
/* topdoc
|
|
1281
|
+
name: Large Quiet Icon Button
|
|
1282
|
+
description: Like large button, but it has an icon and this one is quiet.
|
|
1283
|
+
modifiers:
|
|
1284
|
+
:active: Active state
|
|
1285
|
+
:disabled: Disabled state
|
|
1286
|
+
:hover: Hover state
|
|
1287
|
+
markup:
|
|
1288
|
+
<button class="topcoat-icon-button--large--quiet">
|
|
1289
|
+
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
|
|
1290
|
+
</button>
|
|
1291
|
+
<button class="topcoat-icon-button--large--quiet" disabled>
|
|
1292
|
+
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
|
|
1293
|
+
</button>
|
|
1294
|
+
tags:
|
|
1295
|
+
- desktop
|
|
1296
|
+
- light
|
|
1297
|
+
- mobile
|
|
1298
|
+
- button
|
|
1299
|
+
- icon
|
|
1300
|
+
- large
|
|
1301
|
+
- quiet
|
|
1302
|
+
*/
|
|
1303
|
+
|
|
1304
|
+
.topcoat-icon-button--large--quiet {
|
|
1305
|
+
background: transparent;
|
|
1306
|
+
border: 1px solid transparent;
|
|
1307
|
+
box-shadow: none;
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
.topcoat-icon,
|
|
1311
|
+
.topcoat-icon--large {
|
|
1312
|
+
position: relative;
|
|
1313
|
+
display: inline-block;
|
|
1314
|
+
vertical-align: top;
|
|
1315
|
+
overflow: hidden;
|
|
1316
|
+
width: 1.62rem;
|
|
1317
|
+
height: 1.62rem;
|
|
1318
|
+
vertical-align: middle;
|
|
1319
|
+
top: -1px;
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
.topcoat-icon--large {
|
|
1323
|
+
width: 2.499999998125rem;
|
|
1324
|
+
height: 2.499999998125rem;
|
|
1325
|
+
top: -2px;
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
/**
|
|
1329
|
+
*
|
|
1330
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1331
|
+
*
|
|
1332
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1333
|
+
* you may not use this file except in compliance with the License.
|
|
1334
|
+
* You may obtain a copy of the License at
|
|
1335
|
+
*
|
|
1336
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1337
|
+
*
|
|
1338
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1339
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1340
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1341
|
+
* See the License for the specific language governing permissions and
|
|
1342
|
+
* limitations under the License.
|
|
1343
|
+
*
|
|
1344
|
+
*/
|
|
1345
|
+
|
|
1346
|
+
/**
|
|
1347
|
+
*
|
|
1348
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1349
|
+
*
|
|
1350
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1351
|
+
* you may not use this file except in compliance with the License.
|
|
1352
|
+
* You may obtain a copy of the License at
|
|
1353
|
+
*
|
|
1354
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1355
|
+
*
|
|
1356
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1357
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1358
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1359
|
+
* See the License for the specific language governing permissions and
|
|
1360
|
+
* limitations under the License.
|
|
1361
|
+
*
|
|
1362
|
+
*/
|
|
1363
|
+
|
|
1364
|
+
.input {
|
|
1365
|
+
padding: 0;
|
|
1366
|
+
margin: 0;
|
|
1367
|
+
font: inherit;
|
|
1368
|
+
color: inherit;
|
|
1369
|
+
background: transparent;
|
|
1370
|
+
border: none;
|
|
1371
|
+
-moz-box-sizing: border-box;
|
|
1372
|
+
box-sizing: border-box;
|
|
1373
|
+
background-clip: padding-box;
|
|
1374
|
+
vertical-align: top;
|
|
1375
|
+
outline: none;
|
|
1376
|
+
}
|
|
1377
|
+
|
|
1378
|
+
.input:disabled {
|
|
1379
|
+
opacity: 0.3;
|
|
1380
|
+
cursor: default;
|
|
1381
|
+
pointer-events: none;
|
|
1382
|
+
}
|
|
1383
|
+
|
|
1384
|
+
/**
|
|
1385
|
+
*
|
|
1386
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1387
|
+
*
|
|
1388
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1389
|
+
* you may not use this file except in compliance with the License.
|
|
1390
|
+
* You may obtain a copy of the License at
|
|
1391
|
+
*
|
|
1392
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1393
|
+
*
|
|
1394
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1395
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1396
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1397
|
+
* See the License for the specific language governing permissions and
|
|
1398
|
+
* limitations under the License.
|
|
1399
|
+
*
|
|
1400
|
+
*/
|
|
1401
|
+
|
|
1402
|
+
/**
|
|
1403
|
+
*
|
|
1404
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1405
|
+
*
|
|
1406
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1407
|
+
* you may not use this file except in compliance with the License.
|
|
1408
|
+
* You may obtain a copy of the License at
|
|
1409
|
+
*
|
|
1410
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1411
|
+
*
|
|
1412
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1413
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1414
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1415
|
+
* See the License for the specific language governing permissions and
|
|
1416
|
+
* limitations under the License.
|
|
1417
|
+
*
|
|
1418
|
+
*/
|
|
1419
|
+
|
|
1420
|
+
.list {
|
|
1421
|
+
padding: 0;
|
|
1422
|
+
margin: 0;
|
|
1423
|
+
font: inherit;
|
|
1424
|
+
color: inherit;
|
|
1425
|
+
background: transparent;
|
|
1426
|
+
border: none;
|
|
1427
|
+
cursor: default;
|
|
1428
|
+
-webkit-user-select: none;
|
|
1429
|
+
-moz-user-select: none;
|
|
1430
|
+
-ms-user-select: none;
|
|
1431
|
+
user-select: none;
|
|
1432
|
+
overflow: auto;
|
|
1433
|
+
-webkit-overflow-scrolling: touch;
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
.list__header {
|
|
1437
|
+
margin: 0;
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
.list__container {
|
|
1441
|
+
padding: 0;
|
|
1442
|
+
margin: 0;
|
|
1443
|
+
list-style-type: none;
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1446
|
+
.list__item {
|
|
1447
|
+
margin: 0;
|
|
1448
|
+
padding: 0;
|
|
1449
|
+
}
|
|
1450
|
+
|
|
1451
|
+
/**
|
|
1452
|
+
*
|
|
1453
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1454
|
+
*
|
|
1455
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1456
|
+
* you may not use this file except in compliance with the License.
|
|
1457
|
+
* You may obtain a copy of the License at
|
|
1458
|
+
*
|
|
1459
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1460
|
+
*
|
|
1461
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1462
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1463
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1464
|
+
* See the License for the specific language governing permissions and
|
|
1465
|
+
* limitations under the License.
|
|
1466
|
+
*
|
|
1467
|
+
*/
|
|
1468
|
+
|
|
1469
|
+
/**
|
|
1470
|
+
*
|
|
1471
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1472
|
+
*
|
|
1473
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1474
|
+
* you may not use this file except in compliance with the License.
|
|
1475
|
+
* You may obtain a copy of the License at
|
|
1476
|
+
*
|
|
1477
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1478
|
+
*
|
|
1479
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1480
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1481
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1482
|
+
* See the License for the specific language governing permissions and
|
|
1483
|
+
* limitations under the License.
|
|
1484
|
+
*
|
|
1485
|
+
*/
|
|
1486
|
+
|
|
1487
|
+
.list,
|
|
1488
|
+
.topcoat-list {
|
|
1489
|
+
padding: 0;
|
|
1490
|
+
margin: 0;
|
|
1491
|
+
font: inherit;
|
|
1492
|
+
color: inherit;
|
|
1493
|
+
background: transparent;
|
|
1494
|
+
border: none;
|
|
1495
|
+
cursor: default;
|
|
1496
|
+
-webkit-user-select: none;
|
|
1497
|
+
-moz-user-select: none;
|
|
1498
|
+
-ms-user-select: none;
|
|
1499
|
+
user-select: none;
|
|
1500
|
+
overflow: auto;
|
|
1501
|
+
-webkit-overflow-scrolling: touch;
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
.list__header,
|
|
1505
|
+
.topcoat-list__header {
|
|
1506
|
+
margin: 0;
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
.list__container,
|
|
1510
|
+
.topcoat-list__container {
|
|
1511
|
+
padding: 0;
|
|
1512
|
+
margin: 0;
|
|
1513
|
+
list-style-type: none;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
.list__item,
|
|
1517
|
+
.topcoat-list__item {
|
|
1518
|
+
margin: 0;
|
|
1519
|
+
padding: 0;
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
/* topdoc
|
|
1523
|
+
name: List
|
|
1524
|
+
description: Topcoat default list skin
|
|
1525
|
+
markup:
|
|
1526
|
+
<div class="topcoat-list">
|
|
1527
|
+
<h3 class="topcoat-list__header">Category</h3>
|
|
1528
|
+
<ul class="topcoat-list__container">
|
|
1529
|
+
<li class="topcoat-list__item">
|
|
1530
|
+
Item
|
|
1531
|
+
</li>
|
|
1532
|
+
<li class="topcoat-list__item">
|
|
1533
|
+
Item
|
|
1534
|
+
</li>
|
|
1535
|
+
<li class="topcoat-list__item">
|
|
1536
|
+
Item
|
|
1537
|
+
</li>
|
|
1538
|
+
</ul>
|
|
1539
|
+
</div>
|
|
1540
|
+
tags:
|
|
1541
|
+
- mobile
|
|
1542
|
+
- list
|
|
1543
|
+
*/
|
|
1544
|
+
|
|
1545
|
+
.topcoat-list {
|
|
1546
|
+
border-top: 1px solid #bcbfbf;
|
|
1547
|
+
border-bottom: 1px solid #eff1f1;
|
|
1548
|
+
background-color: #dfe2e2;
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
.topcoat-list__header {
|
|
1552
|
+
padding: 4px 20px;
|
|
1553
|
+
font-size: 0.9em;
|
|
1554
|
+
font-weight: 400;
|
|
1555
|
+
background-color: #cccfcf;
|
|
1556
|
+
color: #656565;
|
|
1557
|
+
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
|
1558
|
+
border-top: 1px solid rgba(255,255,255,0.5);
|
|
1559
|
+
border-bottom: 1px solid rgba(255,255,255,0.23);
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1562
|
+
.topcoat-list__container {
|
|
1563
|
+
border-top: 1px solid #bcbfbf;
|
|
1564
|
+
color: #454545;
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
.topcoat-list__item {
|
|
1568
|
+
padding: 1.25rem;
|
|
1569
|
+
border-top: 1px solid #eff1f1;
|
|
1570
|
+
border-bottom: 1px solid #bcbfbf;
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
.topcoat-list__item:first-child {
|
|
1574
|
+
border-top: 1px solid rgba(0,0,0,0.05);
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
/**
|
|
1578
|
+
*
|
|
1579
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1580
|
+
*
|
|
1581
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1582
|
+
* you may not use this file except in compliance with the License.
|
|
1583
|
+
* You may obtain a copy of the License at
|
|
1584
|
+
*
|
|
1585
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1586
|
+
*
|
|
1587
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1588
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1589
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1590
|
+
* See the License for the specific language governing permissions and
|
|
1591
|
+
* limitations under the License.
|
|
1592
|
+
*
|
|
1593
|
+
*/
|
|
1594
|
+
|
|
1595
|
+
/**
|
|
1596
|
+
*
|
|
1597
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1598
|
+
*
|
|
1599
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1600
|
+
* you may not use this file except in compliance with the License.
|
|
1601
|
+
* You may obtain a copy of the License at
|
|
1602
|
+
*
|
|
1603
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1604
|
+
*
|
|
1605
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1606
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1607
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1608
|
+
* See the License for the specific language governing permissions and
|
|
1609
|
+
* limitations under the License.
|
|
1610
|
+
*
|
|
1611
|
+
*/
|
|
1612
|
+
|
|
1613
|
+
/**
|
|
1614
|
+
*
|
|
1615
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1616
|
+
*
|
|
1617
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1618
|
+
* you may not use this file except in compliance with the License.
|
|
1619
|
+
* You may obtain a copy of the License at
|
|
1620
|
+
*
|
|
1621
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1622
|
+
*
|
|
1623
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1624
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1625
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1626
|
+
* See the License for the specific language governing permissions and
|
|
1627
|
+
* limitations under the License.
|
|
1628
|
+
*
|
|
1629
|
+
*/
|
|
1630
|
+
|
|
1631
|
+
.navigation-bar {
|
|
1632
|
+
-moz-box-sizing: border-box;
|
|
1633
|
+
box-sizing: border-box;
|
|
1634
|
+
background-clip: padding-box;
|
|
1635
|
+
white-space: nowrap;
|
|
1636
|
+
overflow: hidden;
|
|
1637
|
+
word-spacing: 0;
|
|
1638
|
+
padding: 0;
|
|
1639
|
+
margin: 0;
|
|
1640
|
+
font: inherit;
|
|
1641
|
+
color: inherit;
|
|
1642
|
+
background: transparent;
|
|
1643
|
+
border: none;
|
|
1644
|
+
cursor: default;
|
|
1645
|
+
-webkit-user-select: none;
|
|
1646
|
+
-moz-user-select: none;
|
|
1647
|
+
-ms-user-select: none;
|
|
1648
|
+
user-select: none;
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1651
|
+
.navigation-bar__item {
|
|
1652
|
+
-moz-box-sizing: border-box;
|
|
1653
|
+
box-sizing: border-box;
|
|
1654
|
+
background-clip: padding-box;
|
|
1655
|
+
position: relative;
|
|
1656
|
+
display: inline-block;
|
|
1657
|
+
vertical-align: top;
|
|
1658
|
+
padding: 0;
|
|
1659
|
+
margin: 0;
|
|
1660
|
+
font: inherit;
|
|
1661
|
+
color: inherit;
|
|
1662
|
+
background: transparent;
|
|
1663
|
+
border: none;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
.navigation-bar__title {
|
|
1667
|
+
padding: 0;
|
|
1668
|
+
margin: 0;
|
|
1669
|
+
font: inherit;
|
|
1670
|
+
color: inherit;
|
|
1671
|
+
background: transparent;
|
|
1672
|
+
border: none;
|
|
1673
|
+
text-overflow: ellipsis;
|
|
1674
|
+
white-space: nowrap;
|
|
1675
|
+
overflow: hidden;
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
/**
|
|
1679
|
+
*
|
|
1680
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1681
|
+
*
|
|
1682
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1683
|
+
* you may not use this file except in compliance with the License.
|
|
1684
|
+
* You may obtain a copy of the License at
|
|
1685
|
+
*
|
|
1686
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1687
|
+
*
|
|
1688
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1689
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1690
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1691
|
+
* See the License for the specific language governing permissions and
|
|
1692
|
+
* limitations under the License.
|
|
1693
|
+
*
|
|
1694
|
+
*/
|
|
1695
|
+
|
|
1696
|
+
/**
|
|
1697
|
+
*
|
|
1698
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1699
|
+
*
|
|
1700
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1701
|
+
* you may not use this file except in compliance with the License.
|
|
1702
|
+
* You may obtain a copy of the License at
|
|
1703
|
+
*
|
|
1704
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1705
|
+
*
|
|
1706
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1707
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1708
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1709
|
+
* See the License for the specific language governing permissions and
|
|
1710
|
+
* limitations under the License.
|
|
1711
|
+
*
|
|
1712
|
+
*/
|
|
1713
|
+
|
|
1714
|
+
.navigation-bar,
|
|
1715
|
+
.topcoat-navigation-bar {
|
|
1716
|
+
-moz-box-sizing: border-box;
|
|
1717
|
+
box-sizing: border-box;
|
|
1718
|
+
background-clip: padding-box;
|
|
1719
|
+
white-space: nowrap;
|
|
1720
|
+
overflow: hidden;
|
|
1721
|
+
word-spacing: 0;
|
|
1722
|
+
padding: 0;
|
|
1723
|
+
margin: 0;
|
|
1724
|
+
font: inherit;
|
|
1725
|
+
color: inherit;
|
|
1726
|
+
background: transparent;
|
|
1727
|
+
border: none;
|
|
1728
|
+
cursor: default;
|
|
1729
|
+
-webkit-user-select: none;
|
|
1730
|
+
-moz-user-select: none;
|
|
1731
|
+
-ms-user-select: none;
|
|
1732
|
+
user-select: none;
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
.navigation-bar__item,
|
|
1736
|
+
.topcoat-navigation-bar__item {
|
|
1737
|
+
-moz-box-sizing: border-box;
|
|
1738
|
+
box-sizing: border-box;
|
|
1739
|
+
background-clip: padding-box;
|
|
1740
|
+
position: relative;
|
|
1741
|
+
display: inline-block;
|
|
1742
|
+
vertical-align: top;
|
|
1743
|
+
padding: 0;
|
|
1744
|
+
margin: 0;
|
|
1745
|
+
font: inherit;
|
|
1746
|
+
color: inherit;
|
|
1747
|
+
background: transparent;
|
|
1748
|
+
border: none;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
.navigation-bar__title,
|
|
1752
|
+
.topcoat-navigation-bar__title {
|
|
1753
|
+
padding: 0;
|
|
1754
|
+
margin: 0;
|
|
1755
|
+
font: inherit;
|
|
1756
|
+
color: inherit;
|
|
1757
|
+
background: transparent;
|
|
1758
|
+
border: none;
|
|
1759
|
+
text-overflow: ellipsis;
|
|
1760
|
+
white-space: nowrap;
|
|
1761
|
+
overflow: hidden;
|
|
1762
|
+
}
|
|
1763
|
+
|
|
1764
|
+
/* topdoc
|
|
1765
|
+
name: Navigation Bar
|
|
1766
|
+
description: A place where navigation goes to drink
|
|
1767
|
+
markup:
|
|
1768
|
+
<div class="topcoat-navigation-bar">
|
|
1769
|
+
<div class="topcoat-navigation-bar__item center full">
|
|
1770
|
+
<h1 class="topcoat-navigation-bar__title">Header</h1>
|
|
1771
|
+
</div>
|
|
1772
|
+
</div>
|
|
1773
|
+
tags:
|
|
1774
|
+
- desktop
|
|
1775
|
+
- light
|
|
1776
|
+
- mobile
|
|
1777
|
+
- navigation
|
|
1778
|
+
- bar
|
|
1779
|
+
*/
|
|
1780
|
+
|
|
1781
|
+
.topcoat-navigation-bar {
|
|
1782
|
+
height: 4.375rem;
|
|
1783
|
+
padding-left: 1rem;
|
|
1784
|
+
padding-right: 1rem;
|
|
1785
|
+
background: #e5e9e8;
|
|
1786
|
+
color: #000;
|
|
1787
|
+
box-shadow: inset 0 -1px #b9bcbc, 0 1px #d4d6d6;
|
|
1788
|
+
}
|
|
1789
|
+
|
|
1790
|
+
.topcoat-navigation-bar__item {
|
|
1791
|
+
margin: 0;
|
|
1792
|
+
line-height: 4.375rem;
|
|
1793
|
+
vertical-align: top;
|
|
1794
|
+
}
|
|
1795
|
+
|
|
1796
|
+
.topcoat-navigation-bar__title {
|
|
1797
|
+
font-size: 1.3rem;
|
|
1798
|
+
font-weight: 400;
|
|
1799
|
+
color: #000;
|
|
1800
|
+
}
|
|
1801
|
+
|
|
1802
|
+
/*
|
|
1803
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
1804
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
1805
|
+
you may not use this file except in compliance with the License.
|
|
1806
|
+
You may obtain a copy of the License at
|
|
1807
|
+
|
|
1808
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
1809
|
+
|
|
1810
|
+
Unless required by applicable law or agreed to in writing, software
|
|
1811
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
1812
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1813
|
+
See the License for the specific language governing permissions and
|
|
1814
|
+
limitations under the License.
|
|
1815
|
+
*/
|
|
1816
|
+
|
|
1817
|
+
/**
|
|
1818
|
+
*
|
|
1819
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1820
|
+
*
|
|
1821
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1822
|
+
* you may not use this file except in compliance with the License.
|
|
1823
|
+
* You may obtain a copy of the License at
|
|
1824
|
+
*
|
|
1825
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1826
|
+
*
|
|
1827
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1828
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1829
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1830
|
+
* See the License for the specific language governing permissions and
|
|
1831
|
+
* limitations under the License.
|
|
1832
|
+
*
|
|
1833
|
+
*/
|
|
1834
|
+
|
|
1835
|
+
.notification {
|
|
1836
|
+
position: relative;
|
|
1837
|
+
display: inline-block;
|
|
1838
|
+
vertical-align: top;
|
|
1839
|
+
-moz-box-sizing: border-box;
|
|
1840
|
+
box-sizing: border-box;
|
|
1841
|
+
background-clip: padding-box;
|
|
1842
|
+
padding: 0;
|
|
1843
|
+
margin: 0;
|
|
1844
|
+
font: inherit;
|
|
1845
|
+
color: inherit;
|
|
1846
|
+
background: transparent;
|
|
1847
|
+
border: none;
|
|
1848
|
+
cursor: default;
|
|
1849
|
+
-webkit-user-select: none;
|
|
1850
|
+
-moz-user-select: none;
|
|
1851
|
+
-ms-user-select: none;
|
|
1852
|
+
user-select: none;
|
|
1853
|
+
text-overflow: ellipsis;
|
|
1854
|
+
white-space: nowrap;
|
|
1855
|
+
overflow: hidden;
|
|
1856
|
+
text-decoration: none;
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1859
|
+
/*
|
|
1860
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
1861
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
1862
|
+
you may not use this file except in compliance with the License.
|
|
1863
|
+
You may obtain a copy of the License at
|
|
1864
|
+
|
|
1865
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
1866
|
+
|
|
1867
|
+
Unless required by applicable law or agreed to in writing, software
|
|
1868
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
1869
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1870
|
+
See the License for the specific language governing permissions and
|
|
1871
|
+
limitations under the License.
|
|
1872
|
+
*/
|
|
1873
|
+
|
|
1874
|
+
/**
|
|
1875
|
+
*
|
|
1876
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1877
|
+
*
|
|
1878
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1879
|
+
* you may not use this file except in compliance with the License.
|
|
1880
|
+
* You may obtain a copy of the License at
|
|
1881
|
+
*
|
|
1882
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1883
|
+
*
|
|
1884
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1885
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1886
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1887
|
+
* See the License for the specific language governing permissions and
|
|
1888
|
+
* limitations under the License.
|
|
1889
|
+
*
|
|
1890
|
+
*/
|
|
1891
|
+
|
|
1892
|
+
.notification,
|
|
1893
|
+
.topcoat-notification {
|
|
1894
|
+
position: relative;
|
|
1895
|
+
display: inline-block;
|
|
1896
|
+
vertical-align: top;
|
|
1897
|
+
-moz-box-sizing: border-box;
|
|
1898
|
+
box-sizing: border-box;
|
|
1899
|
+
background-clip: padding-box;
|
|
1900
|
+
padding: 0;
|
|
1901
|
+
margin: 0;
|
|
1902
|
+
font: inherit;
|
|
1903
|
+
color: inherit;
|
|
1904
|
+
background: transparent;
|
|
1905
|
+
border: none;
|
|
1906
|
+
cursor: default;
|
|
1907
|
+
-webkit-user-select: none;
|
|
1908
|
+
-moz-user-select: none;
|
|
1909
|
+
-ms-user-select: none;
|
|
1910
|
+
user-select: none;
|
|
1911
|
+
text-overflow: ellipsis;
|
|
1912
|
+
white-space: nowrap;
|
|
1913
|
+
overflow: hidden;
|
|
1914
|
+
text-decoration: none;
|
|
1915
|
+
}
|
|
1916
|
+
|
|
1917
|
+
/* topdoc
|
|
1918
|
+
name: Notification
|
|
1919
|
+
description: Notification badge
|
|
1920
|
+
markup:
|
|
1921
|
+
<span class="topcoat-notification">1</span>
|
|
1922
|
+
tags:
|
|
1923
|
+
- desktop
|
|
1924
|
+
- light
|
|
1925
|
+
- mobile
|
|
1926
|
+
- notification
|
|
1927
|
+
*/
|
|
1928
|
+
|
|
1929
|
+
.topcoat-notification {
|
|
1930
|
+
padding: 0.15em 0.5em 0.2em;
|
|
1931
|
+
border-radius: 2px;
|
|
1932
|
+
background-color: #ec514e;
|
|
1933
|
+
color: #fff;
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
/**
|
|
1937
|
+
*
|
|
1938
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1939
|
+
*
|
|
1940
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1941
|
+
* you may not use this file except in compliance with the License.
|
|
1942
|
+
* You may obtain a copy of the License at
|
|
1943
|
+
*
|
|
1944
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1945
|
+
*
|
|
1946
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1947
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1948
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1949
|
+
* See the License for the specific language governing permissions and
|
|
1950
|
+
* limitations under the License.
|
|
1951
|
+
*
|
|
1952
|
+
*/
|
|
1953
|
+
|
|
1954
|
+
/**
|
|
1955
|
+
*
|
|
1956
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1957
|
+
*
|
|
1958
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1959
|
+
* you may not use this file except in compliance with the License.
|
|
1960
|
+
* You may obtain a copy of the License at
|
|
1961
|
+
*
|
|
1962
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1963
|
+
*
|
|
1964
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1965
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1966
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1967
|
+
* See the License for the specific language governing permissions and
|
|
1968
|
+
* limitations under the License.
|
|
1969
|
+
*
|
|
1970
|
+
*/
|
|
1971
|
+
|
|
1972
|
+
input[type="radio"] {
|
|
1973
|
+
position: absolute;
|
|
1974
|
+
overflow: hidden;
|
|
1975
|
+
padding: 0;
|
|
1976
|
+
border: 0;
|
|
1977
|
+
opacity: 0.001;
|
|
1978
|
+
z-index: 1;
|
|
1979
|
+
vertical-align: top;
|
|
1980
|
+
outline: none;
|
|
1981
|
+
}
|
|
1982
|
+
|
|
1983
|
+
.radio-button {
|
|
1984
|
+
-moz-box-sizing: border-box;
|
|
1985
|
+
box-sizing: border-box;
|
|
1986
|
+
background-clip: padding-box;
|
|
1987
|
+
position: relative;
|
|
1988
|
+
display: inline-block;
|
|
1989
|
+
vertical-align: top;
|
|
1990
|
+
cursor: default;
|
|
1991
|
+
-webkit-user-select: none;
|
|
1992
|
+
-moz-user-select: none;
|
|
1993
|
+
-ms-user-select: none;
|
|
1994
|
+
user-select: none;
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1997
|
+
.radio-button__label {
|
|
1998
|
+
position: relative;
|
|
1999
|
+
display: inline-block;
|
|
2000
|
+
vertical-align: top;
|
|
2001
|
+
cursor: default;
|
|
2002
|
+
-webkit-user-select: none;
|
|
2003
|
+
-moz-user-select: none;
|
|
2004
|
+
-ms-user-select: none;
|
|
2005
|
+
user-select: none;
|
|
2006
|
+
}
|
|
2007
|
+
|
|
2008
|
+
.radio-button:before,
|
|
2009
|
+
.radio-button:after {
|
|
2010
|
+
content: '';
|
|
2011
|
+
position: absolute;
|
|
2012
|
+
border-radius: 100%;
|
|
2013
|
+
}
|
|
2014
|
+
|
|
2015
|
+
.radio-button:after {
|
|
2016
|
+
top: 50%;
|
|
2017
|
+
left: 50%;
|
|
2018
|
+
-webkit-transform: translate(-50%, -50%);
|
|
2019
|
+
-ms-transform: translate(-50%, -50%);
|
|
2020
|
+
transform: translate(-50%, -50%);
|
|
2021
|
+
}
|
|
2022
|
+
|
|
2023
|
+
.radio-button:before {
|
|
2024
|
+
-moz-box-sizing: border-box;
|
|
2025
|
+
box-sizing: border-box;
|
|
2026
|
+
background-clip: padding-box;
|
|
2027
|
+
}
|
|
2028
|
+
|
|
2029
|
+
.radio-button--disabled {
|
|
2030
|
+
opacity: 0.3;
|
|
2031
|
+
cursor: default;
|
|
2032
|
+
pointer-events: none;
|
|
2033
|
+
}
|
|
2034
|
+
|
|
2035
|
+
/**
|
|
2036
|
+
*
|
|
2037
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2038
|
+
*
|
|
2039
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2040
|
+
* you may not use this file except in compliance with the License.
|
|
2041
|
+
* You may obtain a copy of the License at
|
|
2042
|
+
*
|
|
2043
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2044
|
+
*
|
|
2045
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2046
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2047
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2048
|
+
* See the License for the specific language governing permissions and
|
|
2049
|
+
* limitations under the License.
|
|
2050
|
+
*
|
|
2051
|
+
*/
|
|
2052
|
+
|
|
2053
|
+
/**
|
|
2054
|
+
*
|
|
2055
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2056
|
+
*
|
|
2057
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2058
|
+
* you may not use this file except in compliance with the License.
|
|
2059
|
+
* You may obtain a copy of the License at
|
|
2060
|
+
*
|
|
2061
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2062
|
+
*
|
|
2063
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2064
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2065
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2066
|
+
* See the License for the specific language governing permissions and
|
|
2067
|
+
* limitations under the License.
|
|
2068
|
+
*
|
|
2069
|
+
*/
|
|
2070
|
+
|
|
2071
|
+
input[type="radio"] {
|
|
2072
|
+
position: absolute;
|
|
2073
|
+
overflow: hidden;
|
|
2074
|
+
padding: 0;
|
|
2075
|
+
border: 0;
|
|
2076
|
+
opacity: 0.001;
|
|
2077
|
+
z-index: 1;
|
|
2078
|
+
vertical-align: top;
|
|
2079
|
+
outline: none;
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2082
|
+
.radio-button,
|
|
2083
|
+
.topcoat-radio-button__checkmark {
|
|
2084
|
+
-moz-box-sizing: border-box;
|
|
2085
|
+
box-sizing: border-box;
|
|
2086
|
+
background-clip: padding-box;
|
|
2087
|
+
position: relative;
|
|
2088
|
+
display: inline-block;
|
|
2089
|
+
vertical-align: top;
|
|
2090
|
+
cursor: default;
|
|
2091
|
+
-webkit-user-select: none;
|
|
2092
|
+
-moz-user-select: none;
|
|
2093
|
+
-ms-user-select: none;
|
|
2094
|
+
user-select: none;
|
|
2095
|
+
}
|
|
2096
|
+
|
|
2097
|
+
.radio-button__label,
|
|
2098
|
+
.topcoat-radio-button {
|
|
2099
|
+
position: relative;
|
|
2100
|
+
display: inline-block;
|
|
2101
|
+
vertical-align: top;
|
|
2102
|
+
cursor: default;
|
|
2103
|
+
-webkit-user-select: none;
|
|
2104
|
+
-moz-user-select: none;
|
|
2105
|
+
-ms-user-select: none;
|
|
2106
|
+
user-select: none;
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
.radio-button:before,
|
|
2110
|
+
.radio-button:after,
|
|
2111
|
+
.topcoat-radio-button__checkmark:before,
|
|
2112
|
+
.topcoat-radio-button__checkmark:after {
|
|
2113
|
+
content: '';
|
|
2114
|
+
position: absolute;
|
|
2115
|
+
border-radius: 100%;
|
|
2116
|
+
}
|
|
2117
|
+
|
|
2118
|
+
.radio-button:after,
|
|
2119
|
+
.topcoat-radio-button__checkmark:after {
|
|
2120
|
+
top: 50%;
|
|
2121
|
+
left: 50%;
|
|
2122
|
+
-webkit-transform: translate(-50%, -50%);
|
|
2123
|
+
-ms-transform: translate(-50%, -50%);
|
|
2124
|
+
transform: translate(-50%, -50%);
|
|
2125
|
+
}
|
|
2126
|
+
|
|
2127
|
+
.radio-button:before,
|
|
2128
|
+
.topcoat-radio-button__checkmark:before {
|
|
2129
|
+
-moz-box-sizing: border-box;
|
|
2130
|
+
box-sizing: border-box;
|
|
2131
|
+
background-clip: padding-box;
|
|
2132
|
+
}
|
|
2133
|
+
|
|
2134
|
+
.radio-button--disabled,
|
|
2135
|
+
input[type="radio"]:disabled + .topcoat-radio-button__checkmark {
|
|
2136
|
+
opacity: 0.3;
|
|
2137
|
+
cursor: default;
|
|
2138
|
+
pointer-events: none;
|
|
2139
|
+
}
|
|
2140
|
+
|
|
2141
|
+
/* topdoc
|
|
2142
|
+
name: Radio Button
|
|
2143
|
+
description: A button that can play music, but usually just plays ads.
|
|
2144
|
+
modifiers:
|
|
2145
|
+
markup:
|
|
2146
|
+
<!-- NO LABEL -->
|
|
2147
|
+
<label class="topcoat-radio-button">
|
|
2148
|
+
<input type="radio" name="topcoat">
|
|
2149
|
+
<div class="topcoat-radio-button__checkmark"></div>
|
|
2150
|
+
</label>
|
|
2151
|
+
<br>
|
|
2152
|
+
<br>
|
|
2153
|
+
<!-- LEFT LABEL -->
|
|
2154
|
+
<label class="topcoat-radio-button">
|
|
2155
|
+
Left label
|
|
2156
|
+
<input type="radio" name="topcoat">
|
|
2157
|
+
<div class="topcoat-radio-button__checkmark"></div>
|
|
2158
|
+
</label>
|
|
2159
|
+
<br>
|
|
2160
|
+
<br>
|
|
2161
|
+
<!-- RIGHT LABEL -->
|
|
2162
|
+
<label class="topcoat-radio-button">
|
|
2163
|
+
<input type="radio" name="topcoat">
|
|
2164
|
+
<div class="topcoat-radio-button__checkmark"></div>
|
|
2165
|
+
Right label
|
|
2166
|
+
</label>
|
|
2167
|
+
<br>
|
|
2168
|
+
<br>
|
|
2169
|
+
<!-- DISABLED -->
|
|
2170
|
+
<label class="topcoat-radio-button">
|
|
2171
|
+
<input type="radio" name="topcoat" Disabled>
|
|
2172
|
+
<div class="topcoat-radio-button__checkmark"></div>
|
|
2173
|
+
Disabled
|
|
2174
|
+
</label>
|
|
2175
|
+
examples:
|
|
2176
|
+
Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj
|
|
2177
|
+
tags:
|
|
2178
|
+
- desktop
|
|
2179
|
+
- light
|
|
2180
|
+
- mobile
|
|
2181
|
+
- Radio
|
|
2182
|
+
*/
|
|
2183
|
+
|
|
2184
|
+
input[type="radio"] {
|
|
2185
|
+
height: 1.875rem;
|
|
2186
|
+
width: 1.875rem;
|
|
2187
|
+
margin-top: 0;
|
|
2188
|
+
margin-right: -1.875rem;
|
|
2189
|
+
margin-bottom: -1.875rem;
|
|
2190
|
+
margin-left: 0;
|
|
2191
|
+
}
|
|
2192
|
+
|
|
2193
|
+
input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
|
|
2194
|
+
opacity: 1;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
.topcoat-radio-button {
|
|
2198
|
+
color: #454545;
|
|
2199
|
+
line-height: 1.875rem;
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
.topcoat-radio-button__checkmark:before {
|
|
2203
|
+
width: 1.875rem;
|
|
2204
|
+
height: 1.875rem;
|
|
2205
|
+
background: #e5e9e8;
|
|
2206
|
+
border: 1px solid #a5a8a8;
|
|
2207
|
+
box-shadow: inset 0 1px #fff;
|
|
2208
|
+
}
|
|
2209
|
+
|
|
2210
|
+
.topcoat-radio-button__checkmark {
|
|
2211
|
+
position: relative;
|
|
2212
|
+
width: 1.875rem;
|
|
2213
|
+
height: 1.875rem;
|
|
2214
|
+
}
|
|
2215
|
+
|
|
2216
|
+
.topcoat-radio-button__checkmark:after {
|
|
2217
|
+
opacity: 0;
|
|
2218
|
+
width: 0.875rem;
|
|
2219
|
+
height: 0.875rem;
|
|
2220
|
+
background: #666;
|
|
2221
|
+
border: 1px solid rgba(0,0,0,0.1);
|
|
2222
|
+
box-shadow: 0 1px rgba(255,255,255,0.5);
|
|
2223
|
+
-webkit-transform: none;
|
|
2224
|
+
-ms-transform: none;
|
|
2225
|
+
transform: none;
|
|
2226
|
+
top: 7px;
|
|
2227
|
+
left: 7px;
|
|
2228
|
+
}
|
|
2229
|
+
|
|
2230
|
+
input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
|
|
2231
|
+
border: 1px solid #0940fd;
|
|
2232
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
/*
|
|
2236
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
2237
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2238
|
+
you may not use this file except in compliance with the License.
|
|
2239
|
+
You may obtain a copy of the License at
|
|
2240
|
+
|
|
2241
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2242
|
+
|
|
2243
|
+
Unless required by applicable law or agreed to in writing, software
|
|
2244
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
2245
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2246
|
+
See the License for the specific language governing permissions and
|
|
2247
|
+
limitations under the License.
|
|
2248
|
+
*/
|
|
2249
|
+
|
|
2250
|
+
/*
|
|
2251
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
2252
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2253
|
+
you may not use this file except in compliance with the License.
|
|
2254
|
+
You may obtain a copy of the License at
|
|
2255
|
+
|
|
2256
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2257
|
+
|
|
2258
|
+
Unless required by applicable law or agreed to in writing, software
|
|
2259
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
2260
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2261
|
+
See the License for the specific language governing permissions and
|
|
2262
|
+
limitations under the License.
|
|
2263
|
+
*/
|
|
2264
|
+
|
|
2265
|
+
.range {
|
|
2266
|
+
padding: 0;
|
|
2267
|
+
margin: 0;
|
|
2268
|
+
font: inherit;
|
|
2269
|
+
color: inherit;
|
|
2270
|
+
background: transparent;
|
|
2271
|
+
border: none;
|
|
2272
|
+
-moz-box-sizing: border-box;
|
|
2273
|
+
box-sizing: border-box;
|
|
2274
|
+
background-clip: padding-box;
|
|
2275
|
+
vertical-align: top;
|
|
2276
|
+
outline: none;
|
|
2277
|
+
-webkit-appearance: none;
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
.range__thumb {
|
|
2281
|
+
cursor: pointer;
|
|
2282
|
+
}
|
|
2283
|
+
|
|
2284
|
+
.range__thumb--webkit {
|
|
2285
|
+
cursor: pointer;
|
|
2286
|
+
-webkit-appearance: none;
|
|
2287
|
+
}
|
|
2288
|
+
|
|
2289
|
+
.range:disabled {
|
|
2290
|
+
opacity: 0.3;
|
|
2291
|
+
cursor: default;
|
|
2292
|
+
pointer-events: none;
|
|
2293
|
+
}
|
|
2294
|
+
|
|
2295
|
+
/*
|
|
2296
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
2297
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2298
|
+
you may not use this file except in compliance with the License.
|
|
2299
|
+
You may obtain a copy of the License at
|
|
2300
|
+
|
|
2301
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2302
|
+
|
|
2303
|
+
Unless required by applicable law or agreed to in writing, software
|
|
2304
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
2305
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2306
|
+
See the License for the specific language governing permissions and
|
|
2307
|
+
limitations under the License.
|
|
2308
|
+
*/
|
|
2309
|
+
|
|
2310
|
+
/*
|
|
2311
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
2312
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2313
|
+
you may not use this file except in compliance with the License.
|
|
2314
|
+
You may obtain a copy of the License at
|
|
2315
|
+
|
|
2316
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2317
|
+
|
|
2318
|
+
Unless required by applicable law or agreed to in writing, software
|
|
2319
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
2320
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2321
|
+
See the License for the specific language governing permissions and
|
|
2322
|
+
limitations under the License.
|
|
2323
|
+
*/
|
|
2324
|
+
|
|
2325
|
+
.range,
|
|
2326
|
+
.topcoat-range {
|
|
2327
|
+
padding: 0;
|
|
2328
|
+
margin: 0;
|
|
2329
|
+
font: inherit;
|
|
2330
|
+
color: inherit;
|
|
2331
|
+
background: transparent;
|
|
2332
|
+
border: none;
|
|
2333
|
+
-moz-box-sizing: border-box;
|
|
2334
|
+
box-sizing: border-box;
|
|
2335
|
+
background-clip: padding-box;
|
|
2336
|
+
vertical-align: top;
|
|
2337
|
+
outline: none;
|
|
2338
|
+
-webkit-appearance: none;
|
|
2339
|
+
}
|
|
2340
|
+
|
|
2341
|
+
.range__thumb,
|
|
2342
|
+
.topcoat-range::-moz-range-thumb {
|
|
2343
|
+
cursor: pointer;
|
|
2344
|
+
}
|
|
2345
|
+
|
|
2346
|
+
.range__thumb--webkit,
|
|
2347
|
+
.topcoat-range::-webkit-slider-thumb {
|
|
2348
|
+
cursor: pointer;
|
|
2349
|
+
-webkit-appearance: none;
|
|
2350
|
+
}
|
|
2351
|
+
|
|
2352
|
+
.range:disabled,
|
|
2353
|
+
.topcoat-range:disabled {
|
|
2354
|
+
opacity: 0.3;
|
|
2355
|
+
cursor: default;
|
|
2356
|
+
pointer-events: none;
|
|
2357
|
+
}
|
|
2358
|
+
|
|
2359
|
+
/* topdoc
|
|
2360
|
+
name: Range
|
|
2361
|
+
description: Range input
|
|
2362
|
+
modifiers:
|
|
2363
|
+
:active: Active state
|
|
2364
|
+
:disabled: Disabled state
|
|
2365
|
+
:hover: Hover state
|
|
2366
|
+
:focus: Focused
|
|
2367
|
+
markup:
|
|
2368
|
+
<input type="range" class="topcoat-range">
|
|
2369
|
+
<input type="range" class="topcoat-range" disabled>
|
|
2370
|
+
examples:
|
|
2371
|
+
mobile range: http://codepen.io/Topcoat/pen/BskEn
|
|
2372
|
+
tags:
|
|
2373
|
+
- desktop
|
|
2374
|
+
- mobile
|
|
2375
|
+
- range
|
|
2376
|
+
*/
|
|
2377
|
+
|
|
2378
|
+
.topcoat-range {
|
|
2379
|
+
border-radius: 6px;
|
|
2380
|
+
border: 1px solid #a5a8a8;
|
|
2381
|
+
background-color: #d3d7d7;
|
|
2382
|
+
height: 1rem;
|
|
2383
|
+
border-radius: 30px;
|
|
2384
|
+
}
|
|
2385
|
+
|
|
2386
|
+
.topcoat-range::-moz-range-track {
|
|
2387
|
+
border-radius: 6px;
|
|
2388
|
+
border: 1px solid #a5a8a8;
|
|
2389
|
+
background-color: #d3d7d7;
|
|
2390
|
+
height: 1rem;
|
|
2391
|
+
border-radius: 30px;
|
|
2392
|
+
}
|
|
2393
|
+
|
|
2394
|
+
.topcoat-range::-webkit-slider-thumb {
|
|
2395
|
+
height: 3rem;
|
|
2396
|
+
width: 2rem;
|
|
2397
|
+
background-color: #e5e9e8;
|
|
2398
|
+
border: 1px solid #a5a8a8;
|
|
2399
|
+
border-radius: 6px;
|
|
2400
|
+
box-shadow: inset 0 1px #fff;
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
.topcoat-range::-moz-range-thumb {
|
|
2404
|
+
height: 3rem;
|
|
2405
|
+
width: 2rem;
|
|
2406
|
+
background-color: #e5e9e8;
|
|
2407
|
+
border: 1px solid #a5a8a8;
|
|
2408
|
+
border-radius: 6px;
|
|
2409
|
+
box-shadow: inset 0 1px #fff;
|
|
2410
|
+
}
|
|
2411
|
+
|
|
2412
|
+
.topcoat-range:focus::-webkit-slider-thumb {
|
|
2413
|
+
border: 1px solid #0940fd;
|
|
2414
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2415
|
+
}
|
|
2416
|
+
|
|
2417
|
+
.topcoat-range:focus::-moz-range-thumb {
|
|
2418
|
+
border: 1px solid #0940fd;
|
|
2419
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2420
|
+
}
|
|
2421
|
+
|
|
2422
|
+
/**
|
|
2423
|
+
*
|
|
2424
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2425
|
+
*
|
|
2426
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2427
|
+
* you may not use this file except in compliance with the License.
|
|
2428
|
+
* You may obtain a copy of the License at
|
|
2429
|
+
*
|
|
2430
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2431
|
+
*
|
|
2432
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2433
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2434
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2435
|
+
* See the License for the specific language governing permissions and
|
|
2436
|
+
* limitations under the License.
|
|
2437
|
+
*
|
|
2438
|
+
*/
|
|
2439
|
+
|
|
2440
|
+
/**
|
|
2441
|
+
*
|
|
2442
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2443
|
+
*
|
|
2444
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2445
|
+
* you may not use this file except in compliance with the License.
|
|
2446
|
+
* You may obtain a copy of the License at
|
|
2447
|
+
*
|
|
2448
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2449
|
+
*
|
|
2450
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2451
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2452
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2453
|
+
* See the License for the specific language governing permissions and
|
|
2454
|
+
* limitations under the License.
|
|
2455
|
+
*
|
|
2456
|
+
*/
|
|
2457
|
+
|
|
2458
|
+
.search-input {
|
|
2459
|
+
padding: 0;
|
|
2460
|
+
margin: 0;
|
|
2461
|
+
font: inherit;
|
|
2462
|
+
color: inherit;
|
|
2463
|
+
background: transparent;
|
|
2464
|
+
border: none;
|
|
2465
|
+
-moz-box-sizing: border-box;
|
|
2466
|
+
box-sizing: border-box;
|
|
2467
|
+
background-clip: padding-box;
|
|
2468
|
+
vertical-align: top;
|
|
2469
|
+
outline: none;
|
|
2470
|
+
-webkit-appearance: none;
|
|
2471
|
+
}
|
|
2472
|
+
|
|
2473
|
+
input[type="search"]::-webkit-search-cancel-button {
|
|
2474
|
+
-webkit-appearance: none;
|
|
2475
|
+
}
|
|
2476
|
+
|
|
2477
|
+
.search-input:disabled {
|
|
2478
|
+
opacity: 0.3;
|
|
2479
|
+
cursor: default;
|
|
2480
|
+
pointer-events: none;
|
|
2481
|
+
}
|
|
2482
|
+
|
|
2483
|
+
/**
|
|
2484
|
+
*
|
|
2485
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2486
|
+
*
|
|
2487
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2488
|
+
* you may not use this file except in compliance with the License.
|
|
2489
|
+
* You may obtain a copy of the License at
|
|
2490
|
+
*
|
|
2491
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2492
|
+
*
|
|
2493
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2494
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2495
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2496
|
+
* See the License for the specific language governing permissions and
|
|
2497
|
+
* limitations under the License.
|
|
2498
|
+
*
|
|
2499
|
+
*/
|
|
2500
|
+
|
|
2501
|
+
/**
|
|
2502
|
+
*
|
|
2503
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2504
|
+
*
|
|
2505
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2506
|
+
* you may not use this file except in compliance with the License.
|
|
2507
|
+
* You may obtain a copy of the License at
|
|
2508
|
+
*
|
|
2509
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2510
|
+
*
|
|
2511
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2512
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2513
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2514
|
+
* See the License for the specific language governing permissions and
|
|
2515
|
+
* limitations under the License.
|
|
2516
|
+
*
|
|
2517
|
+
*/
|
|
2518
|
+
|
|
2519
|
+
.search-input,
|
|
2520
|
+
.topcoat-search-input,
|
|
2521
|
+
.topcoat-search-input--large {
|
|
2522
|
+
padding: 0;
|
|
2523
|
+
margin: 0;
|
|
2524
|
+
font: inherit;
|
|
2525
|
+
color: inherit;
|
|
2526
|
+
background: transparent;
|
|
2527
|
+
border: none;
|
|
2528
|
+
-moz-box-sizing: border-box;
|
|
2529
|
+
box-sizing: border-box;
|
|
2530
|
+
background-clip: padding-box;
|
|
2531
|
+
vertical-align: top;
|
|
2532
|
+
outline: none;
|
|
2533
|
+
-webkit-appearance: none;
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
input[type="search"]::-webkit-search-cancel-button {
|
|
2537
|
+
-webkit-appearance: none;
|
|
2538
|
+
}
|
|
2539
|
+
|
|
2540
|
+
.search-input:disabled,
|
|
2541
|
+
.topcoat-search-input:disabled,
|
|
2542
|
+
.topcoat-search-input--large:disabled {
|
|
2543
|
+
opacity: 0.3;
|
|
2544
|
+
cursor: default;
|
|
2545
|
+
pointer-events: none;
|
|
2546
|
+
}
|
|
2547
|
+
|
|
2548
|
+
/* topdoc
|
|
2549
|
+
name: Search Input
|
|
2550
|
+
description: A text input designed for searching.
|
|
2551
|
+
modifiers:
|
|
2552
|
+
:disabled: Disabled state
|
|
2553
|
+
markup:
|
|
2554
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input">
|
|
2555
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>
|
|
2556
|
+
tags:
|
|
2557
|
+
- desktop
|
|
2558
|
+
- light
|
|
2559
|
+
- mobile
|
|
2560
|
+
- text
|
|
2561
|
+
- input
|
|
2562
|
+
- search
|
|
2563
|
+
- form
|
|
2564
|
+
*/
|
|
2565
|
+
|
|
2566
|
+
.topcoat-search-input,
|
|
2567
|
+
.topcoat-search-input--large {
|
|
2568
|
+
line-height: 3rem;
|
|
2569
|
+
font-size: 16px;
|
|
2570
|
+
border: 1px solid #a5a8a8;
|
|
2571
|
+
background-color: #d3d7d7;
|
|
2572
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
2573
|
+
color: #454545;
|
|
2574
|
+
padding: 0 0 0 2rem;
|
|
2575
|
+
border-radius: 30px;
|
|
2576
|
+
background-image: url("../img/search.svg");
|
|
2577
|
+
background-position: 1em center;
|
|
2578
|
+
background-repeat: no-repeat;
|
|
2579
|
+
background-size: 16px;
|
|
2580
|
+
}
|
|
2581
|
+
|
|
2582
|
+
.topcoat-search-input:focus,
|
|
2583
|
+
.topcoat-search-input--large:focus {
|
|
2584
|
+
background-image: url("../img/search_dark.svg");
|
|
2585
|
+
background-color: #edf1f1;
|
|
2586
|
+
color: #000;
|
|
2587
|
+
border: 1px solid #0940fd;
|
|
2588
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2589
|
+
}
|
|
2590
|
+
|
|
2591
|
+
.topcoat-search-input::-webkit-search-cancel-button,
|
|
2592
|
+
.topcoat-search-input::-webkit-search-decoration,
|
|
2593
|
+
.topcoat-search-input--large::-webkit-search-cancel-button,
|
|
2594
|
+
.topcoat-search-input--large::-webkit-search-decoration {
|
|
2595
|
+
margin-right: 5px;
|
|
2596
|
+
}
|
|
2597
|
+
|
|
2598
|
+
.topcoat-search-input:focus::-webkit-input-placeholder,
|
|
2599
|
+
.topcoat-search-input:focus::-webkit-input-placeholder {
|
|
2600
|
+
color: #c6c8c8;
|
|
2601
|
+
}
|
|
2602
|
+
|
|
2603
|
+
.topcoat-search-input:disabled::-webkit-input-placeholder {
|
|
2604
|
+
color: #000;
|
|
2605
|
+
}
|
|
2606
|
+
|
|
2607
|
+
.topcoat-search-input:disabled::-moz-placeholder {
|
|
2608
|
+
color: #000;
|
|
2609
|
+
}
|
|
2610
|
+
|
|
2611
|
+
.topcoat-search-input:disabled:-ms-input-placeholder {
|
|
2612
|
+
color: #000;
|
|
2613
|
+
}
|
|
2614
|
+
|
|
2615
|
+
/* topdoc
|
|
2616
|
+
name: Large Search Input
|
|
2617
|
+
description: A large text input designed for searching.
|
|
2618
|
+
modifiers:
|
|
2619
|
+
:disabled: Disabled state
|
|
2620
|
+
markup:
|
|
2621
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input--large">
|
|
2622
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>
|
|
2623
|
+
tags:
|
|
2624
|
+
- desktop
|
|
2625
|
+
- light
|
|
2626
|
+
- mobile
|
|
2627
|
+
- text
|
|
2628
|
+
- input
|
|
2629
|
+
- search
|
|
2630
|
+
- form
|
|
2631
|
+
- large
|
|
2632
|
+
*/
|
|
2633
|
+
|
|
2634
|
+
.topcoat-search-input--large {
|
|
2635
|
+
line-height: 4.375rem;
|
|
2636
|
+
font-size: 1.3rem;
|
|
2637
|
+
font-weight: 200;
|
|
2638
|
+
padding: 0 0 0 2.9rem;
|
|
2639
|
+
border-radius: 40px;
|
|
2640
|
+
background-position: 1.2em center;
|
|
2641
|
+
background-size: 1.3rem;
|
|
2642
|
+
}
|
|
2643
|
+
|
|
2644
|
+
.topcoat-search-input--large:disabled {
|
|
2645
|
+
color: #000;
|
|
2646
|
+
}
|
|
2647
|
+
|
|
2648
|
+
.topcoat-search-input--large:disabled::-webkit-input-placeholder {
|
|
2649
|
+
color: #000;
|
|
2650
|
+
}
|
|
2651
|
+
|
|
2652
|
+
.topcoat-search-input--large:disabled::-moz-placeholder {
|
|
2653
|
+
color: #000;
|
|
2654
|
+
}
|
|
2655
|
+
|
|
2656
|
+
.topcoat-search-input--large:disabled:-ms-input-placeholder {
|
|
2657
|
+
color: #000;
|
|
2658
|
+
}
|
|
2659
|
+
|
|
2660
|
+
/**
|
|
2661
|
+
*
|
|
2662
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2663
|
+
*
|
|
2664
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2665
|
+
* you may not use this file except in compliance with the License.
|
|
2666
|
+
* You may obtain a copy of the License at
|
|
2667
|
+
*
|
|
2668
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2669
|
+
*
|
|
2670
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2671
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2672
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2673
|
+
* See the License for the specific language governing permissions and
|
|
2674
|
+
* limitations under the License.
|
|
2675
|
+
*
|
|
2676
|
+
*/
|
|
2677
|
+
|
|
2678
|
+
/**
|
|
2679
|
+
*
|
|
2680
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2681
|
+
*
|
|
2682
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2683
|
+
* you may not use this file except in compliance with the License.
|
|
2684
|
+
* You may obtain a copy of the License at
|
|
2685
|
+
*
|
|
2686
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2687
|
+
*
|
|
2688
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2689
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2690
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2691
|
+
* See the License for the specific language governing permissions and
|
|
2692
|
+
* limitations under the License.
|
|
2693
|
+
*
|
|
2694
|
+
*/
|
|
2695
|
+
|
|
2696
|
+
.switch {
|
|
2697
|
+
position: relative;
|
|
2698
|
+
display: inline-block;
|
|
2699
|
+
vertical-align: top;
|
|
2700
|
+
-moz-box-sizing: border-box;
|
|
2701
|
+
box-sizing: border-box;
|
|
2702
|
+
background-clip: padding-box;
|
|
2703
|
+
}
|
|
2704
|
+
|
|
2705
|
+
.switch__input {
|
|
2706
|
+
position: absolute;
|
|
2707
|
+
overflow: hidden;
|
|
2708
|
+
padding: 0;
|
|
2709
|
+
border: 0;
|
|
2710
|
+
opacity: 0.001;
|
|
2711
|
+
z-index: 1;
|
|
2712
|
+
vertical-align: top;
|
|
2713
|
+
outline: none;
|
|
2714
|
+
}
|
|
2715
|
+
|
|
2716
|
+
.switch__toggle {
|
|
2717
|
+
position: relative;
|
|
2718
|
+
display: inline-block;
|
|
2719
|
+
vertical-align: top;
|
|
2720
|
+
-moz-box-sizing: border-box;
|
|
2721
|
+
box-sizing: border-box;
|
|
2722
|
+
background-clip: padding-box;
|
|
2723
|
+
padding: 0;
|
|
2724
|
+
margin: 0;
|
|
2725
|
+
font: inherit;
|
|
2726
|
+
color: inherit;
|
|
2727
|
+
background: transparent;
|
|
2728
|
+
border: none;
|
|
2729
|
+
cursor: default;
|
|
2730
|
+
-webkit-user-select: none;
|
|
2731
|
+
-moz-user-select: none;
|
|
2732
|
+
-ms-user-select: none;
|
|
2733
|
+
user-select: none;
|
|
2734
|
+
}
|
|
2735
|
+
|
|
2736
|
+
.switch__toggle:before,
|
|
2737
|
+
.switch__toggle:after {
|
|
2738
|
+
content: '';
|
|
2739
|
+
position: absolute;
|
|
2740
|
+
z-index: -1;
|
|
2741
|
+
-moz-box-sizing: border-box;
|
|
2742
|
+
box-sizing: border-box;
|
|
2743
|
+
background-clip: padding-box;
|
|
2744
|
+
}
|
|
2745
|
+
|
|
2746
|
+
.switch--disabled {
|
|
2747
|
+
opacity: 0.3;
|
|
2748
|
+
cursor: default;
|
|
2749
|
+
pointer-events: none;
|
|
2750
|
+
}
|
|
2751
|
+
|
|
2752
|
+
/**
|
|
2753
|
+
*
|
|
2754
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2755
|
+
*
|
|
2756
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2757
|
+
* you may not use this file except in compliance with the License.
|
|
2758
|
+
* You may obtain a copy of the License at
|
|
2759
|
+
*
|
|
2760
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2761
|
+
*
|
|
2762
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2763
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2764
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2765
|
+
* See the License for the specific language governing permissions and
|
|
2766
|
+
* limitations under the License.
|
|
2767
|
+
*
|
|
2768
|
+
*/
|
|
2769
|
+
|
|
2770
|
+
/**
|
|
2771
|
+
*
|
|
2772
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2773
|
+
*
|
|
2774
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2775
|
+
* you may not use this file except in compliance with the License.
|
|
2776
|
+
* You may obtain a copy of the License at
|
|
2777
|
+
*
|
|
2778
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2779
|
+
*
|
|
2780
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2781
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2782
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2783
|
+
* See the License for the specific language governing permissions and
|
|
2784
|
+
* limitations under the License.
|
|
2785
|
+
*
|
|
2786
|
+
*/
|
|
2787
|
+
|
|
2788
|
+
.switch,
|
|
2789
|
+
.topcoat-switch {
|
|
2790
|
+
position: relative;
|
|
2791
|
+
display: inline-block;
|
|
2792
|
+
vertical-align: top;
|
|
2793
|
+
-moz-box-sizing: border-box;
|
|
2794
|
+
box-sizing: border-box;
|
|
2795
|
+
background-clip: padding-box;
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
.switch__input,
|
|
2799
|
+
.topcoat-switch__input {
|
|
2800
|
+
position: absolute;
|
|
2801
|
+
overflow: hidden;
|
|
2802
|
+
padding: 0;
|
|
2803
|
+
border: 0;
|
|
2804
|
+
opacity: 0.001;
|
|
2805
|
+
z-index: 1;
|
|
2806
|
+
vertical-align: top;
|
|
2807
|
+
outline: none;
|
|
2808
|
+
}
|
|
2809
|
+
|
|
2810
|
+
.switch__toggle,
|
|
2811
|
+
.topcoat-switch__toggle {
|
|
2812
|
+
position: relative;
|
|
2813
|
+
display: inline-block;
|
|
2814
|
+
vertical-align: top;
|
|
2815
|
+
-moz-box-sizing: border-box;
|
|
2816
|
+
box-sizing: border-box;
|
|
2817
|
+
background-clip: padding-box;
|
|
2818
|
+
padding: 0;
|
|
2819
|
+
margin: 0;
|
|
2820
|
+
font: inherit;
|
|
2821
|
+
color: inherit;
|
|
2822
|
+
background: transparent;
|
|
2823
|
+
border: none;
|
|
2824
|
+
cursor: default;
|
|
2825
|
+
-webkit-user-select: none;
|
|
2826
|
+
-moz-user-select: none;
|
|
2827
|
+
-ms-user-select: none;
|
|
2828
|
+
user-select: none;
|
|
2829
|
+
}
|
|
2830
|
+
|
|
2831
|
+
.switch__toggle:before,
|
|
2832
|
+
.switch__toggle:after,
|
|
2833
|
+
.topcoat-switch__toggle:before,
|
|
2834
|
+
.topcoat-switch__toggle:after {
|
|
2835
|
+
content: '';
|
|
2836
|
+
position: absolute;
|
|
2837
|
+
z-index: -1;
|
|
2838
|
+
-moz-box-sizing: border-box;
|
|
2839
|
+
box-sizing: border-box;
|
|
2840
|
+
background-clip: padding-box;
|
|
2841
|
+
}
|
|
2842
|
+
|
|
2843
|
+
.switch--disabled,
|
|
2844
|
+
.topcoat-switch__input:disabled + .topcoat-switch__toggle {
|
|
2845
|
+
opacity: 0.3;
|
|
2846
|
+
cursor: default;
|
|
2847
|
+
pointer-events: none;
|
|
2848
|
+
}
|
|
2849
|
+
|
|
2850
|
+
/* topdoc
|
|
2851
|
+
name: Switch
|
|
2852
|
+
description: Default skin for Topcoat switch
|
|
2853
|
+
modifiers:
|
|
2854
|
+
:focus: Focus state
|
|
2855
|
+
:disabled: Disabled state
|
|
2856
|
+
markup:
|
|
2857
|
+
<label class="topcoat-switch">
|
|
2858
|
+
<input type="checkbox" class="topcoat-switch__input">
|
|
2859
|
+
<div class="topcoat-switch__toggle"></div>
|
|
2860
|
+
</label>
|
|
2861
|
+
<br>
|
|
2862
|
+
<br>
|
|
2863
|
+
<label class="topcoat-switch">
|
|
2864
|
+
<input type="checkbox" class="topcoat-switch__input" checked>
|
|
2865
|
+
<div class="topcoat-switch__toggle"></div>
|
|
2866
|
+
</label>
|
|
2867
|
+
<br>
|
|
2868
|
+
<br>
|
|
2869
|
+
<label class="topcoat-switch">
|
|
2870
|
+
<input type="checkbox" class="topcoat-switch__input" disabled>
|
|
2871
|
+
<div class="topcoat-switch__toggle"></div>
|
|
2872
|
+
</label>
|
|
2873
|
+
examples:
|
|
2874
|
+
mobile switch: http://codepen.io/Topcoat/pen/upxds
|
|
2875
|
+
tags:
|
|
2876
|
+
- desktop
|
|
2877
|
+
- light
|
|
2878
|
+
- mobile
|
|
2879
|
+
- switch
|
|
2880
|
+
*/
|
|
2881
|
+
|
|
2882
|
+
.topcoat-switch {
|
|
2883
|
+
font-size: 16px;
|
|
2884
|
+
padding: 0 1.25rem;
|
|
2885
|
+
border-radius: 6px;
|
|
2886
|
+
border: 1px solid #a5a8a8;
|
|
2887
|
+
overflow: hidden;
|
|
2888
|
+
width: 6rem;
|
|
2889
|
+
}
|
|
2890
|
+
|
|
2891
|
+
.topcoat-switch__toggle:before,
|
|
2892
|
+
.topcoat-switch__toggle:after {
|
|
2893
|
+
top: -1px;
|
|
2894
|
+
width: 5rem;
|
|
2895
|
+
}
|
|
2896
|
+
|
|
2897
|
+
.topcoat-switch__toggle:before {
|
|
2898
|
+
content: 'ON';
|
|
2899
|
+
color: #0083e8;
|
|
2900
|
+
background-color: #e0f0fa;
|
|
2901
|
+
right: 1rem;
|
|
2902
|
+
padding-left: 1.5rem;
|
|
2903
|
+
}
|
|
2904
|
+
|
|
2905
|
+
.topcoat-switch__toggle {
|
|
2906
|
+
line-height: 3rem;
|
|
2907
|
+
height: 3rem;
|
|
2908
|
+
width: 2rem;
|
|
2909
|
+
border-radius: 6px;
|
|
2910
|
+
color: #454545;
|
|
2911
|
+
text-shadow: 0 1px #fff;
|
|
2912
|
+
background-color: #e5e9e8;
|
|
2913
|
+
border: 1px solid #a5a8a8;
|
|
2914
|
+
margin-left: -1.3rem;
|
|
2915
|
+
margin-bottom: -1px;
|
|
2916
|
+
margin-top: -1px;
|
|
2917
|
+
box-shadow: inset 0 1px #fff;
|
|
2918
|
+
-webkit-transition: margin-left 0.05s ease-in-out;
|
|
2919
|
+
transition: margin-left 0.05s ease-in-out;
|
|
2920
|
+
}
|
|
2921
|
+
|
|
2922
|
+
.topcoat-switch__toggle:after {
|
|
2923
|
+
content: 'OFF';
|
|
2924
|
+
background-color: #d3d7d7;
|
|
2925
|
+
left: 1rem;
|
|
2926
|
+
padding-left: 2rem;
|
|
2927
|
+
}
|
|
2928
|
+
|
|
2929
|
+
.topcoat-switch__input:checked + .topcoat-switch__toggle {
|
|
2930
|
+
margin-left: 2.7rem;
|
|
2931
|
+
}
|
|
2932
|
+
|
|
2933
|
+
.topcoat-switch__input:focus + .topcoat-switch__toggle {
|
|
2934
|
+
border: 1px solid #0940fd;
|
|
2935
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2936
|
+
}
|
|
2937
|
+
|
|
2938
|
+
.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
|
|
2939
|
+
.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
|
|
2940
|
+
background: transparent;
|
|
2941
|
+
}
|
|
2942
|
+
|
|
2943
|
+
/**
|
|
2944
|
+
*
|
|
2945
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2946
|
+
*
|
|
2947
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2948
|
+
* you may not use this file except in compliance with the License.
|
|
2949
|
+
* You may obtain a copy of the License at
|
|
2950
|
+
*
|
|
2951
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2952
|
+
*
|
|
2953
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2954
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2955
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2956
|
+
* See the License for the specific language governing permissions and
|
|
2957
|
+
* limitations under the License.
|
|
2958
|
+
*
|
|
2959
|
+
*/
|
|
2960
|
+
|
|
2961
|
+
/**
|
|
2962
|
+
*
|
|
2963
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2964
|
+
*
|
|
2965
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2966
|
+
* you may not use this file except in compliance with the License.
|
|
2967
|
+
* You may obtain a copy of the License at
|
|
2968
|
+
*
|
|
2969
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2970
|
+
*
|
|
2971
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2972
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2973
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2974
|
+
* See the License for the specific language governing permissions and
|
|
2975
|
+
* limitations under the License.
|
|
2976
|
+
*
|
|
2977
|
+
*/
|
|
2978
|
+
|
|
2979
|
+
.button,
|
|
2980
|
+
.topcoat-tab-bar__button {
|
|
2981
|
+
position: relative;
|
|
2982
|
+
display: inline-block;
|
|
2983
|
+
vertical-align: top;
|
|
2984
|
+
-moz-box-sizing: border-box;
|
|
2985
|
+
box-sizing: border-box;
|
|
2986
|
+
background-clip: padding-box;
|
|
2987
|
+
padding: 0;
|
|
2988
|
+
margin: 0;
|
|
2989
|
+
font: inherit;
|
|
2990
|
+
color: inherit;
|
|
2991
|
+
background: transparent;
|
|
2992
|
+
border: none;
|
|
2993
|
+
cursor: default;
|
|
2994
|
+
-webkit-user-select: none;
|
|
2995
|
+
-moz-user-select: none;
|
|
2996
|
+
-ms-user-select: none;
|
|
2997
|
+
user-select: none;
|
|
2998
|
+
text-overflow: ellipsis;
|
|
2999
|
+
white-space: nowrap;
|
|
3000
|
+
overflow: hidden;
|
|
3001
|
+
text-decoration: none;
|
|
3002
|
+
}
|
|
3003
|
+
|
|
3004
|
+
.button--quiet {
|
|
3005
|
+
background: transparent;
|
|
3006
|
+
border: 1px solid transparent;
|
|
3007
|
+
box-shadow: none;
|
|
3008
|
+
}
|
|
3009
|
+
|
|
3010
|
+
.button--disabled,
|
|
3011
|
+
.topcoat-tab-bar__button:disabled {
|
|
3012
|
+
opacity: 0.3;
|
|
3013
|
+
cursor: default;
|
|
3014
|
+
pointer-events: none;
|
|
3015
|
+
}
|
|
3016
|
+
|
|
3017
|
+
.button-bar,
|
|
3018
|
+
.topcoat-tab-bar {
|
|
3019
|
+
display: table;
|
|
3020
|
+
table-layout: fixed;
|
|
3021
|
+
white-space: nowrap;
|
|
3022
|
+
margin: 0;
|
|
3023
|
+
padding: 0;
|
|
3024
|
+
}
|
|
3025
|
+
|
|
3026
|
+
.button-bar__item,
|
|
3027
|
+
.topcoat-tab-bar__item {
|
|
3028
|
+
display: table-cell;
|
|
3029
|
+
width: auto;
|
|
3030
|
+
border-radius: 0;
|
|
3031
|
+
}
|
|
3032
|
+
|
|
3033
|
+
.button-bar__item > input,
|
|
3034
|
+
.topcoat-tab-bar__item > input {
|
|
3035
|
+
position: absolute;
|
|
3036
|
+
overflow: hidden;
|
|
3037
|
+
padding: 0;
|
|
3038
|
+
border: 0;
|
|
3039
|
+
opacity: 0.001;
|
|
3040
|
+
z-index: 1;
|
|
3041
|
+
vertical-align: top;
|
|
3042
|
+
outline: none;
|
|
3043
|
+
}
|
|
3044
|
+
|
|
3045
|
+
.button-bar__button {
|
|
3046
|
+
border-radius: inherit;
|
|
3047
|
+
}
|
|
3048
|
+
|
|
3049
|
+
.button-bar__item:disabled {
|
|
3050
|
+
opacity: 0.3;
|
|
3051
|
+
cursor: default;
|
|
3052
|
+
pointer-events: none;
|
|
3053
|
+
}
|
|
3054
|
+
|
|
3055
|
+
/* topdoc
|
|
3056
|
+
name: Tab Bar
|
|
3057
|
+
description: Component of tab buttons
|
|
3058
|
+
modifiers:
|
|
3059
|
+
:disabled: Disabled state
|
|
3060
|
+
markup:
|
|
3061
|
+
<div class="topcoat-tab-bar">
|
|
3062
|
+
<label class="topcoat-tab-bar__item">
|
|
3063
|
+
<input type="radio" name="tab-bar">
|
|
3064
|
+
<button class="topcoat-tab-bar__button">One</button>
|
|
3065
|
+
</label>
|
|
3066
|
+
<label class="topcoat-tab-bar__item">
|
|
3067
|
+
<input type="radio" name="tab-bar">
|
|
3068
|
+
<button class="topcoat-tab-bar__button">Two</button>
|
|
3069
|
+
</label>
|
|
3070
|
+
<label class="topcoat-tab-bar__item">
|
|
3071
|
+
<input type="radio" name="tab-bar">
|
|
3072
|
+
<button class="topcoat-tab-bar__button">Three</button>
|
|
3073
|
+
</label>
|
|
3074
|
+
</div>
|
|
3075
|
+
examples:
|
|
3076
|
+
mobile tab bar: http://codepen.io/Topcoat/pen/rJICF
|
|
3077
|
+
tags:
|
|
3078
|
+
- desktop
|
|
3079
|
+
- light
|
|
3080
|
+
- dark
|
|
3081
|
+
- mobile
|
|
3082
|
+
- tab
|
|
3083
|
+
- group
|
|
3084
|
+
- bar
|
|
3085
|
+
*/
|
|
3086
|
+
|
|
3087
|
+
.topcoat-tab-bar__button {
|
|
3088
|
+
padding: 0 1.25rem;
|
|
3089
|
+
height: 3rem;
|
|
3090
|
+
line-height: 3rem;
|
|
3091
|
+
letter-spacing: 1px;
|
|
3092
|
+
color: #454545;
|
|
3093
|
+
text-shadow: 0 1px #fff;
|
|
3094
|
+
vertical-align: top;
|
|
3095
|
+
background-color: #e5e9e8;
|
|
3096
|
+
box-shadow: inset 0 1px #fff;
|
|
3097
|
+
border-top: 1px solid #a5a8a8;
|
|
3098
|
+
}
|
|
3099
|
+
|
|
3100
|
+
.topcoat-tab-bar__button:active,
|
|
3101
|
+
.topcoat-tab-bar__button--large:active,
|
|
3102
|
+
:checked + .topcoat-tab-bar__button {
|
|
3103
|
+
color: #0083e8;
|
|
3104
|
+
background-color: #e0f0fa;
|
|
3105
|
+
box-shadow: inset 0 0 2px #c0ced8;
|
|
3106
|
+
}
|
|
3107
|
+
|
|
3108
|
+
.topcoat-tab-bar__button:focus,
|
|
3109
|
+
.topcoat-tab-bar__button--large:focus {
|
|
3110
|
+
z-index: 1;
|
|
3111
|
+
}
|
|
3112
|
+
|
|
3113
|
+
/**
|
|
3114
|
+
*
|
|
3115
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3116
|
+
*
|
|
3117
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3118
|
+
* you may not use this file except in compliance with the License.
|
|
3119
|
+
* You may obtain a copy of the License at
|
|
3120
|
+
*
|
|
3121
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3122
|
+
*
|
|
3123
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3124
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3125
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3126
|
+
* See the License for the specific language governing permissions and
|
|
3127
|
+
* limitations under the License.
|
|
3128
|
+
*
|
|
3129
|
+
*/
|
|
3130
|
+
|
|
3131
|
+
/**
|
|
3132
|
+
*
|
|
3133
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3134
|
+
*
|
|
3135
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3136
|
+
* you may not use this file except in compliance with the License.
|
|
3137
|
+
* You may obtain a copy of the License at
|
|
3138
|
+
*
|
|
3139
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3140
|
+
*
|
|
3141
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3142
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3143
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3144
|
+
* See the License for the specific language governing permissions and
|
|
3145
|
+
* limitations under the License.
|
|
3146
|
+
*
|
|
3147
|
+
*/
|
|
3148
|
+
|
|
3149
|
+
.input,
|
|
3150
|
+
.topcoat-text-input,
|
|
3151
|
+
.topcoat-text-input--large {
|
|
3152
|
+
padding: 0;
|
|
3153
|
+
margin: 0;
|
|
3154
|
+
font: inherit;
|
|
3155
|
+
color: inherit;
|
|
3156
|
+
background: transparent;
|
|
3157
|
+
border: none;
|
|
3158
|
+
-moz-box-sizing: border-box;
|
|
3159
|
+
box-sizing: border-box;
|
|
3160
|
+
background-clip: padding-box;
|
|
3161
|
+
vertical-align: top;
|
|
3162
|
+
outline: none;
|
|
3163
|
+
}
|
|
3164
|
+
|
|
3165
|
+
.input:disabled,
|
|
3166
|
+
.topcoat-text-input:disabled,
|
|
3167
|
+
.topcoat-text-input--large:disabled {
|
|
3168
|
+
opacity: 0.3;
|
|
3169
|
+
cursor: default;
|
|
3170
|
+
pointer-events: none;
|
|
3171
|
+
}
|
|
3172
|
+
|
|
3173
|
+
/* topdoc
|
|
3174
|
+
name: Text input
|
|
3175
|
+
description: Topdoc text input
|
|
3176
|
+
modifiers:
|
|
3177
|
+
:disabled: Disabled state
|
|
3178
|
+
:focus: Focused
|
|
3179
|
+
:invalid: Hover state
|
|
3180
|
+
markup:
|
|
3181
|
+
<input type="text" class="topcoat-text-input" placeholder="text" value="">
|
|
3182
|
+
<br>
|
|
3183
|
+
<br>
|
|
3184
|
+
<input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>
|
|
3185
|
+
<br>
|
|
3186
|
+
<br>
|
|
3187
|
+
<input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">
|
|
3188
|
+
tags:
|
|
3189
|
+
- desktop
|
|
3190
|
+
- mobile
|
|
3191
|
+
- text
|
|
3192
|
+
- input
|
|
3193
|
+
*/
|
|
3194
|
+
|
|
3195
|
+
.topcoat-text-input,
|
|
3196
|
+
.topcoat-text-input--large {
|
|
3197
|
+
line-height: 3rem;
|
|
3198
|
+
font-size: 16px;
|
|
3199
|
+
letter-spacing: 1px;
|
|
3200
|
+
padding: 0 1.25rem;
|
|
3201
|
+
border: 1px solid #a5a8a8;
|
|
3202
|
+
border-radius: 6px;
|
|
3203
|
+
background-color: #d3d7d7;
|
|
3204
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
3205
|
+
color: #454545;
|
|
3206
|
+
vertical-align: top;
|
|
3207
|
+
}
|
|
3208
|
+
|
|
3209
|
+
.topcoat-text-input:focus,
|
|
3210
|
+
.topcoat-text-input--large:focus {
|
|
3211
|
+
background-color: #edf1f1;
|
|
3212
|
+
color: #000;
|
|
3213
|
+
border: 1px solid #0940fd;
|
|
3214
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
3215
|
+
}
|
|
3216
|
+
|
|
3217
|
+
.topcoat-text-input:disabled::-webkit-input-placeholder {
|
|
3218
|
+
color: #000;
|
|
3219
|
+
}
|
|
3220
|
+
|
|
3221
|
+
.topcoat-text-input:disabled::-moz-placeholder {
|
|
3222
|
+
color: #000;
|
|
3223
|
+
}
|
|
3224
|
+
|
|
3225
|
+
.topcoat-text-input:disabled:-ms-input-placeholder {
|
|
3226
|
+
color: #000;
|
|
3227
|
+
}
|
|
3228
|
+
|
|
3229
|
+
.topcoat-text-input:invalid {
|
|
3230
|
+
border: 1px solid #d83b75;
|
|
3231
|
+
}
|
|
3232
|
+
|
|
3233
|
+
/* topdoc
|
|
3234
|
+
name: Large Text Input
|
|
3235
|
+
description: A bigger input, still for text.
|
|
3236
|
+
modifiers:
|
|
3237
|
+
:disabled: Disabled state
|
|
3238
|
+
:focus: Focused
|
|
3239
|
+
:invalid: Hover state
|
|
3240
|
+
markup:
|
|
3241
|
+
<input type="text" class="topcoat-text-input--large" value="" placeholder="text">
|
|
3242
|
+
<br>
|
|
3243
|
+
<br>
|
|
3244
|
+
<input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>
|
|
3245
|
+
<br>
|
|
3246
|
+
<br>
|
|
3247
|
+
<input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">
|
|
3248
|
+
tags:
|
|
3249
|
+
- desktop
|
|
3250
|
+
- light
|
|
3251
|
+
- mobile
|
|
3252
|
+
- form
|
|
3253
|
+
- input
|
|
3254
|
+
- large
|
|
3255
|
+
*/
|
|
3256
|
+
|
|
3257
|
+
.topcoat-text-input--large {
|
|
3258
|
+
line-height: 4.375rem;
|
|
3259
|
+
font-size: 1.3rem;
|
|
3260
|
+
}
|
|
3261
|
+
|
|
3262
|
+
.topcoat-text-input--large:disabled {
|
|
3263
|
+
color: #000;
|
|
3264
|
+
}
|
|
3265
|
+
|
|
3266
|
+
.topcoat-text-input--large:disabled::-webkit-input-placeholder {
|
|
3267
|
+
color: #000;
|
|
3268
|
+
}
|
|
3269
|
+
|
|
3270
|
+
.topcoat-text-input--large:disabled::-moz-placeholder {
|
|
3271
|
+
color: #000;
|
|
3272
|
+
}
|
|
3273
|
+
|
|
3274
|
+
.topcoat-text-input--large:disabled:-ms-input-placeholder {
|
|
3275
|
+
color: #000;
|
|
3276
|
+
}
|
|
3277
|
+
|
|
3278
|
+
.topcoat-text-input--large:invalid {
|
|
3279
|
+
border: 1px solid #d83b75;
|
|
3280
|
+
}
|
|
3281
|
+
|
|
3282
|
+
/**
|
|
3283
|
+
*
|
|
3284
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3285
|
+
*
|
|
3286
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3287
|
+
* you may not use this file except in compliance with the License.
|
|
3288
|
+
* You may obtain a copy of the License at
|
|
3289
|
+
*
|
|
3290
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3291
|
+
*
|
|
3292
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3293
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3294
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3295
|
+
* See the License for the specific language governing permissions and
|
|
3296
|
+
* limitations under the License.
|
|
3297
|
+
*
|
|
3298
|
+
*/
|
|
3299
|
+
|
|
3300
|
+
/**
|
|
3301
|
+
*
|
|
3302
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3303
|
+
*
|
|
3304
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3305
|
+
* you may not use this file except in compliance with the License.
|
|
3306
|
+
* You may obtain a copy of the License at
|
|
3307
|
+
*
|
|
3308
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3309
|
+
*
|
|
3310
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3311
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3312
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3313
|
+
* See the License for the specific language governing permissions and
|
|
3314
|
+
* limitations under the License.
|
|
3315
|
+
*
|
|
3316
|
+
*/
|
|
3317
|
+
|
|
3318
|
+
.textarea {
|
|
3319
|
+
-moz-box-sizing: border-box;
|
|
3320
|
+
box-sizing: border-box;
|
|
3321
|
+
background-clip: padding-box;
|
|
3322
|
+
padding: 0;
|
|
3323
|
+
margin: 0;
|
|
3324
|
+
font: inherit;
|
|
3325
|
+
color: inherit;
|
|
3326
|
+
background: transparent;
|
|
3327
|
+
border: none;
|
|
3328
|
+
vertical-align: top;
|
|
3329
|
+
resize: none;
|
|
3330
|
+
outline: none;
|
|
3331
|
+
}
|
|
3332
|
+
|
|
3333
|
+
.textarea:disabled {
|
|
3334
|
+
opacity: 0.3;
|
|
3335
|
+
cursor: default;
|
|
3336
|
+
pointer-events: none;
|
|
3337
|
+
}
|
|
3338
|
+
|
|
3339
|
+
/**
|
|
3340
|
+
*
|
|
3341
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3342
|
+
*
|
|
3343
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3344
|
+
* you may not use this file except in compliance with the License.
|
|
3345
|
+
* You may obtain a copy of the License at
|
|
3346
|
+
*
|
|
3347
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3348
|
+
*
|
|
3349
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3350
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3351
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3352
|
+
* See the License for the specific language governing permissions and
|
|
3353
|
+
* limitations under the License.
|
|
3354
|
+
*
|
|
3355
|
+
*/
|
|
3356
|
+
|
|
3357
|
+
/**
|
|
3358
|
+
*
|
|
3359
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3360
|
+
*
|
|
3361
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3362
|
+
* you may not use this file except in compliance with the License.
|
|
3363
|
+
* You may obtain a copy of the License at
|
|
3364
|
+
*
|
|
3365
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3366
|
+
*
|
|
3367
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3368
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3369
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3370
|
+
* See the License for the specific language governing permissions and
|
|
3371
|
+
* limitations under the License.
|
|
3372
|
+
*
|
|
3373
|
+
*/
|
|
3374
|
+
|
|
3375
|
+
.textarea,
|
|
3376
|
+
.topcoat-textarea,
|
|
3377
|
+
.topcoat-textarea--large {
|
|
3378
|
+
-moz-box-sizing: border-box;
|
|
3379
|
+
box-sizing: border-box;
|
|
3380
|
+
background-clip: padding-box;
|
|
3381
|
+
padding: 0;
|
|
3382
|
+
margin: 0;
|
|
3383
|
+
font: inherit;
|
|
3384
|
+
color: inherit;
|
|
3385
|
+
background: transparent;
|
|
3386
|
+
border: none;
|
|
3387
|
+
vertical-align: top;
|
|
3388
|
+
resize: none;
|
|
3389
|
+
outline: none;
|
|
3390
|
+
}
|
|
3391
|
+
|
|
3392
|
+
.textarea:disabled,
|
|
3393
|
+
.topcoat-textarea:disabled,
|
|
3394
|
+
.topcoat-textarea--large:disabled {
|
|
3395
|
+
opacity: 0.3;
|
|
3396
|
+
cursor: default;
|
|
3397
|
+
pointer-events: none;
|
|
3398
|
+
}
|
|
3399
|
+
|
|
3400
|
+
/* topdoc
|
|
3401
|
+
name: Textarea
|
|
3402
|
+
description: A whole area, just for text.
|
|
3403
|
+
modifiers:
|
|
3404
|
+
:disabled: Disabled state
|
|
3405
|
+
markup:
|
|
3406
|
+
<textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>
|
|
3407
|
+
<br>
|
|
3408
|
+
<br>
|
|
3409
|
+
<textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
|
|
3410
|
+
tags:
|
|
3411
|
+
- desktop
|
|
3412
|
+
- light
|
|
3413
|
+
- mobile
|
|
3414
|
+
- form
|
|
3415
|
+
- input
|
|
3416
|
+
- textarea
|
|
3417
|
+
*/
|
|
3418
|
+
|
|
3419
|
+
.topcoat-textarea,
|
|
3420
|
+
.topcoat-textarea--large {
|
|
3421
|
+
padding: 2rem;
|
|
3422
|
+
font-size: 2.5rem;
|
|
3423
|
+
font-weight: 200;
|
|
3424
|
+
border-radius: 6px;
|
|
3425
|
+
line-height: 3rem;
|
|
3426
|
+
border: 1px solid #a5a8a8;
|
|
3427
|
+
background-color: #d3d7d7;
|
|
3428
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
3429
|
+
color: #454545;
|
|
3430
|
+
letter-spacing: 1px;
|
|
3431
|
+
}
|
|
3432
|
+
|
|
3433
|
+
.topcoat-textarea:focus,
|
|
3434
|
+
.topcoat-textarea--large:focus {
|
|
3435
|
+
background-color: #edf1f1;
|
|
3436
|
+
color: #000;
|
|
3437
|
+
border: 1px solid #0940fd;
|
|
3438
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
3439
|
+
}
|
|
3440
|
+
|
|
3441
|
+
.topcoat-textarea:disabled::-webkit-input-placeholder {
|
|
3442
|
+
color: #000;
|
|
3443
|
+
}
|
|
3444
|
+
|
|
3445
|
+
.topcoat-textarea:disabled::-moz-placeholder {
|
|
3446
|
+
color: #000;
|
|
3447
|
+
}
|
|
3448
|
+
|
|
3449
|
+
.topcoat-textarea:disabled:-ms-input-placeholder {
|
|
3450
|
+
color: #000;
|
|
3451
|
+
}
|
|
3452
|
+
|
|
3453
|
+
/* topdoc
|
|
3454
|
+
name: Large Textarea
|
|
3455
|
+
description: A whole area, just for text; now available in large.
|
|
3456
|
+
modifiers:
|
|
3457
|
+
:disabled: Disabled state
|
|
3458
|
+
markup:
|
|
3459
|
+
<textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>
|
|
3460
|
+
<br>
|
|
3461
|
+
<br>
|
|
3462
|
+
<textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
|
|
3463
|
+
tags:
|
|
3464
|
+
- desktop
|
|
3465
|
+
- light
|
|
3466
|
+
- mobile
|
|
3467
|
+
- form
|
|
3468
|
+
- input
|
|
3469
|
+
- textarea
|
|
3470
|
+
*/
|
|
3471
|
+
|
|
3472
|
+
.topcoat-textarea--large {
|
|
3473
|
+
font-size: 3rem;
|
|
3474
|
+
line-height: 4.375rem;
|
|
3475
|
+
}
|
|
3476
|
+
|
|
3477
|
+
.topcoat-textarea--large:disabled {
|
|
3478
|
+
color: #000;
|
|
3479
|
+
}
|
|
3480
|
+
|
|
3481
|
+
.topcoat-textarea--large:disabled::-webkit-input-placeholder {
|
|
3482
|
+
color: #000;
|
|
3483
|
+
}
|
|
3484
|
+
|
|
3485
|
+
.topcoat-textarea--large:disabled::-moz-placeholder {
|
|
3486
|
+
color: #000;
|
|
3487
|
+
}
|
|
3488
|
+
|
|
3489
|
+
.topcoat-textarea--large:disabled:-ms-input-placeholder {
|
|
3490
|
+
color: #000;
|
|
3491
|
+
}
|
|
3492
|
+
|
|
3493
|
+
@font-face {
|
|
3494
|
+
font-family: "Source Sans";
|
|
3495
|
+
src: url("../font/SourceSansPro-Regular.otf");
|
|
3496
|
+
}
|
|
3497
|
+
|
|
3498
|
+
@font-face {
|
|
3499
|
+
font-family: "Source Sans";
|
|
3500
|
+
src: url("../font/SourceSansPro-Light.otf");
|
|
3501
|
+
font-weight: 200;
|
|
3502
|
+
}
|
|
3503
|
+
|
|
3504
|
+
@font-face {
|
|
3505
|
+
font-family: "Source Sans";
|
|
3506
|
+
src: url("../font/SourceSansPro-Semibold.otf");
|
|
3507
|
+
font-weight: 600;
|
|
3508
|
+
}
|
|
3509
|
+
|
|
3510
|
+
body {
|
|
3511
|
+
margin: 0;
|
|
3512
|
+
padding: 0;
|
|
3513
|
+
background: #dfe2e2;
|
|
3514
|
+
color: #000;
|
|
3515
|
+
font: 16px "Source Sans", helvetica, arial, sans-serif;
|
|
3516
|
+
font-weight: 200;
|
|
3517
|
+
}
|
|
3518
|
+
|
|
3519
|
+
:focus {
|
|
3520
|
+
outline-color: transparent;
|
|
3521
|
+
outline-style: none;
|
|
3522
|
+
}
|
|
3523
|
+
|
|
3524
|
+
.topcoat-icon--menu-stack {
|
|
3525
|
+
background: url("../img/hamburger_dark.svg") no-repeat;
|
|
3526
|
+
background-size: cover;
|
|
3527
|
+
}
|
|
3528
|
+
|
|
3529
|
+
.quarter {
|
|
3530
|
+
width: 25%;
|
|
3531
|
+
}
|
|
3532
|
+
|
|
3533
|
+
.half {
|
|
3534
|
+
width: 50%;
|
|
3535
|
+
}
|
|
3536
|
+
|
|
3537
|
+
.three-quarters {
|
|
3538
|
+
width: 75%;
|
|
3539
|
+
}
|
|
3540
|
+
|
|
3541
|
+
.third {
|
|
3542
|
+
width: 33.333%;
|
|
3543
|
+
}
|
|
3544
|
+
|
|
3545
|
+
.two-thirds {
|
|
3546
|
+
width: 66.666%;
|
|
3547
|
+
}
|
|
3548
|
+
|
|
3549
|
+
.full {
|
|
3550
|
+
width: 100%;
|
|
3551
|
+
}
|
|
3552
|
+
|
|
3553
|
+
.left {
|
|
3554
|
+
text-align: left;
|
|
3555
|
+
}
|
|
3556
|
+
|
|
3557
|
+
.center {
|
|
3558
|
+
text-align: center;
|
|
3559
|
+
}
|
|
3560
|
+
|
|
3561
|
+
.right {
|
|
3562
|
+
text-align: right;
|
|
3563
|
+
}
|
|
3564
|
+
|
|
3565
|
+
.reset-ui {
|
|
3566
|
+
-moz-box-sizing: border-box;
|
|
3567
|
+
box-sizing: border-box;
|
|
3568
|
+
background-clip: padding-box;
|
|
3569
|
+
position: relative;
|
|
3570
|
+
display: inline-block;
|
|
3571
|
+
vertical-align: top;
|
|
3572
|
+
padding: 0;
|
|
3573
|
+
margin: 0;
|
|
3574
|
+
font: inherit;
|
|
3575
|
+
color: inherit;
|
|
3576
|
+
background: transparent;
|
|
3577
|
+
border: none;
|
|
3578
|
+
cursor: default;
|
|
3579
|
+
-webkit-user-select: none;
|
|
3580
|
+
-moz-user-select: none;
|
|
3581
|
+
-ms-user-select: none;
|
|
3582
|
+
user-select: none;
|
|
3583
|
+
text-overflow: ellipsis;
|
|
3584
|
+
white-space: nowrap;
|
|
3585
|
+
overflow: hidden;
|
|
3586
|
+
}
|
|
3587
|
+
|
|
3588
|
+
/* This file should include color and image variables corresponding to the dark theme */
|
|
3589
|
+
|
|
3590
|
+
/* Call To Action */
|
|
3591
|
+
|
|
3592
|
+
/* Icons */
|
|
3593
|
+
|
|
3594
|
+
/* Navigation Bar */
|
|
3595
|
+
|
|
3596
|
+
/* Text Input */
|
|
3597
|
+
|
|
3598
|
+
/* Search Input */
|
|
3599
|
+
|
|
3600
|
+
/* List */
|
|
3601
|
+
|
|
3602
|
+
/* Checkbox */
|
|
3603
|
+
|
|
3604
|
+
/* Overlay */
|
|
3605
|
+
|
|
3606
|
+
/* Progress bar */
|
|
3607
|
+
|
|
3608
|
+
/* Checkbox */
|
|
3609
|
+
|
|
3610
|
+
/* Radio Button */
|
|
3611
|
+
|
|
3612
|
+
/* Tab bar */
|
|
3613
|
+
|
|
3614
|
+
/* Switch */
|
|
3615
|
+
|
|
3616
|
+
/* Icon Button */
|
|
3617
|
+
|
|
3618
|
+
/* Navigation bar */
|
|
3619
|
+
|
|
3620
|
+
/* List */
|
|
3621
|
+
|
|
3622
|
+
/* Search Input */
|
|
3623
|
+
|
|
3624
|
+
/* Textarea */
|
|
3625
|
+
|
|
3626
|
+
/* Checkbox */
|
|
3627
|
+
|
|
3628
|
+
/* Radio */
|
|
3629
|
+
|
|
3630
|
+
/* Range input */
|
|
3631
|
+
|
|
3632
|
+
/* Search Input */
|
|
3633
|
+
|
|
3634
|
+
/* Switch */
|
|
3635
|
+
|
|
3636
|
+
/* This file should include color and image variables corresponding to the light theme */
|
|
3637
|
+
|
|
3638
|
+
/* Call To Action */
|
|
3639
|
+
|
|
3640
|
+
/* Icons */
|
|
3641
|
+
|
|
3642
|
+
/* Navigation Bar */
|
|
3643
|
+
|
|
3644
|
+
/* Text Input */
|
|
3645
|
+
|
|
3646
|
+
/* List */
|
|
3647
|
+
|
|
3648
|
+
/* Overlay */
|
|
3649
|
+
|
|
3650
|
+
/* Progress bar */
|
|
3651
|
+
|
|
3652
|
+
/* Checkbox */
|
|
3653
|
+
|
|
3654
|
+
/* Range input */
|
|
3655
|
+
|
|
3656
|
+
/* Radio Button */
|
|
3657
|
+
|
|
3658
|
+
/* Tab bar */
|
|
3659
|
+
|
|
3660
|
+
/* Switch */
|
|
3661
|
+
|
|
3662
|
+
/* Containers */
|
|
3663
|
+
|
|
3664
|
+
/* Icon Button */
|
|
3665
|
+
|
|
3666
|
+
/* Navigation bar */
|
|
3667
|
+
|
|
3668
|
+
/* List */
|
|
3669
|
+
|
|
3670
|
+
/* Search Input */
|
|
3671
|
+
|
|
3672
|
+
/* Text Area */
|
|
3673
|
+
|
|
3674
|
+
/* Checkbox */
|
|
3675
|
+
|
|
3676
|
+
/* Radio */
|
|
3677
|
+
|
|
3678
|
+
/* Range input */
|
|
3679
|
+
|
|
3680
|
+
/* Search Input */
|
|
3681
|
+
|
|
3682
|
+
/* Switch */
|
|
3683
|
+
|
|
3684
|
+
/* Text Input */
|
|
3685
|
+
|
|
3686
|
+
/* Radio input */
|
|
3687
|
+
|
|
3688
|
+
/* Overlay */
|
|
3689
|
+
|
|
3690
|
+
/* Textarea */
|
|
3691
|
+
|
|
3692
|
+
/* Progress bar container */
|
|
3693
|
+
|
|
3694
|
+
/* Progress bar progress */
|
|
3695
|
+
|
|
3696
|
+
/* Search input */
|
|
3697
|
+
|
|
3698
|
+
/* Switch */
|
|
3699
|
+
|
|
3700
|
+
/* Notification */
|