NeilBrommer/BlazorStart
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Use SCSS for styling

Browse source
This commit is contained in:
Neil Brommer 2021-12-08 21:59:43 -08:00
parent 91eabab7f5
commit 880d00237f
87 changed files with 5912 additions and 5781 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,5 +1,7 @@
# Project specific
Start/Server/app.db
# Compiled CSS files
Start/Client/wwwRoot/css/
# globs
Makefile.in

17
Readme.md
View file

@ -12,26 +12,29 @@ This is a rewrite of my [New Tab Page project](https://github.com/NeilBrommer/Ne
## To Do
- [x] Backend data services
- [ ] API Controllers
- [ ] Bookmark containers
- [ ] Bookmark groups
- [ ] Bookmarks
- [x] API Controllers
- [x] Bookmark containers
- [x] Bookmark groups
- [x] Bookmarks
- [ ] Manage bookmark containers
- [x] Create
- [x] Delete
- [ ] Edit
- [ ] Manage bookmark groups
- [ ] Create
- [ ] Delete
- [x] Create
- [x] Delete
- [ ] Edit
- [ ] Manage bookmarks
- [ ] Create
- [ ] Delete
- [ ] Edit
- [ ] Use [Refit](https://github.com/reactiveui/refit) for strongly typed API calls
- [x] Use [Refit](https://github.com/reactiveui/refit) for strongly typed API calls
- [ ] Support choosing between storing data on the server or in IndexedDB
## Dependancies
- [Dart SASS](https://sass-lang.com/) for compiling SCSS files
- [Spectre.css](https://picturepan2.github.io/spectre/)
- [Blazored LocalStorage](https://github.com/blazored/LocalStorage)
- [Refit](https://github.com/reactiveui/refit/)
- [Fluxor](https://github.com/mrpmorris/Fluxor/)

1
Start.sln
View file

@ -13,6 +13,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
ProjectSection(SolutionItems) = preProject
.editorconfig = .editorconfig
Readme.md = Readme.md
.gitignore = .gitignore
EndProjectSection
EndProject
Global

38
Start/Client/Sass/Spectre/_accordions.scss Normal file
View file

@ -0,0 +1,38 @@
// Accordions
.accordion {
input:checked ~,
&[open] {
& .accordion-header > {
.icon:first-child {
transform: rotate(90deg);
}
}
& .accordion-body {
max-height: 50rem;
}
}
.accordion-header {
display: block;
padding: $unit-1 $unit-2;
.icon {
transition: transform .25s;
}
}
.accordion-body {
margin-bottom: $layout-spacing;
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
}
// Remove default details marker in Webkit
summary.accordion-header {
&::-webkit-details-marker {
display: none;
}
}

20
Start/Client/Sass/Spectre/_animations.scss Normal file
View file

@ -0,0 +1,20 @@
// Animations
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-$unit-8);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

43
Start/Client/Sass/Spectre/_asian.scss Normal file
View file

@ -0,0 +1,43 @@
// Optimized for East Asian CJK
html:lang(zh),
html:lang(zh-Hans),
.lang-zh,
.lang-zh-hans {
font-family: $cjk-zh-hans-font-family;
}
html:lang(zh-Hant),
.lang-zh-hant {
font-family: $cjk-zh-hant-font-family;
}
html:lang(ja),
.lang-ja {
font-family: $cjk-jp-font-family;
}
html:lang(ko),
.lang-ko {
font-family: $cjk-ko-font-family;
}
:lang(zh),
:lang(ja),
.lang-cjk {
ins,
u {
border-bottom: $border-width solid;
text-decoration: none;
}
del + del,
del + s,
ins + ins,
ins + u,
s + del,
s + s,
u + ins,
u + u {
margin-left: .125em;
}
}

47
Start/Client/Sass/Spectre/_autocomplete.scss Normal file
View file

@ -0,0 +1,47 @@
// Autocomplete
.form-autocomplete {
position: relative;
.form-autocomplete-input {
align-content: flex-start;
display: flex;
flex-wrap: wrap;
height: auto;
min-height: $unit-8;
padding: $unit-h;
&.is-focused {
@include control-shadow();
border-color: $primary-color;
}
.form-input {
border-color: transparent;
box-shadow: none;
display: inline-block;
flex: 1 0 auto;
height: $unit-6;
line-height: $unit-4;
margin: $unit-h;
width: auto;
}
}
.menu {
left: 0;
position: absolute;
top: 100%;
width: 100%;
}
&.autocomplete-oneline {
.form-autocomplete-input {
flex-wrap: nowrap;
overflow-x: auto;
}
.chip {
flex: 1 0 auto;
}
}
}

77
Start/Client/Sass/Spectre/_avatars.scss Normal file
View file

@ -0,0 +1,77 @@
// Avatars
.avatar {
@include avatar-base();
background: $primary-color;
border-radius: 50%;
color: rgba($light-color, .85);
display: inline-block;
font-weight: 300;
line-height: 1.25;
margin: 0;
position: relative;
vertical-align: middle;
&.avatar-xs {
@include avatar-base($unit-4);
}
&.avatar-sm {
@include avatar-base($unit-6);
}
&.avatar-lg {
@include avatar-base($unit-12);
}
&.avatar-xl {
@include avatar-base($unit-16);
}
img {
border-radius: 50%;
height: 100%;
position: relative;
width: 100%;
z-index: $zindex-0;
}
.avatar-icon,
.avatar-presence {
background: $bg-color-light;
bottom: 14.64%;
height: 50%;
padding: $border-width-lg;
position: absolute;
right: 14.64%;
transform: translate(50%, 50%);
width: 50%;
z-index: $zindex-0 + 1;
}
.avatar-presence {
background: $gray-color;
box-shadow: 0 0 0 $border-width-lg $light-color;
border-radius: 50%;
height: .5em;
width: .5em;
&.online {
background: $success-color;
}
&.busy {
background: $error-color;
}
&.away {
background: $warning-color;
}
}
&[data-initial]::before {
color: currentColor;
content: attr(data-initial);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: $zindex-0;
}
}

60
Start/Client/Sass/Spectre/_badges.scss Normal file
View file

@ -0,0 +1,60 @@
// Badges
.badge {
position: relative;
white-space: nowrap;
&[data-badge],
&:not([data-badge]) {
&::after {
background: $primary-color;
background-clip: padding-box;
border-radius: .5rem;
box-shadow: 0 0 0 .1rem $bg-color-light;
color: $light-color;
content: attr(data-badge);
display: inline-block;
transform: translate(-.05rem, -.5rem);
}
}
&[data-badge] {
&::after {
font-size: $font-size-sm;
height: .9rem;
line-height: 1;
min-width: .9rem;
padding: .1rem .2rem;
text-align: center;
white-space: nowrap;
}
}
&:not([data-badge]),
&[data-badge=""] {
&::after {
height: 6px;
min-width: 6px;
padding: 0;
width: 6px;
}
}
// Badges for Buttons
&.btn {
&::after {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
// Badges for Avatars
&.avatar {
&::after {
position: absolute;
top: 14.64%;
right: 14.64%;
transform: translate(50%, -50%);
z-index: $zindex-1;
}
}
}

71
Start/Client/Sass/Spectre/_bars.scss Normal file
View file

@ -0,0 +1,71 @@
// Bars
.bar {
background: $bg-color-dark;
border-radius: $border-radius;
display: flex;
flex-wrap: nowrap;
height: $unit-4;
width: 100%;
&.bar-sm {
height: $unit-1;
}
// TODO: attr() support
.bar-item {
background: $primary-color;
color: $light-color;
display: block;
font-size: $font-size-sm;
flex-shrink: 0;
line-height: $unit-4;
height: 100%;
position: relative;
text-align: center;
width: 0;
&:first-child {
border-bottom-left-radius: $border-radius;
border-top-left-radius: $border-radius;
}
&:last-child {
border-bottom-right-radius: $border-radius;
border-top-right-radius: $border-radius;
flex-shrink: 1;
}
}
}
// Slider bar
.bar-slider {
height: $border-width-lg;
margin: $layout-spacing 0;
position: relative;
.bar-item {
left: 0;
padding: 0;
position: absolute;
&:not(:last-child):first-child {
background: $bg-color-dark;
z-index: $zindex-0;
}
}
.bar-slider-btn {
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
padding: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
width: $unit-3;
&:active {
box-shadow: 0 0 0 .1rem $primary-color;
}
}
}

44
Start/Client/Sass/Spectre/_base.scss Normal file
View file

@ -0,0 +1,44 @@
// Base
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: $html-font-size;
line-height: $html-line-height;
-webkit-tap-highlight-color: transparent;
}
body {
background: $body-bg;
color: $body-font-color;
font-family: $body-font-family;
font-size: $font-size;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
a {
color: $link-color;
outline: none;
text-decoration: none;
&:focus {
@include control-shadow();
}
&:focus,
&:hover,
&:active,
&.active {
color: $link-color-dark;
text-decoration: underline;
}
&:visited {
color: $link-color-light;
}
}

29
Start/Client/Sass/Spectre/_breadcrumbs.scss Normal file
View file

@ -0,0 +1,29 @@
// Breadcrumbs
.breadcrumb {
list-style: none;
margin: $unit-1 0;
padding: $unit-1 0;
.breadcrumb-item {
color: $gray-color-dark;
display: inline-block;
margin: 0;
padding: $unit-1 0;
&:not(:last-child) {
margin-right: $unit-1;
a {
color: $gray-color-dark;
}
}
&:not(:first-child) {
&::before {
color: $gray-color-dark;
content: "/";
padding-right: $unit-2;
}
}
}
}

193
Start/Client/Sass/Spectre/_buttons.scss Normal file
View file

@ -0,0 +1,193 @@
// Buttons
.btn {
appearance: none;
background: $bg-color-light;
border: $border-width solid $primary-color;
border-radius: $border-radius;
color: $primary-color;
cursor: pointer;
display: inline-block;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
outline: none;
padding: $control-padding-y $control-padding-x;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
user-select: none;
vertical-align: middle;
white-space: nowrap;
&:focus {
@include control-shadow();
}
&:focus,
&:hover {
background: $secondary-color;
border-color: $primary-color-dark;
text-decoration: none;
}
&:active,
&.active {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
text-decoration: none;
&.loading {
&::after {
border-bottom-color: $light-color;
border-left-color: $light-color;
}
}
}
&[disabled],
&:disabled,
&.disabled {
cursor: default;
opacity: .5;
pointer-events: none;
}
// Button Primary
&.btn-primary {
background: $primary-color;
border-color: $primary-color-dark;
color: $light-color;
&:focus,
&:hover {
background: darken($primary-color-dark, 2%);
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
&:active,
&.active {
background: darken($primary-color-dark, 4%);
border-color: darken($primary-color-dark, 7%);
color: $light-color;
}
&.loading {
&::after {
border-bottom-color: $light-color;
border-left-color: $light-color;
}
}
}
// Button Colors
&.btn-success {
@include button-variant($success-color);
}
&.btn-error {
@include button-variant($error-color);
}
// Button Link
&.btn-link {
background: transparent;
border-color: transparent;
color: $link-color;
&:focus,
&:hover,
&:active,
&.active {
color: $link-color-dark;
}
}
// Button Sizes
&.btn-sm {
font-size: $font-size-sm;
height: $control-size-sm;
padding: $control-padding-y-sm $control-padding-x-sm;
}
&.btn-lg {
font-size: $font-size-lg;
height: $control-size-lg;
padding: $control-padding-y-lg $control-padding-x-lg;
}
// Button Block
&.btn-block {
display: block;
width: 100%;
}
// Button Action
&.btn-action {
width: $control-size;
padding-left: 0;
padding-right: 0;
&.btn-sm {
width: $control-size-sm;
}
&.btn-lg {
width: $control-size-lg;
}
}
// Button Clear
&.btn-clear {
background: transparent;
border: 0;
color: currentColor;
height: $unit-5;
line-height: $unit-4;
margin-left: $unit-1;
margin-right: -2px;
opacity: 1;
padding: $unit-h;
text-decoration: none;
width: $unit-5;
&:focus,
&:hover {
background: rgba($bg-color, .5);
opacity: .95;
}
&::before {
content: "\2715";
}
}
}
// Button groups
.btn-group {
display: inline-flex;
flex-wrap: wrap;
.btn {
flex: 1 0 auto;
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: -$border-width;
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -$border-width;
}
&:focus,
&:hover,
&:active,
&.active {
z-index: $zindex-0;
}
}
&.btn-group-block {
display: flex;
.btn {
flex: 1 0 0;
}
}
}

222
Start/Client/Sass/Spectre/_calendars.scss Normal file
View file

@ -0,0 +1,222 @@
// Calendars
.calendar {
border: $border-width solid $border-color;
border-radius: $border-radius;
display: block;
min-width: 280px;
.calendar-nav {
align-items: center;
background: $bg-color;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
display: flex;
font-size: $font-size-lg;
padding: $layout-spacing;
}
.calendar-header,
.calendar-body {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: $layout-spacing 0;
.calendar-date {
flex: 0 0 14.28%; // 7 calendar-items each row
max-width: 14.28%;
}
}
.calendar-header {
background: $bg-color;
border-bottom: $border-width solid $border-color;
color: $gray-color;
font-size: $font-size-sm;
text-align: center;
}
.calendar-body {
color: $gray-color-dark;
}
.calendar-date {
border: 0;
padding: $unit-1;
.date-item {
appearance: none;
background: transparent;
border: $border-width solid transparent;
border-radius: 50%;
color: $gray-color-dark;
cursor: pointer;
font-size: $font-size-sm;
height: $unit-7;
line-height: $unit-5;
outline: none;
padding: $unit-h;
position: relative;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
vertical-align: middle;
white-space: nowrap;
width: $unit-7;
&.date-today {
border-color: $secondary-color-dark;
color: $primary-color;
}
&:focus {
@include control-shadow();
}
&:focus,
&:hover {
background: $secondary-color-light;
border-color: $secondary-color-dark;
color: $primary-color;
text-decoration: none;
}
&:active,
&.active {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
// Calendar badge support
&.badge {
&::after {
position: absolute;
top: 3px;
right: 3px;
transform: translate(50%, -50%);
}
}
}
.date-item,
.calendar-event {
&:disabled,
&.disabled {
cursor: default;
opacity: .25;
pointer-events: none;
}
}
&.prev-month,
&.next-month {
.date-item,
.calendar-event {
opacity: .25;
}
}
}
.calendar-range {
position: relative;
&::before {
background: $secondary-color;
content: "";
height: $unit-7;
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
&.range-start {
&::before {
left: 50%;
}
}
&.range-end {
&::before {
right: 50%;
}
}
&.range-start,
&.range-end {
.date-item {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
}
.date-item {
color: $primary-color;
}
}
// Calendars size
&.calendar-lg {
.calendar-body {
padding: 0;
.calendar-date {
border-bottom: $border-width solid $border-color;
border-right: $border-width solid $border-color;
display: flex;
flex-direction: column;
height: 5.5rem;
padding: 0;
&:nth-child(7n) {
border-right: 0;
}
&:nth-last-child(-n+7) {
border-bottom: 0;
}
}
}
.date-item {
align-self: flex-end;
height: $unit-7;
margin-right: $layout-spacing-sm;
margin-top: $layout-spacing-sm;
}
.calendar-range {
&::before {
top: 19px;
}
&.range-start {
&::before {
left: auto;
width: 19px;
}
}
&.range-end {
&::before {
right: 19px;
}
}
}
.calendar-events {
flex-grow: 1;
line-height: 1;
overflow-y: auto;
padding: $layout-spacing-sm;
}
.calendar-event {
border-radius: $border-radius;
font-size: $font-size-sm;
display: block;
margin: $unit-h auto;
overflow: hidden;
padding: 3px 4px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

43
Start/Client/Sass/Spectre/_cards.scss Normal file
View file

@ -0,0 +1,43 @@
// Cards
.card {
background: $bg-color-light;
border: $border-width solid $border-color;
border-radius: $border-radius;
display: flex;
flex-direction: column;
.card-header,
.card-body,
.card-footer {
padding: $layout-spacing-lg;
padding-bottom: 0;
&:last-child {
padding-bottom: $layout-spacing-lg;
}
}
.card-body {
flex: 1 1 auto;
}
.card-image {
padding-top: $layout-spacing-lg;
&:first-child {
padding-top: 0;
img {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
}
&:last-child {
img {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
}
}

136
Start/Client/Sass/Spectre/_carousels.scss Normal file
View file

@ -0,0 +1,136 @@
// Carousels
// The number of carousel images
$carousel-number: 8;
%carousel-image-checked {
animation: carousel-slidein .75s ease-in-out 1;
opacity: 1;
z-index: $zindex-1;
}
%carousel-nav-checked {
color: $gray-color-light;
}
.carousel {
background: $bg-color;
display: block;
overflow: hidden;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
z-index: $zindex-0;
.carousel-container {
height: 100%;
left: 0;
position: relative;
&::before {
content: "";
display: block;
padding-bottom: 56.25%;
}
.carousel-item {
animation: carousel-slideout 1s ease-in-out 1;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
&:hover {
.item-prev,
.item-next {
opacity: 1;
}
}
}
.item-prev,
.item-next {
background: rgba($gray-color-light, .25);
border-color: rgba($gray-color-light, .5);
color: $gray-color-light;
opacity: 0;
position: absolute;
top: 50%;
transition: all .4s;
transform: translateY(-50%);
z-index: $zindex-1;
}
.item-prev {
left: 1rem;
}
.item-next {
right: 1rem;
}
}
.carousel-locator {
@for $i from 1 through ($carousel-number) {
&:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
@extend %carousel-image-checked;
}
}
@for $i from 1 through ($carousel-number) {
&:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
@extend %carousel-nav-checked;
}
}
}
.carousel-nav {
bottom: $layout-spacing;
display: flex;
justify-content: center;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 10rem;
z-index: $zindex-1;
.nav-item {
color: rgba($gray-color-light, .5);
display: block;
flex: 1 0 auto;
height: $unit-8;
margin: $unit-1;
max-width: 2.5rem;
position: relative;
&::before {
background: currentColor;
content: "";
display: block;
height: $unit-h;
position: absolute;
top: .5rem;
width: 100%;
}
}
}
}
@keyframes carousel-slidein {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes carousel-slideout {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(-50%);
}
}

33
Start/Client/Sass/Spectre/_chips.scss Normal file
View file

@ -0,0 +1,33 @@
// Chips
.chip {
align-items: center;
background: $bg-color-dark;
border-radius: 5rem;
display: inline-flex;
font-size: 90%;
height: $unit-6;
line-height: $unit-4;
margin: $unit-h;
max-width: $control-width-sm;
overflow: hidden;
padding: $unit-1 $unit-2;
text-decoration: none;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
&.active {
background: $primary-color;
color: $light-color;
}
.avatar {
margin-left: -$unit-2;
margin-right: $unit-1;
}
.btn-clear {
border-radius: 50%;
transform: scale(.75);
}
}

31
Start/Client/Sass/Spectre/_codes.scss Normal file
View file

@ -0,0 +1,31 @@
// Codes
code {
@include label-base();
@include label-variant($code-color, lighten($code-color, 42.5%));
font-size: 85%;
}
.code {
border-radius: $border-radius;
color: $body-font-color;
position: relative;
&::before {
color: $gray-color;
content: attr(data-lang);
font-size: $font-size-sm;
position: absolute;
right: $layout-spacing;
top: $unit-h;
}
code {
background: $bg-color;
color: inherit;
display: block;
line-height: 1.5;
overflow-x: auto;
padding: 1rem;
width: 100%;
}
}

116
Start/Client/Sass/Spectre/_comparison-sliders.scss Normal file
View file

@ -0,0 +1,116 @@
// Image comparison slider
// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
.comparison-slider {
height: 50vh;
overflow: hidden;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
.comparison-before,
.comparison-after {
height: 100%;
left: 0;
margin: 0;
overflow: hidden;
position: absolute;
top: 0;
img {
height: 100%;
object-fit: cover;
object-position: left center;
position: absolute;
width: 100%;
}
}
.comparison-before {
width: 100%;
z-index: 1;
.comparison-label {
right: $unit-4;
}
}
.comparison-after {
max-width: 100%;
min-width: 0;
z-index: 2;
&::before {
background: transparent;
content: "";
cursor: default;
height: 100%;
left: 0;
position: absolute;
right: $unit-4;
top: 0;
z-index: $zindex-0;
}
&::after {
background: currentColor;
border-radius: 50%;
box-shadow: 0 -5px, 0 5px;
color: $light-color;
content: "";
height: 3px;
pointer-events: none;
position: absolute;
right: $unit-2;
top: 50%;
transform: translate(50%, -50%);
width: 3px;
}
.comparison-label {
left: $unit-4;
}
}
.comparison-resizer {
animation: first-run 1.5s 1 ease-in-out;
cursor: ew-resize;
height: $unit-4;
left: 0;
max-width: 100%;
min-width: $unit-4;
opacity: 0;
outline: none;
position: relative;
resize: horizontal;
top: 50%;
transform: translateY(-50%) scaleY(30);
width: 0;
}
.comparison-label {
background: rgba($dark-color, .5);
bottom: $unit-4;
color: $light-color;
padding: $unit-1 $unit-2;
position: absolute;
user-select: none;
}
}
@keyframes first-run {
0% {
width: 0;
}
25% {
width: $unit-12;
}
50% {
width: $unit-4;
}
75% {
width: $unit-6;
}
100% {
width: 0;
}
}

36
Start/Client/Sass/Spectre/_dropdowns.scss Normal file
View file

@ -0,0 +1,36 @@
// Dropdown
.dropdown {
display: inline-block;
position: relative;
.menu {
animation: slide-down .15s ease 1;
display: none;
left: 0;
max-height: 50vh;
overflow-y: auto;
position: absolute;
top: 100%;
}
&.dropdown-right {
.menu {
left: auto;
right: 0;
}
}
&.active .menu,
.dropdown-toggle:focus + .menu,
.menu:hover {
display: block;
}
// Fix dropdown-toggle border radius in button groups
.btn-group {
.dropdown-toggle:nth-last-child(2) {
border-bottom-right-radius: $border-radius;
border-top-right-radius: $border-radius;
}
}
}

21
Start/Client/Sass/Spectre/_empty.scss Normal file
View file

@ -0,0 +1,21 @@
// Empty states (or Blank slates)
.empty {
background: $bg-color;
border-radius: $border-radius;
color: $gray-color-dark;
text-align: center;
padding: $unit-16 $unit-8;
.empty-icon {
margin-bottom: $layout-spacing-lg;
}
.empty-title,
.empty-subtitle {
margin: $layout-spacing auto;
}
.empty-action {
margin-top: $layout-spacing-lg;
}
}

37
Start/Client/Sass/Spectre/_filters.scss Normal file
View file

@ -0,0 +1,37 @@
// Filters
// The number of filter options
$filter-number: 8 !default;
%filter-checked-nav {
background: $primary-color;
color: $light-color;
}
%filter-checked-body {
display: none;
}
.filter {
.filter-nav {
margin: $layout-spacing 0;
}
.filter-body {
display: flex;
flex-wrap: wrap;
}
.filter-tag {
@for $i from 0 through ($filter-number) {
&#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
@extend %filter-checked-nav;
}
}
@for $i from 1 through ($filter-number) {
&#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
@extend %filter-checked-body;
}
}
}
}

555
Start/Client/Sass/Spectre/_forms.scss Normal file
View file

@ -0,0 +1,555 @@
// Forms
.form-group {
&:not(:last-child) {
margin-bottom: $layout-spacing;
}
}
fieldset {
margin-bottom: $layout-spacing-lg;
}
legend {
font-size: $font-size-lg;
font-weight: 500;
margin-bottom: $layout-spacing-lg;
}
// Form element: Label
.form-label {
display: block;
line-height: $line-height;
padding: $control-padding-y + $border-width 0;
&.label-sm {
font-size: $font-size-sm;
padding: $control-padding-y-sm + $border-width 0;
}
&.label-lg {
font-size: $font-size-lg;
padding: $control-padding-y-lg + $border-width 0;
}
}
// Form element: Input
.form-input {
appearance: none;
background: $bg-color-light;
background-image: none;
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
color: $body-font-color;
display: block;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
max-width: 100%;
outline: none;
padding: $control-padding-y $control-padding-x;
position: relative;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
width: 100%;
&:focus {
@include control-shadow();
border-color: $primary-color;
}
&::placeholder {
color: $gray-color;
}
// Input sizes
&.input-sm {
font-size: $font-size-sm;
height: $control-size-sm;
padding: $control-padding-y-sm $control-padding-x-sm;
}
&.input-lg {
font-size: $font-size-lg;
height: $control-size-lg;
padding: $control-padding-y-lg $control-padding-x-lg;
}
&.input-inline {
display: inline-block;
vertical-align: middle;
width: auto;
}
// Input types
&[type="file"] {
height: auto;
}
}
// Form element: Textarea
textarea.form-input {
&,
&.input-lg,
&.input-sm {
height: auto;
}
}
// Form element: Input hint
.form-input-hint {
color: $gray-color;
font-size: $font-size-sm;
margin-top: $unit-1;
.has-success &,
.is-success + & {
color: $success-color;
}
.has-error &,
.is-error + & {
color: $error-color;
}
}
// Form element: Select
.form-select {
appearance: none;
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
color: inherit;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
outline: none;
padding: $control-padding-y $control-padding-x;
vertical-align: middle;
width: 100%;
background: $bg-color-light;
&:focus {
@include control-shadow();
border-color: $primary-color;
}
&::-ms-expand {
display: none;
}
// Select sizes
&.select-sm {
font-size: $font-size-sm;
height: $control-size-sm;
padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
}
&.select-lg {
font-size: $font-size-lg;
height: $control-size-lg;
padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
}
// Multiple select
&[size],
&[multiple] {
height: auto;
padding: $control-padding-y $control-padding-x;
option {
padding: $unit-h $unit-1;
}
}
&:not([multiple]):not([size]) {
background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
padding-right: $control-icon-size + $control-padding-x;
}
}
// Form Icons
.has-icon-left,
.has-icon-right {
position: relative;
.form-icon {
height: $control-icon-size;
margin: 0 $control-padding-y;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: $control-icon-size;
z-index: $zindex-0 + 1;
}
}
.has-icon-left {
.form-icon {
left: $border-width;
}
.form-input {
padding-left: $control-icon-size + $control-padding-y * 2;
}
}
.has-icon-right {
.form-icon {
right: $border-width;
}
.form-input {
padding-right: $control-icon-size + $control-padding-y * 2;
}
}
// Form element: Checkbox and Radio
.form-checkbox,
.form-radio,
.form-switch {
display: block;
line-height: $line-height;
margin: ($control-size - $control-size-sm) / 2 0;
min-height: $control-size-sm;
padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
position: relative;
input {
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
width: 1px;
&:focus + .form-icon {
@include control-shadow();
border-color: $primary-color;
}
&:checked + .form-icon {
background: $primary-color;
border-color: $primary-color;
}
}
.form-icon {
border: $border-width solid $border-color-dark;
cursor: pointer;
display: inline-block;
position: absolute;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
}
// Input checkbox, radio and switch sizes
&.input-sm {
font-size: $font-size-sm;
margin: 0;
}
&.input-lg {
font-size: $font-size-lg;
margin: ($control-size-lg - $control-size-sm) / 2 0;
}
}
.form-checkbox,
.form-radio {
.form-icon {
background: $bg-color-light;
height: $control-icon-size;
left: 0;
top: ($control-size-sm - $control-icon-size) / 2;
width: $control-icon-size;
}
input {
&:active + .form-icon {
background: $bg-color-dark;
}
}
}
.form-checkbox {
.form-icon {
border-radius: $border-radius;
}
input {
&:checked + .form-icon {
&::before {
background-clip: padding-box;
border: $border-width-lg solid $light-color;
border-left-width: 0;
border-top-width: 0;
content: "";
height: 9px;
left: 50%;
margin-left: -3px;
margin-top: -6px;
position: absolute;
top: 50%;
transform: rotate(45deg);
width: 6px;
}
}
&:indeterminate + .form-icon {
background: $primary-color;
border-color: $primary-color;
&::before {
background: $bg-color-light;
content: "";
height: 2px;
left: 50%;
margin-left: -5px;
margin-top: -1px;
position: absolute;
top: 50%;
width: 10px;
}
}
}
}
.form-radio {
.form-icon {
border-radius: 50%;
}
input {
&:checked + .form-icon {
&::before {
background: $bg-color-light;
border-radius: 50%;
content: "";
height: 6px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
}
}
}
}
// Form element: Switch
.form-switch {
padding-left: ($unit-8 + $control-padding-x);
.form-icon {
background: $gray-color;
background-clip: padding-box;
border-radius: $unit-2 + $border-width;
height: $unit-4 + $border-width * 2;
left: 0;
top: ($control-size-sm - $unit-4) / 2 - $border-width;
width: $unit-8;
&::before {
background: $bg-color-light;
border-radius: 50%;
content: "";
display: block;
height: $unit-4;
left: 0;
position: absolute;
top: 0;
transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
width: $unit-4;
}
}
input {
&:checked + .form-icon {
&::before {
left: 14px;
}
}
&:active + .form-icon {
&::before {
background: $bg-color;
}
}
}
}
// Form element: Input groups
.input-group {
display: flex;
.input-group-addon {
background: $bg-color;
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
line-height: $line-height;
padding: $control-padding-y $control-padding-x;
white-space: nowrap;
&.addon-sm {
font-size: $font-size-sm;
padding: $control-padding-y-sm $control-padding-x-sm;
}
&.addon-lg {
font-size: $font-size-lg;
padding: $control-padding-y-lg $control-padding-x-lg;
}
}
.form-input,
.form-select {
flex: 1 1 auto;
width: 1%;
}
.input-group-btn {
z-index: $zindex-0;
}
.form-input,
.form-select,
.input-group-addon,
.input-group-btn {
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: -$border-width;
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -$border-width;
}
&:focus {
z-index: $zindex-0 + 1;
}
}
.form-select {
width: auto;
}
&.input-inline {
display: inline-flex;
}
}
// Form validation states
.form-input,
.form-select {
.has-success &,
&.is-success {
background: lighten($success-color, 53%);
border-color: $success-color;
&:focus {
@include control-shadow($success-color);
}
}
.has-error &,
&.is-error {
background: lighten($error-color, 53%);
border-color: $error-color;
&:focus {
@include control-shadow($error-color);
}
}
}
.form-checkbox,
.form-radio,
.form-switch {
.has-error &,
&.is-error {
.form-icon {
border-color: $error-color;
}
input {
&:checked + .form-icon {
background: $error-color;
border-color: $error-color;
}
&:focus + .form-icon {
@include control-shadow($error-color);
border-color: $error-color;
}
}
}
}
.form-checkbox {
.has-error &,
&.is-error {
input {
&:indeterminate + .form-icon {
background: $error-color;
border-color: $error-color;
}
}
}
}
// validation based on :placeholder-shown (Edge doesn't support it yet)
.form-input {
&:not(:placeholder-shown) {
&:invalid {
border-color: $error-color;
&:focus {
@include control-shadow($error-color);
background: lighten($error-color, 53%);
}
& + .form-input-hint {
color: $error-color;
}
}
}
}
// Form disabled and readonly
.form-input,
.form-select {
&:disabled,
&.disabled {
background-color: $bg-color-dark;
cursor: not-allowed;
opacity: .5;
}
}
.form-input {
&[readonly] {
background-color: $bg-color;
}
}
input {
&:disabled,
&.disabled {
& + .form-icon {
background: $bg-color-dark;
cursor: not-allowed;
opacity: .5;
}
}
}
.form-switch {
input {
&:disabled,
&.disabled {
& + .form-icon::before {
background: $bg-color-light;
}
}
}
}
// Form horizontal
.form-horizontal {
padding: $layout-spacing 0;
.form-group {
display: flex;
flex-wrap: wrap;
}
}
// Form inline
.form-inline {
display: inline-block;
}

22
Start/Client/Sass/Spectre/_hero.scss Normal file
View file

@ -0,0 +1,22 @@
// Hero
.hero {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 4rem;
padding-top: 4rem;
&.hero-sm {
padding-bottom: 2rem;
padding-top: 2rem;
}
&.hero-lg {
padding-bottom: 8rem;
padding-top: 8rem;
}
.hero-body {
padding: $layout-spacing;
}
}

5
Start/Client/Sass/Spectre/_icons.scss Normal file
View file

@ -0,0 +1,5 @@
// CSS Icons
@import "icons/icons-core";
@import "icons/icons-navigation";
@import "icons/icons-action";
@import "icons/icons-object";

34
Start/Client/Sass/Spectre/_labels.scss Normal file
View file

@ -0,0 +1,34 @@
// Labels
.label {
@include label-base();
@include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
display: inline-block;
// Label rounded
&.label-rounded {
border-radius: 5rem;
padding-left: .4rem;
padding-right: .4rem;
}
// Label colors
&.label-primary {
@include label-variant($light-color, $primary-color);
}
&.label-secondary {
@include label-variant($primary-color, $secondary-color);
}
&.label-success {
@include label-variant($light-color, $success-color);
}
&.label-warning {
@include label-variant($light-color, $warning-color);
}
&.label-error {
@include label-variant($light-color, $error-color);
}
}

446
Start/Client/Sass/Spectre/_layout.scss Normal file
View file

@ -0,0 +1,446 @@
// Layout
.container {
margin-left: auto;
margin-right: auto;
padding-left: $layout-spacing;
padding-right: $layout-spacing;
width: 100%;
$grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
&.grid-xl {
max-width: $grid-spacing * 2 + $size-xl;
}
&.grid-lg {
max-width: $grid-spacing * 2 + $size-lg;
}
&.grid-md {
max-width: $grid-spacing * 2 + $size-md;
}
&.grid-sm {
max-width: $grid-spacing * 2 + $size-sm;
}
&.grid-xs {
max-width: $grid-spacing * 2 + $size-xs;
}
}
// Responsive breakpoint system
.show-xs,
.show-sm,
.show-md,
.show-lg,
.show-xl {
display: none !important;
}
// Responsive grid system
.cols,
.columns {
display: flex;
flex-wrap: wrap;
margin-left: -$layout-spacing;
margin-right: -$layout-spacing;
&.col-gapless {
margin-left: 0;
margin-right: 0;
& > .column {
padding-left: 0;
padding-right: 0;
}
}
&.col-oneline {
flex-wrap: nowrap;
overflow-x: auto;
}
}
[class~="col-"],
.column {
flex: 1;
max-width: 100%;
padding-left: $layout-spacing;
padding-right: $layout-spacing;
&.col-12,
&.col-11,
&.col-10,
&.col-9,
&.col-8,
&.col-7,
&.col-6,
&.col-5,
&.col-4,
&.col-3,
&.col-2,
&.col-1,
&.col-auto {
flex: none;
}
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.66666667%;
}
.col-10 {
width: 83.33333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.66666667%;
}
.col-7 {
width: 58.33333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.66666667%;
}
.col-4 {
width: 33.33333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.66666667%;
}
.col-1 {
width: 8.33333333%;
}
.col-auto {
flex: 0 0 auto;
max-width: none;
width: auto;
}
.col-mx-auto {
margin-left: auto;
margin-right: auto;
}
.col-ml-auto {
margin-left: auto;
}
.col-mr-auto {
margin-right: auto;
}
@media (max-width: $size-xl) {
.col-xl-12,
.col-xl-11,
.col-xl-10,
.col-xl-9,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-5,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-xl-1,
.col-xl-auto {
flex: none;
}
.col-xl-12 {
width: 100%;
}
.col-xl-11 {
width: 91.66666667%;
}
.col-xl-10 {
width: 83.33333333%;
}
.col-xl-9 {
width: 75%;
}
.col-xl-8 {
width: 66.66666667%;
}
.col-xl-7 {
width: 58.33333333%;
}
.col-xl-6 {
width: 50%;
}
.col-xl-5 {
width: 41.66666667%;
}
.col-xl-4 {
width: 33.33333333%;
}
.col-xl-3 {
width: 25%;
}
.col-xl-2 {
width: 16.66666667%;
}
.col-xl-1 {
width: 8.33333333%;
}
.col-xl-auto {
width: auto;
}
.hide-xl {
display: none !important;
}
.show-xl {
display: block !important;
}
}
@media (max-width: $size-lg) {
.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1,
.col-lg-auto {
flex: none;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-auto {
width: auto;
}
.hide-lg {
display: none !important;
}
.show-lg {
display: block !important;
}
}
@media (max-width: $size-md) {
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-md-auto {
flex: none;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-auto {
width: auto;
}
.hide-md {
display: none !important;
}
.show-md {
display: block !important;
}
}
@media (max-width: $size-sm) {
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1,
.col-sm-auto {
flex: none;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-auto {
width: auto;
}
.hide-sm {
display: none !important;
}
.show-sm {
display: block !important;
}
}
@media (max-width: $size-xs) {
.col-xs-12,
.col-xs-11,
.col-xs-10,
.col-xs-9,
.col-xs-8,
.col-xs-7,
.col-xs-6,
.col-xs-5,
.col-xs-4,
.col-xs-3,
.col-xs-2,
.col-xs-1,
.col-xs-auto {
flex: none;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-auto {
width: auto;
}
.hide-xs {
display: none !important;
}
.show-xs {
display: block !important;
}
}

75
Start/Client/Sass/Spectre/_media.scss Normal file
View file

@ -0,0 +1,75 @@
// Media
// Image responsive
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
// object-fit support is coming to Microsoft Edge
// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
.img-fit-cover {
object-fit: cover;
}
.img-fit-contain {
object-fit: contain;
}
// Video responsive
.video-responsive {
display: block;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
&::before {
content: "";
display: block;
padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
}
iframe,
object,
embed {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
}
video.video-responsive {
height: auto;
max-width: 100%;
&::before {
content: none;
}
}
.video-responsive-4-3 {
&::before {
padding-bottom: 75%; // Ratio 4:3
}
}
.video-responsive-1-1 {
&::before {
padding-bottom: 100%; // Ratio 1:1
}
}
// Figure
.figure {
margin: 0 0 $layout-spacing 0;
.figure-caption {
color: $gray-color-dark;
margin-top: $layout-spacing;
}
}

66
Start/Client/Sass/Spectre/_menus.scss Normal file
View file

@ -0,0 +1,66 @@
// Menus
.menu {
@include shadow-variant(.05rem);
background: $bg-color-light;
border-radius: $border-radius;
list-style: none;
margin: 0;
min-width: $control-width-xs;
padding: $unit-2;
transform: translateY($layout-spacing-sm);
z-index: $zindex-3;
&.menu-nav {
background: transparent;
box-shadow: none;
}
.menu-item {
margin-top: 0;
padding: 0 $unit-2;
position: relative;
text-decoration: none;
& > a {
border-radius: $border-radius;
color: inherit;
display: block;
margin: 0 (-$unit-2);
padding: $unit-1 $unit-2;
text-decoration: none;
&:focus,
&:hover {
background: $secondary-color;
color: $primary-color;
}
&:active,
&.active {
background: $secondary-color;
color: $primary-color;
}
}
.form-checkbox,
.form-radio,
.form-switch {
margin: $unit-h 0;
}
& + .menu-item {
margin-top: $unit-1;
}
}
.menu-badge {
align-items: center;
display: flex;
height: 100%;
position: absolute;
right: 0;
top: 0;
.label {
margin-right: $unit-2;
}
}
}

57
Start/Client/Sass/Spectre/_meters.scss Normal file
View file

@ -0,0 +1,57 @@
// Meters
// Credit: https://css-tricks.com/html5-meter-element/
.meter {
appearance: none;
background: $bg-color;
border: 0;
border-radius: $border-radius;
display: block;
width: 100%;
height: $unit-4;
&::-webkit-meter-inner-element {
display: block;
}
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-webkit-meter-suboptimum-value,
&::-webkit-meter-even-less-good-value {
border-radius: $border-radius;
}
&::-webkit-meter-bar {
background: $bg-color;
}
&::-webkit-meter-optimum-value {
background: $success-color;
}
&::-webkit-meter-suboptimum-value {
background: $warning-color;
}
&::-webkit-meter-even-less-good-value {
background: $error-color;
}
&::-moz-meter-bar,
&:-moz-meter-optimum,
&:-moz-meter-sub-optimum,
&:-moz-meter-sub-sub-optimum {
border-radius: $border-radius;
}
&:-moz-meter-optimum::-moz-meter-bar {
background: $success-color;
}
&:-moz-meter-sub-optimum::-moz-meter-bar {
background: $warning-color;
}
&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: $error-color;
}
}

10
Start/Client/Sass/Spectre/_mixins.scss Normal file
View file

@ -0,0 +1,10 @@
// Mixins
@import "mixins/avatar";
@import "mixins/button";
@import "mixins/clearfix";
@import "mixins/color";
@import "mixins/label";
@import "mixins/position";
@import "mixins/shadow";
@import "mixins/text";
@import "mixins/toast";

87
Start/Client/Sass/Spectre/_modals.scss Normal file
View file

@ -0,0 +1,87 @@
// Modals
.modal {
align-items: center;
bottom: 0;
display: none;
justify-content: center;
left: 0;
opacity: 0;
overflow: hidden;
padding: $layout-spacing;
position: fixed;
right: 0;
top: 0;
&:target,
&.active {
display: flex;
opacity: 1;
z-index: $zindex-4;
.modal-overlay {
background: rgba($bg-color, .75);
bottom: 0;
cursor: default;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.modal-container {
animation: slide-down .2s ease 1;
z-index: $zindex-0;
}
}
&.modal-sm {
.modal-container {
max-width: $control-width-sm;
padding: 0 $unit-2;
}
}
&.modal-lg {
.modal-overlay {
background: $bg-color-light;
}
.modal-container {
box-shadow: none;
max-width: $control-width-lg;
}
}
}
.modal-container {
@include shadow-variant(.2rem);
background: $bg-color-light;
border-radius: $border-radius;
display: flex;
flex-direction: column;
max-height: 75vh;
max-width: $control-width-md;
padding: 0 $unit-4;
width: 100%;
&.modal-fullheight {
max-height: 100vh;
}
.modal-header {
color: $dark-color;
padding: $unit-4;
}
.modal-body {
overflow-y: auto;
padding: $unit-4;
position: relative;
}
.modal-footer {
padding: $unit-4;
text-align: right;
}
}

28
Start/Client/Sass/Spectre/_navbar.scss Executable file
View file

@ -0,0 +1,28 @@
// Navbar
.navbar {
align-items: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.navbar-section {
align-items: center;
display: flex;
flex: 1 0 0;
&:not(:first-child):last-child {
justify-content: flex-end;
}
}
.navbar-center {
align-items: center;
display: flex;
flex: 0 0 auto;
}
.navbar-brand {
font-size: $font-size-lg;
text-decoration: none;
}
}

34
Start/Client/Sass/Spectre/_navs.scss Normal file
View file

@ -0,0 +1,34 @@
// Navs
.nav {
display: flex;
flex-direction: column;
list-style: none;
margin: $unit-1 0;
.nav-item {
a {
color: $gray-color-dark;
padding: $unit-1 $unit-2;
text-decoration: none;
&:focus,
&:hover {
color: $primary-color;
}
}
&.active {
& > a {
color: darken($gray-color-dark, 10%);
font-weight: bold;
&:focus,
&:hover {
color: $primary-color;
}
}
}
}
& .nav {
margin-bottom: $unit-2;
margin-left: $unit-4;
}
}

446
Start/Client/Sass/Spectre/_normalize.scss Normal file
View file

@ -0,0 +1,446 @@
/* Manually forked from Normalize.css */
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8 (removed).
*/
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers. (removed)
* 2. Correct the odd `em` font sizing in all browsers.
*/
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* Modify default styling of address.
*/
address {
font-style: normal;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
*/
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: $mono-font-family; /* 1 (changed) */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-. (Removed)
*/
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
font-weight: 400; /* (added) */
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 (changed) */
font-size: inherit; /* 1 (changed) */
line-height: inherit; /* 1 (changed) */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule (removed).
*/
/**
* Change the border, margin, and padding in all browsers (opinionated) (changed).
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
outline: none;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}

95
Start/Client/Sass/Spectre/_off-canvas.scss Normal file
View file

@ -0,0 +1,95 @@
// Off canvas menus
$off-canvas-breakpoint: $size-lg !default;
.off-canvas {
display: flex;
flex-flow: nowrap;
height: 100%;
position: relative;
width: 100%;
.off-canvas-toggle {
display: block;
position: absolute;
top: $layout-spacing;
transition: none;
z-index: $zindex-0;
@if $rtl == true {
right: $layout-spacing;
} @else {
left: $layout-spacing;
}
}
.off-canvas-sidebar {
background: $bg-color;
bottom: 0;
min-width: 10rem;
overflow-y: auto;
position: fixed;
top: 0;
transition: transform .25s;
z-index: $zindex-2;
@if $rtl == true {
right: 0;
transform: translateX(100%);
} @else {
left: 0;
transform: translateX(-100%);
}
}
.off-canvas-content {
flex: 1 1 auto;
height: 100%;
padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
}
.off-canvas-overlay {
background: rgba($dark-color, .1);
border-color: transparent;
border-radius: 0;
bottom: 0;
display: none;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.off-canvas-sidebar {
&:target,
&.active {
transform: translateX(0);
}
&:target ~ .off-canvas-overlay,
&.active ~ .off-canvas-overlay {
display: block;
z-index: $zindex-1;
}
}
}
// Responsive layout
@media (min-width: $off-canvas-breakpoint) {
.off-canvas {
&.off-canvas-sidebar-show {
.off-canvas-toggle {
display: none;
}
.off-canvas-sidebar {
flex: 0 0 auto;
position: relative;
transform: none;
}
.off-canvas-overlay {
display: none !important;
}
}
}
}

60
Start/Client/Sass/Spectre/_pagination.scss Normal file
View file

@ -0,0 +1,60 @@
// Pagination
.pagination {
display: flex;
list-style: none;
margin: $unit-1 0;
padding: $unit-1 0;
.page-item {
margin: $unit-1 $unit-o;
span {
display: inline-block;
padding: $unit-1 $unit-1;
}
a {
border-radius: $border-radius;
display: inline-block;
padding: $unit-1 $unit-2;
text-decoration: none;
&:focus,
&:hover {
color: $primary-color;
}
}
&.disabled {
a {
cursor: default;
opacity: .5;
pointer-events: none;
}
}
&.active {
a {
background: $primary-color;
color: $light-color;
}
}
&.page-prev,
&.page-next {
flex: 1 0 50%;
}
&.page-next {
text-align: right;
}
.page-item-title {
margin: 0;
}
.page-item-subtitle {
margin: 0;
opacity: .5;
}
}
}

23
Start/Client/Sass/Spectre/_panels.scss Normal file
View file

@ -0,0 +1,23 @@
// Panels
.panel {
border: $border-width solid $border-color;
border-radius: $border-radius;
display: flex;
flex-direction: column;
.panel-header,
.panel-footer {
flex: 0 0 auto;
padding: $layout-spacing-lg;
}
.panel-nav {
flex: 0 0 auto;
}
.panel-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0 $layout-spacing-lg;
}
}

135
Start/Client/Sass/Spectre/_parallax.scss Normal file
View file

@ -0,0 +1,135 @@
// Parallax
$parallax-deg: 3deg !default;
$parallax-offset: 4.5px !default;
$parallax-offset-z: 50px !default;
$parallax-perspective: 1000px !default;
$parallax-scale: .95 !default;
$parallax-fade-color: rgba(255, 255, 255, .35) !default;
// Mixin: Parallax direction
@mixin parallax-dir() {
height: 50%;
outline: none;
position: absolute;
width: 50%;
z-index: $zindex-1;
}
.parallax {
display: block;
height: auto;
position: relative;
width: auto;
.parallax-content {
@include shadow-variant(1rem);
height: auto;
transform: perspective($parallax-perspective);
transform-style: preserve-3d;
transition: all .4s ease;
width: 100%;
&::before {
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
.parallax-front {
align-items: center;
color: $light-color;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
text-align: center;
text-shadow: 0 0 20px rgba($dark-color, .75);
top: 0;
transform: translateZ($parallax-offset-z) scale($parallax-scale);
transition: transform .4s;
width: 100%;
z-index: $zindex-0;
}
.parallax-top-left {
@include parallax-dir();
left: 0;
top: 0;
&:focus ~ .parallax-content,
&:hover ~ .parallax-content {
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
&::before {
background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
}
.parallax-front {
transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
}
}
}
.parallax-top-right {
@include parallax-dir();
right: 0;
top: 0;
&:focus ~ .parallax-content,
&:hover ~ .parallax-content {
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
&::before {
background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
}
.parallax-front {
transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
}
}
}
.parallax-bottom-left {
@include parallax-dir();
bottom: 0;
left: 0;
&:focus ~ .parallax-content,
&:hover ~ .parallax-content {
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
&::before {
background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
}
.parallax-front {
transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
}
}
}
.parallax-bottom-right {
@include parallax-dir();
bottom: 0;
right: 0;
&:focus ~ .parallax-content,
&:hover ~ .parallax-content {
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
&::before {
background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
}
.parallax-front {
transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
}
}
}
}

65
Start/Client/Sass/Spectre/_popovers.scss Normal file
View file

@ -0,0 +1,65 @@
// Popovers
.popover {
display: inline-block;
position: relative;
.popover-container {
left: 50%;
opacity: 0;
padding: $layout-spacing;
position: absolute;
top: 0;
transform: translate(-50%, -50%) scale(0);
transition: transform .2s;
width: $control-width-sm;
z-index: $zindex-3;
}
*:focus + .popover-container,
&:hover .popover-container {
display: block;
opacity: 1;
transform: translate(-50%, -100%) scale(1);
}
&.popover-right {
.popover-container {
left: 100%;
top: 50%;
}
*:focus + .popover-container,
&:hover .popover-container {
transform: translate(0, -50%) scale(1);
}
}
&.popover-bottom {
.popover-container {
left: 50%;
top: 100%;
}
*:focus + .popover-container,
&:hover .popover-container {
transform: translate(-50%, 0) scale(1);
}
}
&.popover-left {
.popover-container {
left: 0;
top: 50%;
}
*:focus + .popover-container,
&:hover .popover-container {
transform: translate(-100%, -50%) scale(1);
}
}
.card {
@include shadow-variant(.2rem);
border: 0;
}
}

45
Start/Client/Sass/Spectre/_progress.scss Normal file
View file

@ -0,0 +1,45 @@
// Progress
// Credit: https://css-tricks.com/html5-progress-element/
.progress {
appearance: none;
background: $bg-color-dark;
border: 0;
border-radius: $border-radius;
color: $primary-color;
height: $unit-1;
position: relative;
width: 100%;
&::-webkit-progress-bar {
background: transparent;
border-radius: $border-radius;
}
&::-webkit-progress-value {
background: $primary-color;
border-radius: $border-radius;
}
&::-moz-progress-bar {
background: $primary-color;
border-radius: $border-radius;
}
&:indeterminate {
animation: progress-indeterminate 1.5s linear infinite;
background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
&::-moz-progress-bar {
background: transparent;
}
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}

99
Start/Client/Sass/Spectre/_sliders.scss Normal file
View file

@ -0,0 +1,99 @@
// Sliders
// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
.slider {
appearance: none;
background: transparent;
display: block;
width: 100%;
height: $unit-6;
&:focus {
@include control-shadow();
outline: none;
}
&.tooltip:not([data-tooltip]) {
&::after {
content: attr(value);
}
}
// Slider Thumb
&::-webkit-slider-thumb {
-webkit-appearance: none;
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
margin-top: -($unit-3 - $unit-h) / 2;
transition: transform .2s;
width: $unit-3;
}
&::-moz-range-thumb {
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
transition: transform .2s;
width: $unit-3;
}
&::-ms-thumb {
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
transition: transform .2s;
width: $unit-3;
}
&:active {
&::-webkit-slider-thumb {
transform: scale(1.25);
}
&::-moz-range-thumb {
transform: scale(1.25);
}
&::-ms-thumb {
transform: scale(1.25);
}
}
&:disabled,
&.disabled {
&::-webkit-slider-thumb {
background: $gray-color-light;
transform: scale(1);
}
&::-moz-range-thumb {
background: $gray-color-light;
transform: scale(1);
}
&::-ms-thumb {
background: $gray-color-light;
transform: scale(1);
}
}
// Slider Track
&::-webkit-slider-runnable-track {
background: $bg-color-dark;
border-radius: $border-radius;
height: $unit-h;
width: 100%;
}
&::-moz-range-track {
background: $bg-color-dark;
border-radius: $border-radius;
height: $unit-h;
width: 100%;
}
&::-ms-track {
background: $bg-color-dark;
border-radius: $border-radius;
height: $unit-h;
width: 100%;
}
&::-ms-fill-lower {
background: $primary-color;
}
}

71
Start/Client/Sass/Spectre/_steps.scss Normal file
View file

@ -0,0 +1,71 @@
// Steps
.step {
display: flex;
flex-wrap: nowrap;
list-style: none;
margin: $unit-1 0;
width: 100%;
.step-item {
flex: 1 1 0;
margin-top: 0;
min-height: 1rem;
text-align: center;
position: relative;
&:not(:first-child)::before {
background: $primary-color;
content: "";
height: 2px;
left: -50%;
position: absolute;
top: 9px;
width: 100%;
}
a {
color: $primary-color;
display: inline-block;
padding: 20px 10px 0;
text-decoration: none;
&::before {
background: $primary-color;
border: $border-width-lg solid $light-color;
border-radius: 50%;
content: "";
display: block;
height: $unit-3;
left: 50%;
position: absolute;
top: $unit-1;
transform: translateX(-50%);
width: $unit-3;
z-index: $zindex-0;
}
}
&.active {
a {
&::before {
background: $light-color;
border: $border-width-lg solid $primary-color;
}
}
& ~ .step-item {
&::before {
background: $border-color;
}
a {
color: $gray-color;
&::before {
background: $border-color;
}
}
}
}
}
}

57
Start/Client/Sass/Spectre/_tables.scss Normal file
View file

@ -0,0 +1,57 @@
// Tables
.table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
@if $rtl == true {
text-align: right;
} @else {
text-align: left;
}
&.table-striped {
tbody {
tr:nth-of-type(odd) {
background: $bg-color;
}
}
}
&,
&.table-striped {
tbody {
tr {
&.active {
background: $bg-color-dark;
}
}
}
}
&.table-hover {
tbody {
tr {
&:hover {
background: $bg-color-dark;
}
}
}
}
// Scollable tables
&.table-scroll {
display: block;
overflow-x: auto;
padding-bottom: .75rem;
white-space: nowrap;
}
td,
th {
border-bottom: $border-width solid $border-color;
padding: $unit-3 $unit-2;
}
th {
border-bottom-width: $border-width-lg;
}
}

66
Start/Client/Sass/Spectre/_tabs.scss Normal file
View file

@ -0,0 +1,66 @@
// Tabs
.tab {
align-items: center;
border-bottom: $border-width solid $border-color;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: $unit-1 0 ($unit-1 - $border-width) 0;
.tab-item {
margin-top: 0;
a {
border-bottom: $border-width-lg solid transparent;
color: inherit;
display: block;
margin: 0 $unit-2 0 0;
padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
text-decoration: none;
&:focus,
&:hover {
color: $link-color;
}
}
&.active a,
a.active {
border-bottom-color: $primary-color;
color: $link-color;
}
&.tab-action {
flex: 1 0 auto;
text-align: right;
}
.btn-clear {
margin-top: -$unit-1;
}
}
&.tab-block {
.tab-item {
flex: 1 0 0;
text-align: center;
a {
margin: 0;
}
.badge {
&[data-badge]::after {
position: absolute;
right: $unit-h;
top: $unit-h;
transform: translate(0, 0);
}
}
}
}
&:not(.tab-block) {
.badge {
padding-right: 0;
}
}
}

38
Start/Client/Sass/Spectre/_tiles.scss Normal file
View file

@ -0,0 +1,38 @@
// Tiles
.tile {
align-content: space-between;
align-items: flex-start;
display: flex;
.tile-icon,
.tile-action {
flex: 0 0 auto;
}
.tile-content {
flex: 1 1 auto;
&:not(:first-child) {
padding-left: $unit-2;
}
&:not(:last-child) {
padding-right: $unit-2;
}
}
.tile-title,
.tile-subtitle {
line-height: $line-height;
}
&.tile-centered {
align-items: center;
.tile-content {
overflow: hidden;
}
.tile-title,
.tile-subtitle {
@include text-ellipsis();
margin-bottom: 0;
}
}
}

56
Start/Client/Sass/Spectre/_timelines.scss Normal file
View file

@ -0,0 +1,56 @@
// Timelines
.timeline {
.timeline-item {
display: flex;
margin-bottom: $unit-6;
position: relative;
&::before {
background: $border-color;
content: "";
height: 100%;
left: 11px;
position: absolute;
top: $unit-6;
width: 2px;
}
.timeline-left {
flex: 0 0 auto;
}
.timeline-content {
flex: 1 1 auto;
padding: 2px 0 2px $layout-spacing-lg;
}
.timeline-icon {
align-items: center;
border-radius: 50%;
color: $light-color;
display: flex;
height: $unit-6;
justify-content: center;
text-align: center;
width: $unit-6;
&::before {
border: $border-width-lg solid $primary-color;
border-radius: 50%;
content: "";
display: block;
height: $unit-2;
left: $unit-2;
position: absolute;
top: $unit-2;
width: $unit-2;
}
&.icon-lg {
background: $primary-color;
line-height: $line-height;
&::before {
content: none;
}
}
}
}
}

48
Start/Client/Sass/Spectre/_toasts.scss Normal file
View file

@ -0,0 +1,48 @@
// Toasts
.toast {
@include toast-variant($dark-color);
border: $border-width solid $dark-color;
border-radius: $border-radius;
color: $light-color;
display: block;
padding: $layout-spacing;
width: 100%;
&.toast-primary {
@include toast-variant($primary-color);
}
&.toast-success {
@include toast-variant($success-color);
}
&.toast-warning {
@include toast-variant($warning-color);
}
&.toast-error {
@include toast-variant($error-color);
}
a {
color: $light-color;
text-decoration: underline;
&:focus,
&:hover,
&:active,
&.active {
opacity: .75;
}
}
.btn-clear {
margin: $unit-h;
}
p {
&:last-child {
margin-bottom: 0;
}
}
}

79
Start/Client/Sass/Spectre/_tooltips.scss Normal file
View file

@ -0,0 +1,79 @@
// Tooltips
.tooltip {
position: relative;
&::after {
background: rgba($dark-color, .95);
border-radius: $border-radius;
bottom: 100%;
color: $light-color;
content: attr(data-tooltip);
display: block;
font-size: $font-size-sm;
left: 50%;
max-width: $control-width-sm;
opacity: 0;
overflow: hidden;
padding: $unit-1 $unit-2;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
transform: translate(-50%, $unit-2);
transition: opacity .2s, transform .2s;
white-space: pre;
z-index: $zindex-3;
}
&:focus,
&:hover {
&::after {
opacity: 1;
transform: translate(-50%, -$unit-1);
}
}
&[disabled],
&.disabled {
pointer-events: auto;
}
&.tooltip-right {
&::after {
bottom: 50%;
left: 100%;
transform: translate(-$unit-1, 50%);
}
&:focus,
&:hover {
&::after {
transform: translate($unit-1, 50%);
}
}
}
&.tooltip-bottom {
&::after {
bottom: auto;
top: 100%;
transform: translate(-50%, -$unit-2);
}
&:focus,
&:hover {
&::after {
transform: translate(-50%, $unit-1);
}
}
}
&.tooltip-left {
&::after {
bottom: 50%;
left: auto;
right: 100%;
transform: translate($unit-2, 50%);
}
&:focus,
&:hover {
&::after {
transform: translate(-$unit-1, 50%);
}
}
}
}

129
Start/Client/Sass/Spectre/_typography.scss Normal file
View file

@ -0,0 +1,129 @@
// Typography
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: 500;
line-height: 1.2;
margin-bottom: .5em;
margin-top: 0;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-weight: 500;
}
h1,
.h1 {
font-size: 2rem;
}
h2,
.h2 {
font-size: 1.6rem;
}
h3,
.h3 {
font-size: 1.4rem;
}
h4,
.h4 {
font-size: 1.2rem;
}
h5,
.h5 {
font-size: 1rem;
}
h6,
.h6 {
font-size: .8rem;
}
// Paragraphs
p {
margin: 0 0 $line-height;
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
abbr[title] {
border-bottom: $border-width dotted;
cursor: help;
text-decoration: none;
}
kbd {
@include label-base();
@include label-variant($light-color, $dark-color);
font-size: $font-size-sm;
}
mark {
@include label-variant($body-font-color, $highlight-color);
border-bottom: $unit-o solid darken($highlight-color, 15%);
border-radius: $border-radius;
padding: $unit-o $unit-h 0;
}
// Blockquote
blockquote {
border-left: $border-width-lg solid $border-color;
margin-left: 0;
padding: $unit-2 $unit-4;
p:last-child {
margin-bottom: 0;
}
}
// Lists
ul,
ol {
margin: $unit-4 0 $unit-4 $unit-4;
padding: 0;
ul,
ol {
margin: $unit-4 0 $unit-4 $unit-4;
}
li {
margin-top: $unit-2;
}
}
ul {
list-style: disc inside;
ul {
list-style-type: circle;
}
}
ol {
list-style: decimal inside;
ol {
list-style-type: lower-alpha;
}
}
dl {
dt {
font-weight: bold;
}
dd {
margin: $unit-2 0 $unit-4 0;
}
}

8
Start/Client/Sass/Spectre/_utilities.scss Normal file
View file

@ -0,0 +1,8 @@
@import "utilities/colors";
@import "utilities/cursors";
@import "utilities/display";
@import "utilities/divider";
@import "utilities/loading";
@import "utilities/position";
@import "utilities/shapes";
@import "utilities/text";

117
Start/Client/Sass/Spectre/_variables.scss Normal file
View file

@ -0,0 +1,117 @@
// Core variables
$version: "0.5.9";
// Core features
$rtl: false !default;
// Core colors
$primary-color: #5755d9 !default;
$primary-color-dark: darken($primary-color, 3%) !default;
$primary-color-light: lighten($primary-color, 3%) !default;
$secondary-color: lighten($primary-color, 37.5%) !default;
$secondary-color-dark: darken($secondary-color, 3%) !default;
$secondary-color-light: lighten($secondary-color, 3%) !default;
// Gray colors
$dark-color: #303742 !default;
$light-color: #fff !default;
$gray-color: lighten($dark-color, 55%) !default;
$gray-color-dark: darken($gray-color, 30%) !default;
$gray-color-light: lighten($gray-color, 20%) !default;
$border-color: lighten($dark-color, 65%) !default;
$border-color-dark: darken($border-color, 10%) !default;
$border-color-light: lighten($border-color, 8%) !default;
$bg-color: lighten($dark-color, 75%) !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;
// Control colors
$success-color: #32b643 !default;
$warning-color: #ffb700 !default;
$error-color: #e85600 !default;
// Other colors
$code-color: #d73e48 !default;
$highlight-color: #ffe9b3 !default;
$body-bg: $bg-color-light !default;
$body-font-color: lighten($dark-color, 5%) !default;
$link-color: $primary-color !default;
$link-color-dark: darken($link-color, 10%) !default;
$link-color-light: lighten($link-color, 10%) !default;
// Fonts
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
$fallback-font-family: "Helvetica Neue", sans-serif !default;
$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
$body-font-family: $base-font-family, $fallback-font-family !default;
// Unit sizes
$unit-o: .05rem !default;
$unit-h: .1rem !default;
$unit-1: .2rem !default;
$unit-2: .4rem !default;
$unit-3: .6rem !default;
$unit-4: .8rem !default;
$unit-5: 1rem !default;
$unit-6: 1.2rem !default;
$unit-7: 1.4rem !default;
$unit-8: 1.6rem !default;
$unit-9: 1.8rem !default;
$unit-10: 2rem !default;
$unit-12: 2.4rem !default;
$unit-16: 3.2rem !default;
// Font sizes
$html-font-size: 20px !default;
$html-line-height: 1.5 !default;
$font-size: .8rem !default;
$font-size-sm: .7rem !default;
$font-size-lg: .9rem !default;
$line-height: 1.2rem !default;
// Sizes
$layout-spacing: $unit-2 !default;
$layout-spacing-sm: $unit-1 !default;
$layout-spacing-lg: $unit-4 !default;
$border-radius: $unit-h !default;
$border-width: $unit-o !default;
$border-width-lg: $unit-h !default;
$control-size: $unit-9 !default;
$control-size-sm: $unit-7 !default;
$control-size-lg: $unit-10 !default;
$control-padding-x: $unit-2 !default;
$control-padding-x-sm: $unit-2 * .75 !default;
$control-padding-x-lg: $unit-2 * 1.5 !default;
$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
$control-icon-size: .8rem !default;
$control-width-xs: 180px !default;
$control-width-sm: 320px !default;
$control-width-md: 640px !default;
$control-width-lg: 960px !default;
$control-width-xl: 1280px !default;
// Responsive breakpoints
$size-xs: 480px !default;
$size-sm: 600px !default;
$size-md: 840px !default;
$size-lg: 960px !default;
$size-xl: 1280px !default;
$size-2x: 1440px !default;
$responsive-breakpoint: $size-xs !default;
// Z-index
$zindex-0: 1 !default;
$zindex-1: 100 !default;
$zindex-2: 200 !default;
$zindex-3: 300 !default;
$zindex-4: 400 !default;

34
Start/Client/Sass/Spectre/_viewer-360.scss Normal file
View file

@ -0,0 +1,34 @@
// 360 Degree Viewer
// Mixin: Viewer slider sizes
@mixin viewer-slider-size($image-number: 36) {
@for $s from 1 through ($image-number) {
.viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
}
}
}
.viewer-360 {
align-items: center;
display: flex;
flex-direction: column;
// Copy and add more numbers if you need
@include viewer-slider-size(36);
.viewer-slider {
cursor: ew-resize;
margin: 1rem;
order: 2;
width: 60%;
}
.viewer-image {
background-position-y: 0;
background-repeat: no-repeat;
background-size: 100%;
max-width: 100%;
order: 1;
}
}

315
Start/Client/Sass/Spectre/icons/_icons-action.scss Normal file
View file

@ -0,0 +1,315 @@
// Icon resize
.icon-resize-horiz,
.icon-resize-vert {
&::before,
&::after {
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
height: .45em;
width: .45em;
}
&::before {
transform: translate(-50%, -90%) rotate(45deg);
}
&::after {
transform: translate(-50%, -10%) rotate(225deg);
}
}
.icon-resize-horiz {
&::before {
transform: translate(-90%, -50%) rotate(-45deg);
}
&::after {
transform: translate(-10%, -50%) rotate(135deg);
}
}
// Icon more
.icon-more-horiz,
.icon-more-vert {
&::before {
background: currentColor;
box-shadow: -.4em 0, .4em 0;
border-radius: 50%;
height: 3px;
width: 3px;
}
}
.icon-more-vert {
&::before {
box-shadow: 0 -.4em, 0 .4em;
}
}
// Icon plus, minus, cross
.icon-plus,
.icon-minus,
.icon-cross {
&::before {
background: currentColor;
height: $icon-border-width;
width: 100%;
}
}
.icon-plus,
.icon-cross {
&::after {
background: currentColor;
height: 100%;
width: $icon-border-width;
}
}
.icon-cross {
&::before {
width: 100%;
}
&::after {
height: 100%;
}
&::before,
&::after {
transform: translate(-50%, -50%) rotate(45deg);
}
}
// Icon check
.icon-check {
&::before {
border: $icon-border-width solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
width: .9em;
transform: translate(-50%, -75%) rotate(-45deg);
}
}
// Icon stop
.icon-stop {
border: $icon-border-width solid currentColor;
border-radius: 50%;
&::before {
background: currentColor;
height: $icon-border-width;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
}
}
// Icon shutdown
.icon-shutdown {
border: $icon-border-width solid currentColor;
border-radius: 50%;
border-top-color: transparent;
&::before {
background: currentColor;
content: "";
height: .5em;
top: .1em;
width: $icon-border-width;
}
}
// Icon refresh
.icon-refresh {
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50%;
border-right-color: transparent;
height: 1em;
width: 1em;
}
&::after {
border: .2em solid currentColor;
border-top-color: transparent;
border-left-color: transparent;
height: 0;
left: 80%;
top: 20%;
width: 0;
}
}
// Icon search
.icon-search {
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50%;
height: .75em;
left: 5%;
top: 5%;
transform: translate(0, 0) rotate(45deg);
width: .75em;
}
&::after {
background: currentColor;
height: $icon-border-width;
left: 80%;
top: 80%;
transform: translate(-50%, -50%) rotate(45deg);
width: .4em;
}
}
// Icon edit
.icon-edit {
&::before {
border: $icon-border-width solid currentColor;
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
}
&::after {
border: .15em solid currentColor;
border-top-color: transparent;
border-right-color: transparent;
height: 0;
left: 5%;
top: 95%;
transform: translate(0, -100%);
width: 0;
}
}
// Icon delete
.icon-delete {
&::before {
border: $icon-border-width solid currentColor;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
border-top: 0;
height: .75em;
top: 60%;
width: .75em;
}
&::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
height: $icon-border-width;
top: $icon-border-width/2;
width: .5em;
}
}
// Icon share
.icon-share {
border: $icon-border-width solid currentColor;
border-radius: $border-radius;
border-right: 0;
border-top: 0;
&::before {
border: $icon-border-width solid currentColor;
border-left: 0;
border-top: 0;
height: .4em;
left: 100%;
top: .25em;
transform: translate(-125%, -50%) rotate(-45deg);
width: .4em;
}
&::after {
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
border-radius: 75% 0;
height: .5em;
width: .6em;
}
}
// Icon flag
.icon-flag {
&::before {
background: currentColor;
height: 1em;
left: 15%;
width: $icon-border-width;
}
&::after {
border: $icon-border-width solid currentColor;
border-bottom-right-radius: $border-radius;
border-left: 0;
border-top-right-radius: $border-radius;
height: .65em;
top: 35%;
left: 60%;
width: .8em;
}
}
// Icon bookmark
.icon-bookmark {
&::before {
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
height: .9em;
width: .8em;
}
&::after {
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-left: 0;
border-radius: $border-radius;
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
}
}
// Icon download & upload
.icon-download,
.icon-upload {
border-bottom: $icon-border-width solid currentColor;
&::before {
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
height: .5em;
width: .5em;
transform: translate(-50%, -60%) rotate(-135deg);
}
&::after {
background: currentColor;
height: .6em;
top: 40%;
width: $icon-border-width;
}
}
.icon-upload {
&::before {
transform: translate(-50%, -60%) rotate(45deg);
}
&::after {
top: 50%;
}
}
// Icon copy
.icon-copy {
&::before {
border: $icon-border-width solid currentColor;
border-radius: $border-radius;
border-right: 0;
border-bottom: 0;
height: .8em;
left: 40%;
top: 35%;
width: .8em;
}
&::after {
border: $icon-border-width solid currentColor;
border-radius: $border-radius;
height: .8em;
left: 60%;
top: 60%;
width: .8em;
}
}

54
Start/Client/Sass/Spectre/icons/_icons-core.scss Normal file
View file

@ -0,0 +1,54 @@
// Icon variables
$icon-border-width: $border-width-lg;
$icon-prefix: "icon";
// Icon base style
.#{$icon-prefix} {
box-sizing: border-box;
display: inline-block;
font-size: inherit;
font-style: normal;
height: 1em;
position: relative;
text-indent: -9999px;
vertical-align: middle;
width: 1em;
&::before,
&::after {
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
// Icon sizes
&.icon-2x {
font-size: 1.6rem;
}
&.icon-3x {
font-size: 2.4rem;
}
&.icon-4x {
font-size: 3.2rem;
}
}
// Component icon support
.accordion,
.btn,
.toast,
.menu {
.#{$icon-prefix} {
vertical-align: -10%;
}
}
.btn-lg {
.#{$icon-prefix} {
vertical-align: -15%;
}
}

127
Start/Client/Sass/Spectre/icons/_icons-navigation.scss Normal file
View file

@ -0,0 +1,127 @@
// Icon arrows
.icon-arrow-down,
.icon-arrow-left,
.icon-arrow-right,
.icon-arrow-up,
.icon-downward,
.icon-back,
.icon-forward,
.icon-upward {
&::before {
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-right: 0;
height: .65em;
width: .65em;
}
}
.icon-arrow-down {
&::before {
transform: translate(-50%, -75%) rotate(225deg);
}
}
.icon-arrow-left {
&::before {
transform: translate(-25%, -50%) rotate(-45deg);
}
}
.icon-arrow-right {
&::before {
transform: translate(-75%, -50%) rotate(135deg);
}
}
.icon-arrow-up {
&::before {
transform: translate(-50%, -25%) rotate(45deg);
}
}
.icon-back,
.icon-forward {
&::after {
background: currentColor;
height: $icon-border-width;
width: .8em;
}
}
.icon-downward,
.icon-upward {
&::after {
background: currentColor;
height: .8em;
width: $icon-border-width;
}
}
.icon-back {
&::after {
left: 55%;
}
&::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
.icon-downward {
&::after {
top: 45%;
}
&::before {
transform: translate(-50%, -50%) rotate(-135deg);
}
}
.icon-forward {
&::after {
left: 45%;
}
&::before {
transform: translate(-50%, -50%) rotate(135deg);
}
}
.icon-upward {
&::after {
top: 55%;
}
&::before {
transform: translate(-50%, -50%) rotate(45deg);
}
}
// Icon caret
.icon-caret {
&::before {
border-top: .3em solid currentColor;
border-right: .3em solid transparent;
border-left: .3em solid transparent;
height: 0;
transform: translate(-50%, -25%);
width: 0;
}
}
// Icon menu
.icon-menu {
&::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
height: $icon-border-width;
width: 100%;
}
}
// Icon apps
.icon-apps {
&::before {
background: currentColor;
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
height: 3px;
width: 3px;
}
}

161
Start/Client/Sass/Spectre/icons/_icons-object.scss Normal file
View file

@ -0,0 +1,161 @@
// Icon time
.icon-time {
border: $icon-border-width solid currentColor;
border-radius: 50%;
&::before {
background: currentColor;
height: .4em;
transform: translate(-50%, -75%);
width: $icon-border-width;
}
&::after {
background: currentColor;
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
width: $icon-border-width;
}
}
// Icon mail
.icon-mail {
&::before {
border: $icon-border-width solid currentColor;
border-radius: $border-radius;
height: .8em;
width: 1em;
}
&::after {
border: $icon-border-width solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
width: .5em;
}
}
// Icon people
.icon-people {
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50%;
height: .45em;
top: 25%;
width: .45em;
}
&::after {
border: $icon-border-width solid currentColor;
border-radius: 50% 50% 0 0;
height: .4em;
top: 75%;
width: .9em;
}
}
// Icon message
.icon-message {
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-radius: $border-radius;
border-right: 0;
&::before {
border: $icon-border-width solid currentColor;
border-bottom-right-radius: $border-radius;
border-left: 0;
border-top: 0;
height: .8em;
left: 65%;
top: 40%;
width: .7em;
}
&::after {
background: currentColor;
border-radius: $border-radius;
height: .3em;
left: 10%;
top: 100%;
transform: translate(0, -90%) rotate(45deg);
width: $icon-border-width;
}
}
// Icon photo
.icon-photo {
border: $icon-border-width solid currentColor;
border-radius: $border-radius;
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50%;
height: .25em;
left: 35%;
top: 35%;
width: .25em;
}
&::after {
border: $icon-border-width solid currentColor;
border-bottom: 0;
border-left: 0;
height: .5em;
left: 60%;
transform: translate(-50%, 25%) rotate(-45deg);
width: .5em;
}
}
// Icon link
.icon-link {
&::before,
&::after {
border: $icon-border-width solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
height: .5em;
width: .75em;
}
&::before {
transform: translate(-70%, -45%) rotate(-45deg);
}
&::after {
transform: translate(-30%, -55%) rotate(135deg);
}
}
// Icon location
.icon-location {
&::before {
border: $icon-border-width solid currentColor;
border-radius: 50% 50% 50% 0;
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
}
&::after {
border: $icon-border-width solid currentColor;
border-radius: 50%;
height: .2em;
transform: translate(-50%, -80%);
width: .2em;
}
}
// Icon emoji
.icon-emoji {
border: $icon-border-width solid currentColor;
border-radius: 50%;
&::before {
border-radius: 50%;
box-shadow: -.17em -.1em, .17em -.1em;
height: .15em;
width: .15em;
}
&::after {
border: $icon-border-width solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
height: .5em;
transform: translate(-50%, -40%) rotate(-135deg);
width: .5em;
}
}

6
Start/Client/Sass/Spectre/mixins/_avatar.scss Normal file
View file

@ -0,0 +1,6 @@
// Avatar mixin
@mixin avatar-base($size: $unit-8) {
font-size: $size / 2;
height: $size;
width: $size;
}

54
Start/Client/Sass/Spectre/mixins/_button.scss Normal file
View file

@ -0,0 +1,54 @@
// Button variant mixin
@mixin button-variant($color: $primary-color) {
background: $color;
border-color: darken($color, 3%);
color: $light-color;
&:focus {
@include control-shadow($color);
}
&:focus,
&:hover {
background: darken($color, 2%);
border-color: darken($color, 5%);
color: $light-color;
}
&:active,
&.active {
background: darken($color, 7%);
border-color: darken($color, 10%);
color: $light-color;
}
&.loading {
&::after {
border-bottom-color: $light-color;
border-left-color: $light-color;
}
}
}
@mixin button-outline-variant($color: $primary-color) {
background: $light-color;
border-color: $color;
color: $color;
&:focus {
@include control-shadow($color);
}
&:focus,
&:hover {
background: lighten($color, 50%);
border-color: darken($color, 2%);
color: $color;
}
&:active,
&.active {
background: $color;
border-color: darken($color, 5%);
color: $light-color;
}
&.loading {
&::after {
border-bottom-color: $color;
border-left-color: $color;
}
}
}

8
Start/Client/Sass/Spectre/mixins/_clearfix.scss Normal file
View file

@ -0,0 +1,8 @@
// Clearfix mixin
@mixin clearfix() {
&::after {
clear: both;
content: "";
display: table;
}
}

27
Start/Client/Sass/Spectre/mixins/_color.scss Normal file
View file

@ -0,0 +1,27 @@
// Background color utility mixin
@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
#{$name} {
background: $color !important;
@if (lightness($color) < 60) {
color: $light-color;
}
}
}
// Text color utility mixin
@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
#{$name} {
color: $color !important;
}
a#{$name} {
&:focus,
&:hover {
color: darken($color, 5%);
}
&:visited {
color: lighten($color, 5%);
}
}
}

11
Start/Client/Sass/Spectre/mixins/_label.scss Normal file
View file

@ -0,0 +1,11 @@
// Label base style
@mixin label-base() {
border-radius: $border-radius;
line-height: 1.25;
padding: .1rem .2rem;
}
@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
background: $bg-color;
color: $color;
}

65
Start/Client/Sass/Spectre/mixins/_position.scss Normal file
View file

@ -0,0 +1,65 @@
// Margin utility mixin
@mixin margin-variant($id: 1, $size: $unit-1) {
.m-#{$id} {
margin: $size !important;
}
.mb-#{$id} {
margin-bottom: $size !important;
}
.ml-#{$id} {
margin-left: $size !important;
}
.mr-#{$id} {
margin-right: $size !important;
}
.mt-#{$id} {
margin-top: $size !important;
}
.mx-#{$id} {
margin-left: $size !important;
margin-right: $size !important;
}
.my-#{$id} {
margin-bottom: $size !important;
margin-top: $size !important;
}
}
// Padding utility mixin
@mixin padding-variant($id: 1, $size: $unit-1) {
.p-#{$id} {
padding: $size !important;
}
.pb-#{$id} {
padding-bottom: $size !important;
}
.pl-#{$id} {
padding-left: $size !important;
}
.pr-#{$id} {
padding-right: $size !important;
}
.pt-#{$id} {
padding-top: $size !important;
}
.px-#{$id} {
padding-left: $size !important;
padding-right: $size !important;
}
.py-#{$id} {
padding-bottom: $size !important;
padding-top: $size !important;
}
}

9
Start/Client/Sass/Spectre/mixins/_shadow.scss Normal file
View file

@ -0,0 +1,9 @@
// Component focus shadow
@mixin control-shadow($color: $primary-color) {
box-shadow: 0 0 0 .1rem rgba($color, .2);
}
// Shadow mixin
@mixin shadow-variant($offset) {
box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
}

6
Start/Client/Sass/Spectre/mixins/_text.scss Normal file
View file

@ -0,0 +1,6 @@
// Text Ellipsis
@mixin text-ellipsis() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

5
Start/Client/Sass/Spectre/mixins/_toast.scss Normal file
View file

@ -0,0 +1,5 @@
// Toast variant mixin
@mixin toast-variant($color: $dark-color) {
background: rgba($color, .95);
border-color: $color;
}

18
Start/Client/Sass/Spectre/spectre-exp.scss Normal file
View file

@ -0,0 +1,18 @@
// Variables and mixins
@import "variables";
@import "mixins";
/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
// Experimentals
@import "autocomplete";
@import "calendars";
@import "carousels";
@import "comparison-sliders";
@import "filters";
@import "meters";
@import "off-canvas";
@import "parallax";
@import "progress";
@import "sliders";
@import "timelines";
@import "viewer-360";

10
Start/Client/Sass/Spectre/spectre-icons.scss Normal file
View file

@ -0,0 +1,10 @@
// Variables and mixins
@import "variables";
@import "mixins";
/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
// Icons
@import "icons/icons-core";
@import "icons/icons-navigation";
@import "icons/icons-action";
@import "icons/icons-object";

49
Start/Client/Sass/Spectre/spectre.scss Normal file
View file

@ -0,0 +1,49 @@
// Variables and mixins
@import "variables";
@import "mixins";
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
// Reset and dependencies
@import "normalize";
@import "base";
// Elements
@import "typography";
@import "asian";
@import "tables";
@import "buttons";
@import "forms";
@import "labels";
@import "codes";
@import "media";
// Layout
@import "layout";
@import "hero";
@import "navbar";
// Components
@import "accordions";
@import "avatars";
@import "badges";
@import "breadcrumbs";
@import "bars";
@import "cards";
@import "chips";
@import "dropdowns";
@import "empty";
@import "menus";
@import "modals";
@import "navs";
@import "pagination";
@import "panels";
@import "popovers";
@import "steps";
@import "tabs";
@import "tiles";
@import "toasts";
@import "tooltips";
// Utility classes
@import "animations";
@import "utilities";

31
Start/Client/Sass/Spectre/utilities/_colors.scss Normal file
View file

@ -0,0 +1,31 @@
// Text colors
@include text-color-variant(".text-primary", $primary-color);
@include text-color-variant(".text-secondary", $secondary-color-dark);
@include text-color-variant(".text-gray", $gray-color);
@include text-color-variant(".text-light", $light-color);
@include text-color-variant(".text-dark", $body-font-color);
@include text-color-variant(".text-success", $success-color);
@include text-color-variant(".text-warning", $warning-color);
@include text-color-variant(".text-error", $error-color);
// Background colors
@include bg-color-variant(".bg-primary", $primary-color);
@include bg-color-variant(".bg-secondary", $secondary-color);
@include bg-color-variant(".bg-dark", $dark-color);
@include bg-color-variant(".bg-gray", $bg-color);
@include bg-color-variant(".bg-success", $success-color);
@include bg-color-variant(".bg-warning", $warning-color);
@include bg-color-variant(".bg-error", $error-color);

24
Start/Client/Sass/Spectre/utilities/_cursors.scss Normal file
View file

@ -0,0 +1,24 @@
// Cursors
.c-hand {
cursor: pointer;
}
.c-move {
cursor: move;
}
.c-zoom-in {
cursor: zoom-in;
}
.c-zoom-out {
cursor: zoom-out;
}
.c-not-allowed {
cursor: not-allowed;
}
.c-auto {
cursor: auto;
}

44
Start/Client/Sass/Spectre/utilities/_display.scss Normal file
View file

@ -0,0 +1,44 @@
// Display
.d-block {
display: block;
}
.d-inline {
display: inline;
}
.d-inline-block {
display: inline-block;
}
.d-flex {
display: flex;
}
.d-inline-flex {
display: inline-flex;
}
.d-none,
.d-hide {
display: none !important;
}
.d-visible {
visibility: visible;
}
.d-invisible {
visibility: hidden;
}
.text-hide {
background: transparent;
border: 0;
color: transparent;
font-size: 0;
line-height: 0;
text-shadow: none;
}
.text-assistive {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

50
Start/Client/Sass/Spectre/utilities/_divider.scss Normal file
View file

@ -0,0 +1,50 @@
// Divider
.divider,
.divider-vert {
display: block;
position: relative;
&[data-content]::after {
background: $bg-color-light;
color: $gray-color;
content: attr(data-content);
display: inline-block;
font-size: $font-size-sm;
padding: 0 $unit-2;
transform: translateY(-$font-size-sm + $border-width);
}
}
.divider {
border-top: $border-width solid $border-color-light;
height: $border-width;
margin: $unit-2 0;
&[data-content] {
margin: $unit-4 0;
}
}
.divider-vert {
display: block;
padding: $unit-4;
&::before {
border-left: $border-width solid $border-color;
bottom: $unit-2;
content: "";
display: block;
left: 50%;
position: absolute;
top: $unit-2;
transform: translateX(-50%);
}
&[data-content]::after {
left: 50%;
padding: $unit-1 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
}

37
Start/Client/Sass/Spectre/utilities/_loading.scss Normal file
View file

@ -0,0 +1,37 @@
// Loading
.loading {
color: transparent !important;
min-height: $unit-4;
pointer-events: none;
position: relative;
&::after {
animation: loading 500ms infinite linear;
background: transparent;
border: $border-width-lg solid $primary-color;
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: $unit-4;
left: 50%;
margin-left: -$unit-2;
margin-top: -$unit-2;
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
width: $unit-4;
z-index: $zindex-0;
}
&.loading-lg {
min-height: $unit-10;
&::after {
height: $unit-8;
margin-left: -$unit-4;
margin-top: -$unit-4;
width: $unit-8;
}
}
}

54
Start/Client/Sass/Spectre/utilities/_position.scss Normal file
View file

@ -0,0 +1,54 @@
// Position
.clearfix {
@include clearfix();
}
.float-left {
float: left !important;
}
.float-right {
float: right !important;
}
.p-relative {
position: relative !important;
}
.p-absolute {
position: absolute !important;
}
.p-fixed {
position: fixed !important;
}
.p-sticky {
position: sticky !important;
}
.p-centered {
display: block;
float: none;
margin-left: auto;
margin-right: auto;
}
.flex-centered {
align-items: center;
display: flex;
justify-content: center;
}
// Spacing
@include margin-variant(0, 0);
@include margin-variant(1, $unit-1);
@include margin-variant(2, $unit-2);
@include padding-variant(0, 0);
@include padding-variant(1, $unit-1);
@include padding-variant(2, $unit-2);

8
Start/Client/Sass/Spectre/utilities/_shapes.scss Normal file
View file

@ -0,0 +1,8 @@
// Shapes
.s-rounded {
border-radius: $border-radius;
}
.s-circle {
border-radius: 50%;
}

76
Start/Client/Sass/Spectre/utilities/_text.scss Normal file
View file

@ -0,0 +1,76 @@
// Text
// Text alignment utilities
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
// Text transform utilities
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
// Text style utilities
.text-normal {
font-weight: normal;
}
.text-bold {
font-weight: bold;
}
.text-italic {
font-style: italic;
}
.text-large {
font-size: 1.2em;
}
.text-small {
font-size: .9em;
}
.text-tiny {
font-size: .8em;
}
.text-muted {
opacity: .8;
}
// Text overflow utilities
.text-ellipsis {
@include text-ellipsis();
}
.text-clip {
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
.text-break {
hyphens: auto;
word-break: break-word;
word-wrap: break-word;
}

188
Start/Client/Sass/app.scss Normal file
View file

@ -0,0 +1,188 @@
/* Validation */
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
/* Blazor */
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* Spectre's default is no padding */
.container {
padding: 0.4rem;
}
/* The splash screen */
.appLoadingContainer {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#sidebar {
display: flex;
flex-direction: column;
}
#sidebar #sidebarHeading {
padding: 0.5rem 1.5rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
#sidebar #sidebarHeading h1 {
margin: 0;
}
#sidebar .nav {
padding: 0.5rem 1.5rem;
}
#sidebar #sidebarItems {
flex: 1; /* Fill remaining space */
overflow-y: auto;
}
#sidebar .accountActions {
border-top: solid 1px #dadee4;
}
#sidebar .accountActions .accountName {
font-weight: bold;
margin-bottom: 1em;
}
.off-canvas .off-canvas-content {
padding: 0;
}
#menuButton .icon {
transform: scale(1.2);
}
#containerTabStrip {
width: 100%;
display: flex;
align-items: center;
}
#containerTabStrip #menuButton {
flex: 0 0 auto;
margin-right: 1em;
margin-left: 1em;
}
#containerTabStrip .containerList {
flex: 1 0 0;
}
#containerTabStrip .containerList .tab-item a {
padding: .6rem .4rem .6rem .4rem;
}
#bookmarkGroups {
margin-top: 1em;
margin-left: auto;
margin-right: auto;
max-width: 1280px;
display: grid;
grid-column-gap: 1.25rem;
grid-row-gap: 1.25rem;
}
@media screen and (max-width: 960px) {
#bookmarkGroups {
grid-template-columns: repeat(1, 1fr);
padding: 1em;
}
}
@media screen and (min-width: 960px) {
#bookmarkGroups {
grid-template-columns: repeat(2, 1fr);
width: 60%;
}
}
@media screen and (min-width: 1440) {
#bookmarkGroups {
grid-template-columns: repeat(3, 1fr);
width: 60%;
}
}
.bookmarkGroup {
width: 100%;
}
.bookmarkGroup .card-header {
padding-top: 0;
}
.bookmarkGroup .card-title {
margin-top: 0.5em;
}
.bookmarkGroup .card-body {
padding: 0;
}
.bookmarkGroup .card-body:last-child {
padding: 0;
}
ul.bookmarks {
list-style: none;
margin: 0;
}
li.noBookmarksItem {
margin-top: 0;
}
.addBookmarkGroupButton button {
width: 100%;
margin-top: 0.5em;
}
button.addBookmarkButton {
width: 100%;
}
@media screen and (prefers-color-scheme: dark) {
body {
color: #fafafa;
background-color: #111111;
}
}

73
Start/Client/Start.Client.csproj
View file

@ -7,9 +7,78 @@
<WarningsAsErrors>Nullable</WarningsAsErrors>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
<CustomCommands>
<CustomCommands>
<Command>
<type>BeforeBuild</type>
<command>sass ${ProjectDir}/Sass/Spectre/spectre.scss ${ProjectDir}/wwwroot/css/spectre/spectre.css</command>
<workingdir>${ProjectDir}</workingdir>
</Command>
<Command>
<type>BeforeBuild</type>
<command>sass ${ProjectDir}/Sass/Spectre/spectre-exp.scss ${ProjectDir}/wwwroot/css/spectre/spectre-exp.css</command>
<workingdir>${ProjectDir}</workingdir>
</Command>
<Command>
<type>BeforeBuild</type>
<command>sass ${ProjectDir}/Sass/Spectre/spectre-icons.scss ${ProjectDir}/wwwroot/css/spectre/spectre-icons.css</command>
<workingdir>${ProjectDir}</workingdir>
</Command>
<Command>
<type>BeforeBuild</type>
<command>sass ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
<workingdir>${ProjectDir}</workingdir>
</Command>
</CustomCommands>
</CustomCommands>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
<CustomCommands>
<CustomCommands>
<Command>
<type>BeforeBuild</type>
<command>sass --style=compressed ${ProjectDir}/Sass/Spectre/spectre.scss ${ProjectDir}/wwwroot/css/spectre/spectre.css</command>
<workingdir>${ProjectDir}</workingdir>
</Command>
<Command>
<type>BeforeBuild</type>
<command>sass --style=compressed ${ProjectDir}/Sass/Spectre/spectre-exp.scss ${ProjectDir}/wwwroot/css/spectre/spectre-exp.css</command>
<workingdir>${ProjectDir}</workingdir>
</Command>
<Command>
<type>BeforeBuild</type>
<command>sass --style=compressed ${ProjectDir}/Sass/Spectre/spectre-icons.scss ${ProjectDir}/wwwroot/css/spectre/spectre-icons.css</command>
<workingdir>${ProjectDir}</workingdir>
</Command>
<Command>
<type>BeforeBuild</type>
<command>sass --style=compressed ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
<workingdir>${ProjectDir}</workingdir>
</Command>
</CustomCommands>
</CustomCommands>
</PropertyGroup>
<PropertyGroup Condition=" '$(RunConfiguration)' == 'Start' ">
<ExternalConsole>true</ExternalConsole>
</PropertyGroup>
<Target Name="DeleteBuiltCss" AfterTargets="Clean">
<Message Text="Deleting built CSS files" />
<Delete Files="$(ProjectDir)/wwwroot/css/spectre/spectre.css" />
<Delete Files="$(ProjectDir)/wwwroot/css/spectre/spectre.css.map" />
<Delete Files="$(ProjectDir)/wwwroot/css/spectre/spectre-exp.css" />
<Delete Files="$(ProjectDir)/wwwroot/css/spectre/spectre-exp.css.map" />
<Delete Files="$(ProjectDir)/wwwroot/css/spectre/spectre-icons.css" />
<Delete Files="$(ProjectDir)/wwwroot/css/spectre/spectre-icons.css.map" />
<Delete Files="$(ProjectDir)/wwwroot/css/app.css" />
<Delete Files="$(ProjectDir)/wwwroot/css/app.css.map" />
</Target>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.11" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.11" PrivateAssets="all" />
@ -48,6 +117,8 @@
<None Remove="Store\Features\CurrentContainer\" />
<None Remove="Store\Features\CreateGroup\" />
<None Remove="Store\Features\Sidebar\" />
<None Remove="Sass\" />
<None Remove="Sass\Spectre\" />
</ItemGroup>
<ItemGroup>
<Content Remove="wwwroot\css\Spectre\" />
@ -62,5 +133,7 @@
<Folder Include="Store\Features\CurrentContainer\" />
<Folder Include="Store\Features\CreateGroup\" />
<Folder Include="Store\Features\Sidebar\" />
<Folder Include="Sass\" />
<Folder Include="Sass\Spectre\" />
</ItemGroup>
</Project>

181
Start/Client/wwwroot/css/app.css
View file

@ -1,181 +0,0 @@
/* Validation */
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
/* Blazor */
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* Spectre's default is no padding */
.container {
padding: 0.4rem;
}
/* The splash screen */
.appLoadingContainer {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#sidebar {
display: flex;
flex-direction: column;
}
#sidebar #sidebarHeading {
padding: 0.5rem 1.5rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
#sidebar #sidebarHeading h1 {
margin: 0;
}
#sidebar .nav {
padding: 0.5rem 1.5rem;
}
#sidebar #sidebarItems {
flex: 1; /* Fill remaining space */
overflow-y: auto;
}
#sidebar .accountActions {
border-top: solid 1px #dadee4;
}
#sidebar .accountActions .accountName {
font-weight: bold;
margin-bottom: 1em;
}
.off-canvas .off-canvas-content {
padding: 0;
}
#menuButton .icon {
transform: scale(1.2);
}
#containerTabStrip {
width: 100%;
display: flex;
align-items: center;
}
#containerTabStrip #menuButton {
flex: 0 0 auto;
margin-right: 1em;
margin-left: 1em;
}
#containerTabStrip .containerList {
flex: 1 0 0;
}
#containerTabStrip .containerList .tab-item a {
padding: .6rem .4rem .6rem .4rem;
}
#bookmarkGroups {
margin-top: 1em;
margin-left: auto;
margin-right: auto;
max-width: 1280px;
display: grid;
grid-column-gap: 1.25rem;
grid-row-gap: 1.25rem;
}
@media screen and (max-width: 960px) {
#bookmarkGroups {
grid-template-columns: repeat(1, 1fr);
padding: 1em;
}
}
@media screen and (min-width: 960px) {
#bookmarkGroups {
grid-template-columns: repeat(2, 1fr);
width: 60%;
}
}
@media screen and (min-width: 1440) {
#bookmarkGroups {
grid-template-columns: repeat(3, 1fr);
width: 60%;
}
}
.bookmarkGroup {
width: 100%;
}
.bookmarkGroup .card-header {
padding-top: 0;
}
.bookmarkGroup .card-title {
margin-top: 0.5em;
}
.bookmarkGroup .card-body {
padding: 0;
}
.bookmarkGroup .card-body:last-child {
padding: 0;
}
ul.bookmarks {
list-style: none;
margin: 0;
}
li.noBookmarksItem {
margin-top: 0;
}
.addBookmarkGroupButton button {
width: 100%;
margin-top: 0.5em;
}
button.addBookmarkButton {
width: 100%;
}

1231
Start/Client/wwwroot/css/spectre/spectre-exp.css
View file

File diff suppressed because it is too large Load diff

1
Start/Client/wwwroot/css/spectre/spectre-exp.min.css vendored
View file

File diff suppressed because one or more lines are too long

597
Start/Client/wwwroot/css/spectre/spectre-icons.css
View file

@ -1,597 +0,0 @@
/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */
.icon {
box-sizing: border-box;
display: inline-block;
font-size: inherit;
font-style: normal;
height: 1em;
position: relative;
text-indent: -9999px;
vertical-align: middle;
width: 1em;
}
.icon::before,
.icon::after {
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.icon.icon-2x {
font-size: 1.6rem;
}
.icon.icon-3x {
font-size: 2.4rem;
}
.icon.icon-4x {
font-size: 3.2rem;
}
.accordion .icon,
.btn .icon,
.toast .icon,
.menu .icon {
vertical-align: -10%;
}
.btn-lg .icon {
vertical-align: -15%;
}
.icon-arrow-down::before,
.icon-arrow-left::before,
.icon-arrow-right::before,
.icon-arrow-up::before,
.icon-downward::before,
.icon-back::before,
.icon-forward::before,
.icon-upward::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .65em;
width: .65em;
}
.icon-arrow-down::before {
transform: translate(-50%, -75%) rotate(225deg);
}
.icon-arrow-left::before {
transform: translate(-25%, -50%) rotate(-45deg);
}
.icon-arrow-right::before {
transform: translate(-75%, -50%) rotate(135deg);
}
.icon-arrow-up::before {
transform: translate(-50%, -25%) rotate(45deg);
}
.icon-back::after,
.icon-forward::after {
background: currentColor;
height: .1rem;
width: .8em;
}
.icon-downward::after,
.icon-upward::after {
background: currentColor;
height: .8em;
width: .1rem;
}
.icon-back::after {
left: 55%;
}
.icon-back::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.icon-downward::after {
top: 45%;
}
.icon-downward::before {
transform: translate(-50%, -50%) rotate(-135deg);
}
.icon-forward::after {
left: 45%;
}
.icon-forward::before {
transform: translate(-50%, -50%) rotate(135deg);
}
.icon-upward::after {
top: 55%;
}
.icon-upward::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-caret::before {
border-left: .3em solid transparent;
border-right: .3em solid transparent;
border-top: .3em solid currentColor;
height: 0;
transform: translate(-50%, -25%);
width: 0;
}
.icon-menu::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
height: .1rem;
width: 100%;
}
.icon-apps::before {
background: currentColor;
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
height: 3px;
width: 3px;
}
.icon-resize-horiz::before,
.icon-resize-horiz::after,
.icon-resize-vert::before,
.icon-resize-vert::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .45em;
width: .45em;
}
.icon-resize-horiz::before,
.icon-resize-vert::before {
transform: translate(-50%, -90%) rotate(45deg);
}
.icon-resize-horiz::after,
.icon-resize-vert::after {
transform: translate(-50%, -10%) rotate(225deg);
}
.icon-resize-horiz::before {
transform: translate(-90%, -50%) rotate(-45deg);
}
.icon-resize-horiz::after {
transform: translate(-10%, -50%) rotate(135deg);
}
.icon-more-horiz::before,
.icon-more-vert::before {
background: currentColor;
border-radius: 50%;
box-shadow: -.4em 0, .4em 0;
height: 3px;
width: 3px;
}
.icon-more-vert::before {
box-shadow: 0 -.4em, 0 .4em;
}
.icon-plus::before,
.icon-minus::before,
.icon-cross::before {
background: currentColor;
height: .1rem;
width: 100%;
}
.icon-plus::after,
.icon-cross::after {
background: currentColor;
height: 100%;
width: .1rem;
}
.icon-cross::before {
width: 100%;
}
.icon-cross::after {
height: 100%;
}
.icon-cross::before,
.icon-cross::after {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-check::before {
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -75%) rotate(-45deg);
width: .9em;
}
.icon-stop {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-stop::before {
background: currentColor;
height: .1rem;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
}
.icon-shutdown {
border: .1rem solid currentColor;
border-radius: 50%;
border-top-color: transparent;
}
.icon-shutdown::before {
background: currentColor;
content: "";
height: .5em;
top: .1em;
width: .1rem;
}
.icon-refresh::before {
border: .1rem solid currentColor;
border-radius: 50%;
border-right-color: transparent;
height: 1em;
width: 1em;
}
.icon-refresh::after {
border: .2em solid currentColor;
border-left-color: transparent;
border-top-color: transparent;
height: 0;
left: 80%;
top: 20%;
width: 0;
}
.icon-search::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .75em;
left: 5%;
top: 5%;
transform: translate(0, 0) rotate(45deg);
width: .75em;
}
.icon-search::after {
background: currentColor;
height: .1rem;
left: 80%;
top: 80%;
transform: translate(-50%, -50%) rotate(45deg);
width: .4em;
}
.icon-edit::before {
border: .1rem solid currentColor;
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
}
.icon-edit::after {
border: .15em solid currentColor;
border-right-color: transparent;
border-top-color: transparent;
height: 0;
left: 5%;
top: 95%;
transform: translate(0, -100%);
width: 0;
}
.icon-delete::before {
border: .1rem solid currentColor;
border-bottom-left-radius: .1rem;
border-bottom-right-radius: .1rem;
border-top: 0;
height: .75em;
top: 60%;
width: .75em;
}
.icon-delete::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
height: .1rem;
top: .05rem;
width: .5em;
}
.icon-share {
border: .1rem solid currentColor;
border-radius: .1rem;
border-right: 0;
border-top: 0;
}
.icon-share::before {
border: .1rem solid currentColor;
border-left: 0;
border-top: 0;
height: .4em;
left: 100%;
top: .25em;
transform: translate(-125%, -50%) rotate(-45deg);
width: .4em;
}
.icon-share::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: 75% 0;
border-right: 0;
height: .5em;
width: .6em;
}
.icon-flag::before {
background: currentColor;
height: 1em;
left: 15%;
width: .1rem;
}
.icon-flag::after {
border: .1rem solid currentColor;
border-bottom-right-radius: .1rem;
border-left: 0;
border-top-right-radius: .1rem;
height: .65em;
left: 60%;
top: 35%;
width: .8em;
}
.icon-bookmark::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-top-left-radius: .1rem;
border-top-right-radius: .1rem;
height: .9em;
width: .8em;
}
.icon-bookmark::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
border-radius: .1rem;
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
}
.icon-download,
.icon-upload {
border-bottom: .1rem solid currentColor;
}
.icon-download::before,
.icon-upload::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .5em;
transform: translate(-50%, -60%) rotate(-135deg);
width: .5em;
}
.icon-download::after,
.icon-upload::after {
background: currentColor;
height: .6em;
top: 40%;
width: .1rem;
}
.icon-upload::before {
transform: translate(-50%, -60%) rotate(45deg);
}
.icon-upload::after {
top: 50%;
}
.icon-copy::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
height: .8em;
left: 40%;
top: 35%;
width: .8em;
}
.icon-copy::after {
border: .1rem solid currentColor;
border-radius: .1rem;
height: .8em;
left: 60%;
top: 60%;
width: .8em;
}
.icon-time {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-time::before {
background: currentColor;
height: .4em;
transform: translate(-50%, -75%);
width: .1rem;
}
.icon-time::after {
background: currentColor;
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
width: .1rem;
}
.icon-mail::before {
border: .1rem solid currentColor;
border-radius: .1rem;
height: .8em;
width: 1em;
}
.icon-mail::after {
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
width: .5em;
}
.icon-people::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .45em;
top: 25%;
width: .45em;
}
.icon-people::after {
border: .1rem solid currentColor;
border-radius: 50% 50% 0 0;
height: .4em;
top: 75%;
width: .9em;
}
.icon-message {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
}
.icon-message::before {
border: .1rem solid currentColor;
border-bottom-right-radius: .1rem;
border-left: 0;
border-top: 0;
height: .8em;
left: 65%;
top: 40%;
width: .7em;
}
.icon-message::after {
background: currentColor;
border-radius: .1rem;
height: .3em;
left: 10%;
top: 100%;
transform: translate(0, -90%) rotate(45deg);
width: .1rem;
}
.icon-photo {
border: .1rem solid currentColor;
border-radius: .1rem;
}
.icon-photo::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .25em;
left: 35%;
top: 35%;
width: .25em;
}
.icon-photo::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
height: .5em;
left: 60%;
transform: translate(-50%, 25%) rotate(-45deg);
width: .5em;
}
.icon-link::before,
.icon-link::after {
border: .1rem solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
height: .5em;
width: .75em;
}
.icon-link::before {
transform: translate(-70%, -45%) rotate(-45deg);
}
.icon-link::after {
transform: translate(-30%, -55%) rotate(135deg);
}
.icon-location::before {
border: .1rem solid currentColor;
border-radius: 50% 50% 50% 0;
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
}
.icon-location::after {
border: .1rem solid currentColor;
border-radius: 50%;
height: .2em;
transform: translate(-50%, -80%);
width: .2em;
}
.icon-emoji {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-emoji::before {
border-radius: 50%;
box-shadow: -.17em -.1em, .17em -.1em;
height: .15em;
width: .15em;
}
.icon-emoji::after {
border: .1rem solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
height: .5em;
transform: translate(-50%, -40%) rotate(-135deg);
width: .5em;
}

1
Start/Client/wwwroot/css/spectre/spectre-icons.min.css vendored
View file

File diff suppressed because one or more lines are too long

3760
Start/Client/wwwroot/css/spectre/spectre.css
View file

File diff suppressed because it is too large Load diff

1
Start/Client/wwwroot/css/spectre/spectre.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
Start/Client/wwwroot/index.html
View file

@ -9,8 +9,8 @@
<script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script>
<link href="css/spectre/spectre.min.css" rel="stylesheet" />
<link href="css/spectre/spectre-exp.min.css" rel="stylesheet" />
<link href="css/spectre/spectre.css" rel="stylesheet" />
<link href="css/spectre/spectre-exp.css" rel="stylesheet" />
<link href="css/spectre/spectre-icons.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="Start.Client.styles.css" rel="stylesheet" />