Delete the SCSS/Bulma pipeline and document the new one
Nothing loads the old bundle any more, so it goes, along with everything that built it and the csproj entries that pointed at it: - SCSS/, including the vendored Bulma 0.9.4 sass; - compilerconfig.json and bundleconfig.json; - tailwind.config.js and terminal-script.txt; - wwwroot/css/style.min.css, main.css, main.min.css and tailwind-override.css; - wwwroot/vendor's bulma, tailwind and toggle-dark-light-mode CSS. The unused Font Awesome and Open Iconic assets stay. The deploy workflow now requires css/app.css and its .gz in the publish output. The .gz only exists when the generated file was registered as a static web asset, so the check catches a silent regression of that. It also checks for js/theme.js. CLAUDE.md, new on this branch, documents the repo: - the no-Node Tailwind/daisyUI build; - the theme runtime; - the neo layer, including the cascade-layer rule its overrides must follow; - the rules for the D components. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
thepraandClaude Opus 5.5 committed
1 parent
3ad4f55b11
commit
e075c4040b
53 files changed
+164
-14069
No files matched your search
@@ -44,7 +44,7 @@ jobs:
|
||||
- name: Assert the publish actually produced a site
|
||||
run: |
|
||||
W="$GITHUB_WORKSPACE/publish/wwwroot"
|
||||
for f in index.html appsettings.json build.json _framework/blazor.webassembly.js css/style.min.css; do
|
||||
for f in index.html appsettings.json build.json _framework/blazor.webassembly.js css/app.css css/app.css.gz js/theme.js; do
|
||||
[ -e "$W/$f" ] || { echo "::error::publish output is missing $f"; exit 1; }
|
||||
done
|
||||
ls "$W/_framework" | grep -q '\.wasm$' || { echo "::error::no .wasm in _framework"; exit 1; }
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## What this is
|
||||
|
||||
decePubClient is a Blazor WebAssembly PWA (.NET 10). It is meant as a Pleroma-FE-like client for **PrivaPub**, the
|
||||
owner's ActivityPub server, whose repo is `thepra/SocialPub`. It is deployed as a static site at
|
||||
https://decepub.thepra.dev, and its API base address is `https://privapub.thepra.dev`
|
||||
(`AppConfiguration:ApiBaseAddress` in `wwwroot/appsettings.json`).
|
||||
|
||||
**It is still a prototype and is not connected to the server:**
|
||||
- The feed comes from `Helpers/Faker.cs`. `Storage.GetMessages()` (`Services/IStorage.cs`) and `Pages/ExpandMessage.razor`
|
||||
create mock posts.
|
||||
- Every method in `Services/MessagesService.cs` is a `//TODO` stub.
|
||||
- `HttpService` (`Services/IHttpService.cs`) is written but not registered in DI.
|
||||
- The nginx vhost sends `X-Robots-Tag: noindex` while the site shows mock posts.
|
||||
|
||||
`Docs/Insomnia_APIs.json` is an old API collection for a localhost backend. Don't treat it as PrivaPub's API.
|
||||
|
||||
## Sibling repo dependency
|
||||
|
||||
The project references `../SocialPub/PrivaPub.ClientModels/PrivaPub.ClientModels.csproj`, so SocialPub must be
|
||||
checked out next to this repo. CI clones it there. That project supplies:
|
||||
- the shared DTOs;
|
||||
- `Policies` (IsAdmin, IsUser, IsModerator);
|
||||
- the `FieldsNameResource` and `ErrorsResource` localization resources.
|
||||
|
||||
Before wiring anything to the API, read `../SocialPub/CLAUDE.md`. PrivaPub's route names (`/peasants/...`, `/mouth`,
|
||||
`/anus`, ...) are deliberate. Never "correct" them. The intended API surface is the Mastodon client API plus PrivaPub's
|
||||
private `/clientapi`.
|
||||
|
||||
## Commands
|
||||
|
||||
```sh
|
||||
dotnet build decePubClient.csproj # what CI runs (-c Release) on every push to master and on PRs
|
||||
dotnet run # dev server: https://localhost:7046 / http://localhost:5046
|
||||
dotnet publish decePubClient.csproj -c Release -o publish # static site lands in publish/wwwroot
|
||||
```
|
||||
|
||||
`global.json` pins SDK 10.0.100 with `rollForward: latestFeature`. There are no tests and no linter.
|
||||
|
||||
## CSS: Tailwind 4 + daisyUI 5, no Node
|
||||
|
||||
`Styles/app.css` is compiled into `wwwroot/css/app.css` by the Tailwind CSS standalone binary with the daisyUI
|
||||
plugin. `app.css` is gitignored and regenerated on every build.
|
||||
|
||||
- `tools/tailwind.sh` downloads Tailwind 4.3.3 and daisyUI 5.7.47 into the gitignored `.tools/tailwind/`, checking each
|
||||
against a pinned sha256. To upgrade, change the versions and hashes there.
|
||||
- The `TailwindCompile` target in the csproj runs it, so `dotnet build` / `publish` are enough, in CI as well. Debug
|
||||
builds use `--optimize`, Release builds `--minify`. Pass `-p:SkipTailwind=true` to skip it.
|
||||
- `IncludeTailwindOutput` adds the generated file to `Content` before static web assets are resolved. Without that, a
|
||||
clean-clone publish would ship `app.css` without its `.gz`/`.br` copies and outside `service-worker-assets.js`.
|
||||
The deploy workflow checks for `css/app.css.gz`.
|
||||
- `bash tools/tailwind.sh watch` rebuilds the CSS live next to `dotnet watch`. `bash tools/tailwind.sh docs` fetches
|
||||
daisyUI's `llms.txt` (its component reference) into `.tools/tailwind/`.
|
||||
- Tailwind scans every file `.gitignore` doesn't exclude, and only generates the classes it finds written out
|
||||
**whole**. Never build a class name by concatenation or interpolation (`"btn-" + size`, `$"btn-{size}"`). Write
|
||||
every variant as a literal, e.g. in a switch arm.
|
||||
|
||||
Ionicons 4.5 (`wwwroot/vendor/ionicons.min.css`, `<i class="ion-md-...">`) is loaded as its own stylesheet.
|
||||
|
||||
## Theme and neumorphism
|
||||
|
||||
- `Styles/theme.css` holds two daisyUI themes, `neo-light` (default) and `neo-dark` (`prefersdark`). Every colour
|
||||
is an `hsl()` of `--neo-hue-light` / `--neo-hue-dark` / `--neo-chroma` (0 for the grey themes).
|
||||
- `wwwroot/js/theme.js` sets those variables and `data-theme` on `<html>` from `PageSettings`. It runs in `<head>`
|
||||
from localStorage, so there is no flash before Blazor boots. After that, CascadingState calls it through
|
||||
`AppStatusService.ApplyTheme` whenever the settings change. With `PreferSystemTheming` it leaves `data-theme` off,
|
||||
and the OS decides.
|
||||
- `Styles/neo.css` holds the neumorphic layer:
|
||||
- `neo-raised` / `neo-inset` / `neo-flat`, with sizes `neo-2xs` / `neo-xs` / `neo-sm` / `neo-md` (these replace the
|
||||
old `neomorph is-nxsmall` classes);
|
||||
- `neo-gradient(-pressed)` and `neo-hue-track`;
|
||||
- `@utility <daisy-component>` overrides that give btn, input, select, card, … the neo look. daisyUI puts its rules
|
||||
in sublayers of `utilities`, so these overrides beat **every** daisyUI rule. Each override must exclude the
|
||||
daisyUI variants it shouldn't touch, e.g. `:not(:where(.btn-ghost, .btn-link, ...))`, and call sites drop a neo
|
||||
shadow with `shadow-none!`.
|
||||
- Never write `@utility collapse`. It brings back Tailwind's own `collapse` utility (`visibility: collapse`), and
|
||||
every collapse disappears.
|
||||
|
||||
## daisyUI Blazor components (`Components/Daisy/`)
|
||||
|
||||
Every daisyUI component has a `D`-prefixed wrapper (`DButton`, `DModal`, `DDropdown`, `DInput`, ...), grouped by
|
||||
daisyUI's categories into folders whose namespaces are imported in `_Imports.razor`. `/styleguide` (not linked) renders
|
||||
all of them in every theme. When you add or change one:
|
||||
- Map each enum to its classes in a switch with whole literal class names.
|
||||
- Value-holding fields derive from `DInputBase<TValue>`, Blazor's `InputBase`, so `@bind-Value` and EditForm
|
||||
validation work. Everything else derives from `DComponentBase` (`Class`, pass-through attributes, `Cx(...)`).
|
||||
- Open/active state lives in C# (`@bind-IsOpen`, `@bind-Active`) and is rendered with daisyUI's `*-open` modifier
|
||||
classes. No JS interop. `DCalendar` is the one exception: it wraps the vendored Cally web component.
|
||||
- Don't name a parameter after an HTML attribute (`Title`, `Style`, `Id`, `Label`, ...). Blazor matches attributes
|
||||
to parameters without regard to case, so the parameter would swallow the attribute.
|
||||
- Components don't use `Localizer` or `CascadingState`; their user-visible strings are parameters.
|
||||
|
||||
## Architecture
|
||||
|
||||
**Startup (`Program.cs`).**
|
||||
- DI registration happens here.
|
||||
- The named `HttpClient` "default" uses `ApiBaseAddress` as its base address. It falls back to the host's base
|
||||
address when that setting is empty.
|
||||
- `SetDefaultCulture()` (`Extensions/ExtensionMethods.cs`) runs before the app starts. It picks the culture from the
|
||||
saved `PublicCacheData` or from the browser language, and maps any `en*` to `en-GB`.
|
||||
|
||||
**`LayerComponents/CascadingState.razor`** wraps the router in `App.razor`. It is the app-wide state object, and pages
|
||||
take it as `[CascadingParameter] CascadingState`. It handles:
|
||||
- `PublicCacheData` (page settings: theme colours, dark/light/system theming, language), persisted in localStorage;
|
||||
- the theme, applied through `AppStatusService.ApplyTheme` (`wwwroot/js/theme.js`);
|
||||
- an online check every 10 seconds;
|
||||
- `ProcessError` / `ProcessWarning`, which components should call to report errors and warnings;
|
||||
- `LogFromJs`, which JS calls back into through a `DotNetObjectReference`.
|
||||
|
||||
**Components and pages** inherit `LocalizableComponentBase`, which supplies `Localizer`, an `IsLoading` flag and
|
||||
`AfterRenderAsyncJobs`. `PagesBase` is an empty subclass of it, and only `Authentication.razor` uses it.
|
||||
|
||||
**Localization (`Services/CoalescingStringLocalizer.cs`).**
|
||||
- Lookup order: this repo's `Resources/AllStrings.resx`, then `FieldsNameResource`, then `ErrorsResource`.
|
||||
- A missing key renders as the key itself, so a typo fails silently.
|
||||
- The class lives in namespace `collAnon.Client.Services`, a leftover from another project.
|
||||
|
||||
**Client storage** comes in two layers:
|
||||
- **localStorage** (Blazored.LocalStorage, camelCase JSON) holds `AuthData` and `PublicCacheData`, keyed by
|
||||
`nameof(Type)`.
|
||||
- **IndexedDB** (DnetIndexedDb, database `data`) is reached through `IStorage`. Its schema is declared in
|
||||
`GenericExtensions.AddIndexedDb()`, and you must bump `WithVersion` when you change it.
|
||||
- Known gap: `IStorage` reads and writes a `ClientLogs` store that the schema never declares, so the error log writes
|
||||
fail silently (they are wrapped in try/catch).
|
||||
|
||||
**Auth.**
|
||||
- `TokenAuthStateProvider` builds the auth state from the `AuthData` token in localStorage.
|
||||
- `SetToken` is mostly commented out, so there is no real login flow yet.
|
||||
- `AddApiAuthorization` and `Pages/Authentication.razor` are leftovers from the Blazor template.
|
||||
|
||||
**JS interop.**
|
||||
- `wwwroot/main.js` defines `window.*` helpers. `Services/AppStatusService.cs` calls them, mostly through the
|
||||
synchronous `IJSInProcessRuntime`.
|
||||
- Each helper reports its errors back through `window.logFromJs`.
|
||||
- The other scripts (IndexedDB, HeadElement, auth, rxjs) are loaded by `<script>` tags in `wwwroot/index.html`.
|
||||
|
||||
**PWA.** Published builds use `wwwroot/service-worker.published.js`, and `service-worker.js` is the dev version.
|
||||
|
||||
## Deployment
|
||||
|
||||
`.gitea/workflows/deploy.yml` runs on a `v*` tag or a manual dispatch, on a self-hosted runner that is also the web
|
||||
host. The steps:
|
||||
1. Publish the site.
|
||||
2. Write `build.json` (commit, ref, time).
|
||||
3. Snapshot the live directory to `/var/backups/decepub.thepra.dev`.
|
||||
4. `rsync --delete` into `/var/www/decepub.thepra.dev`.
|
||||
5. Check that `build.json` serves the new commit and that a deep client route returns 200 (the SPA fallback). Otherwise,
|
||||
roll back to the snapshot.
|
||||
|
||||
The nginx vhost and headers are in `deploy/nginx/`, and `deploy/max/setup.sh` is the one-time root setup on the
|
||||
server. If you add a file that must never be cached, add it to the `expires -1` locations in the vhost.
|
||||
|
||||
## Conventions
|
||||
|
||||
- Indent with tabs.
|
||||
- `Nullable` is disabled and `ImplicitUsings` is enabled.
|
||||
- Global Razor usings are in `_Imports.razor`.
|
||||
- Styling uses the D components, Tailwind utilities and the `neo-*` utilities. Use `gap-*` rather than `space-x/y-*`
|
||||
on flex containers; the feeds use `flex-col-reverse`, which `space-*` gets wrong.
|
||||
- `SUtility.IfTrueThen(cond, "class")` is the helper for conditional classes.
|
||||
@@ -1,92 +0,0 @@
|
||||
body {
|
||||
color: var(--text-color);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
details > summary::-webkit-details-marker {
|
||||
color: var(--text-color)
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: none
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
scrollbar-color: inherit;
|
||||
scrollbar-width: inherit;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border: thin solid transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color-dark);
|
||||
border: thin solid transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary-color-dark);
|
||||
}
|
||||
|
||||
::-moz-selection { /* Code for Firefox */
|
||||
color: var(--primary-color);
|
||||
background: var(--primary-color-dark);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--primary-color);
|
||||
background: var(--primary-color-dark);
|
||||
}
|
||||
|
||||
.flex.flex-col-reverse>div:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.loadAnimation span {
|
||||
animation-name: blink;
|
||||
animation-duration: 1.4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(1) {
|
||||
animation-delay: .4s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(2) {
|
||||
animation-delay: .3s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(3) {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(4) {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(5) {
|
||||
animation-delay: .3s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(6) {
|
||||
animation-delay: .4s;
|
||||
}
|
||||
Vendored
-7
@@ -1,7 +0,0 @@
|
||||
@charset "utf-8"
|
||||
/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
|
||||
@import "sass/utilities/_all"
|
||||
@import "sass/base/_all"
|
||||
@import "sass/elements/_all"
|
||||
@import "sass/form/_all"
|
||||
@import "sass/components/_all"
|
||||
@@ -1,5 +0,0 @@
|
||||
/* Bulma Base */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "generic"
|
||||
@import "animations"
|
||||
@@ -1,5 +0,0 @@
|
||||
@keyframes spinAround
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(359deg)
|
||||
@@ -1,140 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$body-background-color: $scheme-main !default
|
||||
$body-size: 16px !default
|
||||
$body-min-width: 300px !default
|
||||
$body-rendering: optimizeLegibility !default
|
||||
$body-family: $family-primary !default
|
||||
$body-overflow-x: hidden !default
|
||||
$body-overflow-y: scroll !default
|
||||
|
||||
$body-color: $text !default
|
||||
$body-font-size: 1em !default
|
||||
$body-weight: $weight-normal !default
|
||||
$body-line-height: 1.5 !default
|
||||
|
||||
$code-family: $family-code !default
|
||||
$code-padding: 0.25em 0.5em 0.25em !default
|
||||
$code-weight: normal !default
|
||||
$code-size: 0.875em !default
|
||||
|
||||
$small-font-size: 0.875em !default
|
||||
|
||||
$hr-background-color: $background !default
|
||||
$hr-height: 2px !default
|
||||
$hr-margin: 1.5rem 0 !default
|
||||
|
||||
$strong-color: $text-strong !default
|
||||
$strong-weight: $weight-bold !default
|
||||
|
||||
$pre-font-size: 0.875em !default
|
||||
$pre-padding: 1.25rem 1.5rem !default
|
||||
$pre-code-font-size: 1em !default
|
||||
|
||||
html
|
||||
background-color: $body-background-color
|
||||
font-size: $body-size
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-font-smoothing: antialiased
|
||||
min-width: $body-min-width
|
||||
overflow-x: $body-overflow-x
|
||||
overflow-y: $body-overflow-y
|
||||
text-rendering: $body-rendering
|
||||
text-size-adjust: 100%
|
||||
|
||||
article,
|
||||
aside,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
section
|
||||
display: block
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea
|
||||
font-family: $body-family
|
||||
|
||||
code,
|
||||
pre
|
||||
-moz-osx-font-smoothing: auto
|
||||
-webkit-font-smoothing: auto
|
||||
font-family: $code-family
|
||||
|
||||
body
|
||||
color: $body-color
|
||||
font-size: $body-font-size
|
||||
font-weight: $body-weight
|
||||
line-height: $body-line-height
|
||||
|
||||
// Inline
|
||||
|
||||
a
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
||||
code
|
||||
background-color: $code-background
|
||||
color: $code
|
||||
font-size: $code-size
|
||||
font-weight: $code-weight
|
||||
padding: $code-padding
|
||||
|
||||
hr
|
||||
background-color: $hr-background-color
|
||||
border: none
|
||||
display: block
|
||||
height: $hr-height
|
||||
margin: $hr-margin
|
||||
|
||||
img
|
||||
height: auto
|
||||
max-width: 100%
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]
|
||||
vertical-align: baseline
|
||||
|
||||
small
|
||||
font-size: $small-font-size
|
||||
|
||||
span
|
||||
font-style: inherit
|
||||
font-weight: inherit
|
||||
|
||||
strong
|
||||
color: $strong-color
|
||||
font-weight: $strong-weight
|
||||
|
||||
// Block
|
||||
|
||||
fieldset
|
||||
border: none
|
||||
|
||||
pre
|
||||
+overflow-touch
|
||||
background-color: $pre-background
|
||||
color: $pre
|
||||
font-size: $pre-font-size
|
||||
overflow-x: auto
|
||||
padding: $pre-padding
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
code
|
||||
background-color: transparent
|
||||
color: currentColor
|
||||
font-size: $pre-code-font-size
|
||||
padding: 0
|
||||
|
||||
table
|
||||
td,
|
||||
th
|
||||
vertical-align: top
|
||||
&:not([align])
|
||||
text-align: inherit
|
||||
th
|
||||
color: $text-strong
|
||||
@@ -1,6 +0,0 @@
|
||||
/* Bulma Components */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "dropdown"
|
||||
@import "message"
|
||||
@import "pagination"
|
||||
@@ -1,82 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$dropdown-menu-min-width: 12rem !default
|
||||
|
||||
$dropdown-content-background-color: $scheme-main !default
|
||||
$dropdown-content-arrow: $link !default
|
||||
$dropdown-content-offset: 4px !default
|
||||
$dropdown-content-padding-bottom: 0.5rem !default
|
||||
$dropdown-content-padding-top: 0.5rem !default
|
||||
$dropdown-content-radius: $radius !default
|
||||
$dropdown-content-shadow: $shadow !default
|
||||
$dropdown-content-z: 20 !default
|
||||
|
||||
$dropdown-item-color: $text !default
|
||||
$dropdown-item-hover-color: $scheme-invert !default
|
||||
$dropdown-item-hover-background-color: $background !default
|
||||
$dropdown-item-active-color: $link-invert !default
|
||||
$dropdown-item-active-background-color: $link !default
|
||||
|
||||
$dropdown-divider-background-color: $border-light !default
|
||||
|
||||
.dropdown
|
||||
display: inline-flex
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&.is-active,
|
||||
&.is-hoverable:hover
|
||||
.dropdown-menu
|
||||
display: block
|
||||
&.is-right
|
||||
.dropdown-menu
|
||||
left: auto
|
||||
right: 0
|
||||
&.is-up
|
||||
.dropdown-menu
|
||||
bottom: 100%
|
||||
padding-bottom: $dropdown-content-offset
|
||||
padding-top: initial
|
||||
top: auto
|
||||
|
||||
.dropdown-menu
|
||||
display: none
|
||||
+ltr-position(0, false)
|
||||
min-width: $dropdown-menu-min-width
|
||||
padding-top: $dropdown-content-offset
|
||||
position: absolute
|
||||
top: 100%
|
||||
z-index: $dropdown-content-z
|
||||
|
||||
.dropdown-content
|
||||
background-color: $dropdown-content-background-color
|
||||
border-radius: $dropdown-content-radius
|
||||
box-shadow: $dropdown-content-shadow
|
||||
padding-bottom: $dropdown-content-padding-bottom
|
||||
padding-top: $dropdown-content-padding-top
|
||||
|
||||
.dropdown-item
|
||||
display: block
|
||||
font-size: 0.875rem
|
||||
line-height: 1.5
|
||||
padding: 0.375rem 1rem
|
||||
position: relative
|
||||
|
||||
a.dropdown-item,
|
||||
button.dropdown-item
|
||||
+ltr-property("padding", 3rem)
|
||||
text-align: inherit
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
&:hover
|
||||
background-color: $dropdown-item-hover-background-color
|
||||
color: $dropdown-item-hover-color
|
||||
&.is-active
|
||||
background-color: $dropdown-item-active-background-color
|
||||
color: $dropdown-item-active-color
|
||||
|
||||
.dropdown-divider
|
||||
background-color: $dropdown-divider-background-color
|
||||
border: none
|
||||
display: block
|
||||
height: 1px
|
||||
margin: 0.5rem 0
|
||||
@@ -1,101 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$message-background-color: $background !default
|
||||
$message-radius: $radius !default
|
||||
|
||||
$message-header-background-color: $text !default
|
||||
$message-header-color: $text-invert !default
|
||||
$message-header-weight: $weight-bold !default
|
||||
$message-header-padding: 0.75em 1em !default
|
||||
$message-header-radius: $radius !default
|
||||
|
||||
$message-body-border-color: $border !default
|
||||
$message-body-border-width: 0 0 0 4px !default
|
||||
$message-body-color: $text !default
|
||||
$message-body-padding: 1.25em 1.5em !default
|
||||
$message-body-radius: $radius !default
|
||||
|
||||
$message-body-pre-background-color: $scheme-main !default
|
||||
$message-body-pre-code-background-color: transparent !default
|
||||
|
||||
$message-header-body-border-width: 0 !default
|
||||
$message-colors: $colors !default
|
||||
|
||||
.message
|
||||
@extend %block
|
||||
background-color: $message-background-color
|
||||
border-radius: $message-radius
|
||||
font-size: $size-normal
|
||||
strong
|
||||
color: currentColor
|
||||
a:not(.button):not(.tag):not(.dropdown-item)
|
||||
color: currentColor
|
||||
text-decoration: underline
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
// Colors
|
||||
@each $name, $components in $message-colors
|
||||
$color: nth($components, 1)
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: null
|
||||
$color-dark: null
|
||||
|
||||
@if length($components) >= 3
|
||||
$color-light: nth($components, 3)
|
||||
@if length($components) >= 4
|
||||
$color-dark: nth($components, 4)
|
||||
@else
|
||||
$color-luminance: colorLuminance($color)
|
||||
$darken-percentage: $color-luminance * 70%
|
||||
$desaturate-percentage: $color-luminance * 30%
|
||||
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
||||
@else
|
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
$color-light: lighten($color, $color-lightning)
|
||||
|
||||
&.is-#{$name}
|
||||
background-color: $color-light
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
color: $color-dark
|
||||
|
||||
.message-header
|
||||
align-items: center
|
||||
background-color: $message-header-background-color
|
||||
border-radius: $message-header-radius $message-header-radius 0 0
|
||||
color: $message-header-color
|
||||
display: flex
|
||||
font-weight: $message-header-weight
|
||||
justify-content: space-between
|
||||
line-height: 1.25
|
||||
padding: $message-header-padding
|
||||
position: relative
|
||||
.delete
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
+ltr-property("margin", 0.75em, false)
|
||||
& + .message-body
|
||||
border-width: $message-header-body-border-width
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.message-body
|
||||
border-color: $message-body-border-color
|
||||
border-radius: $message-body-radius
|
||||
border-style: solid
|
||||
border-width: $message-body-border-width
|
||||
color: $message-body-color
|
||||
padding: $message-body-padding
|
||||
code,
|
||||
pre
|
||||
background-color: $message-body-pre-background-color
|
||||
pre code
|
||||
background-color: $message-body-pre-code-background-color
|
||||
@@ -1,167 +0,0 @@
|
||||
@import "../utilities/controls"
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$pagination-color: $text-strong !default
|
||||
$pagination-border-color: $border !default
|
||||
$pagination-margin: -0.25rem !default
|
||||
$pagination-min-width: $control-height !default
|
||||
|
||||
$pagination-item-font-size: 1em !default
|
||||
$pagination-item-margin: 0.25rem !default
|
||||
$pagination-item-padding-left: 0.5em !default
|
||||
$pagination-item-padding-right: 0.5em !default
|
||||
|
||||
$pagination-nav-padding-left: 0.75em !default
|
||||
$pagination-nav-padding-right: 0.75em !default
|
||||
|
||||
$pagination-hover-color: $link-hover !default
|
||||
$pagination-hover-border-color: $link-hover-border !default
|
||||
|
||||
$pagination-focus-color: $link-focus !default
|
||||
$pagination-focus-border-color: $link-focus-border !default
|
||||
|
||||
$pagination-active-color: $link-active !default
|
||||
$pagination-active-border-color: $link-active-border !default
|
||||
|
||||
$pagination-disabled-color: $text-light !default
|
||||
$pagination-disabled-background-color: $border !default
|
||||
$pagination-disabled-border-color: $border !default
|
||||
|
||||
$pagination-current-color: $link-invert !default
|
||||
$pagination-current-background-color: $link !default
|
||||
$pagination-current-border-color: $link !default
|
||||
|
||||
$pagination-ellipsis-color: $grey-light !default
|
||||
|
||||
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
|
||||
|
||||
.pagination
|
||||
@extend %block
|
||||
font-size: $size-normal
|
||||
margin: $pagination-margin
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
&.is-rounded
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
border-radius: $radius-rounded
|
||||
.pagination-link
|
||||
border-radius: $radius-rounded
|
||||
|
||||
.pagination,
|
||||
.pagination-list
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
text-align: center
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
font-size: $pagination-item-font-size
|
||||
justify-content: center
|
||||
margin: $pagination-item-margin
|
||||
padding-left: $pagination-item-padding-left
|
||||
padding-right: $pagination-item-padding-right
|
||||
text-align: center
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link
|
||||
border-color: $pagination-border-color
|
||||
color: $pagination-color
|
||||
min-width: $pagination-min-width
|
||||
&:hover
|
||||
border-color: $pagination-hover-border-color
|
||||
color: $pagination-hover-color
|
||||
&:focus
|
||||
border-color: $pagination-focus-border-color
|
||||
&:active
|
||||
box-shadow: $pagination-shadow-inset
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
background-color: $pagination-disabled-background-color
|
||||
border-color: $pagination-disabled-border-color
|
||||
box-shadow: none
|
||||
color: $pagination-disabled-color
|
||||
opacity: 0.5
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
padding-left: $pagination-nav-padding-left
|
||||
padding-right: $pagination-nav-padding-right
|
||||
white-space: nowrap
|
||||
|
||||
.pagination-link
|
||||
&.is-current
|
||||
background-color: $pagination-current-background-color
|
||||
border-color: $pagination-current-border-color
|
||||
color: $pagination-current-color
|
||||
|
||||
.pagination-ellipsis
|
||||
color: $pagination-ellipsis-color
|
||||
pointer-events: none
|
||||
|
||||
.pagination-list
|
||||
flex-wrap: wrap
|
||||
li
|
||||
list-style: none
|
||||
|
||||
+mobile
|
||||
.pagination
|
||||
flex-wrap: wrap
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
.pagination-list
|
||||
li
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
||||
+tablet
|
||||
.pagination-list
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
justify-content: flex-start
|
||||
order: 1
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis
|
||||
margin-bottom: 0
|
||||
margin-top: 0
|
||||
.pagination-previous
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
.pagination
|
||||
justify-content: space-between
|
||||
margin-bottom: 0
|
||||
margin-top: 0
|
||||
&.is-centered
|
||||
.pagination-previous
|
||||
order: 1
|
||||
.pagination-list
|
||||
justify-content: center
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
&.is-right
|
||||
.pagination-previous
|
||||
order: 1
|
||||
.pagination-next
|
||||
order: 2
|
||||
.pagination-list
|
||||
justify-content: flex-end
|
||||
order: 3
|
||||
@@ -1,12 +0,0 @@
|
||||
/* Bulma Elements */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "button"
|
||||
@import "content"
|
||||
@import "icon"
|
||||
@import "image"
|
||||
@import "notification"
|
||||
@import "progress"
|
||||
@import "tag"
|
||||
|
||||
@import "other"
|
||||
@@ -1,337 +0,0 @@
|
||||
@import "../utilities/controls"
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$button-color: $text-strong !default
|
||||
$button-background-color: $scheme-main !default
|
||||
$button-family: false !default
|
||||
|
||||
$button-border-color: $border !default
|
||||
$button-border-width: $control-border-width !default
|
||||
|
||||
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
|
||||
$button-padding-horizontal: 1em !default
|
||||
|
||||
$button-hover-color: $link-hover !default
|
||||
$button-hover-border-color: $link-hover-border !default
|
||||
|
||||
$button-focus-color: $link-focus !default
|
||||
$button-focus-border-color: $link-focus-border !default
|
||||
$button-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
|
||||
|
||||
$button-active-color: $link-active !default
|
||||
$button-active-border-color: $link-active-border !default
|
||||
|
||||
$button-text-color: $text !default
|
||||
$button-text-decoration: underline !default
|
||||
$button-text-hover-background-color: $background !default
|
||||
$button-text-hover-color: $text-strong !default
|
||||
|
||||
$button-ghost-background: none !default
|
||||
$button-ghost-border-color: transparent !default
|
||||
$button-ghost-color: $link !default
|
||||
$button-ghost-decoration: none !default
|
||||
$button-ghost-hover-color: $link !default
|
||||
$button-ghost-hover-decoration: underline !default
|
||||
|
||||
$button-disabled-background-color: $scheme-main !default
|
||||
$button-disabled-border-color: $border !default
|
||||
$button-disabled-shadow: none !default
|
||||
$button-disabled-opacity: 0.5 !default
|
||||
|
||||
$button-static-color: $text-light !default
|
||||
$button-static-background-color: $scheme-main-ter !default
|
||||
$button-static-border-color: $border !default
|
||||
|
||||
$button-colors: $colors !default
|
||||
$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default
|
||||
|
||||
// The button sizes use mixins so they can be used at different breakpoints
|
||||
=button-small
|
||||
&:not(.is-rounded)
|
||||
border-radius: $radius-small
|
||||
font-size: $size-small
|
||||
=button-normal
|
||||
font-size: $size-normal
|
||||
=button-medium
|
||||
font-size: $size-medium
|
||||
=button-large
|
||||
font-size: $size-large
|
||||
|
||||
.button
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
cursor: pointer
|
||||
@if $button-family
|
||||
font-family: $button-family
|
||||
justify-content: center
|
||||
padding-bottom: $button-padding-vertical
|
||||
padding-left: $button-padding-horizontal
|
||||
padding-right: $button-padding-horizontal
|
||||
padding-top: $button-padding-vertical
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
.icon
|
||||
&,
|
||||
&.is-small,
|
||||
&.is-medium,
|
||||
&.is-large
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
&:first-child:not(:last-child)
|
||||
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
|
||||
+ltr-property("margin", $button-padding-horizontal * 0.25)
|
||||
&:last-child:not(:first-child)
|
||||
+ltr-property("margin", $button-padding-horizontal * 0.25, false)
|
||||
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
|
||||
&:first-child:last-child
|
||||
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
|
||||
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
|
||||
// States
|
||||
// Colors
|
||||
&.is-text
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $button-text-color
|
||||
text-decoration: $button-text-decoration
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $button-text-hover-background-color
|
||||
color: $button-text-hover-color
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: bulmaDarken($button-text-hover-background-color, 5%)
|
||||
color: $button-text-hover-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
&.is-ghost
|
||||
background: $button-ghost-background
|
||||
border-color: $button-ghost-border-color
|
||||
color: $button-ghost-color
|
||||
text-decoration: $button-ghost-decoration
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
color: $button-ghost-hover-color
|
||||
text-decoration: $button-ghost-hover-decoration
|
||||
@each $name, $pair in $button-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: bulmaDarken($color, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: bulmaDarken($color, 5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
box-shadow: none
|
||||
&.is-inverted
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: bulmaDarken($color-invert, 5%)
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $color-invert
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
color: $color
|
||||
&.is-loading
|
||||
&::after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
color: $color
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
&.is-loading
|
||||
&::after
|
||||
border-color: transparent transparent $color $color !important
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
&::after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
box-shadow: none
|
||||
color: $color
|
||||
&.is-inverted.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&.is-loading
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
&::after
|
||||
border-color: transparent transparent $color $color !important
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
box-shadow: none
|
||||
color: $color-invert
|
||||
// If light and dark colors are provided
|
||||
@if length($pair) >= 4
|
||||
$color-light: nth($pair, 3)
|
||||
$color-dark: nth($pair, 4)
|
||||
&.is-light
|
||||
background-color: $color-light
|
||||
color: $color-dark
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: bulmaDarken($color-light, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-dark
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: bulmaDarken($color-light, 5%)
|
||||
border-color: transparent
|
||||
color: $color-dark
|
||||
// Sizes
|
||||
&.is-small
|
||||
+button-small
|
||||
&.is-normal
|
||||
+button-normal
|
||||
&.is-medium
|
||||
+button-medium
|
||||
&.is-large
|
||||
+button-large
|
||||
// Modifiers
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $button-disabled-background-color
|
||||
border-color: $button-disabled-border-color
|
||||
box-shadow: $button-disabled-shadow
|
||||
opacity: $button-disabled-opacity
|
||||
&.is-fullwidth
|
||||
display: flex
|
||||
width: 100%
|
||||
&.is-loading
|
||||
color: transparent !important
|
||||
pointer-events: none
|
||||
&::after
|
||||
@extend %loader
|
||||
+center(1em)
|
||||
position: absolute !important
|
||||
&.is-static
|
||||
background-color: $button-static-background-color
|
||||
border-color: $button-static-border-color
|
||||
color: $button-static-color
|
||||
box-shadow: none
|
||||
pointer-events: none
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
padding-left: calc(#{$button-padding-horizontal} + 0.25em)
|
||||
padding-right: calc(#{$button-padding-horizontal} + 0.25em)
|
||||
|
||||
.buttons
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.button
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child):not(.is-fullwidth)
|
||||
+ltr-property("margin", 0.5rem)
|
||||
&:last-child
|
||||
margin-bottom: -0.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1rem
|
||||
// Sizes
|
||||
&.are-small
|
||||
.button:not(.is-normal):not(.is-medium):not(.is-large)
|
||||
+button-small
|
||||
&.are-medium
|
||||
.button:not(.is-small):not(.is-normal):not(.is-large)
|
||||
+button-medium
|
||||
&.are-large
|
||||
.button:not(.is-small):not(.is-normal):not(.is-medium)
|
||||
+button-large
|
||||
&.has-addons
|
||||
.button
|
||||
&:not(:first-child)
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:not(:last-child)
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
+ltr-property("margin", -1px)
|
||||
&:last-child
|
||||
+ltr-property("margin", 0)
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active,
|
||||
&.is-selected
|
||||
z-index: 3
|
||||
&:hover
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&:not(.has-addons)
|
||||
.button:not(.is-fullwidth)
|
||||
margin-left: 0.25rem
|
||||
margin-right: 0.25rem
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
&:not(.has-addons)
|
||||
.button:not(.is-fullwidth)
|
||||
margin-left: 0.25rem
|
||||
margin-right: 0.25rem
|
||||
|
||||
@each $bp-name, $bp-sizes in $button-responsive-sizes
|
||||
+breakpoint($bp-name)
|
||||
@each $size, $value in $bp-sizes
|
||||
@if $size != "normal"
|
||||
.button.is-responsive.is-#{$size}
|
||||
font-size: $value
|
||||
@else
|
||||
.button.is-responsive,
|
||||
.button.is-responsive.is-normal
|
||||
font-size: $value
|
||||
@@ -1,162 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$content-heading-color: $text-strong !default
|
||||
$content-heading-weight: $weight-semibold !default
|
||||
$content-heading-line-height: 1.125 !default
|
||||
|
||||
$content-block-margin-bottom: 1em !default
|
||||
|
||||
$content-blockquote-background-color: $background !default
|
||||
$content-blockquote-border-left: 5px solid $border !default
|
||||
$content-blockquote-padding: 1.25em 1.5em !default
|
||||
|
||||
$content-pre-padding: 1.25em 1.5em !default
|
||||
|
||||
$content-table-cell-border: 1px solid $border !default
|
||||
$content-table-cell-border-width: 0 0 1px !default
|
||||
$content-table-cell-padding: 0.5em 0.75em !default
|
||||
$content-table-cell-heading-color: $text-strong !default
|
||||
$content-table-head-cell-border-width: 0 0 2px !default
|
||||
$content-table-head-cell-color: $text-strong !default
|
||||
$content-table-body-last-row-cell-border-bottom-width: 0 !default
|
||||
$content-table-foot-cell-border-width: 2px 0 0 !default
|
||||
$content-table-foot-cell-color: $text-strong !default
|
||||
|
||||
.content
|
||||
@extend %block
|
||||
// Inline
|
||||
li + li
|
||||
margin-top: 0.25em
|
||||
// Block
|
||||
p,
|
||||
dl,
|
||||
ol,
|
||||
ul,
|
||||
blockquote,
|
||||
pre,
|
||||
table
|
||||
&:not(:last-child)
|
||||
margin-bottom: $content-block-margin-bottom
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
color: $content-heading-color
|
||||
font-weight: $content-heading-weight
|
||||
line-height: $content-heading-line-height
|
||||
h1
|
||||
font-size: 2em
|
||||
margin-bottom: 0.5em
|
||||
&:not(:first-child)
|
||||
margin-top: 1em
|
||||
h2
|
||||
font-size: 1.75em
|
||||
margin-bottom: 0.5714em
|
||||
&:not(:first-child)
|
||||
margin-top: 1.1428em
|
||||
h3
|
||||
font-size: 1.5em
|
||||
margin-bottom: 0.6666em
|
||||
&:not(:first-child)
|
||||
margin-top: 1.3333em
|
||||
h4
|
||||
font-size: 1.25em
|
||||
margin-bottom: 0.8em
|
||||
h5
|
||||
font-size: 1.125em
|
||||
margin-bottom: 0.8888em
|
||||
h6
|
||||
font-size: 1em
|
||||
margin-bottom: 1em
|
||||
blockquote
|
||||
background-color: $content-blockquote-background-color
|
||||
+ltr-property("border", $content-blockquote-border-left, false)
|
||||
padding: $content-blockquote-padding
|
||||
ol
|
||||
list-style-position: outside
|
||||
+ltr-property("margin", 2em, false)
|
||||
margin-top: 1em
|
||||
&:not([type])
|
||||
list-style-type: decimal
|
||||
&.is-lower-alpha
|
||||
list-style-type: lower-alpha
|
||||
&.is-lower-roman
|
||||
list-style-type: lower-roman
|
||||
&.is-upper-alpha
|
||||
list-style-type: upper-alpha
|
||||
&.is-upper-roman
|
||||
list-style-type: upper-roman
|
||||
ul
|
||||
list-style: disc outside
|
||||
+ltr-property("margin", 2em, false)
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style-type: circle
|
||||
margin-top: 0.5em
|
||||
ul
|
||||
list-style-type: square
|
||||
dd
|
||||
+ltr-property("margin", 2em, false)
|
||||
figure
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
text-align: center
|
||||
&:not(:first-child)
|
||||
margin-top: 2em
|
||||
&:not(:last-child)
|
||||
margin-bottom: 2em
|
||||
img
|
||||
display: inline-block
|
||||
figcaption
|
||||
font-style: italic
|
||||
pre
|
||||
+overflow-touch
|
||||
overflow-x: auto
|
||||
padding: $content-pre-padding
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
sup,
|
||||
sub
|
||||
font-size: 75%
|
||||
table
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
border: $content-table-cell-border
|
||||
border-width: $content-table-cell-border-width
|
||||
padding: $content-table-cell-padding
|
||||
vertical-align: top
|
||||
th
|
||||
color: $content-table-cell-heading-color
|
||||
&:not([align])
|
||||
text-align: inherit
|
||||
thead
|
||||
td,
|
||||
th
|
||||
border-width: $content-table-head-cell-border-width
|
||||
color: $content-table-head-cell-color
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
border-width: $content-table-foot-cell-border-width
|
||||
color: $content-table-foot-cell-color
|
||||
tbody
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: $content-table-body-last-row-cell-border-bottom-width
|
||||
.tabs
|
||||
li + li
|
||||
margin-top: 0
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-normal
|
||||
font-size: $size-normal
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
@@ -1,46 +0,0 @@
|
||||
$icon-dimensions: 1.5rem !default
|
||||
$icon-dimensions-small: 1rem !default
|
||||
$icon-dimensions-medium: 2rem !default
|
||||
$icon-dimensions-large: 3rem !default
|
||||
$icon-text-spacing: 0.25em !default
|
||||
|
||||
.icon
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
height: $icon-dimensions
|
||||
width: $icon-dimensions
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: $icon-dimensions-small
|
||||
width: $icon-dimensions-small
|
||||
&.is-medium
|
||||
height: $icon-dimensions-medium
|
||||
width: $icon-dimensions-medium
|
||||
&.is-large
|
||||
height: $icon-dimensions-large
|
||||
width: $icon-dimensions-large
|
||||
|
||||
.icon-text
|
||||
align-items: flex-start
|
||||
color: inherit
|
||||
display: inline-flex
|
||||
flex-wrap: wrap
|
||||
line-height: $icon-dimensions
|
||||
vertical-align: top
|
||||
.icon
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
&:not(:last-child)
|
||||
+ltr
|
||||
margin-right: $icon-text-spacing
|
||||
+rtl
|
||||
margin-left: $icon-text-spacing
|
||||
&:not(:first-child)
|
||||
+ltr
|
||||
margin-left: $icon-text-spacing
|
||||
+rtl
|
||||
margin-right: $icon-text-spacing
|
||||
|
||||
div.icon-text
|
||||
display: flex
|
||||
@@ -1,73 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$dimensions: 16 24 32 48 64 96 128 !default
|
||||
|
||||
.image
|
||||
display: block
|
||||
position: relative
|
||||
img
|
||||
display: block
|
||||
height: auto
|
||||
width: 100%
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
// Ratio
|
||||
&.is-square,
|
||||
&.is-1by1,
|
||||
&.is-5by4,
|
||||
&.is-4by3,
|
||||
&.is-3by2,
|
||||
&.is-5by3,
|
||||
&.is-16by9,
|
||||
&.is-2by1,
|
||||
&.is-3by1,
|
||||
&.is-4by5,
|
||||
&.is-3by4,
|
||||
&.is-2by3,
|
||||
&.is-3by5,
|
||||
&.is-9by16,
|
||||
&.is-1by2,
|
||||
&.is-1by3
|
||||
img,
|
||||
.has-ratio
|
||||
@extend %overlay
|
||||
height: 100%
|
||||
width: 100%
|
||||
&.is-square,
|
||||
&.is-1by1
|
||||
padding-top: 100%
|
||||
&.is-5by4
|
||||
padding-top: 80%
|
||||
&.is-4by3
|
||||
padding-top: 75%
|
||||
&.is-3by2
|
||||
padding-top: 66.6666%
|
||||
&.is-5by3
|
||||
padding-top: 60%
|
||||
&.is-16by9
|
||||
padding-top: 56.25%
|
||||
&.is-2by1
|
||||
padding-top: 50%
|
||||
&.is-3by1
|
||||
padding-top: 33.3333%
|
||||
&.is-4by5
|
||||
padding-top: 125%
|
||||
&.is-3by4
|
||||
padding-top: 133.3333%
|
||||
&.is-2by3
|
||||
padding-top: 150%
|
||||
&.is-3by5
|
||||
padding-top: 166.6666%
|
||||
&.is-9by16
|
||||
padding-top: 177.7777%
|
||||
&.is-1by2
|
||||
padding-top: 200%
|
||||
&.is-1by3
|
||||
padding-top: 300%
|
||||
// Sizes
|
||||
@each $dimension in $dimensions
|
||||
&.is-#{$dimension}x#{$dimension}
|
||||
height: $dimension * 1px
|
||||
width: $dimension * 1px
|
||||
@@ -1,52 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$notification-background-color: $background !default
|
||||
$notification-code-background-color: $scheme-main !default
|
||||
$notification-radius: $radius !default
|
||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
|
||||
|
||||
$notification-colors: $colors !default
|
||||
|
||||
.notification
|
||||
@extend %block
|
||||
background-color: $notification-background-color
|
||||
border-radius: $notification-radius
|
||||
position: relative
|
||||
+ltr
|
||||
padding: $notification-padding-ltr
|
||||
+rtl
|
||||
padding: $notification-padding-rtl
|
||||
a:not(.button):not(.dropdown-item)
|
||||
color: currentColor
|
||||
text-decoration: underline
|
||||
strong
|
||||
color: currentColor
|
||||
code,
|
||||
pre
|
||||
background: $notification-code-background-color
|
||||
pre code
|
||||
background: transparent
|
||||
& > .delete
|
||||
+ltr-position(0.5rem)
|
||||
position: absolute
|
||||
top: 0.5rem
|
||||
.title,
|
||||
.subtitle,
|
||||
.content
|
||||
color: currentColor
|
||||
// Colors
|
||||
@each $name, $pair in $notification-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// If light and dark colors are provided
|
||||
@if length($pair) >= 4
|
||||
$color-light: nth($pair, 3)
|
||||
$color-dark: nth($pair, 4)
|
||||
&.is-light
|
||||
background-color: $color-light
|
||||
color: $color-dark
|
||||
@@ -1,28 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
.delete
|
||||
@extend %delete
|
||||
|
||||
.heading
|
||||
display: block
|
||||
font-size: 11px
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
text-transform: uppercase
|
||||
|
||||
.loader
|
||||
@extend %loader
|
||||
|
||||
.number
|
||||
align-items: center
|
||||
background-color: $background
|
||||
border-radius: $radius-rounded
|
||||
display: inline-flex
|
||||
font-size: $size-medium
|
||||
height: 2em
|
||||
justify-content: center
|
||||
margin-right: 1.5rem
|
||||
min-width: 2.5em
|
||||
padding: 0.25rem 0.5rem
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
@@ -1,73 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$progress-bar-background-color: $border-light !default
|
||||
$progress-value-background-color: $text !default
|
||||
$progress-border-radius: $radius-rounded !default
|
||||
|
||||
$progress-indeterminate-duration: 1.5s !default
|
||||
|
||||
$progress-colors: $colors !default
|
||||
|
||||
.progress
|
||||
@extend %block
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
border: none
|
||||
border-radius: $progress-border-radius
|
||||
display: block
|
||||
height: $size-normal
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
width: 100%
|
||||
&::-webkit-progress-bar
|
||||
background-color: $progress-bar-background-color
|
||||
&::-webkit-progress-value
|
||||
background-color: $progress-value-background-color
|
||||
&::-moz-progress-bar
|
||||
background-color: $progress-value-background-color
|
||||
&::-ms-fill
|
||||
background-color: $progress-value-background-color
|
||||
border: none
|
||||
// Colors
|
||||
@each $name, $pair in $progress-colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&::-webkit-progress-value
|
||||
background-color: $color
|
||||
&::-moz-progress-bar
|
||||
background-color: $color
|
||||
&::-ms-fill
|
||||
background-color: $color
|
||||
&:indeterminate
|
||||
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
|
||||
|
||||
&:indeterminate
|
||||
animation-duration: $progress-indeterminate-duration
|
||||
animation-iteration-count: infinite
|
||||
animation-name: moveIndeterminate
|
||||
animation-timing-function: linear
|
||||
background-color: $progress-bar-background-color
|
||||
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
|
||||
background-position: top left
|
||||
background-repeat: no-repeat
|
||||
background-size: 150% 150%
|
||||
&::-webkit-progress-bar
|
||||
background-color: transparent
|
||||
&::-moz-progress-bar
|
||||
background-color: transparent
|
||||
&::-ms-fill
|
||||
animation-name: none
|
||||
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: $size-small
|
||||
&.is-medium
|
||||
height: $size-medium
|
||||
&.is-large
|
||||
height: $size-large
|
||||
|
||||
@keyframes moveIndeterminate
|
||||
from
|
||||
background-position: 200% 0
|
||||
to
|
||||
background-position: -200% 0
|
||||
@@ -1,140 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$tag-background-color: $background !default
|
||||
$tag-color: $text !default
|
||||
$tag-radius: $radius !default
|
||||
$tag-delete-margin: 1px !default
|
||||
|
||||
$tag-colors: $colors !default
|
||||
|
||||
.tags
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.tag
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", 0.5rem)
|
||||
&:last-child
|
||||
margin-bottom: -0.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1rem
|
||||
// Sizes
|
||||
&.are-medium
|
||||
.tag:not(.is-normal):not(.is-large)
|
||||
font-size: $size-normal
|
||||
&.are-large
|
||||
.tag:not(.is-normal):not(.is-medium)
|
||||
font-size: $size-medium
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
.tag
|
||||
margin-right: 0.25rem
|
||||
margin-left: 0.25rem
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
.tag
|
||||
&:not(:first-child)
|
||||
margin-left: 0.5rem
|
||||
&:not(:last-child)
|
||||
margin-right: 0
|
||||
&.has-addons
|
||||
.tag
|
||||
+ltr-property("margin", 0)
|
||||
&:not(:first-child)
|
||||
+ltr-property("margin", 0, false)
|
||||
+ltr
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
+rtl
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
&:not(:last-child)
|
||||
+ltr
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
+rtl
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
|
||||
.tag:not(body)
|
||||
align-items: center
|
||||
background-color: $tag-background-color
|
||||
border-radius: $tag-radius
|
||||
color: $tag-color
|
||||
display: inline-flex
|
||||
font-size: $size-small
|
||||
height: 2em
|
||||
justify-content: center
|
||||
line-height: 1.5
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
white-space: nowrap
|
||||
.delete
|
||||
+ltr-property("margin", 0.25rem, false)
|
||||
+ltr-property("margin", -0.375rem)
|
||||
// Colors
|
||||
@each $name, $pair in $tag-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// If a light and dark colors are provided
|
||||
@if length($pair) > 3
|
||||
$color-light: nth($pair, 3)
|
||||
$color-dark: nth($pair, 4)
|
||||
&.is-light
|
||||
background-color: $color-light
|
||||
color: $color-dark
|
||||
// Sizes
|
||||
&.is-normal
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
&.is-large
|
||||
font-size: $size-medium
|
||||
.icon
|
||||
&:first-child:not(:last-child)
|
||||
+ltr-property("margin", -0.375em, false)
|
||||
+ltr-property("margin", 0.1875em)
|
||||
&:last-child:not(:first-child)
|
||||
+ltr-property("margin", 0.1875em, false)
|
||||
+ltr-property("margin", -0.375em)
|
||||
&:first-child:last-child
|
||||
+ltr-property("margin", -0.375em, false)
|
||||
+ltr-property("margin", -0.375em)
|
||||
// Modifiers
|
||||
&.is-delete
|
||||
+ltr-property("margin", $tag-delete-margin, false)
|
||||
padding: 0
|
||||
position: relative
|
||||
width: 2em
|
||||
&::before,
|
||||
&::after
|
||||
background-color: currentColor
|
||||
content: ""
|
||||
display: block
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
||||
transform-origin: center center
|
||||
&::before
|
||||
height: 1px
|
||||
width: 50%
|
||||
&::after
|
||||
height: 50%
|
||||
width: 1px
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: darken($tag-background-color, 5%)
|
||||
&:active
|
||||
background-color: darken($tag-background-color, 10%)
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
|
||||
a.tag
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
@@ -1,9 +0,0 @@
|
||||
/* Bulma Form */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "shared"
|
||||
@import "input-textarea"
|
||||
@import "checkbox-radio"
|
||||
@import "select"
|
||||
@import "file"
|
||||
@import "tools"
|
||||
@@ -1,22 +0,0 @@
|
||||
%checkbox-radio
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
line-height: 1.25
|
||||
position: relative
|
||||
input
|
||||
cursor: pointer
|
||||
&:hover
|
||||
color: $input-hover-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &,
|
||||
input[disabled]
|
||||
color: $input-disabled-color
|
||||
cursor: not-allowed
|
||||
|
||||
.checkbox
|
||||
@extend %checkbox-radio
|
||||
|
||||
.radio
|
||||
@extend %checkbox-radio
|
||||
& + .radio
|
||||
+ltr-property("margin", 0.5em, false)
|
||||
@@ -1,184 +0,0 @@
|
||||
$file-border-color: $border !default
|
||||
$file-radius: $radius !default
|
||||
|
||||
$file-cta-background-color: $scheme-main-ter !default
|
||||
$file-cta-color: $text !default
|
||||
$file-cta-hover-color: $text-strong !default
|
||||
$file-cta-active-color: $text-strong !default
|
||||
|
||||
$file-name-border-color: $border !default
|
||||
$file-name-border-style: solid !default
|
||||
$file-name-border-width: 1px 1px 1px 0 !default
|
||||
$file-name-max-width: 16em !default
|
||||
|
||||
$file-colors: $form-colors !default
|
||||
|
||||
.file
|
||||
@extend %unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
position: relative
|
||||
// Colors
|
||||
@each $name, $pair in $file-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
.file-cta
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
.file-cta
|
||||
background-color: bulmaDarken($color, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
.file-cta
|
||||
border-color: transparent
|
||||
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
|
||||
color: $color-invert
|
||||
&:active,
|
||||
&.is-active
|
||||
.file-cta
|
||||
background-color: bulmaDarken($color, 5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-normal
|
||||
font-size: $size-normal
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 28px
|
||||
// Modifiers
|
||||
&.has-name
|
||||
.file-cta
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
.file-name
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&.is-empty
|
||||
.file-cta
|
||||
border-radius: $file-radius
|
||||
.file-name
|
||||
display: none
|
||||
&.is-boxed
|
||||
.file-label
|
||||
flex-direction: column
|
||||
.file-cta
|
||||
flex-direction: column
|
||||
height: auto
|
||||
padding: 1em 3em
|
||||
.file-name
|
||||
border-width: 0 1px 1px
|
||||
.file-icon
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-small
|
||||
.file-icon .fa
|
||||
font-size: 14px
|
||||
&.is-medium
|
||||
.file-icon .fa
|
||||
font-size: 28px
|
||||
&.is-large
|
||||
.file-icon .fa
|
||||
font-size: 35px
|
||||
&.has-name
|
||||
.file-cta
|
||||
border-radius: $file-radius $file-radius 0 0
|
||||
.file-name
|
||||
border-radius: 0 0 $file-radius $file-radius
|
||||
border-width: 0 1px 1px
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-fullwidth
|
||||
.file-label
|
||||
width: 100%
|
||||
.file-name
|
||||
flex-grow: 1
|
||||
max-width: none
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
.file-cta
|
||||
border-radius: 0 $file-radius $file-radius 0
|
||||
.file-name
|
||||
border-radius: $file-radius 0 0 $file-radius
|
||||
border-width: 1px 0 1px 1px
|
||||
order: -1
|
||||
|
||||
.file-label
|
||||
align-items: stretch
|
||||
display: flex
|
||||
cursor: pointer
|
||||
justify-content: flex-start
|
||||
overflow: hidden
|
||||
position: relative
|
||||
&:hover
|
||||
.file-cta
|
||||
background-color: bulmaDarken($file-cta-background-color, 2.5%)
|
||||
color: $file-cta-hover-color
|
||||
.file-name
|
||||
border-color: bulmaDarken($file-name-border-color, 2.5%)
|
||||
&:active
|
||||
.file-cta
|
||||
background-color: bulmaDarken($file-cta-background-color, 5%)
|
||||
color: $file-cta-active-color
|
||||
.file-name
|
||||
border-color: bulmaDarken($file-name-border-color, 5%)
|
||||
|
||||
.file-input
|
||||
height: 100%
|
||||
left: 0
|
||||
opacity: 0
|
||||
outline: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
.file-cta,
|
||||
.file-name
|
||||
@extend %control
|
||||
border-color: $file-border-color
|
||||
border-radius: $file-radius
|
||||
font-size: 1em
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
white-space: nowrap
|
||||
|
||||
.file-cta
|
||||
background-color: $file-cta-background-color
|
||||
color: $file-cta-color
|
||||
|
||||
.file-name
|
||||
border-color: $file-name-border-color
|
||||
border-style: $file-name-border-style
|
||||
border-width: $file-name-border-width
|
||||
display: block
|
||||
max-width: $file-name-max-width
|
||||
overflow: hidden
|
||||
text-align: inherit
|
||||
text-overflow: ellipsis
|
||||
|
||||
.file-icon
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 1em
|
||||
justify-content: center
|
||||
+ltr-property("margin", 0.5em)
|
||||
width: 1em
|
||||
.fa
|
||||
font-size: 14px
|
||||
@@ -1,66 +0,0 @@
|
||||
$textarea-padding: $control-padding-horizontal !default
|
||||
$textarea-max-height: 40em !default
|
||||
$textarea-min-height: 8em !default
|
||||
|
||||
$textarea-colors: $form-colors !default
|
||||
|
||||
%input-textarea
|
||||
@extend %input
|
||||
box-shadow: $input-shadow
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
&[readonly]
|
||||
box-shadow: none
|
||||
// Colors
|
||||
@each $name, $pair in $textarea-colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-inline
|
||||
display: inline
|
||||
width: auto
|
||||
|
||||
.input
|
||||
@extend %input-textarea
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
padding-left: calc(#{$control-padding-horizontal} + 0.375em)
|
||||
padding-right: calc(#{$control-padding-horizontal} + 0.375em)
|
||||
&.is-static
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
.textarea
|
||||
@extend %input-textarea
|
||||
display: block
|
||||
max-width: 100%
|
||||
min-width: 100%
|
||||
padding: $textarea-padding
|
||||
resize: vertical
|
||||
&:not([rows])
|
||||
max-height: $textarea-max-height
|
||||
min-height: $textarea-min-height
|
||||
&[rows]
|
||||
height: initial
|
||||
// Modifiers
|
||||
&.has-fixed-size
|
||||
resize: none
|
||||
@@ -1,88 +0,0 @@
|
||||
$select-colors: $form-colors !default
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
max-width: 100%
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:not(.is-multiple)
|
||||
height: $input-height
|
||||
&:not(.is-multiple):not(.is-loading)
|
||||
&::after
|
||||
@extend %arrow
|
||||
border-color: $input-arrow
|
||||
+ltr-position(1.125em)
|
||||
z-index: 4
|
||||
&.is-rounded
|
||||
select
|
||||
border-radius: $radius-rounded
|
||||
+ltr-property("padding", 1em, false)
|
||||
select
|
||||
@extend %input
|
||||
cursor: pointer
|
||||
display: block
|
||||
font-size: 1em
|
||||
max-width: 100%
|
||||
outline: none
|
||||
&::-ms-expand
|
||||
display: none
|
||||
&[disabled]:hover,
|
||||
fieldset[disabled] &:hover
|
||||
border-color: $input-disabled-border-color
|
||||
&:not([multiple])
|
||||
+ltr-property("padding", 2.5em)
|
||||
&[multiple]
|
||||
height: auto
|
||||
padding: 0
|
||||
option
|
||||
padding: 0.5em 1em
|
||||
// States
|
||||
&:not(.is-multiple):not(.is-loading):hover
|
||||
&::after
|
||||
border-color: $input-hover-color
|
||||
// Colors
|
||||
@each $name, $pair in $select-colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&:not(:hover)::after
|
||||
border-color: $color
|
||||
select
|
||||
border-color: $color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: bulmaDarken($color, 5%)
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-disabled
|
||||
&::after
|
||||
border-color: $input-disabled-color !important
|
||||
opacity: 0.5
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
select
|
||||
width: 100%
|
||||
&.is-loading
|
||||
&::after
|
||||
@extend %loader
|
||||
margin-top: 0
|
||||
position: absolute
|
||||
+ltr-position(0.625em)
|
||||
top: 0.625em
|
||||
transform: none
|
||||
&.is-small:after
|
||||
font-size: $size-small
|
||||
&.is-medium:after
|
||||
font-size: $size-medium
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
||||
@@ -1,59 +0,0 @@
|
||||
@import "../utilities/controls"
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$form-colors: $colors !default
|
||||
|
||||
$input-color: $text-strong !default
|
||||
$input-background-color: $scheme-main !default
|
||||
$input-border-color: $border !default
|
||||
$input-height: $control-height !default
|
||||
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
|
||||
$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
|
||||
|
||||
$input-hover-color: $text-strong !default
|
||||
$input-hover-border-color: $border-hover !default
|
||||
|
||||
$input-focus-color: $text-strong !default
|
||||
$input-focus-border-color: $link !default
|
||||
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
|
||||
|
||||
$input-disabled-color: $text-light !default
|
||||
$input-disabled-background-color: $background !default
|
||||
$input-disabled-border-color: $background !default
|
||||
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
|
||||
|
||||
$input-arrow: $link !default
|
||||
|
||||
$input-icon-color: $border !default
|
||||
$input-icon-active-color: $text !default
|
||||
|
||||
$input-radius: $radius !default
|
||||
|
||||
=input
|
||||
@extend %control
|
||||
background-color: $input-background-color
|
||||
border-color: $input-border-color
|
||||
border-radius: $input-radius
|
||||
+placeholder
|
||||
color: var(--placeholder-text-color)
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $input-hover-border-color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $input-focus-border-color
|
||||
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $input-disabled-background-color
|
||||
border-color: $input-disabled-border-color
|
||||
box-shadow: none
|
||||
color: var(--placeholder-text-color)
|
||||
+placeholder
|
||||
color: var(--placeholder-text-color)
|
||||
|
||||
%input
|
||||
+input
|
||||
@@ -1,215 +0,0 @@
|
||||
$label-color: $text-strong !default
|
||||
$label-weight: $weight-bold !default
|
||||
|
||||
$help-size: $size-small !default
|
||||
|
||||
$label-colors: $form-colors !default
|
||||
|
||||
.label
|
||||
color: $label-color
|
||||
display: block
|
||||
font-size: $size-normal
|
||||
font-weight: $label-weight
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.5em
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
|
||||
.help
|
||||
display: block
|
||||
font-size: $help-size
|
||||
margin-top: 0.25rem
|
||||
@each $name, $pair in $label-colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
color: $color
|
||||
|
||||
// Containers
|
||||
|
||||
.field
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
// Modifiers
|
||||
&.has-addons
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
.control
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", -1px)
|
||||
&:not(:first-child):not(:last-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
border-radius: 0
|
||||
&:first-child:not(:only-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
+ltr
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
+rtl
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:last-child:not(:only-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
+ltr
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
+rtl
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
&:not([disabled])
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
z-index: 3
|
||||
&:hover
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
justify-content: flex-end
|
||||
&.has-addons-fullwidth
|
||||
.control
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
&.is-grouped
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
& > .control
|
||||
flex-shrink: 0
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
+ltr-property("margin", 0.75rem)
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-grouped-centered
|
||||
justify-content: center
|
||||
&.is-grouped-right
|
||||
justify-content: flex-end
|
||||
&.is-grouped-multiline
|
||||
flex-wrap: wrap
|
||||
& > .control
|
||||
&:last-child,
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
&:last-child
|
||||
margin-bottom: -0.75rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
&.is-horizontal
|
||||
+tablet
|
||||
display: flex
|
||||
|
||||
.field-label
|
||||
.label
|
||||
font-size: inherit
|
||||
+mobile
|
||||
margin-bottom: 0.5rem
|
||||
+tablet
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
+ltr-property("margin", 1.5rem)
|
||||
text-align: right
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
padding-top: 0.375em
|
||||
&.is-normal
|
||||
padding-top: 0.375em
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
padding-top: 0.375em
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
padding-top: 0.375em
|
||||
|
||||
.field-body
|
||||
.field .field
|
||||
margin-bottom: 0
|
||||
+tablet
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 5
|
||||
flex-shrink: 1
|
||||
.field
|
||||
margin-bottom: 0
|
||||
& > .field
|
||||
flex-shrink: 1
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", 0.75rem)
|
||||
|
||||
.control
|
||||
box-sizing: border-box
|
||||
clear: both
|
||||
font-size: $size-normal
|
||||
position: relative
|
||||
text-align: inherit
|
||||
// Modifiers
|
||||
&.has-icons-left,
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select
|
||||
&:focus
|
||||
& ~ .icon
|
||||
color: $input-icon-active-color
|
||||
&.is-small ~ .icon
|
||||
font-size: $size-small
|
||||
&.is-medium ~ .icon
|
||||
font-size: $size-medium
|
||||
&.is-large ~ .icon
|
||||
font-size: $size-large
|
||||
.icon
|
||||
color: $input-icon-color
|
||||
height: $input-height
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: $input-height
|
||||
z-index: 4
|
||||
&.has-icons-left
|
||||
.input,
|
||||
.select select
|
||||
padding-left: $input-height
|
||||
.icon.is-left
|
||||
left: 0
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select select
|
||||
padding-right: $input-height
|
||||
.icon.is-right
|
||||
right: 0
|
||||
&.is-loading
|
||||
&::after
|
||||
@extend %loader
|
||||
position: absolute !important
|
||||
+ltr-position(0.625em)
|
||||
top: 0.625em
|
||||
z-index: 4
|
||||
&.is-small:after
|
||||
font-size: $size-small
|
||||
&.is-medium:after
|
||||
font-size: $size-medium
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
||||
@@ -1,9 +0,0 @@
|
||||
/* Bulma Utilities */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "initial-variables"
|
||||
@import "functions"
|
||||
@import "derived-variables"
|
||||
@import "mixins"
|
||||
@import "controls"
|
||||
@import "extends"
|
||||
@@ -1,49 +0,0 @@
|
||||
@import "derived-variables"
|
||||
|
||||
$control-radius: $radius !default
|
||||
$control-radius-small: $radius-small !default
|
||||
|
||||
$control-border-width: 1px !default
|
||||
|
||||
$control-height: 2.5em !default
|
||||
$control-line-height: 1.5 !default
|
||||
|
||||
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
|
||||
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
|
||||
|
||||
=control
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
align-items: center
|
||||
border: $control-border-width solid transparent
|
||||
border-radius: $control-radius
|
||||
box-shadow: none
|
||||
display: inline-flex
|
||||
font-size: $size-normal
|
||||
height: $control-height
|
||||
justify-content: flex-start
|
||||
line-height: $control-line-height
|
||||
padding-bottom: $control-padding-vertical
|
||||
padding-left: $control-padding-horizontal
|
||||
padding-right: $control-padding-horizontal
|
||||
padding-top: $control-padding-vertical
|
||||
position: relative
|
||||
vertical-align: top
|
||||
// States
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
outline: none
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
cursor: not-allowed
|
||||
|
||||
// The controls sizes use mixins so they can be used at different breakpoints
|
||||
=control-small
|
||||
border-radius: $control-radius-small
|
||||
font-size: $size-small
|
||||
=control-medium
|
||||
font-size: $size-medium
|
||||
=control-large
|
||||
font-size: $size-large
|
||||
@@ -1,114 +0,0 @@
|
||||
@import "initial-variables"
|
||||
@import "functions"
|
||||
|
||||
$primary: $turquoise !default
|
||||
|
||||
$info: $cyan !default
|
||||
$success: $green !default
|
||||
$warning: $yellow !default
|
||||
$danger: $red !default
|
||||
|
||||
$light: $white-ter !default
|
||||
$dark: $grey-darker !default
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert: findColorInvert($orange) !default
|
||||
$yellow-invert: findColorInvert($yellow) !default
|
||||
$green-invert: findColorInvert($green) !default
|
||||
$turquoise-invert: findColorInvert($turquoise) !default
|
||||
$cyan-invert: findColorInvert($cyan) !default
|
||||
$blue-invert: findColorInvert($blue) !default
|
||||
$purple-invert: findColorInvert($purple) !default
|
||||
$red-invert: findColorInvert($red) !default
|
||||
|
||||
$primary-invert: findColorInvert($primary) !default
|
||||
$primary-light: findLightColor($primary) !default
|
||||
$primary-dark: findDarkColor($primary) !default
|
||||
$info-invert: findColorInvert($info) !default
|
||||
$info-light: findLightColor($info) !default
|
||||
$info-dark: findDarkColor($info) !default
|
||||
$success-invert: findColorInvert($success) !default
|
||||
$success-light: findLightColor($success) !default
|
||||
$success-dark: findDarkColor($success) !default
|
||||
$warning-invert: findColorInvert($warning) !default
|
||||
$warning-light: findLightColor($warning) !default
|
||||
$warning-dark: findDarkColor($warning) !default
|
||||
$danger-invert: findColorInvert($danger) !default
|
||||
$danger-light: findLightColor($danger) !default
|
||||
$danger-dark: findDarkColor($danger) !default
|
||||
$light-invert: findColorInvert($light) !default
|
||||
$dark-invert: findColorInvert($dark) !default
|
||||
|
||||
// General colors
|
||||
|
||||
$scheme-main: $white !default
|
||||
$scheme-main-bis: $white-bis !default
|
||||
$scheme-main-ter: $white-ter !default
|
||||
$scheme-invert: $black !default
|
||||
$scheme-invert-bis: $black-bis !default
|
||||
$scheme-invert-ter: $black-ter !default
|
||||
|
||||
$background: $white-ter !default
|
||||
|
||||
$border: $grey-lighter !default
|
||||
$border-hover: $grey-light !default
|
||||
$border-light: $grey-lightest !default
|
||||
$border-light-hover: $grey-light !default
|
||||
|
||||
// Text colors
|
||||
|
||||
$text: $grey-dark !default
|
||||
$text-invert: findColorInvert($text) !default
|
||||
$text-light: $grey !default
|
||||
$text-strong: $grey-darker !default
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: darken($red, 15%) !default
|
||||
$code-background: $background !default
|
||||
|
||||
$pre: $text !default
|
||||
$pre-background: $background !default
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: $blue !default
|
||||
$link-invert: findColorInvert($link) !default
|
||||
$link-light: findLightColor($link) !default
|
||||
$link-dark: findDarkColor($link) !default
|
||||
$link-visited: $purple !default
|
||||
|
||||
$link-hover: $grey-darker !default
|
||||
$link-hover-border: $grey-light !default
|
||||
|
||||
$link-focus: $grey-darker !default
|
||||
$link-focus-border: $blue !default
|
||||
|
||||
$link-active: $grey-darker !default
|
||||
$link-active-border: $grey-dark !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: $family-sans-serif !default
|
||||
$family-secondary: $family-sans-serif !default
|
||||
$family-code: $family-monospace !default
|
||||
|
||||
$size-small: $size-7 !default
|
||||
$size-normal: $size-6 !default
|
||||
$size-medium: $size-5 !default
|
||||
$size-large: $size-4 !default
|
||||
|
||||
// Effects
|
||||
|
||||
$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
|
||||
|
||||
// Lists and maps
|
||||
$custom-colors: null !default
|
||||
$custom-shades: null !default
|
||||
|
||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
|
||||
|
||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||
@@ -1,25 +0,0 @@
|
||||
@import "mixins"
|
||||
|
||||
%control
|
||||
+control
|
||||
|
||||
%unselectable
|
||||
+unselectable
|
||||
|
||||
%arrow
|
||||
+arrow
|
||||
|
||||
%block
|
||||
+block
|
||||
|
||||
%delete
|
||||
+delete
|
||||
|
||||
%loader
|
||||
+loader
|
||||
|
||||
%overlay
|
||||
+overlay
|
||||
|
||||
%reset
|
||||
+reset
|
||||
@@ -1,135 +0,0 @@
|
||||
@function mergeColorMaps($bulma-colors, $custom-colors)
|
||||
// We return at least Bulma's hard-coded colors
|
||||
$merged-colors: $bulma-colors
|
||||
|
||||
// We want a map as input
|
||||
@if type-of($custom-colors) == 'map'
|
||||
@each $name, $components in $custom-colors
|
||||
// The color name should be a string
|
||||
// and the components either a single color
|
||||
// or a colors list with at least one element
|
||||
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
|
||||
$color-base: null
|
||||
$color-invert: null
|
||||
$color-light: null
|
||||
$color-dark: null
|
||||
$value: null
|
||||
|
||||
// The param can either be a single color
|
||||
// or a list of 2 colors
|
||||
@if type-of($components) == 'color'
|
||||
$color-base: $components
|
||||
$color-invert: findColorInvert($color-base)
|
||||
$color-light: findLightColor($color-base)
|
||||
$color-dark: findDarkColor($color-base)
|
||||
@else if type-of($components) == 'list'
|
||||
$color-base: nth($components, 1)
|
||||
// If Invert, Light and Dark are provided
|
||||
@if length($components) > 3
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: nth($components, 3)
|
||||
$color-dark: nth($components, 4)
|
||||
// If only Invert and Light are provided
|
||||
@else if length($components) > 2
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: nth($components, 3)
|
||||
$color-dark: findDarkColor($color-base)
|
||||
// If only Invert is provided
|
||||
@else
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: findLightColor($color-base)
|
||||
$color-dark: findDarkColor($color-base)
|
||||
|
||||
$value: ($color-base, $color-invert, $color-light, $color-dark)
|
||||
|
||||
// We only want to merge the map if the color base is an actual color
|
||||
@if type-of($color-base) == 'color'
|
||||
// We merge this colors elements as map with Bulma's colors map
|
||||
// (we can override them this way, no multiple definition for the same name)
|
||||
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
|
||||
$merged-colors: map_merge($merged-colors, ($name: $value))
|
||||
|
||||
@return $merged-colors
|
||||
|
||||
@function powerNumber($number, $exp)
|
||||
$value: 1
|
||||
@if $exp > 0
|
||||
@for $i from 1 through $exp
|
||||
$value: $value * $number
|
||||
@else if $exp < 0
|
||||
@for $i from 1 through -$exp
|
||||
$value: divide($value, $number)
|
||||
@return $value
|
||||
|
||||
@function colorLuminance($color)
|
||||
@if type-of($color) != 'color'
|
||||
@return 0.55
|
||||
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
|
||||
@each $name, $value in $color-rgb
|
||||
$adjusted: 0
|
||||
$value: divide($value, 255)
|
||||
@if $value < 0.03928
|
||||
$value: divide($value, 12.92)
|
||||
@else
|
||||
$value: divide(($value + .055), 1.055)
|
||||
$value: powerNumber($value, 2)
|
||||
$color-rgb: map-merge($color-rgb, ($name: $value))
|
||||
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
||||
|
||||
@function findColorInvert($color)
|
||||
@if (colorLuminance($color) > 0.55)
|
||||
@return rgba(#000, 0.7)
|
||||
@else
|
||||
@return #fff
|
||||
|
||||
@function findLightColor($color, $l: 96%)
|
||||
@if type-of($color) == 'color'
|
||||
$l: 96%
|
||||
@if lightness($color) > 96%
|
||||
$l: lightness($color)
|
||||
@return change-color($color, $lightness: $l)
|
||||
@return $background
|
||||
|
||||
@function findDarkColor($color, $base-l: 29%)
|
||||
@if type-of($color) == 'color'
|
||||
$luminance: colorLuminance($color)
|
||||
$luminance-delta: (0.53 - $luminance)
|
||||
$target-l: round($base-l + ($luminance-delta * 53))
|
||||
@return change-color($color, $lightness: max($base-l, $target-l))
|
||||
@return $text-strong
|
||||
|
||||
@function bulmaRgba($color, $alpha)
|
||||
@if type-of($color) != 'color'
|
||||
@return $color
|
||||
@return rgba($color, $alpha)
|
||||
|
||||
@function bulmaDarken($color, $amount)
|
||||
@if type-of($color) != 'color'
|
||||
@return $color
|
||||
@return darken($color, $amount)
|
||||
|
||||
@function bulmaLighten($color, $amount)
|
||||
@if type-of($color) != 'color'
|
||||
@return $color
|
||||
@return lighten($color, $amount)
|
||||
|
||||
// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
|
||||
// Replaces old slash division deprecated in Dart Sass
|
||||
@function divide($dividend, $divisor, $precision: 10)
|
||||
$sign: if($dividend > 0 and $divisor > 0, 1, -1)
|
||||
$dividend: abs($dividend)
|
||||
$divisor: abs($divisor)
|
||||
$quotient: 0
|
||||
$remainder: $dividend
|
||||
@if $dividend == 0
|
||||
@return 0
|
||||
@if $divisor == 0
|
||||
@error "Cannot divide by 0"
|
||||
@if $divisor == 1
|
||||
@return $dividend
|
||||
@while $remainder >= $divisor
|
||||
$quotient: $quotient + 1
|
||||
$remainder: $remainder - $divisor
|
||||
@if $remainder > 0 and $precision > 0
|
||||
$remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
|
||||
@return ($quotient + $remainder) * $sign
|
||||
@@ -1,79 +0,0 @@
|
||||
// Colors
|
||||
|
||||
$black: hsl(0, 0%, 4%) !default
|
||||
$black-bis: hsl(0, 0%, 7%) !default
|
||||
$black-ter: hsl(0, 0%, 14%) !default
|
||||
|
||||
$grey-darker: hsl(0, 0%, 21%) !default
|
||||
$grey-dark: hsl(0, 0%, 29%) !default
|
||||
$grey: hsl(0, 0%, 48%) !default
|
||||
$grey-light: hsl(0, 0%, 71%) !default
|
||||
$grey-lighter: hsl(0, 0%, 86%) !default
|
||||
$grey-lightest: hsl(0, 0%, 93%) !default
|
||||
|
||||
$white-ter: hsl(0, 0%, 96%) !default
|
||||
$white-bis: hsl(0, 0%, 98%) !default
|
||||
$white: hsl(0, 0%, 100%) !default
|
||||
|
||||
$orange: hsl(14, 100%, 53%) !default
|
||||
$yellow: hsl(44, 100%, 77%) !default
|
||||
$green: hsl(153, 53%, 53%) !default
|
||||
$turquoise: hsl(171, 100%, 41%) !default
|
||||
$cyan: hsl(207, 61%, 53%) !default
|
||||
$blue: hsl(229, 53%, 53%) !default
|
||||
$purple: hsl(271, 100%, 71%) !default
|
||||
$red: hsl(348, 86%, 61%) !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
|
||||
$family-monospace: monospace !default
|
||||
$render-mode: optimizeLegibility !default
|
||||
|
||||
$size-1: 3rem !default
|
||||
$size-2: 2.5rem !default
|
||||
$size-3: 2rem !default
|
||||
$size-4: 1.5rem !default
|
||||
$size-5: 1.25rem !default
|
||||
$size-6: 1rem !default
|
||||
$size-7: 0.75rem !default
|
||||
|
||||
$weight-light: 300 !default
|
||||
$weight-normal: 400 !default
|
||||
$weight-medium: 500 !default
|
||||
$weight-semibold: 600 !default
|
||||
$weight-bold: 700 !default
|
||||
|
||||
// Spacing
|
||||
|
||||
$block-spacing: 1.5rem !default
|
||||
|
||||
// Responsiveness
|
||||
|
||||
// The container horizontal gap, which acts as the offset for breakpoints
|
||||
$gap: 32px !default
|
||||
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
||||
$tablet: 769px !default
|
||||
// 960px container + 4rem
|
||||
$desktop: 960px + (2 * $gap) !default
|
||||
// 1152px container + 4rem
|
||||
$widescreen: 1152px + (2 * $gap) !default
|
||||
$widescreen-enabled: true !default
|
||||
// 1344px container + 4rem
|
||||
$fullhd: 1344px + (2 * $gap) !default
|
||||
$fullhd-enabled: true !default
|
||||
$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default
|
||||
|
||||
// Miscellaneous
|
||||
|
||||
$easing: ease-out !default
|
||||
$radius-small: 2px !default
|
||||
$radius: 4px !default
|
||||
$radius-large: 6px !default
|
||||
$radius-rounded: 9999px !default
|
||||
$speed: 86ms !default
|
||||
|
||||
// Flags
|
||||
|
||||
$variable-columns: true !default
|
||||
$rtl: false !default
|
||||
@@ -1,303 +0,0 @@
|
||||
@import "derived-variables"
|
||||
|
||||
=clearfix
|
||||
&::after
|
||||
clear: both
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
=center($width, $height: 0)
|
||||
position: absolute
|
||||
@if $height != 0
|
||||
left: calc(50% - (#{$width} * 0.5))
|
||||
top: calc(50% - (#{$height} * 0.5))
|
||||
@else
|
||||
left: calc(50% - (#{$width} * 0.5))
|
||||
top: calc(50% - (#{$width} * 0.5))
|
||||
|
||||
=fa($size, $dimensions)
|
||||
display: inline-block
|
||||
font-size: $size
|
||||
height: $dimensions
|
||||
line-height: $dimensions
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
width: $dimensions
|
||||
|
||||
=hamburger($dimensions)
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
appearance: none
|
||||
background: none
|
||||
border: none
|
||||
cursor: pointer
|
||||
display: block
|
||||
height: $dimensions
|
||||
position: relative
|
||||
width: $dimensions
|
||||
span
|
||||
background-color: currentColor
|
||||
display: block
|
||||
height: 1px
|
||||
left: calc(50% - 8px)
|
||||
position: absolute
|
||||
transform-origin: center
|
||||
transition-duration: $speed
|
||||
transition-property: background-color, opacity, transform
|
||||
transition-timing-function: $easing
|
||||
width: 16px
|
||||
&:nth-child(1)
|
||||
top: calc(50% - 6px)
|
||||
&:nth-child(2)
|
||||
top: calc(50% - 1px)
|
||||
&:nth-child(3)
|
||||
top: calc(50% + 4px)
|
||||
&:hover
|
||||
background-color: bulmaRgba(black, 0.05)
|
||||
// Modifers
|
||||
&.is-active
|
||||
span
|
||||
&:nth-child(1)
|
||||
transform: translateY(5px) rotate(45deg)
|
||||
&:nth-child(2)
|
||||
opacity: 0
|
||||
&:nth-child(3)
|
||||
transform: translateY(-5px) rotate(-45deg)
|
||||
|
||||
=overflow-touch
|
||||
-webkit-overflow-scrolling: touch
|
||||
|
||||
=placeholder
|
||||
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
|
||||
@each $placeholder in $placeholders
|
||||
&:#{$placeholder}-placeholder
|
||||
@content
|
||||
|
||||
=reset
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
appearance: none
|
||||
background: none
|
||||
border: none
|
||||
color: currentColor
|
||||
font-family: inherit
|
||||
font-size: 1em
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
// Responsiveness
|
||||
|
||||
=from($device)
|
||||
@media screen and (min-width: $device)
|
||||
@content
|
||||
|
||||
=until($device)
|
||||
@media screen and (max-width: $device - 1px)
|
||||
@content
|
||||
|
||||
=between($from, $until)
|
||||
@media screen and (min-width: $from) and (max-width: $until - 1px)
|
||||
@content
|
||||
|
||||
=mobile
|
||||
@media screen and (max-width: $tablet - 1px)
|
||||
@content
|
||||
|
||||
=tablet
|
||||
@media screen and (min-width: $tablet), print
|
||||
@content
|
||||
|
||||
=tablet-only
|
||||
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=touch
|
||||
@media screen and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=desktop
|
||||
@media screen and (min-width: $desktop)
|
||||
@content
|
||||
|
||||
=desktop-only
|
||||
@if $widescreen-enabled
|
||||
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
|
||||
@content
|
||||
|
||||
=until-widescreen
|
||||
@if $widescreen-enabled
|
||||
@media screen and (max-width: $widescreen - 1px)
|
||||
@content
|
||||
|
||||
=widescreen
|
||||
@if $widescreen-enabled
|
||||
@media screen and (min-width: $widescreen)
|
||||
@content
|
||||
|
||||
=widescreen-only
|
||||
@if $widescreen-enabled and $fullhd-enabled
|
||||
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
|
||||
@content
|
||||
|
||||
=until-fullhd
|
||||
@if $fullhd-enabled
|
||||
@media screen and (max-width: $fullhd - 1px)
|
||||
@content
|
||||
|
||||
=fullhd
|
||||
@if $fullhd-enabled
|
||||
@media screen and (min-width: $fullhd)
|
||||
@content
|
||||
|
||||
=breakpoint($name)
|
||||
$breakpoint: map-get($breakpoints, $name)
|
||||
@if $breakpoint
|
||||
$from: map-get($breakpoint, "from")
|
||||
$until: map-get($breakpoint, "until")
|
||||
@if $from and $until
|
||||
+between($from, $until)
|
||||
@content
|
||||
@else if $from
|
||||
+from($from)
|
||||
@content
|
||||
@else if $until
|
||||
+until($until)
|
||||
@content
|
||||
|
||||
=ltr
|
||||
@if not $rtl
|
||||
@content
|
||||
|
||||
=rtl
|
||||
@if $rtl
|
||||
@content
|
||||
|
||||
=ltr-property($property, $spacing, $right: true)
|
||||
$normal: if($right, "right", "left")
|
||||
$opposite: if($right, "left", "right")
|
||||
@if $rtl
|
||||
#{$property}-#{$opposite}: $spacing
|
||||
@else
|
||||
#{$property}-#{$normal}: $spacing
|
||||
|
||||
=ltr-position($spacing, $right: true)
|
||||
$normal: if($right, "right", "left")
|
||||
$opposite: if($right, "left", "right")
|
||||
@if $rtl
|
||||
#{$opposite}: $spacing
|
||||
@else
|
||||
#{$normal}: $spacing
|
||||
|
||||
// Placeholders
|
||||
|
||||
=unselectable
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
=arrow($color: transparent)
|
||||
border: 3px solid $color
|
||||
border-radius: 2px
|
||||
border-right: 0
|
||||
border-top: 0
|
||||
content: " "
|
||||
display: block
|
||||
height: 0.625em
|
||||
margin-top: -0.4375em
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: rotate(-45deg)
|
||||
transform-origin: center
|
||||
width: 0.625em
|
||||
|
||||
=block($spacing: $block-spacing)
|
||||
&:not(:last-child)
|
||||
margin-bottom: $spacing
|
||||
|
||||
=delete
|
||||
+unselectable
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
background-color: bulmaRgba($scheme-invert, 0.2)
|
||||
border: none
|
||||
border-radius: $radius-rounded
|
||||
cursor: pointer
|
||||
pointer-events: auto
|
||||
display: inline-block
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
font-size: 0
|
||||
height: 20px
|
||||
max-height: 20px
|
||||
max-width: 20px
|
||||
min-height: 20px
|
||||
min-width: 20px
|
||||
outline: none
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 20px
|
||||
&::before,
|
||||
&::after
|
||||
background-color: $scheme-main
|
||||
content: ""
|
||||
display: block
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
||||
transform-origin: center center
|
||||
&::before
|
||||
height: 2px
|
||||
width: 50%
|
||||
&::after
|
||||
height: 50%
|
||||
width: 2px
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: bulmaRgba($scheme-invert, 0.3)
|
||||
&:active
|
||||
background-color: bulmaRgba($scheme-invert, 0.4)
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 16px
|
||||
max-height: 16px
|
||||
max-width: 16px
|
||||
min-height: 16px
|
||||
min-width: 16px
|
||||
width: 16px
|
||||
&.is-medium
|
||||
height: 24px
|
||||
max-height: 24px
|
||||
max-width: 24px
|
||||
min-height: 24px
|
||||
min-width: 24px
|
||||
width: 24px
|
||||
&.is-large
|
||||
height: 32px
|
||||
max-height: 32px
|
||||
max-width: 32px
|
||||
min-height: 32px
|
||||
min-width: 32px
|
||||
width: 32px
|
||||
|
||||
=loader
|
||||
animation: spinAround 500ms infinite linear
|
||||
border: 2px solid $grey-lighter
|
||||
border-radius: $radius-rounded
|
||||
border-right-color: transparent
|
||||
border-top-color: transparent
|
||||
content: ""
|
||||
display: block
|
||||
height: 1em
|
||||
position: relative
|
||||
width: 1em
|
||||
|
||||
=overlay($offset: 0)
|
||||
bottom: $offset
|
||||
left: $offset
|
||||
position: absolute
|
||||
right: $offset
|
||||
top: $offset
|
||||
@@ -1,4 +0,0 @@
|
||||
@import "mixins.scss";
|
||||
@import "variables.scss";
|
||||
@import "neomorph.scss";
|
||||
@import "base.scss";
|
||||
@@ -1,33 +0,0 @@
|
||||
//MEDIA QUERY MANAGER
|
||||
|
||||
@mixin MediaQuery($breakpoint) {
|
||||
@if $breakpoint==sm {
|
||||
@media (min-width: 640px) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@if $breakpoint==md {
|
||||
@media (min-width: 768px) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@if $breakpoint==lg {
|
||||
@media (min-width: 1024px) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@if $breakpoint==xl {
|
||||
@media (min-width: 1280px) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@if $breakpoint=="2xl" {
|
||||
@media (min-width: 1536px) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,656 +0,0 @@
|
||||
:root {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
--is-inset: inherit;
|
||||
}
|
||||
|
||||
.neomorph {
|
||||
box-shadow: calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--blur-radius) var(--light-shadow), var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-shadow);
|
||||
background-color: var(--background);
|
||||
|
||||
&Inset {
|
||||
box-shadow: inset var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-shadow), inset calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--blur-radius) var(--light-shadow);
|
||||
background-color: var(--background);
|
||||
|
||||
&.is-nxxsmall {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
|
||||
&-sm {
|
||||
@include MediaQuery(sm) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include MediaQuery(md) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include MediaQuery(lg) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include MediaQuery(xl) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-2xl {
|
||||
@include MediaQuery(2xl) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-nxsmall {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
|
||||
&-sm {
|
||||
@include MediaQuery(sm) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include MediaQuery(md) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include MediaQuery(lg) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include MediaQuery(xl) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-2xl {
|
||||
@include MediaQuery(2xl) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-nsmall {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
|
||||
&-sm {
|
||||
@include MediaQuery(sm) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include MediaQuery(md) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include MediaQuery(lg) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include MediaQuery(xl) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-2xl {
|
||||
@include MediaQuery(2xl) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-nxxsmall {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
|
||||
&-sm {
|
||||
@include MediaQuery(sm) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include MediaQuery(md) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include MediaQuery(lg) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include MediaQuery(xl) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-2xl {
|
||||
@include MediaQuery(2xl) {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-nxsmall {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
|
||||
&-sm {
|
||||
@include MediaQuery(sm) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include MediaQuery(md) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include MediaQuery(lg) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include MediaQuery(xl) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-2xl {
|
||||
@include MediaQuery(2xl) {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-nsmall {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
|
||||
&-sm {
|
||||
@include MediaQuery(sm) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include MediaQuery(md) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include MediaQuery(lg) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include MediaQuery(xl) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-2xl {
|
||||
@include MediaQuery(2xl) {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-nnormal {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
|
||||
&-sm {
|
||||
@include MediaQuery(sm) {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include MediaQuery(md) {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include MediaQuery(lg) {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include MediaQuery(xl) {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-2xl {
|
||||
@include MediaQuery(2xl) {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.neo, .neo {
|
||||
&Btn {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
}
|
||||
|
||||
&Small {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
border: none;
|
||||
|
||||
&:not(:active) {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
}
|
||||
|
||||
& input[type=file] {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
}
|
||||
}
|
||||
|
||||
@include MediaQuery(phone) {
|
||||
&-mobile {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
border: none;
|
||||
|
||||
&:not(:active) {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&Plain {
|
||||
background: var(--background);
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@include MediaQuery(phone) {
|
||||
&-mobile {
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&InsetPlain {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@include MediaQuery(phone) {
|
||||
&-mobile {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&XInsetPlain {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@include MediaQuery(phone) {
|
||||
&-mobile {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&InsetPlain {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
|
||||
&:not(:active) {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@include MediaQuery(phone) {
|
||||
&-mobile {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
|
||||
&:not(:active) {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&File {
|
||||
box-shadow: 0px 0px 0px var(--light-shadow), 0px 0px 0px var(--dark-shadow);
|
||||
transition: all .2s linear;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
@include MediaQuery(phone) {
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.isSelected {
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
|
||||
&:focus-visible {
|
||||
background: linear-gradient(-45deg, var(--primary-gradiend-lighter), var(--primary-gradiend-darker));
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active, &.active {
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
|
||||
&Input {
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&Select {
|
||||
& > select {
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.neoCheckbox {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
|
||||
&:focus + label:before {
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)) !important;
|
||||
}
|
||||
|
||||
&Container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& + label {
|
||||
padding: .15rem .15rem .15rem 2rem;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
|
||||
&:before {
|
||||
animation-name: none;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0rem;
|
||||
content: '';
|
||||
border: none;
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked.is-checked-bold + label {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
&:checked + label:after {
|
||||
display: inline-block;
|
||||
width: .375rem;
|
||||
height: .6rem;
|
||||
top: .35rem;
|
||||
left: .55rem;
|
||||
transform: translateY(0rem) rotate(45deg);
|
||||
border-width: .1rem;
|
||||
border-top-width: 0.1rem;
|
||||
border-left-width: 0.1rem;
|
||||
border-style: solid;
|
||||
border-top-style: solid;
|
||||
border-left-style: solid;
|
||||
border-color: var(--text-color);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
hr.neoSeparator {
|
||||
&Flat {
|
||||
height: 10px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
&Pressed {
|
||||
height: 10px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
}
|
||||
}
|
||||
|
||||
input.neoRange[type=range] {
|
||||
height: 30px;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
border-radius: 20px;
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(90deg, hsl(0, 90%, 80%), hsl(10, 90%, 80%), hsl(20, 90%, 80%), hsl(30, 90%, 80%), hsl(40, 90%, 80%), hsl(50, 90%, 80%), hsl(60, 90%, 80%), hsl(70, 90%, 80%), hsl(80, 90%, 80%), hsl(90, 90%, 80%), hsl(100, 90%, 80%), hsl(110, 90%, 80%), hsl(120, 90%, 80%), hsl(130, 90%, 80%), hsl(140, 90%, 80%), hsl(150, 90%, 80%), hsl(160, 90%, 80%), hsl(170, 90%, 80%), hsl(180, 90%, 80%), hsl(190, 90%, 80%), hsl(200, 90%, 80%), hsl(210, 90%, 80%), hsl(220, 90%, 80%), hsl(230, 90%, 80%), hsl(240, 90%, 80%), hsl(250, 90%, 80%), hsl(260, 90%, 80%), hsl(270, 90%, 80%), hsl(280, 90%, 80%), hsl(290, 90%, 80%), hsl(300, 90%, 80%), hsl(310, 90%, 80%), hsl(320, 90%, 80%), hsl(330, 90%, 80%), hsl(340, 90%, 80%), hsl(350, 90%, 80%), hsl(359, 90%, 80%)) !important;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
border: none;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 2px 2px 4px var(--dark-shadow), -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)) !important;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(90deg, hsl(0, 90%, 80%), hsl(10, 90%, 80%), hsl(20, 90%, 80%), hsl(30, 90%, 80%), hsl(40, 90%, 80%), hsl(50, 90%, 80%), hsl(60, 90%, 80%), hsl(70, 90%, 80%), hsl(80, 90%, 80%), hsl(90, 90%, 80%), hsl(100, 90%, 80%), hsl(110, 90%, 80%), hsl(120, 90%, 80%), hsl(130, 90%, 80%), hsl(140, 90%, 80%), hsl(150, 90%, 80%), hsl(160, 90%, 80%), hsl(170, 90%, 80%), hsl(180, 90%, 80%), hsl(190, 90%, 80%), hsl(200, 90%, 80%), hsl(210, 90%, 80%), hsl(220, 90%, 80%), hsl(230, 90%, 80%), hsl(240, 90%, 80%), hsl(250, 90%, 80%), hsl(260, 90%, 80%), hsl(270, 90%, 80%), hsl(280, 90%, 80%), hsl(290, 90%, 80%), hsl(300, 90%, 80%), hsl(310, 90%, 80%), hsl(320, 90%, 80%), hsl(330, 90%, 80%), hsl(340, 90%, 80%), hsl(350, 90%, 80%), hsl(359, 90%, 80%)) !important;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(90deg, hsl(0, 90%, 80%), hsl(10, 90%, 80%), hsl(20, 90%, 80%), hsl(30, 90%, 80%), hsl(40, 90%, 80%), hsl(50, 90%, 80%), hsl(60, 90%, 80%), hsl(70, 90%, 80%), hsl(80, 90%, 80%), hsl(90, 90%, 80%), hsl(100, 90%, 80%), hsl(110, 90%, 80%), hsl(120, 90%, 80%), hsl(130, 90%, 80%), hsl(140, 90%, 80%), hsl(150, 90%, 80%), hsl(160, 90%, 80%), hsl(170, 90%, 80%), hsl(180, 90%, 80%), hsl(190, 90%, 80%), hsl(200, 90%, 80%), hsl(210, 90%, 80%), hsl(220, 90%, 80%), hsl(230, 90%, 80%), hsl(240, 90%, 80%), hsl(250, 90%, 80%), hsl(260, 90%, 80%), hsl(270, 90%, 80%), hsl(280, 90%, 80%), hsl(290, 90%, 80%), hsl(300, 90%, 80%), hsl(310, 90%, 80%), hsl(320, 90%, 80%), hsl(330, 90%, 80%), hsl(340, 90%, 80%), hsl(350, 90%, 80%), hsl(359, 90%, 80%)) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
border: none;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 2px 2px 4px var(--dark-shadow), -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
:root{
|
||||
--background: hsl(25,84%,88%);
|
||||
--text-color: hsl(25,84%,26.4%);
|
||||
--placeholder-text-color: hsla(25,84%,26.4%,.3);
|
||||
--black: hsl(0, 0%, 4%);
|
||||
--black-bis: hsl(0, 0%, 7%);
|
||||
--black-ter: hsl(0, 0%, 14%);
|
||||
--white: hsl(0, 4%, 99.8%);
|
||||
--primary-color: hsl(25,84%,88%);
|
||||
--primary-color-light: hsl(25,84%,100%);
|
||||
--primary-color-dark: hsl(25,84%,66%);
|
||||
--primary-gradiend-light: hsl(25,84%,92%);
|
||||
--primary-gradiend-dark: hsl(25,84%,84%);
|
||||
--primary-gradiend-lighter: hsl(25,84%,96%);
|
||||
--primary-gradiend-darker: hsl(25,84%,80%);
|
||||
--secondary-color: hsl(205, 84%, 88%);
|
||||
--secondary-color-light: hsl(205, 84%, 100%);
|
||||
--secondary-color-dark: hsl(205, 84%, 84%);
|
||||
--light-shadow: hsla(25,84%,100%, .5);
|
||||
--dark-shadow: hsla(25,84%,66%, .5);
|
||||
--fa-primary-color: hsl(205,84%,26.4%);
|
||||
--fa-secondary-color: hsl(205,84%,66%);
|
||||
--fa-primary-opacity: 0.80;
|
||||
--fa-secondary-opacity: 0.80;
|
||||
--danger-color: hsl(0, 82%, 91%);
|
||||
--warning-color: hsl(48, 82%, 91%);
|
||||
--info-color: hsl(196, 82%, 91%);
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
[
|
||||
{
|
||||
"outputFileName": "wwwroot/css/style.min.css",
|
||||
"inputFiles": [
|
||||
// "wwwroot/vendor/solid.css",
|
||||
// "wwwroot/vendor/fontawesome.css",
|
||||
//"wwwroot/vendor/open-iconic.css",
|
||||
"wwwroot/vendor/ionicons.min.css",
|
||||
"wwwroot/vendor/toggle-dark-light-mode.css",
|
||||
"wwwroot/vendor/bulma.css",
|
||||
"wwwroot/css/main.min.css",
|
||||
"wwwroot/vendor/tailwind.css",
|
||||
"wwwroot/css/tailwind-override.css"
|
||||
],
|
||||
"minify": {
|
||||
"enabled": false,
|
||||
"gzip": true,
|
||||
"brotli": true
|
||||
},
|
||||
"sourceMap": false
|
||||
}
|
||||
]
|
||||
@@ -1,22 +0,0 @@
|
||||
[
|
||||
{
|
||||
"outputFile": "wwwroot/css/main.css",
|
||||
"inputFile": "SCSS/main.scss",
|
||||
"minify": {
|
||||
"enabled": true
|
||||
},
|
||||
"options": {
|
||||
"sourceMap": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"outputFile": "wwwroot/vendor/bulma.css",
|
||||
"inputFile": "SCSS/bulma/bulma.sass",
|
||||
"minify": {
|
||||
"enabled": true
|
||||
},
|
||||
"options": {
|
||||
"sourceMap": false
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -1 +0,0 @@
|
||||
///<binding BeforeBuild='All files' />
|
||||
@@ -74,12 +74,6 @@
|
||||
<Content Remove="wwwroot\vendor\open-iconic.css" />
|
||||
<Content Remove="wwwroot\vendor\solid.css" />
|
||||
<None Include="wwwroot\vendor\solid.css" />
|
||||
<Content Remove="wwwroot\vendor\tailwind.css" />
|
||||
<None Include="wwwroot\vendor\tailwind.css" />
|
||||
<Content Remove="wwwroot\vendor\tailwind-generator.css" />
|
||||
<None Include="wwwroot\vendor\tailwind-generator.css" />
|
||||
<Content Remove="wwwroot\vendor\toggle-dark-light-mode.css" />
|
||||
<None Include="wwwroot\vendor\toggle-dark-light-mode.css" />
|
||||
<Content Remove="wwwroot\vendor\open-iconic.min.css" />
|
||||
<Content Remove="wwwroot\webfonts\fa-solid-900.eot" />
|
||||
<None Include="wwwroot\webfonts\fa-solid-900.eot" />
|
||||
@@ -99,14 +93,6 @@
|
||||
<None Include="wwwroot\fonts\open-iconic.ttf" />
|
||||
<Content Remove="wwwroot\fonts\open-iconic.woff" />
|
||||
<None Include="wwwroot\fonts\open-iconic.woff" />
|
||||
<Content Remove="wwwroot\css\main.css" />
|
||||
<None Include="wwwroot\css\main.css" />
|
||||
<Content Remove="wwwroot\css\tailwind-override.css" />
|
||||
<None Include="wwwroot\css\tailwind-override.css" />
|
||||
<Content Remove="bundleconfig.json" />
|
||||
<None Include="bundleconfig.json" />
|
||||
<Content Remove="compilerconfig.json" />
|
||||
<None Include="compilerconfig.json" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
'./**/*.cs',
|
||||
'./**/*.html',
|
||||
'./**/*.razor'
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
cd .\decePubClient\
|
||||
npx tailwindcss -i ./wwwroot/vendor/tailwind-generator.css -o ./wwwroot/vendor/tailwind.css --watch --optimize=false
|
||||
@@ -1,566 +0,0 @@
|
||||
:root {
|
||||
--background: hsl(25,84%,88%);
|
||||
--text-color: hsl(25,84%,26.4%);
|
||||
--placeholder-text-color: hsla(25,84%,26.4%,.3);
|
||||
--black: hsl(0, 0%, 4%);
|
||||
--black-bis: hsl(0, 0%, 7%);
|
||||
--black-ter: hsl(0, 0%, 14%);
|
||||
--white: hsl(0, 4%, 99.8%);
|
||||
--primary-color: hsl(25,84%,88%);
|
||||
--primary-color-light: hsl(25,84%,100%);
|
||||
--primary-color-dark: hsl(25,84%,66%);
|
||||
--primary-gradiend-light: hsl(25,84%,92%);
|
||||
--primary-gradiend-dark: hsl(25,84%,84%);
|
||||
--primary-gradiend-lighter: hsl(25,84%,96%);
|
||||
--primary-gradiend-darker: hsl(25,84%,80%);
|
||||
--secondary-color: hsl(205, 84%, 88%);
|
||||
--secondary-color-light: hsl(205, 84%, 100%);
|
||||
--secondary-color-dark: hsl(205, 84%, 84%);
|
||||
--light-shadow: hsla(25,84%,100%, .5);
|
||||
--dark-shadow: hsla(25,84%,66%, .5);
|
||||
--fa-primary-color: hsl(205,84%,26.4%);
|
||||
--fa-secondary-color: hsl(205,84%,66%);
|
||||
--fa-primary-opacity: 0.80;
|
||||
--fa-secondary-opacity: 0.80;
|
||||
--danger-color: hsl(0, 82%, 91%);
|
||||
--warning-color: hsl(48, 82%, 91%);
|
||||
--info-color: hsl(196, 82%, 91%);
|
||||
}
|
||||
|
||||
:root {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
--is-inset: inherit;
|
||||
}
|
||||
|
||||
.neomorph {
|
||||
box-shadow: calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--blur-radius) var(--light-shadow), var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-shadow);
|
||||
background-color: var(--background);
|
||||
}
|
||||
.neomorphInset {
|
||||
box-shadow: inset var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-shadow), inset calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--blur-radius) var(--light-shadow);
|
||||
background-color: var(--background);
|
||||
}
|
||||
.neomorphInset.is-nxxsmall {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.neomorphInset.is-nxxsmall-sm {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.neomorphInset.is-nxxsmall-md {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.neomorphInset.is-nxxsmall-lg {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.neomorphInset.is-nxxsmall-xl {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
.neomorphInset.is-nxsmall {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.neomorphInset.is-nxsmall-sm {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.neomorphInset.is-nxsmall-md {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.neomorphInset.is-nxsmall-lg {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.neomorphInset.is-nxsmall-xl {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
.neomorphInset.is-nsmall {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.neomorphInset.is-nsmall-sm {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.neomorphInset.is-nsmall-md {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.neomorphInset.is-nsmall-lg {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.neomorphInset.is-nsmall-xl {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
.neomorph.is-nxxsmall {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.neomorph.is-nxxsmall-sm {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.neomorph.is-nxxsmall-md {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.neomorph.is-nxxsmall-lg {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.neomorph.is-nxxsmall-xl {
|
||||
--shadow-offset: 2px;
|
||||
--blur-radius: 4px;
|
||||
}
|
||||
}
|
||||
.neomorph.is-nxsmall {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.neomorph.is-nxsmall-sm {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.neomorph.is-nxsmall-md {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.neomorph.is-nxsmall-lg {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.neomorph.is-nxsmall-xl {
|
||||
--shadow-offset: 3px;
|
||||
--blur-radius: 6px;
|
||||
}
|
||||
}
|
||||
.neomorph.is-nsmall {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.neomorph.is-nsmall-sm {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.neomorph.is-nsmall-md {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.neomorph.is-nsmall-lg {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.neomorph.is-nsmall-xl {
|
||||
--shadow-offset: 6px;
|
||||
--blur-radius: 12px;
|
||||
}
|
||||
}
|
||||
.neomorph.is-nnormal {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.neomorph.is-nnormal-sm {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.neomorph.is-nnormal-md {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.neomorph.is-nnormal-lg {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.neomorph.is-nnormal-xl {
|
||||
--shadow-offset: 8px;
|
||||
--blur-radius: 16px;
|
||||
}
|
||||
}
|
||||
button.neoBtn, .neoBtn {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
button.neoBtn:focus, .neoBtn:focus {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnSmall, .neoBtnSmall {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnSmall:focus, .neoBtnSmall:focus {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnSmall:focus:not(:active), .neoBtnSmall:focus:not(:active) {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
}
|
||||
button.neoBtnSmall:focus input[type=file], .neoBtnSmall:focus input[type=file] {
|
||||
background-image: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
}
|
||||
button.neoBtnSmallPlain, .neoBtnSmallPlain {
|
||||
background: var(--background);
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnSmallPlain:focus, .neoBtnSmallPlain:focus {
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnSmallInsetPlain, .neoBtnSmallInsetPlain {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnSmallInsetPlain:focus, .neoBtnSmallInsetPlain:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnSmallXInsetPlain, .neoBtnSmallXInsetPlain {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnSmallXInsetPlain:focus, .neoBtnSmallXInsetPlain:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnInsetPlain, .neoBtnInsetPlain {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnInsetPlain:focus, .neoBtnInsetPlain:focus {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
border: none;
|
||||
}
|
||||
button.neoBtnInsetPlain:focus:not(:active), .neoBtnInsetPlain:focus:not(:active) {
|
||||
background-image: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
}
|
||||
button.neoFile, .neoFile {
|
||||
box-shadow: 0px 0px 0px var(--light-shadow), 0px 0px 0px var(--dark-shadow);
|
||||
transition: all 0.2s linear;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
button.neoFile:hover, .neoFile:hover {
|
||||
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
||||
}
|
||||
button.neoFile:focus-visible, .neoFile:focus-visible {
|
||||
background: linear-gradient(-45deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
outline: none;
|
||||
}
|
||||
button.neoFile.isSelected, .neoFile.isSelected {
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
}
|
||||
button.neoFile.isSelected:focus-visible, .neoFile.isSelected:focus-visible {
|
||||
background: linear-gradient(-45deg, var(--primary-gradiend-lighter), var(--primary-gradiend-darker));
|
||||
outline: none;
|
||||
}
|
||||
button.neoFile.is-active, button.neoFile.active, .neoFile.is-active, .neoFile.active {
|
||||
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
||||
color: var(--black);
|
||||
}
|
||||
button.neoInput, .neoInput {
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
border: none;
|
||||
}
|
||||
button.neoInput:focus, .neoInput:focus {
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
border: none;
|
||||
}
|
||||
button.neoSelect > select, .neoSelect > select {
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
border: none;
|
||||
}
|
||||
button.neoSelect > select:focus, .neoSelect > select:focus {
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter));
|
||||
border: none;
|
||||
}
|
||||
|
||||
.neoCheckbox {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
.neoCheckbox:focus + label:before {
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-darker), var(--primary-gradiend-lighter)) !important;
|
||||
}
|
||||
.neoCheckboxContainer {
|
||||
position: relative;
|
||||
}
|
||||
.neoCheckbox + label {
|
||||
padding: 0.15rem 0.15rem 0.15rem 2rem;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.neoCheckbox + label:before {
|
||||
animation-name: none;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0rem;
|
||||
content: "";
|
||||
border: none;
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)) !important;
|
||||
}
|
||||
.neoCheckbox:checked.is-checked-bold + label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.neoCheckbox:checked + label:after {
|
||||
display: inline-block;
|
||||
width: 0.375rem;
|
||||
height: 0.6rem;
|
||||
top: 0.35rem;
|
||||
left: 0.55rem;
|
||||
transform: translateY(0rem) rotate(45deg);
|
||||
border-width: 0.1rem;
|
||||
border-top-width: 0.1rem;
|
||||
border-left-width: 0.1rem;
|
||||
border-style: solid;
|
||||
border-top-style: solid;
|
||||
border-left-style: solid;
|
||||
border-color: var(--text-color);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
hr.neoSeparatorFlat {
|
||||
height: 10px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
||||
background: var(--background);
|
||||
}
|
||||
hr.neoSeparatorPressed {
|
||||
height: 10px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
||||
}
|
||||
|
||||
input.neoRange[type=range] {
|
||||
height: 30px;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
input.neoRange[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
input.neoRange[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
border-radius: 20px;
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(90deg, hsl(0deg, 90%, 80%), hsl(10deg, 90%, 80%), hsl(20deg, 90%, 80%), hsl(30deg, 90%, 80%), hsl(40deg, 90%, 80%), hsl(50deg, 90%, 80%), hsl(60deg, 90%, 80%), hsl(70deg, 90%, 80%), hsl(80deg, 90%, 80%), hsl(90deg, 90%, 80%), hsl(100deg, 90%, 80%), hsl(110deg, 90%, 80%), hsl(120deg, 90%, 80%), hsl(130deg, 90%, 80%), hsl(140deg, 90%, 80%), hsl(150deg, 90%, 80%), hsl(160deg, 90%, 80%), hsl(170deg, 90%, 80%), hsl(180deg, 90%, 80%), hsl(190deg, 90%, 80%), hsl(200deg, 90%, 80%), hsl(210deg, 90%, 80%), hsl(220deg, 90%, 80%), hsl(230deg, 90%, 80%), hsl(240deg, 90%, 80%), hsl(250deg, 90%, 80%), hsl(260deg, 90%, 80%), hsl(270deg, 90%, 80%), hsl(280deg, 90%, 80%), hsl(290deg, 90%, 80%), hsl(300deg, 90%, 80%), hsl(310deg, 90%, 80%), hsl(320deg, 90%, 80%), hsl(330deg, 90%, 80%), hsl(340deg, 90%, 80%), hsl(350deg, 90%, 80%), hsl(359deg, 90%, 80%)) !important;
|
||||
}
|
||||
input.neoRange[type=range]::-webkit-slider-thumb {
|
||||
border: none;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 2px 2px 4px var(--dark-shadow), -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)) !important;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -3px;
|
||||
}
|
||||
input.neoRange[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(90deg, hsl(0deg, 90%, 80%), hsl(10deg, 90%, 80%), hsl(20deg, 90%, 80%), hsl(30deg, 90%, 80%), hsl(40deg, 90%, 80%), hsl(50deg, 90%, 80%), hsl(60deg, 90%, 80%), hsl(70deg, 90%, 80%), hsl(80deg, 90%, 80%), hsl(90deg, 90%, 80%), hsl(100deg, 90%, 80%), hsl(110deg, 90%, 80%), hsl(120deg, 90%, 80%), hsl(130deg, 90%, 80%), hsl(140deg, 90%, 80%), hsl(150deg, 90%, 80%), hsl(160deg, 90%, 80%), hsl(170deg, 90%, 80%), hsl(180deg, 90%, 80%), hsl(190deg, 90%, 80%), hsl(200deg, 90%, 80%), hsl(210deg, 90%, 80%), hsl(220deg, 90%, 80%), hsl(230deg, 90%, 80%), hsl(240deg, 90%, 80%), hsl(250deg, 90%, 80%), hsl(260deg, 90%, 80%), hsl(270deg, 90%, 80%), hsl(280deg, 90%, 80%), hsl(290deg, 90%, 80%), hsl(300deg, 90%, 80%), hsl(310deg, 90%, 80%), hsl(320deg, 90%, 80%), hsl(330deg, 90%, 80%), hsl(340deg, 90%, 80%), hsl(350deg, 90%, 80%), hsl(359deg, 90%, 80%)) !important;
|
||||
}
|
||||
input.neoRange[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(90deg, hsl(0deg, 90%, 80%), hsl(10deg, 90%, 80%), hsl(20deg, 90%, 80%), hsl(30deg, 90%, 80%), hsl(40deg, 90%, 80%), hsl(50deg, 90%, 80%), hsl(60deg, 90%, 80%), hsl(70deg, 90%, 80%), hsl(80deg, 90%, 80%), hsl(90deg, 90%, 80%), hsl(100deg, 90%, 80%), hsl(110deg, 90%, 80%), hsl(120deg, 90%, 80%), hsl(130deg, 90%, 80%), hsl(140deg, 90%, 80%), hsl(150deg, 90%, 80%), hsl(160deg, 90%, 80%), hsl(170deg, 90%, 80%), hsl(180deg, 90%, 80%), hsl(190deg, 90%, 80%), hsl(200deg, 90%, 80%), hsl(210deg, 90%, 80%), hsl(220deg, 90%, 80%), hsl(230deg, 90%, 80%), hsl(240deg, 90%, 80%), hsl(250deg, 90%, 80%), hsl(260deg, 90%, 80%), hsl(270deg, 90%, 80%), hsl(280deg, 90%, 80%), hsl(290deg, 90%, 80%), hsl(300deg, 90%, 80%), hsl(310deg, 90%, 80%), hsl(320deg, 90%, 80%), hsl(330deg, 90%, 80%), hsl(340deg, 90%, 80%), hsl(350deg, 90%, 80%), hsl(359deg, 90%, 80%)) !important;
|
||||
border: none;
|
||||
}
|
||||
input.neoRange[type=range]::-moz-range-thumb {
|
||||
border: none;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 2px 2px 4px var(--dark-shadow), -2px -2px 4px var(--light-shadow);
|
||||
background: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark)) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--text-color);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
details > summary::-webkit-details-marker {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
scrollbar-color: inherit;
|
||||
scrollbar-width: inherit;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border: thin solid transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color-dark);
|
||||
border: thin solid transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary-color-dark);
|
||||
}
|
||||
|
||||
::-moz-selection { /* Code for Firefox */
|
||||
color: var(--primary-color);
|
||||
background: var(--primary-color-dark);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--primary-color);
|
||||
background: var(--primary-color-dark);
|
||||
}
|
||||
|
||||
.flex.flex-col-reverse > div:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.loadAnimation span {
|
||||
animation-name: blink;
|
||||
animation-duration: 1.4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(1) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(2) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(4) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(5) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.loadAnimation span:nth-child(6) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
:root{--background:hsl(25,84%,88%);--text-color:hsl(25,84%,26.4%);--placeholder-text-color:hsla(25,84%,26.4%,.3);--black:hsl(0,0%,4%);--black-bis:hsl(0,0%,7%);--black-ter:hsl(0,0%,14%);--white:hsl(0,4%,99.8%);--primary-color:hsl(25,84%,88%);--primary-color-light:hsl(25,84%,100%);--primary-color-dark:hsl(25,84%,66%);--primary-gradiend-light:hsl(25,84%,92%);--primary-gradiend-dark:hsl(25,84%,84%);--primary-gradiend-lighter:hsl(25,84%,96%);--primary-gradiend-darker:hsl(25,84%,80%);--secondary-color:hsl(205,84%,88%);--secondary-color-light:hsl(205,84%,100%);--secondary-color-dark:hsl(205,84%,84%);--light-shadow:hsla(25,84%,100%,.5);--dark-shadow:hsla(25,84%,66%,.5);--fa-primary-color:hsl(205,84%,26.4%);--fa-secondary-color:hsl(205,84%,66%);--fa-primary-opacity:.8;--fa-secondary-opacity:.8;--danger-color:hsl(0,82%,91%);--warning-color:hsl(48,82%,91%);--info-color:hsl(196,82%,91%)}:root{--shadow-offset:8px;--blur-radius:16px;--is-inset:inherit}.neomorph{box-shadow:calc(-1*var(--shadow-offset)) calc(-1*var(--shadow-offset)) var(--blur-radius) var(--light-shadow),var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-shadow);background-color:var(--background)}.neomorphInset{box-shadow:inset var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-shadow),inset calc(-1*var(--shadow-offset)) calc(-1*var(--shadow-offset)) var(--blur-radius) var(--light-shadow);background-color:var(--background)}.neomorphInset.is-nxxsmall{--shadow-offset:2px;--blur-radius:4px}@media(min-width:640px){.neomorphInset.is-nxxsmall-sm{--shadow-offset:2px;--blur-radius:4px}}@media(min-width:768px){.neomorphInset.is-nxxsmall-md{--shadow-offset:2px;--blur-radius:4px}}@media(min-width:1024px){.neomorphInset.is-nxxsmall-lg{--shadow-offset:2px;--blur-radius:4px}}@media(min-width:1280px){.neomorphInset.is-nxxsmall-xl{--shadow-offset:2px;--blur-radius:4px}}.neomorphInset.is-nxsmall{--shadow-offset:3px;--blur-radius:6px}@media(min-width:640px){.neomorphInset.is-nxsmall-sm{--shadow-offset:3px;--blur-radius:6px}}@media(min-width:768px){.neomorphInset.is-nxsmall-md{--shadow-offset:3px;--blur-radius:6px}}@media(min-width:1024px){.neomorphInset.is-nxsmall-lg{--shadow-offset:3px;--blur-radius:6px}}@media(min-width:1280px){.neomorphInset.is-nxsmall-xl{--shadow-offset:3px;--blur-radius:6px}}.neomorphInset.is-nsmall{--shadow-offset:6px;--blur-radius:12px}@media(min-width:640px){.neomorphInset.is-nsmall-sm{--shadow-offset:6px;--blur-radius:12px}}@media(min-width:768px){.neomorphInset.is-nsmall-md{--shadow-offset:6px;--blur-radius:12px}}@media(min-width:1024px){.neomorphInset.is-nsmall-lg{--shadow-offset:6px;--blur-radius:12px}}@media(min-width:1280px){.neomorphInset.is-nsmall-xl{--shadow-offset:6px;--blur-radius:12px}}.neomorph.is-nxxsmall{--shadow-offset:2px;--blur-radius:4px}@media(min-width:640px){.neomorph.is-nxxsmall-sm{--shadow-offset:2px;--blur-radius:4px}}@media(min-width:768px){.neomorph.is-nxxsmall-md{--shadow-offset:2px;--blur-radius:4px}}@media(min-width:1024px){.neomorph.is-nxxsmall-lg{--shadow-offset:2px;--blur-radius:4px}}@media(min-width:1280px){.neomorph.is-nxxsmall-xl{--shadow-offset:2px;--blur-radius:4px}}.neomorph.is-nxsmall{--shadow-offset:3px;--blur-radius:6px}@media(min-width:640px){.neomorph.is-nxsmall-sm{--shadow-offset:3px;--blur-radius:6px}}@media(min-width:768px){.neomorph.is-nxsmall-md{--shadow-offset:3px;--blur-radius:6px}}@media(min-width:1024px){.neomorph.is-nxsmall-lg{--shadow-offset:3px;--blur-radius:6px}}@media(min-width:1280px){.neomorph.is-nxsmall-xl{--shadow-offset:3px;--blur-radius:6px}}.neomorph.is-nsmall{--shadow-offset:6px;--blur-radius:12px}@media(min-width:640px){.neomorph.is-nsmall-sm{--shadow-offset:6px;--blur-radius:12px}}@media(min-width:768px){.neomorph.is-nsmall-md{--shadow-offset:6px;--blur-radius:12px}}@media(min-width:1024px){.neomorph.is-nsmall-lg{--shadow-offset:6px;--blur-radius:12px}}@media(min-width:1280px){.neomorph.is-nsmall-xl{--shadow-offset:6px;--blur-radius:12px}}.neomorph.is-nnormal{--shadow-offset:8px;--blur-radius:16px}@media(min-width:640px){.neomorph.is-nnormal-sm{--shadow-offset:8px;--blur-radius:16px}}@media(min-width:768px){.neomorph.is-nnormal-md{--shadow-offset:8px;--blur-radius:16px}}@media(min-width:1024px){.neomorph.is-nnormal-lg{--shadow-offset:8px;--blur-radius:16px}}@media(min-width:1280px){.neomorph.is-nnormal-xl{--shadow-offset:8px;--blur-radius:16px}}button.neoBtn,.neoBtn{background-image:linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));box-shadow:-3px -3px 6px var(--light-shadow),3px 3px 6px var(--dark-shadow);border:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}button.neoBtn:focus,.neoBtn:focus{background-image:linear-gradient(-45deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));box-shadow:-3px -3px 6px var(--light-shadow),3px 3px 6px var(--dark-shadow);border:0}button.neoBtnSmall,.neoBtnSmall{background-image:linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-Line truncated
|
||||
Vendored
-4910
File diff suppressed because it is too large.
Load diff
@@ -1,6 +0,0 @@
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.button{
|
||||
text-decoration: none;
|
||||
}
|
||||
Vendored
-3706
File diff suppressed because it is too large.
Load diff
Vendored
-2
@@ -1,2 +0,0 @@
|
||||
/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
|
||||
.pagination-previous,.pagination-next,.pagination-link,.pagination-ellipsis,.file-cta,.file-name,.select select,.textarea,.input,.button{-moz-appearance:none;-webkit-appearance:none;align-items:center;border:1px solid transparent;border-radius:4px;box-shadow:none;display:inline-flex;font-size:1rem;height:2.5em;justify-content:flex-start;line-height:1.5;padding-bottom:calc(.5em - 1px);padding-left:calc(.75em - 1px);padding-right:calc(.75em - 1px);padding-top:calc(.5em - 1px);position:relative;vertical-align:top}.pagination-previous:focus,.pagination-next:focus,.pagination-link:focus,.pagination-ellipsis:focus,.file-cta:focus,.file-name:focus,.select select:focus,.textarea:focus,.input:focus,.button:focus,.is-focused.pagination-previous,.is-focused.pagination-next,.is-focused.pagination-link,.is-focused.pagination-ellipsis,.is-focused.file-cta,.is-focused.file-name,.select select.is-focused,.is-focused.textarea,.is-focused.input,.is-focused.button,.pagination-previous:active,.pagination-next:active,.pagination-link:active,.pagination-ellipsis:active,.file-cta:active,.file-name:active,.select select:active,.textarea:active,.input:active,.button:active,.is-active.pagination-previous,.is-active.pagination-next,.is-active.pagination-link,.is-active.pagination-ellipsis,.is-active.file-cta,.is-active.file-name,.select select.is-active,.is-active.textarea,.is-active.input,.is-active.button{outline:0}[disabled].pagination-previous,[disabled].pagination-next,[disabled].pagination-link,[disabled].pagination-ellipsis,[disabled].file-cta,[disabled].file-name,.select select[disabled],[disabled].textarea,[disabled].input,[disabled].button,fieldset[disabled] .pagination-previous,fieldset[disabled] .pagination-next,fieldset[disabled] .pagination-link,fieldset[disabled] .pagination-ellipsis,fieldset[disabled] .file-cta,fieldset[disabled] .file-name,fieldset[disabled] .select select,.select fieldset[disabled] select,fieldset[disabled] .textarea,fieldset[disabled] .input,fieldset[disabled] .button{cursor:not-allowed}.pagination-previous,.pagination-next,.pagination-link,.pagination-ellipsis,.file,.button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select:not(.is-multiple):not(.is-loading)::after{border:3px solid transparent;border-radius:2px;border-right:0;border-top:0;content:" ";display:block;height:.625em;margin-top:-.4375em;pointer-events:none;position:absolute;top:50%;transform:rotate(-45deg);transform-origin:center;width:.625em}.pagination:not(:last-child),.message:not(:last-child),.progress:not(:last-child),.notification:not(:last-child),.content:not(:last-child){margin-bottom:1.5rem}.delete{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-moz-appearance:none;-webkit-appearance:none;background-color:rgba(10,10,10,.2);border:0;border-radius:9999px;cursor:pointer;pointer-events:auto;display:inline-block;flex-grow:0;flex-shrink:0;font-size:0;height:20px;max-height:20px;max-width:20px;min-height:20px;min-width:20px;outline:0;position:relative;vertical-align:top;width:20px}.delete::before,.delete::after{background-color:hsl(0deg,0%,100%);content:"";display:block;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) rotate(45deg);transform-origin:center center}.delete::before{height:2px;width:50%}.delete::after{height:50%;width:2px}.delete:hover,.delete:focus{background-color:rgba(10,10,10,.3)}.delete:active{background-color:rgba(10,10,10,.4)}.is-small.delete{height:16px;max-height:16px;max-width:16px;min-height:16px;min-width:16px;width:16px}.is-medium.delete{height:24px;max-height:24px;max-width:24px;min-height:24px;min-width:24px;width:24px}.is-large.delete{height:32px;max-height:32px;max-width:32px;min-height:32px;min-width:32px;width:32px}.control.is-loading::after,.select.is-loading::after,.loader,.button.is-loading::after{animation:spinAround 500ms infinite linear;border:2px solid hsl(0deg,0%,86%);border-radius:9999px;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:1em;position:relative;width:1em}.image.is-square img,.image.is-square .has-ratio,.image.is-1by1 img,.image.is-1by1 .has-ratio,.image.is-5by4 img,.image.is-5by4 .has-ratio,.image.is-4by3 img,.image.is-4by3 .has-ratio,.image.is-3by2 img,.image.is-3by2 .has-ratio,.image.is-5by3 img,.image.is-5by3 .has-ratio,.image.is-16by9 img,.image.is-16by9 .has-ratio,.image.is-2by1 img,.image.is-2by1 .has-ratio,.image.is-3by1 img,.image.is-3by1 .has-ratio,.image.is-4by5 img,.image.is-4by5 .has-ratio,.image.is-3by4 img,.image.is-3by4 .has-ratio,.image.is-2by3 img,.image.is-2by3 .has-ratio,.image.is-3by5 img,.image.is-3by5 .has-ratio,.image.is-9by16 img,.image.is-9by16 .has-ratio,.image.is-1by2 img,.image.is-1by2 .has-ratio,.image.is-1by3 img,.image.is-1by3 .has-ratio{bottom:0;left:0;position:absolute;right:0;top:0}html{background-color:hsl(0deg,0%,100%);font-size:16px;-moz-osx-Line truncated
|
||||
-3
@@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
Vendored
-1115
File diff suppressed because it is too large.
Load diff
-80
@@ -1,80 +0,0 @@
|
||||
.toggle-checkbox {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.toggle-slot {
|
||||
position: relative;
|
||||
height: 2em;
|
||||
width: 3em;
|
||||
border: none;
|
||||
border-radius: 10em;
|
||||
background-color: white;
|
||||
transition: background-color 250ms;
|
||||
}
|
||||
|
||||
.toggle-checkbox:checked ~ .toggle-slot {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
transform: translate(1.6em, 0.5em);
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border-radius: 50%;
|
||||
background-color: #ffeccf;
|
||||
transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
|
||||
}
|
||||
|
||||
.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
|
||||
background-color: #485367;
|
||||
transform: translate(0.5em, 0.5em);
|
||||
}
|
||||
|
||||
.sun-icon {
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
color: #ffbb52;
|
||||
}
|
||||
|
||||
.sun-icon-wrapper {
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
opacity: 1;
|
||||
transform: translate(0.55em, 0.25em) rotate(15deg);
|
||||
transform-origin: 50% 50%;
|
||||
transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
|
||||
}
|
||||
|
||||
.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
|
||||
opacity: 0;
|
||||
transform: translate(1.6em, 0.5em) rotate(0deg);
|
||||
}
|
||||
|
||||
.moon-icon {
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.moon-icon-wrapper {
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
opacity: 0;
|
||||
transform: translate(1.6em, .5em) rotate(0deg);
|
||||
transform-origin: 50% 50%;
|
||||
transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2.5, .46, .71);
|
||||
}
|
||||
|
||||
.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
|
||||
opacity: 1;
|
||||
transform: translate(1.85em, 0.15em) rotate(-15deg);
|
||||
}
|
||||
Reference in new issue
Block a user