mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update shared components
This commit is contained in:
Luke Pulverenti
parent
fb269362ff
commit
71811cb9e3
221 changed files with 32936 additions and 101 deletions
111
dashboard-ui/bower_components/material-design-lite/src/card/_card.scss
vendored
Normal file
111
dashboard-ui/bower_components/material-design-lite/src/card/_card.scss
vendored
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/**
|
||||
* 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";
|
||||
|
||||
.mdl-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $card-font-size;
|
||||
font-weight: 400;
|
||||
min-height: $card-height;
|
||||
overflow: hidden;
|
||||
width: $card-width;
|
||||
z-index: $card-z-index;
|
||||
position: relative;
|
||||
background: $card-background-color;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mdl-card__media {
|
||||
background-color: $card-image-placeholder-color;
|
||||
background-repeat: repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
background-origin: padding-box;
|
||||
background-attachment: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mdl-card__title {
|
||||
align-items: center;
|
||||
color: $card-text-color;
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
line-height: normal;
|
||||
padding: $card-vertical-padding $card-horizontal-padding;
|
||||
perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
|
||||
transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.mdl-card--border {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-card__title-text {
|
||||
align-self: flex-end;
|
||||
color: inherit;
|
||||
display: block;
|
||||
display: flex;
|
||||
font-size: $card-title-font-size;
|
||||
font-weight: $card-title-text-font-weight;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
transform-origin: $card-title-text-transform-origin-x $card-title-text-transform-origin-y;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-card__subtitle-text {
|
||||
font-size: $card-subtitle-font-size;
|
||||
color: $card-subtitle-color;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-card__supporting-text {
|
||||
color: $card-supporting-text-text-color;
|
||||
font-size: $card-supporting-text-font-size;
|
||||
line-height: $card-supporting-text-line-height;
|
||||
overflow: hidden;
|
||||
padding: $card-vertical-padding $card-horizontal-padding;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.mdl-card__actions {
|
||||
font-size: $card-actions-font-size;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
background-color: rgba(0,0,0,0);
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.mdl-card--border {
|
||||
border-top: 1px solid $card-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-card--expand {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
.mdl-card__menu {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
}
|
||||
47
dashboard-ui/bower_components/material-design-lite/src/card/snippets/event.html
vendored
Normal file
47
dashboard-ui/bower_components/material-design-lite/src/card/snippets/event.html
vendored
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!-- Event card -->
|
||||
<style>
|
||||
.demo-card-event.mdl-card {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background: #3E4EB8;
|
||||
}
|
||||
.demo-card-event > .mdl-card__actions {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.demo-card-event > .mdl-card__title {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.demo-card-event > .mdl-card__title > h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.demo-card-event > .mdl-card__actions {
|
||||
display: flex;
|
||||
box-sizing:border-box;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-card-event > .mdl-card__actions > .material-icons {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.demo-card-event > .mdl-card__title,
|
||||
.demo-card-event > .mdl-card__actions,
|
||||
.demo-card-event > .mdl-card__actions > .mdl-button {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-card-event mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h4>
|
||||
Featured event:<br>
|
||||
May 24, 2016<br>
|
||||
7-11pm
|
||||
</h4>
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Add to Calendar
|
||||
</a>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<i class="material-icons">event</i>
|
||||
</div>
|
||||
</div>
|
||||
25
dashboard-ui/bower_components/material-design-lite/src/card/snippets/image.html
vendored
Normal file
25
dashboard-ui/bower_components/material-design-lite/src/card/snippets/image.html
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!-- Image card -->
|
||||
<style>
|
||||
.demo-card-image.mdl-card {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background: url('../assets/demos/image_card.jpg') center / cover;
|
||||
}
|
||||
.demo-card-image > .mdl-card__actions {
|
||||
height: 52px;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.demo-card-image__filename {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-card-image mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand"></div>
|
||||
<div class="mdl-card__actions">
|
||||
<span class="demo-card-image__filename">Image.jpg</span>
|
||||
</div>
|
||||
</div>
|
||||
27
dashboard-ui/bower_components/material-design-lite/src/card/snippets/square.html
vendored
Normal file
27
dashboard-ui/bower_components/material-design-lite/src/card/snippets/square.html
vendored
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!-- Square card -->
|
||||
<style>
|
||||
.demo-card-square.mdl-card {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
.demo-card-square > .mdl-card__title {
|
||||
color: #fff;
|
||||
background:
|
||||
url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">Update</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Aenan convallis.
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
View Updates
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
34
dashboard-ui/bower_components/material-design-lite/src/card/snippets/wide.html
vendored
Normal file
34
dashboard-ui/bower_components/material-design-lite/src/card/snippets/wide.html
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!-- Wide card with share menu button -->
|
||||
<style>
|
||||
.demo-card-wide.mdl-card {
|
||||
width: 512px;
|
||||
}
|
||||
.demo-card-wide > .mdl-card__title {
|
||||
color: #fff;
|
||||
height: 176px;
|
||||
background: url('../assets/demos/welcome_card.jpg') center / cover;
|
||||
}
|
||||
.demo-card-wide > .mdl-card__menu {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title">
|
||||
<h2 class="mdl-card__title-text">Welcome</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Mauris sagittis pellentesque lacus eleifend lacinia...
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
<div class="mdl-card__menu">
|
||||
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
|
||||
<i class="material-icons">share</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue