Add Sample Material Styling
This commit is contained in:
parent
8485a96aa3
commit
c5cd600cfc
4 changed files with 142 additions and 116 deletions
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
233
web/styles.css
|
|
@ -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;*/
|
||||
/*}*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue