Framework7 - Hairlines

Advertisements

Previous Page
Next Page  

Description

Hairline is a class that adds 1px border around the images by using the border class. With the release of 1.x, hairlines revised the working with :after and :before pseudo elements instead of using CSS borders.

Hairlines contains the following rules −

  • :after − This pseudo element is used for bottom and right hairlines.

  • :before − This pseudo element is used for top and left hairlines.

The following code snippet shows the use of :after element.

.navbar:after {
   background-color: red;
}

The following code snippet removes the bottom hairline toolbar −

.navbar:after {
   display:none;
}

.toolbar:before {
   display:none;
}

"no-border" class

The hairline will be removed by using no-border class and it is supported on Navbar, toolbar, card and its elements.

The following code is used to remove hairline from navbar −

<div class = "navbar no-border">
   ...
</div>
Advertisements