D8 - Simple popup blocks design customization - SPB tutorial

Assume, you are creating a popup with custom selector option and you are giving css name as social-media. Once you created, it will generate following css selectors under ADJUSTMENT CLASS Section.  

Parent - #spb-social-media
It is the unique identification selector.

Identifier - .social-media
This is the Identifier which was given previously when we creating.

Modal class - .social-media-modal
It will help to adjust the overlay background colors.
Example:
 .social-media-modal {
    background: #000;
}

Modal close class - .social-media-modal-close
It will help to adjust the close button styles and positions.
Example:
.social-media-modal-close {
    border-radius: 50px;
}

Modal minimize class - .social-media-modal-minimize
It will help to adjust the minimize button styles and positions.
Example:
.social-media-modal-minimize {
    border-radius: 50px;
}

Modal minimized class - .social-media-modal-minimized
It will help to adjust the minimized button styles and positions.
Example:
.social-media-modal-minimized {
    right: 30%;
}

Override positions - .social-media-modal .spb_center
It will help to adjust the popup styles and positions.
Example:
#spb-social-media .spb_center {
    left: 20%;
}