liquid_feedback_frontend: 276718aedd90 style/mdl/layout/

liquid_feedback_frontend

view style/mdl/layout/_layout.scss @ 1380:276718aedd90

Show label for drop down boxes

author	bsw
date	Wed Aug 08 17:38:23 2018 +0200 (2018-08-08)
parents	32cc544d5a5b
children

line source

1 /**

3 *

4 * Licensed under the Apache License, Version 2.0 (the "License");

5 * you may not use this file except in compliance with the License.

6 * You may obtain a copy of the License at

7 *

8 * http://www.apache.org/licenses/LICENSE-2.0

9 *

10 * Unless required by applicable law or agreed to in writing, software

11 * distributed under the License is distributed on an "AS IS" BASIS,

12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

13 * See the License for the specific language governing permissions and

14 * limitations under the License.

15 */

17 @import "../variables";

18 @import "../mixins";

20 // Navigation classes. Only used here for now, but we may at some point move

21 // this to its own component.

22 .mdl-navigation {

23 display: flex;

24 flex-wrap: nowrap;

25 box-sizing: border-box;

26 }

28 .mdl-navigation__link {

29 color: $layout-text-color;

30 text-decoration: none;

31 margin: 0;

32 @include typo-body-1(true);

34 // Align icons inside link with text

35 & .material-icons {

36 vertical-align: middle;

37 }

38 }

40 // Main layout class.

41 .mdl-layout {

42 width: 100%;

43 height: 100%;

44 display: flex;

45 flex-direction: column;

46 overflow-y: auto;

47 overflow-x: hidden;

48 position: relative;

49 -webkit-overflow-scrolling: touch;

50 }

52 // Utility classes for screen sizes.

53 .mdl-layout.is-small-screen .mdl-layout--large-screen-only {

54 display: none;

55 }

57 .mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {

58 display: none;

59 }

61 .mdl-layout__container {

62 position: absolute;

63 width: 100%;

64 height: 100%;

65 }

68 // Optional utility classes for formatting special blocks in this component.

69 .mdl-layout__title,

70 .mdl-layout-title {

71 display: block;

72 position: relative;

74 @include typo-title();

75 font-weight: 400;

76 box-sizing: border-box;

77 }

79 .mdl-layout-spacer {

80 flex-grow: 1;

81 }

84 // Drawer.

85 .mdl-layout__drawer {

86 display: flex;

87 flex-direction: column;

88 flex-wrap: nowrap;

90 width: $layout-drawer-width;

91 height: 100%;

92 max-height: 100%;

94 position: absolute;

95 top: 0;

96 left: 0;

98 @include shadow-2dp();

100 box-sizing: border-box;

101 border-right: 1px solid $layout-drawer-border-color;

102 background: $layout-drawer-bg-color;

103

104 // Transform offscreen.

105 transform: translateX(-$layout-drawer-width - 10px);

106 transform-style: preserve-3d;

107 will-change: transform;

108

109 @include material-animation-default();

110 transition-property: transform;

111

112 color: $layout-text-color;

113

114 overflow: visible;

115 overflow-y: auto;

116

117 z-index: 5;

118

119 &.is-visible {

120 transform: translateX(0);

121 & ~ .mdl-layout__content.mdl-layout__content {

122 overflow: hidden;

123 }

124 }

125

126 & > * {

127 flex-shrink: 0;

128 }

129

130 & > .mdl-layout__title,

131 & > .mdl-layout-title {

132 line-height: $layout-desktop-header-height;

133 padding-left: $layout-header-desktop-indent;

134

135 @media screen and (max-width: $layout-screen-size-threshold) {

136 line-height: $layout-mobile-header-height;

137 padding-left: $layout-header-mobile-indent;

138 }

139 }

140

141 & .mdl-navigation {

142 flex-direction: column;

143 align-items: stretch;

144 padding-top: 16px;

145

146 & .mdl-navigation__link {

147 display: block;

148 flex-shrink: 0;

149 padding: 16px $layout-header-desktop-indent;

150 margin: 0;

151 color: $layout-drawer-navigation-color;

152

153 @media screen and (max-width: $layout-screen-size-threshold) {

154 padding: 16px $layout-header-mobile-indent;

155 }

156

157 &:hover {

158 background-color: $layout-nav-color;

159 }

160

161 &--current {

162 background-color: $layout-drawer-navigation-link-active-background;

163 color: $layout-drawer-navigation-link-active-color;

164 }

165 }

166 }

167

168 @media screen and (min-width: $layout-screen-size-threshold + 1px) {

169 .mdl-layout--fixed-drawer > & {

170 transform: translateX(0);

171 }

172 }

173 }

174

175

176 // Drawer button.

177 // TODO(sgomes): Replace with an icon button when we have that component.

178 .mdl-layout__drawer-button {

179 display: block;

180

181 position: absolute;

182 height: $layout-drawer-button-desktop-size;

183 width: $layout-drawer-button-desktop-size;

184 border: 0;

185

186 flex-shrink: 0;

187

188 overflow: hidden;

189 text-align: center;

190 cursor: pointer;

191 font-size: 26px;

192 line-height: $layout-mobile-header-height;

193 font-family: Helvetica, Arial, sans-serif;

194 margin: ($layout-mobile-header-height - $layout-drawer-button-desktop-size) 12px;

195 top: 0;

196 left: 0;

197 color: $layout-header-text-color;

198

199 z-index: 4;

200

201 .mdl-layout__header & {

202 position: absolute;

203 color: $layout-header-text-color;

204 background-color: inherit;

205

206 @media screen and (max-width: $layout-screen-size-threshold) {

207 margin: 4px;

208 }

209 }

210

211 @media screen and (max-width: $layout-screen-size-threshold) {

212 margin: 4px;

213 color: rgba(0, 0, 0, 0.5);

214 }

215

216 @media screen and (min-width: $layout-screen-size-threshold + 1px) {

217 line-height: 54px;

218

219 .mdl-layout--no-desktop-drawer-button &,

220 .mdl-layout--fixed-drawer > &,

221 .mdl-layout--no-drawer-button & {

222 display: none;

223 }

224 }

225 }

226

227 .mdl-layout__header {

228 display: flex;

229 flex-direction: column;

230 flex-wrap: nowrap;

231 justify-content: flex-start;

232 box-sizing: border-box;

233 flex-shrink: 0;

234

235 width: 100%;

236 margin: 0;

237 padding: 0;

238 border: none;

239 min-height: $layout-desktop-header-height;

240 max-height: 1000px;

241 z-index: 3;

242

243 background-color: $layout-header-bg-color;

244 color: $layout-header-text-color;

245

246 @include shadow-2dp();

247 @include material-animation-default();

248 transition-property: max-height, box-shadow;

249

250 @media screen and (max-width: $layout-screen-size-threshold) {

251 min-height: $layout-mobile-header-height;

252 }

253

254 .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {

255 margin-left: $layout-drawer-width;

256 width: calc(100% - #{$layout-drawer-width});

257 }

258

259 @media screen and (min-width: $layout-screen-size-threshold + 1px) {

260 .mdl-layout--fixed-drawer > & {

261 .mdl-layout__header-row {

262 padding-left: 40px;

263 }

264 }

265 }

266

267 & > .mdl-layout-icon {

268 position: absolute;

269 left: $layout-header-desktop-indent;

270 top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;

271 height: $layout-header-icon-size;

272 width: $layout-header-icon-size;

273 overflow: hidden;

274 z-index: 3;

275 display: block;

276

277 @media screen and (max-width: $layout-screen-size-threshold) {

278 left: $layout-header-mobile-indent;

279 top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;

280 }

281 }

282

283 .mdl-layout.has-drawer & > .mdl-layout-icon {

284 display: none;

285 }

286

287 &.is-compact {

288 max-height: $layout-desktop-header-height;

289

290 @media screen and (max-width: $layout-screen-size-threshold) {

291 max-height: $layout-mobile-header-height;

292 }

293 }

294

295 &.is-compact.has-tabs {

296 height: $layout-desktop-header-height + $layout-tab-bar-height;

297

298 @media screen and (max-width: $layout-screen-size-threshold) {

299 min-height: $layout-mobile-header-height + $layout-tab-bar-height;

300 }

301 }

302

303 @media screen and (max-width: $layout-screen-size-threshold) {

304 & {

305 display: none;

306 }

307

308 .mdl-layout--fixed-header > & {

309 display: flex;

310 }

311 }

312 }

313

314 .mdl-layout__header--transparent.mdl-layout__header--transparent {

315 background-color: transparent;

316 box-shadow: none;

317 }

318

319 .mdl-layout__header--seamed {

320 box-shadow: none;

321 }

322

323 .mdl-layout__header--scroll {

324 box-shadow: none;

325 }

326

327 .mdl-layout__header--waterfall {

328 box-shadow: none;

329 overflow: hidden;

330

331 &.is-casting-shadow {

332 @include shadow-2dp();

333 }

334

335 &.mdl-layout__header--waterfall-hide-top {

336 justify-content: flex-end;

337 }

338 }

339

340 .mdl-layout__header-row {

341 display: flex;

342 flex-direction: row;

343 flex-wrap: nowrap;

344 flex-shrink: 0;

345 box-sizing: border-box;

346 align-self: stretch;

347 align-items: center;

348 height: $layout-header-desktop-row-height;

349 margin: 0;

350 padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;

351

352 .mdl-layout--no-drawer-button & {

353 padding-left: $layout-header-desktop-indent;

354 }

355

356 @media screen and (min-width: $layout-screen-size-threshold + 1px) {

357 .mdl-layout--no-desktop-drawer-button & {

358 padding-left: $layout-header-desktop-indent;

359 }

360 }

361

362 @media screen and (max-width: $layout-screen-size-threshold) {

363 height: $layout-header-mobile-row-height;

364 padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;

365

366 .mdl-layout--no-drawer-button & {

367 padding-left: $layout-header-mobile-indent;

368 }

369 }

370

371 & > * {

372 flex-shrink: 0;

373 }

374

375 .mdl-layout__header--scroll & {

376 width: 100%;

377 }

378

379 & .mdl-navigation {

380 margin: 0;

381 padding: 0;

382 height: $layout-header-desktop-row-height;

383 flex-direction: row;

384 align-items: center;

385

386 @media screen and (max-width: $layout-screen-size-threshold) {

387 height: $layout-header-mobile-row-height;

388 }

389 }

390

391 & .mdl-navigation__link {

392 display: block;

393 color: $layout-header-text-color;

394 line-height: $layout-header-desktop-row-height;

395 padding: 0 24px;

396

397 @media screen and (max-width: $layout-screen-size-threshold) {

398 line-height: $layout-header-mobile-row-height;

399 padding: 0 $layout-header-mobile-indent;

400 }

401 }

402 }

403

404 // Obfuscator.

405 .mdl-layout__obfuscator {

406 background-color: transparent;

407 position: absolute;

408 top: 0;

409 left: 0;

410 height: 100%;

411 width: 100%;

412 z-index: 4;

413 visibility: hidden;

414 transition-property: background-color;

415 @include material-animation-default();

416

417 &.is-visible {

418 background-color: rgba(0, 0, 0, 0.5);

419 visibility: visible;

420 }

421

422 @supports (pointer-events: auto) {

423 background-color: rgba(0, 0, 0, 0.5);

424 opacity: 0;

425 transition-property: opacity;

426 visibility: visible;

427 pointer-events: none;

428 &.is-visible {

429 pointer-events: auto;

430 opacity: 1;

431 }

432 }

433 }

434

435

436 // Content.

437 .mdl-layout__content {

438 // Fix IE10 bug.

439 -ms-flex: 0 1 auto;

440

441 position: relative;

442 display: inline-block;

443 overflow-y: auto;

444 overflow-x: hidden;

445 flex-grow: 1;

446 z-index: 1;

447 -webkit-overflow-scrolling: touch;

448

449 .mdl-layout--fixed-drawer > & {

450 margin-left: $layout-drawer-width;

451 }

452

453 .mdl-layout__container.has-scrolling-header & {

454 overflow: visible;

455 }

456

457 @media screen and (max-width: $layout-screen-size-threshold) {

458 .mdl-layout--fixed-drawer > & {

459 margin-left: 0;

460 }

461

462 .mdl-layout__container.has-scrolling-header & {

463 overflow-y: auto;

464 overflow-x: hidden;

465 }

466 }

467 }

468

469 // Tabs.

470 .mdl-layout__tab-bar {

471 height: $layout-tab-bar-height * 2;

472 margin: 0;

473 width: calc(100% -

474 #{(($layout-header-desktop-baseline - $layout-tab-desktop-padding) * 2)});

475 padding: 0 0 0

476 ($layout-header-desktop-baseline - $layout-tab-desktop-padding);

477 display: flex;

478 background-color: $layout-header-bg-color;

479 overflow-y: hidden;

480 overflow-x: scroll;

481

482 &::-webkit-scrollbar {

483 display: none;

484 }

485

486 .mdl-layout--no-drawer-button & {

487 padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;

488 width: calc(100% -

489 #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});

490 }

491

492 @media screen and (min-width: $layout-screen-size-threshold + 1px) {

493 .mdl-layout--no-desktop-drawer-button & {

494 padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;

495 width: calc(100% -

496 #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});

497 }

498 }

499

500 @media screen and (max-width: $layout-screen-size-threshold) {

501 width: calc(100% -

502 #{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});

503 padding: 0 0 0

504 ($layout-header-mobile-baseline - $layout-tab-mobile-padding);

505

506 .mdl-layout--no-drawer-button & {

507 width: calc(100% -

508 #{(($layout-header-mobile-indent - $layout-tab-mobile-padding) * 2)});

509 padding-left: $layout-header-mobile-indent - $layout-tab-mobile-padding;

510 }

511 }

512

513 .mdl-layout--fixed-tabs & {

514 padding: 0;

515 overflow: hidden;

516 width: 100%;

517 }

518 }

519

520 .mdl-layout__tab-bar-container {

521 position: relative;

522 height: $layout-tab-bar-height;

523 width: 100%;

524 border: none;

525 margin: 0;

526 z-index: 2;

527 flex-grow: 0;

528 flex-shrink: 0;

529 overflow: hidden;

530

531 .mdl-layout__container > & {

532 position: absolute;

533 top: 0;

534 left: 0;

535 }

536 }

537

538 .mdl-layout__tab-bar-button {

539 display: inline-block;

540 position: absolute;

541 top: 0;

542 height: $layout-tab-bar-height;

543 width: $layout-header-desktop-baseline - $layout-tab-desktop-padding;

544 z-index: 4;

545 text-align: center;

546 background-color: $layout-header-bg-color;

547 color: transparent;

548 cursor: pointer;

549 user-select: none;

550

551 .mdl-layout--no-desktop-drawer-button &,

552 .mdl-layout--no-drawer-button & {

553 width: $layout-header-desktop-indent - $layout-tab-desktop-padding;

554

555 & .material-icons {

556 position: relative;

557 left: ($layout-header-desktop-indent - $layout-tab-desktop-padding - 24px) / 2;

558 }

559 }

560

561 @media screen and (max-width: $layout-screen-size-threshold) {

562 width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;

563 }

564

565 .mdl-layout--fixed-tabs & {

566 display: none;

567 }

568

569 & .material-icons {

570 line-height: $layout-tab-bar-height;

571 }

572

573 &.is-active {

574 color: $layout-header-text-color;

575 }

576 }

577

578 .mdl-layout__tab-bar-left-button {

579 left: 0;

580 }

581

582 .mdl-layout__tab-bar-right-button {

583 right: 0;

584 }

585

586 .mdl-layout__tab {

587 margin: 0;

588 border: none;

589 padding: 0 $layout-tab-desktop-padding 0 $layout-tab-desktop-padding;

590

591 float: left;

592 position: relative;

593 display: block;

594 flex-grow: 0;

595 flex-shrink: 0;

596

597 text-decoration: none;

598 height: $layout-tab-bar-height;

599 line-height: $layout-tab-bar-height;

600

601 text-align: center;

602 font-weight: 500;

603 font-size: $layout-tab-font-size;

604 text-transform: uppercase;

605

606 color: $layout-header-tab-text-color;

607 overflow: hidden;

608

609 @media screen and (max-width: $layout-screen-size-threshold) {

610 padding: 0 $layout-tab-mobile-padding 0 $layout-tab-mobile-padding;

611 }

612

613 .mdl-layout--fixed-tabs & {

614 float: none;

615 flex-grow: 1;

616 padding: 0;

617 }

618

619 .mdl-layout.is-upgraded &.is-active {

620 color: $layout-header-text-color;

621 }

622

623 .mdl-layout.is-upgraded &.is-active::after {

624 height: $layout-tab-highlight-thickness;

625 width: 100%;

626 display: block;

627 content: " ";

628 bottom: 0;

629 left: 0;

630 position: absolute;

631 background: $layout-header-tab-highlight;

632 animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;

633 transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);

634 }

635

636 & .mdl-layout__tab-ripple-container {

637 display: block;

638 position: absolute;

639 height: 100%;

640 width: 100%;

641 left: 0;

642 top: 0;

643 z-index: 1;

644 overflow: hidden;

645

646 & .mdl-ripple {

647 background-color: $layout-header-text-color;

648 }

649 }

650 }

651

652 .mdl-layout__tab-panel {

653 display: block;

654

655 .mdl-layout.is-upgraded & {

656 display: none;

657 }

658

659 .mdl-layout.is-upgraded &.is-active {

660 display: block;

661 }

662 }