mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add v1 banner
This commit is contained in:
Jeremy Thomas
parent
3a03ea1a9c
commit
7f20009ec1
@ -1,5 +1,79 @@
|
||||
{% include footer/support.html %}
|
||||
{% include footer/support.html %} {% include global/native.html %} {% include
|
||||
footer/main.html %}
|
||||
|
||||
{% include global/native.html %}
|
||||
<div class="v1-modal modal">
|
||||
<div class="bd-book-modal-background"></div>
|
||||
<h3 class="v1-modal-title title">
|
||||
<span class="v1-modal-emoji">🎉</span>
|
||||
Bulma v1 is coming soon!
|
||||
</h3>
|
||||
|
||||
{% include footer/main.html %}
|
||||
<ul class="v1-tags">
|
||||
<li class="v1-tag" style="background-color: #2a2e37; color: #fff">
|
||||
<span class="icon" style="color: #8158f5">
|
||||
<i class="fas fa-moon"></i>
|
||||
</span>
|
||||
Dark Mode
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-danger">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</span>
|
||||
Smart Grid
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-link">
|
||||
<i class="fab fa-css3"></i>
|
||||
</span>
|
||||
CSS Variables
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-amazon">
|
||||
<i class="fas fa-tint"></i>
|
||||
</span>
|
||||
Auto-Color
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-success">
|
||||
<i class="fas fa-paint-brush"></i>
|
||||
</span>
|
||||
Themes
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-rss">
|
||||
<i class="fas fa-spinner"></i>
|
||||
</span>
|
||||
Skeleton Loaders
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-palette"></i>
|
||||
</span>
|
||||
Auto-Palettes
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-sass">
|
||||
<i class="fas fa-bullseye"></i>
|
||||
</span>
|
||||
Dart Sass Support
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-primary">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
Improved Accessibility
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-fortyfour">
|
||||
<i class="fas fa-swatchbook"></i>
|
||||
</span>
|
||||
HSLA
|
||||
</li>
|
||||
<li class="v1-tag is-last">and much more…</li>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
class="bd-book-modal-close modal-close is-large"
|
||||
aria-label="close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
73
docs/_includes/global/v1.html
Normal file
73
docs/_includes/global/v1.html
Normal file
@ -0,0 +1,73 @@
|
||||
<div class="v1-banner">
|
||||
<h3 class="v1-title">
|
||||
<span class="v1-emoji">🎉</span>
|
||||
Bulma v1 is coming soon!
|
||||
</h3>
|
||||
|
||||
<div class="v1-features">
|
||||
<ul class="v1-tags">
|
||||
<li class="v1-tag" style="background-color: #2a2e37; color: #fff">
|
||||
<span class="icon" style="color: #8158f5">
|
||||
<i class="fas fa-moon"></i>
|
||||
</span>
|
||||
Dark Mode
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-danger">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</span>
|
||||
Smart Grid
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-link">
|
||||
<i class="fab fa-css3"></i>
|
||||
</span>
|
||||
CSS Variables
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-amazon">
|
||||
<i class="fas fa-tint"></i>
|
||||
</span>
|
||||
Auto-Color
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-success">
|
||||
<i class="fas fa-paint-brush"></i>
|
||||
</span>
|
||||
Themes
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-rss">
|
||||
<i class="fas fa-spinner"></i>
|
||||
</span>
|
||||
Skeleton Loaders
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-palette"></i>
|
||||
</span>
|
||||
Auto-Palettes
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-sass">
|
||||
<i class="fas fa-bullseye"></i>
|
||||
</span>
|
||||
Dart Sass Support
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-primary">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
Improved Accessibility
|
||||
</li>
|
||||
<li class="v1-tag">
|
||||
<span class="icon has-text-fortyfour">
|
||||
<i class="fas fa-swatchbook"></i>
|
||||
</span>
|
||||
HSLA
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="v1-more">and much more…</div>
|
||||
</div>
|
||||
@ -7,9 +7,7 @@
|
||||
<body
|
||||
class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}"
|
||||
>
|
||||
{% include global/deprecated.html %}
|
||||
{{ content }}
|
||||
{% include global/footer.html %}
|
||||
{% include global/scripts.html %}
|
||||
{% include global/v1.html %} {% include global/deprecated.html %} {{ content
|
||||
}} {% include global/footer.html %} {% include global/scripts.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
96
docs/_sass/components/v1.scss
Normal file
96
docs/_sass/components/v1.scss
Normal file
@ -0,0 +1,96 @@
|
||||
.v1-banner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.v1-modal {
|
||||
font-family: "Inter", $family-sans-serif;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.v1-banner,
|
||||
.v1-modal {
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#040435 0deg,
|
||||
#430677 60.00000178813934deg,
|
||||
#b61bbd 97.50000357627869deg,
|
||||
#fe5c65 149.9999964237213deg,
|
||||
#ff896f 179.72567439079285deg,
|
||||
#fc8433 209.51215267181396deg,
|
||||
#fd8d4d 226.2606167793274deg,
|
||||
#f45b10 244.58197116851807deg,
|
||||
#ad267d 279.1821026802063deg,
|
||||
#4b1acd 300.7368063926697deg,
|
||||
#004e9c 319.7864770889282deg,
|
||||
#003773 338.803768157959deg,
|
||||
#040435 360deg
|
||||
);
|
||||
}
|
||||
|
||||
.v1-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.v1-emoji {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.v1-title {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
font-weight: 800;
|
||||
line-height: 112.5%;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v1-features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(to left, transparent 0%, black 10%);
|
||||
mask-image: linear-gradient(to left, transparent 0%, black 10%);
|
||||
}
|
||||
|
||||
.v1-tags {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.v1-tag {
|
||||
background-color: white;
|
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04),
|
||||
0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
padding: 0.5em 0.75em 0.5em 0.5em;
|
||||
align-items: center;
|
||||
border-radius: 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v1-more {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.v1-banner {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:math";
|
||||
|
||||
:root {
|
||||
--newsletter-strip-size: 16px;
|
||||
--newsletter-border-size: #{$block-spacing};
|
||||
@ -51,13 +53,13 @@
|
||||
|
||||
.bd-newsletter-fields {
|
||||
display: grid;
|
||||
grid-gap: $block-spacing / 2;
|
||||
grid-gap: math.div($block-spacing, 2);
|
||||
grid-template-columns: minmax(20em, 1fr) auto;
|
||||
}
|
||||
|
||||
.bd-newsletter-box {
|
||||
background-color: $scheme-main;
|
||||
background-image: url('/images/hab/newsletter-strip.png');
|
||||
background-image: url("/images/hab/newsletter-strip.png");
|
||||
background-repeat: repeat-x;
|
||||
background-size: 96px var(--newsletter-strip-size);
|
||||
border-radius: 1.5em;
|
||||
@ -90,11 +92,11 @@
|
||||
|
||||
.icon {
|
||||
float: left;
|
||||
margin-right: $block-spacing / 2;
|
||||
margin-right: math.div($block-spacing, 2);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: ($block-spacing / 2) 0 !important;
|
||||
margin: (math.div($block-spacing, 2)) 0 !important;
|
||||
}
|
||||
|
||||
form {
|
||||
@ -143,7 +145,7 @@
|
||||
|
||||
@include widescreen {
|
||||
:root {
|
||||
--newsletter-border-size: #{$bd-edge-width / 2};
|
||||
--newsletter-border-size: #{math.div($bd-edge-width, 2)};
|
||||
}
|
||||
|
||||
#newsletter {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:math";
|
||||
|
||||
$best-item-width: 520;
|
||||
$best-screenshot-width: 504;
|
||||
$best-count: 6;
|
||||
@ -5,7 +7,7 @@ $best-more-count: 6;
|
||||
$best-total-count: $best-count + (2 * $best-more-count);
|
||||
$best-total-width: $best-item-width * $best-total-count;
|
||||
$best-speed: 100; // px per second
|
||||
$best-duration: $best-total-width / $best-speed * 1s;
|
||||
$best-duration: math.div($best-total-width, $best-speed) * 1s;
|
||||
$best-padding: $block-spacing;
|
||||
$best-height: 386px;
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:math";
|
||||
|
||||
@keyframes bdGrow {
|
||||
from {
|
||||
transform: scale(0);
|
||||
@ -49,7 +51,7 @@ $focus-delay: 0;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
$delay-subtitle: $delay / 2;
|
||||
$delay-subtitle: math.div($delay, 2);
|
||||
|
||||
// Titles
|
||||
.bd-focus-item {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:math";
|
||||
|
||||
.bd-heading {
|
||||
> .icon {
|
||||
font-size: $title-size;
|
||||
@ -40,11 +42,11 @@
|
||||
|
||||
.icon {
|
||||
float: left;
|
||||
margin-right: $block-spacing / 2;
|
||||
margin-right: math.div($block-spacing, 2);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: ($block-spacing / 2) 0 !important;
|
||||
margin: (math.div($block-spacing, 2)) 0 !important;
|
||||
}
|
||||
|
||||
form {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use "sass:math";
|
||||
|
||||
$bd-sponsor-padding: $block-spacing;
|
||||
$bd-sponsor-width: 12rem;
|
||||
|
||||
@ -31,7 +33,7 @@ $bd-sponsor-width: 12rem;
|
||||
@extend %center;
|
||||
@extend %link-before-background;
|
||||
|
||||
padding: $bd-sponsor-padding ($bd-sponsor-padding / 2);
|
||||
padding: $bd-sponsor-padding (math.div($bd-sponsor-padding, 2));
|
||||
|
||||
strong,
|
||||
img {
|
||||
|
||||
@ -223,6 +223,7 @@ $navbar-breakpoint: $tablet;
|
||||
@import "./_sass/components/survey";
|
||||
@import "./_sass/components/color";
|
||||
@import "./_sass/components/pill";
|
||||
@import "./_sass/components/v1";
|
||||
|
||||
@import "./_sass/pages/index";
|
||||
@import "./_sass/pages/docs";
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
4968
docs/package-lock.json
generated
4968
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,16 +13,16 @@
|
||||
"cypress": "^13.6.0",
|
||||
"metalsmith": "^2.6.2",
|
||||
"metalsmith-filter": "^1.0.2",
|
||||
"node-sass": "^9.0.0",
|
||||
"postcss-cli": "^10.1.0"
|
||||
"sass": "^1.69.5",
|
||||
"postcss-cli": "^11.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"bulma-sass": "node-sass --output-style expanded bulma.scss css/bulma.css",
|
||||
"bulma-sass": "sass --style expanded bulma.scss css/bulma.css",
|
||||
"bulma-watch": "npm run bulma-sass -- --watch",
|
||||
"css-build": "npm run css-sass && npm run css-autoprefix && npm run css-cleancss",
|
||||
"css-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-docs.css css/bulma-docs.css",
|
||||
"css-cleancss": "cleancss -o css/bulma-docs.min.css css/bulma-docs.css",
|
||||
"css-sass": "node-sass --output-style expanded bulma-docs.scss css/bulma-docs.css",
|
||||
"css-sass": "sass --style expanded bulma-docs.scss css/bulma-docs.css",
|
||||
"css-watch": "npm run css-sass -- --watch",
|
||||
"cypress-open": "./node_modules/.bin/cypress open",
|
||||
"cypress-run": "./node_modules/.bin/cypress run",
|
||||
@ -31,7 +31,7 @@
|
||||
"js-watch": "npm run js-build -- --watch",
|
||||
"start": "npm run css-watch | npm run js-watch",
|
||||
"start-test": "npm run test-scss -- --watch",
|
||||
"test-scss": "node-sass --output-style expanded bulma-test.scss css/bulma-test.css",
|
||||
"test-scss": "sass --style expanded bulma-test.scss css/bulma-test.css",
|
||||
"test-watch": "npm run test-scss -- --watch"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user