experiments/cellular-automata
1
0
Fork 0
Code Issues 29 Pull requests Projects Releases Wiki Activity

Add Sample Material Styling

Browse source
This commit is contained in:
Marty Oehme 2018-07-10 12:52:56 +02:00
parent 8485a96aa3
commit c5cd600cfc
4 changed files with 142 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
lib/app_component.dart
View file

@ -1,4 +1,5 @@
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'dart:html' as html;
import 'package:rules_of_living/src/Engine.dart';
@ -6,7 +7,10 @@ import 'package:rules_of_living/src/Engine.dart';
@Component(
selector: 'my-app',
templateUrl: "app_component.html",
directives: [coreDirectives])
directives: [coreDirectives, MaterialIconComponent],
styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
providers: const [materialProviders],
)
class AppComponent implements OnInit {
var name = "World";

15
lib/app_component.html
View file

@ -1,4 +1,15 @@
<h1>Cellular Automata</h1>
<header class="material-header">
<div class="material-header-row">
<material-button icon class="material-drawer-button">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Cellular Automata</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<a>Link 1</a>
</nav>
</div>
</header>
<div id="rules-input">
Ruleset: <input type="text" title="ruleset" content="S23/B3">
<i class="fas fa-paint-brush"></i>
@ -19,4 +30,4 @@
<button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></button>
<i class="fas fa-clock"> Speed:</i><input type="text" title="speed" value="1">
<button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
</div>
</div>

4
web/index.html
View file

@ -15,13 +15,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">
<!-- As per https://pub.dartlang.org/packages/angular_components/versions/0.9.0-beta#-readme-tab-#Required-Icon-Font -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="main.dart.js"></script>
</head>

233
web/styles.css
View file

@ -1,117 +1,126 @@
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
a {
cursor: pointer;
cursor: hand;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
label {
padding-right: 0.5em;
}
/* Navigation link styles */
nav a {
padding: 5px 10px;
text-decoration: none;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.active {
color: #039be5;
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
font-family: 'Roboto', sans-serif;
}
/* items class */
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.items li.selected {
background-color: #CFD8DC;
color: white;
}
.items li.selected:hover {
background-color: #BBD8DC;
}
.items .text {
position: relative;
top: -3px;
}
.items .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
/*!* Master Styles *!*/
/*h1 {*/
/*color: #369;*/
/*font-family: Arial, Helvetica, sans-serif;*/
/*font-size: 250%;*/
/*}*/
/*h2, h3 {*/
/*color: #444;*/
/*font-family: Arial, Helvetica, sans-serif;*/
/*font-weight: lighter;*/
/*}*/
/*body {*/
/*margin: 2em;*/
/*}*/
/*body, input[text], button {*/
/*color: #888;*/
/*font-family: Cambria, Georgia;*/
/*}*/
/*a {*/
/*cursor: pointer;*/
/*cursor: hand;*/
/*}*/
/*button {*/
/*font-family: Arial;*/
/*background-color: #eee;*/
/*border: none;*/
/*padding: 5px 10px;*/
/*border-radius: 4px;*/
/*cursor: pointer;*/
/*cursor: hand;*/
/*}*/
/*button:hover {*/
/*background-color: #cfd8dc;*/
/*}*/
/*button:disabled {*/
/*background-color: #eee;*/
/*color: #aaa;*/
/*cursor: auto;*/
/*}*/
/*label {*/
/*padding-right: 0.5em;*/
/*}*/
/*!* Navigation link styles *!*/
/*nav a {*/
/*padding: 5px 10px;*/
/*text-decoration: none;*/
/*margin-right: 10px;*/
/*margin-top: 10px;*/
/*display: inline-block;*/
/*background-color: #eee;*/
/*border-radius: 4px;*/
/*}*/
/*nav a:visited, a:link {*/
/*color: #607D8B;*/
/*}*/
/*nav a:hover {*/
/*color: #039be5;*/
/*background-color: #CFD8DC;*/
/*}*/
/*nav a.active {*/
/*color: #039be5;*/
/*}*/
/*!* items class *!*/
/*.items {*/
/*margin: 0 0 2em 0;*/
/*list-style-type: none;*/
/*padding: 0;*/
/*width: 24em;*/
/*}*/
/*.items li {*/
/*cursor: pointer;*/
/*position: relative;*/
/*left: 0;*/
/*background-color: #EEE;*/
/*margin: .5em;*/
/*padding: .3em 0;*/
/*height: 1.6em;*/
/*border-radius: 4px;*/
/*}*/
/*.items li:hover {*/
/*color: #607D8B;*/
/*background-color: #DDD;*/
/*left: .1em;*/
/*}*/
/*.items li.selected {*/
/*background-color: #CFD8DC;*/
/*color: white;*/
/*}*/
/*.items li.selected:hover {*/
/*background-color: #BBD8DC;*/
/*}*/
/*.items .text {*/
/*position: relative;*/
/*top: -3px;*/
/*}*/
/*.items .badge {*/
/*display: inline-block;*/
/*font-size: small;*/
/*color: white;*/
/*padding: 0.8em 0.7em 0 0.7em;*/
/*background-color: #607D8B;*/
/*line-height: 1em;*/
/*position: relative;*/
/*left: -1px;*/
/*top: -4px;*/
/*height: 1.8em;*/
/*margin-right: .8em;*/
/*border-radius: 4px 0 0 4px;*/
/*}*/
/*!* everywhere else *!*/
/** {*/
/*font-family: Arial, Helvetica, sans-serif;*/
/*}*/