UNPKG

1.68 kBCSSView Raw
1.prism-page-header {
2 display: flex;
3 flex-flow: row wrap;
4 background: #fafafa;
5 align-items: center;
6 flex-shrink: 0;
7 padding-left: 16px;
8 padding-right: 16px;
9}
10@media (min-width:960px) {
11 .prism-page-header {
12 padding-left: 32px;
13 padding-right: 32px;
14 }
15}
16 .prism-page-header__title {
17 flex-grow: 1;
18 font-size: 3rem;
19 font-family: "NotoSans", "Roboto", "Arial", sans-serif;
20 font-weight: 300;
21 line-height: 1.2;
22 letter-spacing: -0.01562em;
23 }
24@media (min-width:600px) {
25 .prism-page-header__title {
26 flex-grow: 0;
27 }
28}
29 .prism-page-header__content {
30 order: 2;
31 width: 100%;
32 padding: 8px 0px;
33 flex-grow: 1;
34 }
35@media (min-width:600px) {
36 .prism-page-header__content {
37 order: 1;
38 width: auto;
39 padding: 8px 16px;
40 }
41}
42@media (min-width:960px) {
43 .prism-page-header__content {
44 padding: 8px 32px;
45 }
46}
47 .prism-page-header__toolbar {
48 order: 1;
49 display: flex;
50 flex-grow: 0;
51 flex-direction: column;
52 }
53@media (min-width:600px) {
54 .prism-page-header__toolbar {
55 order: 2;
56 }
57}
58@media (min-width:960px) {
59 .prism-page-header__toolbar {
60 flex-direction: row;
61 }
62}
63 .prism-page-header__action {
64 color: #61b3cf;
65 width: auto;
66 border: 0;
67 cursor: pointer;
68 margin: 4px;
69 display: inline-block;
70 padding: 0;
71 overflow: visible;
72 font-size: 100%;
73 background: none;
74 text-align: left;
75 font-family: "NotoSans", "Roboto", "Arial", sans-serif;
76 font-weight: 300;
77 line-height: 1;
78 text-transform: uppercase;
79 text-decoration: underline;
80 }
81@media (min-width:600px) {
82 .prism-page-header__action:last-child {
83 margin-right: 0;
84 }
85}
\No newline at end of file