Skip to content

Instantly share code, notes, and snippets.

@eightyfive
Last active January 4, 2022 23:18
Show Gist options
  • Save eightyfive/ca8b51e2f06e47e25143e914a0817275 to your computer and use it in GitHub Desktop.
Save eightyfive/ca8b51e2f06e47e25143e914a0817275 to your computer and use it in GitHub Desktop.
Laravel App SASS (Bulma)
// Utilities
@import "../../node_modules/bulma/sass/utilities/functions";
@import "../../node_modules/bulma/sass/utilities/derived-variables";
@import "../../node_modules/bulma/sass/utilities/mixins";
@import "../../node_modules/bulma/sass/utilities/controls";
// Base
@import "../../node_modules/bulma/sass/base/minireset";
@import "../../node_modules/bulma/sass/base/generic";
// Elements
@import "../../node_modules/bulma/sass/elements/box";
@import "../../node_modules/bulma/sass/elements/button";
@import "../../node_modules/bulma/sass/elements/container";
@import "../../node_modules/bulma/sass/elements/content";
@import "../../node_modules/bulma/sass/elements/icon";
@import "../../node_modules/bulma/sass/elements/image";
@import "../../node_modules/bulma/sass/elements/notification";
@import "../../node_modules/bulma/sass/elements/tag";
@import "../../node_modules/bulma/sass/elements/title";
@import "../../node_modules/bulma/sass/elements/other";
// Form
@import "../../node_modules/bulma/sass/form/_all";
// Components
@import "../../node_modules/bulma/sass/components/dropdown";
@import "../../node_modules/bulma/sass/components/message";
@import "../../node_modules/bulma/sass/components/navbar";
// Grid
@import "../../node_modules/bulma/sass/grid/columns";
// Helpers
@import "../../node_modules/bulma/sass/helpers/spacing";
// Layout
@import "../../node_modules/bulma/sass/layout/hero";
@import "../../node_modules/bulma/sass/layout/footer";
// Source Sans Pro (400)
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
// Source Sans Pro (600)
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 600;
font-display: swap;
src: local("Source Sans Pro SemiBold"), local("SourceSansPro-SemiBold"),
url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu3cOWxw.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
// Material Icons
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v67/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
@import "../../node_modules/bulma/sass/utilities/initial-variables";
$family-sans-serif: "Source Sans Pro", BlinkMacSystemFont, -apple-system,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
// Colors
// https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=F44336
$background: #f5f5f6;
$background-dark: #e1e2e1;
$primary: #e53935; // red 600
$primary-light: #ff6f60;
$primary-dark: #ab000d;
$secondary: #1976d2;
$secondary-light: #63a4ff;
$secondary-dark: #004ba0;
// Button
$button-color: $secondary;
$button-border-color: $secondary;
@charset "utf-8";
@import "./fonts";
@import "./variables";
// Vendor
@import "./bulma";
// App
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main {
flex: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment