feat(core): box shadow demo (#9182)

This commit is contained in:
William Tjondrosuharto
2021-01-30 07:28:07 +07:00
committed by Nathan Walker
parent d46f9562b4
commit 3bd2d96f29
9 changed files with 620 additions and 281 deletions

View File

@@ -5,17 +5,79 @@
The following CSS rule changes the font size of all UI
components that have the btn class name.
*/
.btn {
.btn-view-demo {
font-size: 18;
/* box-shadow: -5 -5 10 10 navy; */
box-shadow: -5 -5 rgba(0,0,0,0.5);
background-color: #add8e6;
color: navy;
/* TODO: adding border radius breaks shadow */
/* border-radius: 10; */
background-color: #65ADF1;
border-radius: 5;
font-size: 17;
padding: 15;
font-weight: bold;
}
.bold{
font-weight: bold;
}
.controls Label {
font-size: 20;
font-weight: bold;
color: #333;
margin-top: 10;
}
.controls Button {
padding: 10 15;
margin: 5;
font-size: 17;
font-weight: bold;
color: #65ADF1;
border-radius: 5;
border-width: 1;
border-color: #65ADF1;
}
.box-shadow-demo .demo-component {
font-size: 20;
font-weight: bold;
color: #555;
border-color: #555;
margin: 10;
padding: 20 25;
text-transform: uppercase;
}
.box-shadow-demo .box-shadow-prop-controls {
padding: 10;
color: #333;
font-size: 17;
}
.box-shadow-demo .box-shadow-prop-controls TextField{
margin-left: 10;
padding: 5;
border-bottom-width: 1;
border-color: #65ADF1;
}
.box-shadow-demo .controls .description {
font-size: 15;
font-weight: normal;
color: #333;
margin-bottom: 10;
}
.box-shadow-demo .controls Button[selectedAttr=true] {
background-color: #65ADF1;
color: #fff;
}
.box-shadow-prop-controls .btn-apply {
background-color: #65ADF1;
color: #fff;
padding: 10 15;
border-radius: 4;
margin-left: 10;
font-size: 17;
font-weight: bold;
}