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
This commit is contained in:
Janko Jordan 2023-03-09 15:03:57 +01:00
parent 6cd9089f6b
commit b2e42c051b
17 changed files with 698 additions and 477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dependencies/Connected vendored

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

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

@ -1,5 +1,8 @@
@page "/democomp"
<body class="">
<div class="top-loading-bar"></div>
<div class="document-container d-flex">
@ -209,6 +212,25 @@
<button type="button" href="#" class="btn btn-outline-dark">click me</button>
</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">
<div>
<h4 class="text-core mt-5">Sizes</h4>
@ -545,11 +567,13 @@
</div>
<div class="form-group error">
<div class="form-group ">
<select type="textarea" required="required">
</select>
<span class="highlight"></span><span class="bar"></span>
<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 button">
<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" />
</span>
</span>
<div class="backdrop"></div>
<div class="backdrop d-sm-none"></div>
<div class="drop-down">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-header">Header</div>
@ -575,6 +599,15 @@
</div>
<DatePicker
CloseOnDateSelect=true
@bind-SelectedDate=@date>
</DatePicker>
@code {
DateTime date = DateTime.Today;
}
<div class="form-group">
<textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
<label class="label-animated">Message</label>
@ -695,9 +728,9 @@
</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-->
<div class="data-grid-row-content">
<div class="data-grid-row-content @NavClosed">
<!--active-->
<div class="data-grid-select">
@* <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>
<p>Cards contain content and actions that relate information about a subject.</p>
<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">
<button class="btn btn-light btn-icon">
<Glyph SVG="@Icons.Material.Filled.FavoriteBorder" class="icon-root svg-icon" />
</button>
</div>
<div class="card-header-cta">
<button class="btn btn-white btn-icon">
<Glyph SVG="@Icons.Material.Filled.FavoriteBorder" class="icon-root svg-icon" />
</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 class="card-media">
<div class="card-media"> <!--optional media contnent-->
<img class="img-fluid" style="height:250px" src="https://source.unsplash.com/random?face">
</div>
<div class="card-avatar">
<img class="img-fluid" src="https://source.unsplash.com/random?face">
<div class="">
<div class="avatar-title">Profile title</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 class="card-avatar"> <!--optional profile contnent-->
<img class="img-fluid" src="https://source.unsplash.com/random?face">
<div class="">
<div class="avatar-title">Profile title</div>
<div class="avatar-subhead">Profile subhead</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>
</section>
@ -911,7 +949,7 @@
</button>
<!-- 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-content">
<div class="modal-header">
@ -1057,31 +1095,42 @@
</div>
</aside>
</div>
<div class="snackbar-group d-none bottom right"> <!--set position top, right, bottom, left -->
<div class="snackbar success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
<div class="snackbar-group bottom right"> <!--set position top, right, bottom, left, class show when group is visible-->
<div class="snackbar slide-in success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
<div class="snackbar-content">
<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>
</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-leading-icon"><Glyph SVG="@Icons.Material.Filled.PersonOutline" class="icon-root svg-icon" /></div>
<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>
<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 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-leading-icon"><Glyph SVG="@Icons.Material.Filled.WarningAmber" class="icon-root svg-icon" /></div>
<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-action">
<div class="btn btn-secondary">Snackbar action</div>

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

@ -1,5 +1,6 @@
@page "/"
@using Connected.Models;
@using Connected.Components;
<h1 style="text-align:center;">Component Sandbox</h1>
@ -21,15 +22,11 @@
<DatePicker
CloseOnDateSelect=true
@bind-SelectedDate=@date>
</DatePicker>
<TextInput @bind-Value="@value"></TextInput>
<p>Selected date is @date.ToString()</p>
@value
@code {
DateTime date = DateTime.Today;
}

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

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

198
src/Connected.Components/Components/DatePicker.razor
View File

@ -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="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)
<div class="picker-grid-col-3 gap-3">
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
{
<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;
}
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> *@
CalendarStart = CalendarStart.AddDays(1);
}
@Date.Day.ToString()
</button>
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
{
@* <br /> *@
}
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>
}

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

@ -153,14 +153,14 @@ public partial class DatePicker
public string DateChipStyle(DateTime date)
{
string result = "";
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
if (date.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info";
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none";
if (date.CompareTo(DateTime.Today) == 0) result = "days current";
if (date.Month.CompareTo(SelectedDate.Month) == 0)
{
if (date.Date.CompareTo(SelectedDate.Date) == 0)
return result+" bg-info text-light";
return result+"days active";
else
return result+" bg-core text-dark";
return result+" ";
}
return result;
}

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

@ -2,66 +2,64 @@
@use "../util/" as *;
.btn-icon {
font-size: inherit;
flex: 0 0 auto;
padding: 8px;
line-height: 1;
text-align: center;
border-radius: $border-radius-pill;
cursor: pointer;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-size: inherit;
flex: 0 0 auto;
padding: 8px;
line-height: 1;
text-align: center;
border-radius: $border-radius-pill;
cursor: pointer;
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;
}
}
}

47
src/Connected.Components/Styles/components/_buttons.scss
View File

@ -59,10 +59,29 @@ $border-radius-btn: 100vw;
&:active,
&.active {
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} {
// @include btn();
color: darken($val, 10);
@ -112,8 +131,8 @@ $border-radius-btn: 100vw;
.btn-core {
background-color: var(--bg-core-primary) !important;
//color: set-color (var(--bg-core-primary-lighten)) !important;
color: rgba(255,255,255,.85) !important;
color: set-color (var(--bg-core-primary-lighten)) !important;
//color: rgba(255,255,255,.85) !important;
&:hover {
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 {

123
src/Connected.Components/Styles/components/_card.scss
View File

@ -5,7 +5,7 @@ $box-padding: 0 0 0.25rem 0;
.card {
background-color: var(--element-fg-core);
border: 1px solid var(--border-core);
border-radius: $border-radius-lg;
display: flex;
flex-direction: column;
@ -13,44 +13,109 @@ $box-padding: 0 0 0.25rem 0;
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 {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 1;
top: 1rem;
right: 1rem;
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 {
width: 100%;
max-height: 250px;
margin-bottom: .75rem;
z-index: 1;
& img {
object-fit: cover;
width: inherit;
}
}
.card-container {
padding: 0 .75rem .75rem;
display: flex;
flex-direction: column;
}
.card-container {
padding: 0.75rem;
.card-content-container {
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
flex: 1;
}
.card-container > * {
//flex: 1;
}
// .card-container > * {
// //flex: 1;
// }
.card-avatar {
display: flex;
align-items: center;
margin: 0 0.75rem;
margin: 0.75rem 1rem 0;
padding: $box-padding;
& img {
@ -59,6 +124,7 @@ $box-padding: 0 0 0.25rem 0;
object-fit: cover;
border-radius: 50%;
margin-right: 0.5rem;
z-index: 1;
}
& .avatar-title {
font-weight: 600;
@ -76,14 +142,14 @@ $box-padding: 0 0 0.25rem 0;
padding: $box-padding;
& .card-header-title {
font-size: 1.5rem;
font-size: $font-size-md;
color: var(--text-core-hc);
}
& .card-header-subhead {
font-size: 1.05rem;
font-weight: 500;
font-size: $base-font-size;
line-height: 0.5;
font-weight: 500;
color: var(--text-core-lc);
}
}
@ -97,8 +163,17 @@ $box-padding: 0 0 0.25rem 0;
margin-top: auto;
display: flex;
flex-wrap: wrap;
align-content: end;
& .btn-content{
margin: 0 .25rem;
}
align-content: end;
z-index: 1;
& .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
View File

@ -181,7 +181,7 @@
max-height: max-content;
opacity: 1;
pointer-events: initial;
border-radius: .6rem;
}
&:focus-within ~ .backdrop {

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

@ -1,6 +1,9 @@
@use "../globals/" as *;
@use "../util/" as *;
.drop-down {
position: fixed;
top: 50%;
@ -25,13 +28,13 @@
@include breakpoint(sm) {
.drop-down {
position: absolute;
top: 46px;
top: auto;
left: 0;
opacity: 0;
margin-top: 1rem;
min-width: 100%;
width: 100%;
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
View File

@ -12,78 +12,6 @@
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");
@each $colCount in $gridcol {
@ -312,8 +240,8 @@ $columns: 12;
transition: all 0.5s ease-in;
}
.data-grid.show .data-grid-collapse-cta i,
.data-grid.show .data-grid-collapse-cta svg {
.data-grid-row-content.show .data-grid-collapse-cta i,
.data-grid-row-content.show .data-grid-collapse-cta svg {
transform: rotate(180deg);
transition: all 0.5s ease-in;
}
@ -364,7 +292,7 @@ overflow: hidden;
.dots {
--width: .75rem;
--width: .85rem;
--height: var(--width);
position: absolute;
@ -376,18 +304,17 @@ overflow: hidden;
.dot {
width: var(--width);
height: var(--height);
border-radius: 50%;
background-color: var(--bg-core-primary-lighten);
border-radius: $border-radius-pill;
background-color: var(--bg-core-primary);
display: inline-block;
outline: 1px solid #fff;
outline: 1px solidvar(--border-core);
transition: all 300ms ease-in-out;
}
.dot.active,
.dot.next {
background-color: var(--bg-core-primary);
outline: 2px solid var(--bg-core-primary);
outline-offset: 2px;
background-color: var(--bg-core-primary-darken);
width: calc(var(--width) * 2);
}
.dot.completed {

3
src/Connected.Components/Styles/components/_index.scss
View File

@ -15,4 +15,5 @@
@forward "badge";
@forward "buttons-icons";
@forward "dropdown";
@forward "card";
@forward "card";
@forward "date-picker";

13
src/Connected.Components/Styles/components/_inputs.scss
View File

@ -257,12 +257,21 @@ select {
-moz-appearance: textfield;
}
.form-group-alt:focus-within {
background-color: var(--bg-core-primary-lighten);
.form-group-alt:focus-within {
background-color: var(--bg-core-primary-lighten);
}
/*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{
height: var(--height);
display: flex;

393
src/Connected.Components/Styles/components/_snackbar.scss
View File

@ -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,.25);
border-radius: 0.6rem;
backdrop-filter: blur(25px) opacity(0.5);
.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{
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;
}
@keyframes slidein {
100%{
transform: translateX(0);
}
.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:first-of-type{
margin-top: 1rem;
.snackbar.slide-in {
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 {
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;
.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-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;
}
}
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{
width: 90%;
margin: 0 auto .75rem auto;
.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;
}
@include breakpoint(sm) {
width: 50vw;
margin: 0 .75rem .75rem;
}
@include breakpoint(lg) {
width: 350px;
}
}
.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;
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;
}
}

3
src/Connected.Components/Styles/globals/_index.scss
View File

@ -1,4 +1,5 @@
@forward 'reset';
@forward 'variables';
@forward 'core';
@forward 'typography';
@forward 'typography';
@forward 'fonts';

2
src/Connected.Components/Utilities/StyleBuilder.cs
View File

@ -37,7 +37,7 @@ public struct StyleBuilder
/// <param name="value"></param>
public StyleBuilder(string prop, string value) => stringBuffer = $"{prop}:{value};";
public StyleBuilder(string style) : this() => this.style = style;
/// <summary>
/// Adds a conditional in-line style to the builder with space separator and closing semicolon.
/// </summary>