Compare commits
No commits in common. "f9ba5594805f664d32931a65072cf886286736e9" and "5a4c13f8adfd3e79c79a0031d8bace846f0f3789" have entirely different histories.
f9ba559480
...
5a4c13f8ad
2
dependencies/Connected
vendored
2
dependencies/Connected
vendored
@ -1 +1 @@
|
||||
Subproject commit cc259dfc18c4ad6989898fa813e281b9249c3bd3
|
||||
Subproject commit dd40532a0ff03237407de9635c7211c5e1af5807
|
||||
@ -1,8 +1,5 @@
|
||||
@page "/democomp"
|
||||
|
||||
|
||||
|
||||
|
||||
<body class="">
|
||||
<div class="top-loading-bar"></div>
|
||||
<div class="document-container d-flex">
|
||||
@ -212,25 +209,6 @@
|
||||
<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">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">
|
||||
<div>
|
||||
<h4 class="text-core mt-5">Sizes</h4>
|
||||
@ -567,13 +545,11 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group ">
|
||||
<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>
|
||||
<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 button">
|
||||
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
||||
@ -585,7 +561,7 @@
|
||||
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
||||
</span>
|
||||
</span>
|
||||
<div class="backdrop d-sm-none"></div>
|
||||
<div class="backdrop"></div>
|
||||
<div class="drop-down">
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<div class="dropdown-header">Header</div>
|
||||
@ -599,15 +575,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<DatePicker
|
||||
CloseOnDateSelect=true
|
||||
@bind-SelectedDate=@date>
|
||||
</DatePicker>
|
||||
@code {
|
||||
DateTime date = DateTime.Today;
|
||||
}
|
||||
|
||||
<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>
|
||||
@ -728,9 +695,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="data-grid dense image select collapse mt-5">
|
||||
<div class="data-grid dense image select collapse @NavClosed mt-5">
|
||||
<!--dense select collapse-->
|
||||
<div class="data-grid-row-content @NavClosed">
|
||||
<div class="data-grid-row-content">
|
||||
<!--active-->
|
||||
<div class="data-grid-select">
|
||||
@* <label class="checkbox-group m-0" for="checkbox-S11">
|
||||
@ -874,28 +841,26 @@
|
||||
|
||||
|
||||
|
||||
<section id="card" class="mt-3 b-1 b-r-4 p-5">
|
||||
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
||||
<h2>Card</h2>
|
||||
<p>Cards contain content and actions that relate information about a subject.</p>
|
||||
|
||||
<div class="grid grid-col-3 gap-3">
|
||||
|
||||
<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">
|
||||
|
||||
<div class="card-header-cta">
|
||||
<button class="btn btn-white btn-icon">
|
||||
<button class="btn btn-light btn-icon">
|
||||
<Glyph SVG="@Icons.Material.Filled.FavoriteBorder" class="icon-root svg-icon" />
|
||||
</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 class="card-media"> <!--optional media contnent-->
|
||||
<div class="card-media">
|
||||
<img class="img-fluid" style="height:250px" src="https://source.unsplash.com/random?face">
|
||||
</div>
|
||||
|
||||
<div class="card-avatar"> <!--optional profile contnent-->
|
||||
|
||||
<div class="card-avatar">
|
||||
<img class="img-fluid" src="https://source.unsplash.com/random?face">
|
||||
<div class="">
|
||||
<div class="avatar-title">Profile title</div>
|
||||
@ -903,26 +868,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content-container"> <!--main card contnent-->
|
||||
<div class="card-container">
|
||||
|
||||
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">Card Title</p>
|
||||
<div class="card-header-title">
|
||||
<p class="typography typography-body1">Card Title</p>
|
||||
<p class="card-header-subhead">Card Subhead</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-content">
|
||||
<p class="typography typography-body2">Cards contain content and actions that relate information about a subject.</p>
|
||||
</div>
|
||||
|
||||
<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="card-actions">
|
||||
<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-core">Understood</button>
|
||||
@ -932,7 +895,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -949,7 +911,7 @@
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade " tabindex="-1"> <!--@NavClosed-->
|
||||
<div class="modal fade @ModalShown" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -1095,42 +1057,31 @@
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="snackbar-group bottom right"> <!--set position top, right, bottom, left, class show when group is visible-->
|
||||
<div class="snackbar slide-in success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
|
||||
<div class="snackbar-group d-none bottom right"> <!--set position top, right, bottom, left -->
|
||||
<div class="snackbar success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
|
||||
<div class="snackbar-content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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 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-leading-icon"><Glyph SVG="@Icons.Material.Filled.PersonOutline" class="icon-root svg-icon" /></div>
|
||||
<div class="snackbar-message">
|
||||
<div class="snackbar-header">
|
||||
<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>
|
||||
@* <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 class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 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-leading-icon"><Glyph SVG="@Icons.Material.Filled.WarningAmber" class="icon-root svg-icon" /></div>
|
||||
<div class="snackbar-message">
|
||||
<div class="snackbar-header">
|
||||
<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-action">
|
||||
<div class="btn btn-secondary">Snackbar action</div>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
@page "/"
|
||||
@using Connected.Models;
|
||||
@using Connected.Components;
|
||||
|
||||
|
||||
<h1 style="text-align:center;">Component Sandbox</h1>
|
||||
@ -22,28 +21,7 @@
|
||||
|
||||
<p>Izbran datum je: @date</p>
|
||||
|
||||
<FormWizard Id="Wizard1">
|
||||
<FormWizardStep Name="Step1">
|
||||
Step1
|
||||
</FormWizardStep>
|
||||
<FormWizardStep Name="Step2">
|
||||
Step2
|
||||
</FormWizardStep>
|
||||
<FormWizardStep Name="Step3">
|
||||
Step3
|
||||
</FormWizardStep>
|
||||
<FormWizardStep Name="Step4">
|
||||
Step4
|
||||
</FormWizardStep>
|
||||
</FormWizard>
|
||||
<DatePicker
|
||||
CloseOnDateSelect=true
|
||||
@bind-SelectedDate=@date>
|
||||
|
||||
</DatePicker>
|
||||
|
||||
<p>Selected date is @date.ToString()</p>
|
||||
|
||||
@code {
|
||||
DateTime date = DateTime.Today;
|
||||
|
||||
}
|
||||
@ -1,7 +1,4 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Connected.Components;
|
||||
|
||||
namespace Connected.Components;
|
||||
public partial class Chip
|
||||
{
|
||||
}
|
||||
|
||||
@ -1,121 +1,130 @@
|
||||
@using System.Globalization;
|
||||
|
||||
@if (loaded)
|
||||
{
|
||||
<div id="picker">
|
||||
<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="TogglePicker">
|
||||
<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>
|
||||
|
||||
|
||||
<div id="picker" class="m-2" style="width:270px; height:auto;">
|
||||
<!-- 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>
|
||||
@if (Shown)
|
||||
{
|
||||
<!-- DatePicker header -->
|
||||
<div class="picker-container">
|
||||
<div id="picker-header">
|
||||
|
||||
<div class="picker-header-label">Select date</div>
|
||||
<div class="picker-header-title">
|
||||
<div id="picker_header" class="bg-info" style="height:80px;">
|
||||
<div class="text-medium p-1">
|
||||
@SelectedDate.Year.ToString()
|
||||
</div>
|
||||
<div class="text-large p-1">
|
||||
@SelectedDate.ToString("ddd, " + Format)
|
||||
</div>
|
||||
</div>
|
||||
<div class="picker-divider"></div>
|
||||
<!-- DatePicker body -->
|
||||
<div id="picker-body">
|
||||
<div id="picker_body" class="bg-white" style="height:auto;">
|
||||
@switch (Selecting)
|
||||
{
|
||||
case Selecting.Years:
|
||||
{
|
||||
|
||||
<div class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
||||
</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" Click="(()=>NavBarClick())" />
|
||||
</button>
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
|
||||
</div>
|
||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="picker-grid-col-3 gap-3">
|
||||
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
|
||||
{
|
||||
int y = i;
|
||||
<button @onclick="@(()=>SetYear(y))" type="button" class="item @YearChipClass(y)">@i.ToString()</button>
|
||||
}
|
||||
<a href="#" @onclick="@(()=>SetYear(y))">
|
||||
<div class="chip-group-content d-inline-flex bg-core @YearChipClass(y) m-1 b-1 b-r-3 text-light" style="width:30%;">
|
||||
<div class="chip-leading-icon"></div>
|
||||
<div class="chip-label">@i.ToString()</div>
|
||||
<div class="chip-cta-icon"></div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
if (SelectedDate.Year - i % 3 == 0)
|
||||
{
|
||||
<br />
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case Selecting.Months:
|
||||
{
|
||||
<div class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
||||
</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" Click="(()=>NavBarClick())" />
|
||||
</button>
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
|
||||
</div>
|
||||
|
||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
|
||||
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="picker-grid-col-3 gap-3">
|
||||
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
|
||||
{
|
||||
int m = i;
|
||||
<button @onclick="@(()=>SetMonth(m))" type="button" class="item @MonthChipClass(i)">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
|
||||
}
|
||||
<a href="#" @onclick="@(()=>SetMonth(m))" @ont>
|
||||
|
||||
<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-leading-icon"></div>
|
||||
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
|
||||
<div class="chip-cta-icon"></div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
if (i % 3 == 0)
|
||||
{
|
||||
<br />
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case (Selecting.Days):
|
||||
{
|
||||
<div class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
||||
</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" Click="(()=>NavBarClick())" />
|
||||
</button>
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
|
||||
</div>
|
||||
<div class="picker-grid-col-7 gap-3">
|
||||
|
||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
|
||||
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@for (int i = 0; i < 7; i++)
|
||||
|
||||
{
|
||||
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
|
||||
<div class="@DayNamesRowClass" style="width:30px; height:30px; text-align:center; padding-top:5px;">@CalendarStart.AddDays(i).ToString("ddd")</div>
|
||||
}
|
||||
|
||||
@foreach (var Date in ShowingDates)
|
||||
{
|
||||
<button class="item @DateChipClass(Date)" @onclick="@(()=>SetDate(Date))">
|
||||
<a href="#" @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">
|
||||
@Date.Day.ToString()
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
||||
{
|
||||
<br />
|
||||
}
|
||||
CalendarStart = CalendarStart.AddDays(1);
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
</div>
|
||||
@if (ShowBottomBar)
|
||||
{
|
||||
<!-- Bottom bar -->
|
||||
<div class="btn-content justify-flex-end my-0">
|
||||
<button type="button" class="btn btn-sm btn-secondary" @onclick="(()=>ClosePicker())">Cancel</button>
|
||||
<button type="button" class="btn btn-sm btn-core" @onclick="(()=>ClosePicker(false))">OK</button>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div class="p-2" style="@NavBarStyle">
|
||||
<Button Class="btn-sm" OnClick="(()=>Shown=!Shown)">X</Button>
|
||||
<Button Class="btn-sm" OnClick="(async () => await SetDate(SelectedDate, true))">OK</Button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -18,8 +18,6 @@ public partial class DatePicker
|
||||
[Parameter]
|
||||
public DateTime SelectedDate { get; set; } = DateTime.Today;
|
||||
|
||||
private DateTime _InitialDate { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public DateTime? SelectedEndDate { get; set; } = null;
|
||||
|
||||
@ -55,13 +53,14 @@ public partial class DatePicker
|
||||
}
|
||||
private bool Shown { get; set; } = false;
|
||||
|
||||
public async Task SetDate(DateTime Date)
|
||||
public async Task SetDate(DateTime Date, bool HideOnSet=false)
|
||||
{
|
||||
SelectedDate = Date;
|
||||
SetStartStop();
|
||||
if (CloseOnDateSelect)
|
||||
Shown = false;
|
||||
await SelectedDateChanged.InvokeAsync(SelectedDate);
|
||||
if (HideOnSet) Shown = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
@ -83,6 +82,48 @@ public partial class DatePicker
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private string DayNamesRowClass
|
||||
{
|
||||
get
|
||||
{
|
||||
return new CssBuilder()
|
||||
.AddClass("chip-leading-icon")
|
||||
.AddClass("d-inline-block")
|
||||
.AddClass("m-1")
|
||||
.AddClass("bg-danger")
|
||||
.AddClass("text-small")
|
||||
.AddClass("text-white")
|
||||
.Build();
|
||||
}
|
||||
}
|
||||
private string ChipFirstRowStyle
|
||||
{
|
||||
get
|
||||
{
|
||||
return new StyleBuilder()
|
||||
.AddStyle("width", "30px")
|
||||
.AddStyle("height", "30px")
|
||||
.AddStyle("text-align", "center")
|
||||
.Build();
|
||||
}
|
||||
}
|
||||
/*
|
||||
@for (int i=0;i<7; i++)
|
||||
{
|
||||
<div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
|
||||
}
|
||||
@while (calendarStart.CompareTo(calendarEnd) < 0)
|
||||
{
|
||||
<a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
|
||||
@if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
||||
{
|
||||
<br />
|
||||
}
|
||||
calendarStart = calendarStart.AddDays(1);
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
public void SetStartStop()
|
||||
{
|
||||
CalendarStart = SelectedDate;
|
||||
@ -113,17 +154,17 @@ public partial class DatePicker
|
||||
}
|
||||
}
|
||||
|
||||
public string DateChipClass(DateTime date)
|
||||
public string DateChipStyle(DateTime date)
|
||||
{
|
||||
string result = "";
|
||||
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none";
|
||||
if (date.CompareTo(DateTime.Today) == 0) result = "days current";
|
||||
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
|
||||
if (date.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info";
|
||||
if (date.Month.CompareTo(SelectedDate.Month) == 0)
|
||||
{
|
||||
if (date.Date.CompareTo(SelectedDate.Date) == 0)
|
||||
return result+"days active";
|
||||
return result+" bg-info text-light";
|
||||
else
|
||||
return result+" ";
|
||||
return result+" bg-core text-dark";
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@ -147,7 +188,6 @@ public partial class DatePicker
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
SelectedDate = DateTime.Today;
|
||||
_InitialDate=SelectedDate;
|
||||
SetStartStop();
|
||||
loaded = true;
|
||||
await base.OnInitializedAsync();
|
||||
@ -179,20 +219,6 @@ public partial class DatePicker
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ClosePicker(bool resetDate=true)
|
||||
{
|
||||
if (resetDate)
|
||||
SelectedDate=_InitialDate;
|
||||
Shown = false;
|
||||
await SelectedDateChanged.InvokeAsync(SelectedDate);
|
||||
}
|
||||
|
||||
private void TogglePicker()
|
||||
{
|
||||
_InitialDate=SelectedDate;
|
||||
Shown = !Shown;
|
||||
}
|
||||
|
||||
private async Task NavBarClick(bool forward = true)
|
||||
{
|
||||
int multiplier = 1;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</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" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
|
||||
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished">Cancel</button>
|
||||
<div>
|
||||
<button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished"><i class='bx bx-chevron-left'></i>@PreviousBtnText</button>
|
||||
<button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>
|
||||
|
||||
@ -65,12 +65,6 @@
|
||||
<_NewCompiledCssFiles Include="wwwroot\Connected.Components.min.css" Exclude="@(Content)" />
|
||||
<Content Include="@(_NewCompiledCssFiles)" />
|
||||
</ItemGroup>
|
||||
<Error Condition="!Exists('$(MSBuildProjectDirectory)/wwwroot/Fonts/')" Text="Missing Fonts folder in wwwroot" />
|
||||
<ItemGroup>
|
||||
<!--Include without duplication-->
|
||||
<_OpenSansFont Include="wwwroot\Fonts\OpenSans-*.woff2" Exclude="@(Content)" />
|
||||
<Content Include="@(_OpenSansFont)" />
|
||||
</ItemGroup>
|
||||
</Target>
|
||||
|
||||
<Target Name="Delete sass/js compiler artifacts" AfterTargets="AfterBuild">
|
||||
|
||||
@ -10,8 +10,10 @@
|
||||
border-radius: $border-radius-pill;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btn-icon-alt {
|
||||
font-size: inherit;
|
||||
flex: 0 0 auto;
|
||||
@ -24,7 +26,7 @@
|
||||
background-color: transparent;
|
||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.075);
|
||||
background-color: rgba(0,0,0,.075)
|
||||
}
|
||||
&:focus-visible,
|
||||
&.focus {
|
||||
@ -39,19 +41,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@each $key, $val in $theme-colors {
|
||||
.btn-icon-alt.#{$key} {
|
||||
background-color: transparent;
|
||||
color: $val;
|
||||
&:hover {
|
||||
//background-color: lighten($val, 24);
|
||||
background-color: rgba($val, 0.1);
|
||||
background-color: rgba($val, .1);
|
||||
}
|
||||
&:focus-visible,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
color: set-color($val);
|
||||
background-color: rgba($val, 0.5);
|
||||
background-color: rgba($val, .5);
|
||||
box-shadow: 0 0 0 0.15rem lighten($val, 20);
|
||||
}
|
||||
&:active,
|
||||
@ -61,5 +65,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -60,28 +60,9 @@ $border-radius-btn: 100vw;
|
||||
&.active {
|
||||
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} {
|
||||
// @include btn();
|
||||
color: darken($val, 10);
|
||||
@ -131,8 +112,8 @@ $border-radius-btn: 100vw;
|
||||
|
||||
.btn-core {
|
||||
background-color: var(--bg-core-primary) !important;
|
||||
color: set-color (var(--bg-core-primary-lighten)) !important;
|
||||
//color: rgba(255,255,255,.85) !important;
|
||||
//color: set-color (var(--bg-core-primary-lighten)) !important;
|
||||
color: rgba(255,255,255,.85) !important;
|
||||
&:hover {
|
||||
background-color: var(--bg-core-primary-darken) !important;
|
||||
}
|
||||
@ -147,24 +128,6 @@ $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 {
|
||||
|
||||
@ -5,7 +5,7 @@ $box-padding: 0 0 0.25rem 0;
|
||||
|
||||
.card {
|
||||
background-color: var(--element-fg-core);
|
||||
|
||||
border: 1px solid var(--border-core);
|
||||
border-radius: $border-radius-lg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -13,109 +13,44 @@ $box-padding: 0 0 0.25rem 0;
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
max-height: 250px;
|
||||
z-index: 1;
|
||||
margin-bottom: .75rem;
|
||||
& img {
|
||||
object-fit: cover;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content-container {
|
||||
padding: 0.75rem 1rem;
|
||||
.card-container {
|
||||
padding: 0 .75rem .75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// .card-container > * {
|
||||
// //flex: 1;
|
||||
// }
|
||||
.card-container > * {
|
||||
//flex: 1;
|
||||
}
|
||||
|
||||
.card-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.75rem 1rem 0;
|
||||
margin: 0 0.75rem;
|
||||
padding: $box-padding;
|
||||
|
||||
& img {
|
||||
@ -124,7 +59,6 @@ $box-padding: 0 0 0.25rem 0;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
& .avatar-title {
|
||||
font-weight: 600;
|
||||
@ -142,14 +76,14 @@ $box-padding: 0 0 0.25rem 0;
|
||||
padding: $box-padding;
|
||||
|
||||
& .card-header-title {
|
||||
font-size: $font-size-md;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-core-hc);
|
||||
}
|
||||
|
||||
& .card-header-subhead {
|
||||
font-size: $base-font-size;
|
||||
line-height: 0.5;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
line-height: 0.5;
|
||||
color: var(--text-core-lc);
|
||||
}
|
||||
}
|
||||
@ -164,16 +98,7 @@ $box-padding: 0 0 0.25rem 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: end;
|
||||
z-index: 1;
|
||||
& .btn-content{
|
||||
margin: 0.5rem 0 .25rem;
|
||||
margin: 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;
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
|
||||
border-radius: .6rem;
|
||||
|
||||
}
|
||||
&:focus-within ~ .backdrop {
|
||||
|
||||
@ -1,144 +0,0 @@
|
||||
@use "../util" as *;
|
||||
@use "../globals" as *;
|
||||
|
||||
|
||||
.picker-container {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: 85%;
|
||||
width: 85%;
|
||||
padding: 1rem;
|
||||
z-index: $dropdown-zindex;
|
||||
background-color: var(--bg-core-primary-light);
|
||||
border-radius: calc($border-radius-lg *2 );
|
||||
box-shadow: $base-box-shadow, 0 0 0 100vw rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
|
||||
@include breakpoint(sm) {
|
||||
.picker-container {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
margin-top: .5rem;
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
box-shadow: $base-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
#picker-header {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
#picker-body {
|
||||
padding: 0 0.5rem 0.75rem;;
|
||||
}
|
||||
|
||||
|
||||
.picker-header-label {
|
||||
font-size: $font-size-sm;
|
||||
color: var(--text-core-lc);
|
||||
|
||||
}
|
||||
|
||||
.picker-header-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.picker-divider {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
margin: 0 0 .5rem 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid var(--text-core-vc);
|
||||
}
|
||||
|
||||
.picker-menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0.5rem -0.75rem 0.75rem;
|
||||
|
||||
}
|
||||
|
||||
.picker-grid-col-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.picker-grid-col-7 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
|
||||
.days{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: var(--text-core);
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color:transparent;
|
||||
font-size: .85rem;
|
||||
font-weight: 500;
|
||||
border-radius: 50%;
|
||||
// &:hover {
|
||||
// background-color:var(--bg-core-primary);
|
||||
// color: var(--text-core-hc);
|
||||
// }
|
||||
&:focus-visible,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background-color:var(--bg-core-primary-dark);
|
||||
color: #fafafa;
|
||||
}
|
||||
&.current {
|
||||
background-color:transparent;
|
||||
color: var(--bg-core-primary-dark);
|
||||
border: 1px solid var(--bg-core-primary-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
color: var(--text-core);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
background-color:transparent;
|
||||
border: 1px solid transparent;
|
||||
//padding: 0.3rem 1rem;
|
||||
font-size: .85rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
border-radius: 100vw;
|
||||
transition: all .15s ease-in-out;
|
||||
&:hover {
|
||||
background-color: var(--bg-core-primary);
|
||||
}
|
||||
&:focus-visible,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: var(--bg-core-primary-dark);
|
||||
color: #fafafa;
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,6 @@
|
||||
@use "../globals/" as *;
|
||||
@use "../util/" as *;
|
||||
|
||||
|
||||
|
||||
|
||||
.drop-down {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
@ -28,13 +25,13 @@
|
||||
@include breakpoint(sm) {
|
||||
.drop-down {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
top: 46px;
|
||||
left: 0;
|
||||
margin-top: 1rem;
|
||||
opacity: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
transform: none;
|
||||
border-radius: $border-radius-lg;
|
||||
border-radius: 0 0 $border-radius-lg $border-radius-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -12,6 +12,78 @@
|
||||
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");
|
||||
|
||||
@each $colCount in $gridcol {
|
||||
@ -240,8 +312,8 @@ $columns: 12;
|
||||
transition: all 0.5s ease-in;
|
||||
}
|
||||
|
||||
.data-grid-row-content.show .data-grid-collapse-cta i,
|
||||
.data-grid-row-content.show .data-grid-collapse-cta svg {
|
||||
.data-grid.show .data-grid-collapse-cta i,
|
||||
.data-grid.show .data-grid-collapse-cta svg {
|
||||
transform: rotate(180deg);
|
||||
transition: all 0.5s ease-in;
|
||||
}
|
||||
@ -292,7 +364,7 @@ overflow: hidden;
|
||||
|
||||
|
||||
.dots {
|
||||
--width: .85rem;
|
||||
--width: .75rem;
|
||||
--height: var(--width);
|
||||
|
||||
position: absolute;
|
||||
@ -304,17 +376,18 @@ overflow: hidden;
|
||||
.dot {
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
border-radius: $border-radius-pill;
|
||||
background-color: var(--bg-core-primary);
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-core-primary-lighten);
|
||||
display: inline-block;
|
||||
outline: 1px solidvar(--border-core);
|
||||
outline: 1px solid #fff;
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
|
||||
.dot.active,
|
||||
.dot.next {
|
||||
background-color: var(--bg-core-primary-darken);
|
||||
width: calc(var(--width) * 2);
|
||||
background-color: var(--bg-core-primary);
|
||||
outline: 2px solid var(--bg-core-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.dot.completed {
|
||||
|
||||
@ -16,4 +16,3 @@
|
||||
@forward "buttons-icons";
|
||||
@forward "dropdown";
|
||||
@forward "card";
|
||||
@forward "date-picker";
|
||||
@ -263,15 +263,6 @@ select {
|
||||
|
||||
|
||||
/*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{
|
||||
height: var(--height);
|
||||
display: flex;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@use "../globals/" as *;
|
||||
@use "../util/" as *;
|
||||
@use '../globals/' as *;
|
||||
@use '../util/' as *;
|
||||
|
||||
|
||||
.snackbar-group{
|
||||
position: fixed;
|
||||
@ -11,68 +12,40 @@
|
||||
overflow-y: auto;
|
||||
max-height: 100svh;
|
||||
//background:linear-gradient(to left,transparent, transparent, rgba(255,255,255,.15));
|
||||
// border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
// border-radius: 0.6rem;
|
||||
// backdrop-filter: blur(25px) opacity(0.5);
|
||||
transform: translateX(100%);
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
.snackbar-group.show {
|
||||
transform: translateX(0);
|
||||
border: 1px solid rgba(255,255,255,.25);
|
||||
border-radius: 0.6rem;
|
||||
backdrop-filter: blur(25px) opacity(0.5);
|
||||
}
|
||||
|
||||
.snackbar{
|
||||
width: 350px;
|
||||
//min-height: 60px;
|
||||
background-color: var(--bg-core-primary-light);
|
||||
background-color: rgba(255,255,255,.8);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 0 0.75rem 0.75rem;
|
||||
margin: 0 .75rem .75rem;
|
||||
padding: 1rem;
|
||||
border-radius: $border-radius-lg;
|
||||
filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.15));
|
||||
//transform: translateX(100%);
|
||||
}
|
||||
|
||||
.snackbar.slide-in {
|
||||
filter: drop-shadow(1px 2px 4px rgba(0,0,0,.15));
|
||||
transform: translateX(100%);
|
||||
animation: slidein 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.snackbar.slide-out {
|
||||
animation: slideout 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
0% {
|
||||
transform: translateX(110%);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideout {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(110%);
|
||||
}
|
||||
}
|
||||
|
||||
.snackbar:first-of-type{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.snackbar:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: $border-radius-lg;
|
||||
opacity: 0.3;
|
||||
opacity: .3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -132,22 +105,9 @@
|
||||
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{
|
||||
font-size: $font-size-sm;
|
||||
margin-left: 0.85rem;
|
||||
margin: 0 .85rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
@ -155,47 +115,31 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.snackbar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.snackbar-title{
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-600;
|
||||
color: $text-core-hc;
|
||||
}
|
||||
|
||||
.snackbar-recived {
|
||||
font-size: .75rem;
|
||||
font-weight: $font-weight-600;
|
||||
color: $text-core-vc;
|
||||
}
|
||||
|
||||
.snackbar-action {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
gap: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.snackbar-action .btn{
|
||||
font-size: 0.85rem;
|
||||
font-size: .85rem;
|
||||
text-transform: none;
|
||||
padding: 0.1rem 0.7rem;
|
||||
padding: .1rem .7rem;
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
|
||||
.snackbar-cta-icon:hover{
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background-color: rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
|
||||
.snackbar:hover .snackbar-cta-abs {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.snackbar-group{
|
||||
&.top{
|
||||
top: 0;
|
||||
@ -210,6 +154,7 @@
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
@include breakpoint(sm) {
|
||||
&.top{
|
||||
top: 0;
|
||||
@ -241,13 +186,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.snackbar{
|
||||
width: 90%;
|
||||
margin: 0 auto 0.75rem auto;
|
||||
margin: 0 auto .75rem auto;
|
||||
|
||||
|
||||
@include breakpoint(sm) {
|
||||
width: 50vw;
|
||||
margin: 0 0.75rem 0.75rem;
|
||||
margin: 0 .75rem .75rem;
|
||||
}
|
||||
|
||||
@include breakpoint(lg) {
|
||||
|
||||
@ -1,94 +0,0 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-LightItalic'), local('Open Sans Light Italic');
|
||||
src: url('./Fonts/OpenSans-LightItalic.eot');
|
||||
src: url('./Fonts/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-LightItalic.woff2') format('woff2'), url('./Fonts/OpenSans-LightItalic.woff') format('woff'), url('./Fonts/OpenSans-LightItalic.ttf') format('truetype'), url('./Fonts/OpenSans-LightItalic.svg#OpenSans-LightItalic') format('svg');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-ExtraBoldItalic'), local('Open Sans Extra Bold Italic');
|
||||
src: url('./Fonts/OpenSans-ExtraBoldItalic.eot');
|
||||
src: url('./Fonts/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'), url('./Fonts/OpenSans-ExtraBoldItalic.woff') format('woff'), url('./Fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'), url('./Fonts/OpenSans-ExtraBoldItalic.svg#OpenSans-ExtraBoldItalic') format('svg');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-Light'), local('Open Sans Light');
|
||||
src: url('./Fonts/OpenSans-Light.eot');
|
||||
src: url('./Fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-Light.woff2') format('woff2'), url('./Fonts/OpenSans-Light.woff') format('woff'), url('./Fonts/OpenSans-Light.ttf') format('truetype'), url('./Fonts/OpenSans-Light.svg#OpenSans-Light') format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-SemiBold'), local('Open Sans Semi Bold');
|
||||
src: url('./Fonts/OpenSans-SemiBold.eot');
|
||||
src: url('./Fonts/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-SemiBold.woff2') format('woff2'), url('./Fonts/OpenSans-SemiBold.woff') format('woff'), url('./Fonts/OpenSans-SemiBold.ttf') format('truetype'), url('./Fonts/OpenSans-SemiBold.svg#OpenSans-SemiBold') format('svg');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-Regular'), local('Open Sans Regular');
|
||||
src: url('./Fonts/OpenSans-Regular.eot');
|
||||
src: url('./Fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-Regular.woff2') format('woff2'), url('./Fonts/OpenSans-Regular.woff') format('woff'), url('./Fonts/OpenSans-Regular.ttf') format('truetype'), url('./Fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-BoldItalic'), local('Open Sans Bold Italic');
|
||||
src: url('./Fonts/OpenSans-BoldItalic.eot');
|
||||
src: url('./Fonts/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-BoldItalic.woff2') format('woff2'), url('./Fonts/OpenSans-BoldItalic.woff') format('woff'), url('./Fonts/OpenSans-BoldItalic.ttf') format('truetype'), url('./Fonts/OpenSans-BoldItalic.svg#OpenSans-BoldItalic') format('svg');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-SemiBoldItalic'), local('Open Sans Semi Bold Italic');
|
||||
src: url('./Fonts/OpenSans-SemiBoldItalic.eot');
|
||||
src: url('./Fonts/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-SemiBoldItalic.woff2') format('woff2'), url('./Fonts/OpenSans-SemiBoldItalic.woff') format('woff'), url('./Fonts/OpenSans-SemiBoldItalic.ttf') format('truetype'), url('./Fonts/OpenSans-SemiBoldItalic.svg#OpenSans-SemiBoldItalic') format('svg');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-Italic'), local('Open Sans Italic');
|
||||
src: url('./Fonts/OpenSans-Italic.eot');
|
||||
src: url('./Fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-Italic.woff2') format('woff2'), url('./Fonts/OpenSans-Italic.woff') format('woff'), url('./Fonts/OpenSans-Italic.ttf') format('truetype'), url('./Fonts/OpenSans-Italic.svg#OpenSans-Italic') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-ExtraBold'), local('Open Sans Extra Bold');
|
||||
src: url('./Fonts/OpenSans-ExtraBold.eot');
|
||||
src: url('./Fonts/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-ExtraBold.woff2') format('woff2'), url('./Fonts/OpenSans-ExtraBold.woff') format('woff'), url('./Fonts/OpenSans-ExtraBold.ttf') format('truetype'), url('./Fonts/OpenSans-ExtraBold.svg#OpenSans-ExtraBold') format('svg');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src:local('OpenSans-Bold'), local('Open Sans Bold');
|
||||
src: url('./Fonts/OpenSans-Bold.eot');
|
||||
src: url('./Fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('./Fonts/OpenSans-Bold.woff2') format('woff2'), url('./Fonts/OpenSans-Bold.woff') format('woff'), url('./Fonts/OpenSans-Bold.ttf') format('truetype'), url('./Fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,4 +2,3 @@
|
||||
@forward 'variables';
|
||||
@forward 'core';
|
||||
@forward 'typography';
|
||||
@forward 'fonts';
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user