Styled minimal button so that its children are automatically transitioning and change color on hover.

Tomasz-Kluczkowski · Tomasz-Kluczkowski · commit fe7c45b719fc · 2018-03-25T19:01:26.000+01:00
Removed unused css from style.scss.
Changed the way button is coded in upcoming.
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
@@ -20,10 +20,11 @@
   color: $black;
   border: $black 1px solid;
   min-width: 6em;
-  transition: all 0.5s ease-in-out;
-  &:hover {
+  &:hover > * {
     color: $orange;
-    background: transparent;
-    border: $black 1px solid;
   }
-}
+}
+
+.button-minimal > *{
+    transition: all 0.5s ease-in-out;
+  }
diff --git a/_sass/style.scss b/_sass/style.scss
@@ -320,11 +320,9 @@ a {
 }
 
 .upcoming__col {
-  //background: rgba(0, 0, 0, 0.7);
   background: rgba(250, 235, 215, 0.85);
   border-radius: 5px;
   border: #000000 1px solid;
-  //box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;
   min-height: 100%;
   margin-top: 1em;
 }
@@ -346,10 +344,6 @@ a {
   padding-top: 0.25em;
   padding-bottom: 0.25em;
 }
-//
-//.upcoming__event-label {
-//  @extend .event-label;
-//}
 
 .upcoming__event-title {
   @extend .title;
@@ -413,14 +407,16 @@ a {
   margin-bottom: 0.5em;
 }
 
-.upcoming__link {
+.upcoming__button {
+  @extend .button-minimal;
+  min-width: 50%;
+  padding: 0;
 }
 
 .upcoming__button-icon {
 }
 
 .chapters {
-
 }
 
 .chapters__title {
@@ -436,7 +432,6 @@ a {
   width: 100%;
   border-radius: 5px;
   border: black 1px solid;
-  //box-shadow: rgba(0, 0, 0, 0.76) 2px 2px 2px 0;
 }
 
 .chapters__card-container {
@@ -454,15 +449,12 @@ a {
 }
 
 .chapters__card-main {
-  //background: rgba(0, 0, 0, 0.7);
   background: rgba(250, 235, 215, 0.85);
-  //box-shadow: rgba(0, 0, 0, 0.76) 2px 2px 2px 0;
   border: black 1px solid;
 }
 
 .chapters__card-header {
   border-bottom: rgba(129, 129, 129, 0.41) 1px solid;
-  //background-color: $dark-blue;
   background: rgba(187, 187, 187, 0.61);
   padding: 0;
 }
@@ -495,18 +487,10 @@ a {
   min-width: 50%;
   padding: 0;
   margin-bottom: 0.25em;
-  &:hover > .chapters__card-icon {
-    color: $orange;
-  }
 }
 
 .chapters__card-icon {
-  text-align: center;
-  color: $black;
   font-size: 1em;
-  transition: all 0.5s ease-in;
-  min-width: 100%;
-  min-height: 100%;
 }
 
 .events {
diff --git a/index.html b/index.html
@@ -90,10 +90,8 @@ <h2 class="upcoming__event-subtitle"> {{ post.subtitle }}</h2>
                                                 </div>
                                             </div>
                                             <div class="upcoming__link-col col-6">
-                                                <a class="upcoming__link" href="{{ post.url }}">
-                                                    <button class="button-minimal btn">
-                                                        <i class="upcoming__button-icon fas fa-info-circle"></i>
-                                                    </button>
+                                                <a class="upcoming__button btn" href="{{ post.url }}">
+                                                    <i class="upcoming__button-icon fas fa-info-circle"></i>
                                                 </a>
                                             </div>
                                         </div>
@@ -142,14 +140,9 @@ <h2 class="chapters__card-title">London Python Sprints</h2>
                                         </div>
                                         <div class="row">
                                             <div class="col-12 text-center">
-                                                <a class="chapters__link" href="https://www.meetup.com/Python-Sprints/">
-                                                    <button class="chapters__card-button button-minimal btn">
-                                                        <i class="chapters__card-icon fas fa-info-circle"></i>
-                                                    </button>
-                                                </a>
-                                                <!--<a class="chapters__card-button btn text-center" href="https://www.meetup.com/Python-Sprints/">-->
-                                                    <!--<i class="chapters__card-icon fab fa-meetup"></i>-->
-                                                 <!--</a>-->
+                                                <a class="chapters__card-button btn" href="https://www.meetup.com/Python-Sprints/">
+                                                    <i class="chapters__card-icon fab fa-meetup"></i>
+                                                 </a>
                                             </div>
                                         </div>
                                     </div>

Original file line number	Diff line number	Diff line change
`@@ -320,11 +320,9 @@ a {`
`320`	`320`	`}`
`321`	`321`
`322`	`322`	`.upcoming__col {`
`323`		`- //background: rgba(0, 0, 0, 0.7);`
`324`	`323`	`background: rgba(250, 235, 215, 0.85);`
`325`	`324`	`border-radius: 5px;`
`326`	`325`	`border: #000000 1px solid;`
`327`		`- //box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;`
`328`	`326`	`min-height: 100%;`
`329`	`327`	`margin-top: 1em;`
`330`	`328`	`}`
`@@ -346,10 +344,6 @@ a {`
`346`	`344`	`padding-top: 0.25em;`
`347`	`345`	`padding-bottom: 0.25em;`
`348`	`346`	`}`
`349`		`-//`
`350`		`-//.upcoming__event-label {`
`351`		`-// @extend .event-label;`
`352`		`-//}`
`353`	`347`
`354`	`348`	`.upcoming__event-title {`
`355`	`349`	`@extend .title;`
`@@ -413,14 +407,16 @@ a {`
`413`	`407`	`margin-bottom: 0.5em;`
`414`	`408`	`}`
`415`	`409`
`416`		`-.upcoming__link {`
	`410`	`+.upcoming__button {`
	`411`	`+ @extend .button-minimal;`
	`412`	`+ min-width: 50%;`
	`413`	`+ padding: 0;`
`417`	`414`	`}`
`418`	`415`
`419`	`416`	`.upcoming__button-icon {`
`420`	`417`	`}`
`421`	`418`
`422`	`419`	`.chapters {`
`423`		`-`
`424`	`420`	`}`
`425`	`421`
`426`	`422`	`.chapters__title {`
`@@ -436,7 +432,6 @@ a {`
`436`	`432`	`width: 100%;`
`437`	`433`	`border-radius: 5px;`
`438`	`434`	`border: black 1px solid;`
`439`		`- //box-shadow: rgba(0, 0, 0, 0.76) 2px 2px 2px 0;`
`440`	`435`	`}`
`441`	`436`
`442`	`437`	`.chapters__card-container {`
`@@ -454,15 +449,12 @@ a {`
`454`	`449`	`}`
`455`	`450`
`456`	`451`	`.chapters__card-main {`
`457`		`- //background: rgba(0, 0, 0, 0.7);`
`458`	`452`	`background: rgba(250, 235, 215, 0.85);`
`459`		`- //box-shadow: rgba(0, 0, 0, 0.76) 2px 2px 2px 0;`
`460`	`453`	`border: black 1px solid;`
`461`	`454`	`}`
`462`	`455`
`463`	`456`	`.chapters__card-header {`
`464`	`457`	`border-bottom: rgba(129, 129, 129, 0.41) 1px solid;`
`465`		`- //background-color: $dark-blue;`
`466`	`458`	`background: rgba(187, 187, 187, 0.61);`
`467`	`459`	`padding: 0;`
`468`	`460`	`}`
`@@ -495,18 +487,10 @@ a {`
`495`	`487`	`min-width: 50%;`
`496`	`488`	`padding: 0;`
`497`	`489`	`margin-bottom: 0.25em;`
`498`		`- &:hover > .chapters__card-icon {`
`499`		`- color: $orange;`
`500`		`- }`
`501`	`490`	`}`
`502`	`491`
`503`	`492`	`.chapters__card-icon {`
`504`		`- text-align: center;`
`505`		`- color: $black;`
`506`	`493`	`font-size: 1em;`
`507`		`- transition: all 0.5s ease-in;`
`508`		`- min-width: 100%;`
`509`		`- min-height: 100%;`
`510`	`494`	`}`
`511`	`495`
`512`	`496`	`.events {`