Skip to content

Commit e908d0a

Browse files
amarantha-kamarantha-k
authored
Merge pull request #22 from rakeshAlgo/style-guide-ui
Style and add functionality for tab design
2 parents 7adbb8a + 78b5aa5 commit e908d0a

File tree

4 files changed

+214
-138
lines changed

4 files changed

+214
-138
lines changed

‎preview-src/index.adoc‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,21 @@ Installation will vary based on your operation system.
6565
<li>
6666
<p><a id="tabset1_debian"></a>Debian</p>
6767
</li>
68+
<li>
69+
<p><a id="tabset1_test1"></a>Test1</p>
70+
</li>
71+
<li>
72+
<p><a id="tabset1_test2"></a>Test2</p>
73+
</li>
74+
<li>
75+
<p><a id="tabset1_test3"></a>Test3</p>
76+
</li>
77+
<li>
78+
<p><a id="tabset1_test4"></a>Test4</p>
79+
</li>
80+
<li>
81+
<p><a id="tabset1_test5"></a>Test5</p>
82+
</li>
6883
</ul>
6984
</div>
7085
<div class="content">
@@ -83,10 +98,36 @@ Installation will vary based on your operation system.
8398
<p>Content for Debian tab.</p>
8499
</div>
85100
</div>
101+
<div class="tab-pane" aria-labelledby="tabset1_test1">
102+
<div class="paragraph">
103+
<p>Content for test 1 tab.</p>
104+
</div>
105+
</div>
106+
<div class="tab-pane" aria-labelledby="tabset1_test2">
107+
<div class="paragraph">
108+
<p>Content for test 2 tab.</p>
109+
</div>
110+
</div>
111+
<div class="tab-pane" aria-labelledby="tabset1_test3">
112+
<div class="paragraph">
113+
<p>Content for test 3 tab.</p>
114+
</div>
115+
</div>
116+
<div class="tab-pane" aria-labelledby="tabset1_test4">
117+
<div class="paragraph">
118+
<p>Content for test 4 tab.</p>
119+
</div>
120+
</div>
121+
<div class="tab-pane" aria-labelledby="tabset1_test5">
122+
<div class="paragraph">
123+
<p>Content for test 5 tab.</p>
124+
</div>
125+
</div>
86126
</div>
87127
</div>
88128
++++
89129

130+
90131
== Admonition Blocks
91132

92133
Let's take a brief pause to look at some admonition blocks.

‎src/css/doc.css‎

Lines changed: 132 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -600,7 +600,8 @@
600600
content: "";
601601
display: inline-block;
602602
background:
603-
transparent linear-gradient(
603+
transparent
604+
linear-gradient(
604605
180deg,
605606
#f1f7fe0d 0%,
606607
#f1f7fe40 18%,
@@ -817,23 +818,30 @@ code.language-console.hljs.shell {
817818

818819
.doc .tabs li {
819820
align-items: center;
820-
border: 1px solid var(--color-brand-white);
821-
border-top: 3px solid var(--color-brand-white);
821+
/* border: 1px solid var(--color-brand-white);
822+
border-top: 3px solid var(--color-brand-white); */
822823
border-bottom: 0;
823824
cursor: pointer;
824825
display: flex;
826+
justify-content: center;
825827
font-weight: var(--weight-semibold);
826828
height: 2.5rem;
827829
line-height: 1;
828830
padding: 0;
829831
position: relative;
830-
margin-right: var(--base-space);
832+
margin-right: var(--base-large-space);
831833
}
832834

833835
.doc .tabs li + li {
834836
margin-top: 0;
835837
}
836838

839+
.doc .tabs li a {
840+
font-family: "Source Sans Pro", sans-serif;
841+
color: var(--color-brand-primary);
842+
font-weight: var(--weight-semibold);
843+
}
844+
837845
.doc .tabs li:last-child {
838846
margin-right: 0;
839847
}
@@ -878,6 +886,7 @@ code.language-console.hljs.shell {
878886
.doc .tabset > .content {
879887
/* border: 1px solid var(--color-brand-gray6); */
880888
padding-top: 0.75rem;
889+
width: 100%;
881890
/* border-radius: 3px; */
882891
}
883892

@@ -890,132 +899,145 @@ code.language-console.hljs.shell {
890899
margin-top: 0;
891900
}
892901

893-
/* Media css */
902+
/* Dropdown button functionaltiy css */
894903

895-
@media screen and (min-width: 840px) {
896-
.active-tab-item-row,
897-
.tabset .dropddown-btn {
898-
display: none;
899-
}
904+
.tabset .dropddown-btn {
905+
display: none;
906+
}
900907

901-
.doc .tabs ul.hide {
902-
display: none;
903-
}
908+
.doc .tabs ul.hide {
909+
display: none;
904910
}
905911

906-
@media screen and (max-width: 840px) {
907-
.tabset {
908-
position: relative;
909-
margin-top: 2rem;
910-
display: flex;
911-
justify-content: flex-start;
912-
flex-wrap: wrap;
913-
width: 100%;
914-
}
912+
.tabset {
913+
position: relative;
914+
margin-top: 2rem;
915+
display: flex;
916+
justify-content: flex-start;
917+
flex-wrap: wrap;
918+
width: 100%;
919+
}
915920

916-
.active-tab-item-row {
917-
display: inline-block;
918-
max-width: 60%;
919-
}
921+
/* .active-tab-item-row {
922+
display: inline-block;
923+
max-width: 60%;
924+
} */
920925

921-
.active-tab-item-row a {
922-
align-items: center;
923-
color: var(--color-brand-gray1);
924-
border: 1px solid var(--color-border);
925-
border-bottom: 0;
926-
cursor: pointer;
927-
display: flex;
928-
font-weight: var(--weight-bold);
929-
min-height: 2.5rem;
930-
line-height: 1;
931-
/* margin-right: 0.25rem; */
932-
padding: 0 1.5rem 5px;
933-
position: relative;
934-
text-decoration: none;
935-
}
926+
/* .active-tab-item-row a {
927+
align-items: center;
928+
color: var(--color-brand-gray1);
929+
border: 1px solid var(--color-border);
930+
border-bottom: 0;
931+
cursor: pointer;
932+
display: flex;
933+
font-weight: var(--weight-bold);
934+
min-height: 2.5rem;
935+
line-height: 1;
936+
padding: 0 1.5rem 5px;
937+
position: relative;
938+
text-decoration: none;
939+
}
936940
937-
.active-tab-item-row a::after {
938-
background-color: var(--color-brand-white);
939-
content: "";
940-
display: block;
941-
height: 3px;
942-
/* Chrome doesn't always paint the line accurately, so add a little extra */
943-
position: absolute;
944-
bottom: -1.5px;
945-
left: 0;
946-
right: 0;
947-
}
941+
.active-tab-item-row a::after {
942+
background-color: var(--color-brand-white);
943+
content: "";
944+
display: block;
945+
height: 3px;
946+
position: absolute;
947+
bottom: -1.5px;
948+
left: 0;
949+
right: 0;
950+
} */
951+
.ulist.tabs {
952+
margin: 0;
953+
width: 100%;
954+
display: flex;
955+
}
948956

949-
.ulist.tabs {
950-
margin: 0;
951-
position: relative;
952-
}
957+
.other-tab-box {
958+
position: relative;
959+
margin-left: var(--base-large-space);
960+
}
953961

954-
.doc .tabs .dropddown-btn {
955-
width: 100%;
956-
height: 100%;
957-
display: flex;
958-
align-items: center;
959-
color: #333;
960-
border-bottom: 1px solid var(--color-border);
961-
padding-left: 0.5rem;
962-
}
962+
.doc .tabs .dropddown-btn {
963+
width: 100%;
964+
height: 100%;
965+
display: flex;
966+
align-items: center;
967+
color: var(--color-brand-blue-secondary);
968+
font-family: "Source Sans Pro", sans-serif;
969+
font-weight: var(--weight-normal);
970+
/* border-bottom: 1px solid var(--color-border); */
971+
}
963972

964-
.doc .tabs .dropddown-btn .fas {
965-
font-size: 18px;
966-
margin-left: 10px;
967-
}
973+
.doc .tabs .dropddown-btn .fas {
974+
font-size: 18px;
975+
margin-left: 10px;
976+
}
968977

969-
.doc .tabs .dropddown-btn:focus,
970-
.doc .tabs .dropddown-btn:hover {
971-
outline: none;
972-
text-decoration: none;
973-
}
978+
.doc .tabs .dropddown-btn:focus,
979+
.doc .tabs .dropddown-btn:hover {
980+
outline: none;
981+
text-decoration: none;
982+
}
974983

975-
.doc .tabs ul {
976-
box-shadow: 0 3px 10px -3px #ccc;
977-
margin: 0;
978-
position: absolute;
979-
left: 0;
980-
top: 100%;
981-
width: 120px;
982-
display: none;
983-
overflow-y: auto;
984-
background-color: var(--color-brand-white);
985-
}
984+
.doc .tabs ul.other-tablist {
985+
box-shadow: 0 3px 10px #0000000f;
986+
border: 1px solid var(--color-brand-gray8);
987+
margin: 0;
988+
position: absolute;
989+
left: 0;
990+
top: 100%;
991+
width: 120px;
992+
display: none;
993+
overflow-y: auto;
994+
background-color: var(--color-brand-white);
995+
}
986996

987-
.doc .tabs ul p {
988-
color: var(--color-brand-gray1);
989-
}
997+
.doc .tabs ul.other-tablist p {
998+
width: 100%;
999+
height: 100%;
1000+
font-family: "Source Sans Pro", sans-serif;
1001+
display: flex;
1002+
justify-content: center;
1003+
align-items: center;
1004+
}
9901005

991-
.doc .tabset:not(.is-loading) .tabs li:not(.is-active) {
992-
background: var(--color-brand-white);
993-
min-height: 2.5rem;
994-
height: auto;
995-
padding: 0.75rem;
996-
}
1006+
/* .doc .tabset:not(.is-loading) .tabs li:not(.is-active) {
1007+
background: var(--color-brand-white);
1008+
min-height: 2.5rem;
1009+
height: auto;
1010+
padding: 0.75rem;
1011+
}
9971012
998-
.doc .tabs li.is-active {
999-
display: none;
1000-
}
1013+
.doc .tabs li.is-active {
1014+
display: none;
1015+
} */
10011016

1002-
.doc .tabs li {
1003-
width: 100%;
1004-
flex-wrap: wrap;
1005-
margin-right: var(--base-space);
1006-
border-top: 0;
1007-
border-bottom: 1px solid var(--color-border);
1008-
}
1017+
.doc .tabs ul.other-tablist li {
1018+
width: 100%;
1019+
flex-wrap: wrap;
1020+
margin-right: var(--base-space);
1021+
border-top: 0;
1022+
/* border-bottom: 1px solid var(--color-border); */
1023+
}
10091024

1010-
.doc .tabset > .content {
1011-
width: 100%;
1012-
}
1025+
.doc .tabs ul.other-tablist li.is-active p,
1026+
.doc .tabs ul.other-tablist li p:hover {
1027+
background-color: var(--color-brand-gray7);
1028+
}
10131029

1014-
.doc .tabs ul.show {
1015-
display: block;
1016-
}
1030+
.doc .tabs ul.other-tablist li.is-active::before,
1031+
.doc .tabs ul.other-tablist li:hover::before {
1032+
content: none;
1033+
}
1034+
1035+
.doc .tabs ul.other-tablist.show {
1036+
display: block;
10171037
}
10181038

1039+
/* Media css */
1040+
10191041
@media screen and (max-width: 767px) {
10201042
.doc h1 {
10211043
font-size: var(--heading-h1-sm);

0 commit comments

Comments
 (0)