@nitro-ui/utility-rounded
Version:
Utility rounded styling for Nitro UI.
85 lines (78 loc) • 4.32 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Utility - Rounded</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../dist/css/rounded.css">
<style>
.container .col-md-8 {
font-family: Roboto;
font-size: 14px;
line-height: 22px;
}
.container img {
max-width: 100%;
height: auto;
}
.square {
border: 1px solid #ccc;
background-color: #eee;
padding-bottom: 100%;
}
</style>
</head>
<body class="bg-light">
<header class="bg-white border-bottom">
<div class="pt-5 px-5">
<style>
.logo-nitro{color:#242e39;font-family:Arial;font-size:20px;line-height:1.2;margin-bottom:100px;position:relative;text-transform:uppercase}.logo-nitro::before{border:2px solid #8105FE;content:'';display:block;height:2em;margin:-1em;position:absolute;top:50%;width:2em;-ms-transform:skewX(25deg);-webkit-transform:skewX(25deg);transform:skewX(25deg)}.logo-nitro>b{display:inline-block;background-color:#fff;position:relative;vertical-align:top}.logo-nitro>b b{font-weight:700;display:block;background:linear-gradient(to bottom,#06080a 0,#687d94 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
</style>
<div class="logo-nitro"><b><b>NITRO UI</b></b></div>
</div>
<div class="container py-5">
<h1 class="font-weight-bold mb-3">Rounded</h1>
<div class="text-muted">
<p>
Set radius of element's corners
</p>
</div>
</div>
</header>
<article>
<div class="container py-5">
<div class="row">
<div class="col-md-3">
<div class="square u-rounded"></div>
<div class="mt-2 small text-center"><code>.u-rounded</code></div>
</div>
<div class="col-md-3">
<div class="square u-circle"></div>
<div class="mt-2 small text-center"><code>.u-circle</code></div>
</div>
</div>
<hr class="mt-5 mb-5">
<div class="row">
<div class="col-md-3">
<div class="square u-rounded-top"></div>
<div class="mt-2 small text-center"><code>.u-rounded-top</code></div>
</div>
<div class="col-md-3">
<div class="square u-rounded-right"></div>
<div class="mt-2 small text-center"><code>.u-rounded-right</code></div>
</div>
<div class="col-md-3">
<div class="square u-rounded-bottom"></div>
<div class="mt-2 small text-center"><code>.u-rounded-bottom</code></div>
</div>
<div class="col-md-3">
<div class="square u-rounded-left"></div>
<div class="mt-2 small text-center"><code>.u-rounded-left</code></div>
</div>
</div>
</article>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>