Skip to content

Commit c908e8e

Browse files
author
rakeshAlgo
committed
Fix tabset UI and functionality for mobile view
1 parent 38ac9df commit c908e8e

File tree

3 files changed

+145
-154
lines changed

3 files changed

+145
-154
lines changed

‎src/css/component-frame.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,7 @@
5252
top: 60px;
5353
border-radius: 4px;
5454
z-index: 1;
55-
border-radius: 4px;
56-
z-index: 1;
57-
box-shadow: 0px 3px 10px -4px var(--color-brand-gray8);
55+
box-shadow: 0 3px 10px -4px var(--color-brand-gray8);
5856
}
5957

6058
.frame-dropdown .frame-dropdown-list {

‎src/css/doc.css‎

Lines changed: 121 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -590,7 +590,8 @@
590590
content: "";
591591
display: inline-block;
592592
background:
593-
transparent linear-gradient(
593+
transparent
594+
linear-gradient(
594595
180deg,
595596
#f1f7fe0d 0%,
596597
#f1f7fe40 18%,
@@ -875,6 +876,7 @@ code.language-console.hljs.shell {
875876
.doc .tabset > .content {
876877
/* border: 1px solid var(--color-brand-gray6); */
877878
padding-top: 0.75rem;
879+
width: 100%;
878880
/* border-radius: 3px; */
879881
}
880882

@@ -887,155 +889,145 @@ code.language-console.hljs.shell {
887889
margin-top: 0;
888890
}
889891

890-
/* Media css */
891-
892-
@media screen and (min-width: 840px) {
893-
/* .active-tab-item-row, */
894-
.tabset .dropddown-btn {
895-
display: none;
896-
}
892+
/* Dropdown button functionaltiy css */
897893

898-
.doc .tabs ul.hide {
899-
display: none;
900-
}
894+
.tabset .dropddown-btn {
895+
display: none;
901896
}
902897

903-
@media screen and (min-width: 840px) {
904-
.tabset {
905-
position: relative;
906-
margin-top: 2rem;
907-
display: flex;
908-
justify-content: flex-start;
909-
flex-wrap: wrap;
910-
width: 100%;
911-
}
898+
.doc .tabs ul.hide {
899+
display: none;
900+
}
912901

913-
/* .active-tab-item-row {
914-
display: inline-block;
915-
max-width: 60%;
916-
} */
917-
918-
/* .active-tab-item-row a {
919-
align-items: center;
920-
color: var(--color-brand-gray1);
921-
border: 1px solid var(--color-border);
922-
border-bottom: 0;
923-
cursor: pointer;
924-
display: flex;
925-
font-weight: var(--weight-bold);
926-
min-height: 2.5rem;
927-
line-height: 1;
928-
padding: 0 1.5rem 5px;
929-
position: relative;
930-
text-decoration: none;
931-
}
902+
.tabset {
903+
position: relative;
904+
margin-top: 2rem;
905+
display: flex;
906+
justify-content: flex-start;
907+
flex-wrap: wrap;
908+
width: 100%;
909+
}
932910

933-
.active-tab-item-row a::after {
934-
background-color: var(--color-brand-white);
935-
content: "";
936-
display: block;
937-
height: 3px;
938-
position: absolute;
939-
bottom: -1.5px;
940-
left: 0;
941-
right: 0;
942-
} */
943-
944-
.ulist.tabs {
945-
margin: 0;
946-
947-
width: 100%;
948-
display: flex;
949-
}
911+
/* .active-tab-item-row {
912+
display: inline-block;
913+
max-width: 60%;
914+
} */
950915

951-
.other-tab-box {
952-
position: relative;
953-
margin-left: var(--base-large-space);
954-
}
916+
/* .active-tab-item-row a {
917+
align-items: center;
918+
color: var(--color-brand-gray1);
919+
border: 1px solid var(--color-border);
920+
border-bottom: 0;
921+
cursor: pointer;
922+
display: flex;
923+
font-weight: var(--weight-bold);
924+
min-height: 2.5rem;
925+
line-height: 1;
926+
padding: 0 1.5rem 5px;
927+
position: relative;
928+
text-decoration: none;
929+
}
955930
956-
.doc .tabs .dropddown-btn {
957-
width: 100%;
958-
height: 100%;
959-
display: flex;
960-
align-items: center;
961-
color: var(--color-brand-blue-secondary);
962-
font-family: "Source Sans Pro", sans-serif;
963-
font-weight: var(--weight-normal);
964-
/* border-bottom: 1px solid var(--color-border); */
965-
}
931+
.active-tab-item-row a::after {
932+
background-color: var(--color-brand-white);
933+
content: "";
934+
display: block;
935+
height: 3px;
936+
position: absolute;
937+
bottom: -1.5px;
938+
left: 0;
939+
right: 0;
940+
} */
941+
.ulist.tabs {
942+
margin: 0;
943+
width: 100%;
944+
display: flex;
945+
}
966946

967-
.doc .tabs .dropddown-btn .fas {
968-
font-size: 18px;
969-
margin-left: 10px;
970-
}
947+
.other-tab-box {
948+
position: relative;
949+
margin-left: var(--base-large-space);
950+
}
971951

972-
.doc .tabs .dropddown-btn:focus,
973-
.doc .tabs .dropddown-btn:hover {
974-
outline: none;
975-
text-decoration: none;
976-
}
952+
.doc .tabs .dropddown-btn {
953+
width: 100%;
954+
height: 100%;
955+
display: flex;
956+
align-items: center;
957+
color: var(--color-brand-blue-secondary);
958+
font-family: "Source Sans Pro", sans-serif;
959+
font-weight: var(--weight-normal);
960+
/* border-bottom: 1px solid var(--color-border); */
961+
}
977962

978-
.doc .tabs ul.other-tablist {
979-
box-shadow: 0px 3px 10px #0000000F;
980-
border: 1px solid var(--color-brand-gray8);
981-
margin: 0;
982-
position: absolute;
983-
left: 0;
984-
top: 100%;
985-
width: 120px;
986-
display: none;
987-
overflow-y: auto;
988-
background-color: var(--color-brand-white);
989-
}
963+
.doc .tabs .dropddown-btn .fas {
964+
font-size: 18px;
965+
margin-left: 10px;
966+
}
990967

991-
.doc .tabs ul.other-tablist p {
992-
width: 100%;
993-
height: 100%;
994-
font-family: "Source Sans Pro", sans-serif;
995-
display: flex;
996-
justify-content: center;
997-
align-items: center;
998-
}
968+
.doc .tabs .dropddown-btn:focus,
969+
.doc .tabs .dropddown-btn:hover {
970+
outline: none;
971+
text-decoration: none;
972+
}
999973

1000-
/* .doc .tabset:not(.is-loading) .tabs li:not(.is-active) {
1001-
background: var(--color-brand-white);
1002-
min-height: 2.5rem;
1003-
height: auto;
1004-
padding: 0.75rem;
1005-
}
974+
.doc .tabs ul.other-tablist {
975+
box-shadow: 0 3px 10px #0000000f;
976+
border: 1px solid var(--color-brand-gray8);
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+
}
1006986

1007-
.doc .tabs li.is-active {
1008-
display: none;
1009-
} */
987+
.doc .tabs ul.other-tablist p {
988+
width: 100%;
989+
height: 100%;
990+
font-family: "Source Sans Pro", sans-serif;
991+
display: flex;
992+
justify-content: center;
993+
align-items: center;
994+
}
1010995

1011-
.doc .tabs ul.other-tablist li {
1012-
width: 100%;
1013-
flex-wrap: wrap;
1014-
margin-right: var(--base-space);
1015-
border-top: 0;
1016-
/* border-bottom: 1px solid var(--color-border); */
1017-
}
996+
/* .doc .tabset:not(.is-loading) .tabs li:not(.is-active) {
997+
background: var(--color-brand-white);
998+
min-height: 2.5rem;
999+
height: auto;
1000+
padding: 0.75rem;
1001+
}
10181002
1003+
.doc .tabs li.is-active {
1004+
display: none;
1005+
} */
10191006

1020-
.doc .tabs ul.other-tablist li.is-active p,
1021-
.doc .tabs ul.other-tablist li p:hover {
1022-
background-color: var(--color-brand-gray7);
1023-
}
1007+
.doc .tabs ul.other-tablist li {
1008+
width: 100%;
1009+
flex-wrap: wrap;
1010+
margin-right: var(--base-space);
1011+
border-top: 0;
1012+
/* border-bottom: 1px solid var(--color-border); */
1013+
}
10241014

1025-
.doc .tabs ul.other-tablist li.is-active::before,
1026-
.doc .tabs ul.other-tablist li:hover::before {
1027-
content: none;
1028-
}
1015+
.doc .tabs ul.other-tablist li.is-active p,
1016+
.doc .tabs ul.other-tablist li p:hover {
1017+
background-color: var(--color-brand-gray7);
1018+
}
10291019

1030-
.doc .tabset > .content {
1031-
width: 100%;
1032-
}
1020+
.doc .tabs ul.other-tablist li.is-active::before,
1021+
.doc .tabs ul.other-tablist li:hover::before {
1022+
content: none;
1023+
}
10331024

1034-
.doc .tabs ul.other-tablist.show {
1035-
display: block;
1036-
}
1025+
.doc .tabs ul.other-tablist.show {
1026+
display: block;
10371027
}
10381028

1029+
/* Media css */
1030+
10391031
@media screen and (max-width: 767px) {
10401032
.doc h1 {
10411033
font-size: var(--heading-h1-sm);

0 commit comments

Comments
 (0)