Material 2 Buttons Css styling Angular 5

Question

I've got a pretty satisfactory use of material2's buttons in my Angular 5 project.

I'm having trouble with styling a button which is meant to be with 90° rotated text.

to do things cleanly I'm rotating the inner div containing the text rather than the whole outer one.

My issue is that the hover and ripple of material2's buttons rather take the original text's width than that of the outer button div.

I'm fine with having to "hack" it into submission, I've already done this for the text but I can't manage to select or influence mat-button-focus-overlay or mat-button-ripple.

plus this starts to get more hacky if I want that button on the right-side screen edge :

am I approaching this the wrong way?

html :

<button class="my-button with-round-borders" mat-button>
  <div class="inner-text">
    Valider
  </div>
</button>
<button class="curvy-button-left absolute-postition" mat-button>
  <div class="inner-text rotate-left rectify-inner-text">
    Filtres
  </div>
</button>

css :

  .my-button{
    margin: 2px 0 0 18px;
    width: 160px;
    line-height: 38px;
    border: 1px solid $transparent;
    background-color: $col;
    color: white;
    &:focus{
      outline: none;
    }
  }
.absolute-postition{
  position: absolute;
  top: 70px;
  height: 160px;
}
.rectify-inner-text{
  margin-left: -61px;
}
  .inner-text{
    @extend %ellipsis;
    color: white;
  }
  .with-round-borders{
    border-radius: 50px;
  }
  .rotate-left {
    display:inline-block;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .curvy-button-left{
    background-image:
      radial-gradient(circle at bottom right,transparent 50%, $col 55%),
      radial-gradient(circle at bottom left,$col 50%,transparent 55%),
      radial-gradient(circle at top left,$col 50%,transparent 55%),
      radial-gradient(circle at top right,transparent 50%,$col 55%),
      linear-gradient($col,$col),
      linear-gradient($col,$col);
    background-position:0 150px,20px 10px,20px 140px,0 0,0px 10px,20px 20px;
    background-size:16px 10px,16px 10px,16px 10px,16px 10px,20px 140px,10px 120px;
    background-repeat:no-repeat;
  }

The ripple is essentially a circle that "ripples" out, thus the name. (You can see this by unchecking overflow: hidden on .mat-button. This is also why overflow: hidden works, the same as <mat-button> — Edric
– Edric, Commented Mar 14, 2018 at 12:46
It's clear, I hope, that that part isn't my question. I'm just giving back to the community by sharing knowledge. I hope it's self evident that the whole paragraph above that wasn't asking why or how overflow: hidden works. Do you want me to remove that part? — tatsu
– tatsu, Commented Mar 14, 2018 at 12:52
You don't have to. But what are you trying to ask? Whether this approach is good? — Edric
– Edric, Commented Mar 14, 2018 at 13:16
how is it not obvious what I'm trying to ask? really. I have pictures and a clear English description to go with it. Can you see or not an issue with the left and right-hand side buttons that I am creating on the screen edges? can you not see that the clickable zone and hover of the button extends far beyond the buttons actual size (blue curvy rectangle & dark-grey big square) ? — tatsu
– tatsu, Commented Mar 14, 2018 at 13:36

tatsu · Accepted Answer · 2019-10-07 11:57:01Z

I managed to solve this riddle within the confines of my satisfaction with unscoped styling.

Unscoped Styling is where you access a component that isn't your own's style (https://angular.io/guide/component-styles) :

.special{
  ::ng-deep .mat-button-ripple, ::ng-deep .mat-button-focus-overlay{
    width: 36px !important;
    height: 160px !important;
  }
}

thicker than 36px led to overflow onto the "other side" or "other page" as these two buttons are back to back. thinner than 36px led to offset from viewport border.

::ng-deep is what allows unscoping.

🚨 Careful with this 🚨

Notice I wrapped this within my own class name so as to only unscope within the context of that perticular div barring that classname and nothing other (no higher, for example) :

  <button class="curvy-button-left absolute-postition special" mat-button>
    <div class="inner-text rotate-left rectify-inner-text">Filtres</div>
  </button>

Notice the special class added there. this is how I use ::ng-deep in a controlled manner.

for the button that must allign with the right screen edge the hacks are more numerous :

.rectify-inner-text{
  height: 48px;
  margin-right: 12px;
  color: white;
}

.absolute-postition{
  position: absolute;
  top: 70px;
  height: 160px;
  right: -52px;
}

don't forget :

outline: 0 !important;

which deals with removing the added selection border once clicked. this must be placed at the same level as the button element.

The result is as follows :

I tried setting the background shape as I had done with the button but that was simply ignored.

I expected as much I'm guessing the ripple and color we see are filled via js not via css. which is why it will be overridden.

Collectives™ on Stack Overflow

Material 2 Buttons Css styling Angular 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related