tpl/default/css/pure-extras.css

   1 /* Images */
   2 .pure-img-eliptical {
   3         border-radius: 80%;
   4 }
   5 .pure-img-rounded {
   6         border-radius: 3px;
   7 }
   8 .pure-img-bordered {
   9     background-color: #FFFFFF;
  10     border: 1px solid rgba(0, 0, 0, 0.2);
  11     padding: 5px;
  12 }
  13
  14
  15 /* Thumbnails */
  16 .pure-thumbnails li {
  17     text-align: center;
  18     display: inline-block;
  19     *display: inline;
  20     /* IE7 inline-block hack */
  21     *zoom: 1;
  22     vertical-align: top;
  23     -webkit-box-sizing: border-box;
  24     -moz-box-sizing: border-box;
  25     box-sizing: border-box;
  26     padding: 0.5em;
  27 }
  28 .pure-thumbnails {
  29     list-style: none;
  30     margin: 0;
  31     padding: 0;
  32 }
  33
  34 .pure-thumbnails a:focus {
  35     outline: 0 none;
  36 }
  37
  38 .pure-thumb {
  39     display: block;
  40     text-decoration: none;
  41     color: inherit;
  42 }
  43 .pure-thumb img {
  44     max-width: 100%;
  45     margin-right: auto;
  46     margin-left: auto;
  47     vertical-align: middle; /* this will remove a thin line below the image */
  48     -webkit-box-sizing: border-box;
  49     -moz-box-sizing: border-box;
  50     box-sizing: border-box;
  51 }
  52
  53 .pure-thumb-bordered {
  54     border: 1px solid rgba(0, 0, 0, 0.2);
  55 }
  56 .pure-thumb .caption {
  57     text-align: left;
  58     display: block;
  59     margin: 0 5px 6px;
  60
  61 }
  62 .pure-thumb .caption p {
  63     margin: 0.3em 0 0;
  64     font-size: 75%;
  65 }
  66 .pure-thumb .caption .caption-head {
  67     font-weight: bold;
  68     margin-top: 0.3em;
  69 }
  70
  71 .pure-thumb-eliptical img {
  72         border-radius: 50%;
  73 }
  74 .pure-thumb-rounded img {
  75         border-radius: 3px;
  76 }
  77
  78 /* Badges/Pills */
  79 .pure-badge,
  80 .pure-badge-error,
  81 .pure-badge-warning,
  82 .pure-badge-success,
  83 .pure-badge-info,
  84 .pure-badge-inverse {
  85     padding: 0.35em 0.9em 0.35em;
  86     background-color: #9D988E;
  87     color: #fff;
  88     display: inline-block;
  89     font-size: 11.844px;
  90     font-weight: bold;
  91     line-height: 1.2em;
  92     vertical-align: baseline;
  93     white-space: nowrap;
  94     border-radius: 20px;
  95     margin: 0.2em;
  96 }
  97 .pure-badge-error {
  98     background-color: #D13C38;
  99 }
 100 .pure-badge-warning {
 101     background-color: #E78C05;
 102 }
 103 .pure-badge-success {
 104     background-color: rgb(83, 180, 79);
 105 }
 106 .pure-badge-info {
 107     background-color: rgb(18, 169, 218);
 108 }
 109 .pure-badge-inverse {
 110     background-color: #4D370C;
 111 }
 112
 113 /* Alerts */
 114 .pure-alert {
 115     position: relative;
 116     margin-bottom: 1em;
 117     padding: 1em;
 118     background: #ccc;
 119     border-radius: 3px;
 120 }
 121
 122 .pure-alert label {
 123     display: inline-block;
 124     *display: inline;
 125     /* IE7 inline-block hack */
 126     *zoom: 1;
 127     white-space: nowrap;
 128 }
 129
 130 .pure-alert {
 131     background-color: rgb(209, 235, 238);
 132     color: rgb(102, 131, 145);
 133 }
 134 .pure-alert-error {
 135     background-color: #D13C38;
 136     color: #fff;
 137 }
 138
 139 .pure-alert-warning {
 140     background-color: rgb(250, 191, 103);
 141     color: rgb(151, 96, 13);
 142 }
 143
 144 .pure-alert-success {
 145     background-color: rgb(83, 180, 79);
 146     color: #fff;
 147 }
 148
 149
 150 /* Contextual Modals */
 151
 152 .pure-popover {
 153     position: relative;
 154     width: 300px;
 155     background-color: #f0f1f3;
 156     color: #2f3034;
 157     padding: 15px;
 158     border: 1px solid #bfc0c8;
 159     border-radius: 2px;
 160     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 161     box-padding: border-box;
 162     -webkit-background-clip: padding-box;
 163     -moz-background-clip: padding;
 164     background-clip: padding-box;
 165 }
 166
 167 .pure-arrow-border, .pure-arrow {
 168     border-style: solid;
 169     border-width: 10px;
 170     height:0;
 171     width:0;
 172     position:absolute;
 173 }
 174
 175
 176 /* POPOVER ARROW POSITIONING BOTTOM */
 177
 178 .pure-popover.bottom .pure-arrow-border {
 179     border-color: #bfc0c8 transparent transparent transparent;
 180     bottom: -20px;
 181     left: 50%;
 182 }
 183 .pure-popover.bottom .pure-arrow {
 184     border-color: #f0f1f3 transparent transparent transparent;
 185     bottom:-19px;
 186     left: 50%;
 187 }
 188
 189 /* POPOVER ARROW POSITIONING TOP*/
 190
 191 .pure-popover.top .pure-arrow-border {
 192     border-color: transparent transparent #bfc0c8 transparent;
 193     top: -21px;
 194     left: 50%;
 195 }
 196 .pure-popover.top .pure-arrow {
 197     border-color: transparent transparent #f0f1f3 transparent;
 198     top:-20px;
 199     left: 50%;
 200 }
 201
 202 /* POPOVER ARROW POSITIONING RIGHT*/
 203
 204 .pure-popover.right .pure-arrow-border {
 205     border-color: transparent transparent transparent #bfc0c8;
 206     top: 45%;
 207     right: -21px;
 208 }
 209 .pure-popover.right .pure-arrow {
 210     border-color: transparent transparent transparent #f0f1f3;
 211     top:45%;
 212     right: -20px;
 213 }
 214
 215
 216 /* POPOVER ARROW POSITIONING LEFT*/
 217
 218 .pure-popover.left .pure-arrow-border {
 219     border-color: transparent #bfc0c8 transparent transparent;
 220     top: 45%;
 221     left: -21px;
 222 }
 223 .pure-popover.left .pure-arrow {
 224     border-color: transparent #f0f1f3 transparent transparent;
 225     top:45%;
 226     left: -20px;
 227 }
 228
 229
 230 /* BUTTON IMPROVEMENTS */
 231 .pure-button-block {
 232     display: block;
 233 }
 234 .pure-button-small {
 235     padding: .6em 2em .65em;
 236     font-size:70%;
 237 }
 238 .pure-button-large {
 239     padding: .8em 5em .9em;
 240     font-size:110%;
 241 }
 242 .pure-button-selected {
 243     background-color: #345fcb;
 244     color: #fff;
 245 }
 246 .pure-button-secondary {
 247     background: rgb(161, 195, 238);
 248     color: rgb(26, 88, 122);
 249 }
 250 .pure-button-error {
 251     background: rgb(214, 86, 75);
 252     color: white;
 253 }
 254 .pure-button-success {
 255     background: rgb(54, 197, 71);
 256     color: white;
 257 }
 258 .pure-button-warning {
 259     background: rgb(255, 163, 0);
 260     color: white;
 261 }
 262