patternlibrary/global.css at main · nsgov/patternlibrary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
.pattern-container {margin: 30px; text-align: left;}

#patternlab-header {background: #3fbced url(img/patternlab-bg-header.svg) top left no-repeat; background-size: 2713px 339px; min-height: 100px; width: 100%; margin: 0; padding: 0;}
#patternlab-header .main-link {float: right; color: #000; margin: 2em; font-size: 1.25em}
#patternlab-header .main-link a {color: #000; text-decoration: none; border: 1px solid #2750a0; background: #3fbced; padding: .5em; border-radius: 6px;}
#patternlab-header .main-link a:hover {color: #fff; background: #2750a0;}

.pattern {
    clear: both;
    overflow: visible;
    display: block;
    padding-top: 1em;

}
.pattern .display {
    width: 65%;
    float: left;
}
.pattern .source {
    width: 30%;
    float: right;
}
.pattern .source textarea {
    width: 90%;
}

.ui-categories li {}

.bootsample div {border: 1px solid #ccc; background: #f5f5f5;}

h1.pl-title {font-family: 'PT Serif', Georgia, serif; font-weight: normal; margin-bottom: 1.5em;}

h2.section {background: #333; color: #fff; padding: 20px; clear: both; display: block; margin: 2em auto; text-transform: uppercase;}

/* @group Typography */

html {
	background-color: #fff;
}


footer.footer {background: #0058a4 url(img/bg-footer.svg)}

button.search-box-button {background-image: url(img/sprite-icons.svg);}

.pattern-separator {clear:both; margin: 1.5em auto; border-bottom: 15px solid #ccc;}

.content-chunk {background: #d4e7f0; border-radius: 6px; padding: 1.5em; margin-bottom: 1.5em; color: #333; z-index: 2; position: relative;}

.developer-cta {border: 1px solid #fff; border-radius: 6px; padding: 1.5em; margin-bottom: 1.5em;  z-index: 2; position: relative; background: #b9d9eb /*url(img/bg.svg) top center no-repeat; background-size: cover;*/}
.developer-cta h2 a {}

.cta-grid {
    display: grid;
    width: 100%;
    column-gap: 20px;
    grid-template-columns: 1fr 1fr;
  }

.cta-grid article {}


.listing-grid {
    display: grid;
    width: 100%;
    column-gap: 10px;
    grid-template-columns: 2em 1fr;
  }

.listing-icon .fa {font-size: 2em;}


.listing {
    margin-bottom: .5em;
}


.success {color: #408334;}
.danger {color: #e2231a;}
.warning {color: #fac351;}

/* .ribbon {background: #003262;} */
.cb-heading {background-color: #fff;}
.cb-heading, .cb-heading h1 {color: #000;}
/* .cb-heading a {color: #b9d9eb;} */
.cb-heading .summary {border: none; padding: 0; background: transparent;}


.swatch-box {border: 1px solid #000; color: #000; margin-bottom: 1.5em;}
.swatch-box .swatch {height: 80px; width: 100%; padding: 1em;}
.swatch-box .values {padding: 1em;}

/* Background used on grid patterns demo */
.gray-bg {background: #efefef;}

.code {font-family: Menlo, Monaco, Consolas, "Courier New", monospace; background: #efefef; padding: 2px; font-size: 0.95em;}