Skip to content

Commit

Permalink
Merge pull request #1 from imswarnil/materia-theme
Browse files Browse the repository at this point in the history 
Adding Materia Theme To Site
  • Loading branch information
@imswarnil
imswarnil authored Feb 19, 2025
2 parents 2c4198c + c228b70 commit f6df56b
Show file tree
Hide file tree
Showing 7 changed files with 397 additions and 4 deletions.
4 changes: 1 addition & 3 deletions _sass/_main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
// Import Bulma
@import "../node_modules/bulma/sass/index";

// Import custom resume extensions
@import "../_sass/theme/index";
@import "../_sass/bulmaswatch/materia/index";
// Custom styles and overrides
html {
scroll-behavior: smooth;
Expand Down
6 changes: 6 additions & 0 deletions _sass/bulmaswatch/materia/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*! bulmaswatch v0.8.1 | MIT License | Materia */
@import "./variables";
@import "../../../node_modules/bulma/sass/index";
@import "./override";


300 changes: 300 additions & 0 deletions _sass/bulmaswatch/materia/_override.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,300 @@
// Overrides
@if $bulmaswatch-import-font {
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
}

hr {
background-color: lighten($grey-lighter, 5);
}

.content {
letter-spacing: 0.04em;
}

.button {
border-radius: 3px;
box-shadow: $shadow;
text-transform: uppercase;
font-weight: 500;
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 300ms ease;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);

&.is-hovered,
&:hover {
border-color: transparent;
background-color: darken($button-background-color, 5);
}

&.is-active,
&:active {
box-shadow: $shadow-large;
}

&.is-focused,
&:focus {
border-color: transparent;
}

@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);

&.is-#{$name} {
&.is-hovered,
&:hover {
background-color: darken($color, 5);
}

&.is-active,
&:active {
box-shadow: $shadow-large;
}
}
}

&.is-text {
box-shadow: none;
}

&:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}

&:active:before {
transform: scale(0, 0);
opacity: 0.2;
transition: 0s;
}
}

.input {
border: none;
padding-left: 0;
padding-right: 0;
box-shadow: inset 0 -1px 0 $grey-lighter;
transition: all 300ms;

&.is-small {
border-radius: 0;
}

&.is-active,
&.is-focused,
&:active,
&:focus {
box-shadow: inset 0 -2px 0 $input-focus-border-color;
}
@each $name, $pair in $colors {
$color: nth($pair, 1);

&.is-#{$name} {
box-shadow: inset 0 -1px 0 $color;

&.is-active,
&.is-focused,
&:active,
&:focus {
box-shadow: inset 0 -2px 0 $color;
}
}
}

&.is-disabled,
&[disabled],
&[readonly] {
border-bottom: 1px dotted $grey-lighter;
cursor: not-allowed;
}
}

.textarea {
box-shadow: none;
}

.select select {
border: none;
border-radius: 0;
box-shadow: inset 0 -1px 0 $grey-lighter;
transition: all 300ms;

&.is-active,
&.is-focused,
&:active,
&:focus {
box-shadow: inset 0 -2px 0 $input-focus-border-color;
}
}

.control {
&.has-addons {
.button,
.input,
.select {
&:first-child,
&:last-child {
border-radius: 0;

select {
border-radius: 0;
}
}
}

.button {
box-shadow: none;
}
}
}

.progress {
height: $size-7;
border-radius: $radius;

&.is-small {
height: 0.5rem;
}
}

.card {
box-shadow: $shadow;

.card-header {
box-shadow: none;
}

.card-footer,
.card-footer-item {
border: 0;
text-transform: uppercase;
font-weight: 500;
}
}

.menu {
.menu-list {
a {
border-radius: $radius;
padding: $size-7;

&.is-active {
background-color: transparent;
color: $link;
}
}
}
}

.notification {
box-shadow: $shadow;
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);

&.is-#{$name} {
a:not(.button) {
color: $color-invert;
text-decoration: underline;
}
}
}
}

.modal {
.modal-background {
background-color: rgba($black, 0.6);
}

.modal-card {
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
}
}

.navbar {
&:not(.is-transparent) {
box-shadow: $shadow;
}

.has-dropdown .navbar-item {
@include from($navbar-breakpoint) {
color: $text;
}
}

@include until($navbar-breakpoint) {
.navbar-menu {
background-color: inherit;
}
}

@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);

&.is-#{$name} {
@include until($navbar-breakpoint) {
.navbar-menu {
.navbar-item,
.navbar-link {
color: $color-invert;
&.is-active {
background-color: darken($color, 5);
}
}
}
}
}
}
}

.tabs {
.is-active a {
box-shadow: inset 0 -1px 0 $link;
}

&.is-boxed {
.is-active a {
border-top: 0;
box-shadow: inset 0 2px 0 $link;
}
}
}

.panel {
box-shadow: $shadow;

.panel-block,
.panel-heading,
.panel-tabs {
border-radius: $radius;
border: none;
padding: $size-7;
}

.panel-block.is-active {
color: $primary;
}

.panel-tabs {
a:hover {
border-color: $link-hover;
color: $link-hover;
}
}
}
44 changes: 44 additions & 0 deletions _sass/bulmaswatch/materia/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
////////////////////////////////////////////////
// MATERIA
////////////////////////////////////////////////

$orange: #ff9800;
$yellow: #ffeb3b;
$green: #4caf50;
$turquoise: #009688;
$cyan: #29b6f6;
$blue: #2196f3;
$purple: #9c27b0;
$red: #f44336;

$primary: #3f51b5 !default;

$family-sans-serif: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$title-weight: 400;
$title-weight-bold: 500;

$radius: 0;
$shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
$shadow-large: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);

$button-border-color: transparent;
$button-hover-border: transparent;
$button-focus-border-color: transparent;
$button-active-border-color: transparent;

$input-disabled-background-color: transparent;

$border-width: 2px;

$navbar-height: 4rem;

$dropdown-content-shadow: $shadow-large;
$dropdown-content-radius: 4px;

$bulmaswatch-import-font: true !default;

$box-shadow: $shadow;

$control-height: 2.5em;
1 change: 1 addition & 0 deletions _sass/theme/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@
@import "./ads";
@import "./home";
@import "./post";
@import "./steps";

Loading

0 comments on commit f6df56b

Please sign in to comment.