@apache-royale/royale-js/royale-asjs/examples/royale/RoyaleTeamPage_MDL/src/main/resources/mdl-styles.css

Apache Royale (formerly FlexJS)

/*
////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You 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.
//
////////////////////////////////////////////////////////////////////////////////
*/

@namespace "http://www.w3.org/1999/xhtml";
@namespace js "library://ns.apache.org/royale/basic";
@namespace mdl "library://ns.apache.org/royale/mdl";

.royale *, . royale *:before, . royale *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.page-content
{
	padding: 10px;
	margin: 10px;
}

js|Image
{
	vertical-align: top;
	IBeadModel: ClassReference("org.apache.royale.html.beads.models.ImageModel");
	IBeadView:  ClassReference("org.apache.royale.html.beads.ImageView");
}



.memberListItemRenderer
{
    width: auto;
    IItemRenderer: ClassReference("itemRenderers.MemberItemRenderer");
}
.layoutTransparent {
  background: url('assets/transparent.jpg') center / cover;
  color: white;
}

/* card wide */
.demo-card-wide.mdl-card {
    width: 600px;
    height:350px;
}
.demo-card-wide > .mdl-card__title {
  layout: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 600px) and (max-width: 959px) {
    .demo-card-wide.mdl-card {
        height: auto;
    }
}

@media (max-width: 599px) {
    .demo-card-wide.mdl-card {
        height: auto;
    }
}

.demo-card-wide > .mdl-card__menu {
}

.mdl-card__actions {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    min-height: 75px;
}


.mdl-card__supporting-text {
    width:100% !important;
}

.cardRow1 {
    display: flex !important;
    flex-direction: row;
}

.membersList {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.memberCardMedia {
    background-color: #fff;
}

.bio {
    padding: 10px;
    font-size: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.photo {
    max-width: 150px;
    max-height: 150px;
}