Make part13 more approachable.
This commit is contained in:
Richard Feldman
@@ -1,6 +1,11 @@
|
|||||||
module ElmHubCss exposing (..)
|
module ElmHubCss exposing (..)
|
||||||
|
|
||||||
import Css exposing (..)
|
import Css exposing (..)
|
||||||
|
import Css.Elements exposing (..)
|
||||||
|
|
||||||
|
|
||||||
|
-- Documentation:
|
||||||
|
-- http://package.elm-lang.org/packages/rtfeldman/elm-css/latest
|
||||||
|
|
||||||
|
|
||||||
css : Stylesheet
|
css : Stylesheet
|
||||||
@@ -12,75 +17,107 @@ css =
|
|||||||
, padding (px 30)
|
, padding (px 30)
|
||||||
, fontFamilies [ "Helvetica", "Arial", "serif" ]
|
, fontFamilies [ "Helvetica", "Arial", "serif" ]
|
||||||
]
|
]
|
||||||
-- TODO convert these remaining styles to use elm-css.
|
, header
|
||||||
--
|
[ position relative
|
||||||
-- header {
|
, padding2 (px 6) (px 12)
|
||||||
-- position: relative;
|
, height (px 36)
|
||||||
-- padding: 6px 12px;
|
, backgroundColor (rgb 96 181 204)
|
||||||
-- height: 36px;
|
]
|
||||||
-- background-color: rgb(96, 181, 204);
|
, h1
|
||||||
-- }
|
[ color (hex "ffffff")
|
||||||
--
|
, margin zero
|
||||||
-- h1 {
|
]
|
||||||
-- color: white;
|
, (.) "tagline"
|
||||||
-- font-weight: normal;
|
[ color (hex "eeeeee")
|
||||||
-- margin: 0;
|
, position absolute
|
||||||
-- }
|
, right (px 16)
|
||||||
--
|
, top (px 12)
|
||||||
-- .tagline {
|
, fontSize (px 24)
|
||||||
-- color: #eee;
|
, fontStyle italic
|
||||||
-- position: absolute;
|
]
|
||||||
-- right: 16px;
|
, (.) "results"
|
||||||
-- top: 12px;
|
[ property "list-style-image" "url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png')"
|
||||||
-- font-size: 24px;
|
, property "list-style-position" "inside"
|
||||||
-- font-style: italic;
|
, padding zero
|
||||||
-- }
|
]
|
||||||
--
|
, (.) "results"
|
||||||
-- .results {
|
[ descendants
|
||||||
-- list-style-image: url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png');
|
[ li
|
||||||
-- list-style-position: inside;
|
[ fontSize (px 18)
|
||||||
-- padding: 0;
|
, marginBottom (px 16)
|
||||||
-- }
|
]
|
||||||
--
|
]
|
||||||
-- .results li {
|
]
|
||||||
-- font-size: 18px;
|
, (.) "star-count"
|
||||||
-- margin-bottom: 16px;
|
[ fontWeight bold
|
||||||
-- }
|
, marginRight (px 16)
|
||||||
--
|
]
|
||||||
-- .star-count {
|
, a
|
||||||
-- font-weight: bold;
|
[ color (rgb 96 181 204)
|
||||||
-- margin-right: 16px;
|
, textDecoration none
|
||||||
-- }
|
, hover
|
||||||
--
|
[ textDecoration underline ]
|
||||||
-- a {
|
]
|
||||||
-- color: rgb(96, 181, 204);
|
, (.) "search-query"
|
||||||
-- text-decoration: none;
|
[ padding (px 8)
|
||||||
-- }
|
, fontSize (px 24)
|
||||||
--
|
, marginBottom (px 18)
|
||||||
-- a:hover {
|
, marginTop (px 36)
|
||||||
-- text-decoration: underline;
|
]
|
||||||
-- }
|
, (.) "search-button"
|
||||||
--
|
[ padding2 (px 8) (px 16)
|
||||||
-- .search-query {
|
, fontSize (px 24)
|
||||||
-- padding: 8px;
|
, color (hex "ffffff")
|
||||||
-- font-size: 24px;
|
, border3 (px 1) solid (hex "cccccc")
|
||||||
-- margin-bottom: 18px;
|
, backgroundColor (rgb 96 181 204)
|
||||||
-- margin-top: 36px;
|
, marginLeft (px 12)
|
||||||
-- }
|
, hover
|
||||||
--
|
[ color (rgb 96 181 204)
|
||||||
-- .search-button {
|
, backgroundColor (hex "ffffff")
|
||||||
-- padding: 8px 16px;
|
]
|
||||||
-- font-size: 24px;
|
]
|
||||||
-- color: white;
|
, (.) "search-option"
|
||||||
-- border: 1px solid #ccc;
|
[ descendants
|
||||||
-- background-color: rgb(96, 181, 204);
|
[ selector "input[type=\"text\"]"
|
||||||
-- margin-left: 12px
|
[ padding (px 5)
|
||||||
-- }
|
, boxSizing borderBox
|
||||||
--
|
, width (pct 90)
|
||||||
-- .search-button:hover {
|
]
|
||||||
-- color: rgb(96, 181, 204);
|
]
|
||||||
-- background-color: white;
|
]
|
||||||
-- }
|
, each [ button, input ]
|
||||||
|
[ focus [ outline none ]
|
||||||
|
]
|
||||||
|
, (.) "search"
|
||||||
|
[ after
|
||||||
|
[ property "content" "\"\""
|
||||||
|
, property "display" "table"
|
||||||
|
, property "clear" "both"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
, (.) "error"
|
||||||
|
[ backgroundColor (hex "FF9632")
|
||||||
|
, padding (px 20)
|
||||||
|
, boxSizing borderBox
|
||||||
|
, overflowX auto
|
||||||
|
, fontFamily monospace
|
||||||
|
, fontSize (px 18)
|
||||||
|
]
|
||||||
|
, (.) "top-label"
|
||||||
|
[ display block
|
||||||
|
, color (hex "555555")
|
||||||
|
]
|
||||||
|
, th
|
||||||
|
[ textAlign left
|
||||||
|
, cursor pointer
|
||||||
|
, hover [ color (rgb 96 181 204) ]
|
||||||
|
]
|
||||||
|
, each
|
||||||
|
[ th, td ]
|
||||||
|
[ fontSize (px 18)
|
||||||
|
, paddingRight (px 20)
|
||||||
|
]
|
||||||
|
-- TODO style hide-result and the search options
|
||||||
--
|
--
|
||||||
-- .hide-result {
|
-- .hide-result {
|
||||||
-- background-color: transparent;
|
-- background-color: transparent;
|
||||||
@@ -95,9 +132,6 @@ css =
|
|||||||
-- color: rgb(96, 181, 204);
|
-- color: rgb(96, 181, 204);
|
||||||
-- }
|
-- }
|
||||||
--
|
--
|
||||||
-- button:focus, input:focus {
|
|
||||||
-- outline: none;
|
|
||||||
-- }
|
|
||||||
--
|
--
|
||||||
-- .stars-error {
|
-- .stars-error {
|
||||||
-- background-color: #FF9632;
|
-- background-color: #FF9632;
|
||||||
@@ -108,14 +142,6 @@ css =
|
|||||||
-- margin-top: 10px;
|
-- margin-top: 10px;
|
||||||
-- }
|
-- }
|
||||||
--
|
--
|
||||||
-- .error {
|
|
||||||
-- background-color: #FF9632;
|
|
||||||
-- padding: 20px;
|
|
||||||
-- box-sizing: border-box;
|
|
||||||
-- overflow-x: auto;
|
|
||||||
-- font-family: monospace;
|
|
||||||
-- font-size: 18px;
|
|
||||||
-- }
|
|
||||||
--
|
--
|
||||||
-- .search-input {
|
-- .search-input {
|
||||||
-- display: block;
|
-- display: block;
|
||||||
@@ -138,35 +164,4 @@ css =
|
|||||||
-- margin-left: 16px;
|
-- margin-left: 16px;
|
||||||
-- box-sizing: border-box;
|
-- box-sizing: border-box;
|
||||||
-- }
|
-- }
|
||||||
--
|
|
||||||
-- .search-option input[type="text"] {
|
|
||||||
-- padding: 5px;
|
|
||||||
-- box-sizing: border-box;
|
|
||||||
-- width: 90%;
|
|
||||||
-- }
|
|
||||||
--
|
|
||||||
-- .search:after {
|
|
||||||
-- content: "";
|
|
||||||
-- display: table;
|
|
||||||
-- clear: both;
|
|
||||||
-- }
|
|
||||||
--
|
|
||||||
-- .top-label {
|
|
||||||
-- display: block;
|
|
||||||
-- color: #555;
|
|
||||||
-- }
|
|
||||||
--
|
|
||||||
-- th {
|
|
||||||
-- text-align: left;
|
|
||||||
-- cursor: pointer;
|
|
||||||
-- }
|
|
||||||
--
|
|
||||||
-- th:hover {
|
|
||||||
-- color: rgb(96, 181, 204);
|
|
||||||
-- }
|
|
||||||
--
|
|
||||||
-- th, td {
|
|
||||||
-- font-size: 18px;
|
|
||||||
-- padding-right: 20px;
|
|
||||||
-- }
|
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user