openwapp

Download as
Browse Code ยป

Commit b2b76a90d31c0d5bf11227342a58f4cf45f731c5

Authored by OpenWapp Developer
2 parents 1a20719b9d e5bc0fd5ea

Merge branch 'issue123' of /home/git/repositories/openwapp/openwapp

Showing 68 changed files

app/images/shared/headers/images/icons/add.png View file @ b2b76a9

164 Bytes | W: | H:

162 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/add@2.25x.png View file @ b2b76a9

267 Bytes
app/images/shared/headers/images/icons/add@2x.png View file @ b2b76a9

363 Bytes | W: | H:

234 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/back-rtl@2.25x.png View file @ b2b76a9

458 Bytes
app/images/shared/headers/images/icons/back.png View file @ b2b76a9

181 Bytes | W: | H:

146 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/back.svg View file @ b2b76a9
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#fff" d="M19.989 8.353l-6.019 6.02-.023.017c-.33.331-.334.853-.031 1.196l-.004.003 6.067 6.069c-.275 1.2-.629 2.323-1.043 3.342l-8.166-8.16c-1.013-1.013-1.013-2.655 0-3.667l8.174-8.173c.416 1.024.768 2.148 1.045 3.353z"/></svg>
app/images/shared/headers/images/icons/back@1.5x.png View file @ b2b76a9

231 Bytes | W: | H:

179 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/back@2.25x.png View file @ b2b76a9

230 Bytes
app/images/shared/headers/images/icons/back@2x.png View file @ b2b76a9

445 Bytes | W: | H:

195 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/close.png View file @ b2b76a9

228 Bytes | W: | H:

188 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/close.svg View file @ b2b76a9
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#fff" d="M17.884 14.369l4.009-4.008c-.307-1.161-.727-2.226-1.233-3.166l-5.651 5.649-5.665-5.666c-.509.938-.93 2.002-1.237 3.161l4.028 4.03.022.016c.328.33.337.852.032 1.197l.002.002-4.082 4.084c.308 1.156.727 2.218 1.235 3.154l5.665-5.666 5.649 5.646c.507-.935.926-1.998 1.231-3.154l-4.062-4.064.004-.002c-.303-.345-.298-.867.032-1.197l.021-.016z"/></svg>
app/images/shared/headers/images/icons/close@1.5x.png View file @ b2b76a9

346 Bytes | W: | H:

230 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/close@2.25x.png View file @ b2b76a9

283 Bytes
app/images/shared/headers/images/icons/close@2x.png View file @ b2b76a9

674 Bytes | W: | H:

284 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/compose.png View file @ b2b76a9

275 Bytes | W: | H:

273 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/compose@1.5x.png View file @ b2b76a9

316 Bytes | W: | H:

313 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/compose@2.25x.png View file @ b2b76a9

803 Bytes
app/images/shared/headers/images/icons/compose@2x.png View file @ b2b76a9

727 Bytes | W: | H:

440 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/down.png View file @ b2b76a9

215 Bytes | W: | H:

208 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/down@1.5x.png View file @ b2b76a9

330 Bytes
app/images/shared/headers/images/icons/down@2.25x.png View file @ b2b76a9

381 Bytes
app/images/shared/headers/images/icons/down@2x.png View file @ b2b76a9

404 Bytes
app/images/shared/headers/images/icons/edit.png View file @ b2b76a9

347 Bytes | W: | H:

344 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/edit@1.5x.png View file @ b2b76a9

474 Bytes | W: | H:

473 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/edit@2.25x.png View file @ b2b76a9

933 Bytes
app/images/shared/headers/images/icons/edit@2x.png View file @ b2b76a9

987 Bytes | W: | H:

658 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/menu.png View file @ b2b76a9

115 Bytes | W: | H:

96 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/menu.svg View file @ b2b76a9
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g fill="#fff"><path d="M11 5.5h8v3h-8zM11 13.5h8v3h-8zM11 21.5h8v3h-8z"/></g></svg>
app/images/shared/headers/images/icons/menu@1.5x.png View file @ b2b76a9

162 Bytes | W: | H:

126 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/menu@2.25x.png View file @ b2b76a9

159 Bytes
app/images/shared/headers/images/icons/menu@2x.png View file @ b2b76a9

258 Bytes | W: | H:

95 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/options.png View file @ b2b76a9

158 Bytes | W: | H:

152 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/options@1.5x.png View file @ b2b76a9

223 Bytes | W: | H:

222 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/options@2.25x.png View file @ b2b76a9

376 Bytes
app/images/shared/headers/images/icons/options@2x.png View file @ b2b76a9

374 Bytes
app/images/shared/headers/images/icons/organic/add@2.25x.png View file @ b2b76a9

322 Bytes
app/images/shared/headers/images/icons/organic/add@2x.png View file @ b2b76a9

1.31 KB
app/images/shared/headers/images/icons/organic/back-rtl@2.25x.png View file @ b2b76a9

458 Bytes
app/images/shared/headers/images/icons/organic/back.png View file @ b2b76a9

181 Bytes | W: | H:

151 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/organic/back.svg View file @ b2b76a9
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#5F5F5F" d="M19.989 8.353l-6.019 6.02-.023.017c-.33.331-.334.853-.031 1.196l-.004.003 6.067 6.069c-.275 1.2-.629 2.323-1.043 3.342l-8.166-8.16c-1.013-1.013-1.013-2.655 0-3.667l8.174-8.173c.416 1.024.768 2.148 1.045 3.353z"/></svg>
app/images/shared/headers/images/icons/organic/back@1.5x.png View file @ b2b76a9

229 Bytes | W: | H:

184 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/organic/back@2.25x.png View file @ b2b76a9

244 Bytes
app/images/shared/headers/images/icons/organic/back@2x.png View file @ b2b76a9

512 Bytes | W: | H:

201 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/organic/close.png View file @ b2b76a9

229 Bytes | W: | H:

200 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/organic/close.svg View file @ b2b76a9
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#5F5F5F" d="M17.884 14.369l4.009-4.008c-.307-1.161-.727-2.226-1.233-3.166l-5.651 5.649-5.665-5.666c-.509.938-.93 2.002-1.237 3.161l4.028 4.03.022.016c.328.33.337.852.032 1.197l.002.002-4.082 4.084c.308 1.156.727 2.218 1.235 3.154l5.665-5.666 5.649 5.646c.507-.935.926-1.998 1.231-3.154l-4.062-4.064.004-.002c-.303-.345-.298-.867.032-1.197l.021-.016z"/></svg>
app/images/shared/headers/images/icons/organic/close@1.5x.png View file @ b2b76a9

341 Bytes | W: | H:

233 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/organic/close@2.25x.png View file @ b2b76a9

310 Bytes
app/images/shared/headers/images/icons/organic/close@2x.png View file @ b2b76a9

417 Bytes | W: | H:

292 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/organic/edit@2.25x.png View file @ b2b76a9

982 Bytes
app/images/shared/headers/images/icons/organic/edit@2x.png View file @ b2b76a9

2.03 KB
app/images/shared/headers/images/icons/reply.png@2.25x.png View file @ b2b76a9

650 Bytes
app/images/shared/headers/images/icons/reply@2.25x.png View file @ b2b76a9

650 Bytes
app/images/shared/headers/images/icons/reply@2x.png View file @ b2b76a9

831 Bytes | W: | H:

437 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/reply_all.png View file @ b2b76a9

198 Bytes | W: | H:

194 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/reply_all@2.25x.png View file @ b2b76a9

790 Bytes
app/images/shared/headers/images/icons/reply_all@2x.png View file @ b2b76a9

434 Bytes
app/images/shared/headers/images/icons/send@2.25x.png View file @ b2b76a9

656 Bytes
app/images/shared/headers/images/icons/send@2x.png View file @ b2b76a9

967 Bytes | W: | H:

584 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/up.png View file @ b2b76a9

225 Bytes | W: | H:

223 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/up@1.5x.png View file @ b2b76a9

321 Bytes
app/images/shared/headers/images/icons/up@2.25x.png View file @ b2b76a9

383 Bytes
app/images/shared/headers/images/icons/up@2x.png View file @ b2b76a9

406 Bytes
app/images/shared/headers/images/icons/user@1.5x.png View file @ b2b76a9

377 Bytes | W: | H:

377 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/shared/headers/images/icons/user@2.25x.png View file @ b2b76a9

618 Bytes
app/images/shared/headers/images/icons/user@2x.png View file @ b2b76a9

974 Bytes | W: | H:

571 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/scripts/vendor/coseme-client/client.js View file @ b2b76a9
... ... @@ -37,6 +37,7 @@
37 37  
38 38 if (typeof window.navigator.getDeviceStorage === 'function') {
39 39 _sdcard = navigator.getDeviceStorage('sdcard');
  40 + _seedForId = 'c9qjareu'; // testing purposes
40 41 }
41 42 else {
42 43 console.error('There is no getDeviceStorage API');
app/styles/shared/_headers.scss View file @ b2b76a9
1   -/* ----------------------------------
2   - * HEADERS: default
3   - * ---------------------------------- */
  1 +/* -------------------------------------------------------------------
  2 + HEADERS: layout
  3 + Form factor or Skin dependent styles should NOT be defined here.
  4 +------------------------------------------------------------------- */
  5 +
4 6 section[role="region"] > header:first-child {
5 7 position: relative;
  8 + display: block;
6 9 z-index: 10;
7 10 padding: 0;
8 11 height: 5rem;
9   - color: #fff;
10   - background-color: #F97C17;
11 12 border: none;
12 13 }
13 14  
14 15 section[role="region"] > header:first-child h1 {
15   - font-size: 2.5rem;
  16 + font-size: 2.3rem;
16 17 line-height: 5rem;
17   - text-align: left;
18   - color: #fff;
19 18 white-space: nowrap;
20 19 text-overflow: ellipsis;
21 20 display: block;
22 21 overflow: hidden;
23 22 margin: 0;
24   - padding: 0 1rem 0 3rem;
  23 + padding: 0 1rem;
25 24 height: 100%;
26   - font-weight: lighter;
  25 + font-weight: 300;
  26 + font-style: italic;
  27 + text-align: center;
27 28 }
28 29  
29 30 section[role="region"] > header:first-child h1 em {
30 31  
31 32  
32 33  
33 34  
34 35  
35 36  
36 37  
37 38  
38 39  
39 40  
... ... @@ -33,88 +34,39 @@
33 34 font-style: normal;
34 35 }
35 36  
36   -section[role="region"] > header:first-child form {
37   - display: block;
38   - overflow: hidden;
39   - position: relative;
40   - padding: 1rem 1rem 0 0.5rem ;
41   - margin-left: 3.5rem;
42   -}
43   -
44   -section[role="region"] > header:first-child input[type="text"] {
45   - width: 100%;
46   - height: 3rem;
47   - -moz-box-sizing: border-box;
48   - padding: 0 0.8rem;
49   - border: solid 0.1rem #9d4123;
50   - border-top-color: #a6501e;
51   - border-radius: 0.3rem;
52   - background: #fff url(/images/shared/headers/images/ui/shadow.png) repeat-x left -0.1rem;
53   - font-size: 1.5rem;
54   - line-height: 3em;
55   - box-shadow: none;
56   -}
57   -
58   -section[role="region"] > header:first-child form button[type="reset"] {
59   - font-size: 0;
60   - overflow: hidden;
61   - position: absolute;
62   - right: 1rem;
63   - top: 1rem;
64   - bottom: 0;
65   - width: 3rem;
66   - height: auto;
67   - margin: 0;
68   - display: none;
69   - border: none;
70   - background: url(/images/shared/headers/images/icons/clear.png) no-repeat center center / 1.7rem auto;
71   -}
72   -
73   -section[role="region"] > header:first-child input[type="text"]:valid + button[type="reset"] {
74   - display: block;
75   -}
76   -
77   -/* Generic set of actions in toolbar */
78   -section[role="region"] > header:first-child menu[type="toolbar"] {
  37 +section[role="region"] > header:first-child menu {
79 38 height: 100%;
80 39 float: right;
  40 + padding: 0;
  41 + margin: 0;
81 42 }
82 43  
83   -section[role="region"] > header:first-child menu[type="toolbar"] a,
84   -section[role="region"] > header:first-child menu[type="toolbar"] button {
85   - -moz-box-sizing: border-box;
  44 +/* ----------------------------------
  45 + Buttons
  46 +---------------------------------- */
  47 +
  48 +section[role="region"] > header:first-child a,
  49 +section[role="region"] > header:first-child button {
  50 + box-sizing: border-box;
86 51 position: relative;
  52 + display: block;
  53 + overflow: hidden;
87 54 float: left;
88   - width: auto;
89 55 min-width: 5rem;
  56 + width: auto;
90 57 height: 5rem;
91   - margin-bottom: 0;
92   - padding: 0 1rem;
93   - border-radius: 0;
94   - line-height: 5rem;
  58 + border: none;
95 59 background: none;
96   - text-align: center;
97   - text-shadow: none;
98   - z-index: 5;
99   -}
100   -
101   -
102   -section[role="region"] > header:first-child menu[type="toolbar"] {
103   - padding: 0;
  60 + padding: 0 1rem;
104 61 margin: 0;
105   -}
106   -
107   -section[role="region"] > header:first-child a,
108   -section[role="region"] > header:first-child button {
109   - border: none;
110   - padding: 0;
111   - overflow: hidden;
112 62 font-weight: 400;
113 63 font-size: 1.5rem;
114   - line-height: 1.1em;
115   - color: #fff;
  64 + line-height: 5rem;
116 65 border-radius: 0;
117 66 text-decoration: none;
  67 + text-align: center;
  68 + text-shadow: none;
  69 + font-style: italic;
118 70 }
119 71  
120 72 /* Pressed state */
121 73  
122 74  
123 75  
124 76  
125 77  
126 78  
127 79  
128 80  
129 81  
130 82  
131 83  
132 84  
133 85  
134 86  
135 87  
136 88  
137 89  
138 90  
139 91  
140 92  
141 93  
142 94  
143 95  
144 96  
145 97  
146 98  
147 99  
148 100  
149 101  
... ... @@ -129,172 +81,216 @@
129 81 padding: 0;
130 82 }
131 83  
132   -section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
133   -section[role="region"] > header:first-child > button:not(:disabled):active:after,
134   -section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
135   -section[role="region"] > header:first-child > button:not(:disabled):hover:after,
136   -section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
137   -section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
138   -section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
139   -section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active {
140   - background-color: #dc6a0e !important;
141   -}
142   -
143 84 /* Disabled state */
144   -section[role="region"] > header:first-child menu[type="toolbar"] a[aria-disabled="true"],
145   -section[role="region"] > header:first-child menu[type="toolbar"] button[disabled] {
146   - opacity: 0.5;
  85 +section[role="region"] > header:first-child a[aria-disabled="true"],
  86 +section[role="region"] > header:first-child button[disabled] {
  87 + opacity: 0.3;
147 88 pointer-events: none;
148 89 }
149 90  
150   -/* Icon definitions */
  91 +/* ----------------------------------
  92 + Icons
  93 +---------------------------------- */
  94 +
151 95 section[role="region"] > header:first-child .icon {
152   - position: relative;
153   - float: none;
154   - display: inline-block;
  96 + display: block;
155 97 width: 3rem;
156 98 height: 5rem;
157   - margin: 0 -1rem;
158   - background: transparent no-repeat center center / 3rem auto;
  99 + background: transparent no-repeat center / 3rem auto;
159 100 font-size: 0;
160   - overflow: hidden;
161 101 }
162 102  
163   -section[role="region"] > header:first-child .icon.icon-add {
  103 +/* ----------------------------------
  104 + Subheader
  105 +---------------------------------- */
  106 +
  107 +section[role="region"] > header {
  108 + z-index: 0;
  109 + height: auto;
  110 +}
  111 +
  112 +section[role="region"] header h2 {
  113 + margin: 0;
  114 + padding: 0.8rem 3rem;
  115 + font-weight: 400;
  116 + font-size: 1.5rem;
  117 + line-height: 1.8rem;
  118 +}
  119 +
  120 +/* ----------------------------------
  121 + right-to-left
  122 +---------------------------------- */
  123 +
  124 +html[dir="rtl"] section[role="region"] > header:first-child menu {
  125 + float: left;
  126 +}
  127 +
  128 +html[dir="rtl"] section[role="region"] > header:first-child button,
  129 +html[dir="rtl"] section[role="region"] > header:first-child a {
  130 + float: right;
  131 +}
  132 +
  133 +html[dir="rtl"] section[role="region"] > header:first-child .icon-back {
  134 + transform: rotate(180deg);
  135 +}
  136 +
  137 +/* -----------------------------------------------------------------
  138 + HEADER SKIN: default
  139 + Default values in case we are not overriding them using
  140 + class="skin-*"
  141 +----------------------------------------------------------------- */
  142 +
  143 +section[role="region"] > header:first-child {
  144 + color: #fff;
  145 + background-color: #f97c17;
  146 +}
  147 +
  148 +section[role="region"] > header:first-child h1 {
  149 + color: #fff;
  150 +}
  151 +
  152 +section[role="region"] > header:first-child a,
  153 +section[role="region"] > header:first-child button {
  154 + color: rgba(0,0,0,0.6);
  155 +}
  156 +
  157 +section[role="region"] > header:first-child a:active,
  158 +section[role="region"] > header:first-child button:active,
  159 +section[role="region"] > header:first-child a:hover,
  160 +section[role="region"] > header:first-child button:hover {
  161 + background-color: rgba(0,0,0,0.07);
  162 +}
  163 +
  164 +section[role="region"] > header:first-child a:focus,
  165 +section[role="region"] > header:first-child button:focus {
  166 + background-color: transparent;
  167 +}
  168 +
  169 +/* ----------------------------------
  170 + Icons
  171 +---------------------------------- */
  172 +
  173 +section[role="region"] > header:first-child .icon-add {
164 174 background-image: url(/images/shared/headers/images/icons/add.png);
165 175 }
166 176  
167   -section[role="region"] > header:first-child .icon.icon-compose {
  177 +section[role="region"] > header:first-child .icon-compose {
168 178 background-image: url(/images/shared/headers/images/icons/compose.png);
169 179 }
170 180  
171   -section[role="region"] > header:first-child .icon.icon-edit {
  181 +section[role="region"] > header:first-child .icon-edit {
172 182 background-image: url(/images/shared/headers/images/icons/edit.png);
173 183 }
174 184  
175   -section[role="region"] > header:first-child .icon.icon-send {
  185 +section[role="region"] > header:first-child .icon-send {
176 186 background-image: url(/images/shared/headers/images/icons/send.png);
177 187 }
178 188  
179   -section[role="region"] > header:first-child .icon.icon-close {
  189 +section[role="region"] > header:first-child .icon-close {
180 190 background-image: url(/images/shared/headers/images/icons/close.png);
181 191 }
182 192  
183   -section[role="region"] > header:first-child .icon.icon-back {
  193 +section[role="region"] > header:first-child .icon-back {
184 194 background-image: url(/images/shared/headers/images/icons/back.png);
185 195 }
186 196  
187   -section[role="region"] > header:first-child .icon.icon-menu {
  197 +section[role="region"] > header:first-child .icon-menu {
188 198 background-image: url(/images/shared/headers/images/icons/menu.png);
189 199 }
190 200  
191   -section[role="region"] > header:first-child .icon.icon-user {
  201 +section[role="region"] > header:first-child .icon-user {
192 202 background-image: url(/images/shared/headers/images/icons/user.png);
193 203 }
194 204  
195   -section[role="region"] > header:first-child .icon.icon-up {
  205 +section[role="region"] > header:first-child .icon-up {
196 206 background-image: url(/images/shared/headers/images/icons/up.png);
197 207 }
198 208  
199   -section[role="region"] > header:first-child .icon.icon-down {
  209 +section[role="region"] > header:first-child .icon-down {
200 210 background-image: url(/images/shared/headers/images/icons/down.png);
201 211 }
202 212  
203   -section[role="region"] > header:first-child .icon.icon-disabled {
204   - opacity: 0.5;
  213 +section[role="region"] > header:first-child .icon-options {
  214 + background-image: url(/images/shared/headers/images/icons/options.png);
205 215 }
206 216  
207   -/* We need to opt out of the header separator */
208   -section[role="region"] > header:first-child menu[type="toolbar"] a.msg-down-btn {
209   - background: no-repeat left center / auto 4.8rem !important;
210   -}
  217 +/* ----------------------------------
  218 + Subheader
  219 +---------------------------------- */
211 220  
212   -section[role="region"] > header:first-child .icon.icon-options {
213   - background-image: url(/images/shared/headers/images/icons/options.png);
  221 +section[role="region"] header h2 {
  222 + color: #424242;
  223 + border-bottom: solid 0.1rem #e6e6e6;
214 224 }
215 225  
216   -/* Navigation links (back, cancel, etc) */
217   -section[role="region"] > header:first-child > button,
218   -section[role="region"] > header:first-child > a {
219   - position: relative;
220   - width: 5rem;
221   - height: 5rem;
222   - background: none;
223   - float: left;
224   - overflow: visible;
225   - margin: 0 -5rem 0 0;
226   -}
  226 +/* -----------------------------------------------------------------
  227 + HEADER SKIN: comms
  228 + .skin-comms will override default values
  229 +----------------------------------------------------------------- */
227 230  
228   -section[role="region"] > header:first-child > button:after,
229   -section[role="region"] > header:first-child > a:after {
230   - content: "";
231   - position: absolute;
232   - left: 0;
233   - top: 0;
234   - z-index: -1;
235   - width: 2.6rem;
236   - height: 5rem;
  231 +.skin-comms section[role="region"] > header:first-child,
  232 +section[role="region"].skin-comms > header:first-child {
  233 + background-color: #00adad;
237 234 }
238 235  
239   -section[role="region"] > header:first-child > button .icon,
240   -section[role="region"] > header:first-child > a .icon {
241   - display: block;
242   - margin: 0;
243   - font-size: 0;
  236 +.skin-comms section[role="region"] > header:first-child a,
  237 +.skin-comms section[role="region"] > header:first-child button,
  238 +section[role="region"].skin-comms > header:first-child a,
  239 +section[role="region"].skin-comms > header:first-child button {
  240 + color: rgba(0,0,0,0.5);
244 241 }
245 242  
246   -/* ----------------------------------
247   - * HEADERS: subheader
248   - * ---------------------------------- */
249   -
250   -section[role="region"] > header {
251   - z-index: 0;
252   - height: auto;
  243 +.skin-comms section[role="region"] > header:first-child a:active,
  244 +.skin-comms section[role="region"] > header:first-child button:active,
  245 +.skin-comms section[role="region"] > header:first-child a:hover,
  246 +.skin-comms section[role="region"] > header:first-child button:hover,
  247 +section[role="region"].skin-comms > header:first-child a:active,
  248 +section[role="region"].skin-comms > header:first-child button:active,
  249 +section[role="region"].skin-comms > header:first-child a:hover,
  250 +section[role="region"].skin-comms > header:first-child button:hover {
  251 + background-color: rgba(0,0,0,0.1);
253 252 }
254 253  
255   -section[role="region"] > header:after {
256   - display: none;
  254 +.skin-comms section[role="region"] > header:first-child a:focus,
  255 +.skin-comms section[role="region"] > header:first-child button:focus,
  256 +section[role="region"].skin-comms > header:first-child a:focus,
  257 +section[role="region"].skin-comms > header:first-child button:focus {
  258 + background-color: transparent;
257 259 }
258 260  
259   -section[role="region"] header h2 {
260   - margin: 0;
261   - padding: 0.8rem 3rem;
262   - color: #424242;
263   - font-weight: 400;
264   - font-size: 1.5rem;
265   - line-height: 1.8rem;
266   - border-bottom: solid 0.1rem #e6e6e6;
267   -}
  261 +/* -----------------------------------------------------------------
  262 + HEADER SKIN: dark
  263 + .skin-dark will override default values
  264 +----------------------------------------------------------------- */
268 265  
269   -/* ----------------------------------
270   - * HEADERS: dark
271   - * ---------------------------------- */
272 266 section[role="region"].skin-dark > header:first-child,
273 267 .skin-dark > section[role="region"] > header:first-child {
274   - background-color: #242D33;
  268 + background-color: #242d33;
275 269 }
276 270  
277   -
278   -/* Navigation links (back, cancel, etc) */
279   -/* the `organic' blue arrows work fine with the dark theme, let's reuse them */
280   -section[role="region"].skin-dark > header:first-child .icon.icon-back {
281   - background-image: url(/images/shared/headers/images/icons/organic/back.png);
  271 +.skin-dark section[role="region"] > header:first-child a,
  272 +.skin-dark section[role="region"] > header:first-child button,
  273 +section[role="region"].skin-dark > header:first-child a,
  274 +section[role="region"].skin-dark > header:first-child button {
  275 + color: #00aac5;
282 276 }
283 277  
284   -section[role="region"].skin-dark > header:first-child .icon.icon-close {
285   - background-image: url(/images/shared/headers/images/icons/organic/close.png);
  278 +.skin-dark section[role="region"] > header:first-child a:active,
  279 +.skin-dark section[role="region"] > header:first-child button:active,
  280 +.skin-dark section[role="region"] > header:first-child a:hover,
  281 +.skin-dark section[role="region"] > header:first-child button:hover,
  282 +section[role="region"].skin-dark > header:first-child a:active,
  283 +section[role="region"].skin-dark > header:first-child button:active,
  284 +section[role="region"].skin-dark > header:first-child a:hover,
  285 +section[role="region"].skin-dark > header:first-child button:hover {
  286 + background-color: rgba(0,0,0,0.4);
286 287 }
287 288  
288   -
289   -section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):active:after,
290   -section[role="region"].skin-dark > header:first-child > button:not(:disabled):active:after,
291   -section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):hover:after,
292   -section[role="region"].skin-dark > header:first-child > button:not(:disabled):hover:after,
293   -section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
294   -section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
295   -section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
296   -section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active {
297   - background-color: #1d525e !important;
  289 +.skin-dark section[role="region"] > header:first-child a:focus,
  290 +.skin-dark section[role="region"] > header:first-child button:focus,
  291 +section[role="region"].skin-dark > header:first-child a:focus,
  292 +section[role="region"].skin-dark > header:first-child button:focus {
  293 + background-color: transparent;
298 294 }
299 295  
300 296 section[role="region"].skin-dark header h2,
301 297  
302 298  
... ... @@ -304,15 +300,15 @@
304 300 border: none;
305 301 }
306 302  
  303 +/* -----------------------------------------------------------------
  304 + HEADER SKIN: organic
  305 + .skin-organic will override default values
  306 +----------------------------------------------------------------- */
307 307  
308   -
309   -/* ----------------------------------
310   - * HEADERS: organic
311   - * ---------------------------------- */
312   -
313 308 section[role="region"].skin-organic > header:first-child,
314 309 .skin-organic section[role="region"] > header:first-child {
315   - background-color: #F4F4F4;
  310 + color: #868692;
  311 + background-color: #f4f4f4;
316 312 }
317 313  
318 314 section[role="region"].skin-organic > header:first-child h1,
319 315  
320 316  
321 317  
322 318  
323 319  
324 320  
325 321  
... ... @@ -320,105 +316,52 @@
320 316 color: #868692;
321 317 }
322 318  
323   -/* clear background => specific dark icons */
  319 +section[role="region"].skin-organic > header:first-child a,
  320 +section[role="region"].skin-organic > header:first-child button,
  321 +.skin-organic section[role="region"] > header:first-child a,
  322 +.skin-organic section[role="region"] > header:first-child button {
  323 + color: #00aac5;
  324 +}
324 325  
325   -section[role="region"].skin-organic > header:first-child .icon.icon-back,
326   -.skin-organic section[role="region"] > header:first-child .icon.icon-back {
  326 +section[role="region"].skin-organic > header:first-child a:focus,
  327 +section[role="region"].skin-organic > header:first-child button:focus,
  328 +.skin-organic section[role="region"] > header:first-child a:focus,
  329 +.skin-organic section[role="region"] > header:first-child button:focus {
  330 + background-color: transparent;
  331 +}
  332 +
  333 +/* ----------------------------------
  334 + Icons
  335 +---------------------------------- */
  336 +
  337 +section[role="region"].skin-organic > header:first-child .icon-back,
  338 +.skin-organic section[role="region"] > header:first-child .icon-back {
327 339 background-image: url(/images/shared/headers/images/icons/organic/back.png);
328 340 }
329 341  
330   -section[role="region"].skin-organic > header:first-child .icon.icon-close,
331   -.skin-organic section[role="region"] > header:first-child .icon.icon-close {
  342 +section[role="region"].skin-organic > header:first-child .icon-close,
  343 +.skin-organic section[role="region"] > header:first-child .icon-close {
332 344 background-image: url(/images/shared/headers/images/icons/organic/close.png);
333 345 }
334 346  
335   -section[role="region"].skin-organic > header:first-child .icon.icon-add,
336   -.skin-organic section[role="region"] > header:first-child .icon.icon-add {
  347 +section[role="region"].skin-organic > header:first-child .icon-add,
  348 +.skin-organic section[role="region"] > header:first-child .icon-add {
337 349 background-image: url(/images/shared/headers/images/icons/organic/add.png);
338 350 }
339 351  
340   -section[role="region"].skin-organic > header:first-child .icon.icon-edit,
341   -.skin-organic section[role="region"] > header:first-child .icon.icon-edit {
  352 +section[role="region"].skin-organic > header:first-child .icon-edit,
  353 +.skin-organic section[role="region"] > header:first-child .icon-edit {
342 354 background-image: url(/images/shared/headers/images/icons/organic/edit.png);
343 355 }
344 356  
345   -section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):active:after,
346   -.skin-organic section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
347   -section[role="region"].skin-organic > header:first-child > button:not(:disabled):active:after,
348   -.skin-organic section[role="region"] > header:first-child > button:not(:disabled):active:after,
349   -section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):hover:after,
350   -.skin-organic section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
351   -section[role="region"].skin-organic > header:first-child > button:not(:disabled):hover:after,
352   -.skin-organic section[role="region"] > header:first-child > button:not(:disabled):hover:after,
353   -section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
354   -.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
355   -section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
356   -.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
357   -section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
358   -.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
359   -section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):active,
360   -.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active {
361   - background-color: #aae1e9 !important;
362   -}
  357 +/* ----------------------------------
  358 + Subheader
  359 +---------------------------------- */
363 360  
364 361 section[role="region"].skin-organic header h2,
365 362 .skin-organic section[role="region"] header h2 {
366 363 background-color: #e7e7e7;
367   - color: #4D4D4D;
  364 + color: #4d4d4d;
368 365 border: none;
369   -}
370   -
371   -section[role="region"].skin-organic > header:first-child a,
372   -.skin-organic section[role="region"] > header:first-child a,
373   -section[role="region"].skin-organic > header:first-child button,
374   -.skin-organic section[role="region"] > header:first-child button {
375   - color: #858585;
376   -}
377   -
378   -
379   -/* ----------------------------------
380   - * HEADERS: right-to-left tweaks
381   - * ---------------------------------- */
382   -
383   -html[dir="rtl"] section[role="region"] > header:first-child h1 {
384   - text-align: right;
385   - padding: 0 3rem 0 1rem;
386   -}
387   -html[dir="rtl"] section[role="region"] > header:first-child form {
388   - padding: 1rem .5rem 0 1rem ;
389   - margin-right: 3.5rem;
390   - margin-left:0;
391   -}
392   -html[dir="rtl"] section[role="region"] > header:first-child input[type="text"] {
393   - background: #fff url(/images/shared/headers/images/ui/shadow.png) repeat-x right -0.1rem;
394   -}
395   -
396   -html[dir="rtl"] section[role="region"] > header:first-child form button[type="reset"] {
397   - left: 1rem;
398   - right:inherit;
399   -}
400   -html[dir="rtl"] section[role="region"] > header:first-child menu[type="toolbar"] {
401   - float: left;
402   -}
403   -html[dir="rtl"] section[role="region"] > header:first-child menu[type="toolbar"] a,
404   -html[dir="rtl"] section[role="region"] > header:first-child menu[type="toolbar"] button {
405   - float: right;
406   -}
407   -html[dir="rtl"] section[role="region"] > header:first-child > button,
408   -html[dir="rtl"] section[role="region"] > header:first-child > a {
409   - float: right;
410   - margin: 0 0 0 -5rem;
411   -}
412   -html[dir="rtl"] section[role="region"] > header:first-child > button:after,
413   -html[dir="rtl"] section[role="region"] > header:first-child > a:after {
414   - right: 0;
415   -}
416   -html[dir="rtl"] section[role="region"] > header:first-child .icon.icon-back {
417   - background-image: url(/images/shared/headers/images/icons/back_rtl.png);
418   -}
419   -html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon.icon-back,
420   -html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon.icon-back,
421   -html[dir="rtl"] section[role="region"].skin-dark > header:first-child .icon.icon-back {
422   - background-image: url(/images/shared/headers/images/icons/organic/back_rtl.png);
423 366 }
app/styles/shared/_overrides.scss View file @ b2b76a9
  1 +section[role="region"] > header:first-child h1 {
  2 + padding: 0 1rem 0 0;
  3 +}
  4 +
1 5 section[role="region"] > header:first-child h1 a {
2   - font-size: 2.5rem;
3   - line-height: 5rem;
4   - display: block;
5   - height: 100%;
6   - text-overflow: ellipsis;
7   - font-weight: 300;
  6 + font-size: 2rem;
  7 + text-overflow: inherit;
  8 + color: inherit;
  9 + text-align: center;
  10 + width: 100%;
8 11 }
9 12  
10 13 section[role="region"] header h2 {
... ... @@ -25,5 +28,9 @@
25 28  
26 29 [role="toolbar"] button:active {
27 30 background: #008aaa no-repeat 50% 50% / 3rem auto;
  31 +}
  32 +
  33 +section[role="region"] > header:first-child a {
  34 + min-width: 3rem
28 35 }