|
|
@ -1,24 +1,47 @@
|
|
|
|
|
|
|
|
// Copyright 2020 The Flutter team. All rights reserved.
|
|
|
|
|
|
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
|
|
|
|
|
|
// found in the LICENSE file
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Flutter brand colors
|
|
|
|
|
|
|
|
$flutter-grey-900-color: #202124;
|
|
|
|
|
|
|
|
$flutter-grey-800-color: #3C4043;
|
|
|
|
|
|
|
|
$flutter-grey-700-color: #5F6368;
|
|
|
|
|
|
|
|
$flutter-grey-500-color: #5F6368;
|
|
|
|
|
|
|
|
$flutter-grey-300-color: #DADCE0;
|
|
|
|
|
|
|
|
$flutter-blue-700-color: #02569B;
|
|
|
|
|
|
|
|
$flutter-blue-600-color: #0175C2;
|
|
|
|
|
|
|
|
$flutter-secondary-400-color: #13B9FD;
|
|
|
|
|
|
|
|
$flutter-yellow: #FFC108;
|
|
|
|
|
|
|
|
|
|
|
|
// Material Design Web theme colors. Must be imported before importing
|
|
|
|
// Material Design Web theme colors. Must be imported before importing
|
|
|
|
// material-components-web.scss.
|
|
|
|
// material-components-web.scss.
|
|
|
|
$mdc-theme-primary: #0175C2;
|
|
|
|
$mdc-theme-primary: $flutter-grey-500-color;
|
|
|
|
$mdc-theme-secondary: #FFC108;
|
|
|
|
$mdc-theme-secondary: $flutter-blue-700-color;
|
|
|
|
//$mdc-theme-background: $playground-background-color;
|
|
|
|
|
|
|
|
//$mdc-theme-surface: $playground-background-color;
|
|
|
|
|
|
|
|
//$mdc-theme-error: $dark-red;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@import 'package:mdc_web/material-components-web';
|
|
|
|
@import 'package:mdc_web/material-components-web';
|
|
|
|
|
|
|
|
|
|
|
|
$dark: #202124;
|
|
|
|
// App colors
|
|
|
|
|
|
|
|
$navbar-background-color: #3D4043;
|
|
|
|
|
|
|
|
$dark-text-color: #202124;
|
|
|
|
|
|
|
|
$light-text-color: #3D4043;
|
|
|
|
$background-color: #F8F9FA;
|
|
|
|
$background-color: #F8F9FA;
|
|
|
|
$grey: var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));
|
|
|
|
$text-color: $dark-text-color;
|
|
|
|
|
|
|
|
$card-border-color: #DBDCE0;
|
|
|
|
|
|
|
|
$type-label-border-color: #82868A;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Sizes
|
|
|
|
$font-size-small: 0.875rem;
|
|
|
|
$font-size-small: 0.875rem;
|
|
|
|
$card-width: 300px;
|
|
|
|
$card-width: 300px;
|
|
|
|
$mobile-width: 960px;
|
|
|
|
$mobile-width: 960px;
|
|
|
|
$container-width: 960px;
|
|
|
|
$container-width: 960px;
|
|
|
|
$text-color: $dark;
|
|
|
|
|
|
|
|
$footer-height: 96px;
|
|
|
|
$footer-height: 96px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Fonts
|
|
|
|
$font: Roboto, sans-serif;
|
|
|
|
$font: Roboto, sans-serif;
|
|
|
|
|
|
|
|
$title-font: Google Sans Display, Roboto, sans-serif;
|
|
|
|
|
|
|
|
$subtitle-font: Google Sans, Roboto, sans-serif;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// CSS Reset
|
|
|
|
html, body {
|
|
|
|
html, body {
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
@ -29,16 +52,9 @@ body {
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
|
|
|
>.container {
|
|
|
|
|
|
|
|
padding-bottom: $footer-height;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
|
|
color: $text-color;
|
|
|
|
color: $text-color;
|
|
|
|
font-family: $font;
|
|
|
|
font-family: $title-font;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -81,13 +97,22 @@ a {
|
|
|
|
display: none;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Custom Styles
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
|
|
|
>.container {
|
|
|
|
|
|
|
|
padding-bottom: $footer-height;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.navbar {
|
|
|
|
.navbar {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
background-color: $dark;
|
|
|
|
background-color: $navbar-background-color;
|
|
|
|
color: white;
|
|
|
|
color: white;
|
|
|
|
padding: 16px 125px 16px 125px;
|
|
|
|
padding: 16px 125px 16px 125px;
|
|
|
|
margin-bottom: 48px;
|
|
|
|
margin-bottom: 48px;
|
|
|
@ -109,25 +134,27 @@ a {
|
|
|
|
flex-direction: row;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
> * {
|
|
|
|
> * {
|
|
|
|
margin: 0 8px 0 8px;
|
|
|
|
margin: 0 8px 3px 8px; // adjusted vertically to align flutter logo text with "Samples" text
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-items {
|
|
|
|
.nav-items {
|
|
|
|
|
|
|
|
font-family: 'Google Sans', 'Roboto', sans-serif;
|
|
|
|
@media screen and (max-width: $mobile-width) {
|
|
|
|
@media screen and (max-width: $mobile-width) {
|
|
|
|
display: none;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
span.title {
|
|
|
|
span.title {
|
|
|
|
font-size: 28px;
|
|
|
|
font-family: 'Google Sans Display', 'Roboto', sans-serif;
|
|
|
|
font-weight: 300;
|
|
|
|
font-size: 26px;
|
|
|
|
|
|
|
|
letter-spacing: 0.5px;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
color: #5DE0FD;
|
|
|
|
color: #13B9FD;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
img {
|
|
|
|
height: 36px;
|
|
|
|
height: 32px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
a {
|
|
|
@ -145,7 +172,7 @@ a {
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
background-color: $dark;
|
|
|
|
background-color: $dark-text-color;
|
|
|
|
color: white;
|
|
|
|
color: white;
|
|
|
|
//padding: 36px 125px 36px 125px;
|
|
|
|
//padding: 36px 125px 36px 125px;
|
|
|
|
height: $footer-height;
|
|
|
|
height: $footer-height;
|
|
|
@ -186,6 +213,7 @@ a {
|
|
|
|
flex-direction: row;
|
|
|
|
flex-direction: row;
|
|
|
|
height: 360px;
|
|
|
|
height: 360px;
|
|
|
|
overflow-x: scroll;
|
|
|
|
overflow-x: scroll;
|
|
|
|
|
|
|
|
margin: 48px 0 48px 0;
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: $mobile-width) {
|
|
|
|
@media screen and (max-width: $mobile-width) {
|
|
|
|
height: 240px;
|
|
|
|
height: 240px;
|
|
|
@ -225,6 +253,20 @@ a {
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mdc-chip {
|
|
|
|
|
|
|
|
@include mdc-chip-fill-color(transparent);
|
|
|
|
|
|
|
|
@include mdc-chip-ink-color($flutter-grey-500-color);
|
|
|
|
|
|
|
|
@include mdc-chip-selected-ink-color($flutter-grey-500-color);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mdc-chip--selected {
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
|
|
@include mdc-chip-fill-color(transparent);
|
|
|
|
|
|
|
|
@include mdc-chip-ink-color($flutter-grey-500-color);
|
|
|
|
|
|
|
|
@include mdc-chip-selected-ink-color($flutter-grey-500-color);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mdc-card__media {
|
|
|
|
.mdc-card__media {
|
|
|
|
background-position: top;
|
|
|
|
background-position: top;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -236,9 +278,10 @@ a {
|
|
|
|
#search-bar {
|
|
|
|
#search-bar {
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
@include mdc-text-field-fill-color($background-color);
|
|
|
|
@include mdc-text-field-fill-color($background-color);
|
|
|
|
|
|
|
|
@include mdc-text-field-line-ripple-color($flutter-blue-600-color);
|
|
|
|
|
|
|
|
|
|
|
|
@include mdc-states-hover-opacity(0.0);
|
|
|
|
@include mdc-states-hover-opacity(0.0);
|
|
|
|
@include mdc-states-focus-opacity(0.0);
|
|
|
|
@include mdc-states-focus-opacity(0.0);
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.grid {
|
|
|
|
.grid {
|
|
|
@ -253,6 +296,7 @@ a {
|
|
|
|
.demo-card {
|
|
|
|
.demo-card {
|
|
|
|
width: $card-width;
|
|
|
|
width: $card-width;
|
|
|
|
margin: 12px;
|
|
|
|
margin: 12px;
|
|
|
|
|
|
|
|
border: 1px solid $card-border-color;
|
|
|
|
@media screen and (max-width: $mobile-width) {
|
|
|
|
@media screen and (max-width: $mobile-width) {
|
|
|
|
margin-left: auto;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
margin-right: auto;
|
|
|
@ -263,6 +307,7 @@ a {
|
|
|
|
|
|
|
|
|
|
|
|
.demo-card__title {
|
|
|
|
.demo-card__title {
|
|
|
|
font-family: $font;
|
|
|
|
font-family: $font;
|
|
|
|
|
|
|
|
color: $dark-text-color;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -277,7 +322,7 @@ a {
|
|
|
|
.demo-card__secondary {
|
|
|
|
.demo-card__secondary {
|
|
|
|
font-family: $font;
|
|
|
|
font-family: $font;
|
|
|
|
padding: 0 1rem 8px;
|
|
|
|
padding: 0 1rem 8px;
|
|
|
|
color: $grey;
|
|
|
|
color: $light-text-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.demo-card__label {
|
|
|
|
.demo-card__label {
|
|
|
@ -289,8 +334,8 @@ a {
|
|
|
|
.type-label {
|
|
|
|
.type-label {
|
|
|
|
font-family: $font;
|
|
|
|
font-family: $font;
|
|
|
|
font-size: $font-size-small;
|
|
|
|
font-size: $font-size-small;
|
|
|
|
text-transform: uppercase;
|
|
|
|
text-transform: capitalize;
|
|
|
|
color: $dark;
|
|
|
|
color: $dark-text-color;
|
|
|
|
background-color: rgba(255, 255, 255, .95);
|
|
|
|
background-color: rgba(255, 255, 255, .95);
|
|
|
|
border-radius: 8px;
|
|
|
|
border-radius: 8px;
|
|
|
|
padding: 7px;
|
|
|
|
padding: 7px;
|
|
|
@ -298,7 +343,11 @@ a {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.type-label-bordered {
|
|
|
|
.type-label-bordered {
|
|
|
|
border: 1px solid $dark;
|
|
|
|
color: $type-label-border-color;
|
|
|
|
|
|
|
|
border: 1px solid $type-label-border-color;
|
|
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
|
|
padding: 4px;
|
|
|
|
|
|
|
|
font-size: $font-size-small;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.description-title-row {
|
|
|
|
.description-title-row {
|
|
|
@ -313,33 +362,36 @@ a {
|
|
|
|
.tags-container {
|
|
|
|
.tags-container {
|
|
|
|
max-width: 400px;
|
|
|
|
max-width: 400px;
|
|
|
|
.tags-label {
|
|
|
|
.tags-label {
|
|
|
|
color: $dark;
|
|
|
|
color: $dark-text-color;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: start;
|
|
|
|
justify-content: start;
|
|
|
|
text-transform: uppercase;
|
|
|
|
text-transform: uppercase;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
>span{
|
|
|
|
>span{
|
|
|
|
margin-left: 4px;
|
|
|
|
margin-left: 4px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tags {
|
|
|
|
.tags {
|
|
|
|
color: $grey;
|
|
|
|
color: $light-text-color;
|
|
|
|
|
|
|
|
line-height: 1.6em;
|
|
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
a {
|
|
|
|
margin-left: 8px;
|
|
|
|
margin-left: 8px;
|
|
|
|
margin-right: 8px;
|
|
|
|
margin-right: 8px;
|
|
|
|
text-decoration: underline;
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
|
|
|
|
|
|
color: $dark;
|
|
|
|
color: $flutter-grey-900-color;
|
|
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
&:active {
|
|
|
|
color: $dark;
|
|
|
|
color: $flutter-grey-900-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
&:hover {
|
|
|
|
color: lighten($dark, 25%);
|
|
|
|
color: lighten($flutter-grey-900-color, 25%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|