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