Добавил компонент Card

Author: Асхаб Кудзаев (rx1310)

image.jpg

@@ -25,6 +25,14 @@ <h2>Hello world</h2>
         <div class="col-md-4">
           <h2>Hello world</h2>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem magnam doloremque illum cupiditate, nostrum veniam fuga suscipit adipisci vitae sunt nam nemo voluptatem provident totam, minus aliquam placeat neque ad.</p>
+          <div class="crx-card">
+            <a href="https://google.com" class="crx-card-link"></a>
+            <img class="crx-card-image" src="image.jpg" alt="">
+            <div class="crx-card-wrapper">
+              <h2>Card title</h2>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+            </div>
+          </div>
         </div>
         <div class="col-md-4">
           <h2>Hello world</h2>

index.html

@@ -17,4 +17,12 @@
      -moz-transition: $transition;
        -o-transition: $transition;
           transition: $transition;
+}
+
+@mixin crxTransform($transform) {
+  -webkit-transform: $transform; /* Safari, Chrome, iOS */
+     -moz-transform: $transform; /* Firefox */
+      -ms-transform: $transform; /* IE */
+       -o-transform: $transform; /* Opera */
+          transform: $transform;
 }

scss/_mixins.scss

@@ -20,4 +20,6 @@
 
 // ? UI
 @import 'ui/alert';
-@import 'ui/button';
+@import 'ui/button';
+@import 'ui/card';
+@import 'ui/typography';

scss/corex.scss

@@ -0,0 +1,70 @@
+// ! rx1310 <[email protected]> | Copyright (c) o1310, 2020 | MIT License
+
+.crx-card {
+
+  $transition: box-shadow .30s;
+
+  position: relative;
+  overflow: hidden;
+
+  @include crxBorderRadius();
+  @include crxTransition($transition);
+  @include crxBoxShadow(0 .15em 1em -0.2em rgba(0 0 0 / .4));
+
+  &::before {
+    content: '';
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+  }
+
+  &-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+
+  &-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: relative;
+    z-index: -1;
+    @include crxTransition(transform 1s ease);
+  }
+
+  &-wrapper {
+    color: #ffffff;
+    position: absolute;
+    bottom: 0;
+    padding: 1.2em;
+  }
+
+  &:hover &-image {
+    z-index: -1;
+    @include crxTransform(scale(1.1));
+  }
+
+  &:hover {
+    @include crxBoxShadow(0 .15em 1em -0.2em rgba(0 0 0 / .6));
+  }
+
+  & h2 {
+    margin-bottom: 0;
+    margin: 0 !important;
+  }
+
+  & p {
+    color: #cccccc;
+    font-size: .8rem;
+    margin-bottom: .5em;
+  }
+
+}