hacks-guide-minimal-mistake.../_sass/elements.scss

167 lines
2.6 KiB
SCSS
Raw Normal View History

2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Rules
========================================================================== */
2015-04-17 12:43:36 +02:00
hr {
display: block;
margin: 1em 0;
padding: 0;
2015-04-17 12:43:36 +02:00
height: 1px;
border: 0;
border-top: 1px solid #ccc;
2015-04-17 12:43:36 +02:00
border-bottom: 1px solid #fff;
2013-05-24 16:25:31 +02:00
}
2015-01-20 21:25:57 +01:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Figures and images
========================================================================== */
figure {
2014-07-31 19:09:32 +02:00
margin-bottom: $indent-var;
}
2015-01-20 21:25:57 +01:00
2013-05-24 16:25:31 +02:00
article img {
max-width: 100%;
height: auto;
2015-04-17 12:43:36 +02:00
border-width: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
2013-05-24 16:25:31 +02:00
}
2015-01-20 21:25:57 +01:00
2013-05-24 16:25:31 +02:00
svg:not(:root) {
2015-04-17 12:43:36 +02:00
overflow: hidden;
2013-05-24 16:25:31 +02:00
}
2015-01-20 21:25:57 +01:00
/* 2 images of equal dimensions in a row */
2013-05-24 16:25:31 +02:00
.half {
2014-07-31 19:09:32 +02:00
@include container;
@include clearfix;
@media #{$micro} {
img {
2014-07-31 19:09:32 +02:00
@include grid(12,6);
}
figcaption {
2014-07-31 19:09:32 +02:00
@include grid(12,12);
}
}
2013-05-24 16:25:31 +02:00
}
2015-01-20 21:25:57 +01:00
/* 3 images of equal dimensions in a row */
2013-05-24 16:25:31 +02:00
.third {
2014-07-31 19:09:32 +02:00
@include container;
@include clearfix;
@media #{$micro} {
img {
2014-07-31 19:09:32 +02:00
@include grid(12,4);
}
figcaption {
2014-07-31 19:09:32 +02:00
@include grid(12,12);
}
}
2013-05-24 16:25:31 +02:00
}
2015-01-20 21:25:57 +01:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Buttons
========================================================================== */
/* Default button */
2013-05-24 16:25:31 +02:00
.btn {
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
2014-07-31 19:09:32 +02:00
@include font-rem(14);
font-family: $heading-font;
font-weight: 700;
2014-07-31 19:09:32 +02:00
background-color: $primary;
color: $white;
border-width: 2px !important;
border-style: solid !important;
2014-07-31 19:09:32 +02:00
border-color: $primary;
text-decoration: none !important;
2014-07-31 19:09:32 +02:00
@include rounded(3px);
&:visited {
2014-07-31 19:09:32 +02:00
color: $white;
}
&:hover {
2014-07-31 19:09:32 +02:00
background-color: $white;
color: $primary;
}
}
2015-01-20 21:25:57 +01:00
/* Success button */
.btn-success {
2014-07-31 19:09:32 +02:00
background-color: $success;
color: $white;
border-color: $success;
&:visited {
2014-07-31 19:09:32 +02:00
color: $white;
}
&:hover {
2014-07-31 19:09:32 +02:00
background-color: $white;
color: $success;
}
}
2015-01-20 21:25:57 +01:00
/* Warning button */
.btn-warning {
2014-07-31 19:09:32 +02:00
background-color: $warning;
color: $white;
border-color: $warning;
&:visited {
2014-07-31 19:09:32 +02:00
color: $white;
}
&:hover {
2014-07-31 19:09:32 +02:00
background-color: $white;
color: $warning;
}
}
2015-01-20 21:25:57 +01:00
/* Danger button */
.btn-danger {
2014-07-31 19:09:32 +02:00
background-color: $danger;
color: $white;
border-color: $danger;
&:visited {
2014-07-31 19:09:32 +02:00
color: $white;
}
&:hover {
2014-07-31 19:09:32 +02:00
background-color: $white;
color: $danger;
}
}
2015-01-20 21:25:57 +01:00
/* Information button */
.btn-info {
2014-07-31 19:09:32 +02:00
background-color: $info;
color: $white;
border-color: $info;
&:visited {
2014-07-31 19:09:32 +02:00
color: $white;
}
&:hover {
2014-07-31 19:09:32 +02:00
background-color: $white;
color: $info;
}
2013-05-24 16:25:31 +02:00
}
2015-01-20 21:25:57 +01:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Wells
========================================================================== */
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
2014-07-31 19:09:32 +02:00
@include rounded(4px);
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
2015-04-17 12:43:36 +02:00
}