You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1219 lines
64 KiB
1219 lines
64 KiB
@page "/demo"
|
|
|
|
<body class="">
|
|
<div class="document-container d-flex">
|
|
|
|
<aside>
|
|
<div class="sidebar @sidebarClosed bottombar">
|
|
|
|
|
|
<div class="profile-details">
|
|
<div class="avatar">
|
|
<img src="http://sys-app/core/app/sys/avatar/1733c1cf-a588-4a45-9773-dcd320bee57f/1" title="Janko Jordan">
|
|
</div>
|
|
<div class="profile-description">
|
|
<div class="profile-name">Janko Jordan</div>
|
|
<div class="profile-job">Web Designer</div>
|
|
</div>
|
|
<i class='bx bx-log-out'></i>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="navbar mt-sm-5 pt-sm-5">
|
|
<li class="navbar-item fab">
|
|
<a href="#">
|
|
<i class='bx bx-pencil'></i>
|
|
<span class="navbar-link">New document</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
New document
|
|
</span>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<i class='bx bx-home'></i>
|
|
<span class="navbar-link">Main navbar link 1</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
Main navbar link 1
|
|
</span>
|
|
</li>
|
|
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<i class='bx bx-shape-square'></i>
|
|
<span class="navbar-link">Main navbar link 2</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
Main navbar link 2
|
|
</span>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<i class='bx bx-message-square-dots'></i>
|
|
<span class="navbar-link">Main navbar link 3</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
Main navbar link 3
|
|
</span>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<i class='bx bx-customize'></i>
|
|
<span class="navbar-link">Main navbar link 4</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
Main navbar link 4
|
|
</span>
|
|
</li>
|
|
<div class="sidebar-divider"></div>
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
|
|
<main class="main @sidebarClosed @sidebarRightClosed">
|
|
|
|
|
|
|
|
|
|
<div class="d-flex justify-space-between">
|
|
<div>
|
|
<i class='bx bx-menu' @onclick="ToggleSidebar"></i>
|
|
@* <Glyph SVG="@Icons.Material.Rounded.Dangerous" /> *@
|
|
<span class="text">Open Sidebar</span>
|
|
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<i class='bx bx-filter' @onclick="ToggleSidebarRight"></i>
|
|
<span class="text">Open Filters</span>
|
|
</div>
|
|
</div>
|
|
<section id="borders" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Borders</h2>
|
|
<p>Use border utilities to quickly style the border, border color and border-radius of an element.
|
|
Great for images, buttons, or any other element. Responsive classes are available that use the
|
|
same viewport width breakpoints as the grid system.
|
|
</p>
|
|
<div>
|
|
<h4 class="text-core mt-5">Position</h4>
|
|
<div class="d-flex flex-wrap gap-3 square">
|
|
<div class="b-1">b-1</div>
|
|
<span class="bt-1">bt-1</span>
|
|
<span class="br-1">br-1</span>
|
|
<span class="bb-1">bb-1</span>
|
|
<span class="bl-1">bl-1</span>
|
|
<span class="bx-1">bx-1</span>
|
|
<span class="by-1">by-1</span>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Color</h4>
|
|
<div class="d-flex flex-wrap gap-3 square">
|
|
<span class="b-1 b-c-core">b-1 <br> b-c-core</span>
|
|
<span class="b-1 b-c-primary">b-1 <br> b-c-primary</span>
|
|
<span class="b-1 b-c-secondary">b-1 <br> b-c-secondary</span>
|
|
<span class="b-1 b-c-success">b-1 <br> b-c-success</span>
|
|
<span class="b-1 b-c-info">b-1 <br> b-c-info</span>
|
|
<span class="b-1 b-c-warning">b-1 <br> b-c-warning</span>
|
|
<span class="b-1 b-c-danger">b-1 <br> b-c-danger</span>
|
|
<span class="b-1 b-c-white">b-1 <br> b-c-white</span>
|
|
<span class="b-1 b-c-light">b-1 <br> b-c-light</span>
|
|
<span class="b-1 b-c-dark">b-1 <br> b-c-dark</span>
|
|
<span class="b-1 b-c-black">b-1 <br> b-c-black</span>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Border-radius</h4>
|
|
<div class="d-flex flex-wrap gap-3 square">
|
|
<span class="b-1 b-r-0">b-1 b-r-0</span>
|
|
<span class="b-1 b-r-1">b-1 b-r-1</span>
|
|
<span class="b-1 b-r-2">b-1 b-r-2</span>
|
|
<span class="b-1 b-r-3">b-1 b-r-3</span>
|
|
<span class="b-1 b-r-4">b-1 b-r-4</span>
|
|
<span class="b-1 b-r-5">b-1 b-r-5</span>
|
|
<span class="b-1 b-r-circle">b-1 b-r-circle</span>
|
|
<span style="width:100px;" class="b-1 b-r-pill">b-1 b-r-pill</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="text" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Colors</h2>
|
|
<p>Convey meaning through color with a handful of color utility classes. Includes support for
|
|
styling links with hover states, too.
|
|
</p>
|
|
<h4 class="text-core mt-5">Color</h4>
|
|
<div class="grid test grid-col-6 gap-3">
|
|
<span class="p-3 text-core">text-core </span>
|
|
<span class="p-3 text-primary">text-primary </span>
|
|
<span class="p-3 text-secondary">text-secondary </span>
|
|
<span class="p-3 text-success">text-success</span>
|
|
<span class="p-3 text-info">text-info</span>
|
|
<span class="p-3 text-warning">text-warning</span>
|
|
<span class="p-3 text-danger">text-danger</span>
|
|
<span class="p-3 text-white">text-white</span>
|
|
<span class="p-3 text-light">text-light</span>
|
|
<span class="p-3 text-dark">text-dark</span>
|
|
<span class="p-3 text-black">text-black</span>
|
|
</div>
|
|
|
|
<div class="mt-4 b-1 b-r-3 px-4 element-fg-core">
|
|
<pre>
|
|
<code id="htmlViewer" style="display:block;overflow-x:auto;">
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-core"</span>></span>text-core<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-primary"</span>></span>text-primary<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-secondary"</span>></span>text-secondary<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-success"</span>></span>text-success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-info"</span>></span>text-info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-warning"</span>></span>text-warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-danger"</span>></span>text-danger<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-white"</span>></span>text-white<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-light"</span>></span>text-light<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-dark"</span>></span>text-dark<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"text-black"</span>></span>text-black<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>></span>
|
|
</code></pre>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
<h4 class="text-core mt-5">Background color</h4>
|
|
<div class="grid test grid-col-6 gap-3">
|
|
<div class="p-3 bg-core">bg-core</div>
|
|
<div class="p-3 bg-primary">bg-primary</div>
|
|
<div class="p-3 bg-secondary">bg-secondary</div>
|
|
<div class="p-3 bg-success">bg-success</div>
|
|
<div class="p-3 bg-info">bg-info</div>
|
|
<div class="p-3 bg-warning">bg-warning</div>
|
|
<div class="p-3 bg-danger">bg-danger</div>
|
|
<div class="p-3 bg-white">bg-white</div>
|
|
<div class="p-3 bg-light">bg-light</div>
|
|
<div class="p-3 bg-dark">bg-dark</div>
|
|
<div class="p-3 bg-black">bg-black</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
|
|
<h4 class="text-core mt-5">Link color</h4>
|
|
<div class="grid test grid-col-6 gap-3">
|
|
<a href="#" class="p-3 text-core">text-core </a>
|
|
<a href="#" class="p-3 text-primary">text-primary </a>
|
|
<a href="#" class="p-3 text-secondary">text-secondary </a>
|
|
<a href="#" class="p-3 text-success">text-success</a>
|
|
<a href="#" class="p-3 text-info">text-info</a>
|
|
<a href="#" class="p-3 text-warning">text-warning</a>
|
|
<a href="#" class="p-3 text-danger">text-danger</a>
|
|
<a href="#" class="p-3 text-white">text-white</a>
|
|
<a href="#" class="p-3 text-light">text-light</a>
|
|
<a href="#" class="p-3 text-dark">text-dark</a>
|
|
<a href="#" class="p-3 text-black">text-black</a>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="text" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Text</h2>
|
|
<p>Documentation and examples for common text utilities to control size, alignment, wrapping,
|
|
weight, and
|
|
more.
|
|
</p>
|
|
|
|
<!-- text sizes -->
|
|
<h4 class="text-core mt-5">Text sizes</h4>
|
|
<div class="grid test grid-col-1 gap-3">
|
|
<div>
|
|
<h5>This is h5 </h5>
|
|
<p class="text-small"><span class="text-semibold">text-small</span><br>This is small font
|
|
size<br>
|
|
Lorem
|
|
ipsum dolor sit, amet
|
|
consectetur
|
|
adipisicing
|
|
elit. Eum quis neque ullam, eos eaque nam voluptate veniam dolor ex ratione?
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4>This is h4 </h4>
|
|
<p><span class="text-semibold">No class required</span><br>This is base font size <br>Lorem
|
|
ipsum
|
|
dolor sit amet consectetur,
|
|
adipisicing elit.
|
|
Explicabo modi dicta eveniet quia, repudiandae perspiciatis omnis vitae nihil vero
|
|
ratione.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3>This is h3 </h3>
|
|
<p class="text-medium"><span class="text-semibold">text-medium</span><br>This is medium font
|
|
<br>
|
|
Lorem
|
|
ipsum
|
|
dolor sit, amet consectetur
|
|
adipis
|
|
elit. Alias praesentium quo est pariatur sed nobis maiores rem aperiam ut voluptas?
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h2>This is h2 </h2>
|
|
<p class="text-large"><span class="text-semibold">text-large</span><br>This is large font
|
|
<br>
|
|
Lorem
|
|
ipsum
|
|
dolor sit, amet consectetur
|
|
adipisicing
|
|
elit. Obcaecati nihil totam, modi minus excepturi laboriosam maiores. Provident quos est
|
|
maiores.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h1>This is h1 </h1>
|
|
<p class="text-extralarge"><span class="text-semibold">text-extralarge</span><br>This is
|
|
extra
|
|
large
|
|
font <br>
|
|
Lorem
|
|
ipsum dolor sit amet,
|
|
consectetur adipisicing elit. Beatae, modi!
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm-medium"><span class="text-semibold">text-sm-medium</span>
|
|
<br>Medium size text on viewports sized SM (small) or wider.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-md-medium"><span class="text-semibold">text-md-medium</span>
|
|
<br>Medium size text on viewports sized MD (medium) or wider.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-lg-medium"><span class="text-semibold">text-lg-medium</span>
|
|
<br>Medium size text on viewports sized LG (large) or wider.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xl-medium"><span class="text-semibold">text-xl-medium</span>
|
|
<br>Medium size text on viewports sized XL (extra-large) or wider.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-core mt-5">Text alignment</h4>
|
|
<p>Easily realign text to components with text alignment classes.
|
|
</p>
|
|
<div class="b-1 b-r-3 p-5 border-core">
|
|
<div class="text-left">
|
|
<p class="text-semibold">text-left</p>
|
|
<p>Left aligned text on all viewport sizes</p>
|
|
</div>
|
|
<hr>
|
|
<div class="text-center">
|
|
<p class="text-semibold">text-center</p>
|
|
<p>Center aligned text on all viewport sizes.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="text-right">
|
|
<p class="text-semibold">text-right</p>
|
|
<p>Right aligned text on all viewport sizes.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="text-justify">
|
|
<p class="text-semibold">text-justify</p>
|
|
<p>Justified text on all viewport sizes. Lorem ipsum dolor sit, amet consectetur
|
|
adipisicing elit. Temporibus consequatur nisi amet modi in voluptatum facere
|
|
reprehenderit, aut assumenda. Velit.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="text-sm-right">
|
|
<p class="text-semibold">text-sm-right</p>
|
|
<p>Right aligned text on viewports sized SM (small) or wider.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="text-md-right">
|
|
<p class="text-semibold">text-md-right</p>
|
|
<p>Right aligned text on viewports sized MD (medium) or wider.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="text-lg-right">
|
|
<p class="text-semibold">text-lg-right</p>
|
|
<p>Right aligned text on viewports sized LG (large) or wider.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="text-xl-right">
|
|
<p class="text-semibold">text-xl-right</p>
|
|
<p>Right aligned text on viewports sized XL (extra-large) or wider.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<h4 class="text-core mt-5">Font weight</h4>
|
|
<p>Quickly change the weight (boldness).
|
|
</p>
|
|
<div class="b-1 b-r-3 p-5 border-core">
|
|
<p class="text-semibold">text-thin</p>
|
|
<div class="text-thin">
|
|
<p>This is thin text</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-regular</p>
|
|
<div class="text-regular">
|
|
<p>This is normal weight text - no class required</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-semibold</p>
|
|
<div class="text-semibold">
|
|
<p>This is semibold text</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-bold</p>
|
|
<div class="text-bold">
|
|
<p>This is bold text</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-extrabold</p>
|
|
<div class="text-extrabold">
|
|
<p>This is extra bold text</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-sm-bold</p>
|
|
<div class="text-sm-bold">
|
|
<p>Bold text on viewports sized SM (small) or wider.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<h4 class="text-core mt-5">Text transform</h4>
|
|
<p>Transform text in components with text capitalization classes or italicize text.
|
|
</p>
|
|
<div class="b-1 b-r-3 p-5 border-core">
|
|
<p class="text-semibold">text-italic</p>
|
|
<div class="text-italic">
|
|
<p>This is italic text</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-lowercase</p>
|
|
<div class="text-lowercase">
|
|
<p>This is lowercased text</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-uppercase</p>
|
|
<div class="text-uppercase">
|
|
<p>This is uppercased text</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-capitalize</p>
|
|
<div class="text-capitalize">
|
|
<p>This is capitalized text</p>
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-nowrap</p>
|
|
<div style="width:150px; background:yellow;" class="text-nowrap">
|
|
This text should overflow the parent.
|
|
</div>
|
|
<hr>
|
|
<p class="text-semibold">text-truncate</p>
|
|
<div style="width:150px; background:yellow;" class="text-truncate">
|
|
<span>
|
|
This is text is truncated
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Buttons</h2>
|
|
<p>Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes,
|
|
states, and more.
|
|
</p>
|
|
<div>
|
|
<h4 class="text-core mt-5">Examples</h4>
|
|
<div class="d-flex flex-wrap gap-3 ">
|
|
<button type="button" href="#" class="btn btn-core">click me</button>
|
|
<button type="button" href="#" class="btn btn-primary">click me</button>
|
|
<button type="button" href="#" class="btn btn-secondary">click me</button>
|
|
<button type="button" href="#" class="btn btn-success">click me</button>
|
|
<button type="button" href="#" class="btn btn-info">click me</button>
|
|
<button type="button" href="#" class="btn btn-warning">click me</button>
|
|
<button type="button" href="#" class="btn btn-danger">click me</button>
|
|
<button type="button" href="#" class="btn btn-white">click me</button>
|
|
<button type="button" href="#" class="btn btn-light">click me</button>
|
|
<button type="button" href="#" class="btn btn-dark">click me</button>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Outline buttons</h4>
|
|
<div class="d-flex flex-wrap gap-3 ">
|
|
<button type="button" href="#" class="btn btn-outline-core">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-primary">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-secondary">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-success">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-info">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-warning">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-danger">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-white">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-light">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-dark">click me</button>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Sizes</h4>
|
|
<div class="">
|
|
<button type="button" href="#" class="btn btn-sm btn-core">small button</button>
|
|
<button type="button" href="#" class="btn btn-sm btn-secondary">small button</button>
|
|
</div>
|
|
<div class="mt-4 ">
|
|
<button type="button" href="#" class="btn btn-lg btn-core">large button</button>
|
|
<button type="button" href="#" class="btn btn-lg btn-secondary">large button</button>
|
|
</div>
|
|
<div class="mt-4 ">
|
|
<button type="button" href="#" class="btn btn-block btn-core">full width button</button>
|
|
<button type="button" href="#" class="mt-4 btn btn-block btn-secondary">full width
|
|
button</button>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Button states</h4>
|
|
<div class="">
|
|
<button type="button" href="#" class="btn btn-core active" aria-pressed="true">active
|
|
button</button>
|
|
<button type="button" href="#" class="btn btn-core">normal button</button>
|
|
<button type="button" href="#" class="btn btn-core disabled" aria-disabled="true">disabled
|
|
button</button>
|
|
</div>
|
|
<div class="mt-4">
|
|
<button type="button" href="#" class="btn btn-outline-core active" aria-pressed="true">active button</button>
|
|
<button type="button" href="#" class="btn btn-outline-core">normal button</button>
|
|
<button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">disabled
|
|
button</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Radio
|
|
</h2>
|
|
<p>Radio buttons allow the user to select a single choice from a group of options.
|
|
|
|
|
|
</p>
|
|
<div>
|
|
<div class="grid grid-col-3 gap-3">
|
|
|
|
<div>
|
|
<label class="toggle-group" for="toggle-1">
|
|
<input class="toggle-input" id="toggle-1" name="toggle" type="checkbox" checked>
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-1" class="toggle-label">Checked</label>
|
|
</label>
|
|
|
|
<label class="toggle-group" for="toggle-2">
|
|
<input class="toggle-input" id="toggle-2" name="toggle" type="checkbox">
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-2" class="toggle-label">Unchecked</label>
|
|
</label>
|
|
|
|
<label class="toggle-group" for="toggle-3">
|
|
<input class="toggle-input" id="toggle-3" name="toggle" type="checkbox" disabled>
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-3" class="toggle-label">Disabled</label>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
@* <div>
|
|
<div class="checkbox-group">
|
|
<input id="checkbox-1" name="checkbox" type="checkbox" checked>
|
|
<label for="checkbox-1" class="checkbox-label">Checked</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input id="checkbox-2" name="checkbox" type="checkbox">
|
|
<label for="checkbox-2" class="checkbox-label">Unchecked</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input id="checkbox-3" name="checkbox" type="checkbox" disabled>
|
|
<label for="checkbox-3" class="checkbox-label">Checked disabled</label>
|
|
</div>
|
|
</div> *@
|
|
|
|
|
|
|
|
<div>
|
|
<label class="checkbox-group" for="checkbox-1">
|
|
<input class="checkbox-input" id="checkbox-1" name="checkbox" type="checkbox" checked>
|
|
<div class="checkbox-fill"></div>
|
|
<label for="checkbox-1" class="checkbox-label">Checked</label>
|
|
</label>
|
|
|
|
<label class="checkbox-group" for="checkbox-2">
|
|
<input class="checkbox-input" id="checkbox-2" name="checkbox" type="checkbox">
|
|
<div class="checkbox-fill"></div>
|
|
<label for="checkbox-2" class="checkbox-label">Unchecked</label>
|
|
</label>
|
|
|
|
<label class="checkbox-group" for="checkbox-3">
|
|
<input class="checkbox-input" id="checkbox-3" name="checkbox" type="checkbox" disabled>
|
|
<div class="checkbox-fill"></div>
|
|
<label for="checkbox-3" class="checkbox-label">Disabled</label>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
|
@* <div>
|
|
<div class="radio-group">
|
|
<input id="radio-1" name="radio" type="radio" checked>
|
|
<label for="radio-1" class="radio-label">Checked</label>
|
|
</div>
|
|
|
|
<div class="radio-group">
|
|
<input id="radio-2" name="radio" type="radio">
|
|
<label for="radio-2" class="radio-label">Unchecked</label>
|
|
</div>
|
|
|
|
<div class="radio-group">
|
|
<input id="radio-3" name="radio" type="radio" disabled>
|
|
<label for="radio-3" class="radio-label">Disabled</label>
|
|
</div>
|
|
</div> *@
|
|
|
|
|
|
|
|
<div>
|
|
<label class="radio-group" for="radio-1">
|
|
<input class="radio-input" id="radio-1" name="radio" type="radio" checked>
|
|
<div class="radio-fill"></div>
|
|
<label for="radio-1" class="radio-label">Checked</label>
|
|
</label>
|
|
|
|
<label class="radio-group" for="radio-2">
|
|
<input class="radio-input" id="radio-2" name="radio" type="radio">
|
|
<div class="radio-fill"></div>
|
|
<label for="radio-2" class="radio-label">Unchecked</label>
|
|
</label>
|
|
|
|
<label class="radio-group" for="radio-3">
|
|
<input class="radio-input" id="radio-3" name="radio" type="radio" disabled>
|
|
<div class="radio-fill"></div>
|
|
<label for="radio-3" class="radio-label">Disabled</label>
|
|
</label>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="inputs" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Input
|
|
</h2>
|
|
<p>Inputs buttons allow the user to select a single choice from a group of options.
|
|
</p>
|
|
|
|
|
|
<form>
|
|
<div class="grid grid-col-3 gap-3">
|
|
|
|
|
|
<div class="form-group error">
|
|
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Name</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<i class='bx bx-x-circle'></i>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Email</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<i class='bx bx-x-circle'></i>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<input type="password" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Password</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<i class='bx bx-x-circle'></i>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input type="number" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Number</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<i class='bx bx-x-circle'></i>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
<select type="textarea" required="required">
|
|
<option value="" disabled selected hidden></option>
|
|
<option value="1">Twitter </option>
|
|
<option value="2">Facebook</option>
|
|
</select>
|
|
<span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Select</label>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph"><i class='bx bx-caret-down'></i></span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="form-group error">
|
|
<select type="textarea" required="required">
|
|
</select>
|
|
<span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Select</label>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph button">
|
|
<i class='bx bx-x-circle'></i>
|
|
</span>
|
|
<span class="input-glyph">
|
|
<i class='bx bx-caret-down'></i>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
<div class="backdrop"></div>
|
|
<div class="drop-down">
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<div class="dropdown-header">Header</div>
|
|
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Message</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<i class='bx bx-x-circle'></i>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="btn-box my-5">
|
|
<button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
|
|
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
|
|
</div>
|
|
</form>
|
|
|
|
</section>
|
|
|
|
|
|
<hr class="mt-4 mb-4">
|
|
|
|
<h2 class="mb-2">Grid</h2>
|
|
<div class="grid test grid-col-4 gap-3">
|
|
<div class="col-span-23">1</div>
|
|
<div>2</div>
|
|
<div>3</div>
|
|
<div>4</div>
|
|
<div>5</div>
|
|
<div>6</div>
|
|
<div>7</div>
|
|
<div>8</div>
|
|
<div>9</div>
|
|
<div>10</div>
|
|
<div>11</div>
|
|
<div>12</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
<hr class="mt-4 mb-4">
|
|
<h2 class="mb-2"> Data Grid</h2>
|
|
<p>Data grid DENSE + COLLAPSE + SELECT</p>
|
|
|
|
|
|
<div class="chip-icon float-left" @onclick="ToggleSidebarRight"><i class='bx bx-filter'></i></div>
|
|
<div class="horizontal-scroll-container">
|
|
|
|
<div class="chip-group">
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"><i class='bx bx-user'></i></div>
|
|
<div class="chip-label">Chip label text</div>
|
|
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chip-group">
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"> <img class="img-fluid" src="https://source.unsplash.com/random?face" /> </div>
|
|
<div class="chip-label">Chip label text</div>
|
|
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="chip-group filter"> <!-- TO DO on chip-group filter toggle class active-->
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"><i class='bx bx-check'></i></div>
|
|
<div class="chip-label">Chip label text</div>
|
|
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="chip-group filter active"> <!-- TO DO on chip-group filter toggle class active-->
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"><i class='bx bx-check'></i></div>
|
|
<div class="chip-label">Chip label text</div>
|
|
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chip-group">
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"><i class='bx bx-user'></i></div>
|
|
<div class="chip-label">
|
|
|
|
|
|
|
|
<select type="textarea" placeholder="Select">Se
|
|
</select>
|
|
|
|
<div class="drop-down">
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<div class="dropdown-header">Header</div>
|
|
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="data-grid dense select collapse @NavClosed mt-5">
|
|
<!--dense select collapse-->
|
|
<div class="data-grid-row-content">
|
|
<!--active-->
|
|
<div class="data-grid-select">
|
|
@* <label class="checkbox-group m-0" for="checkbox-S11">
|
|
<input class="checkbox-input" id="checkbox-S11" name="checkbox" type="checkbox" checked>
|
|
<div class="checkbox-fill"></div>
|
|
</label> *@
|
|
<label class="toggle-group m-0" for="toggle-s11">
|
|
<input class="toggle-input" id="toggle-s11" name="toggle" type="checkbox">
|
|
<div class="toggle-fill"></div>
|
|
</label>
|
|
</div>
|
|
<div class="data-grid-container">
|
|
<div class="row">
|
|
<div class="col-12 col-md-4">
|
|
<div class="text-hc">Product 1</div>
|
|
<a class="text-link text-semibold" href="#">0023 001445669 1</a>
|
|
<div class="text-small">Product serial code</div>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<label>Material code</label>
|
|
<div class="">Material 29</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-4 text-md-right">
|
|
<label>Price</label>
|
|
<div class="text-semibold ">77,29</div>
|
|
</div>
|
|
</div>
|
|
<div class="row collapsed @NavClosed">
|
|
<div class="col-12 col-md-4 ">
|
|
<div class="text-small">
|
|
You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:1.75rem; margin-top:-.25rem" class="data-grid-collapse-cta" @onclick="ToggleNav">
|
|
<i class='bx bx-chevron-down'></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<section id="form-wizard" class="form-wizard mt-5">
|
|
<h3>Form wizard</h3>
|
|
|
|
|
|
<div class="form-outer">
|
|
<div class="form-step @NextSlide">
|
|
<div class="row">
|
|
<div class="col-12">Description for step 1</div>
|
|
@* <div class="col-12 col-md-6 ">
|
|
<div class="d-flex justify-flex-end gap-3">
|
|
<div class="dot active"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
</div> *@
|
|
|
|
<div class="form-group col-12 col-md-6">
|
|
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Name</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<i class='bx bx-x-circle'></i>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="form-group col-12 col-md-6">
|
|
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Surname</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<i class='bx bx-x-circle'></i>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-step @NextSlide">
|
|
<div class="bg-info">2</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="btn-box text-right my-5 d-flex justify-space-between">
|
|
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
|
|
<div>
|
|
<button type="button" @onclick="TogglePreviousSlide" class="btn btn-core mr-2" aria-pressed="true"><i class='bx bx-chevron-left'></i>Back</button>
|
|
<button type="button" @onclick="ToggleNextSlide" class="btn btn-core mr-2" aria-pressed="true">Next<i class='bx bx-chevron-right'></i></button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="dots d-flex justify-center gap-3">
|
|
<div class="dot completed"></div>
|
|
<div class="dot @NextSlide"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
<section id="modal">
|
|
<!-- TO DO close modal on pres esc and when clicked outside the modal-->
|
|
<!-- TO DO when modal is open add class to body .scroll-disabled-->
|
|
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" @onclick="ToggleNav" data-bs-target="#staticBackdrop">
|
|
Launch backdrop modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade @NavClosed" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Modal title</h3>
|
|
@* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
|
|
</div>
|
|
<div class="modal-body">
|
|
lorem20
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
|
|
<button type="button" class="btn btn-core">Understood</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
</main>
|
|
|
|
|
|
|
|
<aside>
|
|
<div class="sidebar @sidebarRightClosed right">
|
|
|
|
|
|
|
|
<div class="position-sticky" style="top:0;">
|
|
<div class="scrollable">
|
|
<div class="scroll-wrapper ">
|
|
<div class="scroll-container ">
|
|
<div class="scroll-content ">
|
|
|
|
<nav>
|
|
<ul class="navbar">
|
|
|
|
|
|
<li class="navbar-header">Pick a color scheme</li>
|
|
|
|
<div class="color-picker-container">
|
|
|
|
<form class="color-picker" action="">
|
|
<fieldset>
|
|
|
|
<label for="light" class="visually-hidden">Light</label>
|
|
<input type="radio" id="light" name="theme" checked>
|
|
|
|
|
|
<label for="pink" class="visually-hidden">Pink theme</label>
|
|
<input type="radio" id="pink" name="theme">
|
|
|
|
<label for="dark" class="visually-hidden">Dark theme</label>
|
|
<input type="radio" id="dark" name="theme">
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="sidebar-divider"></div>
|
|
<li class="navbar-header">Header</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<span class="navbar-link">Main navbar link 1</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<span class="navbar-link">Main navbar link 1</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<div class="sidebar-divider"></div>
|
|
<li class="navbar-header">Header</li>
|
|
<form>
|
|
<div class="form-group ">
|
|
<input type="name" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Password</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<svg class="icon-root svg-icon icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
|
|
@Icons.Material.Filled.Analytics
|
|
</svg>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<i class='bx bx-error-circle'></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
<div>
|
|
<div class="sidebar-divider mt-5"></div>
|
|
<li class="navbar-header">Header</li>
|
|
<div>
|
|
<label class="toggle-group reversed" for="toggle-r1">
|
|
<input class="toggle-input" id="toggle-r1" name="toggle" type="checkbox" checked>
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-r1" class="toggle-label">Checked</label>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<label class="toggle-group reversed" for="toggle-r2">
|
|
<input class="toggle-input" id="toggle-r2" name="toggle" type="checkbox">
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-r2" class="toggle-label">Checked</label>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">test</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<div class="modal-backdrop fade show"></div>
|
|
</body>
|
|
|
|
@code {
|
|
private string sidebarClosed { get; set; } = "close";
|
|
|
|
private void ToggleSidebar()
|
|
{
|
|
sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : "";
|
|
}
|
|
|
|
private string sidebarRightClosed { get; set; } = "close-r";
|
|
|
|
private void ToggleSidebarRight()
|
|
{
|
|
sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : "";
|
|
}
|
|
|
|
|
|
|
|
private string NavClosed { get; set; } = "";
|
|
|
|
private void ToggleNav()
|
|
{
|
|
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
|
|
}
|
|
|
|
|
|
private string NextSlide { get; set; } = "";
|
|
|
|
private void ToggleNextSlide()
|
|
{
|
|
NextSlide = string.IsNullOrWhiteSpace(NextSlide) ? "next" : "";
|
|
}
|
|
|
|
|
|
private string PreviousSlide { get; set; } = "";
|
|
|
|
private void TogglePreviousSlide()
|
|
{
|
|
PreviousSlide = string.IsNullOrWhiteSpace(PreviousSlide) ? "previous" : "";
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|