update doc stylings

This commit is contained in:
shrushti2000 2025-09-24 23:37:04 +05:30
parent 9688858b13
commit 1a1c1ca3f8

View File

@ -18,7 +18,7 @@
display: flex;
align-items: center;
gap: @padding-xs;
margin-bottom: @size-sm - 2px;
padding: @size-lg;
.sso-provider-icon {
display: flex;
@ -31,6 +31,7 @@
font-weight: 600;
color: @grey-900;
line-height: @size-lg;
font-size: 18px;
}
}
@ -41,7 +42,7 @@
h4,
h5,
h6 {
font-size: @font-size-base;
font-size: 18px;
font-weight: 600;
line-height: @size-mlg;
padding-bottom: @size-xs;
@ -53,17 +54,14 @@
background: @primary-50;
border-left: @size-xxs solid @primary-6;
box-shadow: @box-shadow-highlight-light;
animation: highlightPulse 0.6s ease-in-out;
margin: 0;
&[data-highlight-position='first'] {
padding-left: @size-xs;
padding-top: @size-xs;
padding-bottom: @size-xs;
border-bottom: none;
h3 {
padding: 0;
padding: 0 @size-lg;
}
}
@ -88,10 +86,21 @@
h3 {
color: @grey-800;
font-size: @font-size-base;
font-size: 18px;
padding: 0 @size-lg;
font-weight: 600;
border-bottom: none;
padding-bottom: @padding-xs;
margin: 24px 0px 10px 0px;
// Add margin after the entire section (after h3 and its siblings)
~ h3 {
margin-top: @size-lg;
}
~ ul {
padding: 0 @size-lg 0 40px;
}
}
h4 {
@ -100,19 +109,23 @@
font-weight: 600;
}
h6 {
font-size: 18px;
}
ul {
margin-bottom: @padding-md;
padding: 0 @size-lg @size-md @size-lg + @size-mlg;
margin-bottom: @size-lg;
&[data-highlighted='true'] {
background: @primary-50;
border-left: @size-xxs solid @primary-6;
margin: 0;
animation: highlightPulse 0.6s ease-in-out;
&[data-highlight-position='first'] {
border-bottom: none;
padding-left: @size-xs;
padding-left: @size-lg + @size-mlg;
}
&[data-highlight-position='middle'] {
@ -129,12 +142,18 @@
}
li {
margin-bottom: @padding-xs;
margin-bottom: @padding-xss;
line-height: @size-sm + 2px;
font-size: @font-size-base;
font-weight: 400;
color: @grey-800;
// Remove padding for paragraphs inside list items
p {
padding: 0 !important;
margin: 0 0 @size-lg 0;
}
strong {
color: @grey-800;
font-weight: 600;
@ -143,35 +162,44 @@
}
p {
margin-bottom: @padding-md;
margin-top: 0;
padding: 0 @size-lg;
margin-bottom: @size-lg;
line-height: @size-mlg;
font-size: @font-size-base;
font-weight: 400;
color: @grey-800;
// Remove padding for paragraphs that can be highlighted
&[data-highlighted] {
padding: 0 !important;
}
&[data-highlighted='true'] {
background: @primary-50;
border: 1px solid @primary-6;
border-left: @size-xxs solid @primary-6;
padding: @padding-mlg @padding-md;
margin: 0;
animation: highlightPulse 0.6s ease-in-out;
&[data-highlight-position='first'] {
border-radius: @border-rad-sm @border-rad-sm 0 0;
border-bottom: none;
margin: 0px;
padding: 0px !important;
}
&[data-highlight-position='middle'] {
border-radius: 0;
border-top: none;
border-bottom: none;
padding: 0px;
}
&[data-highlight-position='last'] {
border-radius: 0 0 @border-rad-sm @border-rad-sm;
border-top: none;
padding: 0px !important;
margin: 0px !important;
}
}
}
@ -227,21 +255,3 @@
}
}
}
@keyframes highlightPulse {
0% {
transform: translateX(-@size-xxs / 2);
box-shadow: 0 0 0 rgba(21, 112, 239, 0.3);
border-left-width: @size-xxs;
}
50% {
transform: translateX(0);
box-shadow: @box-shadow-highlight-medium;
border-left-width: @border-rad-xs - @size-xxs;
}
100% {
transform: translateX(0);
box-shadow: @box-shadow-highlight-light;
border-left-width: @size-xxs;
}
}