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"
|
@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">
|
||||||
@ -212,25 +209,6 @@
|
|||||||
<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>
|
||||||
@ -567,13 +545,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group ">
|
<div class="form-group error">
|
||||||
<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" />
|
||||||
@ -585,7 +561,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 d-sm-none"></div>
|
<div class="backdrop"></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>
|
||||||
@ -599,15 +575,6 @@
|
|||||||
|
|
||||||
</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>
|
||||||
@ -728,9 +695,9 @@
|
|||||||
|
|
||||||
</div>
|
</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-->
|
<!--dense select collapse-->
|
||||||
<div class="data-grid-row-content @NavClosed">
|
<div class="data-grid-row-content">
|
||||||
<!--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">
|
||||||
@ -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>
|
<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 @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">
|
<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" />
|
<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"> <!--optional media contnent-->
|
<div class="card-media">
|
||||||
<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>
|
||||||
@ -903,26 +868,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-content-container"> <!--main card contnent-->
|
<div class="card-container">
|
||||||
|
|
||||||
|
|
||||||
<div class="card-header">
|
<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>
|
<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="collapsed @NavClosed"> <!--optional collapsed contnent-->
|
<div class="card-actions">
|
||||||
<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>
|
||||||
@ -932,7 +895,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
@ -949,7 +911,7 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- 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-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
@ -1095,42 +1057,31 @@
|
|||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class="snackbar-group bottom right"> <!--set position top, right, bottom, left, class show when group is visible-->
|
<div class="snackbar-group d-none bottom right"> <!--set position top, right, bottom, left -->
|
||||||
<div class="snackbar slide-in success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
|
<div class="snackbar 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 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-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 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-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,6 +1,5 @@
|
|||||||
@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>
|
||||||
@ -22,28 +21,7 @@
|
|||||||
|
|
||||||
<p>Izbran datum je: @date</p>
|
<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 {
|
@code {
|
||||||
DateTime date = DateTime.Today;
|
DateTime date = DateTime.Today;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,7 +1,4 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
namespace Connected.Components;
|
||||||
|
|
||||||
namespace Connected.Components;
|
|
||||||
|
|
||||||
public partial class Chip
|
public partial class Chip
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,121 +1,130 @@
|
|||||||
@using System.Globalization;
|
@using System.Globalization;
|
||||||
|
|
||||||
@if (loaded)
|
@if (loaded)
|
||||||
{
|
{
|
||||||
<div id="picker">
|
<div id="picker" class="m-2" style="width:270px; height:auto;">
|
||||||
<div class="form-group">
|
<!-- DatePicker input !can be edited manualy -->
|
||||||
<input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
|
<div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
@if (Shown)
|
@if (Shown)
|
||||||
{
|
{
|
||||||
<!-- DatePicker header -->
|
<!-- DatePicker header -->
|
||||||
<div class="picker-container">
|
<div id="picker_header" class="bg-info" style="height:80px;">
|
||||||
<div id="picker-header">
|
<div class="text-medium p-1">
|
||||||
|
@SelectedDate.Year.ToString()
|
||||||
<div class="picker-header-label">Select date</div>
|
</div>
|
||||||
<div class="picker-header-title">
|
<div class="text-large p-1">
|
||||||
@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">
|
<div id="picker_body" class="bg-white" style="height:auto;">
|
||||||
@switch (Selecting)
|
@switch (Selecting)
|
||||||
{
|
{
|
||||||
case Selecting.Years:
|
case Selecting.Years:
|
||||||
{
|
{
|
||||||
|
<div class="@NavBarClass" style="@NavBarStyle">
|
||||||
<div class="picker-menu">
|
<div class="chip-group-content d-inline-flex">
|
||||||
<button class="btn btn-icon-alt ">
|
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
|
||||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
</div>
|
||||||
</button>
|
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||||
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
|
<!--<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 ">
|
<div class="chip-group-content d-inline-flex">
|
||||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
|
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
|
||||||
</button>
|
</div>
|
||||||
</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;
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
if (SelectedDate.Year - i % 3 == 0)
|
||||||
|
{
|
||||||
|
<br />
|
||||||
|
}
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case Selecting.Months:
|
case Selecting.Months:
|
||||||
{
|
{
|
||||||
<div class="picker-menu">
|
<div class="@NavBarClass" style="@NavBarStyle">
|
||||||
<button class="btn btn-icon-alt ">
|
<div class="chip-group-content d-inline-flex">
|
||||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
|
||||||
</button>
|
</div>
|
||||||
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
|
|
||||||
<button class="btn btn-icon-alt ">
|
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
|
|
||||||
</button>
|
<!--<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>
|
||||||
<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;
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
if (i % 3 == 0)
|
||||||
|
{
|
||||||
|
<br />
|
||||||
|
}
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case (Selecting.Days):
|
case (Selecting.Days):
|
||||||
{
|
{
|
||||||
<div class="picker-menu">
|
<div class="@NavBarClass" style="@NavBarStyle">
|
||||||
<button class="btn btn-icon-alt ">
|
<div class="chip-group-content d-inline-flex">
|
||||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></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" Click="(()=>NavBarClick())" />
|
|
||||||
</button>
|
|
||||||
</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++)
|
@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)
|
@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()
|
@Date.Day.ToString()
|
||||||
</button>
|
</div>
|
||||||
|
</a>
|
||||||
|
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
||||||
|
{
|
||||||
|
<br />
|
||||||
|
}
|
||||||
CalendarStart = CalendarStart.AddDays(1);
|
CalendarStart = CalendarStart.AddDays(1);
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</div>
|
@if (ShowBottomBar)
|
||||||
|
{
|
||||||
<!-- Bottom bar -->
|
<!-- Bottom bar -->
|
||||||
<div class="btn-content justify-flex-end my-0">
|
<div class="p-2" style="@NavBarStyle">
|
||||||
<button type="button" class="btn btn-sm btn-secondary" @onclick="(()=>ClosePicker())">Cancel</button>
|
<Button Class="btn-sm" OnClick="(()=>Shown=!Shown)">X</Button>
|
||||||
<button type="button" class="btn btn-sm btn-core" @onclick="(()=>ClosePicker(false))">OK</button>
|
<Button Class="btn-sm" OnClick="(async () => await SetDate(SelectedDate, true))">OK</Button>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -18,8 +18,6 @@ public partial class DatePicker
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public DateTime SelectedDate { get; set; } = DateTime.Today;
|
public DateTime SelectedDate { get; set; } = DateTime.Today;
|
||||||
|
|
||||||
private DateTime _InitialDate { get; set; }
|
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public DateTime? SelectedEndDate { get; set; } = null;
|
public DateTime? SelectedEndDate { get; set; } = null;
|
||||||
|
|
||||||
@ -55,13 +53,14 @@ public partial class DatePicker
|
|||||||
}
|
}
|
||||||
private bool Shown { get; set; } = false;
|
private bool Shown { get; set; } = false;
|
||||||
|
|
||||||
public async Task SetDate(DateTime Date)
|
public async Task SetDate(DateTime Date, bool HideOnSet=false)
|
||||||
{
|
{
|
||||||
SelectedDate = Date;
|
SelectedDate = Date;
|
||||||
SetStartStop();
|
SetStartStop();
|
||||||
if (CloseOnDateSelect)
|
if (CloseOnDateSelect)
|
||||||
Shown = false;
|
Shown = false;
|
||||||
await SelectedDateChanged.InvokeAsync(SelectedDate);
|
await SelectedDateChanged.InvokeAsync(SelectedDate);
|
||||||
|
if (HideOnSet) Shown = false;
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,6 +82,48 @@ public partial class DatePicker
|
|||||||
StateHasChanged();
|
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()
|
public void SetStartStop()
|
||||||
{
|
{
|
||||||
CalendarStart = SelectedDate;
|
CalendarStart = SelectedDate;
|
||||||
@ -113,17 +154,17 @@ public partial class DatePicker
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public string DateChipClass(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 "d-none";
|
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 = "days current";
|
if (date.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info";
|
||||||
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+"days active";
|
return result+" bg-info text-light";
|
||||||
else
|
else
|
||||||
return result+" ";
|
return result+" bg-core text-dark";
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
@ -147,7 +188,6 @@ public partial class DatePicker
|
|||||||
protected override async Task OnInitializedAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
SelectedDate = DateTime.Today;
|
SelectedDate = DateTime.Today;
|
||||||
_InitialDate=SelectedDate;
|
|
||||||
SetStartStop();
|
SetStartStop();
|
||||||
loaded = true;
|
loaded = true;
|
||||||
await base.OnInitializedAsync();
|
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)
|
private async Task NavBarClick(bool forward = true)
|
||||||
{
|
{
|
||||||
int multiplier = 1;
|
int multiplier = 1;
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="btn-box text-right my-5 d-flex justify-space-between">
|
<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>
|
<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="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>
|
<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)" />
|
<_NewCompiledCssFiles Include="wwwroot\Connected.Components.min.css" Exclude="@(Content)" />
|
||||||
<Content Include="@(_NewCompiledCssFiles)" />
|
<Content Include="@(_NewCompiledCssFiles)" />
|
||||||
</ItemGroup>
|
</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>
|
||||||
|
|
||||||
<Target Name="Delete sass/js compiler artifacts" AfterTargets="AfterBuild">
|
<Target Name="Delete sass/js compiler artifacts" AfterTargets="AfterBuild">
|
||||||
|
|||||||
@ -10,8 +10,10 @@
|
|||||||
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;
|
||||||
@ -24,7 +26,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, 0.075);
|
background-color: rgba(0,0,0,.075)
|
||||||
}
|
}
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&.focus {
|
&.focus {
|
||||||
@ -37,21 +39,23 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: var(--bg-core-primary);
|
background-color: var(--bg-core-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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, 0.1);
|
background-color: rgba($val, .1);
|
||||||
}
|
}
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&.focus {
|
&.focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: set-color($val);
|
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);
|
box-shadow: 0 0 0 0.15rem lighten($val, 20);
|
||||||
}
|
}
|
||||||
&:active,
|
&:active,
|
||||||
@ -61,5 +65,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -60,28 +60,9 @@ $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);
|
||||||
@ -131,8 +112,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;
|
||||||
}
|
}
|
||||||
@ -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 {
|
.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,109 +13,44 @@ $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: 1rem;
|
top: 0.75rem;
|
||||||
right: 1rem;
|
right: 0.75rem;
|
||||||
z-index: 2;
|
z-index: 1;
|
||||||
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;
|
||||||
z-index: 1;
|
margin-bottom: .75rem;
|
||||||
& img {
|
& img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content-container {
|
.card-container {
|
||||||
padding: 0.75rem 1rem;
|
padding: 0 .75rem .75rem;
|
||||||
|
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.75rem 1rem 0;
|
margin: 0 0.75rem;
|
||||||
padding: $box-padding;
|
padding: $box-padding;
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
@ -124,7 +59,6 @@ $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;
|
||||||
@ -142,14 +76,14 @@ $box-padding: 0 0 0.25rem 0;
|
|||||||
padding: $box-padding;
|
padding: $box-padding;
|
||||||
|
|
||||||
& .card-header-title {
|
& .card-header-title {
|
||||||
font-size: $font-size-md;
|
font-size: 1.5rem;
|
||||||
color: var(--text-core-hc);
|
color: var(--text-core-hc);
|
||||||
}
|
}
|
||||||
|
|
||||||
& .card-header-subhead {
|
& .card-header-subhead {
|
||||||
font-size: $base-font-size;
|
font-size: 1.05rem;
|
||||||
line-height: 0.5;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
line-height: 0.5;
|
||||||
color: var(--text-core-lc);
|
color: var(--text-core-lc);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -163,17 +97,8 @@ $box-padding: 0 0 0.25rem 0;
|
|||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
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,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 "../globals/" as *;
|
||||||
@use "../util/" as *;
|
@use "../util/" as *;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.drop-down {
|
.drop-down {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -28,13 +25,13 @@
|
|||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
.drop-down {
|
.drop-down {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: auto;
|
top: 46px;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-top: 1rem;
|
opacity: 0;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transform: none;
|
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-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 {
|
||||||
@ -240,8 +312,8 @@ $columns: 12;
|
|||||||
transition: all 0.5s ease-in;
|
transition: all 0.5s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-grid-row-content.show .data-grid-collapse-cta i,
|
.data-grid.show .data-grid-collapse-cta i,
|
||||||
.data-grid-row-content.show .data-grid-collapse-cta svg {
|
.data-grid.show .data-grid-collapse-cta svg {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
transition: all 0.5s ease-in;
|
transition: all 0.5s ease-in;
|
||||||
}
|
}
|
||||||
@ -292,7 +364,7 @@ overflow: hidden;
|
|||||||
|
|
||||||
|
|
||||||
.dots {
|
.dots {
|
||||||
--width: .85rem;
|
--width: .75rem;
|
||||||
--height: var(--width);
|
--height: var(--width);
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -304,17 +376,18 @@ overflow: hidden;
|
|||||||
.dot {
|
.dot {
|
||||||
width: var(--width);
|
width: var(--width);
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
border-radius: $border-radius-pill;
|
border-radius: 50%;
|
||||||
background-color: var(--bg-core-primary);
|
background-color: var(--bg-core-primary-lighten);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
outline: 1px solidvar(--border-core);
|
outline: 1px solid #fff;
|
||||||
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-darken);
|
background-color: var(--bg-core-primary);
|
||||||
width: calc(var(--width) * 2);
|
outline: 2px solid var(--bg-core-primary);
|
||||||
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot.completed {
|
.dot.completed {
|
||||||
|
|||||||
@ -16,4 +16,3 @@
|
|||||||
@forward "buttons-icons";
|
@forward "buttons-icons";
|
||||||
@forward "dropdown";
|
@forward "dropdown";
|
||||||
@forward "card";
|
@forward "card";
|
||||||
@forward "date-picker";
|
|
||||||
@ -257,21 +257,12 @@ select {
|
|||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group-alt:focus-within {
|
.form-group-alt:focus-within {
|
||||||
background-color: var(--bg-core-primary-lighten);
|
background-color: var(--bg-core-primary-lighten);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*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,7 +1,8 @@
|
|||||||
@use "../globals/" as *;
|
@use '../globals/' as *;
|
||||||
@use "../util/" as *;
|
@use '../util/' as *;
|
||||||
|
|
||||||
.snackbar-group {
|
|
||||||
|
.snackbar-group{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: $snackbar-zindex;
|
z-index: $snackbar-zindex;
|
||||||
// top: 0;
|
// top: 0;
|
||||||
@ -11,68 +12,40 @@
|
|||||||
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, 0.25);
|
border: 1px solid rgba(255,255,255,.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 {
|
.snackbar{
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
||||||
background-color: rgba(255,255,255,.8);
|
margin: 0 .75rem .75rem;
|
||||||
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, 0.15));
|
filter: drop-shadow(1px 2px 4px rgba(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% {
|
100%{
|
||||||
transform: translateX(110%);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slideout {
|
.snackbar:first-of-type{
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(110%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 0.3;
|
opacity: .3;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -103,7 +76,7 @@
|
|||||||
//align-items: center;
|
//align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.snackbar-leading-icon {
|
.snackbar-leading-icon{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -114,13 +87,13 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-leading-icon img {
|
.snackbar-leading-icon img{
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-cta-icon {
|
.snackbar-cta-icon{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -129,25 +102,12 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
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 {
|
.snackbar-message{
|
||||||
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;
|
font-size: $font-size-sm;
|
||||||
margin-left: 0.85rem;
|
margin: 0 .85rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
@ -155,102 +115,89 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-header {
|
.snackbar-title{
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 0.5rem;
|
gap: .5rem;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-action .btn {
|
.snackbar-action .btn{
|
||||||
font-size: 0.85rem;
|
font-size: .85rem;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
padding: 0.1rem 0.7rem;
|
padding: .1rem .7rem;
|
||||||
border-radius: 0.35rem;
|
border-radius: 0.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar-cta-icon:hover {
|
.snackbar-cta-icon:hover{
|
||||||
background-color: rgba(0, 0, 0, 0.15);
|
background-color: rgba(0,0,0,.15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar:hover .snackbar-cta-abs {
|
.snackbar-group{
|
||||||
opacity: .9;
|
&.top{
|
||||||
}
|
|
||||||
|
|
||||||
.snackbar-group {
|
|
||||||
&.top {
|
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
&.right {
|
&.right{
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
&.bottom {
|
&.bottom{
|
||||||
bottom: 150px;
|
bottom: 150px;
|
||||||
}
|
}
|
||||||
&.left {
|
&.left{
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
&.top {
|
&.top{
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
&.right {
|
&.right{
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
&.bottom {
|
&.bottom{
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
&.left {
|
&.left{
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(lg) {
|
@include breakpoint(lg) {
|
||||||
&.top {
|
&.top{
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
&.right {
|
&.right{
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
&.bottom {
|
&.bottom{
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
&.left {
|
&.left{
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar {
|
|
||||||
|
.snackbar{
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 0 auto 0.75rem auto;
|
margin: 0 auto .75rem auto;
|
||||||
|
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
margin: 0 0.75rem 0.75rem;
|
margin: 0 .75rem .75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(lg) {
|
@include breakpoint(lg) {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -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 'variables';
|
||||||
@forward 'core';
|
@forward 'core';
|
||||||
@forward 'typography';
|
@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