├── README.md ├── app.js ├── assets ├── css │ ├── pageslider.css │ └── styles.css ├── pics │ ├── Amy_Jones.jpg │ ├── Amy_Jones50.jpg │ ├── Eugene_Lee.jpg │ ├── Eugene_Lee50.jpg │ ├── Gary_Donovan.jpg │ ├── Gary_Donovan50.jpg │ ├── James_King.jpg │ ├── James_King50.jpg │ ├── John_Williams.jpg │ ├── John_Williams50.jpg │ ├── Julie_Taylor.jpg │ ├── Julie_Taylor50.jpg │ ├── Kathleen_Byrne.jpg │ ├── Kathleen_Byrne50.jpg │ ├── Lisa_Wong.jpg │ ├── Lisa_Wong50.jpg │ ├── Paul_Jones.jpg │ ├── Paul_Jones50.jpg │ ├── Paula_Gates.jpg │ ├── Paula_Gates50.jpg │ ├── Ray_Moore.jpg │ ├── Ray_Moore50.jpg │ ├── Steven_Wells.jpg │ └── Steven_Wells50.jpg └── topcoat │ ├── css │ ├── topcoat-mobile-light.css │ └── topcoat-mobile-light.min.css │ ├── font │ ├── LICENSE.txt │ ├── SourceCodePro-Black.otf │ ├── SourceCodePro-Bold.otf │ ├── SourceCodePro-ExtraLight.otf │ ├── SourceCodePro-Light.otf │ ├── SourceCodePro-Regular.otf │ ├── SourceCodePro-Semibold.otf │ ├── SourceSansPro-Black.otf │ ├── SourceSansPro-BlackIt.otf │ ├── SourceSansPro-Bold.otf │ ├── SourceSansPro-BoldIt.otf │ ├── SourceSansPro-ExtraLight.otf │ ├── SourceSansPro-ExtraLightIt.otf │ ├── SourceSansPro-It.otf │ ├── SourceSansPro-Light.otf │ ├── SourceSansPro-LightIt.otf │ ├── SourceSansPro-Regular.otf │ ├── SourceSansPro-Semibold.otf │ └── SourceSansPro-SemiboldIt.otf │ └── img │ ├── back_light.svg │ ├── call.svg │ ├── chat.svg │ ├── email.svg │ ├── next.svg │ ├── next_blue.svg │ ├── search-bg.png │ ├── search-bg2x.png │ ├── search.svg │ ├── search_bw.svg │ ├── search_dark.svg │ ├── search_light.svg │ ├── spinner.png │ └── spinner2x.png ├── index.html ├── models └── memory │ └── employee.js ├── package.json ├── router.js ├── templates ├── Employee.hbs ├── EmployeeList.hbs ├── Home.hbs └── Reports.hbs ├── utils └── pageslider.js └── views ├── Employee.js ├── EmployeeList.js ├── Home.js └── Reports.js /README.md: -------------------------------------------------------------------------------- 1 | ## Browserify sample application ## 2 | 3 | Sample application using Browserify, Backbone, and Handlebars templates. 4 | 5 | http://coenraets.org for more info 6 | 7 | ### Running the app ### 8 | 9 | 1. npm install 10 | 2. browserify -t hbsfy app.js -o bundle.js 11 | 3. Open index.html -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery')(window); 2 | var Backbone = require('backbone'); 3 | Backbone.$ = $; 4 | 5 | var Router = require('./router'); 6 | var router = new Router(); 7 | 8 | $("body").on("click", ".back-button", function (event) { 9 | event.preventDefault(); 10 | window.history.back(); 11 | }); 12 | 13 | Backbone.history.start(); -------------------------------------------------------------------------------- /assets/css/pageslider.css: -------------------------------------------------------------------------------- 1 | #container { 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | } 7 | 8 | .page { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | height: 100%; 14 | -webkit-transform: translate3d(0, 0, 0); 15 | transform: translate3d(0, 0, 0); 16 | text-align: left; 17 | } 18 | 19 | .page.left { 20 | -webkit-transform: translate3d(-100%, 0, 0); 21 | transform: translate3d(-100%, 0, 0); 22 | } 23 | 24 | .page.center { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | transform: translate3d(0, 0, 0); 27 | } 28 | 29 | .page.right { 30 | -webkit-transform: translate3d(100%, 0, 0); 31 | transform: translate3d(100%, 0, 0); 32 | } 33 | 34 | .page.transition { 35 | -webkit-transition-duration: .25s; 36 | transition-duration: .25s; 37 | } -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | .scroller { 2 | overflow: auto; 3 | -webkit-overflow-scrolling: touch; 4 | position: absolute; 5 | top: 141px; 6 | bottom: 0px; 7 | left: 0px; 8 | right: 0px; 9 | } 10 | 11 | .back-button { 12 | position: absolute; 13 | top: 10px; 14 | } 15 | 16 | .topcoat-icon--back { 17 | background: url("../topcoat/img/back_light.svg") no-repeat; 18 | -webkit-background-size: cover; 19 | -moz-background-size: cover; 20 | background-size: cover; 21 | } 22 | 23 | .search-bar { 24 | padding:10px 10px 12px 8px; 25 | } 26 | 27 | .search-bar > input { 28 | width: 100%; 29 | } 30 | 31 | a { 32 | text-decoration: none; 33 | color: inherit; 34 | -webkit-touch-callout: none; 35 | -webkit-tap-highlight-color: rgba(0, 0, 0); 36 | } 37 | 38 | .list { 39 | list-style-type: none; 40 | border-top: none !important; 41 | } 42 | 43 | .list > li { 44 | position: relative; 45 | clear: both; 46 | padding: 0px; 47 | margin: 0px; 48 | } 49 | 50 | .list > li:nth-of-type(1) { 51 | border-top: none; 52 | } 53 | 54 | .list > li > a { 55 | margin: 0px; 56 | display: block; 57 | height: 57px; 58 | padding: 4px; 59 | } 60 | 61 | 62 | .list > li > a > p:nth-of-type(1) { 63 | margin: 8px 0px 0px 0px; 64 | font-weight: bold; 65 | } 66 | 67 | .list > li p:nth-of-type(2) { 68 | margin: 0px; 69 | color: #777; 70 | } 71 | 72 | .list > li img { 73 | width: 57px; 74 | height: 57px; 75 | float: left; 76 | margin-right: 8px; 77 | } 78 | 79 | .list li:active { 80 | background-color: #d6d6d6; 81 | } 82 | 83 | .details { 84 | margin: auto; 85 | } 86 | 87 | .details>img { 88 | float:left; 89 | margin:10px; 90 | width: 80px; 91 | height: 80px; 92 | } 93 | 94 | .details h1 { 95 | padding: 12px 0px 4px 0px; 96 | margin: 0px 0px 0px 0px; 97 | font-size: 1.2rem; 98 | } 99 | 100 | .details h2 { 101 | padding: 0px 0px 0px 0px; 102 | margin: 0px 0px 0px 0px; 103 | font-size: 1.1rem; 104 | font-weight: normal; 105 | color: #888; 106 | } 107 | 108 | .details > .scroller { 109 | top:175px; 110 | } 111 | 112 | .actions > li > a { 113 | padding-left: 12px; 114 | } 115 | 116 | .action-icon { 117 | position: absolute !important; 118 | top: 18px; 119 | right: 20px !important; 120 | width: 28px !important; 121 | height: 28px; 122 | } 123 | 124 | .actions li p:nth-of-type(1) { 125 | color: #5DC1FF; 126 | font-size: 0.9em; 127 | font-weight: lighter; 128 | } 129 | 130 | .actions li p:nth-of-type(2) { 131 | color: inherit; 132 | } 133 | 134 | .icon-call { 135 | background: transparent url(../topcoat/img/call.svg); 136 | background-repeat: no-repeat; 137 | -webkit-background-size: cover; 138 | -moz-background-size: cover; 139 | background-size: cover; 140 | } 141 | 142 | .icon-sms { 143 | background: transparent url(../topcoat/img/chat.svg); 144 | background-repeat: no-repeat; 145 | -webkit-background-size: cover; 146 | -moz-background-size: cover; 147 | background-size: cover; 148 | } 149 | 150 | .icon-mail { 151 | background: transparent url(../topcoat/img/email.svg); 152 | background-repeat: no-repeat; 153 | -webkit-background-size: cover; 154 | -moz-background-size: cover; 155 | background-size: cover; 156 | } 157 | 158 | .icon-manager { 159 | background: transparent url(../topcoat/img/next.svg); 160 | background-repeat: no-repeat; 161 | -webkit-background-size: cover; 162 | -moz-background-size: cover; 163 | background-size: cover; 164 | } 165 | 166 | .icon-reports { 167 | background: transparent url(../topcoat/img/next.svg); 168 | background-repeat: no-repeat; 169 | -webkit-background-size: cover; 170 | -moz-background-size: cover; 171 | background-size: cover; 172 | } -------------------------------------------------------------------------------- /assets/pics/Amy_Jones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Amy_Jones.jpg -------------------------------------------------------------------------------- /assets/pics/Amy_Jones50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Amy_Jones50.jpg -------------------------------------------------------------------------------- /assets/pics/Eugene_Lee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Eugene_Lee.jpg -------------------------------------------------------------------------------- /assets/pics/Eugene_Lee50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Eugene_Lee50.jpg -------------------------------------------------------------------------------- /assets/pics/Gary_Donovan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Gary_Donovan.jpg -------------------------------------------------------------------------------- /assets/pics/Gary_Donovan50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Gary_Donovan50.jpg -------------------------------------------------------------------------------- /assets/pics/James_King.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/James_King.jpg -------------------------------------------------------------------------------- /assets/pics/James_King50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/James_King50.jpg -------------------------------------------------------------------------------- /assets/pics/John_Williams.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/John_Williams.jpg -------------------------------------------------------------------------------- /assets/pics/John_Williams50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/John_Williams50.jpg -------------------------------------------------------------------------------- /assets/pics/Julie_Taylor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Julie_Taylor.jpg -------------------------------------------------------------------------------- /assets/pics/Julie_Taylor50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Julie_Taylor50.jpg -------------------------------------------------------------------------------- /assets/pics/Kathleen_Byrne.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Kathleen_Byrne.jpg -------------------------------------------------------------------------------- /assets/pics/Kathleen_Byrne50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Kathleen_Byrne50.jpg -------------------------------------------------------------------------------- /assets/pics/Lisa_Wong.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Lisa_Wong.jpg -------------------------------------------------------------------------------- /assets/pics/Lisa_Wong50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Lisa_Wong50.jpg -------------------------------------------------------------------------------- /assets/pics/Paul_Jones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Paul_Jones.jpg -------------------------------------------------------------------------------- /assets/pics/Paul_Jones50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Paul_Jones50.jpg -------------------------------------------------------------------------------- /assets/pics/Paula_Gates.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Paula_Gates.jpg -------------------------------------------------------------------------------- /assets/pics/Paula_Gates50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Paula_Gates50.jpg -------------------------------------------------------------------------------- /assets/pics/Ray_Moore.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Ray_Moore.jpg -------------------------------------------------------------------------------- /assets/pics/Ray_Moore50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Ray_Moore50.jpg -------------------------------------------------------------------------------- /assets/pics/Steven_Wells.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Steven_Wells.jpg -------------------------------------------------------------------------------- /assets/pics/Steven_Wells50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/pics/Steven_Wells50.jpg -------------------------------------------------------------------------------- /assets/topcoat/css/topcoat-mobile-light.css: -------------------------------------------------------------------------------- 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 #9daca9; 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: #eff1f1; 188 | } 189 | 190 | .topcoat-button:focus, 191 | .topcoat-button--quiet:focus, 192 | .topcoat-button--quiet:hover:focus, 193 | .topcoat-button--large:focus, 194 | .topcoat-button--large--quiet:focus, 195 | .topcoat-button--large--quiet:hover:focus, 196 | .topcoat-button--cta:focus, 197 | .topcoat-button--large--cta:focus, 198 | .topcoat-button-bar__button:focus, 199 | .topcoat-button-bar__button--large:focus { 200 | border: 1px solid #0036ff; 201 | box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 202 | outline: 0; 203 | } 204 | 205 | .topcoat-button:active, 206 | .topcoat-button--large:active, 207 | .topcoat-button-bar__button:active, 208 | .topcoat-button-bar__button--large:active, 209 | :checked + .topcoat-button-bar__button { 210 | border: 1px solid #9daca9; 211 | background-color: #d2d6d6; 212 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 213 | } 214 | 215 | .topcoat-button--quiet { 216 | background: transparent; 217 | border: 1px solid transparent; 218 | box-shadow: none; 219 | } 220 | 221 | .topcoat-button--quiet:hover, 222 | .topcoat-button--large--quiet:hover { 223 | text-shadow: 0 1px #fff; 224 | border: 1px solid #9daca9; 225 | box-shadow: inset 0 1px #fff; 226 | } 227 | 228 | .topcoat-button--quiet:active, 229 | .topcoat-button--quiet:focus:active, 230 | .topcoat-button--large--quiet:active, 231 | .topcoat-button--large--quiet:focus:active { 232 | color: #454545; 233 | text-shadow: 0 1px #fff; 234 | background-color: #d2d6d6; 235 | border: 1px solid #9daca9; 236 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 237 | } 238 | 239 | .topcoat-button--large, 240 | .topcoat-button--large--quiet, 241 | .topcoat-button-bar__button--large { 242 | font-size: 1.3rem; 243 | font-weight: 400; 244 | line-height: 4.375rem; 245 | padding: 0 1.25rem; 246 | } 247 | 248 | .topcoat-button--large--quiet { 249 | background: transparent; 250 | border: 1px solid transparent; 251 | box-shadow: none; 252 | } 253 | 254 | .topcoat-button--cta, 255 | .topcoat-button--large--cta { 256 | border: 1px solid #134f7f; 257 | background-color: #288edf; 258 | box-shadow: inset 0 1px rgba(255,255,255,0.36); 259 | color: #fff; 260 | font-weight: 500; 261 | text-shadow: 0 -1px rgba(0,0,0,0.36); 262 | } 263 | 264 | .topcoat-button--cta:hover, 265 | .topcoat-button--large--cta:hover { 266 | background-color: #4ca1e4; 267 | } 268 | 269 | .topcoat-button--cta:active, 270 | .topcoat-button--large--cta:active { 271 | background-color: #1e7dc8; 272 | box-shadow: inset 0 1px rgba(0,0,0,0.12); 273 | } 274 | 275 | .topcoat-button--large--cta { 276 | font-size: 1.3rem; 277 | font-weight: 400; 278 | line-height: 4.375rem; 279 | padding: 0 1.25rem; 280 | } 281 | 282 | .button-bar, 283 | .topcoat-button-bar { 284 | display: table; 285 | table-layout: fixed; 286 | white-space: nowrap; 287 | margin: 0; 288 | padding: 0; 289 | } 290 | 291 | .button-bar__item, 292 | .topcoat-button-bar__item { 293 | display: table-cell; 294 | width: auto; 295 | border-radius: 0; 296 | } 297 | 298 | .button-bar__item > input, 299 | .topcoat-button-bar__item > input { 300 | position: absolute; 301 | overflow: hidden; 302 | padding: 0; 303 | border: 0; 304 | opacity: 0.001; 305 | z-index: 1; 306 | vertical-align: top; 307 | outline: none; 308 | } 309 | 310 | .button-bar__button { 311 | border-radius: inherit; 312 | } 313 | 314 | .button-bar__item:disabled { 315 | opacity: 0.3; 316 | cursor: default; 317 | pointer-events: none; 318 | } 319 | 320 | /* topdoc 321 | name: Button Bar 322 | description: Component of grouped buttons 323 | modifiers: 324 | :disabled: Disabled state 325 | markup: 326 |
327 |
328 | 329 |
330 |
331 | 332 |
333 |
334 | 335 |
336 |
337 | examples: 338 | mobile button bar: http://codepen.io/Topcoat/pen/kdKyg 339 | tags: 340 | - desktop 341 | - light 342 | - dark 343 | - mobile 344 | - button 345 | - group 346 | - bar 347 | */ 348 | 349 | .topcoat-button-bar > .topcoat-button-bar__item:first-child { 350 | border-top-left-radius: 6px; 351 | border-bottom-left-radius: 6px; 352 | } 353 | 354 | .topcoat-button-bar > .topcoat-button-bar__item:last-child { 355 | border-top-right-radius: 6px; 356 | border-bottom-right-radius: 6px; 357 | } 358 | 359 | .topcoat-button-bar__item:first-child > .topcoat-button-bar__button, 360 | .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large { 361 | border-right: none; 362 | } 363 | 364 | .topcoat-button-bar__item:last-child > .topcoat-button-bar__button, 365 | .topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large { 366 | border-left: none; 367 | } 368 | 369 | .topcoat-button-bar__button { 370 | border-radius: inherit; 371 | } 372 | 373 | .topcoat-button-bar__button:focus, 374 | .topcoat-button-bar__button--large:focus { 375 | z-index: 1; 376 | } 377 | 378 | /* topdoc 379 | name: Large Button Bar 380 | description: A button bar, only larger 381 | modifiers: 382 | :disabled: Disabled state 383 | markup: 384 |
385 |
386 | 387 |
388 |
389 | 390 |
391 |
392 | 393 |
394 |
395 | tags: 396 | - desktop 397 | - light 398 | - dark 399 | - mobile 400 | - button 401 | - group 402 | - bar 403 | - large 404 | */ 405 | 406 | .topcoat-button-bar__button--large { 407 | border-radius: inherit; 408 | } 409 | 410 | /** 411 | * 412 | * Copyright 2012 Adobe Systems Inc.; 413 | * 414 | * Licensed under the Apache License, Version 2.0 (the "License"); 415 | * you may not use this file except in compliance with the License. 416 | * You may obtain a copy of the License at 417 | * 418 | * http://www.apache.org/licenses/LICENSE-2.0 419 | * 420 | * Unless required by applicable law or agreed to in writing, software 421 | * distributed under the License is distributed on an "AS IS" BASIS, 422 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 423 | * See the License for the specific language governing permissions and 424 | * limitations under the License. 425 | * 426 | */ 427 | 428 | .button { 429 | position: relative; 430 | display: inline-block; 431 | vertical-align: top; 432 | -moz-box-sizing: border-box; 433 | box-sizing: border-box; 434 | background-clip: padding-box; 435 | padding: 0; 436 | margin: 0; 437 | font: inherit; 438 | color: inherit; 439 | background: transparent; 440 | border: none; 441 | cursor: default; 442 | -webkit-user-select: none; 443 | -moz-user-select: none; 444 | -ms-user-select: none; 445 | user-select: none; 446 | text-overflow: ellipsis; 447 | white-space: nowrap; 448 | overflow: hidden; 449 | text-decoration: none; 450 | } 451 | 452 | .button--quiet { 453 | background: transparent; 454 | border: 1px solid transparent; 455 | box-shadow: none; 456 | } 457 | 458 | .button--disabled { 459 | opacity: 0.3; 460 | cursor: default; 461 | pointer-events: none; 462 | } 463 | 464 | /** 465 | * 466 | * Copyright 2012 Adobe Systems Inc.; 467 | * 468 | * Licensed under the Apache License, Version 2.0 (the "License"); 469 | * you may not use this file except in compliance with the License. 470 | * You may obtain a copy of the License at 471 | * 472 | * http://www.apache.org/licenses/LICENSE-2.0 473 | * 474 | * Unless required by applicable law or agreed to in writing, software 475 | * distributed under the License is distributed on an "AS IS" BASIS, 476 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 477 | * See the License for the specific language governing permissions and 478 | * limitations under the License. 479 | * 480 | */ 481 | 482 | /** 483 | * 484 | * Copyright 2012 Adobe Systems Inc.; 485 | * 486 | * Licensed under the Apache License, Version 2.0 (the "License"); 487 | * you may not use this file except in compliance with the License. 488 | * You may obtain a copy of the License at 489 | * 490 | * http://www.apache.org/licenses/LICENSE-2.0 491 | * 492 | * Unless required by applicable law or agreed to in writing, software 493 | * distributed under the License is distributed on an "AS IS" BASIS, 494 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 495 | * See the License for the specific language governing permissions and 496 | * limitations under the License. 497 | * 498 | */ 499 | 500 | /** 501 | * 502 | * Copyright 2012 Adobe Systems Inc.; 503 | * 504 | * Licensed under the Apache License, Version 2.0 (the "License"); 505 | * you may not use this file except in compliance with the License. 506 | * You may obtain a copy of the License at 507 | * 508 | * http://www.apache.org/licenses/LICENSE-2.0 509 | * 510 | * Unless required by applicable law or agreed to in writing, software 511 | * distributed under the License is distributed on an "AS IS" BASIS, 512 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 513 | * See the License for the specific language governing permissions and 514 | * limitations under the License. 515 | * 516 | */ 517 | 518 | .button, 519 | .topcoat-button, 520 | .topcoat-button--quiet, 521 | .topcoat-button--large, 522 | .topcoat-button--large--quiet, 523 | .topcoat-button--cta, 524 | .topcoat-button--large--cta { 525 | position: relative; 526 | display: inline-block; 527 | vertical-align: top; 528 | -moz-box-sizing: border-box; 529 | box-sizing: border-box; 530 | background-clip: padding-box; 531 | padding: 0; 532 | margin: 0; 533 | font: inherit; 534 | color: inherit; 535 | background: transparent; 536 | border: none; 537 | cursor: default; 538 | -webkit-user-select: none; 539 | -moz-user-select: none; 540 | -ms-user-select: none; 541 | user-select: none; 542 | text-overflow: ellipsis; 543 | white-space: nowrap; 544 | overflow: hidden; 545 | text-decoration: none; 546 | } 547 | 548 | .button--quiet { 549 | background: transparent; 550 | border: 1px solid transparent; 551 | box-shadow: none; 552 | } 553 | 554 | .button--disabled, 555 | .topcoat-button:disabled, 556 | .topcoat-button--quiet:disabled, 557 | .topcoat-button--large:disabled, 558 | .topcoat-button--large--quiet:disabled, 559 | .topcoat-button--cta:disabled, 560 | .topcoat-button--large--cta:disabled { 561 | opacity: 0.3; 562 | cursor: default; 563 | pointer-events: none; 564 | } 565 | 566 | /* topdoc 567 | name: Button 568 | description: A simple button 569 | modifiers: 570 | :active: Active state 571 | :disabled: Disabled state 572 | :hover: Hover state 573 | :focus: Focused 574 | markup: 575 | 576 | 577 | examples: 578 | mobile button: http://codepen.io/Topcoat/pen/DpKtf 579 | tags: 580 | - desktop 581 | - light 582 | - mobile 583 | - button 584 | */ 585 | 586 | .topcoat-button, 587 | .topcoat-button--quiet, 588 | .topcoat-button--large, 589 | .topcoat-button--large--quiet, 590 | .topcoat-button--cta, 591 | .topcoat-button--large--cta { 592 | padding: 0 1.25rem; 593 | font-size: 16px; 594 | line-height: 3rem; 595 | letter-spacing: 1px; 596 | color: #454545; 597 | text-shadow: 0 1px #fff; 598 | vertical-align: top; 599 | background-color: #e5e9e8; 600 | box-shadow: inset 0 1px #fff; 601 | border: 1px solid #9daca9; 602 | border-radius: 6px; 603 | } 604 | 605 | .topcoat-button:hover, 606 | .topcoat-button--quiet:hover, 607 | .topcoat-button--large:hover, 608 | .topcoat-button--large--quiet:hover { 609 | background-color: #eff1f1; 610 | } 611 | 612 | .topcoat-button:focus, 613 | .topcoat-button--quiet:focus, 614 | .topcoat-button--quiet:hover:focus, 615 | .topcoat-button--large:focus, 616 | .topcoat-button--large--quiet:focus, 617 | .topcoat-button--large--quiet:hover:focus, 618 | .topcoat-button--cta:focus, 619 | .topcoat-button--large--cta:focus { 620 | border: 1px solid #0036ff; 621 | box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 622 | outline: 0; 623 | } 624 | 625 | .topcoat-button:active, 626 | .topcoat-button--large:active { 627 | border: 1px solid #9daca9; 628 | background-color: #d2d6d6; 629 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 630 | } 631 | 632 | /* topdoc 633 | name: Quiet Button 634 | description: A simple, yet quiet button 635 | modifiers: 636 | :active: Quiet button active state 637 | :disabled: Disabled state 638 | :hover: Hover state 639 | :focus: Focused 640 | markup: 641 | 642 | 643 | tags: 644 | - desktop 645 | - light 646 | - mobile 647 | - button 648 | - quiet 649 | */ 650 | 651 | .topcoat-button--quiet { 652 | background: transparent; 653 | border: 1px solid transparent; 654 | box-shadow: none; 655 | } 656 | 657 | .topcoat-button--quiet:hover, 658 | .topcoat-button--large--quiet:hover { 659 | text-shadow: 0 1px #fff; 660 | border: 1px solid #9daca9; 661 | box-shadow: inset 0 1px #fff; 662 | } 663 | 664 | .topcoat-button--quiet:active, 665 | .topcoat-button--quiet:focus:active, 666 | .topcoat-button--large--quiet:active, 667 | .topcoat-button--large--quiet:focus:active { 668 | color: #454545; 669 | text-shadow: 0 1px #fff; 670 | background-color: #d2d6d6; 671 | border: 1px solid #9daca9; 672 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 673 | } 674 | 675 | /* topdoc 676 | name: Large Button 677 | description: A big ol button 678 | modifiers: 679 | :active: Active state 680 | :disabled: Disabled state 681 | :hover: Hover state 682 | :focus: Focused 683 | markup: 684 | 685 | 686 | tags: 687 | - desktop 688 | - light 689 | - mobile 690 | - button 691 | - large 692 | */ 693 | 694 | .topcoat-button--large, 695 | .topcoat-button--large--quiet { 696 | font-size: 1.3rem; 697 | font-weight: 400; 698 | line-height: 4.375rem; 699 | padding: 0 1.25rem; 700 | } 701 | 702 | /* topdoc 703 | name: Large Quiet Button 704 | description: A large, yet quiet button 705 | modifiers: 706 | :active: Active state 707 | :disabled: Disabled state 708 | :hover: Hover state 709 | :focus: Focused 710 | markup: 711 | 712 | 713 | tags: 714 | - desktop 715 | - light 716 | - mobile 717 | - button 718 | - large 719 | - quiet 720 | */ 721 | 722 | .topcoat-button--large--quiet { 723 | background: transparent; 724 | border: 1px solid transparent; 725 | box-shadow: none; 726 | } 727 | 728 | /* topdoc 729 | name: Call To Action Button 730 | description: A CALL TO ARMS, er, ACTION! 731 | modifiers: 732 | :active: Active state 733 | :disabled: Disabled state 734 | :hover: Hover state 735 | :focus: Focused 736 | markup: 737 | 738 | 739 | tags: 740 | - desktop 741 | - light 742 | - mobile 743 | - button 744 | - call to action 745 | */ 746 | 747 | .topcoat-button--cta, 748 | .topcoat-button--large--cta { 749 | border: 1px solid #134f7f; 750 | background-color: #288edf; 751 | box-shadow: inset 0 1px rgba(255,255,255,0.36); 752 | color: #fff; 753 | font-weight: 500; 754 | text-shadow: 0 -1px rgba(0,0,0,0.36); 755 | } 756 | 757 | .topcoat-button--cta:hover, 758 | .topcoat-button--large--cta:hover { 759 | background-color: #4ca1e4; 760 | } 761 | 762 | .topcoat-button--cta:active, 763 | .topcoat-button--large--cta:active { 764 | background-color: #1e7dc8; 765 | box-shadow: inset 0 1px rgba(0,0,0,0.12); 766 | } 767 | 768 | /* topdoc 769 | name: Large Call To Action Button 770 | description: Like call to action, but bigger 771 | modifiers: 772 | :active: Active state 773 | :disabled: Disabled state 774 | :hover: Hover state 775 | :focus: Focused 776 | markup: 777 | 778 | 779 | tags: 780 | - desktop 781 | - light 782 | - mobile 783 | - button 784 | - large 785 | - call to action 786 | */ 787 | 788 | .topcoat-button--large--cta { 789 | font-size: 1.3rem; 790 | font-weight: 400; 791 | line-height: 4.375rem; 792 | padding: 0 1.25rem; 793 | } 794 | 795 | /** 796 | * 797 | * Copyright 2012 Adobe Systems Inc.; 798 | * 799 | * Licensed under the Apache License, Version 2.0 (the "License"); 800 | * you may not use this file except in compliance with the License. 801 | * You may obtain a copy of the License at 802 | * 803 | * http://www.apache.org/licenses/LICENSE-2.0 804 | * 805 | * Unless required by applicable law or agreed to in writing, software 806 | * distributed under the License is distributed on an "AS IS" BASIS, 807 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 808 | * See the License for the specific language governing permissions and 809 | * limitations under the License. 810 | * 811 | */ 812 | 813 | input[type="checkbox"] { 814 | position: absolute; 815 | overflow: hidden; 816 | padding: 0; 817 | border: 0; 818 | opacity: 0.001; 819 | z-index: 1; 820 | vertical-align: top; 821 | outline: none; 822 | } 823 | 824 | .checkbox { 825 | -moz-box-sizing: border-box; 826 | box-sizing: border-box; 827 | background-clip: padding-box; 828 | position: relative; 829 | display: inline-block; 830 | vertical-align: top; 831 | cursor: default; 832 | -webkit-user-select: none; 833 | -moz-user-select: none; 834 | -ms-user-select: none; 835 | user-select: none; 836 | } 837 | 838 | .checkbox__label { 839 | position: relative; 840 | display: inline-block; 841 | vertical-align: top; 842 | cursor: default; 843 | -webkit-user-select: none; 844 | -moz-user-select: none; 845 | -ms-user-select: none; 846 | user-select: none; 847 | } 848 | 849 | .checkbox--disabled { 850 | opacity: 0.3; 851 | cursor: default; 852 | pointer-events: none; 853 | } 854 | 855 | .checkbox:before, 856 | .checkbox:after { 857 | content: ''; 858 | position: absolute; 859 | } 860 | 861 | .checkbox:before { 862 | -moz-box-sizing: border-box; 863 | box-sizing: border-box; 864 | background-clip: padding-box; 865 | } 866 | 867 | /** 868 | * 869 | * Copyright 2012 Adobe Systems Inc.; 870 | * 871 | * Licensed under the Apache License, Version 2.0 (the "License"); 872 | * you may not use this file except in compliance with the License. 873 | * You may obtain a copy of the License at 874 | * 875 | * http://www.apache.org/licenses/LICENSE-2.0 876 | * 877 | * Unless required by applicable law or agreed to in writing, software 878 | * distributed under the License is distributed on an "AS IS" BASIS, 879 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 880 | * See the License for the specific language governing permissions and 881 | * limitations under the License. 882 | * 883 | */ 884 | 885 | /** 886 | * 887 | * Copyright 2012 Adobe Systems Inc.; 888 | * 889 | * Licensed under the Apache License, Version 2.0 (the "License"); 890 | * you may not use this file except in compliance with the License. 891 | * You may obtain a copy of the License at 892 | * 893 | * http://www.apache.org/licenses/LICENSE-2.0 894 | * 895 | * Unless required by applicable law or agreed to in writing, software 896 | * distributed under the License is distributed on an "AS IS" BASIS, 897 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 898 | * See the License for the specific language governing permissions and 899 | * limitations under the License. 900 | * 901 | */ 902 | 903 | /** 904 | * 905 | * Copyright 2012 Adobe Systems Inc.; 906 | * 907 | * Licensed under the Apache License, Version 2.0 (the "License"); 908 | * you may not use this file except in compliance with the License. 909 | * You may obtain a copy of the License at 910 | * 911 | * http://www.apache.org/licenses/LICENSE-2.0 912 | * 913 | * Unless required by applicable law or agreed to in writing, software 914 | * distributed under the License is distributed on an "AS IS" BASIS, 915 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 916 | * See the License for the specific language governing permissions and 917 | * limitations under the License. 918 | * 919 | */ 920 | 921 | input[type="checkbox"] { 922 | position: absolute; 923 | overflow: hidden; 924 | padding: 0; 925 | border: 0; 926 | opacity: 0.001; 927 | z-index: 1; 928 | vertical-align: top; 929 | outline: none; 930 | } 931 | 932 | .checkbox, 933 | .topcoat-checkbox__checkmark { 934 | -moz-box-sizing: border-box; 935 | box-sizing: border-box; 936 | background-clip: padding-box; 937 | position: relative; 938 | display: inline-block; 939 | vertical-align: top; 940 | cursor: default; 941 | -webkit-user-select: none; 942 | -moz-user-select: none; 943 | -ms-user-select: none; 944 | user-select: none; 945 | } 946 | 947 | .checkbox__label, 948 | .topcoat-checkbox { 949 | position: relative; 950 | display: inline-block; 951 | vertical-align: top; 952 | cursor: default; 953 | -webkit-user-select: none; 954 | -moz-user-select: none; 955 | -ms-user-select: none; 956 | user-select: none; 957 | } 958 | 959 | .checkbox--disabled, 960 | input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark { 961 | opacity: 0.3; 962 | cursor: default; 963 | pointer-events: none; 964 | } 965 | 966 | .checkbox:before, 967 | .checkbox:after, 968 | .topcoat-checkbox__checkmark:before, 969 | .topcoat-checkbox__checkmark:after { 970 | content: ''; 971 | position: absolute; 972 | } 973 | 974 | .checkbox:before, 975 | .topcoat-checkbox__checkmark:before { 976 | -moz-box-sizing: border-box; 977 | box-sizing: border-box; 978 | background-clip: padding-box; 979 | } 980 | 981 | /* topdoc 982 | name: Checkbox 983 | description: Default skin for Topcoat checkbox 984 | modifiers: 985 | :focus: Focus state 986 | :disabled: Disabled state 987 | markup: 988 | 993 |
994 |
995 | 1000 | examples: 1001 | mobile checkbox: http://codepen.io/Topcoat/pen/piHcs 1002 | tags: 1003 | - desktop 1004 | - light 1005 | - mobile 1006 | - checkbox 1007 | */ 1008 | 1009 | .topcoat-checkbox__checkmark { 1010 | height: 2rem; 1011 | } 1012 | 1013 | input[type="checkbox"] { 1014 | height: 2rem; 1015 | width: 2rem; 1016 | margin-top: 0; 1017 | margin-right: -2rem; 1018 | margin-bottom: -2rem; 1019 | margin-left: 0; 1020 | } 1021 | 1022 | input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after { 1023 | opacity: 1; 1024 | } 1025 | 1026 | .topcoat-checkbox { 1027 | line-height: 2rem; 1028 | } 1029 | 1030 | .topcoat-checkbox__checkmark:before { 1031 | width: 2rem; 1032 | height: 2rem; 1033 | background: #e5e9e8; 1034 | border: 1px solid #9daca9; 1035 | border-radius: 3px; 1036 | box-shadow: inset 0 1px #fff; 1037 | } 1038 | 1039 | .topcoat-checkbox__checkmark { 1040 | width: 2rem; 1041 | height: 2rem; 1042 | } 1043 | 1044 | .topcoat-checkbox__checkmark:after { 1045 | top: 1px; 1046 | left: 2px; 1047 | opacity: 0; 1048 | width: 28px; 1049 | height: 11px; 1050 | background: transparent; 1051 | border: 7px solid #454545; 1052 | border-width: 7px; 1053 | border-top: none; 1054 | border-right: none; 1055 | border-radius: 2px; 1056 | -webkit-transform: rotate(-50deg); 1057 | -ms-transform: rotate(-50deg); 1058 | transform: rotate(-50deg); 1059 | } 1060 | 1061 | input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before { 1062 | border: 1px solid #0036ff; 1063 | box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 1064 | } 1065 | 1066 | input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before { 1067 | border: 1px solid #9daca9; 1068 | background-color: #d2d6d6; 1069 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 1070 | } 1071 | 1072 | input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before { 1073 | border: 1px solid #9daca9; 1074 | background: #e5e9e8; 1075 | box-shadow: inset 0 1px #fff; 1076 | } 1077 | 1078 | /** 1079 | * 1080 | * Copyright 2012 Adobe Systems Inc.; 1081 | * 1082 | * Licensed under the Apache License, Version 2.0 (the "License"); 1083 | * you may not use this file except in compliance with the License. 1084 | * You may obtain a copy of the License at 1085 | * 1086 | * http://www.apache.org/licenses/LICENSE-2.0 1087 | * 1088 | * Unless required by applicable law or agreed to in writing, software 1089 | * distributed under the License is distributed on an "AS IS" BASIS, 1090 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1091 | * See the License for the specific language governing permissions and 1092 | * limitations under the License. 1093 | * 1094 | */ 1095 | 1096 | /** 1097 | * 1098 | * Copyright 2012 Adobe Systems Inc.; 1099 | * 1100 | * Licensed under the Apache License, Version 2.0 (the "License"); 1101 | * you may not use this file except in compliance with the License. 1102 | * You may obtain a copy of the License at 1103 | * 1104 | * http://www.apache.org/licenses/LICENSE-2.0 1105 | * 1106 | * Unless required by applicable law or agreed to in writing, software 1107 | * distributed under the License is distributed on an "AS IS" BASIS, 1108 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1109 | * See the License for the specific language governing permissions and 1110 | * limitations under the License. 1111 | * 1112 | */ 1113 | 1114 | .button, 1115 | .topcoat-icon-button, 1116 | .topcoat-icon-button--quiet, 1117 | .topcoat-icon-button--large, 1118 | .topcoat-icon-button--large--quiet { 1119 | position: relative; 1120 | display: inline-block; 1121 | vertical-align: top; 1122 | -moz-box-sizing: border-box; 1123 | box-sizing: border-box; 1124 | background-clip: padding-box; 1125 | padding: 0; 1126 | margin: 0; 1127 | font: inherit; 1128 | color: inherit; 1129 | background: transparent; 1130 | border: none; 1131 | cursor: default; 1132 | -webkit-user-select: none; 1133 | -moz-user-select: none; 1134 | -ms-user-select: none; 1135 | user-select: none; 1136 | text-overflow: ellipsis; 1137 | white-space: nowrap; 1138 | overflow: hidden; 1139 | text-decoration: none; 1140 | } 1141 | 1142 | .button--quiet { 1143 | background: transparent; 1144 | border: 1px solid transparent; 1145 | box-shadow: none; 1146 | } 1147 | 1148 | .button--disabled, 1149 | .topcoat-icon-button:disabled, 1150 | .topcoat-icon-button--quiet:disabled, 1151 | .topcoat-icon-button--large:disabled, 1152 | .topcoat-icon-button--large--quiet:disabled { 1153 | opacity: 0.3; 1154 | cursor: default; 1155 | pointer-events: none; 1156 | } 1157 | 1158 | /* topdoc 1159 | name: Icon Button 1160 | description: Like button, but it has an icon. 1161 | modifiers: 1162 | :active: Active state 1163 | :disabled: Disabled state 1164 | :hover: Hover state 1165 | :focus: Focused 1166 | markup: 1167 | 1170 | 1173 | tags: 1174 | - desktop 1175 | - light 1176 | - mobile 1177 | - button 1178 | - icon 1179 | */ 1180 | 1181 | .topcoat-icon-button, 1182 | .topcoat-icon-button--quiet, 1183 | .topcoat-icon-button--large, 1184 | .topcoat-icon-button--large--quiet { 1185 | padding: 0 0.75rem; 1186 | line-height: 3rem; 1187 | letter-spacing: 1px; 1188 | color: #454545; 1189 | text-shadow: 0 1px #fff; 1190 | vertical-align: baseline; 1191 | background-color: #e5e9e8; 1192 | box-shadow: inset 0 1px #fff; 1193 | border: 1px solid #9daca9; 1194 | border-radius: 6px; 1195 | } 1196 | 1197 | .topcoat-icon-button:hover, 1198 | .topcoat-icon-button--quiet:hover, 1199 | .topcoat-icon-button--large:hover, 1200 | .topcoat-icon-button--large--quiet:hover { 1201 | background-color: #eff1f1; 1202 | } 1203 | 1204 | .topcoat-icon-button:focus, 1205 | .topcoat-icon-button--quiet:focus, 1206 | .topcoat-icon-button--quiet:hover:focus, 1207 | .topcoat-icon-button--large:focus, 1208 | .topcoat-icon-button--large--quiet:focus, 1209 | .topcoat-icon-button--large--quiet:hover:focus { 1210 | border: 1px solid #0036ff; 1211 | box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 1212 | outline: 0; 1213 | } 1214 | 1215 | .topcoat-icon-button:active, 1216 | .topcoat-icon-button--large:active { 1217 | border: 1px solid #9daca9; 1218 | background-color: #d2d6d6; 1219 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 1220 | } 1221 | 1222 | /* topdoc 1223 | name: Quiet Icon Button 1224 | description: Like quiet button, but it has an icon. 1225 | modifiers: 1226 | :active: Active state 1227 | :disabled: Disabled state 1228 | :hover: Hover state 1229 | :focus: Focused 1230 | markup: 1231 | 1234 | 1237 | tags: 1238 | - desktop 1239 | - light 1240 | - mobile 1241 | - button 1242 | - icon 1243 | - quiet 1244 | */ 1245 | 1246 | .topcoat-icon-button--quiet { 1247 | background: transparent; 1248 | border: 1px solid transparent; 1249 | box-shadow: none; 1250 | } 1251 | 1252 | .topcoat-icon-button--quiet:hover, 1253 | .topcoat-icon-button--large--quiet:hover { 1254 | text-shadow: 0 1px #fff; 1255 | border: 1px solid #9daca9; 1256 | box-shadow: inset 0 1px #fff; 1257 | } 1258 | 1259 | .topcoat-icon-button--quiet:active, 1260 | .topcoat-icon-button--quiet:focus:active, 1261 | .topcoat-icon-button--large--quiet:active, 1262 | .topcoat-icon-button--large--quiet:focus:active { 1263 | color: #454545; 1264 | text-shadow: 0 1px #fff; 1265 | background-color: #d2d6d6; 1266 | border: 1px solid #9daca9; 1267 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 1268 | } 1269 | 1270 | /* topdoc 1271 | name: Large Icon Button 1272 | description: Like large button, but it has an icon. 1273 | modifiers: 1274 | :active: Active state 1275 | :disabled: Disabled state 1276 | :hover: Hover state 1277 | :focus: Focused 1278 | markup: 1279 | 1282 | 1285 | tags: 1286 | - desktop 1287 | - light 1288 | - mobile 1289 | - button 1290 | - icon 1291 | - large 1292 | */ 1293 | 1294 | .topcoat-icon-button--large, 1295 | .topcoat-icon-button--large--quiet { 1296 | width: 4.375rem; 1297 | height: 4.375rem; 1298 | line-height: 4.375rem; 1299 | } 1300 | 1301 | /* topdoc 1302 | name: Large Quiet Icon Button 1303 | description: Like large button, but it has an icon and this one is quiet. 1304 | modifiers: 1305 | :active: Active state 1306 | :disabled: Disabled state 1307 | :hover: Hover state 1308 | markup: 1309 | 1312 | 1315 | tags: 1316 | - desktop 1317 | - light 1318 | - mobile 1319 | - button 1320 | - icon 1321 | - large 1322 | - quiet 1323 | */ 1324 | 1325 | .topcoat-icon-button--large--quiet { 1326 | background: transparent; 1327 | border: 1px solid transparent; 1328 | box-shadow: none; 1329 | } 1330 | 1331 | .topcoat-icon, 1332 | .topcoat-icon--large { 1333 | position: relative; 1334 | display: inline-block; 1335 | vertical-align: top; 1336 | overflow: hidden; 1337 | width: 1.62rem; 1338 | height: 1.62rem; 1339 | vertical-align: middle; 1340 | top: -1px; 1341 | } 1342 | 1343 | .topcoat-icon--large { 1344 | width: 2.499999998125rem; 1345 | height: 2.499999998125rem; 1346 | top: -2px; 1347 | } 1348 | 1349 | /** 1350 | * 1351 | * Copyright 2012 Adobe Systems Inc.; 1352 | * 1353 | * Licensed under the Apache License, Version 2.0 (the "License"); 1354 | * you may not use this file except in compliance with the License. 1355 | * You may obtain a copy of the License at 1356 | * 1357 | * http://www.apache.org/licenses/LICENSE-2.0 1358 | * 1359 | * Unless required by applicable law or agreed to in writing, software 1360 | * distributed under the License is distributed on an "AS IS" BASIS, 1361 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1362 | * See the License for the specific language governing permissions and 1363 | * limitations under the License. 1364 | * 1365 | */ 1366 | 1367 | /** 1368 | * 1369 | * Copyright 2012 Adobe Systems Inc.; 1370 | * 1371 | * Licensed under the Apache License, Version 2.0 (the "License"); 1372 | * you may not use this file except in compliance with the License. 1373 | * You may obtain a copy of the License at 1374 | * 1375 | * http://www.apache.org/licenses/LICENSE-2.0 1376 | * 1377 | * Unless required by applicable law or agreed to in writing, software 1378 | * distributed under the License is distributed on an "AS IS" BASIS, 1379 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1380 | * See the License for the specific language governing permissions and 1381 | * limitations under the License. 1382 | * 1383 | */ 1384 | 1385 | .input { 1386 | padding: 0; 1387 | margin: 0; 1388 | font: inherit; 1389 | color: inherit; 1390 | background: transparent; 1391 | border: none; 1392 | -moz-box-sizing: border-box; 1393 | box-sizing: border-box; 1394 | background-clip: padding-box; 1395 | vertical-align: top; 1396 | outline: none; 1397 | } 1398 | 1399 | .input:disabled { 1400 | opacity: 0.3; 1401 | cursor: default; 1402 | pointer-events: none; 1403 | } 1404 | 1405 | /** 1406 | * 1407 | * Copyright 2012 Adobe Systems Inc.; 1408 | * 1409 | * Licensed under the Apache License, Version 2.0 (the "License"); 1410 | * you may not use this file except in compliance with the License. 1411 | * You may obtain a copy of the License at 1412 | * 1413 | * http://www.apache.org/licenses/LICENSE-2.0 1414 | * 1415 | * Unless required by applicable law or agreed to in writing, software 1416 | * distributed under the License is distributed on an "AS IS" BASIS, 1417 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1418 | * See the License for the specific language governing permissions and 1419 | * limitations under the License. 1420 | * 1421 | */ 1422 | 1423 | /** 1424 | * 1425 | * Copyright 2012 Adobe Systems Inc.; 1426 | * 1427 | * Licensed under the Apache License, Version 2.0 (the "License"); 1428 | * you may not use this file except in compliance with the License. 1429 | * You may obtain a copy of the License at 1430 | * 1431 | * http://www.apache.org/licenses/LICENSE-2.0 1432 | * 1433 | * Unless required by applicable law or agreed to in writing, software 1434 | * distributed under the License is distributed on an "AS IS" BASIS, 1435 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1436 | * See the License for the specific language governing permissions and 1437 | * limitations under the License. 1438 | * 1439 | */ 1440 | 1441 | .list { 1442 | padding: 0; 1443 | margin: 0; 1444 | font: inherit; 1445 | color: inherit; 1446 | background: transparent; 1447 | border: none; 1448 | cursor: default; 1449 | -webkit-user-select: none; 1450 | -moz-user-select: none; 1451 | -ms-user-select: none; 1452 | user-select: none; 1453 | overflow: auto; 1454 | -webkit-overflow-scrolling: touch; 1455 | } 1456 | 1457 | .list__header { 1458 | margin: 0; 1459 | } 1460 | 1461 | .list__container { 1462 | padding: 0; 1463 | margin: 0; 1464 | list-style-type: none; 1465 | } 1466 | 1467 | .list__item { 1468 | margin: 0; 1469 | padding: 0; 1470 | } 1471 | 1472 | /** 1473 | * 1474 | * Copyright 2012 Adobe Systems Inc.; 1475 | * 1476 | * Licensed under the Apache License, Version 2.0 (the "License"); 1477 | * you may not use this file except in compliance with the License. 1478 | * You may obtain a copy of the License at 1479 | * 1480 | * http://www.apache.org/licenses/LICENSE-2.0 1481 | * 1482 | * Unless required by applicable law or agreed to in writing, software 1483 | * distributed under the License is distributed on an "AS IS" BASIS, 1484 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1485 | * See the License for the specific language governing permissions and 1486 | * limitations under the License. 1487 | * 1488 | */ 1489 | 1490 | /** 1491 | * 1492 | * Copyright 2012 Adobe Systems Inc.; 1493 | * 1494 | * Licensed under the Apache License, Version 2.0 (the "License"); 1495 | * you may not use this file except in compliance with the License. 1496 | * You may obtain a copy of the License at 1497 | * 1498 | * http://www.apache.org/licenses/LICENSE-2.0 1499 | * 1500 | * Unless required by applicable law or agreed to in writing, software 1501 | * distributed under the License is distributed on an "AS IS" BASIS, 1502 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1503 | * See the License for the specific language governing permissions and 1504 | * limitations under the License. 1505 | * 1506 | */ 1507 | 1508 | .list, 1509 | .topcoat-list { 1510 | padding: 0; 1511 | margin: 0; 1512 | font: inherit; 1513 | color: inherit; 1514 | background: transparent; 1515 | border: none; 1516 | cursor: default; 1517 | -webkit-user-select: none; 1518 | -moz-user-select: none; 1519 | -ms-user-select: none; 1520 | user-select: none; 1521 | overflow: auto; 1522 | -webkit-overflow-scrolling: touch; 1523 | } 1524 | 1525 | .list__header, 1526 | .topcoat-list__header { 1527 | margin: 0; 1528 | } 1529 | 1530 | .list__container, 1531 | .topcoat-list__container { 1532 | padding: 0; 1533 | margin: 0; 1534 | list-style-type: none; 1535 | } 1536 | 1537 | .list__item, 1538 | .topcoat-list__item { 1539 | margin: 0; 1540 | padding: 0; 1541 | } 1542 | 1543 | /* topdoc 1544 | name: List 1545 | description: Topcoat default list skin 1546 | markup: 1547 |
1548 |

Category

1549 | 1560 |
1561 | tags: 1562 | - mobile 1563 | - list 1564 | */ 1565 | 1566 | .topcoat-list { 1567 | border-top: 1px solid #9daca9; 1568 | border-bottom: 1px solid #fff; 1569 | background-color: #e5e9e8; 1570 | } 1571 | 1572 | .topcoat-list__header { 1573 | padding: 4px 20px; 1574 | font-size: 0.9em; 1575 | font-weight: 400; 1576 | background-color: #d2d6d6; 1577 | color: #454545; 1578 | text-shadow: 0 1px 0 rgba(255,255,255,0.5); 1579 | border-top: 1px solid rgba(255,255,255,0.5); 1580 | border-bottom: 1px solid rgba(255,255,255,0.23); 1581 | } 1582 | 1583 | .topcoat-list__container { 1584 | border-top: 1px solid #9daca9; 1585 | color: #454545; 1586 | } 1587 | 1588 | .topcoat-list__item { 1589 | padding: 1.25rem; 1590 | border-top: 1px solid #fff; 1591 | border-bottom: 1px solid #9daca9; 1592 | } 1593 | 1594 | .topcoat-list__item:first-child { 1595 | border-top: 1px solid #d6dcdb; 1596 | } 1597 | 1598 | /** 1599 | * 1600 | * Copyright 2012 Adobe Systems Inc.; 1601 | * 1602 | * Licensed under the Apache License, Version 2.0 (the "License"); 1603 | * you may not use this file except in compliance with the License. 1604 | * You may obtain a copy of the License at 1605 | * 1606 | * http://www.apache.org/licenses/LICENSE-2.0 1607 | * 1608 | * Unless required by applicable law or agreed to in writing, software 1609 | * distributed under the License is distributed on an "AS IS" BASIS, 1610 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1611 | * See the License for the specific language governing permissions and 1612 | * limitations under the License. 1613 | * 1614 | */ 1615 | 1616 | /** 1617 | * 1618 | * Copyright 2012 Adobe Systems Inc.; 1619 | * 1620 | * Licensed under the Apache License, Version 2.0 (the "License"); 1621 | * you may not use this file except in compliance with the License. 1622 | * You may obtain a copy of the License at 1623 | * 1624 | * http://www.apache.org/licenses/LICENSE-2.0 1625 | * 1626 | * Unless required by applicable law or agreed to in writing, software 1627 | * distributed under the License is distributed on an "AS IS" BASIS, 1628 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1629 | * See the License for the specific language governing permissions and 1630 | * limitations under the License. 1631 | * 1632 | */ 1633 | 1634 | .navigation-bar { 1635 | -moz-box-sizing: border-box; 1636 | box-sizing: border-box; 1637 | background-clip: padding-box; 1638 | white-space: nowrap; 1639 | overflow: hidden; 1640 | word-spacing: 0; 1641 | padding: 0; 1642 | margin: 0; 1643 | font: inherit; 1644 | color: inherit; 1645 | background: transparent; 1646 | border: none; 1647 | cursor: default; 1648 | -webkit-user-select: none; 1649 | -moz-user-select: none; 1650 | -ms-user-select: none; 1651 | user-select: none; 1652 | } 1653 | 1654 | .navigation-bar__item { 1655 | -moz-box-sizing: border-box; 1656 | box-sizing: border-box; 1657 | background-clip: padding-box; 1658 | position: relative; 1659 | display: inline-block; 1660 | vertical-align: top; 1661 | padding: 0; 1662 | margin: 0; 1663 | font: inherit; 1664 | color: inherit; 1665 | background: transparent; 1666 | border: none; 1667 | } 1668 | 1669 | .navigation-bar__title { 1670 | padding: 0; 1671 | margin: 0; 1672 | font: inherit; 1673 | color: inherit; 1674 | background: transparent; 1675 | border: none; 1676 | text-overflow: ellipsis; 1677 | white-space: nowrap; 1678 | overflow: hidden; 1679 | } 1680 | 1681 | /** 1682 | * 1683 | * Copyright 2012 Adobe Systems Inc.; 1684 | * 1685 | * Licensed under the Apache License, Version 2.0 (the "License"); 1686 | * you may not use this file except in compliance with the License. 1687 | * You may obtain a copy of the License at 1688 | * 1689 | * http://www.apache.org/licenses/LICENSE-2.0 1690 | * 1691 | * Unless required by applicable law or agreed to in writing, software 1692 | * distributed under the License is distributed on an "AS IS" BASIS, 1693 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1694 | * See the License for the specific language governing permissions and 1695 | * limitations under the License. 1696 | * 1697 | */ 1698 | 1699 | /** 1700 | * 1701 | * Copyright 2012 Adobe Systems Inc.; 1702 | * 1703 | * Licensed under the Apache License, Version 2.0 (the "License"); 1704 | * you may not use this file except in compliance with the License. 1705 | * You may obtain a copy of the License at 1706 | * 1707 | * http://www.apache.org/licenses/LICENSE-2.0 1708 | * 1709 | * Unless required by applicable law or agreed to in writing, software 1710 | * distributed under the License is distributed on an "AS IS" BASIS, 1711 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1712 | * See the License for the specific language governing permissions and 1713 | * limitations under the License. 1714 | * 1715 | */ 1716 | 1717 | .navigation-bar, 1718 | .topcoat-navigation-bar { 1719 | -moz-box-sizing: border-box; 1720 | box-sizing: border-box; 1721 | background-clip: padding-box; 1722 | white-space: nowrap; 1723 | overflow: hidden; 1724 | word-spacing: 0; 1725 | padding: 0; 1726 | margin: 0; 1727 | font: inherit; 1728 | color: inherit; 1729 | background: transparent; 1730 | border: none; 1731 | cursor: default; 1732 | -webkit-user-select: none; 1733 | -moz-user-select: none; 1734 | -ms-user-select: none; 1735 | user-select: none; 1736 | } 1737 | 1738 | .navigation-bar__item, 1739 | .topcoat-navigation-bar__item { 1740 | -moz-box-sizing: border-box; 1741 | box-sizing: border-box; 1742 | background-clip: padding-box; 1743 | position: relative; 1744 | display: inline-block; 1745 | vertical-align: top; 1746 | padding: 0; 1747 | margin: 0; 1748 | font: inherit; 1749 | color: inherit; 1750 | background: transparent; 1751 | border: none; 1752 | } 1753 | 1754 | .navigation-bar__title, 1755 | .topcoat-navigation-bar__title { 1756 | padding: 0; 1757 | margin: 0; 1758 | font: inherit; 1759 | color: inherit; 1760 | background: transparent; 1761 | border: none; 1762 | text-overflow: ellipsis; 1763 | white-space: nowrap; 1764 | overflow: hidden; 1765 | } 1766 | 1767 | /* topdoc 1768 | name: Navigation Bar 1769 | description: A place where navigation goes to drink 1770 | markup: 1771 |
1772 |
1773 |

Header

1774 |
1775 |
1776 | tags: 1777 | - desktop 1778 | - light 1779 | - mobile 1780 | - navigation 1781 | - bar 1782 | */ 1783 | 1784 | .topcoat-navigation-bar { 1785 | height: 4.375rem; 1786 | padding-left: 1rem; 1787 | padding-right: 1rem; 1788 | background: #e5e9e8; 1789 | color: #454545; 1790 | box-shadow: inset 0 -1px #9daca9, 0 1px #d6dcdb; 1791 | } 1792 | 1793 | .topcoat-navigation-bar__item { 1794 | margin: 0; 1795 | line-height: 4.375rem; 1796 | vertical-align: top; 1797 | } 1798 | 1799 | .topcoat-navigation-bar__title { 1800 | font-size: 1.3rem; 1801 | font-weight: 400; 1802 | color: #454545; 1803 | } 1804 | 1805 | /* 1806 | Copyright 2012 Adobe Systems Inc.; 1807 | Licensed under the Apache License, Version 2.0 (the "License"); 1808 | you may not use this file except in compliance with the License. 1809 | You may obtain a copy of the License at 1810 | 1811 | http://www.apache.org/licenses/LICENSE-2.0 1812 | 1813 | Unless required by applicable law or agreed to in writing, software 1814 | distributed under the License is distributed on an "AS IS" BASIS, 1815 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1816 | See the License for the specific language governing permissions and 1817 | limitations under the License. 1818 | */ 1819 | 1820 | /** 1821 | * 1822 | * Copyright 2012 Adobe Systems Inc.; 1823 | * 1824 | * Licensed under the Apache License, Version 2.0 (the "License"); 1825 | * you may not use this file except in compliance with the License. 1826 | * You may obtain a copy of the License at 1827 | * 1828 | * http://www.apache.org/licenses/LICENSE-2.0 1829 | * 1830 | * Unless required by applicable law or agreed to in writing, software 1831 | * distributed under the License is distributed on an "AS IS" BASIS, 1832 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1833 | * See the License for the specific language governing permissions and 1834 | * limitations under the License. 1835 | * 1836 | */ 1837 | 1838 | .notification { 1839 | position: relative; 1840 | display: inline-block; 1841 | vertical-align: top; 1842 | -moz-box-sizing: border-box; 1843 | box-sizing: border-box; 1844 | background-clip: padding-box; 1845 | padding: 0; 1846 | margin: 0; 1847 | font: inherit; 1848 | color: inherit; 1849 | background: transparent; 1850 | border: none; 1851 | cursor: default; 1852 | -webkit-user-select: none; 1853 | -moz-user-select: none; 1854 | -ms-user-select: none; 1855 | user-select: none; 1856 | text-overflow: ellipsis; 1857 | white-space: nowrap; 1858 | overflow: hidden; 1859 | text-decoration: none; 1860 | } 1861 | 1862 | /* 1863 | Copyright 2012 Adobe Systems Inc.; 1864 | Licensed under the Apache License, Version 2.0 (the "License"); 1865 | you may not use this file except in compliance with the License. 1866 | You may obtain a copy of the License at 1867 | 1868 | http://www.apache.org/licenses/LICENSE-2.0 1869 | 1870 | Unless required by applicable law or agreed to in writing, software 1871 | distributed under the License is distributed on an "AS IS" BASIS, 1872 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1873 | See the License for the specific language governing permissions and 1874 | limitations under the License. 1875 | */ 1876 | 1877 | /** 1878 | * 1879 | * Copyright 2012 Adobe Systems Inc.; 1880 | * 1881 | * Licensed under the Apache License, Version 2.0 (the "License"); 1882 | * you may not use this file except in compliance with the License. 1883 | * You may obtain a copy of the License at 1884 | * 1885 | * http://www.apache.org/licenses/LICENSE-2.0 1886 | * 1887 | * Unless required by applicable law or agreed to in writing, software 1888 | * distributed under the License is distributed on an "AS IS" BASIS, 1889 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1890 | * See the License for the specific language governing permissions and 1891 | * limitations under the License. 1892 | * 1893 | */ 1894 | 1895 | .notification, 1896 | .topcoat-notification { 1897 | position: relative; 1898 | display: inline-block; 1899 | vertical-align: top; 1900 | -moz-box-sizing: border-box; 1901 | box-sizing: border-box; 1902 | background-clip: padding-box; 1903 | padding: 0; 1904 | margin: 0; 1905 | font: inherit; 1906 | color: inherit; 1907 | background: transparent; 1908 | border: none; 1909 | cursor: default; 1910 | -webkit-user-select: none; 1911 | -moz-user-select: none; 1912 | -ms-user-select: none; 1913 | user-select: none; 1914 | text-overflow: ellipsis; 1915 | white-space: nowrap; 1916 | overflow: hidden; 1917 | text-decoration: none; 1918 | } 1919 | 1920 | /* topdoc 1921 | name: Notification 1922 | description: Notification badge 1923 | markup: 1924 | 1 1925 | tags: 1926 | - desktop 1927 | - light 1928 | - mobile 1929 | - notification 1930 | */ 1931 | 1932 | .topcoat-notification { 1933 | padding: 0.15em 0.5em 0.2em; 1934 | border-radius: 2px; 1935 | background-color: #ec514e; 1936 | color: #fff; 1937 | } 1938 | 1939 | /** 1940 | * 1941 | * Copyright 2012 Adobe Systems Inc.; 1942 | * 1943 | * Licensed under the Apache License, Version 2.0 (the "License"); 1944 | * you may not use this file except in compliance with the License. 1945 | * You may obtain a copy of the License at 1946 | * 1947 | * http://www.apache.org/licenses/LICENSE-2.0 1948 | * 1949 | * Unless required by applicable law or agreed to in writing, software 1950 | * distributed under the License is distributed on an "AS IS" BASIS, 1951 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1952 | * See the License for the specific language governing permissions and 1953 | * limitations under the License. 1954 | * 1955 | */ 1956 | 1957 | /** 1958 | * 1959 | * Copyright 2012 Adobe Systems Inc.; 1960 | * 1961 | * Licensed under the Apache License, Version 2.0 (the "License"); 1962 | * you may not use this file except in compliance with the License. 1963 | * You may obtain a copy of the License at 1964 | * 1965 | * http://www.apache.org/licenses/LICENSE-2.0 1966 | * 1967 | * Unless required by applicable law or agreed to in writing, software 1968 | * distributed under the License is distributed on an "AS IS" BASIS, 1969 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1970 | * See the License for the specific language governing permissions and 1971 | * limitations under the License. 1972 | * 1973 | */ 1974 | 1975 | input[type="radio"] { 1976 | position: absolute; 1977 | overflow: hidden; 1978 | padding: 0; 1979 | border: 0; 1980 | opacity: 0.001; 1981 | z-index: 1; 1982 | vertical-align: top; 1983 | outline: none; 1984 | } 1985 | 1986 | .radio-button { 1987 | -moz-box-sizing: border-box; 1988 | box-sizing: border-box; 1989 | background-clip: padding-box; 1990 | position: relative; 1991 | display: inline-block; 1992 | vertical-align: top; 1993 | cursor: default; 1994 | -webkit-user-select: none; 1995 | -moz-user-select: none; 1996 | -ms-user-select: none; 1997 | user-select: none; 1998 | } 1999 | 2000 | .radio-button__label { 2001 | position: relative; 2002 | display: inline-block; 2003 | vertical-align: top; 2004 | cursor: default; 2005 | -webkit-user-select: none; 2006 | -moz-user-select: none; 2007 | -ms-user-select: none; 2008 | user-select: none; 2009 | } 2010 | 2011 | .radio-button:before, 2012 | .radio-button:after { 2013 | content: ''; 2014 | position: absolute; 2015 | border-radius: 100%; 2016 | } 2017 | 2018 | .radio-button:after { 2019 | top: 50%; 2020 | left: 50%; 2021 | -webkit-transform: translate(-50%, -50%); 2022 | -ms-transform: translate(-50%, -50%); 2023 | transform: translate(-50%, -50%); 2024 | } 2025 | 2026 | .radio-button:before { 2027 | -moz-box-sizing: border-box; 2028 | box-sizing: border-box; 2029 | background-clip: padding-box; 2030 | } 2031 | 2032 | .radio-button--disabled { 2033 | opacity: 0.3; 2034 | cursor: default; 2035 | pointer-events: none; 2036 | } 2037 | 2038 | /** 2039 | * 2040 | * Copyright 2012 Adobe Systems Inc.; 2041 | * 2042 | * Licensed under the Apache License, Version 2.0 (the "License"); 2043 | * you may not use this file except in compliance with the License. 2044 | * You may obtain a copy of the License at 2045 | * 2046 | * http://www.apache.org/licenses/LICENSE-2.0 2047 | * 2048 | * Unless required by applicable law or agreed to in writing, software 2049 | * distributed under the License is distributed on an "AS IS" BASIS, 2050 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2051 | * See the License for the specific language governing permissions and 2052 | * limitations under the License. 2053 | * 2054 | */ 2055 | 2056 | /** 2057 | * 2058 | * Copyright 2012 Adobe Systems Inc.; 2059 | * 2060 | * Licensed under the Apache License, Version 2.0 (the "License"); 2061 | * you may not use this file except in compliance with the License. 2062 | * You may obtain a copy of the License at 2063 | * 2064 | * http://www.apache.org/licenses/LICENSE-2.0 2065 | * 2066 | * Unless required by applicable law or agreed to in writing, software 2067 | * distributed under the License is distributed on an "AS IS" BASIS, 2068 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2069 | * See the License for the specific language governing permissions and 2070 | * limitations under the License. 2071 | * 2072 | */ 2073 | 2074 | input[type="radio"] { 2075 | position: absolute; 2076 | overflow: hidden; 2077 | padding: 0; 2078 | border: 0; 2079 | opacity: 0.001; 2080 | z-index: 1; 2081 | vertical-align: top; 2082 | outline: none; 2083 | } 2084 | 2085 | .radio-button, 2086 | .topcoat-radio-button__checkmark { 2087 | -moz-box-sizing: border-box; 2088 | box-sizing: border-box; 2089 | background-clip: padding-box; 2090 | position: relative; 2091 | display: inline-block; 2092 | vertical-align: top; 2093 | cursor: default; 2094 | -webkit-user-select: none; 2095 | -moz-user-select: none; 2096 | -ms-user-select: none; 2097 | user-select: none; 2098 | } 2099 | 2100 | .radio-button__label, 2101 | .topcoat-radio-button { 2102 | position: relative; 2103 | display: inline-block; 2104 | vertical-align: top; 2105 | cursor: default; 2106 | -webkit-user-select: none; 2107 | -moz-user-select: none; 2108 | -ms-user-select: none; 2109 | user-select: none; 2110 | } 2111 | 2112 | .radio-button:before, 2113 | .radio-button:after, 2114 | .topcoat-radio-button__checkmark:before, 2115 | .topcoat-radio-button__checkmark:after { 2116 | content: ''; 2117 | position: absolute; 2118 | border-radius: 100%; 2119 | } 2120 | 2121 | .radio-button:after, 2122 | .topcoat-radio-button__checkmark:after { 2123 | top: 50%; 2124 | left: 50%; 2125 | -webkit-transform: translate(-50%, -50%); 2126 | -ms-transform: translate(-50%, -50%); 2127 | transform: translate(-50%, -50%); 2128 | } 2129 | 2130 | .radio-button:before, 2131 | .topcoat-radio-button__checkmark:before { 2132 | -moz-box-sizing: border-box; 2133 | box-sizing: border-box; 2134 | background-clip: padding-box; 2135 | } 2136 | 2137 | .radio-button--disabled, 2138 | input[type="radio"]:disabled + .topcoat-radio-button__checkmark { 2139 | opacity: 0.3; 2140 | cursor: default; 2141 | pointer-events: none; 2142 | } 2143 | 2144 | /* topdoc 2145 | name: Radio Button 2146 | description: A button that can play music, but usually just plays ads. 2147 | modifiers: 2148 | markup: 2149 | 2150 | 2154 |
2155 |
2156 | 2157 | 2162 |
2163 |
2164 | 2165 | 2170 |
2171 |
2172 | 2173 | 2178 | examples: 2179 | Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj 2180 | tags: 2181 | - desktop 2182 | - light 2183 | - mobile 2184 | - Radio 2185 | */ 2186 | 2187 | input[type="radio"] { 2188 | height: 1.875rem; 2189 | width: 1.875rem; 2190 | margin-top: 0; 2191 | margin-right: -1.875rem; 2192 | margin-bottom: -1.875rem; 2193 | margin-left: 0; 2194 | } 2195 | 2196 | input[type="radio"]:checked + .topcoat-radio-button__checkmark:after { 2197 | opacity: 1; 2198 | } 2199 | 2200 | .topcoat-radio-button { 2201 | color: #454545; 2202 | line-height: 1.875rem; 2203 | } 2204 | 2205 | .topcoat-radio-button__checkmark:before { 2206 | width: 1.875rem; 2207 | height: 1.875rem; 2208 | background: #e5e9e8; 2209 | border: 1px solid #9daca9; 2210 | box-shadow: inset 0 1px #fff; 2211 | } 2212 | 2213 | .topcoat-radio-button__checkmark { 2214 | position: relative; 2215 | width: 1.875rem; 2216 | height: 1.875rem; 2217 | } 2218 | 2219 | .topcoat-radio-button__checkmark:after { 2220 | opacity: 0; 2221 | width: 0.875rem; 2222 | height: 0.875rem; 2223 | background: #454545; 2224 | border: 1px solid rgba(0,0,0,0.1); 2225 | box-shadow: 0 1px rgba(255,255,255,0.5); 2226 | -webkit-transform: none; 2227 | -ms-transform: none; 2228 | transform: none; 2229 | top: 7px; 2230 | left: 7px; 2231 | } 2232 | 2233 | input[type="radio"]:focus + .topcoat-radio-button__checkmark:before { 2234 | border: 1px solid #0036ff; 2235 | box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 2236 | } 2237 | 2238 | input[type="radio"]:active + .topcoat-radio-button__checkmark:before { 2239 | border: 1px solid #9daca9; 2240 | background-color: #d2d6d6; 2241 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 2242 | } 2243 | 2244 | input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before { 2245 | border: 1px solid #9daca9; 2246 | background: #e5e9e8; 2247 | box-shadow: inset 0 1px #fff; 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 | /* 2266 | Copyright 2012 Adobe Systems Inc.; 2267 | Licensed under the Apache License, Version 2.0 (the "License"); 2268 | you may not use this file except in compliance with the License. 2269 | You may obtain a copy of the License at 2270 | 2271 | http://www.apache.org/licenses/LICENSE-2.0 2272 | 2273 | Unless required by applicable law or agreed to in writing, software 2274 | distributed under the License is distributed on an "AS IS" BASIS, 2275 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2276 | See the License for the specific language governing permissions and 2277 | limitations under the License. 2278 | */ 2279 | 2280 | .range { 2281 | padding: 0; 2282 | margin: 0; 2283 | font: inherit; 2284 | color: inherit; 2285 | background: transparent; 2286 | border: none; 2287 | -moz-box-sizing: border-box; 2288 | box-sizing: border-box; 2289 | background-clip: padding-box; 2290 | vertical-align: top; 2291 | outline: none; 2292 | -webkit-appearance: none; 2293 | } 2294 | 2295 | .range__thumb { 2296 | cursor: pointer; 2297 | } 2298 | 2299 | .range__thumb--webkit { 2300 | cursor: pointer; 2301 | -webkit-appearance: none; 2302 | } 2303 | 2304 | .range:disabled { 2305 | opacity: 0.3; 2306 | cursor: default; 2307 | pointer-events: none; 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 | /* 2326 | Copyright 2012 Adobe Systems Inc.; 2327 | Licensed under the Apache License, Version 2.0 (the "License"); 2328 | you may not use this file except in compliance with the License. 2329 | You may obtain a copy of the License at 2330 | 2331 | http://www.apache.org/licenses/LICENSE-2.0 2332 | 2333 | Unless required by applicable law or agreed to in writing, software 2334 | distributed under the License is distributed on an "AS IS" BASIS, 2335 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2336 | See the License for the specific language governing permissions and 2337 | limitations under the License. 2338 | */ 2339 | 2340 | .range, 2341 | .topcoat-range { 2342 | padding: 0; 2343 | margin: 0; 2344 | font: inherit; 2345 | color: inherit; 2346 | background: transparent; 2347 | border: none; 2348 | -moz-box-sizing: border-box; 2349 | box-sizing: border-box; 2350 | background-clip: padding-box; 2351 | vertical-align: top; 2352 | outline: none; 2353 | -webkit-appearance: none; 2354 | } 2355 | 2356 | .range__thumb, 2357 | .topcoat-range::-moz-range-thumb { 2358 | cursor: pointer; 2359 | } 2360 | 2361 | .range__thumb--webkit, 2362 | .topcoat-range::-webkit-slider-thumb { 2363 | cursor: pointer; 2364 | -webkit-appearance: none; 2365 | } 2366 | 2367 | .range:disabled, 2368 | .topcoat-range:disabled { 2369 | opacity: 0.3; 2370 | cursor: default; 2371 | pointer-events: none; 2372 | } 2373 | 2374 | /* topdoc 2375 | name: Range 2376 | description: Range input 2377 | modifiers: 2378 | :active: Active state 2379 | :disabled: Disabled state 2380 | :hover: Hover state 2381 | :focus: Focused 2382 | markup: 2383 | 2384 | 2385 | examples: 2386 | mobile range: http://codepen.io/Topcoat/pen/BskEn 2387 | tags: 2388 | - desktop 2389 | - mobile 2390 | - range 2391 | */ 2392 | 2393 | .topcoat-range { 2394 | border-radius: 6px; 2395 | border: 1px solid #9daca9; 2396 | background-color: #d6dcdb; 2397 | height: 1rem; 2398 | border-radius: 30px; 2399 | } 2400 | 2401 | .topcoat-range::-moz-range-track { 2402 | border-radius: 6px; 2403 | border: 1px solid #9daca9; 2404 | background-color: #d6dcdb; 2405 | height: 1rem; 2406 | border-radius: 30px; 2407 | } 2408 | 2409 | .topcoat-range::-webkit-slider-thumb { 2410 | height: 3rem; 2411 | width: 2rem; 2412 | background-color: #e5e9e8; 2413 | border: 1px solid #9daca9; 2414 | border-radius: 6px; 2415 | box-shadow: inset 0 1px #fff; 2416 | } 2417 | 2418 | .topcoat-range::-moz-range-thumb { 2419 | height: 3rem; 2420 | width: 2rem; 2421 | background-color: #e5e9e8; 2422 | border: 1px solid #9daca9; 2423 | border-radius: 6px; 2424 | box-shadow: inset 0 1px #fff; 2425 | } 2426 | 2427 | .topcoat-range:focus::-webkit-slider-thumb { 2428 | border: 1px solid #0036ff; 2429 | box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 2430 | } 2431 | 2432 | .topcoat-range:focus::-moz-range-thumb { 2433 | border: 1px solid #0036ff; 2434 | box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 2435 | } 2436 | 2437 | .topcoat-range:active::-webkit-slider-thumb { 2438 | border: 1px solid #9daca9; 2439 | box-shadow: inset 0 1px #fff; 2440 | } 2441 | 2442 | .topcoat-range:active::-moz-range-thumb { 2443 | border: 1px solid #9daca9; 2444 | box-shadow: inset 0 1px #fff; 2445 | } 2446 | 2447 | /** 2448 | * 2449 | * Copyright 2012 Adobe Systems Inc.; 2450 | * 2451 | * Licensed under the Apache License, Version 2.0 (the "License"); 2452 | * you may not use this file except in compliance with the License. 2453 | * You may obtain a copy of the License at 2454 | * 2455 | * http://www.apache.org/licenses/LICENSE-2.0 2456 | * 2457 | * Unless required by applicable law or agreed to in writing, software 2458 | * distributed under the License is distributed on an "AS IS" BASIS, 2459 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2460 | * See the License for the specific language governing permissions and 2461 | * limitations under the License. 2462 | * 2463 | */ 2464 | 2465 | /** 2466 | * 2467 | * Copyright 2012 Adobe Systems Inc.; 2468 | * 2469 | * Licensed under the Apache License, Version 2.0 (the "License"); 2470 | * you may not use this file except in compliance with the License. 2471 | * You may obtain a copy of the License at 2472 | * 2473 | * http://www.apache.org/licenses/LICENSE-2.0 2474 | * 2475 | * Unless required by applicable law or agreed to in writing, software 2476 | * distributed under the License is distributed on an "AS IS" BASIS, 2477 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2478 | * See the License for the specific language governing permissions and 2479 | * limitations under the License. 2480 | * 2481 | */ 2482 | 2483 | .search-input { 2484 | padding: 0; 2485 | margin: 0; 2486 | font: inherit; 2487 | color: inherit; 2488 | background: transparent; 2489 | border: none; 2490 | -moz-box-sizing: border-box; 2491 | box-sizing: border-box; 2492 | background-clip: padding-box; 2493 | vertical-align: top; 2494 | outline: none; 2495 | -webkit-appearance: none; 2496 | } 2497 | 2498 | input[type="search"]::-webkit-search-cancel-button { 2499 | -webkit-appearance: none; 2500 | } 2501 | 2502 | .search-input:disabled { 2503 | opacity: 0.3; 2504 | cursor: default; 2505 | pointer-events: none; 2506 | } 2507 | 2508 | /** 2509 | * 2510 | * Copyright 2012 Adobe Systems Inc.; 2511 | * 2512 | * Licensed under the Apache License, Version 2.0 (the "License"); 2513 | * you may not use this file except in compliance with the License. 2514 | * You may obtain a copy of the License at 2515 | * 2516 | * http://www.apache.org/licenses/LICENSE-2.0 2517 | * 2518 | * Unless required by applicable law or agreed to in writing, software 2519 | * distributed under the License is distributed on an "AS IS" BASIS, 2520 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2521 | * See the License for the specific language governing permissions and 2522 | * limitations under the License. 2523 | * 2524 | */ 2525 | 2526 | /** 2527 | * 2528 | * Copyright 2012 Adobe Systems Inc.; 2529 | * 2530 | * Licensed under the Apache License, Version 2.0 (the "License"); 2531 | * you may not use this file except in compliance with the License. 2532 | * You may obtain a copy of the License at 2533 | * 2534 | * http://www.apache.org/licenses/LICENSE-2.0 2535 | * 2536 | * Unless required by applicable law or agreed to in writing, software 2537 | * distributed under the License is distributed on an "AS IS" BASIS, 2538 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2539 | * See the License for the specific language governing permissions and 2540 | * limitations under the License. 2541 | * 2542 | */ 2543 | 2544 | .search-input, 2545 | .topcoat-search-input, 2546 | .topcoat-search-input--large { 2547 | padding: 0; 2548 | margin: 0; 2549 | font: inherit; 2550 | color: inherit; 2551 | background: transparent; 2552 | border: none; 2553 | -moz-box-sizing: border-box; 2554 | box-sizing: border-box; 2555 | background-clip: padding-box; 2556 | vertical-align: top; 2557 | outline: none; 2558 | -webkit-appearance: none; 2559 | } 2560 | 2561 | input[type="search"]::-webkit-search-cancel-button { 2562 | -webkit-appearance: none; 2563 | } 2564 | 2565 | .search-input:disabled, 2566 | .topcoat-search-input:disabled, 2567 | .topcoat-search-input--large:disabled { 2568 | opacity: 0.3; 2569 | cursor: default; 2570 | pointer-events: none; 2571 | } 2572 | 2573 | /* topdoc 2574 | name: Search Input 2575 | description: A text input designed for searching. 2576 | modifiers: 2577 | :disabled: Disabled state 2578 | markup: 2579 | 2580 | 2581 | tags: 2582 | - desktop 2583 | - light 2584 | - mobile 2585 | - text 2586 | - input 2587 | - search 2588 | - form 2589 | */ 2590 | 2591 | .topcoat-search-input, 2592 | .topcoat-search-input--large { 2593 | line-height: 3rem; 2594 | height: 3rem; 2595 | font-size: 16px; 2596 | border: 1px solid #9daca9; 2597 | background-color: #fff; 2598 | box-shadow: inset 0 1px 0 rgba(0,0,0,0.23); 2599 | color: #454545; 2600 | padding: 0 0 0 2rem; 2601 | border-radius: 30px; 2602 | background-image: url("../img/search.svg"); 2603 | background-position: 1rem center; 2604 | background-repeat: no-repeat; 2605 | background-size: 16px; 2606 | } 2607 | 2608 | .topcoat-search-input:focus, 2609 | .topcoat-search-input--large:focus { 2610 | background-color: #fff; 2611 | color: #454545; 2612 | border: 1px solid #0036ff; 2613 | box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), 0 0 0 2px #6fb5f1; 2614 | } 2615 | 2616 | .topcoat-search-input::-webkit-search-cancel-button, 2617 | .topcoat-search-input::-webkit-search-decoration, 2618 | .topcoat-search-input--large::-webkit-search-cancel-button, 2619 | .topcoat-search-input--large::-webkit-search-decoration { 2620 | margin-right: 5px; 2621 | } 2622 | 2623 | .topcoat-search-input:focus::-webkit-input-placeholder, 2624 | .topcoat-search-input:focus::-webkit-input-placeholder { 2625 | color: #c6c8c8; 2626 | } 2627 | 2628 | .topcoat-search-input:disabled::-webkit-input-placeholder { 2629 | color: #454545; 2630 | } 2631 | 2632 | .topcoat-search-input:disabled::-moz-placeholder { 2633 | color: #454545; 2634 | } 2635 | 2636 | .topcoat-search-input:disabled:-ms-input-placeholder { 2637 | color: #454545; 2638 | } 2639 | 2640 | /* topdoc 2641 | name: Large Search Input 2642 | description: A large text input designed for searching. 2643 | modifiers: 2644 | :disabled: Disabled state 2645 | markup: 2646 | 2647 | 2648 | tags: 2649 | - desktop 2650 | - light 2651 | - mobile 2652 | - text 2653 | - input 2654 | - search 2655 | - form 2656 | - large 2657 | */ 2658 | 2659 | .topcoat-search-input--large { 2660 | line-height: 4.375rem; 2661 | height: 4.375rem; 2662 | font-size: 1.3rem; 2663 | font-weight: 400; 2664 | padding: 0 0 0 2.9rem; 2665 | border-radius: 40px; 2666 | background-position: 1.2rem center; 2667 | background-size: 1.3rem; 2668 | } 2669 | 2670 | .topcoat-search-input--large:disabled { 2671 | color: #454545; 2672 | } 2673 | 2674 | .topcoat-search-input--large:disabled::-webkit-input-placeholder { 2675 | color: #454545; 2676 | } 2677 | 2678 | .topcoat-search-input--large:disabled::-moz-placeholder { 2679 | color: #454545; 2680 | } 2681 | 2682 | .topcoat-search-input--large:disabled:-ms-input-placeholder { 2683 | color: #454545; 2684 | } 2685 | 2686 | /** 2687 | * 2688 | * Copyright 2012 Adobe Systems Inc.; 2689 | * 2690 | * Licensed under the Apache License, Version 2.0 (the "License"); 2691 | * you may not use this file except in compliance with the License. 2692 | * You may obtain a copy of the License at 2693 | * 2694 | * http://www.apache.org/licenses/LICENSE-2.0 2695 | * 2696 | * Unless required by applicable law or agreed to in writing, software 2697 | * distributed under the License is distributed on an "AS IS" BASIS, 2698 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2699 | * See the License for the specific language governing permissions and 2700 | * limitations under the License. 2701 | * 2702 | */ 2703 | 2704 | /** 2705 | * 2706 | * Copyright 2012 Adobe Systems Inc.; 2707 | * 2708 | * Licensed under the Apache License, Version 2.0 (the "License"); 2709 | * you may not use this file except in compliance with the License. 2710 | * You may obtain a copy of the License at 2711 | * 2712 | * http://www.apache.org/licenses/LICENSE-2.0 2713 | * 2714 | * Unless required by applicable law or agreed to in writing, software 2715 | * distributed under the License is distributed on an "AS IS" BASIS, 2716 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2717 | * See the License for the specific language governing permissions and 2718 | * limitations under the License. 2719 | * 2720 | */ 2721 | 2722 | .switch { 2723 | position: relative; 2724 | display: inline-block; 2725 | vertical-align: top; 2726 | -moz-box-sizing: border-box; 2727 | box-sizing: border-box; 2728 | background-clip: padding-box; 2729 | } 2730 | 2731 | .switch__input { 2732 | position: absolute; 2733 | overflow: hidden; 2734 | padding: 0; 2735 | border: 0; 2736 | opacity: 0.001; 2737 | z-index: 1; 2738 | vertical-align: top; 2739 | outline: none; 2740 | } 2741 | 2742 | .switch__toggle { 2743 | position: relative; 2744 | display: inline-block; 2745 | vertical-align: top; 2746 | -moz-box-sizing: border-box; 2747 | box-sizing: border-box; 2748 | background-clip: padding-box; 2749 | padding: 0; 2750 | margin: 0; 2751 | font: inherit; 2752 | color: inherit; 2753 | background: transparent; 2754 | border: none; 2755 | cursor: default; 2756 | -webkit-user-select: none; 2757 | -moz-user-select: none; 2758 | -ms-user-select: none; 2759 | user-select: none; 2760 | } 2761 | 2762 | .switch__toggle:before, 2763 | .switch__toggle:after { 2764 | content: ''; 2765 | position: absolute; 2766 | z-index: -1; 2767 | -moz-box-sizing: border-box; 2768 | box-sizing: border-box; 2769 | background-clip: padding-box; 2770 | } 2771 | 2772 | .switch--disabled { 2773 | opacity: 0.3; 2774 | cursor: default; 2775 | pointer-events: none; 2776 | } 2777 | 2778 | /** 2779 | * 2780 | * Copyright 2012 Adobe Systems Inc.; 2781 | * 2782 | * Licensed under the Apache License, Version 2.0 (the "License"); 2783 | * you may not use this file except in compliance with the License. 2784 | * You may obtain a copy of the License at 2785 | * 2786 | * http://www.apache.org/licenses/LICENSE-2.0 2787 | * 2788 | * Unless required by applicable law or agreed to in writing, software 2789 | * distributed under the License is distributed on an "AS IS" BASIS, 2790 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2791 | * See the License for the specific language governing permissions and 2792 | * limitations under the License. 2793 | * 2794 | */ 2795 | 2796 | /** 2797 | * 2798 | * Copyright 2012 Adobe Systems Inc.; 2799 | * 2800 | * Licensed under the Apache License, Version 2.0 (the "License"); 2801 | * you may not use this file except in compliance with the License. 2802 | * You may obtain a copy of the License at 2803 | * 2804 | * http://www.apache.org/licenses/LICENSE-2.0 2805 | * 2806 | * Unless required by applicable law or agreed to in writing, software 2807 | * distributed under the License is distributed on an "AS IS" BASIS, 2808 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2809 | * See the License for the specific language governing permissions and 2810 | * limitations under the License. 2811 | * 2812 | */ 2813 | 2814 | .switch, 2815 | .topcoat-switch { 2816 | position: relative; 2817 | display: inline-block; 2818 | vertical-align: top; 2819 | -moz-box-sizing: border-box; 2820 | box-sizing: border-box; 2821 | background-clip: padding-box; 2822 | } 2823 | 2824 | .switch__input, 2825 | .topcoat-switch__input { 2826 | position: absolute; 2827 | overflow: hidden; 2828 | padding: 0; 2829 | border: 0; 2830 | opacity: 0.001; 2831 | z-index: 1; 2832 | vertical-align: top; 2833 | outline: none; 2834 | } 2835 | 2836 | .switch__toggle, 2837 | .topcoat-switch__toggle { 2838 | position: relative; 2839 | display: inline-block; 2840 | vertical-align: top; 2841 | -moz-box-sizing: border-box; 2842 | box-sizing: border-box; 2843 | background-clip: padding-box; 2844 | padding: 0; 2845 | margin: 0; 2846 | font: inherit; 2847 | color: inherit; 2848 | background: transparent; 2849 | border: none; 2850 | cursor: default; 2851 | -webkit-user-select: none; 2852 | -moz-user-select: none; 2853 | -ms-user-select: none; 2854 | user-select: none; 2855 | } 2856 | 2857 | .switch__toggle:before, 2858 | .switch__toggle:after, 2859 | .topcoat-switch__toggle:before, 2860 | .topcoat-switch__toggle:after { 2861 | content: ''; 2862 | position: absolute; 2863 | z-index: -1; 2864 | -moz-box-sizing: border-box; 2865 | box-sizing: border-box; 2866 | background-clip: padding-box; 2867 | } 2868 | 2869 | .switch--disabled, 2870 | .topcoat-switch__input:disabled + .topcoat-switch__toggle { 2871 | opacity: 0.3; 2872 | cursor: default; 2873 | pointer-events: none; 2874 | } 2875 | 2876 | /* topdoc 2877 | name: Switch 2878 | description: Default skin for Topcoat switch 2879 | modifiers: 2880 | :focus: Focus state 2881 | :disabled: Disabled state 2882 | markup: 2883 | 2887 |
2888 |
2889 | 2893 |
2894 |
2895 | 2899 | examples: 2900 | mobile switch: http://codepen.io/Topcoat/pen/upxds 2901 | tags: 2902 | - desktop 2903 | - light 2904 | - mobile 2905 | - switch 2906 | */ 2907 | 2908 | .topcoat-switch { 2909 | font-size: 16px; 2910 | padding: 0 1.25rem; 2911 | border-radius: 6px; 2912 | border: 1px solid #9daca9; 2913 | overflow: hidden; 2914 | width: 6rem; 2915 | } 2916 | 2917 | .topcoat-switch__toggle:before, 2918 | .topcoat-switch__toggle:after { 2919 | top: -1px; 2920 | width: 5rem; 2921 | } 2922 | 2923 | .topcoat-switch__toggle:before { 2924 | content: 'ON'; 2925 | color: #288edf; 2926 | background-color: #e5f1fb; 2927 | right: 1rem; 2928 | padding-left: 1.5rem; 2929 | } 2930 | 2931 | .topcoat-switch__toggle { 2932 | line-height: 3rem; 2933 | height: 3rem; 2934 | width: 2rem; 2935 | border-radius: 6px; 2936 | color: #454545; 2937 | text-shadow: 0 1px #fff; 2938 | background-color: #e5e9e8; 2939 | border: 1px solid #9daca9; 2940 | margin-left: -1.3rem; 2941 | margin-bottom: -1px; 2942 | margin-top: -1px; 2943 | box-shadow: inset 0 1px #fff; 2944 | -webkit-transition: margin-left 0.05s ease-in-out; 2945 | transition: margin-left 0.05s ease-in-out; 2946 | } 2947 | 2948 | .topcoat-switch__toggle:after { 2949 | content: 'OFF'; 2950 | background-color: #d2d6d6; 2951 | left: 1rem; 2952 | padding-left: 2rem; 2953 | } 2954 | 2955 | .topcoat-switch__input:checked + .topcoat-switch__toggle { 2956 | margin-left: 2.7rem; 2957 | } 2958 | 2959 | .topcoat-switch__input:active + .topcoat-switch__toggle { 2960 | border: 1px solid #9daca9; 2961 | box-shadow: inset 0 1px #fff; 2962 | } 2963 | 2964 | .topcoat-switch__input:focus + .topcoat-switch__toggle { 2965 | border: 1px solid #0036ff; 2966 | box-shadow: 0 0 0 2px #6fb5f1; 2967 | } 2968 | 2969 | .topcoat-switch__input:disabled + .topcoat-switch__toggle:after, 2970 | .topcoat-switch__input:disabled + .topcoat-switch__toggle:before { 2971 | background: transparent; 2972 | } 2973 | 2974 | /** 2975 | * 2976 | * Copyright 2012 Adobe Systems Inc.; 2977 | * 2978 | * Licensed under the Apache License, Version 2.0 (the "License"); 2979 | * you may not use this file except in compliance with the License. 2980 | * You may obtain a copy of the License at 2981 | * 2982 | * http://www.apache.org/licenses/LICENSE-2.0 2983 | * 2984 | * Unless required by applicable law or agreed to in writing, software 2985 | * distributed under the License is distributed on an "AS IS" BASIS, 2986 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2987 | * See the License for the specific language governing permissions and 2988 | * limitations under the License. 2989 | * 2990 | */ 2991 | 2992 | /** 2993 | * 2994 | * Copyright 2012 Adobe Systems Inc.; 2995 | * 2996 | * Licensed under the Apache License, Version 2.0 (the "License"); 2997 | * you may not use this file except in compliance with the License. 2998 | * You may obtain a copy of the License at 2999 | * 3000 | * http://www.apache.org/licenses/LICENSE-2.0 3001 | * 3002 | * Unless required by applicable law or agreed to in writing, software 3003 | * distributed under the License is distributed on an "AS IS" BASIS, 3004 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3005 | * See the License for the specific language governing permissions and 3006 | * limitations under the License. 3007 | * 3008 | */ 3009 | 3010 | .button, 3011 | .topcoat-tab-bar__button { 3012 | position: relative; 3013 | display: inline-block; 3014 | vertical-align: top; 3015 | -moz-box-sizing: border-box; 3016 | box-sizing: border-box; 3017 | background-clip: padding-box; 3018 | padding: 0; 3019 | margin: 0; 3020 | font: inherit; 3021 | color: inherit; 3022 | background: transparent; 3023 | border: none; 3024 | cursor: default; 3025 | -webkit-user-select: none; 3026 | -moz-user-select: none; 3027 | -ms-user-select: none; 3028 | user-select: none; 3029 | text-overflow: ellipsis; 3030 | white-space: nowrap; 3031 | overflow: hidden; 3032 | text-decoration: none; 3033 | } 3034 | 3035 | .button--quiet { 3036 | background: transparent; 3037 | border: 1px solid transparent; 3038 | box-shadow: none; 3039 | } 3040 | 3041 | .button--disabled, 3042 | .topcoat-tab-bar__button:disabled { 3043 | opacity: 0.3; 3044 | cursor: default; 3045 | pointer-events: none; 3046 | } 3047 | 3048 | .button-bar, 3049 | .topcoat-tab-bar { 3050 | display: table; 3051 | table-layout: fixed; 3052 | white-space: nowrap; 3053 | margin: 0; 3054 | padding: 0; 3055 | } 3056 | 3057 | .button-bar__item, 3058 | .topcoat-tab-bar__item { 3059 | display: table-cell; 3060 | width: auto; 3061 | border-radius: 0; 3062 | } 3063 | 3064 | .button-bar__item > input, 3065 | .topcoat-tab-bar__item > input { 3066 | position: absolute; 3067 | overflow: hidden; 3068 | padding: 0; 3069 | border: 0; 3070 | opacity: 0.001; 3071 | z-index: 1; 3072 | vertical-align: top; 3073 | outline: none; 3074 | } 3075 | 3076 | .button-bar__button { 3077 | border-radius: inherit; 3078 | } 3079 | 3080 | .button-bar__item:disabled { 3081 | opacity: 0.3; 3082 | cursor: default; 3083 | pointer-events: none; 3084 | } 3085 | 3086 | /* topdoc 3087 | name: Tab Bar 3088 | description: Component of tab buttons 3089 | modifiers: 3090 | :disabled: Disabled state 3091 | markup: 3092 |
3093 | 3097 | 3101 | 3105 |
3106 | examples: 3107 | mobile tab bar: http://codepen.io/Topcoat/pen/rJICF 3108 | tags: 3109 | - desktop 3110 | - light 3111 | - dark 3112 | - mobile 3113 | - tab 3114 | - group 3115 | - bar 3116 | */ 3117 | 3118 | .topcoat-tab-bar__button { 3119 | padding: 0 1.25rem; 3120 | height: 3rem; 3121 | line-height: 3rem; 3122 | letter-spacing: 1px; 3123 | color: #454545; 3124 | text-shadow: 0 1px #fff; 3125 | vertical-align: top; 3126 | background-color: #e5e9e8; 3127 | box-shadow: inset 0 1px #fff; 3128 | border-top: 1px solid #9daca9; 3129 | } 3130 | 3131 | .topcoat-tab-bar__button:active, 3132 | .topcoat-tab-bar__button--large:active, 3133 | :checked + .topcoat-tab-bar__button { 3134 | color: #288edf; 3135 | background-color: #e5f1fb; 3136 | box-shadow: inset 0 0 1px rgba(0,0,0,0.1); 3137 | } 3138 | 3139 | .topcoat-tab-bar__button:focus, 3140 | .topcoat-tab-bar__button--large:focus { 3141 | z-index: 1; 3142 | box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 3143 | outline: 0; 3144 | } 3145 | 3146 | /** 3147 | * 3148 | * Copyright 2012 Adobe Systems Inc.; 3149 | * 3150 | * Licensed under the Apache License, Version 2.0 (the "License"); 3151 | * you may not use this file except in compliance with the License. 3152 | * You may obtain a copy of the License at 3153 | * 3154 | * http://www.apache.org/licenses/LICENSE-2.0 3155 | * 3156 | * Unless required by applicable law or agreed to in writing, software 3157 | * distributed under the License is distributed on an "AS IS" BASIS, 3158 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3159 | * See the License for the specific language governing permissions and 3160 | * limitations under the License. 3161 | * 3162 | */ 3163 | 3164 | /** 3165 | * 3166 | * Copyright 2012 Adobe Systems Inc.; 3167 | * 3168 | * Licensed under the Apache License, Version 2.0 (the "License"); 3169 | * you may not use this file except in compliance with the License. 3170 | * You may obtain a copy of the License at 3171 | * 3172 | * http://www.apache.org/licenses/LICENSE-2.0 3173 | * 3174 | * Unless required by applicable law or agreed to in writing, software 3175 | * distributed under the License is distributed on an "AS IS" BASIS, 3176 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3177 | * See the License for the specific language governing permissions and 3178 | * limitations under the License. 3179 | * 3180 | */ 3181 | 3182 | .input, 3183 | .topcoat-text-input, 3184 | .topcoat-text-input--large { 3185 | padding: 0; 3186 | margin: 0; 3187 | font: inherit; 3188 | color: inherit; 3189 | background: transparent; 3190 | border: none; 3191 | -moz-box-sizing: border-box; 3192 | box-sizing: border-box; 3193 | background-clip: padding-box; 3194 | vertical-align: top; 3195 | outline: none; 3196 | } 3197 | 3198 | .input:disabled, 3199 | .topcoat-text-input:disabled, 3200 | .topcoat-text-input--large:disabled { 3201 | opacity: 0.3; 3202 | cursor: default; 3203 | pointer-events: none; 3204 | } 3205 | 3206 | /* topdoc 3207 | name: Text input 3208 | description: Topdoc text input 3209 | modifiers: 3210 | :disabled: Disabled state 3211 | :focus: Focused 3212 | :invalid: Hover state 3213 | markup: 3214 | 3215 |
3216 |
3217 | 3218 |
3219 |
3220 | 3221 | tags: 3222 | - desktop 3223 | - mobile 3224 | - text 3225 | - input 3226 | */ 3227 | 3228 | .topcoat-text-input, 3229 | .topcoat-text-input--large { 3230 | line-height: 3rem; 3231 | font-size: 16px; 3232 | letter-spacing: 1px; 3233 | padding: 0 1.25rem; 3234 | border: 1px solid #9daca9; 3235 | border-radius: 6px; 3236 | background-color: #fff; 3237 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 3238 | color: #454545; 3239 | vertical-align: top; 3240 | } 3241 | 3242 | .topcoat-text-input:focus, 3243 | .topcoat-text-input--large:focus { 3244 | background-color: #fff; 3245 | color: #454545; 3246 | border: 1px solid #0036ff; 3247 | box-shadow: 0 0 0 2px #6fb5f1; 3248 | } 3249 | 3250 | .topcoat-text-input:disabled::-webkit-input-placeholder { 3251 | color: #454545; 3252 | } 3253 | 3254 | .topcoat-text-input:disabled::-moz-placeholder { 3255 | color: #454545; 3256 | } 3257 | 3258 | .topcoat-text-input:disabled:-ms-input-placeholder { 3259 | color: #454545; 3260 | } 3261 | 3262 | .topcoat-text-input:invalid { 3263 | border: 1px solid #ec514e; 3264 | } 3265 | 3266 | /* topdoc 3267 | name: Large Text Input 3268 | description: A bigger input, still for text. 3269 | modifiers: 3270 | :disabled: Disabled state 3271 | :focus: Focused 3272 | :invalid: Hover state 3273 | markup: 3274 | 3275 |
3276 |
3277 | 3278 |
3279 |
3280 | 3281 | tags: 3282 | - desktop 3283 | - light 3284 | - mobile 3285 | - form 3286 | - input 3287 | - large 3288 | */ 3289 | 3290 | .topcoat-text-input--large { 3291 | line-height: 4.375rem; 3292 | font-size: 1.3rem; 3293 | } 3294 | 3295 | .topcoat-text-input--large:disabled { 3296 | color: #454545; 3297 | } 3298 | 3299 | .topcoat-text-input--large:disabled::-webkit-input-placeholder { 3300 | color: #454545; 3301 | } 3302 | 3303 | .topcoat-text-input--large:disabled::-moz-placeholder { 3304 | color: #454545; 3305 | } 3306 | 3307 | .topcoat-text-input--large:disabled:-ms-input-placeholder { 3308 | color: #454545; 3309 | } 3310 | 3311 | .topcoat-text-input--large:invalid { 3312 | border: 1px solid #ec514e; 3313 | } 3314 | 3315 | /** 3316 | * 3317 | * Copyright 2012 Adobe Systems Inc.; 3318 | * 3319 | * Licensed under the Apache License, Version 2.0 (the "License"); 3320 | * you may not use this file except in compliance with the License. 3321 | * You may obtain a copy of the License at 3322 | * 3323 | * http://www.apache.org/licenses/LICENSE-2.0 3324 | * 3325 | * Unless required by applicable law or agreed to in writing, software 3326 | * distributed under the License is distributed on an "AS IS" BASIS, 3327 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3328 | * See the License for the specific language governing permissions and 3329 | * limitations under the License. 3330 | * 3331 | */ 3332 | 3333 | /** 3334 | * 3335 | * Copyright 2012 Adobe Systems Inc.; 3336 | * 3337 | * Licensed under the Apache License, Version 2.0 (the "License"); 3338 | * you may not use this file except in compliance with the License. 3339 | * You may obtain a copy of the License at 3340 | * 3341 | * http://www.apache.org/licenses/LICENSE-2.0 3342 | * 3343 | * Unless required by applicable law or agreed to in writing, software 3344 | * distributed under the License is distributed on an "AS IS" BASIS, 3345 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3346 | * See the License for the specific language governing permissions and 3347 | * limitations under the License. 3348 | * 3349 | */ 3350 | 3351 | .textarea { 3352 | -moz-box-sizing: border-box; 3353 | box-sizing: border-box; 3354 | background-clip: padding-box; 3355 | padding: 0; 3356 | margin: 0; 3357 | font: inherit; 3358 | color: inherit; 3359 | background: transparent; 3360 | border: none; 3361 | vertical-align: top; 3362 | resize: none; 3363 | outline: none; 3364 | } 3365 | 3366 | .textarea:disabled { 3367 | opacity: 0.3; 3368 | cursor: default; 3369 | pointer-events: none; 3370 | } 3371 | 3372 | /** 3373 | * 3374 | * Copyright 2012 Adobe Systems Inc.; 3375 | * 3376 | * Licensed under the Apache License, Version 2.0 (the "License"); 3377 | * you may not use this file except in compliance with the License. 3378 | * You may obtain a copy of the License at 3379 | * 3380 | * http://www.apache.org/licenses/LICENSE-2.0 3381 | * 3382 | * Unless required by applicable law or agreed to in writing, software 3383 | * distributed under the License is distributed on an "AS IS" BASIS, 3384 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3385 | * See the License for the specific language governing permissions and 3386 | * limitations under the License. 3387 | * 3388 | */ 3389 | 3390 | /** 3391 | * 3392 | * Copyright 2012 Adobe Systems Inc.; 3393 | * 3394 | * Licensed under the Apache License, Version 2.0 (the "License"); 3395 | * you may not use this file except in compliance with the License. 3396 | * You may obtain a copy of the License at 3397 | * 3398 | * http://www.apache.org/licenses/LICENSE-2.0 3399 | * 3400 | * Unless required by applicable law or agreed to in writing, software 3401 | * distributed under the License is distributed on an "AS IS" BASIS, 3402 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3403 | * See the License for the specific language governing permissions and 3404 | * limitations under the License. 3405 | * 3406 | */ 3407 | 3408 | .textarea, 3409 | .topcoat-textarea, 3410 | .topcoat-textarea--large { 3411 | -moz-box-sizing: border-box; 3412 | box-sizing: border-box; 3413 | background-clip: padding-box; 3414 | padding: 0; 3415 | margin: 0; 3416 | font: inherit; 3417 | color: inherit; 3418 | background: transparent; 3419 | border: none; 3420 | vertical-align: top; 3421 | resize: none; 3422 | outline: none; 3423 | } 3424 | 3425 | .textarea:disabled, 3426 | .topcoat-textarea:disabled, 3427 | .topcoat-textarea--large:disabled { 3428 | opacity: 0.3; 3429 | cursor: default; 3430 | pointer-events: none; 3431 | } 3432 | 3433 | /* topdoc 3434 | name: Textarea 3435 | description: A whole area, just for text. 3436 | modifiers: 3437 | :disabled: Disabled state 3438 | markup: 3439 | 3440 |
3441 |
3442 | 3443 | tags: 3444 | - desktop 3445 | - light 3446 | - mobile 3447 | - form 3448 | - input 3449 | - textarea 3450 | */ 3451 | 3452 | .topcoat-textarea, 3453 | .topcoat-textarea--large { 3454 | padding: 2rem; 3455 | font-size: 2.5rem; 3456 | font-weight: 400; 3457 | border-radius: 6px; 3458 | line-height: 3rem; 3459 | border: 1px solid #9daca9; 3460 | background-color: #fff; 3461 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 3462 | color: #454545; 3463 | letter-spacing: 1px; 3464 | } 3465 | 3466 | .topcoat-textarea:focus, 3467 | .topcoat-textarea--large:focus { 3468 | background-color: #fff; 3469 | color: #454545; 3470 | border: 1px solid #0036ff; 3471 | box-shadow: 0 0 0 2px #6fb5f1; 3472 | } 3473 | 3474 | .topcoat-textarea:disabled::-webkit-input-placeholder { 3475 | color: #454545; 3476 | } 3477 | 3478 | .topcoat-textarea:disabled::-moz-placeholder { 3479 | color: #454545; 3480 | } 3481 | 3482 | .topcoat-textarea:disabled:-ms-input-placeholder { 3483 | color: #454545; 3484 | } 3485 | 3486 | /* topdoc 3487 | name: Large Textarea 3488 | description: A whole area, just for text; now available in large. 3489 | modifiers: 3490 | :disabled: Disabled state 3491 | markup: 3492 | 3493 |
3494 |
3495 | 3496 | tags: 3497 | - desktop 3498 | - light 3499 | - mobile 3500 | - form 3501 | - input 3502 | - textarea 3503 | */ 3504 | 3505 | .topcoat-textarea--large { 3506 | font-size: 3rem; 3507 | line-height: 4.375rem; 3508 | } 3509 | 3510 | .topcoat-textarea--large:disabled { 3511 | color: #454545; 3512 | } 3513 | 3514 | .topcoat-textarea--large:disabled::-webkit-input-placeholder { 3515 | color: #454545; 3516 | } 3517 | 3518 | .topcoat-textarea--large:disabled::-moz-placeholder { 3519 | color: #454545; 3520 | } 3521 | 3522 | .topcoat-textarea--large:disabled:-ms-input-placeholder { 3523 | color: #454545; 3524 | } 3525 | 3526 | @font-face { 3527 | font-family: "Source Sans"; 3528 | src: url("../font/SourceSansPro-Regular.otf"); 3529 | } 3530 | 3531 | @font-face { 3532 | font-family: "Source Sans"; 3533 | src: url("../font/SourceSansPro-Light.otf"); 3534 | font-weight: 200; 3535 | } 3536 | 3537 | @font-face { 3538 | font-family: "Source Sans"; 3539 | src: url("../font/SourceSansPro-Semibold.otf"); 3540 | font-weight: 600; 3541 | } 3542 | 3543 | body { 3544 | margin: 0; 3545 | padding: 0; 3546 | background: #dfe2e2; 3547 | color: #000; 3548 | font: 16px "Source Sans", helvetica, arial, sans-serif; 3549 | font-weight: 400; 3550 | } 3551 | 3552 | :focus { 3553 | outline-color: transparent; 3554 | outline-style: none; 3555 | } 3556 | 3557 | .topcoat-icon--menu-stack { 3558 | background: url("../img/hamburger_dark.svg") no-repeat; 3559 | background-size: cover; 3560 | } 3561 | 3562 | .quarter { 3563 | width: 25%; 3564 | } 3565 | 3566 | .half { 3567 | width: 50%; 3568 | } 3569 | 3570 | .three-quarters { 3571 | width: 75%; 3572 | } 3573 | 3574 | .third { 3575 | width: 33.333%; 3576 | } 3577 | 3578 | .two-thirds { 3579 | width: 66.666%; 3580 | } 3581 | 3582 | .full { 3583 | width: 100%; 3584 | } 3585 | 3586 | .left { 3587 | text-align: left; 3588 | } 3589 | 3590 | .center { 3591 | text-align: center; 3592 | } 3593 | 3594 | .right { 3595 | text-align: right; 3596 | } 3597 | 3598 | .reset-ui { 3599 | -moz-box-sizing: border-box; 3600 | box-sizing: border-box; 3601 | background-clip: padding-box; 3602 | position: relative; 3603 | display: inline-block; 3604 | vertical-align: top; 3605 | padding: 0; 3606 | margin: 0; 3607 | font: inherit; 3608 | color: inherit; 3609 | background: transparent; 3610 | border: none; 3611 | cursor: default; 3612 | -webkit-user-select: none; 3613 | -moz-user-select: none; 3614 | -ms-user-select: none; 3615 | user-select: none; 3616 | text-overflow: ellipsis; 3617 | white-space: nowrap; 3618 | overflow: hidden; 3619 | } 3620 | 3621 | /* This file should include color and image variables corresponding to the dark theme */ 3622 | 3623 | /* ---------- colors ---------- */ 3624 | 3625 | /* ---------- darken ---------- */ 3626 | 3627 | /* ---------- lighten ---------- */ 3628 | 3629 | /* ---------- alphas ---------- */ 3630 | 3631 | /* ---------- thickness ---------- */ 3632 | 3633 | /* ---------- shadows ---------- */ 3634 | 3635 | /* Icons */ 3636 | 3637 | /* Navigation Bar */ 3638 | 3639 | /* Text Input */ 3640 | 3641 | /* List */ 3642 | 3643 | /* Overlay */ 3644 | 3645 | /* Progress bar */ 3646 | 3647 | /* Checkbox */ 3648 | 3649 | /* Range input */ 3650 | 3651 | /* Radio Button */ 3652 | 3653 | /* Tab bar */ 3654 | 3655 | /* Switch */ 3656 | 3657 | /* Icon Button */ 3658 | 3659 | /* Navigation bar */ 3660 | 3661 | /* List */ 3662 | 3663 | /* Search Input */ 3664 | 3665 | /* Textarea */ 3666 | 3667 | /* Checkbox */ 3668 | 3669 | /* Radio */ 3670 | 3671 | /* Range input */ 3672 | 3673 | /* Search Input */ 3674 | 3675 | /* Switch */ 3676 | 3677 | /* This file should include color and image variables corresponding to the light theme */ 3678 | 3679 | /* ---------- colors ---------- */ 3680 | 3681 | /* ---------- darken ---------- */ 3682 | 3683 | /* ---------- lighten ---------- */ 3684 | 3685 | /* ---------- alphas ---------- */ 3686 | 3687 | /* ---------- thickness ---------- */ 3688 | 3689 | /* ---------- shadows ---------- */ 3690 | 3691 | /* Secondary colors (based on colors above) 3692 | 3693 | Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros! 3694 | 3695 | */ 3696 | 3697 | /* Icons */ 3698 | 3699 | /* Navigation Bar */ 3700 | 3701 | /* Text Input */ 3702 | 3703 | /* List */ 3704 | 3705 | /* Overlay */ 3706 | 3707 | /* Progress bar */ 3708 | 3709 | /* Checkbox */ 3710 | 3711 | /* Range input */ 3712 | 3713 | /* Radio Button */ 3714 | 3715 | /* Tab bar */ 3716 | 3717 | /* Switch */ 3718 | 3719 | /* Containers */ 3720 | 3721 | /* Icon Button */ 3722 | 3723 | /* Navigation bar */ 3724 | 3725 | /* List */ 3726 | 3727 | /* Search Input */ 3728 | 3729 | /* Text Area */ 3730 | 3731 | /* Checkbox */ 3732 | 3733 | /* Radio */ 3734 | 3735 | /* Range input */ 3736 | 3737 | /* Search Input */ 3738 | 3739 | /* Switch */ 3740 | 3741 | /* Call To Action */ 3742 | 3743 | /* Text Input */ 3744 | 3745 | /* Radio input */ 3746 | 3747 | /* Overlay */ 3748 | 3749 | /* Textarea */ 3750 | 3751 | /* Progress bar container */ 3752 | 3753 | /* Progress bar progress */ 3754 | 3755 | /* Switch */ 3756 | 3757 | /* Notification */ 3758 | 3759 | /* Search */ -------------------------------------------------------------------------------- /assets/topcoat/css/topcoat-mobile-light.min.css: -------------------------------------------------------------------------------- 1 | .button-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.button,.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta,.topcoat-button-bar__button,.topcoat-button-bar__button--large{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-button:disabled,.topcoat-button--quiet:disabled,.topcoat-button--large:disabled,.topcoat-button--large--quiet:disabled,.topcoat-button--cta:disabled,.topcoat-button--large--cta:disabled,.topcoat-button-bar__button:disabled,.topcoat-button-bar__button--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta,.topcoat-button-bar__button,.topcoat-button-bar__button--large{padding:0 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border-radius:6px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover,.topcoat-button-bar__button:hover,.topcoat-button-bar__button--large:hover{background-color:#eff1f1}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--quiet:hover:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--large--quiet:hover:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-button--quiet:active,.topcoat-button--quiet:focus:active,.topcoat-button--large--quiet:active,.topcoat-button--large--quiet:focus:active{color:#454545;text-shadow:0 1px #fff;background-color:#d2d6d6;border:1px solid #9daca9;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,.36)}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#4ca1e4}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.button-bar,.topcoat-button-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item,.topcoat-button-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input,.topcoat-button-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button-bar>.topcoat-button-bar__item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.topcoat-button-bar>.topcoat-button-bar__item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.topcoat-button-bar__item:first-child>.topcoat-button-bar__button,.topcoat-button-bar__item:first-child>.topcoat-button-bar__button--large{border-right:0}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0}.topcoat-button-bar__button{border-radius:inherit}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit}.button{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled{opacity:.3;cursor:default;pointer-events:none}.button,.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-button:disabled,.topcoat-button--quiet:disabled,.topcoat-button--large:disabled,.topcoat-button--large--quiet:disabled,.topcoat-button--cta:disabled,.topcoat-button--large--cta:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta{padding:0 1.25rem;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border-radius:6px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#eff1f1}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--quiet:hover:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--large--quiet:hover:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-button:active,.topcoat-button--large:active{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-button--quiet:active,.topcoat-button--quiet:focus:active,.topcoat-button--large--quiet:active,.topcoat-button--large--quiet:focus:active{color:#454545;text-shadow:0 1px #fff;background-color:#d2d6d6;border:1px solid #9daca9;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}.topcoat-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,.36)}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#4ca1e4}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:1.3rem;font-weight:400;line-height:4.375rem;padding:0 1.25rem}input[type=checkbox]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.checkbox{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox__label{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox--disabled{opacity:.3;cursor:default;pointer-events:none}.checkbox:before,.checkbox:after{content:'';position:absolute}.checkbox:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}input[type=checkbox]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.checkbox,.topcoat-checkbox__checkmark{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox__label,.topcoat-checkbox{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox--disabled,input[type=checkbox]:disabled+.topcoat-checkbox__checkmark{opacity:.3;cursor:default;pointer-events:none}.checkbox:before,.checkbox:after,.topcoat-checkbox__checkmark:before,.topcoat-checkbox__checkmark:after{content:'';position:absolute}.checkbox:before,.topcoat-checkbox__checkmark:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.topcoat-checkbox__checkmark{height:2rem}input[type=checkbox]{height:2rem;width:2rem;margin-top:0;margin-right:-2rem;margin-bottom:-2rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:2rem}.topcoat-checkbox__checkmark:before{width:2rem;height:2rem;background:#e5e9e8;border:1px solid #9daca9;border-radius:3px;box-shadow:inset 0 1px #fff}.topcoat-checkbox__checkmark{width:2rem;height:2rem}.topcoat-checkbox__checkmark:after{top:1px;left:2px;opacity:0;width:28px;height:11px;background:transparent;border:7px solid #454545;border-width:7px;border-top:0;border-right:0;border-radius:2px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;background:#e5e9e8;box-shadow:inset 0 1px #fff}.button,.topcoat-icon-button,.topcoat-icon-button--quiet,.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-icon-button:disabled,.topcoat-icon-button--quiet:disabled,.topcoat-icon-button--large:disabled,.topcoat-icon-button--large--quiet:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-icon-button,.topcoat-icon-button--quiet,.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{padding:0 .75rem;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:baseline;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border-radius:6px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:#eff1f1}.topcoat-icon-button:focus,.topcoat-icon-button--quiet:focus,.topcoat-icon-button--quiet:hover:focus,.topcoat-icon-button--large:focus,.topcoat-icon-button--large--quiet:focus,.topcoat-icon-button--large--quiet:hover:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-icon-button:active,.topcoat-icon-button--large:active{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-icon-button--quiet:active,.topcoat-icon-button--quiet:focus:active,.topcoat-icon-button--large--quiet:active,.topcoat-icon-button--large--quiet:focus:active{color:#454545;text-shadow:0 1px #fff;background-color:#d2d6d6;border:1px solid #9daca9;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:4.375rem;height:4.375rem;line-height:4.375rem}.topcoat-icon-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-icon,.topcoat-icon--large{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:1.62rem;height:1.62rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:2.499999998125rem;height:2.499999998125rem;top:-2px}.input{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0}.input:disabled{opacity:.3;cursor:default;pointer-events:none}.list{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:auto;-webkit-overflow-scrolling:touch}.list__header{margin:0}.list__container{padding:0;margin:0;list-style-type:none}.list__item{margin:0;padding:0}.list,.topcoat-list{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:auto;-webkit-overflow-scrolling:touch}.list__header,.topcoat-list__header{margin:0}.list__container,.topcoat-list__container{padding:0;margin:0;list-style-type:none}.list__item,.topcoat-list__item{margin:0;padding:0}.topcoat-list{border-top:1px solid #9daca9;border-bottom:1px solid #fff;background-color:#e5e9e8}.topcoat-list__header{padding:4px 20px;font-size:.9em;font-weight:400;background-color:#d2d6d6;color:#454545;text-shadow:0 1px 0 rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.23)}.topcoat-list__container{border-top:1px solid #9daca9;color:#454545}.topcoat-list__item{padding:1.25rem;border-top:1px solid #fff;border-bottom:1px solid #9daca9}.topcoat-list__item:first-child{border-top:1px solid #d6dcdb}.navigation-bar{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;white-space:nowrap;overflow:hidden;word-spacing:0;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navigation-bar__item{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0}.navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.navigation-bar,.topcoat-navigation-bar{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;white-space:nowrap;overflow:hidden;word-spacing:0;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navigation-bar__item,.topcoat-navigation-bar__item{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0}.navigation-bar__title,.topcoat-navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topcoat-navigation-bar{height:4.375rem;padding-left:1rem;padding-right:1rem;background:#e5e9e8;color:#454545;box-shadow:inset 0 -1px #9daca9,0 1px #d6dcdb}.topcoat-navigation-bar__item{margin:0;line-height:4.375rem;vertical-align:top}.topcoat-navigation-bar__title{font-size:1.3rem;font-weight:400;color:#454545}.notification{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.notification,.topcoat-notification{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.topcoat-notification{padding:.15em .5em .2em;border-radius:2px;background-color:#ec514e;color:#fff}input[type=radio]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.radio-button{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button__label{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button:before,.radio-button:after{content:'';position:absolute;border-radius:100%}.radio-button:after{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.radio-button:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.radio-button--disabled{opacity:.3;cursor:default;pointer-events:none}input[type=radio]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.radio-button,.topcoat-radio-button__checkmark{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button__label,.topcoat-radio-button{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button:before,.radio-button:after,.topcoat-radio-button__checkmark:before,.topcoat-radio-button__checkmark:after{content:'';position:absolute;border-radius:100%}.radio-button:after,.topcoat-radio-button__checkmark:after{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.radio-button:before,.topcoat-radio-button__checkmark:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.radio-button--disabled,input[type=radio]:disabled+.topcoat-radio-button__checkmark{opacity:.3;cursor:default;pointer-events:none}input[type=radio]{height:1.875rem;width:1.875rem;margin-top:0;margin-right:-1.875rem;margin-bottom:-1.875rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#454545;line-height:1.875rem}.topcoat-radio-button__checkmark:before{width:1.875rem;height:1.875rem;background:#e5e9e8;border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-radio-button__checkmark{position:relative;width:1.875rem;height:1.875rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.875rem;height:.875rem;background:#454545;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:7px;left:7px}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #9daca9;background:#e5e9e8;box-shadow:inset 0 1px #fff}.range{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}.range__thumb{cursor:pointer}.range__thumb--webkit{cursor:pointer;-webkit-appearance:none}.range:disabled{opacity:.3;cursor:default;pointer-events:none}.range,.topcoat-range{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}.range__thumb,.topcoat-range::-moz-range-thumb{cursor:pointer}.range__thumb--webkit,.topcoat-range::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none}.range:disabled,.topcoat-range:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-range{border-radius:6px;border:1px solid #9daca9;background-color:#d6dcdb;height:1rem;border-radius:30px}.topcoat-range::-moz-range-track{border-radius:6px;border:1px solid #9daca9;background-color:#d6dcdb;height:1rem;border-radius:30px}.topcoat-range::-webkit-slider-thumb{height:3rem;width:2rem;background-color:#e5e9e8;border:1px solid #9daca9;border-radius:6px;box-shadow:inset 0 1px #fff}.topcoat-range::-moz-range-thumb{height:3rem;width:2rem;background-color:#e5e9e8;border:1px solid #9daca9;border-radius:6px;box-shadow:inset 0 1px #fff}.topcoat-range:focus::-webkit-slider-thumb{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}.topcoat-range:focus::-moz-range-thumb{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}.topcoat-range:active::-webkit-slider-thumb{border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-range:active::-moz-range-thumb{border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.search-input{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.search-input:disabled{opacity:.3;cursor:default;pointer-events:none}.search-input,.topcoat-search-input,.topcoat-search-input--large{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.search-input:disabled,.topcoat-search-input:disabled,.topcoat-search-input--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-search-input,.topcoat-search-input--large{line-height:3rem;height:3rem;font-size:16px;border:1px solid #9daca9;background-color:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;padding:0 0 0 2rem;border-radius:30px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:16px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#fff;color:#454545;border:1px solid #0036ff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),0 0 0 2px #6fb5f1}.topcoat-search-input::-webkit-search-cancel-button,.topcoat-search-input::-webkit-search-decoration,.topcoat-search-input--large::-webkit-search-cancel-button,.topcoat-search-input--large::-webkit-search-decoration{margin-right:5px}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#454545}.topcoat-search-input:disabled::-moz-placeholder{color:#454545}.topcoat-search-input:disabled:-ms-input-placeholder{color:#454545}.topcoat-search-input--large{line-height:4.375rem;height:4.375rem;font-size:1.3rem;font-weight:400;padding:0 0 0 2.9rem;border-radius:40px;background-position:1.2rem center;background-size:1.3rem}.topcoat-search-input--large:disabled{color:#454545}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#454545}.topcoat-search-input--large:disabled::-moz-placeholder{color:#454545}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#454545}.switch{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch__input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.switch__toggle{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch__toggle:before,.switch__toggle:after{content:'';position:absolute;z-index:-1;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch--disabled{opacity:.3;cursor:default;pointer-events:none}.switch,.topcoat-switch{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch__input,.topcoat-switch__input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.switch__toggle,.topcoat-switch__toggle{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch__toggle:before,.switch__toggle:after,.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{content:'';position:absolute;z-index:-1;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch--disabled,.topcoat-switch__input:disabled+.topcoat-switch__toggle{opacity:.3;cursor:default;pointer-events:none}.topcoat-switch{font-size:16px;padding:0 1.25rem;border-radius:6px;border:1px solid #9daca9;overflow:hidden;width:6rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:5rem}.topcoat-switch__toggle:before{content:'ON';color:#288edf;background-color:#e5f1fb;right:1rem;padding-left:1.5rem}.topcoat-switch__toggle{line-height:3rem;height:3rem;width:2rem;border-radius:6px;color:#454545;text-shadow:0 1px #fff;background-color:#e5e9e8;border:1px solid #9daca9;margin-left:-1.3rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #fff;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#d2d6d6;left:1rem;padding-left:2rem}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:2.7rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.button,.topcoat-tab-bar__button{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-tab-bar__button:disabled{opacity:.3;cursor:default;pointer-events:none}.button-bar,.topcoat-tab-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item,.topcoat-tab-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input,.topcoat-tab-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-tab-bar__button{padding:0 1.25rem;height:3rem;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border-top:1px solid #9daca9}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#288edf;background-color:#e5f1fb;box-shadow:inset 0 0 1px rgba(0,0,0,.1)}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.input,.topcoat-text-input,.topcoat-text-input--large{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0}.input:disabled,.topcoat-text-input:disabled,.topcoat-text-input--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-text-input,.topcoat-text-input--large{line-height:3rem;font-size:16px;letter-spacing:1px;padding:0 1.25rem;border:1px solid #9daca9;border-radius:6px;background-color:#fff;box-shadow:inset 0 1px rgba(0,0,0,.1);color:#454545;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#fff;color:#454545;border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#454545}.topcoat-text-input:disabled::-moz-placeholder{color:#454545}.topcoat-text-input:disabled:-ms-input-placeholder{color:#454545}.topcoat-text-input:invalid{border:1px solid #ec514e}.topcoat-text-input--large{line-height:4.375rem;font-size:1.3rem}.topcoat-text-input--large:disabled{color:#454545}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#454545}.topcoat-text-input--large:disabled::-moz-placeholder{color:#454545}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#454545}.topcoat-text-input--large:invalid{border:1px solid #ec514e}.textarea{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;vertical-align:top;resize:none;outline:0}.textarea:disabled{opacity:.3;cursor:default;pointer-events:none}.textarea,.topcoat-textarea,.topcoat-textarea--large{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;vertical-align:top;resize:none;outline:0}.textarea:disabled,.topcoat-textarea:disabled,.topcoat-textarea--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-textarea,.topcoat-textarea--large{padding:2rem;font-size:2.5rem;font-weight:400;border-radius:6px;line-height:3rem;border:1px solid #9daca9;background-color:#fff;box-shadow:inset 0 1px rgba(0,0,0,.1);color:#454545;letter-spacing:1px}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#fff;color:#454545;border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#454545}.topcoat-textarea:disabled::-moz-placeholder{color:#454545}.topcoat-textarea:disabled:-ms-input-placeholder{color:#454545}.topcoat-textarea--large{font-size:3rem;line-height:4.375rem}.topcoat-textarea--large:disabled{color:#454545}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#454545}.topcoat-textarea--large:disabled::-moz-placeholder{color:#454545}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#454545}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Regular.otf)}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Light.otf);font-weight:200}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Semibold.otf);font-weight:600}body{margin:0;padding:0;background:#dfe2e2;color:#000;font:16px "Source Sans",helvetica,arial,sans-serif;font-weight:400}:focus{outline-color:transparent;outline-style:none}.topcoat-icon--menu-stack{background:url(../img/hamburger_dark.svg) no-repeat;background-size:cover}.quarter{width:25%}.half{width:50%}.three-quarters{width:75%}.third{width:33.333%}.two-thirds{width:66.666%}.full{width:100%}.left{text-align:left}.center{text-align:center}.right{text-align:right}.reset-ui{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} -------------------------------------------------------------------------------- /assets/topcoat/font/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | 5 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /assets/topcoat/font/SourceCodePro-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceCodePro-Black.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceCodePro-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceCodePro-Bold.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceCodePro-ExtraLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceCodePro-ExtraLight.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceCodePro-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceCodePro-Light.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceCodePro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceCodePro-Regular.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceCodePro-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceCodePro-Semibold.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-Black.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-BlackIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-BlackIt.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-Bold.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-BoldIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-BoldIt.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-ExtraLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-ExtraLight.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-ExtraLightIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-ExtraLightIt.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-It.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-It.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-Light.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-LightIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-LightIt.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-Regular.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-Semibold.otf -------------------------------------------------------------------------------- /assets/topcoat/font/SourceSansPro-SemiboldIt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/font/SourceSansPro-SemiboldIt.otf -------------------------------------------------------------------------------- /assets/topcoat/img/back_light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 13 | -------------------------------------------------------------------------------- /assets/topcoat/img/call.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 17 | 18 | -------------------------------------------------------------------------------- /assets/topcoat/img/chat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 18 | 19 | -------------------------------------------------------------------------------- /assets/topcoat/img/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /assets/topcoat/img/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/topcoat/img/next_blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/topcoat/img/search-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/img/search-bg.png -------------------------------------------------------------------------------- /assets/topcoat/img/search-bg2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/img/search-bg2x.png -------------------------------------------------------------------------------- /assets/topcoat/img/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slice 1 4 | Created with Sketch (http://www.bohemiancoding.com/sketch) 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/topcoat/img/search_bw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 16 | 17 | -------------------------------------------------------------------------------- /assets/topcoat/img/search_dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | ]> 9 | 12 | 16 | 17 | -------------------------------------------------------------------------------- /assets/topcoat/img/search_light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Slice 1 4 | Created with Sketch (http://www.bohemiancoding.com/sketch) 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/topcoat/img/spinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/img/spinner.png -------------------------------------------------------------------------------- /assets/topcoat/img/spinner2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/directory-backbone-browserify/afff47eb0c8e68f8a8984cea55711deaf43d9458/assets/topcoat/img/spinner2x.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /models/memory/employee.js: -------------------------------------------------------------------------------- 1 | var Backbone = require('backbone'), 2 | $ = require('jquery')(window), 3 | 4 | employees = [ 5 | {"id": 1, "firstName": "James", "lastName": "King", "managerId": 0, "managerName": "", "reports": 4, "title": "President and CEO", "department": "Corporate", "cellPhone": "617-000-0001", "officePhone": "781-000-0001", "email": "jking@fakemail.com", "city": "Boston, MA", "pic": "james_king.jpg", "twitterId": "@fakejking", "blog": "http://coenraets.org"}, 6 | {"id": 2, "firstName": "Julie", "lastName": "Taylor", "managerId": 1, "managerName": "James King", "reports": 2, "title": "VP of Marketing", "department": "Marketing", "cellPhone": "617-000-0002", "officePhone": "781-000-0002", "email": "jtaylor@fakemail.com", "city": "Boston, MA", "pic": "julie_taylor.jpg", "twitterId": "@fakejtaylor", "blog": "http://coenraets.org"}, 7 | {"id": 3, "firstName": "Eugene", "lastName": "Lee", "managerId": 1, "managerName": "James King", "reports": 0, "title": "CFO", "department": "Accounting", "cellPhone": "617-000-0003", "officePhone": "781-000-0003", "email": "elee@fakemail.com", "city": "Boston, MA", "pic": "eugene_lee.jpg", "twitterId": "@fakeelee", "blog": "http://coenraets.org"}, 8 | {"id": 4, "firstName": "John", "lastName": "Williams", "managerId": 1, "managerName": "James King", "reports": 3, "title": "VP of Engineering", "department": "Engineering", "cellPhone": "617-000-0004", "officePhone": "781-000-0004", "email": "jwilliams@fakemail.com", "city": "Boston, MA", "pic": "john_williams.jpg", "twitterId": "@fakejwilliams", "blog": "http://coenraets.org"}, 9 | {"id": 5, "firstName": "Ray", "lastName": "Moore", "managerId": 1, "managerName": "James King", "reports": 2, "title": "VP of Sales", "department": "Sales", "cellPhone": "617-000-0005", "officePhone": "781-000-0005", "email": "rmoore@fakemail.com", "city": "Boston, MA", "pic": "ray_moore.jpg", "twitterId": "@fakermoore", "blog": "http://coenraets.org"}, 10 | {"id": 6, "firstName": "Paul", "lastName": "Jones", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "QA Manager", "department": "Engineering", "cellPhone": "617-000-0006", "officePhone": "781-000-0006", "email": "pjones@fakemail.com", "city": "Boston, MA", "pic": "paul_jones.jpg", "twitterId": "@fakepjones", "blog": "http://coenraets.org"}, 11 | {"id": 7, "firstName": "Paula", "lastName": "Gates", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "Software Architect", "department": "Engineering", "cellPhone": "617-000-0007", "officePhone": "781-000-0007", "email": "pgates@fakemail.com", "city": "Boston, MA", "pic": "paula_gates.jpg", "twitterId": "@fakepgates", "blog": "http://coenraets.org"}, 12 | {"id": 8, "firstName": "Lisa", "lastName": "Wong", "managerId": 2, "managerName": "Julie Taylor", "reports": 0, "title": "Marketing Manager", "department": "Marketing", "cellPhone": "617-000-0008", "officePhone": "781-000-0008", "email": "lwong@fakemail.com", "city": "Boston, MA", "pic": "lisa_wong.jpg", "twitterId": "@fakelwong", "blog": "http://coenraets.org"}, 13 | {"id": 9, "firstName": "Gary", "lastName": "Donovan", "managerId": 2, "managerName": "Julie Taylor", "reports": 0, "title": "Marketing Manager", "department": "Marketing", "cellPhone": "617-000-0009", "officePhone": "781-000-0009", "email": "gdonovan@fakemail.com", "city": "Boston, MA", "pic": "gary_donovan.jpg", "twitterId": "@fakegdonovan", "blog": "http://coenraets.org"}, 14 | {"id": 10, "firstName": "Kathleen", "lastName": "Byrne", "managerId": 5, "managerName": "Ray Moore", "reports": 0, "title": "Sales Representative", "department": "Sales", "cellPhone": "617-000-0010", "officePhone": "781-000-0010", "email": "kbyrne@fakemail.com", "city": "Boston, MA", "pic": "kathleen_byrne.jpg", "twitterId": "@fakekbyrne", "blog": "http://coenraets.org"}, 15 | {"id": 11, "firstName": "Amy", "lastName": "Jones", "managerId": 5, "managerName": "Ray Moore", "reports": 0, "title": "Sales Representative", "department": "Sales", "cellPhone": "617-000-0011", "officePhone": "781-000-0011", "email": "ajones@fakemail.com", "city": "Boston, MA", "pic": "amy_jones.jpg", "twitterId": "@fakeajones", "blog": "http://coenraets.org"}, 16 | {"id": 12, "firstName": "Steven", "lastName": "Wells", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "Software Architect", "department": "Engineering", "cellPhone": "617-000-0012", "officePhone": "781-000-0012", "email": "swells@fakemail.com", "city": "Boston, MA", "pic": "steven_wells.jpg", "twitterId": "@fakeswells", "blog": "http://coenraets.org"} 17 | ], 18 | 19 | findById = function (id) { 20 | var deferred = $.Deferred(), 21 | employee = null, 22 | l = employees.length, 23 | i; 24 | for (i = 0; i < l; i = i + 1) { 25 | if (employees[i].id === id) { 26 | employee = employees[i]; 27 | break; 28 | } 29 | } 30 | deferred.resolve(employee); 31 | return deferred.promise(); 32 | }, 33 | 34 | findByName = function (searchKey) { 35 | var deferred = $.Deferred(), 36 | results = employees.filter(function (element) { 37 | var fullName = element.firstName + " " + element.lastName; 38 | return fullName.toLowerCase().indexOf(searchKey.toLowerCase()) > -1; 39 | }); 40 | console.log(JSON.stringify(results)); 41 | deferred.resolve(results); 42 | return deferred.promise(); 43 | }, 44 | 45 | findByManager = function (managerId) { 46 | var deferred = $.Deferred(), 47 | results = employees.filter(function (element) { 48 | return managerId === element.managerId; 49 | }); 50 | deferred.resolve(results); 51 | return deferred.promise(); 52 | }, 53 | 54 | 55 | Employee = Backbone.Model.extend({ 56 | 57 | initialize: function () { 58 | this.reports = new ReportsCollection(); 59 | this.reports.parent = this; 60 | }, 61 | 62 | sync: function (method, model, options) { 63 | if (method === "read") { 64 | findById(parseInt(this.id)).done(function (data) { 65 | options.success(data); 66 | }); 67 | } 68 | } 69 | 70 | }), 71 | 72 | EmployeeCollection = Backbone.Collection.extend({ 73 | 74 | model: Employee, 75 | 76 | sync: function (method, model, options) { 77 | if (method === "read") { 78 | findByName(options.data.name).done(function (data) { 79 | options.success(data); 80 | }); 81 | } 82 | } 83 | 84 | }), 85 | 86 | ReportsCollection = Backbone.Collection.extend({ 87 | 88 | model: Employee, 89 | 90 | sync: function (method, model, options) { 91 | if (method === "read") { 92 | findByManager(this.parent.id).done(function (data) { 93 | options.success(data); 94 | }); 95 | } 96 | } 97 | 98 | }); 99 | 100 | Backbone.$ = $; 101 | 102 | module.exports = { 103 | Employee: Employee, 104 | EmployeeCollection: EmployeeCollection, 105 | ReportsCollection: ReportsCollection 106 | }; 107 | 108 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "EmployeeDirectory", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | "jquery": "", 6 | "underscore": "", 7 | "backbone": "", 8 | "hbsfy": "" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /router.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var $ = require('jquery')(window), 4 | Backbone = require('backbone'); 5 | 6 | Backbone.$ = $; 7 | 8 | var PageSlider = require('./utils/pageslider'), 9 | HomeView = require('./views/Home'), 10 | EmployeeView = require('./views/Employee'), 11 | ReportsView = require('./views/Reports'), 12 | models = require('./models/memory/employee'), 13 | slider = new PageSlider($('body')), 14 | homeView = new HomeView(); 15 | 16 | module.exports = Backbone.Router.extend({ 17 | 18 | routes: { 19 | "": "home", 20 | "employees/:id": "employeeDetails", 21 | "employees/:id/reports": "reports" 22 | }, 23 | 24 | home: function () { 25 | console.log("home"); 26 | // homeView.delegateEvents(); 27 | slider.slidePage(homeView.$el); 28 | }, 29 | 30 | employeeDetails: function (id) { 31 | console.log("employeeDetails"); 32 | var employee = new models.Employee({id: id}); 33 | employee.fetch({ 34 | success: function (data) { 35 | slider.slidePage(new EmployeeView({model: data}).$el); 36 | } 37 | }); 38 | }, 39 | 40 | reports: function (id) { 41 | console.log("reports"); 42 | var employee = new models.Employee({id: id}); 43 | employee.fetch({ 44 | success: function (data) { 45 | slider.slidePage(new ReportsView({model: data}).$el); 46 | } 47 | }); 48 | } 49 | 50 | }); 51 | -------------------------------------------------------------------------------- /templates/Employee.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 |
7 |
8 |

Employee

9 |
10 |
11 | 12 |
13 | 14 |

{{firstName}} {{lastName}}

15 |

{{title}}

16 |

{{city}}

17 |
18 | 30 |
31 |
-------------------------------------------------------------------------------- /templates/EmployeeList.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/Home.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Employee Directory

4 |
5 |
6 |
7 | 8 |
9 |
-------------------------------------------------------------------------------- /templates/Reports.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 |
7 |
8 |

Direct Reports

9 |
10 |
11 | 12 |
13 | 14 |

{{firstName}} {{lastName}}

15 |

{{title}}

16 |

{{city}}

17 |
18 | 19 |
-------------------------------------------------------------------------------- /utils/pageslider.js: -------------------------------------------------------------------------------- 1 | /* Notes: 2 | * - History management is currently done using window.location.hash. This could easily be changed to use Push State instead. 3 | * - jQuery dependency for now. This could also be easily removed. 4 | */ 5 | 6 | var $ = require('jquery')(window); 7 | 8 | module.exports = function PageSlider(container) { 9 | 10 | var container = container, 11 | currentPage, 12 | stateHistory = []; 13 | 14 | // Use this function if you want PageSlider to automatically determine the sliding direction based on the state history 15 | this.slidePage = function(page) { 16 | 17 | var l = stateHistory.length, 18 | state = window.location.hash; 19 | 20 | if (l === 0) { 21 | stateHistory.push(state); 22 | this.slidePageFrom(page); 23 | return; 24 | } 25 | if (state === stateHistory[l-2]) { 26 | stateHistory.pop(); 27 | this.slidePageFrom(page, 'left'); 28 | } else { 29 | stateHistory.push(state); 30 | this.slidePageFrom(page, 'right'); 31 | } 32 | 33 | } 34 | 35 | // Use this function directly if you want to control the sliding direction outside PageSlider 36 | this.slidePageFrom = function(page, from) { 37 | 38 | container.append(page); 39 | 40 | if (!currentPage || !from) { 41 | page.attr("class", "page center"); 42 | currentPage = page; 43 | return; 44 | } 45 | 46 | // Position the page at the starting position of the animation 47 | page.attr("class", "page " + from); 48 | 49 | currentPage.one('webkitTransitionEnd', function(e) { 50 | $(e.target).remove(); 51 | }); 52 | 53 | // Force reflow. More information here: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 54 | container[0].offsetWidth; 55 | 56 | // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation 57 | page.attr("class", "page transition center"); 58 | currentPage.attr("class", "page transition " + (from === "left" ? "right" : "left")); 59 | currentPage = page; 60 | } 61 | 62 | } -------------------------------------------------------------------------------- /views/Employee.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery')(window), 2 | Backbone = require('backbone'), 3 | template = require("../templates/Employee.hbs"); 4 | 5 | Backbone.$ = $; 6 | 7 | module.exports = Backbone.View.extend({ 8 | 9 | initialize: function () { 10 | this.render(); 11 | }, 12 | 13 | render: function () { 14 | this.$el.html(template(this.model.attributes)); 15 | return this; 16 | } 17 | 18 | }); 19 | -------------------------------------------------------------------------------- /views/EmployeeList.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery')(window), 2 | Backbone = require('backbone'), 3 | template = require("../templates/EmployeeList.hbs"); 4 | 5 | Backbone.$ = $; 6 | 7 | module.exports = Backbone.View.extend({ 8 | 9 | initialize: function () { 10 | this.render(); 11 | this.collection.on("reset", this.render, this); 12 | }, 13 | 14 | render: function () { 15 | console.log(this.collection.toJSON()); 16 | this.$el.html(template(this.collection.toJSON())); 17 | console.log("EmployeeList end render"); 18 | return this; 19 | } 20 | 21 | }); -------------------------------------------------------------------------------- /views/Home.js: -------------------------------------------------------------------------------- 1 | var Backbone = require('backbone'), 2 | $ = require('jquery')(window), 3 | Backbone = require('backbone'), 4 | EmployeeListView = require('./EmployeeList'), 5 | models = require('../models/memory/employee'), 6 | template = require("../templates/Home.hbs"); 7 | 8 | Backbone.$ = $; 9 | 10 | module.exports = Backbone.View.extend({ 11 | 12 | initialize: function () { 13 | console.log("home initialize"); 14 | this.employeeList = new models.EmployeeCollection(); 15 | this.render(); 16 | }, 17 | 18 | render: function () { 19 | this.$el.html(template()); 20 | console.log('before render'); 21 | this.listView = new EmployeeListView({collection: this.employeeList, el: $(".scroller", this.el)}); 22 | console.log('after render'); 23 | return this; 24 | }, 25 | 26 | events: { 27 | "keyup .search-key": "search", 28 | "keypress .search-key": "onkeypress" 29 | }, 30 | 31 | search: function (event) { 32 | var key = $('.search-key').val(); 33 | this.employeeList.fetch({reset: true, data: {name: key}}); 34 | }, 35 | 36 | onkeypress: function (event) { 37 | if (event.keyCode === 13) { // enter key pressed 38 | event.preventDefault(); 39 | } 40 | } 41 | 42 | }); -------------------------------------------------------------------------------- /views/Reports.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery')(window), 2 | Backbone = require('backbone'), 3 | EmployeeListView = require('./EmployeeList'), 4 | template = require("../templates/Reports.hbs"); 5 | 6 | module.exports = Backbone.View.extend({ 7 | 8 | initialize: function () { 9 | this.render(); 10 | }, 11 | 12 | render: function () { 13 | this.$el.html(template(this.model.attributes)); 14 | this.model.reports.fetch(); 15 | this.listView = new EmployeeListView({collection: this.model.reports, el: $(".scroller", this.el)}); 16 | return this; 17 | } 18 | 19 | }); --------------------------------------------------------------------------------