mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update shared components

Browse source
This commit is contained in:
Luke Pulverenti 2016-03-09 12:40:22 -05:00
parent fb269362ff
commit 71811cb9e3
221 changed files with 32936 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

301
dashboard-ui/bower_components/material-design-lite/src/typography/_typography.scss vendored Normal file
View file

@ -0,0 +1,301 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../variables";
@import "../mixins";
@if $target-elements-directly == true {
html, body {
font-family: $performance_font;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
/**
* Styles for HTML elements
*/
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
@include typo-display-3($colorContrast: true);
font-size: 0.6em;
}
h1 {
@include typo-display-3;
margin-top: 24px;
margin-bottom: 24px;
}
h2 {
@include typo-display-2;
margin-top: 24px;
margin-bottom: 24px;
}
h3 {
@include typo-display-1;
margin-top: 24px;
margin-bottom: 24px;
}
h4 {
@include typo-headline;
margin-top: 24px;
margin-bottom: 16px;
}
h5 {
@include typo-title;
margin-top: 24px;
margin-bottom: 16px;
}
h6 {
@include typo-subhead;
margin-top: 24px;
margin-bottom: 16px;
}
p {
@include typo-body-1;
margin-bottom: 16px;
}
a {
color: $text-link-color;
font-weight: 500;
}
blockquote {
@include typo-blockquote;
}
mark {
background-color: #f4ff81;
}
dt {
font-weight: 700;
}
address {
@include typo-caption;
font-style: normal;
}
ul, ol {
@include typo-body-1;
}
}
/**
* Class Name Styles
*/
.mdl-typography--display-4 {
@include typo-display-4;
}
.mdl-typography--display-4-color-contrast {
@include typo-display-4($colorContrast: true);
}
.mdl-typography--display-3 {
@include typo-display-3;
}
.mdl-typography--display-3-color-contrast {
@include typo-display-3($colorContrast: true);
}
.mdl-typography--display-2 {
@include typo-display-2;
}
.mdl-typography--display-2-color-contrast {
@include typo-display-2($colorContrast: true);
}
.mdl-typography--display-1 {
@include typo-display-1;
}
.mdl-typography--display-1-color-contrast {
@include typo-display-1($colorContrast: true);
}
.mdl-typography--headline {
@include typo-headline;
}
.mdl-typography--headline-color-contrast {
@include typo-headline($colorContrast: true);
}
.mdl-typography--title {
@include typo-title;
}
.mdl-typography--title-color-contrast {
@include typo-title($colorContrast: true);
}
.mdl-typography--subhead {
@include typo-subhead;
}
.mdl-typography--subhead-color-contrast {
@include typo-subhead($colorContrast: true);
}
.mdl-typography--body-2 {
@include typo-body-2;
}
.mdl-typography--body-2-color-contrast {
@include typo-body-2($colorContrast: true);
}
.mdl-typography--body-1 {
@include typo-body-1;
}
.mdl-typography--body-1-color-contrast {
@include typo-body-1($colorContrast: true);
}
.mdl-typography--body-2-force-preferred-font {
@include typo-body-2($usePreferred: true);
}
.mdl-typography--body-2-force-preferred-font-color-contrast {
@include typo-body-2($colorContrast: true, $usePreferred: true);
}
.mdl-typography--body-1-force-preferred-font {
@include typo-body-1($usePreferred: true);
}
.mdl-typography--body-1-force-preferred-font-color-contrast {
@include typo-body-1($colorContrast: true, $usePreferred: true);
}
.mdl-typography--caption {
@include typo-caption;
}
.mdl-typography--caption-force-preferred-font {
@include typo-caption($usePreferred: true);
}
.mdl-typography--caption-color-contrast {
@include typo-caption($colorContrast: true);
}
.mdl-typography--caption-force-preferred-font-color-contrast {
@include typo-caption($colorContrast: true, $usePreferred: true);
}
.mdl-typography--menu {
@include typo-menu;
}
.mdl-typography--menu-color-contrast {
@include typo-menu($colorContrast: true);
}
.mdl-typography--button {
@include typo-button;
}
.mdl-typography--button-color-contrast {
@include typo-button($colorContrast: true);
}
.mdl-typography--text-left {
text-align: left;
}
.mdl-typography--text-right {
text-align: right;
}
.mdl-typography--text-center {
text-align: center;
}
.mdl-typography--text-justify {
text-align: justify;
}
.mdl-typography--text-nowrap {
white-space: nowrap;
}
.mdl-typography--text-lowercase {
text-transform: lowercase;
}
.mdl-typography--text-uppercase {
text-transform: uppercase;
}
.mdl-typography--text-capitalize {
text-transform: capitalize;
}
.mdl-typography--font-thin {
font-weight: 200 !important;
}
.mdl-typography--font-light {
font-weight: 300 !important;
}
.mdl-typography--font-regular {
font-weight: 400 !important;
}
.mdl-typography--font-medium {
font-weight: 500 !important;
}
.mdl-typography--font-bold {
font-weight: 700 !important;
}
.mdl-typography--font-black {
font-weight: 900 !important;
}
.material-icons {
@include typo-icon;
}

57
dashboard-ui/bower_components/material-design-lite/src/typography/demo.css vendored Normal file
View file

@ -0,0 +1,57 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.demo-page--typography {
color: rgba(0, 0, 0, 0.87);
}
.demo-page--typography table th {
padding-right: 80px;
vertical-align: top;
text-align: left;
}
.demo-typography--white {
background-color: white;
color: black;
}
.demo-typography--black {
background-color: black;
color: white;
}
.demo-typography--white,
.demo-typography--black,
.demo-typography--img-1,
.demo-typography--img-2 {
width: 360px;
height: 272px;
padding: 16px;
box-sizing: border-box;
}
.demo-typography--img-1 {
background-image: url(../demo-images/img-1.png);
color: white;
}
.demo-typography--img-2 {
background-image: url(../demo-images/img-2.png);
color: white;
}

228
dashboard-ui/bower_components/material-design-lite/src/typography/demo.html vendored Normal file
View file

@ -0,0 +1,228 @@
<h2>Scale &amp; Basic Styles</h2>
<div class="demo-preview-block demo-page--typography">
<table>
<tr>
<th class="mdl-typography--caption-color-contrast">Display 4</th>
<td class="mdl-typography--display-4">Light 112px</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Display 3</th>
<td class="mdl-typography--display-3">Regular 56px</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Display 2</th>
<td class="mdl-typography--display-2">Regular 45px</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Display 1</th>
<td class="mdl-typography--display-1">Regular 34px</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Headline</th>
<td class="mdl-typography--headline">Regular 24px</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Title</th>
<td class="mdl-typography--title">Medium 20px</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Subhead</th>
<td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Body 2</th>
<td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Body 1</th>
<td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Body 2 (force preferred font)</th>
<td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Body 1 (force preferred font)</th>
<td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Caption</th>
<td class="mdl-typography--caption">Regular 12px</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Menu</th>
<td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th class="mdl-typography--caption-color-contrast">Button</th>
<td class="mdl-typography--button">Medium (All Caps) 14px</td>
</tr>
</table>
</div>
<h2>HTML Elements</h2>
<div class="demo-preview-block">
<h3>Headings</h3>
<h1>&lt;h1&gt;</h1>
<h2>&lt;h2&gt;</h2>
<h3>&lt;h3&gt;</h3>
<h4>&lt;h4&gt;</h4>
<h5>&lt;h5&gt;</h5>
<h6>&lt;h6&gt;</h6>
<h3>Formatting</h3>
<p><u>&lt;u&gt;Underlined&lt;u&gt;</u></p>
<p><b>&lt;b&gt;Bold&lt;b&gt;</b></p>
<p><strong>&lt;strong&gt;Strong&lt;strong&gt;</strong></p>
<p><i>&lt;italic&gt;Italic&lt;italic&gt;</i></p>
<p><em>&lt;em&gt;Em&lt;em&gt;</em></p>
<p><s>&lt;s&gt;Strikethrough&lt;s&gt;</s></p>
<p><small>&lt;small&gt;Small&lt;small&gt;</small></p>
<p><mark>&lt;mark&gt;Mark&lt;mark&gt;</mark></p>
<h3>Body Text</h3>
<p>&lt;p&gt;</p>
<p class="mdl-typography--body-2">&lt;p class="mdl-typography-body-2"&gt;</p>
<p class="mdl-typography--caption">&lt;p class="mdl-typography-caption"&gt;</p>
<p class="mdl-typography--menu">&lt;p class="mdl-typography-menu"&gt;</p>
<p class="mdl-typography--button">&lt;p class="mdl-typography-button"&gt;</p>
<h3>Subtitles</h3>
<h1>&lt;h1&gt; <small>Subtitle</small></h1>
<h2>&lt;h2&gt; <small>Subtitle</small></h2>
<h3>&lt;h3&gt; <small>Subtitle</small></h3>
<h4>&lt;h4&gt; <small>Subtitle</small></h4>
<h5>&lt;h5&gt; <small>Subtitle</small></h5>
<h6>&lt;h6&gt; <small>Subtitle</small></h6>
<h3>Description</h3>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<h2>Quotes</h2>
<div class="demo-preview-block">
<blockquote>&lt;blockquote&gt;</blockquote>
</div>
<h2>Alignment</h2>
<p class="mdl-typography--text-left">Left aligned text.</p>
<p class="mdl-typography--text-center">Center aligned text.</p>
<p class="mdl-typography--text-right">Right aligned text.</p>
<p class="mdl-typography--text-justify">Justified text.</p>
<p class="mdl-typography--text-nowrap">No wrap text.</p>
<h2>Transformations</h2>
<p class="mdl-typography--text-lowercase">Lowercased text.</p>
<p class="mdl-typography--text-uppercase">Uppercased text.</p>
<p class="mdl-typography--text-capitalize">Capitalized text.</p>
<h2>Addresses</h2>
<address>
<strong>Googleplex</strong><br>
1600 Amphitheatre Pkwy<br>
Mountain View, CA 94043<br>
<abbr title="Phone">P:</abbr> (650) 253-0000
</address>
<h2>Code</h2>
<h3>Multi-line code blocks</h3>
<p>
Use &lt;pre&gt; for multi-line code blocks.
<pre>
&lt;p&gt;This is the first line of code&lt;/p&gt;
&lt;p&gt;This is the second line of code&lt;/p&gt;
</pre>
</p>
<h3>Inline code blocks</h3>
<p>Code blocks like <code>&lt;main&gt;</code> could be displayed inline.</p>
<h2>Color Contrasts</h2>
<div class="demo-preview-block">
<div class="demo-typography--white">
<p class="mdl-typography--caption-color-contrast">Caption</p>
<p class="mdl-typography--body-2-color-contrast">Body</p>
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
<p class="mdl-typography--title-color-contrast">Title</p>
<p class="mdl-typography--display-1-color-contrast">Display</p>
</div>
</div>
<div class="demo-preview-block">
<div class="demo-typography--black">
<p class="mdl-typography--caption-color-contrast">Caption</p>
<p class="mdl-typography--body-2-color-contrast">Body</p>
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
<p class="mdl-typography--title-color-contrast">Title</p>
<p class="mdl-typography--display-1-color-contrast">Display</p>
</div>
</div>
<div class="demo-preview-block">
<div class="demo-typography--img-1">
<p class="mdl-typography--caption-color-contrast">Caption</p>
<p class="mdl-typography--body-2-color-contrast">Body</p>
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
<p class="mdl-typography--title-color-contrast">Title</p>
<p class="mdl-typography--display-1-color-contrast">Display</p>
</div>
</div>
<div class="demo-preview-block">
<div class="demo-typography--img-2">
<p class="mdl-typography--caption-color-contrast">Caption</p>
<p class="mdl-typography--body-2-color-contrast">Body</p>
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
<p class="mdl-typography--title-color-contrast">Title</p>
<p class="mdl-typography--display-1-color-contrast">Display</p>
</div>
</div>