parent
6cd9089f6b
commit
b2e42c051b
@ -1 +1 @@
|
|||||||
Subproject commit dd40532a0ff03237407de9635c7211c5e1af5807
|
Subproject commit cc259dfc18c4ad6989898fa813e281b9249c3bd3
|
||||||
@ -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>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
CalendarStart = CalendarStart.AddDays(1);
|
@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> *@
|
||||||
|
|
||||||
|
|
||||||
|
@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>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,203 +1,256 @@
|
|||||||
@use '../globals/' as *;
|
@use "../globals/" as *;
|
||||||
@use '../util/' as *;
|
@use "../util/" as *;
|
||||||
|
|
||||||
|
.snackbar-group {
|
||||||
|
position: fixed;
|
||||||
|
z-index: $snackbar-zindex;
|
||||||
|
// top: 0;
|
||||||
|
// right: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 100svh;
|
||||||
|
//background:linear-gradient(to left,transparent, transparent, rgba(255,255,255,.15));
|
||||||
|
// border: 1px solid rgba(255, 255, 255, 0.25);
|
||||||
|
// border-radius: 0.6rem;
|
||||||
|
// backdrop-filter: blur(25px) opacity(0.5);
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: $transition;
|
||||||
|
}
|
||||||
|
|
||||||
.snackbar-group{
|
.snackbar-group.show {
|
||||||
position: fixed;
|
transform: translateX(0);
|
||||||
z-index: $snackbar-zindex;
|
}
|
||||||
// top: 0;
|
|
||||||
// right: 0;
|
.snackbar {
|
||||||
display: flex;
|
width: 350px;
|
||||||
flex-direction: column;
|
//min-height: 60px;
|
||||||
overflow-y: auto;
|
background-color: var(--bg-core-primary-light);
|
||||||
max-height: 100svh;
|
background-color: rgba(255,255,255,.8);
|
||||||
//background:linear-gradient(to left,transparent, transparent, rgba(255,255,255,.15));
|
backdrop-filter: blur(10px);
|
||||||
border: 1px solid rgba(255,255,255,.25);
|
margin: 0 0.75rem 0.75rem;
|
||||||
border-radius: 0.6rem;
|
padding: 1rem;
|
||||||
backdrop-filter: blur(25px) opacity(0.5);
|
border-radius: $border-radius-lg;
|
||||||
|
filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.15));
|
||||||
|
//transform: translateX(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar{
|
.snackbar.slide-in {
|
||||||
width: 350px;
|
animation: slidein 0.3s ease-in-out forwards;
|
||||||
//min-height: 60px;
|
}
|
||||||
background-color: var(--bg-core-primary-light);
|
|
||||||
margin: 0 .75rem .75rem;
|
.snackbar.slide-out {
|
||||||
padding: 1rem;
|
animation: slideout 0.3s ease-in-out forwards;
|
||||||
border-radius: $border-radius-lg;
|
|
||||||
filter: drop-shadow(1px 2px 4px rgba(0,0,0,.15));
|
|
||||||
transform: translateX(100%);
|
|
||||||
animation: slidein 0.3s ease-in-out forwards;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slidein {
|
@keyframes slidein {
|
||||||
100%{
|
0% {
|
||||||
transform: translateX(0);
|
transform: translateX(110%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.snackbar:first-of-type{
|
@keyframes slideout {
|
||||||
margin-top: 1rem;
|
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;
|
||||||
|
background-color: var(--bg-core-primary);
|
||||||
|
height: var(--height);
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.snackbar-leading-icon{
|
.snackbar-leading-icon img {
|
||||||
display: flex;
|
object-fit: cover;
|
||||||
align-items: center;
|
height: var(--height);
|
||||||
justify-content: center;
|
aspect-ratio: 1 / 1;
|
||||||
border-radius: $border-radius-pill;
|
}
|
||||||
background-color: var(--bg-core-primary);
|
|
||||||
height: var(--height);
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.snackbar-leading-icon img{
|
.snackbar-cta-icon {
|
||||||
object-fit: cover;
|
display: flex;
|
||||||
height: var(--height);
|
align-items: center;
|
||||||
aspect-ratio: 1 / 1;
|
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-icon{
|
.snackbar-cta-abs {
|
||||||
display: flex;
|
position: absolute;
|
||||||
align-items: center;
|
opacity: 0;
|
||||||
justify-content: center;
|
left: -13px;
|
||||||
border-radius: $border-radius-pill;
|
top: -13px;
|
||||||
background-color: transparent;
|
box-shadow: $base-box-shadow;
|
||||||
cursor: pointer;
|
transition: $transition;
|
||||||
height: var(--height);
|
}
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.snackbar-message{
|
.snackbar-cta-abs .btn-icon {
|
||||||
font-size: $font-size-sm;
|
padding: 4px;
|
||||||
margin: 0 .85rem;
|
}
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: start;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.snackbar-title{
|
.snackbar-message {
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
font-weight: $font-weight-600;
|
margin-left: 0.85rem;
|
||||||
color: $text-core-hc;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.snackbar-action {
|
.snackbar-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
justify-content: space-between;
|
||||||
gap: .5rem;
|
width: 100%;
|
||||||
margin-top: 0.5rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.snackbar-action .btn{
|
.snackbar-title {
|
||||||
font-size: .85rem;
|
font-size: $font-size-sm;
|
||||||
text-transform: none;
|
font-weight: $font-weight-600;
|
||||||
padding: .1rem .7rem;
|
color: $text-core-hc;
|
||||||
border-radius: 0.35rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.snackbar-cta-icon:hover{
|
.snackbar-recived {
|
||||||
background-color: rgba(0,0,0,.15);
|
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-group{
|
.snackbar:hover .snackbar-cta-abs {
|
||||||
&.top{
|
opacity: .9;
|
||||||
top: 0;
|
}
|
||||||
|
|
||||||
|
.snackbar-group {
|
||||||
|
&.top {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
&.bottom {
|
||||||
|
bottom: 150px;
|
||||||
|
}
|
||||||
|
&.left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(sm) {
|
||||||
|
&.top {
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
&.right{
|
&.right {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
&.bottom{
|
&.bottom {
|
||||||
bottom: 150px;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
&.left{
|
&.left {
|
||||||
left: 0;
|
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) {
|
@include breakpoint(sm) {
|
||||||
&.top{
|
width: 50vw;
|
||||||
top: 0;
|
margin: 0 0.75rem 0.75rem;
|
||||||
}
|
|
||||||
&.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 .75rem auto;
|
|
||||||
|
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
|
||||||
width: 50vw;
|
|
||||||
margin: 0 .75rem .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(lg) {
|
|
||||||
width: 350px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include breakpoint(lg) {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue