Bulma v9 website (#3249)

* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
2026-03-20 12:24:28 -07:00 · 2021-01-27 23:30:42 +00:00
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
--- a/docs/_sass/components/variables.scss
+++ b/docs/_sass/components/variables.scss
@@ -0,0 +1,175 @@
+.bd-vars {
+  --bd-var-name-width: 100%;
+  --bd-var-computed-type-width: 50%;
+  --bd-var-type-width: 50%;
+  --bd-var-computed-value-width: 50%;
+  --bd-var-value-width: 50%;
+
+  background-color: var(--hl-background);
+  border-radius: $radius-large;
+  color: var(--hl-color);
+  padding: 3.25em;
+  padding-top: 2em;
+
+  .bd-anchor-title {
+    color: $white;
+  }
+}
+
+.bd-var {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: $family-monospace;
+  font-size: 0.75em;
+  line-height: 1.375;
+
+  .highlight {
+    background: none;
+    font-size: 1em;
+    overflow: visible;
+
+    pre {
+      overflow: visible;
+      padding: 0;
+      white-space: pre-wrap;
+      white-space: break-spaces;
+    }
+  }
+
+  .bd-copy {
+    font-size: 0.5em !important;
+    right: 0;
+    top: 0;
+  }
+
+  &.bd-is-body {
+    border-radius: $radius;
+
+    &:hover {
+      background-color: rgba(white, 0.1);
+    }
+  }
+
+  &.bd-is-head {
+    border-bottom: 2px solid rgba(white, 0.1);
+    border-radius: 0;
+    margin-bottom: 0.5em;
+    padding-bottom: 0.5em;
+
+    %bd-var-item {
+      color: var(--hl-gray-02) !important;
+    }
+  }
+}
+
+.bd-var-name {
+  @extend %bd-var-item;
+  color: var(--hl-gray-01);
+  width: var(--bd-var-name-width);
+}
+
+.bd-var-type {
+  @extend %bd-var-item;
+  color: var(--bd-var-type-color, var(--hl-gray-02));
+  width: var(--bd-var-type-width);
+}
+
+.bd-var-value {
+  @extend %bd-var-item;
+  color: var(--hl-green);
+  width: var(--bd-var-value-width);
+}
+
+.bd-var-computed-value {
+  @extend %bd-var-item;
+  color: var(--hl-yellow);
+  width: var(--bd-var-computed-value-width);
+}
+
+.bd-var-computed-type {
+  @extend %bd-var-item;
+  color: var(--bd-var-type-color, var(--hl-purple));
+  width: var(--bd-var-computed-type-width);
+}
+
+.bd-var {
+  .bd-is-boolean {
+    --bd-var-type-color: var(--hl-lavender);
+  }
+
+  .bd-is-color {
+    --bd-var-type-color: var(--hl-orange);
+  }
+
+  .bd-is-compound {
+    --bd-var-type-color: var(--hl-lavender);
+  }
+
+  .bd-is-font-weight {
+    --bd-var-type-color: var(--hl-lavender);
+  }
+
+  .bd-is-function {
+    --bd-var-type-color: var(--hl-pink);
+  }
+
+  .bd-is-size {
+    --bd-var-type-color: var(--hl-pink);
+  }
+
+  .bd-is-shadow {
+    --bd-var-type-color: var(--hl-lavender);
+  }
+
+  .bd-is-string {
+    --bd-var-type-color: var(--hl-yellow);
+  }
+
+  .bd-is-variable {
+    --bd-var-type-color: var(--hl-green);
+  }
+}
+
+@include touch {
+  %bd-var-item {
+    padding: 0 1em;
+  }
+
+  .bd-vars {
+    padding: 1em;
+  }
+
+  .bd-var {
+    padding: 0.5em 0;
+  }
+}
+
+@include desktop {
+  %bd-var-item {
+    padding: 0.25em 1em;
+  }
+
+  .bd-var.bd-is-head {
+    .bd-var-name {
+      padding-left: 0;
+    }
+
+    .bd-var-computed-type {
+      padding-left: 2em;
+      padding-right: 0;
+    }
+  }
+
+  .bd-var.bd-is-body {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+
+  .bd-vars {
+    --bd-var-name-width: 40%;
+    --bd-var-computed-type-width: 10%;
+    --bd-var-type-width: 10%;
+    --bd-var-computed-value-width: 20%;
+    --bd-var-value-width: 20%;
+  }
+}