Design Studio CSS

Design Studio CSS

Author: Sandeep Oberoi
Date:07th July 2016

Page 1 of
15

Design Studio CSS

Contents
1

Horizontal Marquee CSS............................................................................................................... 3

Vertical Marquee CSS.................................................................................................................... 3

Fonts CSS....................................................................................................................................... 3

Text CSS........................................................................................................................................ 4

Crosstab CSS................................................................................................................................. 4

Grid Layout CSS............................................................................................................................ 6

Dropdown CSS............................................................................................................................... 6

List Box CSS.................................................................................................................................. 7

Filter Panel Button......................................................................................................................... 8

10

Dimension Filter......................................................................................................................... 8

11

Chart Type Picker...................................................................................................................... 8

12

Column chart............................................................................................................................. 9

13

Waterfall chart.......................................................................................................................... 10

14

Check Box................................................................................................................................ 11

15

Sliding Box changing colors along the 4 Quadrants............................................................11

16

Sliding Panel CSS....................................................................................................................12

17

Using Image URIs in SAP Design Studio...............................................................................13

Horizontal Marquee CSS

Page 2 of
15

Design Studio CSS

.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...
}

2 Vertical Marquee CSS

.marquee2 {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee_new 7s linear infinite;
}
.marquee2:hover {
animation-play-state: paused;
}
@keyframes marquee_new {
0% { top: 100% }
100% { top: 0% }
}

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

Design Studio CSS

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

1) Changing color of Alternating Data Cells in Crosstab

.sapzencrosstab-DataCellAlternating {
background-color: #404040!important;
color:#ffffff
}
.sapzencrosstab-HeaderCellAlternating {
background-color: #404040 !important;
color:#ffffff
}
2) Change color on hover on data in crosstab
.sapzencrosstab-DataCellContentDiv:hover {
background-color: purple !important;
}
.sapzencrosstab-HeaderCellContentDiv:hover {
background-color: purple !important;
}
3) Changing color of all Data Cells in Crosstab
.sapzencrosstab-DataCellDefault {
background-color: #404040 !important;
color:yellow
}
Page 4 of
15

Design Studio 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;
}

5) Text Wrapping & to increase the data cell size in Crosstab

.sapzencrosstab-DataCellContentDiv {
white-space:normal!important;
word-break:break-all!important;
height:25px!important;
}
.sapzencrosstab-HeaderCellContentDiv {
white-space:normal!important;
word-break:break-all!important;
height:25px!important;
}

6) Change the Color of the Column Header Area

.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault,
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellAlternating ,
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault,
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellAlternating
color: white;
background-image: none !important;
background-color: #A7C942 !important;
}

6 Grid Layout CSS

1) Apply border & background color to the Grid

.grid td

Page 5 of
15

Design Studio CSS

border:2px solid black;

background-color : yellow;
}

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;
}

2) Change the style on hover

.sapUiTfBrd.sapUiTfFoc .sapUiTfCombo:hover {
padding:0 26px 0 0;
Page 6 of
15

Design Studio CSS

height:35px;
margin-top:3px;
color:green;
border: solid 3px pink;
background: yellow
}

3) Change the style of the List Items default & all

.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;
}

8 List Box CSS

4) Change the color of the List Box
.sapUiLbx
{
background: yellow;
scrollbar-arrow-color:#225e84;
scrollbar-base-color:#ebebff;

Page 7 of
15

Design Studio CSS

scrollbar-darkshadow-color:#225e84;
scrollbar-face-color:#225e84;
scrollbar-highlight-color:#ebebff;
}

5) Change the color of the List Elements

.sapUiLbx li {
background:green;
color:orange;
}

6) Change the color when an element is selected from the List

.sapUiLbxStd > ul > .sapUiLbxISel>span, .sapUiLbxstd > ul > .span

color:purple;
background:#FFC000;
}

9 Filter Panel Button

1) Customize the Filter Panel Navigation Button
.sapzenfilterpanel-ModeFilteringNavigation .sapUiSegmentedButton>span>.sapUiBtnS.sapU
iBtnStd.sapzenfilterpanel-ShowNavigationButton {
background-image: custom image !important;
}
.sapzenfilterpanel-ModeNavigation .sapUiSegmentedButton>span>.sapUiBtnS.sapUiBtnStd
.sapzenfilterpanel-ShowNavigationButton
{
background-image: custom image !important;
}
Page 8 of
15

Design Studio CSS

10 Dimension Filter
1)

Hide Tab Strip in the Dimension Filter

.sapzenfilterpanel-Tabstrip > .sapUiTabBar

display:none;
}

11 Chart Type Picker

1) To display only the even menu options
.viz-controls-switchbar-switcher:nth-child(odd)
display:none;
}

2) To display only the odd menu options

.viz-controls-switchbar-switcher:nth-child(even)
display:none;
}

3) To display a particular menu option

.viz-controls-switchbar-switcher
{
display:none;
}
.viz-controls-switchbar-switcher:nth-child(1)
display:block ;
}

4) To display particular menu options selection (0 to 2):

.viz-controls-switchbar-switcher
{
display:none;
}
.viz-controls-switchbar-switcher:nth-child(-n+2)
display:block ;
}

12

Column chart

1) Increase the width & color of a Column in Column Chart

g.v-m-main g.v-m-plot g.v-column:nth-child(1) .v-datapoint.v-morphable-datapoint
{
fill: orange;

Page 9 of
15

Design Studio CSS

width: 45px; !important

}

2) Applying Gradient fill to a column in column chart

g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {
background-color: #9e9e9e;
background-image: linear-gradient(to bottom, #9e9e9e, #454545);
}
Gradient Patterns for CSS :

Page 10 of
15

http://lea.verou.me/css3patterns/#rainbow-bokeh

Design Studio CSS

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;}

Design Studio CSS

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;
}

15 Sliding Box changing colors along the 4 Quadrants

.sample

Page 12 of
15

{
width: 100px;
height: 100px;
background: red;

Design Studio CSS

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;}
}

16 Sliding Panel CSS

1) Insert a panel in the application and set its layout attributes as required.Insert a
Grid Box in it
2) Insert a Grid Layout inside the panel and set its layout attributes as required. All
components to be shown in the navigation panel are to be contained in the Grid
Layout (it is preferable to set the width of the Grid Layout to an absolute value to
ensure that the transition works seamlessly).

Page 13 of
15

Design Studio CSS

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

Using Image URIs in SAP Design Studio

Page 14 of
15

Design Studio CSS

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