Changes in (chip, buttons, dropdown grid, inputs, snackbar)
This commit is contained in:
parent
6cd9089f6b
commit
b2e42c051b
2
dependencies/Connected
vendored
2
dependencies/Connected
vendored
@ -1 +1 @@
|
|||||||
Subproject commit dd40532a0ff03237407de9635c7211c5e1af5807
|
Subproject commit cc259dfc18c4ad6989898fa813e281b9249c3bd3
|
||||||
@ -1,5 +1,8 @@
|
|||||||
@page "/democomp"
|
@page "/democomp"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body class="">
|
<body class="">
|
||||||
<div class="top-loading-bar"></div>
|
<div class="top-loading-bar"></div>
|
||||||
<div class="document-container d-flex">
|
<div class="document-container d-flex">
|
||||||
@ -209,6 +212,25 @@
|
|||||||
<button type="button" href="#" class="btn btn-outline-dark">click me</button>
|
<button type="button" href="#" class="btn btn-outline-dark">click me</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<hr class="mt-4 mb-4">
|
||||||
|
<div>
|
||||||
|
<h4 class="text-core mt-5">Link buttons</h4>
|
||||||
|
<div class="btn-content">
|
||||||
|
<button type="button" href="#" class="btn btn-link-core">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-primary">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-secondary">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-success">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-info">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-warning">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-danger">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-white">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-light">click me</button>
|
||||||
|
<button type="button" href="#" class="btn btn-link-dark">click me</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr class="mt-4 mb-4">
|
<hr class="mt-4 mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-core mt-5">Sizes</h4>
|
<h4 class="text-core mt-5">Sizes</h4>
|
||||||
@ -545,11 +567,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group error">
|
<div class="form-group ">
|
||||||
<select type="textarea" required="required">
|
<select type="textarea" required="required">
|
||||||
</select>
|
</select>
|
||||||
<span class="highlight"></span><span class="bar"></span>
|
<span class="highlight"></span><span class="bar"></span>
|
||||||
<label class="label-animated">Select</label>
|
<label class="label-animated">Select</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-wraper">
|
||||||
<span class="input-glyph button">
|
<span class="input-glyph button">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
||||||
@ -561,7 +585,7 @@
|
|||||||
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<div class="backdrop"></div>
|
<div class="backdrop d-sm-none"></div>
|
||||||
<div class="drop-down">
|
<div class="drop-down">
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
<div class="dropdown-header">Header</div>
|
<div class="dropdown-header">Header</div>
|
||||||
@ -575,6 +599,15 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<DatePicker
|
||||||
|
CloseOnDateSelect=true
|
||||||
|
@bind-SelectedDate=@date>
|
||||||
|
</DatePicker>
|
||||||
|
@code {
|
||||||
|
DateTime date = DateTime.Today;
|
||||||
|
}
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
|
<textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
|
||||||
<label class="label-animated">Message</label>
|
<label class="label-animated">Message</label>
|
||||||
@ -695,9 +728,9 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data-grid dense image select collapse @NavClosed mt-5">
|
<div class="data-grid dense image select collapse mt-5">
|
||||||
<!--dense select collapse-->
|
<!--dense select collapse-->
|
||||||
<div class="data-grid-row-content">
|
<div class="data-grid-row-content @NavClosed">
|
||||||
<!--active-->
|
<!--active-->
|
||||||
<div class="data-grid-select">
|
<div class="data-grid-select">
|
||||||
@* <label class="checkbox-group m-0" for="checkbox-S11">
|
@* <label class="checkbox-group m-0" for="checkbox-S11">
|
||||||
@ -841,26 +874,28 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
<section id="card" class="mt-3 b-1 b-r-4 p-5">
|
||||||
<h2>Card</h2>
|
<h2>Card</h2>
|
||||||
<p>Cards contain content and actions that relate information about a subject.</p>
|
<p>Cards contain content and actions that relate information about a subject.</p>
|
||||||
|
|
||||||
<div class="grid grid-col-3 gap-3">
|
<div class="grid grid-col-3 gap-3">
|
||||||
|
|
||||||
<div class="card">
|
<div class="card @NavClosed warning border elevation-1"> <!--classes for priority (info, success, warning, danger), class for border (border), class for shadow (elevation-1)-->
|
||||||
|
|
||||||
<div class="card-header-cta">
|
<div class="card-header-cta">
|
||||||
<button class="btn btn-light btn-icon">
|
<button class="btn btn-white btn-icon">
|
||||||
<Glyph SVG="@Icons.Material.Filled.FavoriteBorder" class="icon-root svg-icon" />
|
<Glyph SVG="@Icons.Material.Filled.FavoriteBorder" class="icon-root svg-icon" />
|
||||||
</button>
|
</button>
|
||||||
|
<button @onclick="ToggleNav" class="btn btn-white btn-icon collapse"> <!--optional button for toggle collapsed contnent-->
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-media">
|
<div class="card-media"> <!--optional media contnent-->
|
||||||
<img class="img-fluid" style="height:250px" src="https://source.unsplash.com/random?face">
|
<img class="img-fluid" style="height:250px" src="https://source.unsplash.com/random?face">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="card-avatar"> <!--optional profile contnent-->
|
||||||
<div class="card-avatar">
|
|
||||||
<img class="img-fluid" src="https://source.unsplash.com/random?face">
|
<img class="img-fluid" src="https://source.unsplash.com/random?face">
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="avatar-title">Profile title</div>
|
<div class="avatar-title">Profile title</div>
|
||||||
@ -868,24 +903,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-container">
|
<div class="card-content-container"> <!--main card contnent-->
|
||||||
|
|
||||||
|
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="card-header-title">
|
<p class="card-header-title">Card Title</p>
|
||||||
<p class="typography typography-body1">Card Title</p>
|
|
||||||
<p class="card-header-subhead">Card Subhead</p>
|
<p class="card-header-subhead">Card Subhead</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<p class="typography typography-body2">Cards contain content and actions that relate information about a subject.</p>
|
<p class="typography typography-body2">Cards contain content and actions that relate information about a subject.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-actions">
|
<div class="collapsed @NavClosed"> <!--optional collapsed contnent-->
|
||||||
|
<div class="text-small pb-3">
|
||||||
|
You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-divider"></div>
|
||||||
|
|
||||||
|
<div class="card-actions justify-flex-end"> <!--optional action contnent-->
|
||||||
<div class="btn-content">
|
<div class="btn-content">
|
||||||
<button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleNav">Close</button>
|
<button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleNav">Close</button>
|
||||||
<button type="button" class="btn btn-sm btn-core">Understood</button>
|
<button type="button" class="btn btn-sm btn-core">Understood</button>
|
||||||
@ -895,6 +932,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
@ -911,7 +949,7 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
<div class="modal fade @NavClosed" tabindex="-1">
|
<div class="modal fade " tabindex="-1"> <!--@NavClosed-->
|
||||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
@ -1057,31 +1095,42 @@
|
|||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class="snackbar-group d-none bottom right"> <!--set position top, right, bottom, left -->
|
<div class="snackbar-group bottom right"> <!--set position top, right, bottom, left, class show when group is visible-->
|
||||||
<div class="snackbar success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
|
<div class="snackbar slide-in success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
|
||||||
<div class="snackbar-content">
|
<div class="snackbar-content">
|
||||||
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
|
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
|
||||||
<div class="snackbar-message">Snackbar message text</div>
|
<div class="snackbar-message">Snackbar message text</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="snackbar banner"> <!-- Banners remain until dismissed by the user, or if the state that caused the banner is resolved -->
|
<div class="snackbar slide-in banner"> <!-- Banners remain until dismissed by the user, or if the state that caused the banner is resolved -->
|
||||||
<div class="snackbar-content">
|
<div class="snackbar-content">
|
||||||
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.PersonOutline" class="icon-root svg-icon" /></div>
|
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.PersonOutline" class="icon-root svg-icon" /></div>
|
||||||
<div class="snackbar-message">
|
<div class="snackbar-message">
|
||||||
|
<div class="snackbar-header">
|
||||||
<div class="snackbar-title">Snackbar banner title</div>
|
<div class="snackbar-title">Snackbar banner title</div>
|
||||||
|
<div class="snackbar-recived">17:22</div>
|
||||||
|
</div>
|
||||||
<div class="snackbar-label">Snackbar banner message text </div>
|
<div class="snackbar-label">Snackbar banner message text </div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
@* <div class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div> *@
|
||||||
|
<div class="snackbar-cta-abs">
|
||||||
|
<button class="btn btn-white btn-icon">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="snackbar dialog"> <!-- Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) -->
|
<div class="snackbar slide-in dialog"> <!-- Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) -->
|
||||||
<div class="snackbar-content">
|
<div class="snackbar-content">
|
||||||
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.WarningAmber" class="icon-root svg-icon" /></div>
|
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.WarningAmber" class="icon-root svg-icon" /></div>
|
||||||
<div class="snackbar-message">
|
<div class="snackbar-message">
|
||||||
|
<div class="snackbar-header">
|
||||||
<div class="snackbar-title">Snackbar dialog title</div>
|
<div class="snackbar-title">Snackbar dialog title</div>
|
||||||
|
<div class="snackbar-recived">17:22</div>
|
||||||
|
</div>
|
||||||
<div class="snackbar-label">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus</div>
|
<div class="snackbar-label">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus</div>
|
||||||
<div class="snackbar-action">
|
<div class="snackbar-action">
|
||||||
<div class="btn btn-secondary">Snackbar action</div>
|
<div class="btn btn-secondary">Snackbar action</div>
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
@page "/"
|
@page "/"
|
||||||
@using Connected.Models;
|
@using Connected.Models;
|
||||||
|
@using Connected.Components;
|
||||||
|
|
||||||
|
|
||||||
<h1 style="text-align:center;">Component Sandbox</h1>
|
<h1 style="text-align:center;">Component Sandbox</h1>
|
||||||
@ -24,12 +25,8 @@ CloseOnDateSelect=true
|
|||||||
|
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
<TextInput @bind-Value="@value"></TextInput>
|
|
||||||
<p>Selected date is @date.ToString()</p>
|
<p>Selected date is @date.ToString()</p>
|
||||||
|
|
||||||
@value
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
DateTime date = DateTime.Today;
|
DateTime date = DateTime.Today;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,4 +1,7 @@
|
|||||||
namespace Connected.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
|
namespace Connected.Components;
|
||||||
|
|
||||||
public partial class Chip
|
public partial class Chip
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,36 +1,69 @@
|
|||||||
@using System.Globalization;
|
@using System.Globalization;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@if (loaded)
|
@if (loaded)
|
||||||
{
|
{
|
||||||
<div id="picker" class="m-2" style="width:270px; height:auto;">
|
<div id="picker">
|
||||||
|
|
||||||
<!-- DatePicker input !can be edited manualy -->
|
<!-- DatePicker input !can be edited manualy -->
|
||||||
<div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div>
|
@* <div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div> *@
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
|
||||||
|
<label class="label-animated">Select date</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" @onclick="(() => Shown = !Shown)">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.CalendarMonth" class="icon-root svg-icon" />
|
||||||
|
</span>
|
||||||
|
<span class="input-glyph error">
|
||||||
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@if (Shown)
|
@if (Shown)
|
||||||
{
|
{
|
||||||
<!-- DatePicker header -->
|
<!-- DatePicker header -->
|
||||||
<div id="picker_header" class="bg-info" style="height:80px;">
|
<div class="picker-container">
|
||||||
<div class="text-medium p-1">
|
<div id="picker-header">
|
||||||
|
@* <div class="text-medium">
|
||||||
@SelectedDate.Year.ToString()
|
@SelectedDate.Year.ToString()
|
||||||
</div>
|
</div> *@
|
||||||
<div class="text-large p-1">
|
<div class="picker-header-label">Select date</div>
|
||||||
|
<div class="picker-header-title">
|
||||||
@SelectedDate.ToString("ddd, " + Format)
|
@SelectedDate.ToString("ddd, " + Format)
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="picker-divider"></div>
|
||||||
<!-- DatePicker body -->
|
<!-- DatePicker body -->
|
||||||
<div id="picker_body" class="bg-white" style="height:auto;">
|
<div id="picker-body">
|
||||||
@switch (Selecting)
|
@switch (Selecting)
|
||||||
{
|
{
|
||||||
case Selecting.Years:
|
case Selecting.Years:
|
||||||
{
|
{
|
||||||
<div class="@NavBarClass">
|
|
||||||
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
|
<div class="picker-menu">
|
||||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
|
<button class="btn btn-icon-alt ">
|
||||||
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
|
||||||
|
</button>
|
||||||
|
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
|
||||||
|
<button class="btn btn-icon-alt ">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="picker-grid-col-3 gap-3">
|
||||||
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
|
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
|
||||||
{
|
{
|
||||||
int y = i;
|
int y = i;
|
||||||
<a href="#" @onclick="@(()=>SetYear(y))">
|
@* <a href="#" @onclick="@(()=>SetYear(y))">
|
||||||
<div class="chip-group-content d-inline-flex bg-core m-1 b-1 b-r-3 text-light" style="width:30%;">
|
<div class="chip-group-content d-inline-flex bg-core py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
|
||||||
<div class="chip-leading-icon"></div>
|
<div class="chip-leading-icon"></div>
|
||||||
<div class="chip-label">@i.ToString()</div>
|
<div class="chip-label">@i.ToString()</div>
|
||||||
<div class="chip-cta-icon"></div>
|
<div class="chip-cta-icon"></div>
|
||||||
@ -40,70 +73,105 @@
|
|||||||
if (SelectedDate.Year - i % 3 == 0)
|
if (SelectedDate.Year - i % 3 == 0)
|
||||||
{
|
{
|
||||||
<br />
|
<br />
|
||||||
|
} *@
|
||||||
|
<button @onclick="@(()=>SetYear(y))" type="button" class="item">@i.ToString()</button>
|
||||||
}
|
}
|
||||||
}
|
</div>
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case Selecting.Months:
|
case Selecting.Months:
|
||||||
{
|
{
|
||||||
<div class="@NavBarClass">
|
|
||||||
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
|
|
||||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
|
<div class="picker-menu">
|
||||||
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
|
<button class="btn btn-icon-alt ">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
|
||||||
|
</button>
|
||||||
|
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||||
|
<button class="btn btn-icon-alt ">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="picker-grid-col-3 gap-3">
|
||||||
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
|
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
|
||||||
{
|
{
|
||||||
int m = i;
|
int m = i;
|
||||||
<a href="#" @onclick="@(()=>SetMonth(m))">
|
@* <a href="#" @onclick="@(()=>SetMonth(m))">
|
||||||
|
|
||||||
<div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
|
<div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
|
||||||
<div class="chip-leading-icon"></div>
|
<div class="chip-leading-icon"></div>
|
||||||
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
|
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
|
||||||
<div class="chip-cta-icon"></div>
|
<div class="chip-cta-icon"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
if (i % 3 == 0)
|
if (i % 3 == 0)
|
||||||
{
|
{
|
||||||
<br />
|
<br />
|
||||||
|
} *@
|
||||||
|
<button @onclick="@(()=>SetMonth(m))" type="button" class="item">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
</div>
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case (Selecting.Days):
|
case (Selecting.Days):
|
||||||
{
|
{
|
||||||
<div class="@NavBarClass">
|
<div class="picker-menu">
|
||||||
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
|
<button class="btn btn-icon-alt ">
|
||||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
|
||||||
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
|
</button>
|
||||||
|
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||||
|
<button class="btn btn-icon-alt ">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="picker-grid-col-7 gap-3">
|
||||||
@for (int i = 0; i < 7; i++)
|
@for (int i = 0; i < 7; i++)
|
||||||
|
|
||||||
{
|
{
|
||||||
<div class="@DayNamesRowClass" style="width:30px; height:30px; text-align:center; padding-top:5px;">@CalendarStart.AddDays(i).ToString("ddd")</div>
|
|
||||||
|
@* <div class="@DayNamesRowClass">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div> *@
|
||||||
|
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@foreach (var Date in ShowingDates)
|
@foreach (var Date in ShowingDates)
|
||||||
{
|
{
|
||||||
<a href="#" @onclick="@(()=>SetDate(Date))">
|
<button class="item @DateChipStyle(Date)" @onclick="@(()=>SetDate(Date))">
|
||||||
<div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
|
@* <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
|
||||||
@Date.Day.ToString()
|
@Date.Day.ToString()
|
||||||
</div>
|
</div> *@
|
||||||
</a>
|
|
||||||
|
|
||||||
|
@Date.Day.ToString()
|
||||||
|
|
||||||
|
</button>
|
||||||
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
||||||
{
|
{
|
||||||
<br />
|
@* <br /> *@
|
||||||
}
|
}
|
||||||
|
|
||||||
CalendarStart = CalendarStart.AddDays(1);
|
CalendarStart = CalendarStart.AddDays(1);
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
break;
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<!-- Bottom bar -->
|
<!-- Bottom bar -->
|
||||||
|
<div class="btn-content justify-flex-end my-0">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-core">OK</button>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -153,14 +153,14 @@ public partial class DatePicker
|
|||||||
public string DateChipStyle(DateTime date)
|
public string DateChipStyle(DateTime date)
|
||||||
{
|
{
|
||||||
string result = "";
|
string result = "";
|
||||||
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
|
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none";
|
||||||
if (date.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info";
|
if (date.CompareTo(DateTime.Today) == 0) result = "days current";
|
||||||
if (date.Month.CompareTo(SelectedDate.Month) == 0)
|
if (date.Month.CompareTo(SelectedDate.Month) == 0)
|
||||||
{
|
{
|
||||||
if (date.Date.CompareTo(SelectedDate.Date) == 0)
|
if (date.Date.CompareTo(SelectedDate.Date) == 0)
|
||||||
return result+" bg-info text-light";
|
return result+"days active";
|
||||||
else
|
else
|
||||||
return result+" bg-core text-dark";
|
return result+" ";
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,10 +10,8 @@
|
|||||||
border-radius: $border-radius-pill;
|
border-radius: $border-radius-pill;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.btn-icon-alt {
|
.btn-icon-alt {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
@ -26,7 +24,7 @@
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(0,0,0,.075)
|
background-color: rgba(0, 0, 0, 0.075);
|
||||||
}
|
}
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&.focus {
|
&.focus {
|
||||||
@ -41,21 +39,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@each $key, $val in $theme-colors {
|
@each $key, $val in $theme-colors {
|
||||||
.btn-icon-alt.#{$key} {
|
.btn-icon-alt.#{$key} {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: $val;
|
color: $val;
|
||||||
&:hover {
|
&:hover {
|
||||||
//background-color: lighten($val, 24);
|
//background-color: lighten($val, 24);
|
||||||
background-color: rgba($val, .1);
|
background-color: rgba($val, 0.1);
|
||||||
}
|
}
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&.focus {
|
&.focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: set-color($val);
|
color: set-color($val);
|
||||||
background-color: rgba($val, .5);
|
background-color: rgba($val, 0.5);
|
||||||
box-shadow: 0 0 0 0.15rem lighten($val, 20);
|
box-shadow: 0 0 0 0.15rem lighten($val, 20);
|
||||||
}
|
}
|
||||||
&:active,
|
&:active,
|
||||||
@ -65,3 +61,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -60,9 +60,28 @@ $border-radius-btn: 100vw;
|
|||||||
&.active {
|
&.active {
|
||||||
background-color: darken($val, 15);
|
background-color: darken($val, 15);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-link-#{$key} {
|
||||||
|
// @include btn();
|
||||||
|
background-color: transparent;
|
||||||
|
color: $val;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
&:hover {
|
||||||
|
color: set-color($val);
|
||||||
|
background-color: $val;
|
||||||
|
}
|
||||||
|
&:focus-visible,
|
||||||
|
&.focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0 0.15rem lighten($val, 20);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background-color: darken($val, 15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn-outline-#{$key} {
|
.btn-outline-#{$key} {
|
||||||
// @include btn();
|
// @include btn();
|
||||||
color: darken($val, 10);
|
color: darken($val, 10);
|
||||||
@ -112,8 +131,8 @@ $border-radius-btn: 100vw;
|
|||||||
|
|
||||||
.btn-core {
|
.btn-core {
|
||||||
background-color: var(--bg-core-primary) !important;
|
background-color: var(--bg-core-primary) !important;
|
||||||
//color: set-color (var(--bg-core-primary-lighten)) !important;
|
color: set-color (var(--bg-core-primary-lighten)) !important;
|
||||||
color: rgba(255,255,255,.85) !important;
|
//color: rgba(255,255,255,.85) !important;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--bg-core-primary-darken) !important;
|
background-color: var(--bg-core-primary-darken) !important;
|
||||||
}
|
}
|
||||||
@ -128,6 +147,24 @@ $border-radius-btn: 100vw;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-link-core {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: (var(--bg-core-primary-darken)) !important;
|
||||||
|
&:hover {
|
||||||
|
color: rgba(255,255,255,.85) !important;
|
||||||
|
background-color: var(--bg-core-primary-darken) !important;
|
||||||
|
}
|
||||||
|
&:focus-visible,
|
||||||
|
&.focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
color: rgba(255,255,255,.85) !important;
|
||||||
|
background-color: var(--bg-core-primary-darken) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.btn-outline-core {
|
.btn-outline-core {
|
||||||
|
|||||||
@ -5,7 +5,7 @@ $box-padding: 0 0 0.25rem 0;
|
|||||||
|
|
||||||
.card {
|
.card {
|
||||||
background-color: var(--element-fg-core);
|
background-color: var(--element-fg-core);
|
||||||
border: 1px solid var(--border-core);
|
|
||||||
border-radius: $border-radius-lg;
|
border-radius: $border-radius-lg;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -13,44 +13,109 @@ $box-padding: 0 0 0.25rem 0;
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card.elevation-1{
|
||||||
|
box-shadow: $base-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.border{
|
||||||
|
border: 1px solid var(--border-core);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: $border-radius-lg;
|
||||||
|
opacity: .2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.danger:after,
|
||||||
|
.card.danger button:not(.btn-secondary, .card-header-cta button) {
|
||||||
|
background-color: $danger!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.danger.border,
|
||||||
|
.card.danger .card-divider {
|
||||||
|
border-color: lighten($danger, 15)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.warning:after,
|
||||||
|
.card.warning button:not(.btn-secondary, .card-header-cta button) {
|
||||||
|
background-color: $warning!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.warning.border,
|
||||||
|
.card.warning .card-divider {
|
||||||
|
border-color: lighten($warning, 15)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.success:after,
|
||||||
|
.card.success button:not(.btn-secondary, .card-header-cta button) {
|
||||||
|
background-color: $success!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.success.border,
|
||||||
|
.card.success .card-divider {
|
||||||
|
border-color: lighten($success, 15)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.info:after,
|
||||||
|
.card.info button:not(.btn-secondary, .card-header-cta button) {
|
||||||
|
background-color: $info!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.info.border,
|
||||||
|
.card.info .card-divider {
|
||||||
|
border-color: lighten($info, 15)!important;
|
||||||
|
}
|
||||||
|
|
||||||
.card-header-cta {
|
.card-header-cta {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.75rem;
|
top: 1rem;
|
||||||
right: 0.75rem;
|
right: 1rem;
|
||||||
z-index: 1;
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card .card-header-cta i,
|
||||||
|
.card .card-header-cta svg {
|
||||||
|
transform: rotate(0);
|
||||||
|
transition: all 0.5s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.show .card-header-cta .collapse i,
|
||||||
|
.card.show .card-header-cta .collapse svg {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.card-media {
|
.card-media {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 250px;
|
max-height: 250px;
|
||||||
margin-bottom: .75rem;
|
z-index: 1;
|
||||||
& img {
|
& img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-container {
|
.card-content-container {
|
||||||
padding: 0 .75rem .75rem;
|
padding: 0.75rem 1rem;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container {
|
|
||||||
padding: 0.75rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-container > * {
|
// .card-container > * {
|
||||||
//flex: 1;
|
// //flex: 1;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.card-avatar {
|
.card-avatar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0 0.75rem;
|
margin: 0.75rem 1rem 0;
|
||||||
padding: $box-padding;
|
padding: $box-padding;
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
@ -59,6 +124,7 @@ $box-padding: 0 0 0.25rem 0;
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
& .avatar-title {
|
& .avatar-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@ -76,14 +142,14 @@ $box-padding: 0 0 0.25rem 0;
|
|||||||
padding: $box-padding;
|
padding: $box-padding;
|
||||||
|
|
||||||
& .card-header-title {
|
& .card-header-title {
|
||||||
font-size: 1.5rem;
|
font-size: $font-size-md;
|
||||||
color: var(--text-core-hc);
|
color: var(--text-core-hc);
|
||||||
}
|
}
|
||||||
|
|
||||||
& .card-header-subhead {
|
& .card-header-subhead {
|
||||||
font-size: 1.05rem;
|
font-size: $base-font-size;
|
||||||
font-weight: 500;
|
|
||||||
line-height: 0.5;
|
line-height: 0.5;
|
||||||
|
font-weight: 500;
|
||||||
color: var(--text-core-lc);
|
color: var(--text-core-lc);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -98,7 +164,16 @@ $box-padding: 0 0 0.25rem 0;
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-content: end;
|
align-content: end;
|
||||||
|
z-index: 1;
|
||||||
& .btn-content {
|
& .btn-content {
|
||||||
margin: 0 .25rem;
|
margin: 0.5rem 0 .25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
margin: 0 0 .5rem 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border-top: 1px solid var(--border-core);
|
||||||
|
}
|
||||||
@ -181,7 +181,7 @@
|
|||||||
max-height: max-content;
|
max-height: max-content;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
border-radius: .6rem;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
&:focus-within ~ .backdrop {
|
&:focus-within ~ .backdrop {
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
@use "../globals/" as *;
|
@use "../globals/" as *;
|
||||||
@use "../util/" as *;
|
@use "../util/" as *;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.drop-down {
|
.drop-down {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -25,13 +28,13 @@
|
|||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
.drop-down {
|
.drop-down {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 46px;
|
top: auto;
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 0;
|
margin-top: 1rem;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transform: none;
|
transform: none;
|
||||||
border-radius: 0 0 $border-radius-lg $border-radius-lg;
|
border-radius: $border-radius-lg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -12,78 +12,6 @@
|
|||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
// .grid.grid-col-1{
|
|
||||||
// $cols: 1;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-2{
|
|
||||||
// $cols: 2;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-3{
|
|
||||||
// $cols: 3;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-4{
|
|
||||||
// $cols: 4;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-5{
|
|
||||||
// $cols: 5;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-6{
|
|
||||||
// $cols: 6;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-7{
|
|
||||||
// $cols: 7;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-8{
|
|
||||||
// $cols: 8;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-9{
|
|
||||||
// $cols: 9;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-10{
|
|
||||||
// $cols: 10;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-11{
|
|
||||||
// $cols: 11;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .grid.grid-col-12{
|
|
||||||
// $cols: 12;
|
|
||||||
// @include grid();
|
|
||||||
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
||||||
// }
|
|
||||||
|
|
||||||
$gridcol: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
|
$gridcol: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
|
||||||
|
|
||||||
@each $colCount in $gridcol {
|
@each $colCount in $gridcol {
|
||||||
@ -312,8 +240,8 @@ $columns: 12;
|
|||||||
transition: all 0.5s ease-in;
|
transition: all 0.5s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-grid.show .data-grid-collapse-cta i,
|
.data-grid-row-content.show .data-grid-collapse-cta i,
|
||||||
.data-grid.show .data-grid-collapse-cta svg {
|
.data-grid-row-content.show .data-grid-collapse-cta svg {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
transition: all 0.5s ease-in;
|
transition: all 0.5s ease-in;
|
||||||
}
|
}
|
||||||
@ -364,7 +292,7 @@ overflow: hidden;
|
|||||||
|
|
||||||
|
|
||||||
.dots {
|
.dots {
|
||||||
--width: .75rem;
|
--width: .85rem;
|
||||||
--height: var(--width);
|
--height: var(--width);
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -376,18 +304,17 @@ overflow: hidden;
|
|||||||
.dot {
|
.dot {
|
||||||
width: var(--width);
|
width: var(--width);
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
border-radius: 50%;
|
border-radius: $border-radius-pill;
|
||||||
background-color: var(--bg-core-primary-lighten);
|
background-color: var(--bg-core-primary);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
outline: 1px solid #fff;
|
outline: 1px solidvar(--border-core);
|
||||||
transition: all 300ms ease-in-out;
|
transition: all 300ms ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot.active,
|
.dot.active,
|
||||||
.dot.next {
|
.dot.next {
|
||||||
background-color: var(--bg-core-primary);
|
background-color: var(--bg-core-primary-darken);
|
||||||
outline: 2px solid var(--bg-core-primary);
|
width: calc(var(--width) * 2);
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot.completed {
|
.dot.completed {
|
||||||
|
|||||||
@ -16,3 +16,4 @@
|
|||||||
@forward "buttons-icons";
|
@forward "buttons-icons";
|
||||||
@forward "dropdown";
|
@forward "dropdown";
|
||||||
@forward "card";
|
@forward "card";
|
||||||
|
@forward "date-picker";
|
||||||
@ -263,6 +263,15 @@ select {
|
|||||||
|
|
||||||
|
|
||||||
/*search*/
|
/*search*/
|
||||||
|
|
||||||
|
/* clears the 'X'*/
|
||||||
|
input[type="search"]::-webkit-search-decoration,
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-results-button,
|
||||||
|
input[type="search"]::-webkit-search-results-decoration {
|
||||||
|
-webkit-appearance:none;
|
||||||
|
}
|
||||||
|
|
||||||
.form-group-alt .input-group-content{
|
.form-group-alt .input-group-content{
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
@use '../globals/' as *;
|
@use "../globals/" as *;
|
||||||
@use '../util/' as *;
|
@use "../util/" as *;
|
||||||
|
|
||||||
|
|
||||||
.snackbar-group {
|
.snackbar-group {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -12,40 +11,68 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 100svh;
|
max-height: 100svh;
|
||||||
//background:linear-gradient(to left,transparent, transparent, rgba(255,255,255,.15));
|
//background:linear-gradient(to left,transparent, transparent, rgba(255,255,255,.15));
|
||||||
border: 1px solid rgba(255,255,255,.25);
|
// border: 1px solid rgba(255, 255, 255, 0.25);
|
||||||
border-radius: 0.6rem;
|
// border-radius: 0.6rem;
|
||||||
backdrop-filter: blur(25px) opacity(0.5);
|
// backdrop-filter: blur(25px) opacity(0.5);
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: $transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snackbar-group.show {
|
||||||
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar {
|
.snackbar {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
//min-height: 60px;
|
//min-height: 60px;
|
||||||
background-color: var(--bg-core-primary-light);
|
background-color: var(--bg-core-primary-light);
|
||||||
margin: 0 .75rem .75rem;
|
background-color: rgba(255,255,255,.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
margin: 0 0.75rem 0.75rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: $border-radius-lg;
|
border-radius: $border-radius-lg;
|
||||||
filter: drop-shadow(1px 2px 4px rgba(0,0,0,.15));
|
filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.15));
|
||||||
transform: translateX(100%);
|
//transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.snackbar.slide-in {
|
||||||
animation: slidein 0.3s ease-in-out forwards;
|
animation: slidein 0.3s ease-in-out forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snackbar.slide-out {
|
||||||
|
animation: slideout 0.3s ease-in-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes slidein {
|
@keyframes slidein {
|
||||||
|
0% {
|
||||||
|
transform: translateX(110%);
|
||||||
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes slideout {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(110%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.snackbar:first-of-type {
|
.snackbar:first-of-type {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.snackbar:after {
|
.snackbar:after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
border-radius: $border-radius-lg;
|
border-radius: $border-radius-lg;
|
||||||
opacity: .3;
|
opacity: 0.3;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -105,9 +132,22 @@
|
|||||||
transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
|
transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snackbar-cta-abs {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
left: -13px;
|
||||||
|
top: -13px;
|
||||||
|
box-shadow: $base-box-shadow;
|
||||||
|
transition: $transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snackbar-cta-abs .btn-icon {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.snackbar-message {
|
.snackbar-message {
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
margin: 0 .85rem;
|
margin-left: 0.85rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
@ -115,31 +155,47 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snackbar-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.snackbar-title {
|
.snackbar-title {
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
font-weight: $font-weight-600;
|
font-weight: $font-weight-600;
|
||||||
color: $text-core-hc;
|
color: $text-core-hc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snackbar-recived {
|
||||||
|
font-size: .75rem;
|
||||||
|
font-weight: $font-weight-600;
|
||||||
|
color: $text-core-vc;
|
||||||
|
}
|
||||||
|
|
||||||
.snackbar-action {
|
.snackbar-action {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: .5rem;
|
gap: 0.5rem;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-action .btn {
|
.snackbar-action .btn {
|
||||||
font-size: .85rem;
|
font-size: 0.85rem;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
padding: .1rem .7rem;
|
padding: 0.1rem 0.7rem;
|
||||||
border-radius: 0.35rem;
|
border-radius: 0.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-cta-icon:hover {
|
.snackbar-cta-icon:hover {
|
||||||
background-color: rgba(0,0,0,.15);
|
background-color: rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snackbar:hover .snackbar-cta-abs {
|
||||||
|
opacity: .9;
|
||||||
|
}
|
||||||
|
|
||||||
.snackbar-group {
|
.snackbar-group {
|
||||||
&.top {
|
&.top {
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -154,7 +210,6 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
&.top {
|
&.top {
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -186,15 +241,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.snackbar {
|
.snackbar {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 0 auto .75rem auto;
|
margin: 0 auto 0.75rem auto;
|
||||||
|
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
margin: 0 .75rem .75rem;
|
margin: 0 0.75rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(lg) {
|
@include breakpoint(lg) {
|
||||||
|
|||||||
@ -2,3 +2,4 @@
|
|||||||
@forward 'variables';
|
@forward 'variables';
|
||||||
@forward 'core';
|
@forward 'core';
|
||||||
@forward 'typography';
|
@forward 'typography';
|
||||||
|
@forward 'fonts';
|
||||||
Loading…
x
Reference in New Issue
Block a user