diff --git a/package.json b/package.json index 44a3d24..2b3b625 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.62.0", "@typescript-eslint/parser": "5.62.0", + "cypress": "latest", "eslint": "^8.49.0", "jasmine-core": "~3.10.0", "karma": "~6.3.0", @@ -51,7 +52,6 @@ "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", - "typescript": "~5.1.6", - "cypress": "latest" + "typescript": "~5.1.6" } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index df06666..865cdfa 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,11 +3,15 @@ import { BrowserModule } from '@angular/platform-browser' import { AppRoutingModule } from './app-routing.module' import { AppComponent } from './app.component' +import { Error404Component } from './errors/error404/error404.component' +import { FaqComponent } from './pages/faq/faq.component' import { HomeComponent } from './pages/home/home.component' -import { HeaderComponent } from './partials/header/header.component' import { FooterComponent } from './partials/footer/footer.component' -import { Error404Component } from './errors/error404/error404.component'; -import { FaqComponent } from './pages/faq/faq.component' +import { HeaderComponent } from './partials/header/header.component' +import { LiveCodeHeroComponent } from './partials/live-code-hero/live-code-hero.component'; +import { AdminPanelHeroComponent } from './partials/admin-panel-hero/admin-panel-hero.component'; +import { ApiHeroComponent } from './partials/api-hero/api-hero.component'; +import { SdkFeaturesComponent } from './partials/sdk-features/sdk-features.component' @NgModule({ declarations: [ @@ -16,7 +20,11 @@ import { FaqComponent } from './pages/faq/faq.component' HeaderComponent, FooterComponent, Error404Component, - FaqComponent + FaqComponent, + LiveCodeHeroComponent, + AdminPanelHeroComponent, + ApiHeroComponent, + SdkFeaturesComponent ], imports: [BrowserModule, AppRoutingModule], providers: [], diff --git a/src/app/pages/faq/faq.component.ts b/src/app/pages/faq/faq.component.ts index 02e7f12..918403a 100644 --- a/src/app/pages/faq/faq.component.ts +++ b/src/app/pages/faq/faq.component.ts @@ -11,25 +11,21 @@ export class FaqComponent { faqs: { question: string; answer: SafeHtml }[] = [ { - question: 'Who is CASE addressed to ?', + question: 'What is CASE ?', answer: this.sanitizer.bypassSecurityTrustHtml(` -

CASE is addressed to any developer that wants to build quickly a solid CRUD app.

-

A CASE app can be included in projects of different sizes, as a whole or connected to other apps.

`) +

CASE is a Typescript lightweight BaaS (Backend As A Service) that provides a complete backend for your web application.

+ `) }, { - question: 'How can I custom [insert element here] ?', - answer: this.sanitizer.bypassSecurityTrustHtml( - `

If it does not appear in the docs, you can't.

-

If you think that this customization should be possible, you can fill a feature request.

-

Nevertheless, it is important to acknowledge that CASE's philosophy is to keep things as simple and as standardized as possible. CASE will probably not fit well in projects with a high need for customization.

` - ) + question: 'Who is CASE addressed to ?', + answer: this.sanitizer.bypassSecurityTrustHtml(` +

CASE is addressed to any developer that wants to build quickly a backend for his or her web app.

+

A CASE app can be included in projects of different sizes, as a whole or connected to other apps.

`) }, { - question: 'Can I use [insert cool tech here] ?', + question: 'Can I use this framework ?', answer: this.sanitizer.bypassSecurityTrustHtml(` -

CASE works currently with TypeScript and SQLite and will probably not change soon.

-

If you need to add a custom package or custom script to trigger at some point, checkout the related doc. -

`) +

CASE offers a JS client library that can be used with any JS client framework or vanilla JS. If you do not want to use it, you can use directly the REST API.

`) }, { question: 'Where can I find help ?', diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 28ae98e..eaba068 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -8,13 +8,20 @@
-
-
-

Develop a CRUD web app in 15 minutes

-

- Forget about frameworks, forms, controllers and databases. CASE - eliminates 95% of the work to let you focus on your data. +
+
+

+ Create your backend without leaving your IDE +

+
+
+

+ CASE is a lightweight Backend-as-a-Service for + rapid web application development.

+
-

- 80KB - 12 files -

-
- - Get started - -
-
- - Works with : - - -

@@ -88,180 +66,438 @@

-
-
-
- -
-
-
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+ +
-
+ +
+
+
+
+ + Available for your favorite weapon + +
+
+
+
+ React logo + Vue logo + Angular logo + Svelte logo + Nuxt logo + NextJS logo +
+
+
+
+
+
+
+
+
+
+
+ +
-
+
+
+

Meet your new backend

+ +

+ A complete backend solution with essential + features, hassle-free. You can install CASE locally in minutes + without any configuration and start building your app right away. +

+
+ +
+ + checkmark + Database + + checkmarkAdmin panel + + + checkmarkREST API + + checkmarkJS SDK +
+
+
+
+
+
+
+
+
+
+

Ready-to-use features

+

+ CASE is a Backend-as-a-Service equipped with all + the essential features needed for your web application. +

+
+
+
+
+
+
+
+ +
+
Auth
+

One line login & logout, entity-based access control policies.

+
+
+
- -
Frameworkless
-

Because architecture is about intent, not frameworks

+
+ +
+
Storage
+

+ Store files and images locally. Define various sizes for image + uploads. +

-
+
- -
Bring your own packages
-

Attach your custom logic scripts to entity events

+
+ +
+
Validation
+

Add pre-built or custom validators to your properties.

-
+
- -
Profesional UI
-

Ready-to-go UI components and layout for your users

+
+ +
+
Hooks
+

Add your own logic and import your own packages.

-
+
- -
Lightning fast
-

Instant setup, development and deploy

+
+ +
+
Real-world types
+

+ A dozen of types like date, email, password, image, relation and + more. +

-
- background blurred effect -
-
-
-

- As a developper, you should prefer CASE over other market solutions. -

-
-
-
-
-
-

- CASE - VS - app builder, no-code, low-code -

-

- You do not need to be babysitted with drag-and-drop options and - visual database builders. -

-
+
+
+
+
+
+
+

Connect to your backend as it should be: effortlessly

+

+ Why make things complicated when it can be simple ? Interact with + your data smoothly with CASE JavaScript SDK. +

-
-
-
-
-

- CASE VS - lib, packages, frameworks, boilerplates -

-

- They inevitably end up adding complexity to your stack, - repelling developers and increasing technical debt. -

-
-
+
+
+
+ +
+ Checkout SDK doc
-
+
-
-

Join our community

-

- CASE is still in its early days and has so much room to improve. If - the project excites you, please give us a hand ! -

+
+
+

Why choose CASE ?

+

+ Choosing CASE as your backend solution will give you many + advantages. +

+
-
-
-
-

- - Star us on Github -

- - - - - - GitHub - +
+
+
+
+
Save time, eliminate headaches
+

+ By keeping it simple: no configuration at all. Nothing to maintain. +

-
-
-
-

- Share ideas and upvote others -

- - - - - - Discussions - +
+
+
+ +
+
Just code it
+

+ Not another no-code wizardry. You know how to code, so go ahead and + do it. +

+
+
+
+
+
+
+
Be (really) free
+

+ Self-hosted, Open Source and Local-first. Easy to enter, easy to + leave. +

-
-
-
-

Get help from the community

- +
+
+
- - + + npx create-case-app my-case-app - Discord - + + + + + + Copy + Copied ! + + +
+ + +
+
+
+
+
+
+
+ + +

🙏 We need your honest feedback

+ +

+ CASE is still in its early days and has much room to improve. If you + also think we deserve a hassle-free backend, here's how you can lend + us a hand: +

+
    +
  1. Try CASE using the npx command.
    2. +
  2. Leave your feedback (good or bad) on Github Discussions.
    3. +
  3. If you want to follow the progress, star us on Github.
    4. +
+
+
+

+ + Something is not working ? Contact us through our Discord support channel +

+
+
+
+
+
+ diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index ae2e6ad..eea824b 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -8,7 +8,7 @@ img { position: relative; left: 50%; - transform:translateX(-50%); + transform: translateX(-50%); min-width: unset; width: unset; max-width: unset; @@ -16,27 +16,21 @@ } .bg-shape { - position: absolute; + position: absolute; top: 50%; left: 50%; - transform:translate(-50%, -50%); + transform: translate(-50%, -50%); z-index: -1; } -.versus { - em { - margin-right: 4px; - color: $warning; - -webkit-text-stroke: .5px black; - - } -} figure.main-pic { position: relative; + img { position: relative; z-index: 1; border: 1px solid $border-color; + border-radius: 24px; } } @@ -46,8 +40,9 @@ figure.main-pic { transform: translateY(-50%); width: 65.93%; height: 86.36%; + div { - translate: none; + translate: none; rotate: none; scale: none; transform: translate(0px, 0px); @@ -58,35 +53,41 @@ figure.main-pic { border-radius: 16px; filter: blur(45px); will-change: transform; -} + } &-left { left: 36px; + div { background: $primary; } } + &-right { right: 36px; + div { background: $success; } } } -.buttons .button { +.buttons .button { z-index: 1; } .npx-wrapper { position: relative; + .is-copied { position: absolute; - opacity: 0; + opacity: 0; + &.is-active { @extend .slideInUp; } } + .button-copy { opacity: 1; @@ -96,10 +97,11 @@ figure.main-pic { } } -.button-copy, .is-copied { +.button-copy, +.is-copied { display: inline-block; - min-width: 81px; - white-space: nowrap; + min-width: 81px; + white-space: nowrap; } .slideInUp { @@ -109,71 +111,72 @@ figure.main-pic { animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; - } - @-webkit-keyframes slideInUp { - 0% { - -webkit-transform: translateY(100%); - transform: translateY(100%); - opacity: 0 - - } - - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - opacity: 1; - } - } +} - @keyframes slideInUp { - 0% { - -webkit-transform: translateY(100%); - transform: translateY(100%); - opacity: 0 +@-webkit-keyframes slideInUp { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + opacity: 0 + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } } -100% { --webkit-transform: translateY(0); -transform: translateY(0); -opacity: 1; -} +@keyframes slideInUp { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + opacity: 0 + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } } .slideOutUp { --webkit-animation-name: slideOutUp; -animation-name: slideOutUp; --webkit-animation-duration: .5s; -animation-duration: .5s; --webkit-animation-fill-mode: both; -animation-fill-mode: both; + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + @-webkit-keyframes slideOutUp { -0% { --webkit-transform: translateY(0); -transform: translateY(0); -opacity: 1 + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1 + } + 100% { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + opacity: 0; + } } -100% { --webkit-transform: translateY(-100%); -transform: translateY(-100%); -opacity: 0; -} -} + @keyframes slideOutUp { -0% { --webkit-transform: translateY(0); -transform: translateY(0); -opacity: 1 + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1 + } -} -100% { - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - opacity: 0; + 100% { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + opacity: 0; } } @@ -184,18 +187,21 @@ opacity: 1 .install-code { white-space: nowrap; + @include touch { font-size: $size-7; } } .has-icon-left { ---star-width: 24px; ---star-margin: 9px; + --star-width: 24px; + --star-margin: 9px; + span:first-child { margin-right: var(--star-margin); width: var(--star-width); } + span:last-child { width: calc(100% - var(--star-width)); } @@ -210,5 +216,200 @@ opacity: 1 background-image: url('/assets/images/stars.svg'); background-repeat: no-repeat; background-size: 40%; - background-position: 100% 55%; + background-position: 100% 55%; +} + +.illu { + position: absolute; + top: -48px; + left: $gap; + border-radius: $radius-large; + height: 96px; + width: 96px; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 67%; + height: auto; + } + +} + +.col-left { + @include touch { + padding-top: 3rem; + } +} + +.col-right { + @include touch { + padding-top: 7rem; + } +} + +app-admin-panel-hero { + display: flex; + width: 100%; + height: 100%; +} + +.circle { + position: relative; + top: -1px; + width: 9px; + height: 9px; + border-radius: 50%; + background-color: $grey-darker; + margin-left: 9px; + transition: all .2s ease-in-out; + + &.is-active { + background-color: $success; + box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 2px, $success 0 2px 12px; + } +} + + +.icon-wrapper { + width: 54px; + height: 54px; + display: flex; + align-items: center; + justify-content: center; + + &.has-background-primary-light { + &.is-bordered { + border-color: rgba($primary, 0.5); + } + + i { + background: -webkit-linear-gradient($primary, #5065FF); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + + &.has-background-success-light { + &.is-bordered { + border-color: rgba($success, 0.5); + } + + i { + background: -webkit-linear-gradient(rgba($success-dark, 0.8), $success-dark); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } +} + +.count-wrapper { + position: relative; + overflow: hidden; + min-width: 46px; + max-width: 46px; + + &:before { + content: ''; + position: absolute; + display: inline-block; + bottom: 0; + left: 0; + width: 1px; + height: calc(100% - 36px); + background: $grey-lighter; + } +} + +.square { + width: 12px; + min-width: 12px; + height: 12px; + background: $success; + background: linear-gradient(90deg, rgba($success, 1) 0%, rgba($link, 1) 100%); + margin-right: 6px; + margin-top: 14px; + + + span { + position: relative; + top: -12px; + padding-right: 18px; + } +} + +.columns--features { + background: rgb(20, 47, 78); + background: linear-gradient(28deg, rgba($white-ter, 0.1) 0%, rgba($white, .5) 50%, rgba($white-ter, 0.4) 100%); + border-top: 1px solid $grey-lighter; + border-left: 1px solid $grey-lighter; +} + +.column--feature { + border-bottom: 1px solid $grey-lighter; + border-right: 1px solid $grey-lighter; +} + + +.shake { + -webkit-animation-name: shake; + animation-name: shake; + -webkit-animation-duration: 8s; + animation-duration: 8s; + + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + animation-iteration-count: infinite; +} + +@-webkit-keyframes shake { + + 0%, + 10% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 1%, + 3%, + 5%, + 7%, + 9% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + + 2%, + 4%, + 6%, + 8% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } +} + +@keyframes shake { + + 0%, + 10% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 1%, + 3%, + 5%, + 7%, + 9% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + + 2%, + 4%, + 6%, + 8% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } } diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index e15321c..234f70e 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -8,22 +8,24 @@ import { Meta, Title } from '@angular/platform-browser' }) export class HomeComponent { isCopied = false + isDemoMenuOpen = false + isApiWindow = false constructor(meta: Meta, title: Title) { - title.setTitle('CASE - Develop a CRUD web app in 15 minutes 🚀') + title.setTitle('CASE - A complete backend without leaving your IDE 🚀') meta.addTag({ name: 'og:title', - content: 'CASE - Develop a CRUD web app in 15 minutes 🚀' + content: 'CASE - A complete backend without leaving your IDE 🚀' }) meta.addTag({ name: 'description', content: - 'CASE allows developers to install, develop and deploy a crud app in minutes' + 'CASE is a Typescript lightweight BaaS (Backend As A Service) requiring minimal coding.' }) meta.addTag({ name: 'og:description', content: - 'CASE allows developers to install, develop and deploy a crud app in minutes' + 'CASE is a Typescript lightweight BaaS (Backend As A Service) requiring minimal coding.' }) meta.addTag({ name: 'og:url', content: 'https://case.app' }) meta.addTag({ @@ -33,7 +35,7 @@ export class HomeComponent { meta.addTag({ name: 'keywords', content: - 'CASE, Typescript, Javascript,Admin panel, Dashboard, ERP, Business app, Business application, Business software, APIs, Business tool, CMS, Frameworkless, CRUD app, CLI, ERP, Custom web app' + 'BaaS, Typescript, Javascript, Admin panel, Dashboard, ERP, Business app, Business application, Business software, APIs, CRUD app, CLI, ERP, Custom web app' }) } diff --git a/src/app/partials/admin-panel-hero/admin-panel-hero.component.cy.ts b/src/app/partials/admin-panel-hero/admin-panel-hero.component.cy.ts new file mode 100644 index 0000000..d1a4c10 --- /dev/null +++ b/src/app/partials/admin-panel-hero/admin-panel-hero.component.cy.ts @@ -0,0 +1,7 @@ +import { AdminPanelHeroComponent } from './admin-panel-hero.component' + +describe('AdminPanelHeroComponent', () => { + it('should mount', () => { + cy.mount(AdminPanelHeroComponent) + }) +}) \ No newline at end of file diff --git a/src/app/partials/admin-panel-hero/admin-panel-hero.component.html b/src/app/partials/admin-panel-hero/admin-panel-hero.component.html new file mode 100644 index 0000000..dd7ea68 --- /dev/null +++ b/src/app/partials/admin-panel-hero/admin-panel-hero.component.html @@ -0,0 +1,830 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/partials/admin-panel-hero/admin-panel-hero.component.scss b/src/app/partials/admin-panel-hero/admin-panel-hero.component.scss new file mode 100644 index 0000000..7b6eca0 --- /dev/null +++ b/src/app/partials/admin-panel-hero/admin-panel-hero.component.scss @@ -0,0 +1,542 @@ +@import '../../../styles/variables/all'; +@import 'bulma/sass/utilities/mixins'; + +$width-emails: 219px !default; +$width-positions: 178px !default; + +$avatar-x-01: -404px !default; +$avatar-x-02: -224px !default; +$avatar-x-03: 0 !default; + +$button-x-01: -398px !default; +$button-x-02: -219px !default; +$button-x-03: 0 !default; + +$duration-scale: 6s !default; +$delay-scale: 4.63s !default; + +$duration-text: 0.3s !default; +$delay-text: #{$delay-scale + $duration-scale * 0.4} !default; +$animation-text: cubic-bezier(.09, .86, .52, 1.39) !default; + +$duration-link: $duration-text !default; +$delay-link: #{$delay-scale + $duration-scale * 0.79 + 1.12s} !default; +$animation-link: $animation-text !default; + +.svg-container { + width: 100%; + height: 100%; + + > svg { + width: 100%; + } +} + +svg { + width: 100%; + height: auto; + border: 2px solid $border-color; + border-radius: $radius-large; + background-image: url('/assets/images/user-list-v.svg'); + background-color: $white; + background-repeat: no-repeat; + background-size: contain; +} + + +#animation-wrapper { + transform: scale(1); + transition: all 0.3s ease-out; + backface-visibility: visible; + -webkit-animation-name: scale; + animation-name: scale; + -webkit-animation-duration: $duration-scale; + animation-duration: $duration-scale; + -webkit-animation-delay: $delay-scale; + animation-delay: $delay-scale; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +#col-emails { + transform: translateX(#{-1 * $width-emails}); + + transition: all 0.3s ease-in-out; + -webkit-animation-name: emails-displayed; + animation-name: emails-displayed; + -webkit-animation-duration: $duration-scale; + animation-duration: $duration-scale; + -webkit-animation-delay: $delay-scale; + animation-delay: $delay-scale; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + + .text-dark { + opacity: 0; + transform: translateY(5px); + transition: all 0.3s ease-in-out; + -webkit-animation-name: text-dark; + animation-name: text-dark; + -webkit-animation-duration: $duration-text; + animation-duration: $duration-text; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: $animation-text; + animation-timing-function: $animation-text; + + @for $i from 1 through 10 { + &-#{$i} { + -webkit-animation-delay: calc(#{$i * 0.02s} + #{$delay-text}); + animation-delay: calc(#{$i * 0.02s} + #{$delay-text}); + } + } + } +} + +#col-positions { + transform: translateX(#{-1 * $width-positions}); + opacity: 0; + transition: all 0.3s ease-in-out; + -webkit-animation-name: positions-displayed; + animation-name: positions-displayed; + -webkit-animation-duration: $duration-scale; + animation-duration: $duration-scale; + -webkit-animation-delay: $delay-scale; + animation-delay: $delay-scale; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + + .text-link { + opacity: 0; + transform: translateY(5px); + transition: all 0.3s ease-in-out; + -webkit-animation-name: text-link; + animation-name: text-link; + -webkit-animation-duration: $duration-link; + animation-duration: $duration-link; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: $animation-link; + animation-timing-function: $animation-link; + + @for $i from 1 through 10 { + &-#{$i} { + -webkit-animation-delay: calc(#{$i * 0.02s} + #{$delay-link}); + animation-delay: calc(#{$i * 0.02s} + #{$delay-link}); + } + } + } +} + +#col-ends { + transform: translateX(#{-1 * $width-positions - $width-emails}); + transition: all 0.3s ease-in-out; + -webkit-animation-name: col-ends-x; + animation-name: col-ends-x; + -webkit-animation-duration: $duration-scale; + animation-duration: $duration-scale; + -webkit-animation-delay: $delay-scale; + animation-delay: $delay-scale; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +#header-right-part { + transform: translateX(#{$avatar-x-01}); + transition: all 0.3s ease-in-out; + -webkit-animation-name: avatar-x; + animation-name: avatar-x; + -webkit-animation-duration: $duration-scale; + animation-duration: $duration-scale; + -webkit-animation-delay: $delay-scale; + animation-delay: $delay-scale; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +#button { + transform: translateX(#{$button-x-01}); + transition: all 0.3s ease-in-out; + -webkit-animation-name: button-x; + animation-name: button-x; + -webkit-animation-duration: $duration-scale; + animation-duration: $duration-scale; + -webkit-animation-delay: 4.63s; + animation-delay: 4.63s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + + +@-webkit-keyframes scale { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 40% { + -webkit-transform: scale(.8); + transform: scale(.8); + } + + 79% { + -webkit-transform: scale(.8); + transform: scale(.8); + } + + 100% { + -webkit-transform: scale(.6567); + transform: scale(.6567); + } +} + +@keyframes scale { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 40% { + -webkit-transform: scale(.8); + transform: scale(.8); + } + + 79% { + -webkit-transform: scale(.8); + transform: scale(.8); + } + + 100% { + -webkit-transform: scale(.6567); + transform: scale(.6567); + } +} + + + +@-webkit-keyframes emails-displayed { + 0% { + -webkit-transform: translateX(#{-1 * $width-emails}); + transform: translateX(#{-1 * $width-emails}); + + + } + + 40% { + -webkit-transform: translateX(0); + transform: translateX(0); + + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + + } +} + +@keyframes emails-displayed { + 0% { + -webkit-transform: translateX(#{-1 * $width-emails}); + + + transform: translateX(#{-1 * $width-emails}); + + } + + 40% { + -webkit-transform: translateX(0); + transform: translateX(0); + + } + + 100% { + -webkit-transform: translateX(0); + + transform: translateX(0); + } +} + + +@-webkit-keyframes positions-displayed { + 0% { + -webkit-transform: translateX(#{-1 * $width-positions}); + transform: translateX(#{-1 * $width-positions}); + opacity: 0; + + } + + 40% { + -webkit-transform: translateX(#{-1 * $width-positions}); + transform: translateX(#{-1 * $width-positions}); + opacity: 1; + } + + 79% { + -webkit-transform: translateX(#{-1 * $width-positions}); + transform: translateX(#{-1 * $width-positions}); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + + } +} + +@keyframes positions-displayed { + 0% { + -webkit-transform: translateX(#{-1 * $width-positions}); + transform: translateX(#{-1 * $width-positions}); + opacity: 0; + } + + 40% { + -webkit-transform: translateX(#{-1 * $width-positions}); + transform: translateX(#{-1 * $width-positions}); + opacity: 1; + } + + 79% { + -webkit-transform: translateX(#{-1 * $width-positions}); + transform: translateX(#{-1 * $width-positions}); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(0); + opacity: 1; + transform: translateX(0); + } +} + +@-webkit-keyframes col-ends-x { + 0% { + -webkit-transform: translateX(#{-1 * $width-positions - $width-emails}); + transform: translateX(#{-1 * $width-positions - $width-emails}); + } + + 40% { + -webkit-transform: translateX(#{-1 * $width-emails}); + transform: translateX(#{-1 * $width-emails}); + + } + + 79% { + -webkit-transform: translateX(#{-1 * $width-emails}); + transform: translateX(#{-1 * $width-emails}); + + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + + } +} + +@keyframes col-ends-x { + 0% { + -webkit-transform: translateX(#{-1 * $width-positions - $width-emails}); + transform: translateX(#{-1 * $width-positions - $width-emails}); + + } + + 40% { + -webkit-transform: translateX(#{-1 * $width-emails}); + transform: translateX(#{-1 * $width-emails}); + + } + + 79% { + -webkit-transform: translateX(#{-1 * $width-emails}); + transform: translateX(#{-1 * $width-emails}); + + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + + } +} + +@-webkit-keyframes button-x { + 0% { + -webkit-transform: translateX(#{$button-x-01}); + transform: translateX(#{$button-x-01}); + } + + 40% { + -webkit-transform: translateX(#{$button-x-02}); + transform: translateX(#{$button-x-02}); + } + + 79% { + -webkit-transform: translateX(#{$button-x-02}); + transform: translateX(#{$button-x-02}); + } + + 100% { + -webkit-transform: translateX(#{$button-x-03}); + transform: translateX(#{$button-x-03}); + + } +} + +@keyframes button-x { + 0% { + -webkit-transform: translateX(#{$button-x-01}); + transform: translateX(#{$button-x-01}); + + } + + 40% { + -webkit-transform: translateX(#{$button-x-02}); + transform: translateX(#{$button-x-02}); + } + + 79% { + -webkit-transform: translateX(#{$button-x-02}); + transform: translateX(#{$button-x-02}); + } + + 100% { + -webkit-transform: translateX(#{$button-x-03}); + transform: translateX(#{$button-x-03}); + + } +} + +@-webkit-keyframes avatar-x { + 0% { + -webkit-transform: translateX(#{$button-x-01}); + transform: translateX(#{$button-x-01}); + } + + 40% { + -webkit-transform: translateX(#{$button-x-02}); + transform: translateX(#{$button-x-02}); + } + + 79% { + -webkit-transform: translateX(#{$button-x-02}); + transform: translateX(#{$button-x-02}); + } + + 100% { + -webkit-transform: translateX(#{$button-x-03}); + transform: translateX(#{$button-x-03}); + } +} + +@keyframes avatar-x { + 0% { + -webkit-transform: translateX(#{$button-x-01}); + transform: translateX(#{$button-x-01}); + + } + + 40% { + -webkit-transform: translateX(#{$button-x-02}); + transform: translateX(#{$button-x-02}); + } + + 79% { + -webkit-transform: translateX(#{$button-x-02}); + transform: translateX(#{$button-x-02}); + } + + 100% { + -webkit-transform: translateX(#{$button-x-03}); + transform: translateX(#{$button-x-03}); + } +} + +@-webkit-keyframes text-dark { + 0% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + } +} + +@keyframes text-dark { + 0% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +@-webkit-keyframes text-link { + 0% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + } + + 79% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + + } + + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + } +} + +@keyframes text-link { + 0% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + } + + 79% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} diff --git a/src/app/partials/admin-panel-hero/admin-panel-hero.component.ts b/src/app/partials/admin-panel-hero/admin-panel-hero.component.ts new file mode 100644 index 0000000..6ca728b --- /dev/null +++ b/src/app/partials/admin-panel-hero/admin-panel-hero.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-admin-panel-hero', + templateUrl: './admin-panel-hero.component.html', + styleUrls: ['./admin-panel-hero.component.scss'] +}) +export class AdminPanelHeroComponent { + +} diff --git a/src/app/partials/api-hero/api-hero.component.cy.ts b/src/app/partials/api-hero/api-hero.component.cy.ts new file mode 100644 index 0000000..0dd6b7e --- /dev/null +++ b/src/app/partials/api-hero/api-hero.component.cy.ts @@ -0,0 +1,7 @@ +import { ApiHeroComponent } from './api-hero.component' + +describe('ApiHeroComponent', () => { + it('should mount', () => { + cy.mount(ApiHeroComponent) + }) +}) \ No newline at end of file diff --git a/src/app/partials/api-hero/api-hero.component.html b/src/app/partials/api-hero/api-hero.component.html new file mode 100644 index 0000000..10b6db2 --- /dev/null +++ b/src/app/partials/api-hero/api-hero.component.html @@ -0,0 +1,23 @@ +
+
+
+ GET + http://localhost:4000/api/dynamic/users/10 +
+
+ Status: + 200 OK +
+
+ 
+    {
+        "id":  10,
+        "name":  "Carla Levin",
+        "email":  "carla.levin@icloud.com",
+        "position": {
+            "id":  4,
+            "name":  "IT architect",
+        }
+    }
+
+
diff --git a/src/app/partials/api-hero/api-hero.component.scss b/src/app/partials/api-hero/api-hero.component.scss new file mode 100644 index 0000000..30ba458 --- /dev/null +++ b/src/app/partials/api-hero/api-hero.component.scss @@ -0,0 +1,97 @@ +@import '../../../styles/variables/all'; +@import 'bulma/sass/utilities/mixins'; + +pre { + border-bottom-left-radius: $radius-large; + border-bottom-right-radius: $radius-large; +} + +.api-display { + opacity: 0; + transform: translateY(5px); + height: 0; + -webkit-animation-name: api-display; + animation-name: api-display; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + + &--01 { + -webkit-animation-delay: 3.5s; + animation-delay: 3.5s; + } + + &--02 { + -webkit-animation-delay: 9s; + animation-delay: 9s; + } +} + + +@-webkit-keyframes api-display { + 0% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + display: none; + background-color: transparent; + } + + 60% { + background-color: rgba($success, .36); + display: inline; + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + background-color: transparent; + } +} + +@keyframes api-display { + 0% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + opacity: 0; + display: none; + background-color: transparent; + } + + 60% { + background-color: rgba($success, .36); + display: inline; + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + background-color: transparent; + } +} + + +.top-bar { + border-top-left-radius: $radius-large; + border-top-right-radius: $radius-large; + background-color: $dark; + padding: #{$column-gap / 2} $column-gap; + + > div:first-child { + flex-grow: 1 + } +} + +.endpoint-request { + border-radius: 100px; + border: 0.5px solid $grey-darker; + background-color: $black-ter; + color: $grey-lighter; + padding: 6px #{$column-gap / 1.5}; + width: 100%; +} diff --git a/src/app/partials/api-hero/api-hero.component.ts b/src/app/partials/api-hero/api-hero.component.ts new file mode 100644 index 0000000..d64147b --- /dev/null +++ b/src/app/partials/api-hero/api-hero.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-api-hero', + templateUrl: './api-hero.component.html', + styleUrls: ['./api-hero.component.scss'] +}) +export class ApiHeroComponent { + +} diff --git a/src/app/partials/header/header.component.html b/src/app/partials/header/header.component.html index 467d3b4..0ccb4ef 100644 --- a/src/app/partials/header/header.component.html +++ b/src/app/partials/header/header.component.html @@ -3,6 +3,7 @@
CASE logo + beta
-
- Star -
+ + +
Get started
+
+
+` diff --git a/src/app/partials/header/header.component.scss b/src/app/partials/header/header.component.scss index e69de29..cea4dd1 100644 --- a/src/app/partials/header/header.component.scss +++ b/src/app/partials/header/header.component.scss @@ -0,0 +1,4 @@ +.beta { + position: relative; + top: -7px; +} diff --git a/src/app/partials/header/header.component.ts b/src/app/partials/header/header.component.ts index 966dff7..b1c56d6 100644 --- a/src/app/partials/header/header.component.ts +++ b/src/app/partials/header/header.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core' +import { Component, ElementRef, HostListener, OnInit } from '@angular/core' import { NavigationEnd, Router } from '@angular/router' @Component({ @@ -8,8 +8,9 @@ import { NavigationEnd, Router } from '@angular/router' }) export class HeaderComponent implements OnInit { currentPath: string + isDemoMenuOpen = false - constructor(private router: Router) {} + constructor(private router: Router, private elementRef: ElementRef) {} ngOnInit(): void { this.router.events.subscribe((routeChanged) => { @@ -18,4 +19,11 @@ export class HeaderComponent implements OnInit { } }) } + + @HostListener('document:click', ['$event.target']) + clickOut(eventTarget: HTMLElement) { + if (!this.elementRef.nativeElement.contains(eventTarget)) { + this.isDemoMenuOpen = false + } + } } diff --git a/src/app/partials/live-code-hero/live-code-hero.component.html b/src/app/partials/live-code-hero/live-code-hero.component.html new file mode 100644 index 0000000..810e75c --- /dev/null +++ b/src/app/partials/live-code-hero/live-code-hero.component.html @@ -0,0 +1,64 @@ +
+
+
+
+ + + + + user.entity.ts + +
+
+
+ 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + 14 + 15 + 16 + 17 + 18 +
+
+ 
+export class User {
+  @Prop()
+  name: string
+
+
+ 
+  @Prop({
+    type: PropType.Email
+  })
+  email: string
+
+  @Prop({
+    type: PropType.Relation
+    options: {
+      entity: Position
+    }
+  })
+  position: Position
+
+ } +
+
+
+
diff --git a/src/app/partials/live-code-hero/live-code-hero.component.scss b/src/app/partials/live-code-hero/live-code-hero.component.scss new file mode 100644 index 0000000..ce3a91c --- /dev/null +++ b/src/app/partials/live-code-hero/live-code-hero.component.scss @@ -0,0 +1,82 @@ +@import '../../../styles/variables/all'; +@import 'bulma/sass/utilities/mixins'; + +.box { + --code-color: #b3bbc7; + --sidebar-width: 40px; + --sidebar-padding: 10px; + --header-padding: 10px 10px; + + &--code { + width: 100%; + background-color: $black-ter; + color: var(--code-color); + text-align: left; + + &__head { + padding: var(--header-padding); + } + + &__sidebar { + width: var(--sidebar-width); + padding-right: var(--sidebar-padding); + line-height: 1.589; + color: $grey; + } + + &__body { + pre { + color: var(--code-color); + } + } + + &__content { + padding-left: var(--sidebar-padding); + + } + } +} + +pre { + padding: 0; +} + +#typewriter { + font-family: $family-code; + + &:after { + content: '|'; + color: $white; + animation: blink 500ms linear infinite alternate; + } +} + +@-webkit-keyframes blink { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@-moz-keyframes blink { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes blink { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} diff --git a/src/app/partials/live-code-hero/live-code-hero.component.spec.ts b/src/app/partials/live-code-hero/live-code-hero.component.spec.ts new file mode 100644 index 0000000..2e01877 --- /dev/null +++ b/src/app/partials/live-code-hero/live-code-hero.component.spec.ts @@ -0,0 +1,7 @@ +import { LiveCodeHeroComponent } from './live-code-hero.component' + +describe('LiveCodeHeroComponent', () => { + it('should mount', () => { + cy.mount(LiveCodeHeroComponent) + }) +}) \ No newline at end of file diff --git a/src/app/partials/live-code-hero/live-code-hero.component.ts b/src/app/partials/live-code-hero/live-code-hero.component.ts new file mode 100644 index 0000000..85c50da --- /dev/null +++ b/src/app/partials/live-code-hero/live-code-hero.component.ts @@ -0,0 +1,78 @@ +import { Component, ElementRef, ViewChild } from '@angular/core' + +@Component({ + selector: 'app-live-code-hero', + templateUrl: './live-code-hero.component.html', + styleUrls: ['./live-code-hero.component.scss'] +}) +export class LiveCodeHeroComponent { + @ViewChild('typewriter', { static: true }) typewriter: ElementRef + + ngOnInit(): void { + var typer = this.setupTypewriter(this.typewriter.nativeElement) + + typer.type() + } + + setupTypewriter(t: any) { + var HTML = t.innerHTML + + t.innerHTML = '' + + var cursorPosition = 0, + tag: any = '', + writingTag = false, + tagOpen = false, + typeSpeed = 5, + tempTypeSpeed = 0 + + var type = function () { + if (writingTag === true) { + tag += HTML[cursorPosition] + } + + if (HTML[cursorPosition] === '<') { + tempTypeSpeed = 0 + if (tagOpen) { + tagOpen = false + writingTag = true + } else { + tag = '' + tagOpen = true + writingTag = true + tag += HTML[cursorPosition] + } + } + if (!writingTag && tagOpen) { + tag.innerHTML += HTML[cursorPosition] + } + if (!writingTag && !tagOpen) { + if (HTML[cursorPosition] === ' ') { + tempTypeSpeed = 0 + } else { + tempTypeSpeed = Math.random() * typeSpeed + 20 + } + t.innerHTML += HTML[cursorPosition] + } + if (writingTag === true && HTML[cursorPosition] === '>') { + tempTypeSpeed = Math.random() * typeSpeed + 20 + writingTag = false + if (tagOpen) { + var newSpan = document.createElement('span') + t.appendChild(newSpan) + newSpan.innerHTML = tag + tag = newSpan.firstChild + } + } + + cursorPosition += 1 + if (cursorPosition < HTML.length - 1) { + setTimeout(type, tempTypeSpeed) + } + } + + return { + type: type + } + } +} diff --git a/src/app/partials/sdk-features/sdk-features.component.cy.ts b/src/app/partials/sdk-features/sdk-features.component.cy.ts new file mode 100644 index 0000000..ef53b8a --- /dev/null +++ b/src/app/partials/sdk-features/sdk-features.component.cy.ts @@ -0,0 +1,7 @@ +import { SdkFeaturesComponent } from './sdk-features.component' + +describe('SdkFeaturesComponent', () => { + it('should mount', () => { + cy.mount(SdkFeaturesComponent) + }) +}) \ No newline at end of file diff --git a/src/app/partials/sdk-features/sdk-features.component.html b/src/app/partials/sdk-features/sdk-features.component.html new file mode 100644 index 0000000..558d3b7 --- /dev/null +++ b/src/app/partials/sdk-features/sdk-features.component.html @@ -0,0 +1,140 @@ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ Code for fetching data from the API +
+
+ Code for filtering data from the API +
+
+ Code for manipulating data from the API: create, update, delete +
+
+ Code for file and image upload +
+
+ Code for auth: sign up, login and logout +
+
+
+
diff --git a/src/app/partials/sdk-features/sdk-features.component.scss b/src/app/partials/sdk-features/sdk-features.component.scss new file mode 100644 index 0000000..be30a32 --- /dev/null +++ b/src/app/partials/sdk-features/sdk-features.component.scss @@ -0,0 +1,8 @@ +@import '../../../styles/variables/all'; +@import 'bulma/sass/utilities/mixins'; + +.tab-content { + @include fullhd { + min-height: 456.27px; + } +} diff --git a/src/app/partials/sdk-features/sdk-features.component.ts b/src/app/partials/sdk-features/sdk-features.component.ts new file mode 100644 index 0000000..1e0facd --- /dev/null +++ b/src/app/partials/sdk-features/sdk-features.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-sdk-features', + templateUrl: './sdk-features.component.html', + styleUrls: ['./sdk-features.component.scss'] +}) +export class SdkFeaturesComponent { + selectedTab = 'fetch' +} diff --git a/src/assets/images/Pages/user-list-v 1.svg b/src/assets/images/Pages/user-list-v 1.svg new file mode 100644 index 0000000..d11c1a6 --- /dev/null +++ b/src/assets/images/Pages/user-list-v 1.svg @@ -0,0 +1,670 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/admin-panel.mov b/src/assets/images/admin-panel.mov new file mode 100644 index 0000000..3d59659 Binary files /dev/null and b/src/assets/images/admin-panel.mov differ diff --git a/src/assets/images/admin-panel.mp4 b/src/assets/images/admin-panel.mp4 new file mode 100644 index 0000000..cbcb7ab Binary files /dev/null and b/src/assets/images/admin-panel.mp4 differ diff --git a/src/assets/images/admin-panel.webm b/src/assets/images/admin-panel.webm new file mode 100644 index 0000000..b988dce Binary files /dev/null and b/src/assets/images/admin-panel.webm differ diff --git a/src/assets/images/angular.svg b/src/assets/images/angular.svg index 367953e..46f557f 100644 --- a/src/assets/images/angular.svg +++ b/src/assets/images/angular.svg @@ -1,4 +1,5 @@ - - - + + + + diff --git a/src/assets/images/animanim.svg b/src/assets/images/animanim.svg new file mode 100644 index 0000000..7822538 --- /dev/null +++ b/src/assets/images/animanim.svg @@ -0,0 +1,192 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/auth.svg b/src/assets/images/auth.svg new file mode 100644 index 0000000..356f1d4 --- /dev/null +++ b/src/assets/images/auth.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/case-sdk.svg b/src/assets/images/case-sdk.svg new file mode 100644 index 0000000..059ea24 --- /dev/null +++ b/src/assets/images/case-sdk.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/images/checkmark.svg b/src/assets/images/checkmark.svg new file mode 100644 index 0000000..dbfa2e1 --- /dev/null +++ b/src/assets/images/checkmark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/entity.svg b/src/assets/images/entity.svg new file mode 100644 index 0000000..a9f2309 --- /dev/null +++ b/src/assets/images/entity.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/images/fetch.svg b/src/assets/images/fetch.svg new file mode 100644 index 0000000..0db53d7 --- /dev/null +++ b/src/assets/images/fetch.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/images/filter.svg b/src/assets/images/filter.svg new file mode 100644 index 0000000..1eaafbd --- /dev/null +++ b/src/assets/images/filter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/hosting-services.svg b/src/assets/images/hosting-services.svg new file mode 100644 index 0000000..851276e --- /dev/null +++ b/src/assets/images/hosting-services.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/install.svg b/src/assets/images/install.svg new file mode 100644 index 0000000..3c266b1 --- /dev/null +++ b/src/assets/images/install.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/list-default.svg b/src/assets/images/list-default.svg new file mode 100644 index 0000000..e11e79b --- /dev/null +++ b/src/assets/images/list-default.svg @@ -0,0 +1,559 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/list-te.svg b/src/assets/images/list-te.svg new file mode 100644 index 0000000..1932a37 --- /dev/null +++ b/src/assets/images/list-te.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/assets/images/manipulate.svg b/src/assets/images/manipulate.svg new file mode 100644 index 0000000..00cff39 --- /dev/null +++ b/src/assets/images/manipulate.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/nextjs.svg b/src/assets/images/nextjs.svg new file mode 100644 index 0000000..15cffa0 --- /dev/null +++ b/src/assets/images/nextjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/nipple.png b/src/assets/images/nipple.png new file mode 100644 index 0000000..6312838 Binary files /dev/null and b/src/assets/images/nipple.png differ diff --git a/src/assets/images/nuxt.svg b/src/assets/images/nuxt.svg new file mode 100644 index 0000000..0fd2308 --- /dev/null +++ b/src/assets/images/nuxt.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/pisa.png b/src/assets/images/pisa.png new file mode 100644 index 0000000..d950505 Binary files /dev/null and b/src/assets/images/pisa.png differ diff --git a/src/assets/images/react.svg b/src/assets/images/react.svg new file mode 100644 index 0000000..b26ee1e --- /dev/null +++ b/src/assets/images/react.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/status.svg b/src/assets/images/status.svg new file mode 100644 index 0000000..ffd5b22 --- /dev/null +++ b/src/assets/images/status.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/images/svelte.svg b/src/assets/images/svelte.svg new file mode 100644 index 0000000..b19c037 --- /dev/null +++ b/src/assets/images/svelte.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/test-pilote.svg b/src/assets/images/test-pilote.svg new file mode 100644 index 0000000..5971463 --- /dev/null +++ b/src/assets/images/test-pilote.svg @@ -0,0 +1,1057 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/trinity.png b/src/assets/images/trinity.png new file mode 100644 index 0000000..ae49c07 Binary files /dev/null and b/src/assets/images/trinity.png differ diff --git a/src/assets/images/trinity.svg b/src/assets/images/trinity.svg new file mode 100644 index 0000000..e0c5965 --- /dev/null +++ b/src/assets/images/trinity.svg @@ -0,0 +1,267 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/typescript.svg b/src/assets/images/typescript.svg new file mode 100644 index 0000000..e24e9a8 --- /dev/null +++ b/src/assets/images/typescript.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/upload.svg b/src/assets/images/upload.svg new file mode 100644 index 0000000..38fe677 --- /dev/null +++ b/src/assets/images/upload.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/user-list-v.svg b/src/assets/images/user-list-v.svg new file mode 100644 index 0000000..e92c80f --- /dev/null +++ b/src/assets/images/user-list-v.svg @@ -0,0 +1,828 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/vue.svg b/src/assets/images/vue.svg new file mode 100644 index 0000000..f701474 --- /dev/null +++ b/src/assets/images/vue.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/styles/components/_flag.scss b/src/styles/components/_flag.scss deleted file mode 100644 index 6d58d0a..0000000 --- a/src/styles/components/_flag.scss +++ /dev/null @@ -1,8 +0,0 @@ -.flag { - &.is-small { - width: 24px; - } - &:not(.is-small) { - width: 72px; - } -} diff --git a/src/styles/components/_layout.scss b/src/styles/components/_layout.scss index f8793bb..16a096b 100644 --- a/src/styles/components/_layout.scss +++ b/src/styles/components/_layout.scss @@ -1,7 +1,7 @@ - *:focus { outline: none; } + html { overflow-x: hidden; overflow-y: scroll; @@ -15,6 +15,7 @@ html { @include touch { font-size: $body-size-touch; } + @include mobile { font-size: $body-size-mobile; } @@ -49,6 +50,7 @@ body { padding-right: 0; } } + aside { border-right: 1px solid $border-color; } @@ -56,13 +58,15 @@ aside { main { min-height: calc(100vh + #{$gap} - 163.19px - #{$navbar-height}); padding-bottom: $gap; + @include touch { - --top-header-height : 28.61px; + --top-header-height: 28.61px; min-height: calc(100vh + #{$gap} - 163.19px - #{$navbar-height} - var(--top-header-height)); margin-top: calc($column-gap + var(--top-header-height)); } + @include mobile { - --top-header-height : 21.83px; + --top-header-height: 21.83px; } } @@ -83,3 +87,7 @@ main { width: 100%; height: 100%; } + +.has-shadow-success { + box-shadow: 0px 15px 73px 43px #10b69210, 0px 7px 41px 4px #a5e64315; +} diff --git a/src/styles/components/_multiselect.scss b/src/styles/components/_multiselect.scss index 332676d..8d4c783 100644 --- a/src/styles/components/_multiselect.scss +++ b/src/styles/components/_multiselect.scss @@ -5,9 +5,11 @@ @include mobile { position: relative; } + @include tablet { position: absolute; } + height: auto; min-width: 100%; z-index: 6; @@ -57,10 +59,10 @@ @each $name, $pair in $colors { $color: nth($pair, 1); + &.is-#{$name} { border-color: $color; - &:focus, - &.is-focused, + &:active, &.is-active { box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25); @@ -71,9 +73,11 @@ &.is-small { font-size: $size-small; } + &.is-medium { font-size: $size-medium; } + &.is-large { font-size: $size-large; } diff --git a/src/styles/components/_tabs.scss b/src/styles/components/_tabs.scss index 788196d..2de7810 100644 --- a/src/styles/components/_tabs.scss +++ b/src/styles/components/_tabs.scss @@ -5,26 +5,87 @@ display: block; } } + tr { @each $name, $pair in $colors { $color: nth($pair, 1); + &.is-#{$name} td { background-color: rgba($color, 0.04); } } } -.tabs li.is-active { - background-color: $light; - a { - position: relative; - background-color: rgba($tabs-link-active-color, 0.12); +.tabs { + li { + a { + background-color: $tabs-toggle-link-background-color; + } + + &.is-active { + a { + position: relative; + background-color: rgba($tabs-link-active-color, 0.12); + } + } + } + + &.is-vertical { + ul { + gap: 1px + } + + li { + width: 100%; + + a { + justify-content: space-between; + border-radius: $radius-large; + } + + } + } + + &.is-boxed { + + ul { + border-bottom: $tabs-border-bottom-width; + gap: 2px; + padding-bottom: 2px; + } + + li { + a { + background-color: $tabs-boxed-link-background-color; + border-width: $tabs-boxed-link-border-width; + + + } + + &:focus { + a { + background-color: $grey-lighter; + } + } + + &.is-active { + a { + background-color: $tabs-boxed-link-active-color; + + &:hover { + background-color: $tabs-boxed-link-hover-background-color; + border-bottom-color: $tabs-boxed-link-hover-border-bottom-color; + } + } + } + } } } @each $name, $pair in $colors { $color: nth($pair, 1); + .tabs.is-#{$name} { li { &.is-active { diff --git a/src/styles/components/_tags.scss b/src/styles/components/_tags.scss new file mode 100644 index 0000000..88c316d --- /dev/null +++ b/src/styles/components/_tags.scss @@ -0,0 +1,7 @@ +.tag { + line-height: 1px !important; + + &.is-large { + padding-top: 3px; + } +} diff --git a/src/styles/components/_type.scss b/src/styles/components/_type.scss index ac803fe..50d9797 100644 --- a/src/styles/components/_type.scss +++ b/src/styles/components/_type.scss @@ -1,3 +1,18 @@ +::selection { + background-color: $primary; + color: $link-light; +} + +::-moz-selection { + background-color: $primary; + color: $link-light; +} + +::-webkit-selection { + background-color: $primary; + color: $link-light; +} + .content.is-small { letter-spacing: 0.4px; } @@ -5,8 +20,10 @@ th { font-weight: $weight-bold; } + table { font-size: $size-7; + @include fullhd { font-size: $size-6; } @@ -20,67 +37,72 @@ table { } - h1, - .content h1, - .title.is-1, - .h1 { - font-size: $size-1; - @include touch { - font-size: $size-1-touch; - } - } +h1, +.content h1, +.title.is-1, +.h1 { + font-size: $size-1; + @include touch { + font-size: $size-1-touch; + } +} - h2, - .content h2, - .title.is-2, - .h2 { - font-size: $size-2; - @include touch { - font-size: $size-2-touch; - } - } +h2, +.content h2, +.title.is-2, +.h2 { + font-size: $size-2; - h3, - .content h3, - .title.is-3, - .h3 { - font-size: $size-3; - @include touch { - font-size: $size-3-touch; - } - } + @include touch { + font-size: $size-2-touch; + } +} - h4, - .content h4, - .title.is-4, - .h4 { - font-size: $size-4; - @include touch { - font-size: $size-4-touch; - } - } +h3, +.content h3, +.title.is-3, +.h3 { + font-size: $size-3; + @include touch { + font-size: $size-3-touch; + } +} - h5, - .content h5, - .title.is-5, - .h5 { - font-size: $size-5; - @include touch { - font-size: $size-5-touch; - } - } +h4, +.content h4, +.title.is-4, +.h4 { + font-size: $size-4; + + @include touch { + font-size: $size-4-touch; + } +} - h6, - .content h6, - .title.is-6, - .h6 { - font-size: $size-6; - } + +h5, +.content h5, +.title.is-5, +.h5 { + font-size: $size-5; + + @include touch { + font-size: $size-5-touch; + } +} + + +h6, +.content h6, +.title.is-6, +.h6 { + font-size: $size-6; +} .title--small { @@ -96,7 +118,7 @@ table { .has-text-weight-black { font-weight: 900; } - + // Badges .badge { @@ -111,14 +133,17 @@ table { @include touch { font-size: 0.825em; } + &.is-info { background-color: $info-light; color: $link; } + &.is-success { background-color: $success-light; color: $success; } + &.is-link { background-color: $link-light; color: $link; @@ -149,6 +174,7 @@ hr { a { cursor: pointer; + .content & { color: $primary; @@ -156,11 +182,11 @@ a { color: $primary-dark; } } - + .content & { text-decoration: underline; } - + &.no-deco { color: inherit; text-decoration: none; @@ -173,12 +199,14 @@ a { &.become-link { color: $grey; + &:hover, &:focus, &:active { color: $link !important; } } + &[disabled] { cursor: no-drop; pointer-events: none; @@ -195,9 +223,11 @@ a { .is-italic { font-style: italic; } + .no-transfo { text-transform: none; } + .is-regular { font-weight: $weight-normal; } @@ -211,6 +241,7 @@ a { .coma-list { display: inline-block; + + .coma-list { &:before { content: ','; @@ -243,19 +274,24 @@ a { } } +.is-highlighted { + font-weight: 600; + background-color: $success; + padding: 0 0.3em; + border-radius: $radius-large; +} -pre { - border-width: 1px; - border-style: solid; - border-image: $border-image; - font-family: 'Fira Code', monospace; - color: $white-ter; - max-width: fit-content; - @include tablet { - min-width: calc(80ch + #{$gap * 2}); - } - - > * { - font-family: 'Fira Code', monospace; + + + + +.content ul.checklist, +ul.checklist { + margin-left: 0; + + li { + list-style-type: none; + background: url('./../../assets/images/checkmark.svg') no-repeat left 8px; + padding: 0px 0 3px 24px; } } diff --git a/src/styles/main.scss b/src/styles/main.scss index d3d90c3..f46f268 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -15,7 +15,6 @@ @import './components/breadcrumbs'; @import './components/cards'; @import './components/dropdown'; -@import './components/flag'; @import './components/forms'; @import './components/generic'; @import './components/grid'; @@ -33,6 +32,7 @@ @import './components/spinner'; @import './components/table'; @import './components/tabs'; +@import './components/tags'; @import './components/type'; // Layouts diff --git a/src/styles/variables/_buttons.scss b/src/styles/variables/_buttons.scss index 5d8d93d..99e8024 100644 --- a/src/styles/variables/_buttons.scss +++ b/src/styles/variables/_buttons.scss @@ -1,8 +1,8 @@ // Buttons $control-border-width: 1px !default; $button-hover-color: $link !default; -$button-padding-horizontal: 2.6em !default; -$radius: 0px !default; +$button-padding-horizontal: 1.5em !default; +$radius: 5px !default; $control-height: 2.75em !default; $control-inputs-height: 2.75em !default; $control-shadow-secondary: 0 6px 16px 0 rgba($primary, 0.2) !default; diff --git a/src/styles/variables/_colors.scss b/src/styles/variables/_colors.scss index a630b11..aee6b15 100644 --- a/src/styles/variables/_colors.scss +++ b/src/styles/variables/_colors.scss @@ -1,8 +1,3 @@ - - - - - $black: #161616 !default; $darkness: $black !default; // Some titles $black-bis: #1c1c1c !default; @@ -23,9 +18,11 @@ $success: #23f0c3 !default; $link: #c6ff73 !default; $info: #549cde !default; $primary: #8448f8 !default; +$pink: #cf78ff !default; $danger: #ff006e !default; $sun: #fb5607 !default; $warning: #ffbe0b !default; +$electric: #005DFF !default; $success-light: #e9fef9 !default; $link-light: #edf4e8 !default; @@ -52,14 +49,17 @@ $link-alpha10: rgba($link, 0.1) !default; $link-alpha07: rgba($link, 0.07) !default; $link-alpha03: rgba($link, 0.03) !default; -$color-stroke-gradient: linear-gradient(to bottom, #23f0c3 0%,#8448f8 100%); +$color-stroke-gradient: linear-gradient(to bottom, #23f0c3 0%, #8448f8 100%); +$color-gradient-purple: linear-gradient(to right, #8448f8 0%, #5065FF 100%); @mixin effect-style-website-shadow-1() { box-shadow: 0px 3px 16px #102326; } + @mixin effect-style-website-shadow-2() { box-shadow: 0px 1px 60px #5065ff; } + @mixin effect-style-website-shadow-3() { box-shadow: 0px 3px 44px #000000; } diff --git a/src/styles/variables/_content.scss b/src/styles/variables/_content.scss index b921abc..602783e 100644 --- a/src/styles/variables/_content.scss +++ b/src/styles/variables/_content.scss @@ -4,3 +4,4 @@ $content-table-head-cell-border-width: 0 0 1px !default; $content-table-foot-cell-border-width: 1px 0 0 !default; $content-table-head-cell-color: $dark !default; $content-heading-weight: 700 !default; +$content-heading-color: $black !default; diff --git a/src/styles/variables/_derived-variables.scss b/src/styles/variables/_derived-variables.scss index 5bda9c8..599c889 100644 --- a/src/styles/variables/_derived-variables.scss +++ b/src/styles/variables/_derived-variables.scss @@ -1,63 +1,53 @@ $custom-colors: ( - 'link': ( - $link, + 'link': ($link, $black, $link, - $black - ), - 'link-light': ( - $link-light, + $black ), + 'link-light': ($link-light, $link, $link-light, - $link - ), - 'primary-light': ( - $primary-light, + $link ), + 'primary-light': ($primary-light, $primary, $white, - $primary - ), - 'warning-light': ( - $warning-light, + $primary ), + 'warning-light': ($warning-light, $warning, $white, - $warning - ), - 'danger-light': ( - $danger-light, + $warning ), + 'danger-light': ($danger-light, $danger, $white, - $danger - ), - 'success-light': ( - $success-light, + $danger ), + 'success-light': ($success-light, $success, $white, - $success - ), - 'info-light': ( - $info-light, + $success ), + 'info-light': ($info-light, $info, $white, - $info - ), - 'sun-light': ( - $sun-light, + $info ), + 'sun-light': ($sun-light, $sun, $white, - $sun - ), + $sun ), - 'sun': ( - $sun, + 'sun': ($sun, $white, $white, - $sun - ), - 'white-ter': ( - $white-ter, + $sun ), + 'white-ter': ($white-ter, + $black, + $black, + $white-ter ), + + 'electric': ($electric, + $white, + $white, + $electric ), + + 'pink': ($pink, $black, $black, - $white-ter - ), + $pink ) ); diff --git a/src/styles/variables/_dropdown.scss b/src/styles/variables/_dropdown.scss index f32935b..b28fcc8 100644 --- a/src/styles/variables/_dropdown.scss +++ b/src/styles/variables/_dropdown.scss @@ -1,11 +1,10 @@ -$dropdown-menu-min-width: 15rem !default; $dropdown-item-hover-color: $link !default; -$dropdown-item-hover-background-color: $white !default; +$dropdown-menu-min-width: 15rem !default; +$dropdown-item-hover-background-color: $danger-light !default; $dropdown-item-active-color: $link !default; $dropdown-item-active-background-color: $white !default; $dropdown-divider-background-color: $border-color !default; - // Custom style $dropdown-menu-large-min-width: 28rem !default; $dropdown-max-height: 420px !default diff --git a/src/styles/variables/_generic.scss b/src/styles/variables/_generic.scss index bd1f1f5..cb8c532 100644 --- a/src/styles/variables/_generic.scss +++ b/src/styles/variables/_generic.scss @@ -1,11 +1,11 @@ // generic -$shadow:0px 100px 80px rgba(#000000, 0.07), -0px 41.7776px 33.4221px rgba(#000000, 0.0503198), -0px 22.3363px 17.869px rgba(#000000, 0.0417275), -0px 12.5216px 10.0172px rgba(#000000, 0.035), -0px 6.6501px 5.32008px rgba(#000000, 0.0282725), -0px 2.76726px 2.21381px rgba(#000000, 0.0196802) !default; +$shadow: 0px 100px 80px rgba(#000000, 0.07), + 0px 41.7776px 33.4221px rgba(#000000, 0.0503198), + 0px 22.3363px 17.869px rgba(#000000, 0.0417275), + 0px 12.5216px 10.0172px rgba(#000000, 0.035), + 0px 6.6501px 5.32008px rgba(#000000, 0.0282725), + 0px 2.76726px 2.21381px rgba(#000000, 0.0196802) !default; $border-color: $border !default; $radius-large: 4px !default; @@ -15,9 +15,8 @@ $body-size: 10px !default; $body-size-touch: 10.22px !default; $body-size-mobile: 7.8px !default; -$body-background-color: $white !default; -$body-color: $black !default; - +$body-background-color: $white-bis !default; +$body-color: $grey-darker !default; $footer-background-color: transparent !default; $hr-background-color: $grey-light !default; @@ -28,8 +27,8 @@ $body-line-height: 1.8 !default; $footer-height: 76px !default; $footer-padding: 3rem 1.5rem !default; -$pre-background: $dark !default; -$pre-padding: $column-gap $gap !default; +$pre-background: $black-ter !default; +$pre-padding: $column-gap $gap !default; // Custom variables $lines-offset: $gap !default; diff --git a/src/styles/variables/_tabs.scss b/src/styles/variables/_tabs.scss index ad0bbd8..65ae4e5 100644 --- a/src/styles/variables/_tabs.scss +++ b/src/styles/variables/_tabs.scss @@ -1,3 +1,28 @@ $tabs-border-bottom-color: $white-bis !default; -$tabs-link-padding: 1.25em 1.25em !default; +$tabs-link-padding: 0.25em 1.25em 0.1em !default; $tabs-border-bottom-width: 2px !default; + +$tabs-toggle-link-active-background-color: $grey-darker !default; +$tabs-toggle-link-active-border-color: rgba($grey-light, .2) !default; +$tabs-toggle-link-active-color: $white !default; + +$tabs-toggle-link-border-color: rgba($grey-light, .2) !default; +$tabs-toggle-link-background-color: $dark !default; + +$tabs-toggle-link-hover-background-color: $grey-darker !default; +$tabs-toggle-link-hover-border-color: rgba($grey-light, .2) !default; +$tabs-toggle-link-background-color: $dark !default; + +$tabs-boxed-link-active-background-color: $light !default; +$tabs-boxed-link-active-border-color: $light !default; +$tabs-boxed-link-active-color: $light !default; + +$tabs-boxed-link-border-color: $white !default; +$tabs-boxed-link-background-color: $white !default; + +$tabs-boxed-link-hover-background-color: $light !default; +$tabs-boxed-link-hover-border-color: $light !default; +$tabs-boxed-link-background-color: $dark !default; + +$tabs-boxed-link-border-width: 0 !default; +$tabs-border-bottom-width: 0 !default; diff --git a/src/styles/variables/_type.scss b/src/styles/variables/_type.scss index 46c1e95..90927ed 100644 --- a/src/styles/variables/_type.scss +++ b/src/styles/variables/_type.scss @@ -49,7 +49,6 @@ $strong-color: inherit !default; // Body $body-font-size: $size-6 !default; -$body-color: $darkness !default; // Custom variables $letter-spacing: 0.4px !default;