diff options
Diffstat (limited to 'static/css/_sass/_elements.scss')
-rw-r--r-- | static/css/_sass/_elements.scss | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/static/css/_sass/_elements.scss b/static/css/_sass/_elements.scss new file mode 100644 index 0000000..370a8d6 --- /dev/null +++ b/static/css/_sass/_elements.scss @@ -0,0 +1,188 @@ +/* ========================================================================== + Base Elements and Components + ========================================================================== */ + +hr { + display: block; + margin: 1em 0; + padding: 0; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + border-bottom: 1px solid #fff; +} + +/* + Figures and images + ========================================================================== */ + +figure { + margin: 0; + padding-top: 10px; + padding-bottom: 10px; + @include clearfix(); + + img { + margin-bottom: 10px; + } + + a { + + img { + transform: translate(0, 0); + transition-duration: 0.25s; + + &:hover { + transform: translate(0, -5px); + box-shadow: 0 0 10px rgba($base-color, 0.2); + } + } + } + + /* 2 columns */ + &.half { + @media #{$large} { + + img { + width: 310px; + float: left; + margin-right: 10px; + } + + figcaption { + clear: left; + } + } + } + + /* 3 columns */ + &.third { + @media #{$large} { + + img { + width: 200px; + float: left; + margin-right: 10px; + } + + figcaption { + clear: left; + } + } + } +} + +svg:not(:root) { + overflow: hidden; +} + +/* + Buttons + ========================================================================== */ + +.btn { + display: inline-block; + margin-bottom: 20px; + padding: 8px 20px; + @include font-rem(14); + background-color: $primary; + color: #fff; + border-width: 2px !important; + border-style: solid !important; + border-color: $primary; + border-radius: 3px; + + &:visited { + color: #fff; + } + + &:hover { + background-color: #fff; + color: $primary; + } +} + +.btn-inverse { + background-color: #fff; + color: $primary; + border-color: #fff; + + &:visited { + color: $primary; + } + + &:hover { + background-color: $primary; + color: #fff; + } +} + +.btn-success { + background-color: $success; + color: #fff; + border-color: $success; + + &:visited { + color: #fff; + } + + &:hover { + background-color: #fff; + color: $success; + } +} + +.btn-warning { + background-color: $warning; + color: #fff; + border-color: $warning; + + &:visited { + color: #fff; + } + + &:hover { + background-color: #fff; + color: $warning; + } +} + +.btn-danger { + background-color: $danger; + color: #fff; + border-color: $danger; + + &:visited { + color: #fff; + } + + &:hover { + background-color: #fff; + color: $danger; + } +} + +.btn-info { + background-color: $info; + color: #fff; + border-color: $info; + + &:visited { + color: #fff; + } + + &:hover { + background-color: #fff; + color: $info; + } +} + +/* + Wells + ========================================================================== */ + +.well { + padding: 20px; + border: 1px solid $comp-color; + border-radius: 4px; +}
\ No newline at end of file |