CSS – Full Stack Soup

How to Override Scroll Bar CSS Styling Globally in Next.js

By -Danny B.
Posted on July 31, 2023July 31, 2023
Posted in CSS, Material UI, NextJS, React

Introduction This short post will go over how-to add a custom scrollbar using Material UI theme. Adding this flexibility to UIs will make your site more attractive to a variety of users and their visual preferences. However, sometimes we need to go beyond the default styling and customize our components to make them stand out

Angular – CSS Flip Card

By -Danny B.
Posted on September 23, 2020September 9, 2021
Posted in Angular, CSS

Overview This is a combination of CSS and a Material card that flips when you click on an icon button in the upper right hand corner. Install Angular Material Generate a new component In the grid-card.layout.module.css grid-card.layout.module.ts Left card is plain and the right card has two sides. grid-card.layout.module.html

Angular – Changing CSS with ElementRef

By -Danny B.
Posted on September 7, 2020August 8, 2022
Posted in Angular, CSS

Overview This is a tutorial for building a horizontal meter with 3 fill color values. Each of the values on the inside can be modified dynamically with typescript using ViewChild() and ElementRef. With ElementRef you can modify properties of a CSS selector. In this example we will modify the width but you can also modify