| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. |
| 2 Use of this source code is governed by a BSD-style license that can be |
| 3 found in the LICENSE file. --> |
| 4 |
| 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classe
s/iron-flex-layout.html"> |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
| 7 |
| 8 <!-- |
| 9 Simple OOBE card which should be used for OOBE UI elements. |
| 10 It has blue header and grey footer. |
| 11 |
| 12 Example: |
| 13 <oobe-card> |
| 14 <div class="header flex vertical layout end-justified start"> |
| 15 ... |
| 16 </div> |
| 17 <oobe-input-form class="footer" ...> |
| 18 </oobe-input-form> |
| 19 </oobe-card> |
| 20 |
| 21 Add class |header| to all which you want to go inside blue header. Similar |
| 22 with class |footer|. |
| 23 --> |
| 24 <dom-module name="oobe-card"> |
| 25 <style> |
| 26 :host { |
| 27 display: flex; |
| 28 flex-direction: column; |
| 29 position: relative; |
| 30 } |
| 31 |
| 32 .oobe-header { |
| 33 background-color: var(--google-blue-500); |
| 34 color: white; |
| 35 height: 198px; |
| 36 } |
| 37 |
| 38 :host(:not(.disabled)) .oobe-header { |
| 39 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17); |
| 40 /* z-index is needed to make shadow visible. */ |
| 41 z-index: 1; |
| 42 } |
| 43 |
| 44 .oobe-footer { |
| 45 background-color: white; |
| 46 position: relative; |
| 47 } |
| 48 |
| 49 .header-container { |
| 50 padding: 50px 40px 18px; |
| 51 } |
| 52 |
| 53 .footer-container { |
| 54 padding: 24px 40px 34px; |
| 55 } |
| 56 |
| 57 ::content div.oobe-body-text { |
| 58 margin-bottom: 24px; |
| 59 } |
| 60 |
| 61 ::content div.oobe-body-text p { |
| 62 color: rgba(0, 0, 0, 0.87); |
| 63 font-size: 14px; |
| 64 line-height: 20px; |
| 65 margin: 0; |
| 66 } |
| 67 |
| 68 ::content h1.welcome-message { |
| 69 color: white; |
| 70 font-size: 20px; |
| 71 font-weight: normal; |
| 72 margin-bottom: 0; |
| 73 } |
| 74 |
| 75 .overlay { |
| 76 background-color: rgba(0, 0, 0, 0.5); |
| 77 display: none; |
| 78 height: 100%; |
| 79 position: absolute; |
| 80 right: 0; |
| 81 top: 0; |
| 82 width: 100%; |
| 83 z-index: 11; |
| 84 } |
| 85 |
| 86 :host(.full-disabled) #full-overlay, |
| 87 :host(.disabled) #bottom-overlay, |
| 88 </style> |
| 89 |
| 90 <template> |
| 91 <div class="oobe-header vertical layout relative"> |
| 92 <div class="header-container flex vertical layout relative"> |
| 93 <content select=".header"></content> |
| 94 </div> |
| 95 </div> |
| 96 <div class="oobe-footer flex vertical layout"> |
| 97 <div class="footer-container flex vertical layout"> |
| 98 <content select=".footer"></content> |
| 99 </div> |
| 100 <div id="bottom-overlay" class="overlay"></div> |
| 101 </div> |
| 102 <div id="full-overlay" class="overlay"></div> |
| 103 </template> |
| 104 </dom-module> |
| 105 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1965913005:
ChromeOS: Implement minumal material design OOBE. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master