Professional Documents
Culture Documents
Page 1 of
15
Contents
1
Fonts CSS....................................................................................................................................... 3
Text CSS........................................................................................................................................ 4
Crosstab CSS................................................................................................................................. 4
Dropdown CSS............................................................................................................................... 6
10
Dimension Filter......................................................................................................................... 8
11
12
Column chart............................................................................................................................. 9
13
Waterfall chart.......................................................................................................................... 10
14
Check Box................................................................................................................................ 11
15
16
17
Page 2 of
15
.marquee{
width: 200px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
font-weight:bold;
animation: marquee 19s linear infinite;
}
.marquee:hover {
animation-play-state: paused
}
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -100% } // depending on text length...
}
3 Fonts CSS
font-variant: small-caps;
font-style: italic;
font-size : 16px;
font-weight: bold;
background-color:green;
font-family: Arial;
4 Text CSS
color : blue;
text-align:center;
Page 3 of
15
text-decoration: underline;
text-shadow: 5px 5px 5px blue;
transform: scale(3,5);
transform: skew(20deg,30deg);
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
5 Crosstab CSS
.sapzencrosstab-HeaderCellDefault{
background-color: #404040 !important;
color: yellow
}
4) Remove all the Borders from Crosstab
.sapzencrosstab-TableDiv {
border: 0px;
}
.sapzencrosstab-VScrollTable {
border: 0px;
}
.sapzencrosstab-HScrollTable {
border: 0px;
}
.grid td
Page 5 of
15
7 Dropdown CSS
1) Change the default Dropdown style
.sapUiTfCombo {
padding:0 12px 0 0;
height:35px;
margin-top:1px;
border: solid 2px green;
border-radius:3px;
background:none;
}
.sapUiTfBack.sapUiTfStd {
padding:0 12px 0 0;
height:35px;
margin-top:1px;
border: solid 2px green;
border-radius:3px;
background:none;
}
.sapUiTf {
font-family: "Myriad Pro",Arial, Helvetica, sans-serif;
font-size:14px;
-webkit-appearance:none;
}
.sapUiTfStd
{
background-color: pink
;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: orange;
}
height:35px;
margin-top:3px;
color:green;
border: solid 3px pink;
background: yellow
}
.sapUiLbxI>span:first-child
{
padding-left:26px;
border-left: solid 4px #ffffff!important;
color:orange;
}
.sapUiLbxITxt {
white-space:nowrap;
font-size:14px;
height:35px;
color: #b2b5b9;
font-weight:bold;
cursor:pointer;
font-weight:400;
padding-left:26px;
}
.sapUiLbxStd>ul>.sapUiLbxISel>span, .sapUiLbxStd>ul>.sapUiLbxISel {
font-family: "Myriad Pro", Helvetica, Arial;
color:#29a75e;
background-color:#f4f5f5;
border-left: solid 4px #29a75e!important;
font-size:14px;
height:35px;
cursor:pointer;
font-weight:400;
border-radius:0px;
padding-left:26px!important;
}
Page 7 of
15
scrollbar-darkshadow-color:#225e84;
scrollbar-face-color:#225e84;
scrollbar-highlight-color:#ebebff;
}
.sapUiLbx li {
background:green;
color:orange;
}
color:purple;
background:#FFC000;
}
10 Dimension Filter
1)
12
Column chart
Page 9 of
15
Page 10 of
15
http://lea.verou.me/css3patterns/#rainbow-bokeh
13 Waterfall chart
1) Applying different colors to columns of the waterfall chart
.v-waterfallgroup:nth-child(1)
.v-waterfallgroup:nth-child(2)
.v-waterfallgroup:nth-child(3)
.v-waterfallgroup:nth-child(4)
Page 11 of
15
rect{
rect{
rect{
rect{
fill:cyan!important;}
fill:orange!important;}
fill:green!important;}
fill:blue!important;}
14 Check Box
1) Change color of Checkbox when checked
.sapUiCb input [type=checkbox] {
display:none;
}
.sapUiCb input [type=checkbox] + label {
padding-left:23px;
height:18px;
line-height:18px
display:inline-block;
background-repeat: no-repeat;
backgroubd-position:00;
vertical-align:middle;
cursor:pointer;
font-size:18px;
color:gray;
}
.sapUiCb input [type=checkbox]:checked + label {
background-position: 0-18px
color:green;
}
Page 12 of
15
{
width: 100px;
height: 100px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
Page 13 of
15
3) Save the CSS script given below as a separate style sheet (Create a notepad file
and save it as <name>.css).
.slideout
{
position: fixed;
top: 42px;
left:0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #fdcb03;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
cursor:pointer;
height:90% !important;
}
.slideout_inner
{
position: fixed;
top: 42px;
left: -300px;
height:93% !important;
background: #000000;
padding: 25px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-o-transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
}
.slideout:hover, .slideout:focus
{
left: 300px;
}
.slideout:hover .slideout_inner, .slideout:focus .slideout_inner
left: 0;
}
17
Page 14 of
15
1) Convert the chosen image to the image URI scheme (base64 encoded string) using
an online image URI converter. (ex: http://webcodertools.com/imagetobase64converter )
2) Copy the contents of CSS background and paste it in a class in the CSS file.
3) Drag and drop a Textbox in the application. Now give the CSS Class name (URI)
and set the height and width according to the properties of the original image.
4) Another way to insert the image URI in a Textbox is through the CSS Style in
Properties. Insert the same code that you put in the class in step 2.
Page 15 of
15