Connected
/
Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes in (chip, buttons, dropdown grid, inputs, snackbar)

Browse Source
features/rewrite/grid1
Janko Jordan 2 years ago
parent 6cd9089f6b
commit b2e42c051b
17 changed files with 678 additions and 457 deletions
Show Stats Download Patch File Download Diff File

2
dependencies/Connected vendored

@ -1 +1 @@
Subproject commit dd40532a0ff03237407de9635c7211c5e1af5807 Subproject commit cc259dfc18c4ad6989898fa813e281b9249c3bd3

99
src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
Unescape View File

@ -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,26 +874,28 @@
<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>
<button @onclick="ToggleNav" class="btn btn-white btn-icon collapse"> <!--optional button for toggle collapsed contnent-->
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon" />
</button>
</div> </div>
<div class="card-media"> <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>
@ -868,24 +903,26 @@
</div> </div>
</div> </div>
<div class="card-container"> <div class="card-content-container"> <!--main card contnent-->
<div class="card-header"> <div class="card-header">
<div class="card-header-title"> <p class="card-header-title">Card Title</p>
<p class="typography typography-body1">Card Title</p>
<p class="card-header-subhead">Card Subhead</p> <p class="card-header-subhead">Card Subhead</p>
</div> </div>
</div>
<div class="card-content"> <div class="card-content">
<p class="typography typography-body2">Cards contain content and actions that relate information about a subject.</p> <p class="typography typography-body2">Cards contain content and actions that relate information about a subject.</p>
</div> </div>
<div class="card-actions"> <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"> <div class="btn-content">
<button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleNav">Close</button> <button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleNav">Close</button>
<button type="button" class="btn btn-sm btn-core">Understood</button> <button type="button" class="btn btn-sm btn-core">Understood</button>
@ -895,6 +932,7 @@
</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-header">
<div class="snackbar-title">Snackbar banner title</div> <div class="snackbar-title">Snackbar banner title</div>
<div class="snackbar-recived">17:22</div>
</div>
<div class="snackbar-label">Snackbar banner message text </div> <div class="snackbar-label">Snackbar banner message text </div>
</div> </div>
<div class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div> @* <div class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div> *@
<div class="snackbar-cta-abs">
<button class="btn btn-white btn-icon">
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
</button>
</div>
</div> </div>
</div> </div>
<div class="snackbar 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-header">
<div class="snackbar-title">Snackbar dialog title</div> <div class="snackbar-title">Snackbar dialog title</div>
<div class="snackbar-recived">17:22</div>
</div>
<div class="snackbar-label">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus</div> <div class="snackbar-label">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus</div>
<div class="snackbar-action"> <div class="snackbar-action">
<div class="btn btn-secondary">Snackbar action</div> <div class="btn btn-secondary">Snackbar action</div>

5
src/Connected.Components.Showcase.Runner/Pages/Index.razor
Unescape View File

@ -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>
@ -24,12 +25,8 @@ CloseOnDateSelect=true
</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;
} }

5
src/Connected.Components/Components/Chip.razor.cs
Unescape View File

@ -1,4 +1,7 @@
namespace Connected.Components; using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Chip public partial class Chip
{ {
} }

132
src/Connected.Components/Components/DatePicker.razor
Unescape View File

@ -1,36 +1,69 @@
@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>
<div class="picker-grid-col-3 gap-3">
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++) @for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
{ {
int y = i; int y = i;
<a href="#" @onclick="@(()=>SetYear(y))"> @* <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-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-leading-icon"></div>
<div class="chip-label">@i.ToString()</div> <div class="chip-label">@i.ToString()</div>
<div class="chip-cta-icon"></div> <div class="chip-cta-icon"></div>
@ -40,70 +73,105 @@
if (SelectedDate.Year - i % 3 == 0) if (SelectedDate.Year - i % 3 == 0)
{ {
<br /> <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>
<div class="picker-grid-col-3 gap-3">
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++) @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
{ {
int m = i; int m = i;
<a href="#" @onclick="@(()=>SetMonth(m))"> @* <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-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-leading-icon"></div>
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div> <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
<div class="chip-cta-icon"></div> <div class="chip-cta-icon"></div>
</div> </div>
</a> </a>
if (i % 3 == 0) if (i % 3 == 0)
{ {
<br /> <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>
@* <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) @foreach (var Date in ShowingDates)
{ {
<a href="#" @onclick="@(()=>SetDate(Date))"> <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"> @* <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
@Date.Day.ToString() @Date.Day.ToString()
</div> </div> *@
</a>
@Date.Day.ToString()
</button>
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday)) @if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
{ {
<br /> @* <br /> *@
} }
CalendarStart = CalendarStart.AddDays(1); 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>
} }

8
src/Connected.Components/Components/DatePicker.razor.cs
Unescape View File

@ -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;
} }

16
src/Connected.Components/Styles/components/_buttons-icons.scss
Unescape View File

@ -10,10 +10,8 @@
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
cursor: pointer; cursor: pointer;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
} }
.btn-icon-alt { .btn-icon-alt {
font-size: inherit; font-size: inherit;
flex: 0 0 auto; flex: 0 0 auto;
@ -26,7 +24,7 @@
background-color: transparent; background-color: transparent;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
&:hover { &:hover {
background-color: rgba(0,0,0,.075) background-color: rgba(0, 0, 0, 0.075);
} }
&:focus-visible, &:focus-visible,
&.focus { &.focus {
@ -39,23 +37,21 @@
color: #fff; color: #fff;
background-color: var(--bg-core-primary); background-color: var(--bg-core-primary);
} }
} }
@each $key, $val in $theme-colors { @each $key, $val in $theme-colors {
.btn-icon-alt.#{$key} { .btn-icon-alt.#{$key} {
background-color: transparent; background-color: transparent;
color: $val; color: $val;
&:hover { &:hover {
//background-color: lighten($val, 24); //background-color: lighten($val, 24);
background-color: rgba($val, .1); background-color: rgba($val, 0.1);
} }
&:focus-visible, &:focus-visible,
&.focus { &.focus {
outline: 0; outline: 0;
color: set-color($val); color: set-color($val);
background-color: rgba($val, .5); background-color: rgba($val, 0.5);
box-shadow: 0 0 0 0.15rem lighten($val, 20); box-shadow: 0 0 0 0.15rem lighten($val, 20);
} }
&:active, &:active,
@ -65,3 +61,5 @@
} }
} }
} }

43
src/Connected.Components/Styles/components/_buttons.scss
Unescape View File

@ -60,9 +60,28 @@ $border-radius-btn: 100vw;
&.active { &.active {
background-color: darken($val, 15); background-color: darken($val, 15);
} }
}
.btn-link-#{$key} {
// @include btn();
background-color: transparent;
color: $val;
border: 1px solid transparent;
&:hover {
color: set-color($val);
background-color: $val;
}
&:focus-visible,
&.focus {
outline: 0;
box-shadow: 0 0 0 0.15rem lighten($val, 20);
}
&:active,
&.active {
background-color: darken($val, 15);
}
} }
.btn-outline-#{$key} { .btn-outline-#{$key} {
// @include btn(); // @include btn();
color: darken($val, 10); color: darken($val, 10);
@ -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 {

121
src/Connected.Components/Styles/components/_card.scss
Unescape View File

@ -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);
}

2
src/Connected.Components/Styles/components/_chip.scss
Unescape View File

@ -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 {

9
src/Connected.Components/Styles/components/_dropdown.scss
Unescape View File

@ -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;
} }
} }

89
src/Connected.Components/Styles/components/_grid.scss
Unescape View File

@ -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 {

1
src/Connected.Components/Styles/components/_index.scss
Unescape View File

@ -16,3 +16,4 @@
@forward "buttons-icons"; @forward "buttons-icons";
@forward "dropdown"; @forward "dropdown";
@forward "card"; @forward "card";
@forward "date-picker";

11
src/Connected.Components/Styles/components/_inputs.scss
Unescape View File

@ -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;

151
src/Connected.Components/Styles/components/_snackbar.scss
Unescape View File

@ -1,8 +1,7 @@
@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;
@ -12,40 +11,68 @@
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,.25); // border: 1px solid rgba(255, 255, 255, 0.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 {
transform: translateX(0);
}
.snackbar {
width: 350px; width: 350px;
//min-height: 60px; //min-height: 60px;
background-color: var(--bg-core-primary-light); background-color: var(--bg-core-primary-light);
margin: 0 .75rem .75rem; background-color: rgba(255,255,255,.8);
backdrop-filter: blur(10px);
margin: 0 0.75rem 0.75rem;
padding: 1rem; padding: 1rem;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
filter: drop-shadow(1px 2px 4px rgba(0,0,0,.15)); filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.15));
transform: translateX(100%); //transform: translateX(100%);
}
.snackbar.slide-in {
animation: slidein 0.3s ease-in-out forwards; animation: slidein 0.3s ease-in-out forwards;
} }
.snackbar.slide-out {
animation: slideout 0.3s ease-in-out forwards;
}
@keyframes slidein { @keyframes slidein {
100%{ 0% {
transform: translateX(110%);
}
100% {
transform: translateX(0); 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;
} }
@ -76,7 +103,7 @@
//align-items: center; //align-items: center;
justify-content: center; justify-content: center;
.snackbar-leading-icon{ .snackbar-leading-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -87,13 +114,13 @@
overflow: hidden; overflow: hidden;
} }
.snackbar-leading-icon img{ .snackbar-leading-icon img {
object-fit: cover; object-fit: cover;
height: var(--height); height: var(--height);
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }
.snackbar-cta-icon{ .snackbar-cta-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -102,12 +129,25 @@
cursor: pointer; cursor: pointer;
height: var(--height); height: var(--height);
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
} }
.snackbar-message{ .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; font-size: $font-size-sm;
margin: 0 .85rem; margin-left: 0.85rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
@ -115,89 +155,102 @@
flex: 1; flex: 1;
} }
.snackbar-title{ .snackbar-header {
display: flex;
justify-content: space-between;
width: 100%;
}
.snackbar-title {
font-size: $font-size-sm; font-size: $font-size-sm;
font-weight: $font-weight-600; font-weight: $font-weight-600;
color: $text-core-hc; color: $text-core-hc;
} }
.snackbar-recived {
font-size: .75rem;
font-weight: $font-weight-600;
color: $text-core-vc;
}
.snackbar-action { .snackbar-action {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: .5rem; gap: 0.5rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.snackbar-action .btn{ .snackbar-action .btn {
font-size: .85rem; font-size: 0.85rem;
text-transform: none; text-transform: none;
padding: .1rem .7rem; padding: 0.1rem 0.7rem;
border-radius: 0.35rem; border-radius: 0.35rem;
} }
.snackbar-cta-icon:hover{ .snackbar-cta-icon:hover {
background-color: rgba(0,0,0,.15); background-color: rgba(0, 0, 0, 0.15);
} }
} }
.snackbar-group{ .snackbar:hover .snackbar-cta-abs {
&.top{ opacity: .9;
}
.snackbar-group {
&.top {
top: 0; top: 0;
} }
&.right{ &.right {
right: 0; right: 0;
} }
&.bottom{ &.bottom {
bottom: 150px; bottom: 150px;
} }
&.left{ &.left {
left: 0; left: 0;
} }
@include breakpoint(sm) { @include breakpoint(sm) {
&.top{ &.top {
top: 0; top: 0;
} }
&.right{ &.right {
right: 0; right: 0;
} }
&.bottom{ &.bottom {
bottom: 0; bottom: 0;
} }
&.left{ &.left {
left: 0; left: 0;
} }
} }
@include breakpoint(lg) { @include breakpoint(lg) {
&.top{ &.top {
top: 0; top: 0;
} }
&.right{ &.right {
right: 0; right: 0;
} }
&.bottom{ &.bottom {
bottom: 0; bottom: 0;
} }
&.left{ &.left {
left: 0; left: 0;
} }
} }
} }
.snackbar{ .snackbar {
width: 90%; width: 90%;
margin: 0 auto .75rem auto; margin: 0 auto 0.75rem auto;
@include breakpoint(sm) { @include breakpoint(sm) {
width: 50vw; width: 50vw;
margin: 0 .75rem .75rem; margin: 0 0.75rem 0.75rem;
} }
@include breakpoint(lg) { @include breakpoint(lg) {
width: 350px; width: 350px;
} }
} }

1
src/Connected.Components/Styles/globals/_index.scss
Unescape View File

@ -2,3 +2,4 @@
@forward 'variables'; @forward 'variables';
@forward 'core'; @forward 'core';
@forward 'typography'; @forward 'typography';
@forward 'fonts';
Write Preview
Loading…
Cancel
Save