forked from sagi/seepur
new theme
This commit is contained in:
parent
abf1a6e8ac
commit
72e113b1e1
14 changed files with 1192 additions and 600 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1504
public/style.css
1504
public/style.css
File diff suppressed because it is too large
Load diff
|
|
@ -4,6 +4,7 @@
|
|||
@import './variables.scss';
|
||||
@import './mixins.scss';
|
||||
@import "../../node_modules/bulma/bulma.sass";
|
||||
@import "./overrides.scss";
|
||||
// @import '../../node_modules/animate.css/source/_base.css';
|
||||
// nav.navbar {
|
||||
// padding-left: 5rem;
|
||||
|
|
|
|||
197
resources/sass/overrides.scss
Normal file
197
resources/sass/overrides.scss
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
// Overrides
|
||||
@if $bulmaswatch-import-font {
|
||||
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
|
||||
}
|
||||
|
||||
.modal-card-title,
|
||||
.subtitle,
|
||||
.title,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 700;
|
||||
font-family: $family-heading;
|
||||
}
|
||||
|
||||
.button,
|
||||
.control.has-icons-left .icon,
|
||||
.control.has-icons-right .icon,
|
||||
.input,
|
||||
.pagination-ellipsis,
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous,
|
||||
.select,
|
||||
.select select,
|
||||
.textarea {
|
||||
height: 2.534em;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 200ms ease;
|
||||
font-weight: 500;
|
||||
font-family: $family-heading;
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.25);
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: 0 0 0 2px rgba($color, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
transition: all 200ms ease;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.notification {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: none;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-radius: $radius;
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-title,
|
||||
.menu-label,
|
||||
.message-header,
|
||||
.panel-heading {
|
||||
font-family: $family-heading;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.menu-list a {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: $radius;
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
font-family: $family-heading;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
background-color: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dropdown .navbar-item {
|
||||
@include desktop {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-transparent {
|
||||
background-color: transparent;
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
color: rgba($text, 0.75);
|
||||
|
||||
&.is-active {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar-start,
|
||||
.navbar-end {
|
||||
> .navbar-item,
|
||||
.navbar-link {
|
||||
color: rgba($color-invert, 0.75);
|
||||
|
||||
&.is-active {
|
||||
color: $color-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include touch {
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
color: rgba($color-invert, 0.75);
|
||||
|
||||
&.is-active {
|
||||
color: $color-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
// Colors
|
||||
.navbar {
|
||||
background-color: $primary;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-block.is-active {
|
||||
color: $primary;
|
||||
}
|
||||
|
|
@ -1,11 +1,45 @@
|
|||
// Update Bulma's global variables
|
||||
// $family-sans-serif: "Nunito", sans-serif;
|
||||
// $grey-dark: $brown;
|
||||
// $grey-light: $beige-light;
|
||||
// $primary: $purple;
|
||||
// $primary: #7FD7F5;
|
||||
// $link: $pink;
|
||||
// $widescreen-enabled: false;
|
||||
// $fullhd-enabled: false;
|
||||
////////////////////////////////////////////////
|
||||
// MINTY
|
||||
////////////////////////////////////////////////
|
||||
$grey: #888;
|
||||
$grey-light: #aaa;
|
||||
$grey-lighter: #dbdbdb;
|
||||
|
||||
// $navbar-height: 5rem;
|
||||
$orange: #eea170;
|
||||
$yellow: #ffce67;
|
||||
$green: #56cc90;
|
||||
$cyan: #6cc3d5;
|
||||
$blue: #6d90d6;
|
||||
$red: #e07f7d;
|
||||
$turquoise: #6abfb0;
|
||||
|
||||
$danger: $orange;
|
||||
|
||||
$text: darken($grey, 10);
|
||||
$subtitle-color: $grey;
|
||||
|
||||
$size-1: 2.5rem;
|
||||
$size-2: 2rem;
|
||||
$size-3: 1.75rem;
|
||||
$size-4: 1.5rem;
|
||||
$size-5: 1.25rem;
|
||||
$size-6: 15px;
|
||||
$size-7: 0.75rem;
|
||||
|
||||
$radius-small: 4px;
|
||||
$radius: 6px;
|
||||
$radius-large: 8px;
|
||||
|
||||
$family-heading: "Montserrat", -apple-system, system-ui, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
|
||||
$navbar-background-color: $turquoise;
|
||||
$navbar-item-color: rgba(#fff, 0.75);
|
||||
$navbar-item-hover-color: #fff;
|
||||
$navbar-item-active-color: #fff;
|
||||
$navbar-item-hover-background-color: rgba(#000, 0.1);
|
||||
$navbar-dropdown-arrow: $navbar-item-color;
|
||||
|
||||
$bulmaswatch-import-font: true !default;
|
||||
|
||||
$box-shadow: 0 0 0 1px $grey-lighter;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
>
|
||||
<p>End Call?</p>
|
||||
</Modal>
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<router-link to="/" class="navbar-item" exact v-if="!inCall">
|
||||
<strong>Seepur</strong>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ script('scripts/components/navbar/app.bundle.js') }}
|
||||
<nav class="{{ isLanding ? 'darken' : '' }} navbar" role="navigation" aria-label="main navigation">
|
||||
<nav class="{{ isLanding ? 'darken' : '' }} navbar is-light" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
{{-- <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"> --}}
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
@else
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-info is-rounded" href='/register'>
|
||||
<a class="button is-primary is-rounded" href='/register'>
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-rounded is-outlined" href='/login'>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ A safe and fun way to spend time with far away loved ones
|
|||
spend time with far away loved ones
|
||||
</h2>
|
||||
<div class="buttons">
|
||||
<a class="button is-info is-rounded" href="/register">Sign Up</a>
|
||||
<a class="button is-primary is-rounded" href="/register">Sign Up</a>
|
||||
<a class="button is-rounded is-outlined" href='/login'>Log In</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
</label>
|
||||
</div>
|
||||
<div class="control is-inline-block">
|
||||
<button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
|
||||
<button id="btn-register-submit" class="button is-primary is-rounded" disabled="true">Submit</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Seepur| Login
|
|||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-rounded is-info">Submit</button>
|
||||
<button class="button is-rounded is-primary">Submit</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-rounded is-outlined is-rounded" href='/'>Cancel</a>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ Seepur| Register
|
|||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
|
||||
<button id="btn-register-submit" class="button is-primary is-rounded" disabled="true">Submit</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-outlined is-rounded" href='/'>Cancel</a>
|
||||
|
|
|
|||
Loading…
Reference in a new issue