diff options
Diffstat (limited to 'css/pure-extras.css')
| -rw-r--r-- | css/pure-extras.css | 262 |
1 files changed, 262 insertions, 0 deletions
diff --git a/css/pure-extras.css b/css/pure-extras.css new file mode 100644 index 0000000..d72fc94 --- /dev/null +++ b/css/pure-extras.css @@ -0,0 +1,262 @@ +/* Images */ +.pure-img-eliptical { + border-radius: 80%; +} +.pure-img-rounded { + border-radius: 3px; +} +.pure-img-bordered { + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 5px; +} + + +/* Thumbnails */ +.pure-thumbnails li { + text-align: center; + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + *zoom: 1; + vertical-align: top; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0.5em; +} +.pure-thumbnails { + list-style: none; + margin: 0; + padding: 0; +} + +.pure-thumbnails a:focus { + outline: 0 none; +} + +.pure-thumb { + display: block; + text-decoration: none; + color: inherit; +} +.pure-thumb img { + max-width: 100%; + margin-right: auto; + margin-left: auto; + vertical-align: middle; /* this will remove a thin line below the image */ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.pure-thumb-bordered { + border: 1px solid rgba(0, 0, 0, 0.2); +} +.pure-thumb .caption { + text-align: left; + display: block; + margin: 0 5px 6px; + +} +.pure-thumb .caption p { + margin: 0.3em 0 0; + font-size: 75%; +} +.pure-thumb .caption .caption-head { + font-weight: bold; + margin-top: 0.3em; +} + +.pure-thumb-eliptical img { + border-radius: 50%; +} +.pure-thumb-rounded img { + border-radius: 3px; +} + +/* Badges/Pills */ +.pure-badge, +.pure-badge-error, +.pure-badge-warning, +.pure-badge-success, +.pure-badge-info, +.pure-badge-inverse { + padding: 0.35em 0.9em 0.35em; + background-color: #9D988E; + color: #fff; + display: inline-block; + font-size: 11.844px; + font-weight: bold; + line-height: 1.2em; + vertical-align: baseline; + white-space: nowrap; + border-radius: 20px; + margin: 0.2em; +} +.pure-badge-error { + background-color: #D13C38; +} +.pure-badge-warning { + background-color: #E78C05; +} +.pure-badge-success { + background-color: rgb(83, 180, 79); +} +.pure-badge-info { + background-color: rgb(18, 169, 218); +} +.pure-badge-inverse { + background-color: #4D370C; +} + +/* Alerts */ +.pure-alert { + position: relative; + margin-bottom: 1em; + padding: 1em; + background: #ccc; + border-radius: 3px; +} + +.pure-alert label { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + *zoom: 1; + white-space: nowrap; +} + +.pure-alert { + background-color: rgb(209, 235, 238); + color: rgb(102, 131, 145); +} +.pure-alert-error { + background-color: #D13C38; + color: #fff; +} + +.pure-alert-warning { + background-color: rgb(250, 191, 103); + color: rgb(151, 96, 13); +} + +.pure-alert-success { + background-color: rgb(83, 180, 79); + color: #fff; +} + + +/* Contextual Modals */ + +.pure-popover { + position: relative; + width: 300px; + background-color: #f0f1f3; + color: #2f3034; + padding: 15px; + border: 1px solid #bfc0c8; + border-radius: 2px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + box-padding: border-box; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.pure-arrow-border, .pure-arrow { + border-style: solid; + border-width: 10px; + height:0; + width:0; + position:absolute; +} + + +/* POPOVER ARROW POSITIONING BOTTOM */ + +.pure-popover.bottom .pure-arrow-border { + border-color: #bfc0c8 transparent transparent transparent; + bottom: -20px; + left: 50%; +} +.pure-popover.bottom .pure-arrow { + border-color: #f0f1f3 transparent transparent transparent; + bottom:-19px; + left: 50%; +} + +/* POPOVER ARROW POSITIONING TOP*/ + +.pure-popover.top .pure-arrow-border { + border-color: transparent transparent #bfc0c8 transparent; + top: -21px; + left: 50%; +} +.pure-popover.top .pure-arrow { + border-color: transparent transparent #f0f1f3 transparent; + top:-20px; + left: 50%; +} + +/* POPOVER ARROW POSITIONING RIGHT*/ + +.pure-popover.right .pure-arrow-border { + border-color: transparent transparent transparent #bfc0c8; + top: 45%; + right: -21px; +} +.pure-popover.right .pure-arrow { + border-color: transparent transparent transparent #f0f1f3; + top:45%; + right: -20px; +} + + +/* POPOVER ARROW POSITIONING LEFT*/ + +.pure-popover.left .pure-arrow-border { + border-color: transparent #bfc0c8 transparent transparent; + top: 45%; + left: -21px; +} +.pure-popover.left .pure-arrow { + border-color: transparent #f0f1f3 transparent transparent; + top:45%; + left: -20px; +} + + +/* BUTTON IMPROVEMENTS */ +.pure-button-block { + display: block; +} +.pure-button-small { + padding: .6em 2em .65em; + font-size:70%; +} +.pure-button-large { + padding: .8em 5em .9em; + font-size:110%; +} +.pure-button-selected { + background-color: #345fcb; + color: #fff; +} +.pure-button-secondary { + background: rgb(161, 195, 238); + color: rgb(26, 88, 122); +} +.pure-button-error { + background: rgb(214, 86, 75); + color: white; +} +.pure-button-success { + background: rgb(54, 197, 71); + color: white; +} +.pure-button-warning { + background: rgb(255, 163, 0); + color: white; +} + |