Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Applying animation CSS I already have to new plugin


GregLassale

Question

Site URL: https://gregorylassale.com

I just switched to a new accordion-tabs plugin. The one that I used before that has this animation on hover I really like:

 

 I think the CSS for that animation is 

.box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing:    @type;
  box-sizing:         @type;
}

.transition (@transition) {
  -webkit-transition: @transition;
  -moz-transition:    @transition;
  -ms-transition:     @transition;
  -o-transition:      @transition;
  transition:         @transition;
}

// Overrides (modify at your own risk)
// No support provided past this point
// -----------------------------------
.accordion-2 {
  list-style: none;
  padding: 0;

  &__item {
    margin-bottom: 10px;
  }
  
  &__title {
    .background-checker(@accordion-2__primary-color);
    .box-sizing;
    .transition(all .3s ease);
    border-left: 3px solid @accordion-2__primary-color;

I'd like to apply it to my plugin but would need help with that.

The new plugin's customization CSS is

/* Plugin Accotabs - Custom Styles */
html .c-tabs__accordion-tab {
  margin: 0 0 10px;
  background: #f3f5f7;
  border: .5px solid #ddd;
  border-radius: 3px 3px 3px 3px;
}

html .c-tabs.has-hover .c-tabs__accordion-tab:hover,html .c-tabs__accordion-tab[aria-expanded=true] {
  background: #e8ecf0;
  border: .5px solid #ddd;
}
/* end Plugin Accotabs - Custom Styles */

 

Thanks in advance. 

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: https://gregorylassale.com I just switched to a new accordion-tabs plugin. The one that I used before that has this animation on hover I really like:   CleanShot 2021-04-22 at 18.18

Worked perfect. Thank you @bangank36. CSS is funny. Every time I think something should be easy to do, it's more involved, and every time I think it's gonna be more involved, it's easy. 🙃

2 answers to this question

Recommended Posts

  • 0
5 hours ago, GregLassale said:

Site URL: https://gregorylassale.com

I just switched to a new accordion-tabs plugin. The one that I used before that has this animation on hover I really like:

 

 I think the CSS for that animation is 


.box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing:    @type;
  box-sizing:         @type;
}

.transition (@transition) {
  -webkit-transition: @transition;
  -moz-transition:    @transition;
  -ms-transition:     @transition;
  -o-transition:      @transition;
  transition:         @transition;
}

// Overrides (modify at your own risk)
// No support provided past this point
// -----------------------------------
.accordion-2 {
  list-style: none;
  padding: 0;

  &__item {
    margin-bottom: 10px;
  }
  
  &__title {
    .background-checker(@accordion-2__primary-color);
    .box-sizing;
    .transition(all .3s ease);
    border-left: 3px solid @accordion-2__primary-color;

I'd like to apply it to my plugin but would need help with that.

The new plugin's customization CSS is


/* Plugin Accotabs - Custom Styles */
html .c-tabs__accordion-tab {
  margin: 0 0 10px;
  background: #f3f5f7;
  border: .5px solid #ddd;
  border-radius: 3px 3px 3px 3px;
}

html .c-tabs.has-hover .c-tabs__accordion-tab:hover,html .c-tabs__accordion-tab[aria-expanded=true] {
  background: #e8ecf0;
  border: .5px solid #ddd;
}
/* end Plugin Accotabs - Custom Styles */

 

Thanks in advance. 

try if this helps

html .c-tabs__accordion-tab:hover {
  border-left: 2px solid #000 !important;
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Animated Heading Block
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
6 hours ago, bangank36 said:

try if this helps


html .c-tabs__accordion-tab:hover {
  border-left: 2px solid #000 !important;
}

 

Worked perfect. Thank you @bangank36.

CSS is funny. Every time I think something should be easy to do, it's more involved, and every time I think it's gonna be more involved, it's easy. 🙃

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...