99a84c6dc8
This implementation should be much saner and less buggy. Changes: - Using header rows is now mandatory - Headers now stretch to fit their content, rather than needing to specify a header height - Tabs should now be inside the header
176 lines
3.1 KiB
CSS
176 lines
3.1 KiB
CSS
.mdl-gen {
|
|
padding: 24px;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mdl-gen--light-text {
|
|
color: white;
|
|
}
|
|
|
|
.mdl-gen--dark-text {
|
|
color: rgb(66,66,66);
|
|
}
|
|
|
|
.mdl-gen-preview {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
height: 350px;
|
|
margin: 16px auto 16px auto;
|
|
background-color: white;
|
|
}
|
|
|
|
.mdl-gen-preview__content {
|
|
padding: 24px;
|
|
}
|
|
|
|
.mdl-gen-color-row {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.mdl-gen-color {
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
height: 80px;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
text-align: center;
|
|
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.mdl-gen-nocolor {
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
height: 80px;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.mdl-gen-textinput {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.mdl-gen-textinput__input {
|
|
-webkit-flex-grow: 1;
|
|
-webkit-flex-shrink: 1;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
|
|
.mdl-gen:not(.mdl-gen--selecting-primary) .mdl-gen-color.is-primary {
|
|
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.19), 0 6px 3px 0 rgba(0,0,0,0.23);
|
|
z-index: 3;
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.mdl-gen:not(.mdl-gen--selecting-primary) .mdl-gen-color.is-primary:after {
|
|
content: 'Primary';
|
|
display: block;
|
|
position: absolute;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.mdl-gen:not(.mdl-gen--selecting-accent) .mdl-gen-color.is-accent {
|
|
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.19), 0 6px 3px 0 rgba(0,0,0,0.23);
|
|
z-index: 4;
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.mdl-gen:not(.mdl-gen--selecting-accent) .mdl-gen-color.is-accent:after {
|
|
content: 'Accent';
|
|
display: block;
|
|
position: absolute;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.mdl-gen--selecting-accent .mdl-gen-color--muted:not(.is-primary) {
|
|
pointer-events: none;
|
|
cursor: auto;
|
|
color: white;
|
|
opacity: 0;
|
|
}
|
|
|
|
.mdl-gen-download {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 24px auto 0 auto;
|
|
text-align: right;
|
|
}
|
|
|
|
.mdl-gen-download .mdl-button {
|
|
margin: 0;
|
|
}
|
|
|
|
.mdl-gen-fab {
|
|
position: absolute !important;
|
|
right: 24px;
|
|
}
|
|
|
|
.mdl-gen--hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
@media (max-width: 400px) {
|
|
.mdl-gen {
|
|
padding: 16px 16px 24px 16px;
|
|
}
|
|
|
|
.mdl-gen-color {
|
|
height: 90px;
|
|
}
|
|
|
|
.mdl-gen-preview {
|
|
order: 4;
|
|
margin-top: 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mdl-gen-download {
|
|
order: 5;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.mdl-gen:not(.mdl-gen--selecting-primary) .mdl-gen-color.is-primary:after {
|
|
content: 'P';
|
|
line-height: 130px;
|
|
}
|
|
|
|
.mdl-gen:not(.mdl-gen--selecting-accent) .mdl-gen-color.is-accent:after {
|
|
content: 'A';
|
|
line-height: 130px;
|
|
}
|
|
}
|