Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/dldx/hpstr-hugo-theme.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to '_sass/_elements.scss')
-rw-r--r--_sass/_elements.scss102
1 files changed, 70 insertions, 32 deletions
diff --git a/_sass/_elements.scss b/_sass/_elements.scss
index 4847610..370a8d6 100644
--- a/_sass/_elements.scss
+++ b/_sass/_elements.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+ Base Elements and Components
+ ========================================================================== */
+
hr {
display: block;
margin: 1em 0;
@@ -8,143 +12,177 @@ hr {
border-bottom: 1px solid #fff;
}
-// Figures and images
-// --------------------------------------------------
+/*
+ Figures and images
+ ========================================================================== */
+
figure {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
@include clearfix();
+
img {
margin-bottom: 10px;
}
+
a {
+
img {
- @include translate(0, 0);
- -webkit-transition-duration: 0.25s;
- -moz-transition-duration: 0.25s;
- -o-transition-duration: 0.25s;
+ transform: translate(0, 0);
+ transition-duration: 0.25s;
+
&:hover {
- @include translate(0, -5px);
- @include box-shadow(0 0 10px fade($base-color, 20));
+ 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
-// --------------------------------------------------
+/*
+ Buttons
+ ========================================================================== */
+
.btn {
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
@include font-rem(14);
background-color: $primary;
- color: $white;
+ color: #fff;
border-width: 2px !important;
border-style: solid !important;
border-color: $primary;
- @include rounded(3px);
+ border-radius: 3px;
+
&:visited {
- color: $white;
+ color: #fff;
}
+
&:hover {
- background-color: $white;
+ background-color: #fff;
color: $primary;
}
}
+
.btn-inverse {
- background-color: $white;
+ background-color: #fff;
color: $primary;
- border-color: $white;
+ border-color: #fff;
+
&:visited {
color: $primary;
}
+
&:hover {
background-color: $primary;
- color: $white;
+ color: #fff;
}
}
+
.btn-success {
background-color: $success;
- color: $white;
+ color: #fff;
border-color: $success;
+
&:visited {
- color: $white;
+ color: #fff;
}
+
&:hover {
- background-color: $white;
+ background-color: #fff;
color: $success;
}
}
+
.btn-warning {
background-color: $warning;
- color: $white;
+ color: #fff;
border-color: $warning;
+
&:visited {
- color: $white;
+ color: #fff;
}
+
&:hover {
- background-color: $white;
+ background-color: #fff;
color: $warning;
}
}
+
.btn-danger {
background-color: $danger;
- color: $white;
+ color: #fff;
border-color: $danger;
+
&:visited {
- color: $white;
+ color: #fff;
}
+
&:hover {
- background-color: $white;
+ background-color: #fff;
color: $danger;
}
}
+
.btn-info {
background-color: $info;
- color: $white;
+ color: #fff;
border-color: $info;
+
&:visited {
- color: $white;
+ color: #fff;
}
+
&:hover {
- background-color: $white;
+ background-color: #fff;
color: $info;
}
}
-// Well
-// --------------------------------------------------
+/*
+ Wells
+ ========================================================================== */
+
.well {
padding: 20px;
border: 1px solid $comp-color;
- @include rounded(4px);
+ border-radius: 4px;
} \ No newline at end of file