diff options
Diffstat (limited to 'assets/css/scss/elements/_feature-box.scss')
| -rw-r--r-- | assets/css/scss/elements/_feature-box.scss | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/assets/css/scss/elements/_feature-box.scss b/assets/css/scss/elements/_feature-box.scss new file mode 100644 index 0000000..99377b6 --- /dev/null +++ b/assets/css/scss/elements/_feature-box.scss @@ -0,0 +1,177 @@ +// +// Feature box // +// +.feature-box { + @include display-flex; + flex-wrap: wrap; + align-items: center; + position: relative; + min-height: 50px; + padding-left: 74px; + @include breakpoint-less(md) { + padding-left: 66px; + } + .feature-box-icon { + position: absolute; + top: 0; + left: 0; + background: $button-grey; + width: 50px; + height: 50px; + border-radius: 50%; + text-align: center; + @include transition(ease-out 0.16s); + * { + margin: 0; + line-height: 50px; + vertical-align: middle; + color: $color-black-09; + @include transition(ease-out 0.16s); + } + a { + display: block; + } + // + // Positions // + // + &.middle { + top: 50%; + @include transform(translateY(-50%)); + } + } + h1,h2,h3,h4,h5,h6 { + width: 100%; + } + &:hover { + .feature-box-icon { + background: $button-grey-darker; + } + } + // + // Sizes // + // + &.feature-box-xl { + min-height: 70px; + padding-left: 94px; + @include breakpoint-less(md) { + padding-left: 86px; + } + .feature-box-icon { + width: 70px; + height: 70px; + * { + line-height: 70px; + } + } + } + &.feature-box-lg { + min-height: 60px; + padding-left: 84px; + @include breakpoint-less(md) { + padding-left: 80px; + } + .feature-box-icon { + width: 60px; + height: 60px; + * { + line-height: 60px; + } + } + } + &.feature-box-sm { + min-height: 40px; + padding-left: 64px; + @include breakpoint-less(md) { + padding-left: 56px; + } + .feature-box-icon { + width: 40px; + height: 40px; + * { + line-height: 40px; + } + } + } + &.feature-box-xs { + min-height: 32px; + padding-left: 54px; + @include breakpoint-less(md) { + padding-left: 48px; + } + .feature-box-icon { + width: 32px; + height: 32px; + * { + line-height: 32px; + } + } + } + // + // Colors // + // + &.dark { + .feature-box-icon { + background: $button-dark-lighter; + * { + color: $color-white-09; + } + } + &:hover { + .feature-box-icon { + background: $button-dark; + } + } + } + &.white { + .feature-box-icon { + background: $color-white; + } + &:hover { + .feature-box-icon { + background: $color-white-09; + } + } + } + &.outline-gray, &.outline-grey { + .feature-box-icon { + background: transparent; + border: 1px solid $button-grey; + } + &:hover { + .feature-box-icon { + background: $button-grey; + } + } + } + &.outline-dark { + .feature-box-icon { + background: transparent; + border: 1px solid $color-black-08; + } + &:hover { + .feature-box-icon { + background: $color-dark; + * { + color: $color-white; + } + } + } + } + &.outline-white { + .feature-box-icon { + background: transparent; + border: 1px solid $color-white-09; + * { + color: $color-white-09; + } + } + &:hover { + .feature-box-icon { + background: $color-white; + * { + color: $color-dark; + } + } + } + } +}
\ No newline at end of file |