mirror of https://github.com/flutter/samples.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
560 lines
9.7 KiB
560 lines
9.7 KiB
// 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-components-web.scss.
|
|
$mdc-theme-primary: $flutter-grey-500-color;
|
|
$mdc-theme-secondary: $flutter-blue-700-color;
|
|
|
|
@import 'package:mdc_web/material-components-web';
|
|
|
|
// App colors
|
|
$navbar-background-color: #3D4043;
|
|
$dark-text-color: #202124;
|
|
$light-text-color: #3D4043;
|
|
$background-color: #F8F9FA;
|
|
$text-color: $dark-text-color;
|
|
$card-border-color: #DBDCE0;
|
|
$type-label-border-color: #82868A;
|
|
|
|
// Sizes
|
|
$font-size-small: 0.875rem;
|
|
$card-width: 300px;
|
|
$mobile-width: 960px;
|
|
$container-width: 960px;
|
|
$footer-height: 96px;
|
|
|
|
// Fonts
|
|
$font: Roboto, sans-serif;
|
|
$title-font: Google Sans Display, Roboto, sans-serif;
|
|
$subtitle-font: Google Sans, Roboto, sans-serif;
|
|
|
|
// Carousel Animation Configs
|
|
$time: 500ms;
|
|
$delay: $time/2;
|
|
$mode: cubic-bezier(0.17, 0.67, 0.55, 1.43);
|
|
|
|
@keyframes heartbeat {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
25% {
|
|
transform: scale(1.2);
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
}
|
|
75% {
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
// CSS Reset
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
@media screen and (max-width: $mobile-width) {
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: $background-color;
|
|
margin: 0;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: $text-color;
|
|
font-family: $title-font;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
* {
|
|
font-family: $font;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
|
|
// Custom Styles
|
|
.content {
|
|
min-height: 100%;
|
|
|
|
> .container {
|
|
padding-bottom: $footer-height;
|
|
}
|
|
}
|
|
|
|
.navbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
background-color: $navbar-background-color;
|
|
color: white;
|
|
padding: 16px 125px 16px 125px;
|
|
margin-bottom: 48px;
|
|
@media screen and (max-width: $mobile-width) {
|
|
padding: 8px 16px 8px 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.leading {
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.leading, .nav-items {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
> * {
|
|
margin: 0 8px 3px 8px; // adjusted vertically to align flutter logo text with "Samples" text
|
|
}
|
|
}
|
|
|
|
.nav-items {
|
|
font-family: 'Google Sans', 'Roboto', sans-serif;
|
|
@media screen and (max-width: $mobile-width) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
span.title {
|
|
font-family: 'Google Sans Display', 'Roboto', sans-serif;
|
|
font-size: 26px;
|
|
letter-spacing: 0.5px;
|
|
margin: 0;
|
|
color: #13B9FD;
|
|
}
|
|
|
|
img {
|
|
height: 32px;
|
|
}
|
|
|
|
a {
|
|
color: white;
|
|
|
|
&:active {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background-color: $dark-text-color;
|
|
color: white;
|
|
//padding: 36px 125px 36px 125px;
|
|
height: $footer-height;
|
|
margin-top: -$footer-height;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 8px;
|
|
@media screen and (min-width: $mobile-width) {
|
|
max-width: $container-width;
|
|
}
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
margin-bottom: 12px;
|
|
@media screen and (max-width: $mobile-width) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.buttons {
|
|
button {
|
|
margin-right: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.index-header {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.search-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
margin-bottom: 12px;
|
|
max-width: 640px;
|
|
margin-right: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.mdc-chip-set {
|
|
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 {
|
|
background-position: top;
|
|
}
|
|
|
|
.mdc-chip__text, .mdc-text-field__icon {
|
|
outline: 0;
|
|
}
|
|
|
|
#search-bar {
|
|
flex: 1;
|
|
@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-focus-opacity(0.0);
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, $card-width);
|
|
grid-gap: 8px;
|
|
@media screen and (max-width: $mobile-width) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.demo-card {
|
|
width: $card-width;
|
|
margin: 12px;
|
|
border: 1px solid $card-border-color;
|
|
@media screen and (max-width: $mobile-width) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
max-width: $card-width;
|
|
}
|
|
}
|
|
|
|
.demo-card__title {
|
|
font-family: $font;
|
|
color: $dark-text-color;
|
|
margin: 0;
|
|
}
|
|
|
|
.demo-card__primary {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.demo-card__primary-action {
|
|
height: 100%;
|
|
}
|
|
|
|
.demo-card__secondary {
|
|
font-family: $font;
|
|
padding: 0 1rem 8px;
|
|
color: $light-text-color;
|
|
}
|
|
|
|
.demo-card__label {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.type-label {
|
|
font-family: $font;
|
|
font-size: $font-size-small;
|
|
text-transform: capitalize;
|
|
color: $dark-text-color;
|
|
background-color: rgba(255, 255, 255, .95);
|
|
border-radius: 8px;
|
|
padding: 7px;
|
|
margin: 4px;
|
|
}
|
|
|
|
.type-label-bordered {
|
|
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 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
h1 {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.tags-container {
|
|
max-width: 400px;
|
|
|
|
.tags-label {
|
|
color: $dark-text-color;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: start;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
margin-bottom: 6px;
|
|
|
|
> span {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
color: $light-text-color;
|
|
line-height: 1.6em;
|
|
|
|
a {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
text-decoration: underline;
|
|
|
|
color: $flutter-grey-900-color;
|
|
|
|
&:active {
|
|
color: $flutter-grey-900-color;
|
|
}
|
|
|
|
&:hover {
|
|
color: lighten($flutter-grey-900-color, 25%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Carousel Container
|
|
.slider-container {
|
|
position: relative;
|
|
margin: 12px auto 24px auto;
|
|
width: 800px;
|
|
height: 500px;
|
|
max-width: 95%;
|
|
@media screen and (max-width: $mobile-width) {
|
|
margin: 12px 4px;
|
|
}
|
|
|
|
.bullet-container {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.bullet {
|
|
margin-right: 8px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
height: 8px;
|
|
width: 18px;
|
|
border-radius: 8px;
|
|
background-color: black;
|
|
opacity: 0.2;
|
|
cursor: pointer;
|
|
transition: 200ms ease;
|
|
|
|
&.active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slider-content {
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 70%;
|
|
height: 85%;
|
|
transform: translate(-50%, -50%);
|
|
@media screen and (max-width: $mobile-width) {
|
|
width: 100%;
|
|
}
|
|
|
|
.slider-single {
|
|
position: absolute;
|
|
z-index: 0;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: z-index 0ms $delay;
|
|
|
|
.slider-single-image {
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transition: $time $mode;
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
&.prev-hidden {
|
|
.slider-single-image {
|
|
transform: translateX(-50%) scale(0);
|
|
}
|
|
|
|
@media screen and (max-width: $mobile-width) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.prev {
|
|
z-index: 1;
|
|
|
|
.slider-single-image {
|
|
opacity: 0.2;
|
|
transform: translateX(-25%) scale(0.8);
|
|
}
|
|
}
|
|
|
|
&.next {
|
|
z-index: 1;
|
|
|
|
.slider-single-image {
|
|
opacity: 0.2;
|
|
transform: translateX(25%) scale(0.8);
|
|
}
|
|
}
|
|
|
|
&.next-hidden {
|
|
.slider-single-image {
|
|
transform: translateX(50%) scale(0);
|
|
}
|
|
|
|
@media screen and (max-width: $mobile-width) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
z-index: 2;
|
|
|
|
.slider-single-image {
|
|
opacity: 1;
|
|
transform: translateX(0%) scale(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.slider-left {
|
|
position: absolute;
|
|
z-index: 3;
|
|
display: block;
|
|
right: 100%;
|
|
top: 50%;
|
|
color: black;
|
|
transform: translateY(-50%);
|
|
padding: 20px 20px;
|
|
margin-right: -2px;
|
|
cursor: pointer;
|
|
@media screen and (max-width: $mobile-width) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.slider-right {
|
|
position: absolute;
|
|
z-index: 3;
|
|
display: block;
|
|
left: 100%;
|
|
top: 50%;
|
|
color: black;
|
|
transform: translateY(-50%);
|
|
padding: 20px 20px;
|
|
margin-left: -2px;
|
|
cursor: pointer;
|
|
@media screen and (max-width: $mobile-width) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
}
|