parent
6cd9089f6b
commit
b2e42c051b
@ -1 +1 @@
|
||||
Subproject commit dd40532a0ff03237407de9635c7211c5e1af5807
|
||||
Subproject commit cc259dfc18c4ad6989898fa813e281b9249c3bd3
|
||||
@ -1,109 +1,177 @@
|
||||
@using System.Globalization;
|
||||
|
||||
|
||||
|
||||
@if (loaded)
|
||||
{
|
||||
<div id="picker" class="m-2" style="width:270px; height:auto;">
|
||||
<div id="picker">
|
||||
|
||||
<!-- 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)
|
||||
{
|
||||
{
|
||||
<!-- DatePicker header -->
|
||||
<div id="picker_header" class="bg-info" style="height:80px;">
|
||||
<div class="text-medium p-1">
|
||||
<div class="picker-container">
|
||||
<div id="picker-header">
|
||||
@* <div class="text-medium">
|
||||
@SelectedDate.Year.ToString()
|
||||
</div>
|
||||
<div class="text-large p-1">
|
||||
</div> *@
|
||||
<div class="picker-header-label">Select date</div>
|
||||
<div class="picker-header-title">
|
||||
@SelectedDate.ToString("ddd, " + Format)
|
||||
</div>
|
||||
</div>
|
||||
<div class="picker-divider"></div>
|
||||
<!-- DatePicker body -->
|
||||
<div id="picker_body" class="bg-white" style="height:auto;">
|
||||
<div id="picker-body">
|
||||
@switch (Selecting)
|
||||
{
|
||||
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="d-inline-block" style="width:70%;text-align:center" @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>
|
||||
|
||||
<div class="picker-menu">
|
||||
<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.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>
|
||||
@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)
|
||||
<div class="picker-grid-col-3 gap-3">
|
||||
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
|
||||
{
|
||||
<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;
|
||||
}
|
||||
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="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
|
||||
|
||||
|
||||
<div class="picker-menu">
|
||||
<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>
|
||||
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
|
||||
{
|
||||
int m = i;
|
||||
<a href="#" @onclick="@(()=>SetMonth(m))">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
</a>
|
||||
if (i % 3 == 0)
|
||||
{
|
||||
<br />
|
||||
}
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
case (Selecting.Days):
|
||||
{
|
||||
<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.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="picker-menu">
|
||||
<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.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>
|
||||
|
||||
@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))
|
||||
<div class="picker-grid-col-7 gap-3">
|
||||
@for (int i = 0; i < 7; i++)
|
||||
|
||||
{
|
||||
<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> *@
|
||||
|
||||
|
||||
@Date.Day.ToString()
|
||||
|
||||
</button>
|
||||
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
||||
{
|
||||
@* <br /> *@
|
||||
}
|
||||
|
||||
CalendarStart = CalendarStart.AddDays(1);
|
||||
}
|
||||
CalendarStart = CalendarStart.AddDays(1);
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</div>
|
||||
<!-- 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>
|
||||
}
|
||||
|
||||
@ -1,203 +1,256 @@
|
||||
@use '../globals/' as *;
|
||||
@use '../util/' as *;
|
||||
@use "../globals/" 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{
|
||||
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,.25);
|
||||
border-radius: 0.6rem;
|
||||
backdrop-filter: blur(25px) opacity(0.5);
|
||||
.snackbar-group.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.snackbar {
|
||||
width: 350px;
|
||||
//min-height: 60px;
|
||||
background-color: var(--bg-core-primary-light);
|
||||
background-color: rgba(255,255,255,.8);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 0 0.75rem 0.75rem;
|
||||
padding: 1rem;
|
||||
border-radius: $border-radius-lg;
|
||||
filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.15));
|
||||
//transform: translateX(100%);
|
||||
}
|
||||
|
||||
.snackbar{
|
||||
width: 350px;
|
||||
//min-height: 60px;
|
||||
background-color: var(--bg-core-primary-light);
|
||||
margin: 0 .75rem .75rem;
|
||||
padding: 1rem;
|
||||
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;
|
||||
.snackbar.slide-in {
|
||||
animation: slidein 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
100%{
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.snackbar.slide-out {
|
||||
animation: slideout 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.snackbar:first-of-type{
|
||||
margin-top: 1rem;
|
||||
@keyframes slidein {
|
||||
0% {
|
||||
transform: translateX(110%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideout {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(110%);
|
||||
}
|
||||
}
|
||||
|
||||
.snackbar:first-of-type {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.snackbar:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: $border-radius-lg;
|
||||
opacity: .3;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: $border-radius-lg;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.snackbar.danger:after,
|
||||
.snackbar.danger .snackbar-leading-icon {
|
||||
background-color: $danger;
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.snackbar.warning:after,
|
||||
.snackbar.warning .snackbar-leading-icon {
|
||||
background-color: $warning;
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.snackbar.success:after,
|
||||
.snackbar.success .snackbar-leading-icon {
|
||||
background-color: $success;
|
||||
.snackbar.success .snackbar-leading-icon {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.snackbar.info:after,
|
||||
.snackbar.info .snackbar-leading-icon {
|
||||
background-color: $info;
|
||||
.snackbar.info .snackbar-leading-icon {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
.snackbar-content {
|
||||
--height: 2rem;
|
||||
--height: 2rem;
|
||||
|
||||
display: flex;
|
||||
//align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.snackbar-leading-icon {
|
||||
display: flex;
|
||||
align-items: 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 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-cta-abs {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: -13px;
|
||||
top: -13px;
|
||||
box-shadow: $base-box-shadow;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
.snackbar-cta-abs .btn-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.snackbar-message {
|
||||
font-size: $font-size-sm;
|
||||
margin-left: 0.85rem;
|
||||
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;
|
||||
//align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.snackbar-leading-icon{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $border-radius-pill;
|
||||
background-color: var(--bg-core-primary);
|
||||
height: var(--height);
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
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;
|
||||
}
|
||||
|
||||
.snackbar-leading-icon img{
|
||||
object-fit: cover;
|
||||
height: var(--height);
|
||||
aspect-ratio: 1 / 1;
|
||||
&.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
&.bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.snackbar-message{
|
||||
font-size: $font-size-sm;
|
||||
margin: 0 .85rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.snackbar-title{
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-600;
|
||||
color: $text-core-hc;
|
||||
@include breakpoint(lg) {
|
||||
&.top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.snackbar-action {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
&.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.snackbar-action .btn{
|
||||
font-size: .85rem;
|
||||
text-transform: none;
|
||||
padding: .1rem .7rem;
|
||||
border-radius: 0.35rem;
|
||||
&.bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.snackbar-cta-icon:hover{
|
||||
background-color: rgba(0,0,0,.15);
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.snackbar-group{
|
||||
&.top{
|
||||
top: 0;
|
||||
}
|
||||
&.right{
|
||||
right: 0;
|
||||
}
|
||||
&.bottom{
|
||||
bottom: 150px;
|
||||
}
|
||||
&.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(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 .75rem auto;
|
||||
|
||||
|
||||
@include breakpoint(sm) {
|
||||
width: 50vw;
|
||||
margin: 0 .75rem .75rem;
|
||||
}
|
||||
|
||||
@include breakpoint(lg) {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
@include breakpoint(lg) {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@forward 'reset';
|
||||
@forward 'variables';
|
||||
@forward 'core';
|
||||
@forward 'typography';
|
||||
@forward 'typography';
|
||||
@forward 'fonts';
|
||||
Loading…
Reference in new issue