aboutsummaryrefslogtreecommitdiffstats
path: root/app/assets/stylesheets/themes/default/_styles.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/themes/default/_styles.scss')
-rw-r--r--app/assets/stylesheets/themes/default/_styles.scss247
1 files changed, 247 insertions, 0 deletions
diff --git a/app/assets/stylesheets/themes/default/_styles.scss b/app/assets/stylesheets/themes/default/_styles.scss
new file mode 100644
index 0000000..3a0a46d
--- /dev/null
+++ b/app/assets/stylesheets/themes/default/_styles.scss
@@ -0,0 +1,247 @@
+// Commons Styles
+:root {
+ // Typography
+ --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
+ "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol", "Noto Color Emoji";
+ --line-height: 1.5;
+ --font-weight: 400;
+ --font-size: 16px;
+
+ // Responsive typography
+ @if $enable-responsive-typography {
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ --font-size: 17px;
+ }
+ }
+
+ @if map-get($breakpoints, "md") {
+ @media (min-width: map-get($breakpoints, "md")) {
+ --font-size: 18px;
+ }
+ }
+
+ @if map-get($breakpoints, "lg") {
+ @media (min-width: map-get($breakpoints, "lg")) {
+ --font-size: 19px;
+ }
+ }
+
+ @if map-get($breakpoints, "xl") {
+ @media (min-width: map-get($breakpoints, "xl")) {
+ --font-size: 20px;
+ }
+ }
+ }
+
+ // Borders
+ --border-radius: 0.25rem;
+ --border-width: 1px;
+ --outline-width: 3px;
+
+ // Spacings
+ --spacing: 1rem;
+
+ // Spacings for typography elements
+ --typography-spacing-vertical: 1.5rem;
+
+ // Spacings for body > header, body > main, body > footer, section, article
+ --block-spacing-vertical: calc(var(--spacing) * 2);
+ --block-spacing-horizontal: var(--spacing);
+
+ @if ($enable-classes and $enable-grid) {
+ --grid-spacing-vertical: 0;
+ --grid-spacing-horizontal: var(--spacing);
+ }
+
+ // Spacings for form elements and button
+ --form-element-spacing-vertical: 0.75rem;
+ --form-element-spacing-horizontal: 1rem;
+
+ // Spacings for nav component
+ --nav-element-spacing-vertical: 1rem;
+ --nav-element-spacing-horizontal: 0.5rem;
+ --nav-link-spacing-vertical: 0.5rem;
+ --nav-link-spacing-horizontal: 0.5rem;
+
+ // Font weight for form labels & fieldsets legend
+ --form-label-font-weight: var(--font-weight);
+
+ // Transitions
+ --transition: 0.2s ease-in-out;
+
+ // Modal (<dialog>)
+ --modal-overlay-backdrop-filter: blur(0.25rem);
+}
+
+// Responsives spacings
+@if $enable-responsive-spacings {
+ // Sectioning
+ #{$semantic-root-element} > header,
+ #{$semantic-root-element} > main,
+ #{$semantic-root-element} > footer,
+ section {
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ --block-spacing-vertical: calc(var(--spacing) * 2.5);
+ }
+ }
+
+ @if map-get($breakpoints, "md") {
+ @media (min-width: map-get($breakpoints, "md")) {
+ --block-spacing-vertical: calc(var(--spacing) * 3);
+ }
+ }
+
+ @if map-get($breakpoints, "lg") {
+ @media (min-width: map-get($breakpoints, "lg")) {
+ --block-spacing-vertical: calc(var(--spacing) * 3.5);
+ }
+ }
+
+ @if map-get($breakpoints, "xl") {
+ @media (min-width: map-get($breakpoints, "xl")) {
+ --block-spacing-vertical: calc(var(--spacing) * 4);
+ }
+ }
+ }
+
+ // Card (<article>)
+ article {
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ --block-spacing-horizontal: calc(var(--spacing) * 1.25);
+ }
+ }
+
+ @if map-get($breakpoints, "md") {
+ @media (min-width: map-get($breakpoints, "md")) {
+ --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+ }
+ }
+
+ @if map-get($breakpoints, "lg") {
+ @media (min-width: map-get($breakpoints, "lg")) {
+ --block-spacing-horizontal: calc(var(--spacing) * 1.75);
+ }
+ }
+
+ @if map-get($breakpoints, "xl") {
+ @media (min-width: map-get($breakpoints, "xl")) {
+ --block-spacing-horizontal: calc(var(--spacing) * 2);
+ }
+ }
+ }
+
+ // Modal
+ dialog > article {
+
+ --block-spacing-vertical: calc(var(--spacing) * 2);
+ --block-spacing-horizontal: var(--spacing);
+
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ --block-spacing-vertical: calc(var(--spacing) * 2.5);
+ --block-spacing-horizontal: calc(var(--spacing) * 1.25);
+ }
+ }
+
+ @if map-get($breakpoints, "md") {
+ @media (min-width: map-get($breakpoints, "md")) {
+ --block-spacing-vertical: calc(var(--spacing) * 3);
+ --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+ }
+ }
+ }
+}
+
+// Link
+a {
+ --text-decoration: none;
+
+ // Secondary & Contrast
+ @if $enable-classes {
+ &.secondary,
+ &.contrast {
+ --text-decoration: underline;
+ }
+ }
+}
+
+// Small
+small {
+ --font-size: 0.875em;
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ --font-weight: 700;
+}
+
+h1 {
+ --font-size: 2rem;
+ --typography-spacing-vertical: 3rem;
+}
+
+h2 {
+ --font-size: 1.75rem;
+ --typography-spacing-vertical: 2.625rem;
+}
+
+h3 {
+ --font-size: 1.5rem;
+ --typography-spacing-vertical: 2.25rem;
+}
+
+h4 {
+ --font-size: 1.25rem;
+ --typography-spacing-vertical: 1.874rem;
+}
+
+h5 {
+ --font-size: 1.125rem;
+ --typography-spacing-vertical: 1.6875rem;
+}
+
+// Forms elements
+[type="checkbox"],
+[type="radio"] {
+ --border-width: 2px;
+}
+
+[type="checkbox"][role="switch"] {
+ --border-width: 3px;
+}
+
+// Table
+thead,
+tfoot {
+ th,
+ td {
+ --border-width: 3px;
+ }
+}
+
+:not(thead, tfoot) > * > td {
+ --font-size: 0.875em;
+}
+
+// Code
+pre,
+code,
+kbd,
+samp {
+ --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
+ "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+kbd {
+ --font-weight: bolder;
+}