Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 11:24:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/_sass/examples/custom.scss Normal file
View File

@@ -0,0 +1,22 @@
@use "sass:color";
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Path to Bulma's sass folder
@use "sass" with (
$family-primary: '"Nunito", sans-serif',
$grey-dark: $brown,
$grey-light: $beige-light,
$primary: $purple,
$link: $pink,
$control-border-width: 2px,
$input-shadow: none
);
// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");

186
docs/_sass/examples/mixins.scss
View File

@@ -1,186 +0,0 @@
.bulma-arrow-mixin {
@include arrow(purple);
}
.bulma-hamburger-mixin {
@include hamburger(2.5rem);
}
.bulma-delete-mixin {
@include delete;
}
.bulma-loader-mixin {
@include loader;
}
.bulma-block-mixin {
@include block(1rem);
}
.bulma-fa-mixin {
@include fa(1rem, 2rem);
background-color: lavender;
}
.bulma-overlay-mixin-parent {
background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320);
background-size: cover;
border-radius: 0.5em;
position: relative;
height: 11.25rem;
width: 20rem;
}
.bulma-overlay-mixin {
@include overlay(1.5rem);
background-color: darkorange;
border-radius: 0.25em;
color: white;
opacity: 0.9;
padding: 1em;
}
.bulma-placeholder-mixin {
@include placeholder {
color: lightblue;
}
border-color: hsl(195deg, 53%, 79%);
&:hover {
border-color: hsl(195deg, 83%, 66%);
}
&:focus,
&:active {
border-color: hsl(195deg, 100%, 56%) !important;
box-shadow: 0 0 0 0.125em hsla(195deg, 100%, 56%, 0.25) !important;
}
}
.bulma-clearfix-mixin {
@include clearfix;
img {
border-radius: 0.25em;
margin-right: 0.5em;
}
}
.bulma-center-mixin-parent {
background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320);
background-size: cover;
border-radius: 0.5em;
position: relative;
height: 11.25rem;
width: 20rem;
}
.bulma-center-mixin {
@include center(96px);
border-radius: 8px;
height: 96px;
width: 96px;
}
.bulma-reset-mixin {
@include reset;
}
.bulma-unselectable-mixin {
@include unselectable;
}
.bulma-ltr-rtl-mixin {
background-color: lightgreen;
padding: 0.5em 1em;
border: 1px solid seagreen;
margin-right: -1px;
&:first-child {
@include ltr {
border-bottom-left-radius: 0.5em;
border-top-left-radius: 0.5em;
}
@include rtl {
border-bottom-right-radius: 0.5em;
border-top-right-radius: 0.5em;
}
}
&:last-child {
@include ltr {
border-bottom-right-radius: 0.5em;
border-top-right-radius: 0.5em;
}
@include rtl {
border-bottom-left-radius: 0.5em;
border-top-left-radius: 0.5em;
}
}
}
.bulma-ltr-position-mixin-parent {
background-color: beige;
border-radius: 0.5em;
padding: 1rem;
padding-left: 5rem;
position: relative;
p {
margin-top: -0.25rem;
}
}
.bulma-ltr-position-mixin {
@include ltr-position(1rem, false);
border-radius: 0.25em;
position: absolute;
top: 1rem;
}
.bulma-ltr-property-mixin-parent {
align-items: flex-start;
background-color: midnightblue;
border-radius: 0.5em;
color: lightskyblue;
display: flex;
padding: 1.5rem;
position: relative;
p {
margin-top: -0.25rem;
}
}
.bulma-ltr-property-mixin {
@include ltr-property("margin", 1rem, false);
border-radius: 0.25em;
}
.bulma-control-mixin {
@include control;
background: deeppink;
color: white;
&.is-small {
@include control-small;
}
&.is-medium {
@include control-medium;
}
&.is-large {
@include control-large;
}
}
.bulma-control-extend {
@extend %control;
background: mediumblue;
color: white;
}