mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 13:39:39 +08:00
!3637 doc(#I66WLV): add css isolation for demo component
* chore: 增加 PageLayout Logo 样式 * chore: 更新 footer 样式 * refactor: 更新走马灯样式 * Merge branch 'main' into web/css * chore: 移动 BB-Icon 样式 * refactor: 移动悬浮按钮样式 * refactor: 移动 Footer-Body 样式 * chore: 更新组件样式 * refactor: 移动组件样式 * refactor: 移动 widget 到 PageLayout * chore: 移动 PageLayout 样式 * chore: 移动打印样式 * chore: 移动 Splits 样式 * chore: 移动 Drawer 样式到组件内部 * chore: 移动 circle 样式到组件内 * chore: 更新 Layout 示例组件 * Merge branch 'main' into web/css * chore: 移动 calendar 样式 * refactor: 移除 div 节点 * chore: 移动菜单样式 * chore: 移除不使用的样式 * refactor: 移除 layout-logo 样式 * chore: 移除不使用的样式 * chore: 移动 card-log 样式
This commit is contained in:
Argo
parent
f4ff2384ce
commit
d8fba49e28
12
src/BootstrapBlazor.Shared/Components/BlockLogger.razor.css
Normal file
12
src/BootstrapBlazor.Shared/Components/BlockLogger.razor.css
Normal file
@ -0,0 +1,12 @@
|
||||
.card-log {
|
||||
overflow: hidden auto;
|
||||
border: solid 1px #ddd;
|
||||
border-radius: var(--bs-border-radius);
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #174482;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-log .log-item:not(:last-child) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
.coms-cate {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coms-cate:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.coms-cate ::deep .badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-left: 1rem;
|
||||
font-size: .65rem;
|
||||
}
|
||||
|
||||
.coms-demo {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.coms-demo ::deep .card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: box-shadow .3s linear;
|
||||
}
|
||||
|
||||
.coms-demo ::deep .card img {
|
||||
max-width: calc(100%);
|
||||
}
|
||||
|
||||
.coms-demo ::deep .card .card-header {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.coms-demo ::deep .card .card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.coms-demo ::deep a {
|
||||
width: calc(100%);
|
||||
height: calc(100%);
|
||||
color: inherit;
|
||||
}
|
||||
@ -47,6 +47,7 @@ public sealed partial class DemoBlock
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string? TooltipText { get; set; }
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IStringLocalizer<DemoBlock>? Localizer { get; set; }
|
||||
|
||||
26
src/BootstrapBlazor.Shared/Pages/Coms.razor.css
Normal file
26
src/BootstrapBlazor.Shared/Pages/Coms.razor.css
Normal file
@ -0,0 +1,26 @@
|
||||
.coms-search {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.coms-search .row {
|
||||
padding: 1rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.coms-search-filter {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.8),rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.coms-search {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.coms-search.hide {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@ -53,7 +53,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<Carousel class="bar">
|
||||
<Carousel>
|
||||
<CarouselItem>
|
||||
<CaptionTemplate>
|
||||
<h5>@Localizer["CarouselH1"]</h5>
|
||||
|
||||
196
src/BootstrapBlazor.Shared/Pages/Index.razor.css
Normal file
196
src/BootstrapBlazor.Shared/Pages/Index.razor.css
Normal file
@ -0,0 +1,196 @@
|
||||
.welcome {
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.welcome ::deep .carousel {
|
||||
padding: 1rem;
|
||||
height: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--bs-border-radius);
|
||||
border: 1px solid #dce3e8;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.welcome ::deep .carousel img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.welcome ::deep .carousel .carousel-caption {
|
||||
position: absolute;
|
||||
margin-top: 1rem;
|
||||
color: #607D8B;
|
||||
border-top: solid 1px #dce3e8;
|
||||
height: 120px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.welcome ::deep .carousel .carousel-indicators li {
|
||||
background-color: #607D8B;
|
||||
}
|
||||
|
||||
.welcome-header {
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 1rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.welcome-body {
|
||||
font-size: 22px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.welcome-body .typed {
|
||||
color: #0073dc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.welcome-body .typed-cursor {
|
||||
color: #0073dc;
|
||||
}
|
||||
|
||||
.welcome-body .typed-cursor {
|
||||
animation: flash 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.welcome-body .typed-cursor.active {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.welcome-body-en {
|
||||
font-size: 32px;
|
||||
margin-top: 2rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.welcome-body-en .typed {
|
||||
color: #0073dc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.welcome-footer div:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.welcome-footer div {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.welcome-footer .tag {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
font-size: 15px;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: .41px;
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.intro h3 {
|
||||
color: #1a1a1a;
|
||||
letter-spacing: .1px;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
font-weight: 400;
|
||||
margin: 15px 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.donate {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
text-align: center;
|
||||
border-top: solid 1px #ddd;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.donate h3 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.donate .barcode {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.intro .card {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.intro .card {
|
||||
border-color: #dce3e8;
|
||||
height: 263px;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.intro .card:hover,
|
||||
.coms-demo .card:hover {
|
||||
box-shadow: 0 1px 7px 0 rgba(0,0,0,0.05), 0 2px 8px 0 rgba(0,0,0,0.07), 0 3px 9px 0 rgba(0,0,0,0.06), 0 5px 10px 0 rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.intro .card p, .intro .card, .intro .card h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.welcome-header {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.donate .barcode {
|
||||
width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.welcome ::deep .carousel {
|
||||
height: 456px;
|
||||
}
|
||||
|
||||
.welcome-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.welcome ::deep .carousel {
|
||||
height: 520px;
|
||||
}
|
||||
}
|
||||
@ -1,127 +1,125 @@
|
||||
@page "/calendars"
|
||||
@inject IStringLocalizer<Calendars> Localizer
|
||||
|
||||
<div>
|
||||
<h3>@Localizer["Title"]</h3>
|
||||
<h3>@Localizer["Title"]</h3>
|
||||
|
||||
<h4>@Localizer["SubTitle"]</h4>
|
||||
<h4>@Localizer["SubTitle"]</h4>
|
||||
|
||||
<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
|
||||
<Calendar ValueChanged="@OnValueChanged" />
|
||||
<BlockLogger @ref="Trace" class="mt-3" />
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
|
||||
<Calendar ValueChanged="@OnValueChanged" />
|
||||
<BlockLogger @ref="Trace" class="mt-3" />
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["BindTitle"]" Introduction="@Localizer["BindIntro"]" Name="Bind">
|
||||
<Calendar @bind-Value="@BindValue" />
|
||||
<BootstrapInput @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["BindTitle"]" Introduction="@Localizer["BindIntro"]" Name="Bind">
|
||||
<Calendar @bind-Value="@BindValue" />
|
||||
<BootstrapInput @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["CellTemplateTitle"]" Introduction="@Localizer["CellTemplateIntro"]" Name="CellTemplate">
|
||||
<Calendar>
|
||||
<CellTemplate>
|
||||
<td class="@context.DefaultCss">
|
||||
<div class="calendar-day">
|
||||
<div>@context.CellValue.Day</div>
|
||||
</div>
|
||||
</td>
|
||||
</CellTemplate>
|
||||
</Calendar>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["CellTemplateTitle"]" Introduction="@Localizer["CellTemplateIntro"]" Name="CellTemplate">
|
||||
<Calendar>
|
||||
<CellTemplate>
|
||||
<td class="@context.DefaultCss">
|
||||
<div class="calendar-day">
|
||||
<div>@context.CellValue.Day</div>
|
||||
</div>
|
||||
</td>
|
||||
</CellTemplate>
|
||||
</Calendar>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewModel">
|
||||
<Calendar ViewMode="CalendarViewMode.Week" />
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewModel">
|
||||
<Calendar ViewMode="CalendarViewMode.Week" />
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["AppTitle"]" Introduction="@Localizer["AppIntro"]" Name="App">
|
||||
<p>@((MarkupString)Localizer["AppText"].Value)</p>
|
||||
<Calendar ViewMode="CalendarViewMode.Week">
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td rowspan="4"><div class="less ch">@Localizer["Chinese"]</div></td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["Chinese"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td rowspan="3"><div class="less en">@Localizer["English"]</div></td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="background-color: #f8f9fa;" colspan="7">午休</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["Chinese"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
</Calendar>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["AppTitle"]" Introduction="@Localizer["AppIntro"]" Name="App">
|
||||
<p>@((MarkupString)Localizer["AppText"].Value)</p>
|
||||
<Calendar ViewMode="CalendarViewMode.Week">
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td rowspan="4"><div class="less ch">@Localizer["Chinese"]</div></td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["Chinese"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td rowspan="3"><div class="less en">@Localizer["English"]</div></td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="background-color: #f8f9fa;" colspan="7">午休</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["Chinese"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td>@Localizer["Math"]</td>
|
||||
<td>@Localizer["English"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td>@Localizer["Study"]</td>
|
||||
<td class="none">@Localizer["None"]</td>
|
||||
</tr>
|
||||
</Calendar>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["CellTemplateDemoTitle"]" Introduction="@Localizer["CellTemplateDemoIntro"]" Name="CellTemplateDemo">
|
||||
<Calendar @bind-Value="CrewInfoValue">
|
||||
<CellTemplate>
|
||||
<td class="@context.DefaultCss">
|
||||
<CalendarCrewCell @bind-Value="@context" Crews="GetCrewsByDate(context.CellValue)" />
|
||||
</td>
|
||||
</CellTemplate>
|
||||
</Calendar>
|
||||
<div class="mt-2 sum">
|
||||
<b>@Localizer["CellTemplateDemoSummary"]</b>
|
||||
<div class="row g-2 mt-1">
|
||||
@foreach (var crew in CalendarDemoDataHelper.Crews)
|
||||
{
|
||||
<div class="col-12">
|
||||
<div>@crew.Name</div>
|
||||
<div>@GetSumByName(crew.Name)</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<DemoBlock Title="@Localizer["CellTemplateDemoTitle"]" Introduction="@Localizer["CellTemplateDemoIntro"]" Name="CellTemplateDemo">
|
||||
<Calendar @bind-Value="CrewInfoValue">
|
||||
<CellTemplate>
|
||||
<td class="@context.DefaultCss">
|
||||
<CalendarCrewCell @bind-Value="@context" Crews="GetCrewsByDate(context.CellValue)" />
|
||||
</td>
|
||||
</CellTemplate>
|
||||
</Calendar>
|
||||
<div class="mt-2 sum">
|
||||
<b>@Localizer["CellTemplateDemoSummary"]</b>
|
||||
<div class="row g-2 mt-1">
|
||||
@foreach (var crew in CalendarDemoDataHelper.Crews)
|
||||
{
|
||||
<div class="col-12">
|
||||
<div>@crew.Name</div>
|
||||
<div>@GetSumByName(crew.Name)</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</DemoBlock>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
|
||||
<AttributeTable Items="@GetAttributes()" />
|
||||
<AttributeTable Items="@GetAttributes()" />
|
||||
|
||||
<EventTable Items="@GetEvents()" />
|
||||
</div>
|
||||
<EventTable Items="@GetEvents()" />
|
||||
|
||||
@ -6,3 +6,31 @@
|
||||
margin-right: 1rem;
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
::deep + .calendar .table-week tbody .none {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
::deep + .calendar .table-week tbody .less {
|
||||
border-radius: var(--bs-border-radius);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 4px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
::deep + .calendar .table-week tbody .ch {
|
||||
background: #28a745;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
::deep + .calendar .table-week tbody .en {
|
||||
background: #007bff;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
21
src/BootstrapBlazor.Shared/Samples/Circles.razor.css
Normal file
21
src/BootstrapBlazor.Shared/Samples/Circles.razor.css
Normal file
@ -0,0 +1,21 @@
|
||||
.circle-demo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.circle-demo h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.circle-demo i {
|
||||
font-style: normal;
|
||||
color: #3f414d;
|
||||
}
|
||||
@ -118,10 +118,10 @@
|
||||
<Tips>
|
||||
@((MarkupString)Localizer["Tips1"].Value)
|
||||
</Tips>
|
||||
<div style="width: 100%; height: 300px; border: 1px solid rgba(0,0,0,.125);">
|
||||
<div class="layout-demo layout-demo1">
|
||||
<Layout ShowFooter="true" SideWidth="160px">
|
||||
<Header>
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
|
||||
<div class="d-flex justify-content-center align-items-center header">Header</div>
|
||||
</Header>
|
||||
<Side>
|
||||
<div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; overflow: auto; border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
|
||||
@ -132,17 +132,17 @@
|
||||
<div style="padding: 1rem;">Main</div>
|
||||
</Main>
|
||||
<Footer>
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
|
||||
<div class="d-flex justify-content-center align-items-center footer">Footer</div>
|
||||
</Footer>
|
||||
</Layout>
|
||||
</div>
|
||||
<p class="mt-3">
|
||||
@Localizer["P5"]
|
||||
</p>
|
||||
<div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
|
||||
<div class="layout-demo layout-demo2">
|
||||
<Layout ShowFooter="true" SideWidth="160px">
|
||||
<Header>
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
|
||||
<div class="d-flex justify-content-center align-items-center header">Header</div>
|
||||
</Header>
|
||||
<Side>
|
||||
<div style="border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
|
||||
@ -153,7 +153,7 @@
|
||||
<div style="padding: 1rem;">Main</div>
|
||||
</Main>
|
||||
<Footer>
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
|
||||
<div class="d-flex justify-content-center align-items-center footer">Footer</div>
|
||||
</Footer>
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
60
src/BootstrapBlazor.Shared/Samples/Layouts.razor.css
Normal file
60
src/BootstrapBlazor.Shared/Samples/Layouts.razor.css
Normal file
@ -0,0 +1,60 @@
|
||||
.header {
|
||||
background: #7dbcea;
|
||||
color: #fff;
|
||||
height: 64px;
|
||||
padding: 0 50px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.main {
|
||||
background: rgba(16, 142, 233, 1);
|
||||
color: #fff;
|
||||
min-height: 120px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #7dbcea;
|
||||
color: #fff;
|
||||
padding: 24px 50px;
|
||||
line-height: 1.5;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layout-side .side {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layout .side {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background: #3ba0e9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layout-demo1 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
}
|
||||
|
||||
.layout-demo .header {
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
margin: 0 -1px;
|
||||
background-color: var(--bs-indigo);
|
||||
}
|
||||
|
||||
.layout-demo .footer {
|
||||
height: 30px;
|
||||
color: #212529;
|
||||
background-color: #dcdfe6;
|
||||
margin: 0 -1px;
|
||||
}
|
||||
55
src/BootstrapBlazor.Shared/Samples/Menus.razor.css
Normal file
55
src/BootstrapBlazor.Shared/Samples/Menus.razor.css
Normal file
@ -0,0 +1,55 @@
|
||||
::deep + .layout-menu-demo .layout-side {
|
||||
background-color: var(--bb-disabled-bg);
|
||||
color: #dcdfe6;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .menu.is-vertical:not(.is-collapsed) {
|
||||
width: 156px;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .layout-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .625rem;
|
||||
background-color: var(--bb-layout-sidebar-banner-background);
|
||||
height: 50px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .layout-banner img {
|
||||
width: 38px;
|
||||
border-radius: var(--bs-border-radius);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .layout-side.is-collapsed .layout-banner .layout-title {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .layout-menu {
|
||||
height: 371px;
|
||||
padding: 6px 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .layout-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .layout-header .layout-header-bar {
|
||||
position: absolute;
|
||||
margin: 9px 14px;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .layout-footer {
|
||||
background-color: #e4e7ed;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::deep + .layout-menu-demo .layout-footer > a {
|
||||
color: #000;
|
||||
line-height: 30px;
|
||||
}
|
||||
5
src/BootstrapBlazor.Shared/Samples/PrintView.razor.css
Normal file
5
src/BootstrapBlazor.Shared/Samples/PrintView.razor.css
Normal file
@ -0,0 +1,5 @@
|
||||
@media print {
|
||||
.print-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
21
src/BootstrapBlazor.Shared/Samples/Splits.razor.css
Normal file
21
src/BootstrapBlazor.Shared/Samples/Splits.razor.css
Normal file
@ -0,0 +1,21 @@
|
||||
.split-demo {
|
||||
height: 200px;
|
||||
width: 240px;
|
||||
border-color: rgba(0,0,0,.125);
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.split-demo-horizontal {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@media (min-width: 568px) {
|
||||
.split-demo {
|
||||
height: 200px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.split-demo-horizontal {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
@ -38,11 +38,13 @@
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ms-md-3" target="_blank" href="@DownloadUrl">@DownloadText</a>
|
||||
</header>
|
||||
|
||||
@Body
|
||||
<div>
|
||||
@Body
|
||||
|
||||
<LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="_content/BootstrapBlazor.Shared/images/log.svg" />
|
||||
<LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="_content/BootstrapBlazor.Shared/images/log.svg" />
|
||||
|
||||
<ThemeChooser />
|
||||
<ThemeChooser />
|
||||
</div>
|
||||
|
||||
@if (Installable)
|
||||
{
|
||||
|
||||
@ -15,6 +15,16 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.bb-icon,
|
||||
::deep .bb-icon {
|
||||
width: 42px;
|
||||
height: auto;
|
||||
border-radius: var(--bs-border-radius);
|
||||
background-color: var(--bs-info);
|
||||
border: solid 1px #fff;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
::deep .btn-search .btn {
|
||||
--bs-btn-bg: #8759ff;
|
||||
--bs-btn-color: #fff;
|
||||
@ -54,3 +64,47 @@
|
||||
height: 24px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
::deep .btn-fade {
|
||||
--bb-button-circle-width: 40px;
|
||||
--bb-button-circle-height: 40px;
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 0 8px #211b50;
|
||||
transition: opacity .3s linear;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
::deep .btn-fade:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::deep .btn-update {
|
||||
--bs-btn-bg: #8759ff;
|
||||
--bs-btn-hover-bg: var(--bs-btn-bg);
|
||||
--bs-btn-active-bg: var(--bs-btn-bg);
|
||||
bottom: 5rem;
|
||||
right: 1rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
::deep .btn-update img {
|
||||
width: 55%;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1050;
|
||||
height: var(--bs-header-height);
|
||||
}
|
||||
|
||||
.modal-open .navbar-header {
|
||||
z-index: 1040;
|
||||
}
|
||||
}
|
||||
|
||||
71
src/BootstrapBlazor.Shared/Shared/HomeLayout.razor.css
Normal file
71
src/BootstrapBlazor.Shared/Shared/HomeLayout.razor.css
Normal file
@ -0,0 +1,71 @@
|
||||
.footer-body {
|
||||
padding: 1rem;
|
||||
color: #fff;
|
||||
background-color: #5b6e84;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.footer-body h4 {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.footer-body ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-body .footer-link {
|
||||
transition: all .3s linear;
|
||||
color: rgba(255,255,255,.9);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
line-height: 2;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-body .footer-link:hover,
|
||||
.footer-body .footer-link a:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.footer-body .footer-link:not(:last-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-body .footer-link a {
|
||||
transition: all .3s linear;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
background-color: #222;
|
||||
padding: 0 20px;
|
||||
line-height: 42px;
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
.footer-info a {
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
.footer-info .footer-logo {
|
||||
width: 21px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.footer-info .footer-lang {
|
||||
width: 15px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer-body {
|
||||
padding: 3rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
222
src/BootstrapBlazor.Shared/Shared/PageLayout.razor.css
Normal file
222
src/BootstrapBlazor.Shared/Shared/PageLayout.razor.css
Normal file
@ -0,0 +1,222 @@
|
||||
.layout-logo {
|
||||
border: solid 1px #fff;
|
||||
}
|
||||
|
||||
.color {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: var(--bs-border-radius);
|
||||
transition: border .3s linear;
|
||||
}
|
||||
|
||||
.color:hover {
|
||||
border: 2px solid #28a745;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.color3 {
|
||||
background-color: #e83e8c;
|
||||
}
|
||||
|
||||
.color4 {
|
||||
background-color: #ffe484;
|
||||
}
|
||||
|
||||
.color5 {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.color6 {
|
||||
background-color: #4a3275;
|
||||
}
|
||||
|
||||
.color1,
|
||||
.layout.is-page.color1 .layout-header {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-side .layout-banner {
|
||||
background-color: #3e84d0
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-header-bar {
|
||||
background-color: #2b7cd0;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-drawer:hover {
|
||||
background-color: #3184dc;
|
||||
}
|
||||
|
||||
.color2,
|
||||
.layout.is-page.color2 .layout-header {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-side .layout-banner {
|
||||
background-color: #24903d
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-header-bar {
|
||||
background-color: #258c3c;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-drawer:hover {
|
||||
background-color: #24903d;
|
||||
}
|
||||
|
||||
.color3,
|
||||
.layout.is-page.color3 .layout-header {
|
||||
background-color: #e83e8c;
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-side .layout-banner {
|
||||
background-color: #c5417e
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-header-bar {
|
||||
background-color: #c73477;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-drawer:hover {
|
||||
background-color: #c5417e;
|
||||
}
|
||||
|
||||
.color4,
|
||||
.layout.is-page.color4 .layout-header {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-side .layout-banner {
|
||||
background-color: #e4af10
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-header-bar {
|
||||
background-color: #e2b221;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-drawer:hover {
|
||||
background-color: #e4af10;
|
||||
}
|
||||
|
||||
.color5,
|
||||
.layout.is-page.color5 .layout-header {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.color6,
|
||||
.layout.is-page.color6 .layout-header {
|
||||
background-color: #6610f2;
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-side .layout-banner {
|
||||
background-color: #4b0cb3
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-header-bar {
|
||||
background-color: #4b0ab5;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-drawer:hover {
|
||||
background-color: #4b0cb3;
|
||||
}
|
||||
|
||||
::deep + .widget .dropdown-body h3 {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::deep + .widget .dropdown-body h4 {
|
||||
color: #444444;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::deep + .widget .dropdown-body small {
|
||||
color: #999999;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
::deep + .widget .dropdown-item > div:not(.progress):last-child {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
::deep + .widget .dropdown-item {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
::deep + .widget .progress {
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
::deep + .widget .dropdown-item.active,
|
||||
::deep + .widget .dropdown-item:active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
::deep + .widget .dropdown-item:not(:nth-of-type(odd)):active {
|
||||
background-color: inherit;
|
||||
}
|
||||
@ -13,15 +13,6 @@
|
||||
--bb-layout-sidebar-banner-background: #702cf8;
|
||||
}
|
||||
|
||||
.bb-icon {
|
||||
width: 42px;
|
||||
height: auto;
|
||||
border-radius: var(--bs-border-radius);
|
||||
background-color: var(--bs-info);
|
||||
border: solid 1px #fff;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.table-container .table tbody tr.highlight,
|
||||
.table-container .table-row.highlight {
|
||||
background-color: #409eff;
|
||||
@ -32,19 +23,10 @@
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.card-log {
|
||||
overflow: hidden auto;
|
||||
border: solid 1px #ddd;
|
||||
border-radius: var(--bs-border-radius);
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #174482;
|
||||
color: #fff;
|
||||
.chart .btn i + span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-log .log-item:not(:last-child) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
background: lightyellow;
|
||||
bottom: 0;
|
||||
@ -64,379 +46,11 @@
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.popover-input {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.chart .btn i + span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout .header {
|
||||
background: #7dbcea;
|
||||
color: #fff;
|
||||
height: 64px;
|
||||
padding: 0 50px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.layout .side {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background: #3ba0e9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layout-side .side {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layout-main .main {
|
||||
background: rgba(16, 142, 233, 1);
|
||||
color: #fff;
|
||||
min-height: 120px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.layout-logo {
|
||||
border: solid 1px #fff;
|
||||
}
|
||||
|
||||
.layout-footer .footer {
|
||||
background: #7dbcea;
|
||||
color: #fff;
|
||||
padding: 24px 50px;
|
||||
line-height: 1.5;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.circle-demo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.circle-demo h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.circle-demo i {
|
||||
font-style: normal;
|
||||
color: #3f414d;
|
||||
}
|
||||
|
||||
.drawer-demo .form-checkbox {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.drawer-demo .form-radio-group .form-checkbox:not(:first-child) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.split-demo {
|
||||
height: 200px;
|
||||
width: 240px;
|
||||
border-color: rgba(0,0,0,.125);
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.split-demo-horizontal {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
.popover-demo,
|
||||
.tooltip-demo {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
|
||||
.welcome {
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.welcome .bar {
|
||||
padding: 1rem;
|
||||
height: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.welcome .bar img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.welcome .bar .carousel-caption {
|
||||
position: absolute;
|
||||
margin-top: 1rem;
|
||||
color: #607D8B;
|
||||
border-top: solid 1px #dce3e8;
|
||||
height: 120px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.welcome .carousel-img {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.welcome .carousel {
|
||||
border-radius: var(--bs-border-radius);
|
||||
border: 1px solid #dce3e8;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.welcome .carousel .carousel-indicators li {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.welcome-header {
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 1rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.welcome-body {
|
||||
font-size: 22px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.welcome-body .typed {
|
||||
color: #0073dc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.welcome-body .typed-cursor {
|
||||
color: #0073dc;
|
||||
}
|
||||
|
||||
.welcome-body .typed-cursor {
|
||||
animation: flash 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.welcome-body .typed-cursor.active {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.welcome-body-en {
|
||||
font-size: 32px;
|
||||
margin-top: 2rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.welcome-body-en .typed {
|
||||
color: #0073dc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
@keyframes flash {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.welcome-footer div:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.welcome-footer div {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.welcome-footer .tag {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
background-color: #607D8B;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
font-size: 15px;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: .41px;
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.intro h3 {
|
||||
color: #1a1a1a;
|
||||
letter-spacing: .1px;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
font-weight: 400;
|
||||
margin: 15px 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.donate {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
text-align: center;
|
||||
border-top: solid 1px #ddd;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.donate h3 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.donate .barcode {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.footer-body {
|
||||
padding: 1rem;
|
||||
color: #fff;
|
||||
background-color: #5b6e84;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.footer-body h4 {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.footer-body ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-body .footer-link {
|
||||
transition: all .3s linear;
|
||||
color: rgba(255,255,255,.9);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
line-height: 2;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-body .footer-link:hover,
|
||||
.footer-body .footer-link a:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.footer-body .footer-link:not(:last-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-body .footer-link a {
|
||||
transition: all .3s linear;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
background-color: #222;
|
||||
padding: 0 20px;
|
||||
line-height: 42px;
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
.footer-info a {
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
.footer-info .footer-logo {
|
||||
width: 21px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.footer-info .footer-lang {
|
||||
width: 15px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-side {
|
||||
background-color: var(--bb-disabled-bg);
|
||||
color: #dcdfe6;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-menu-demo .menu.is-vertical:not(.is-collapsed) {
|
||||
width: 156px;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .625rem;
|
||||
background-color: var(--bb-layout-sidebar-banner-background);
|
||||
height: 50px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-banner img {
|
||||
width: 38px;
|
||||
border-radius: var(--bs-border-radius);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-side.is-collapsed .layout-banner .layout-title {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-menu {
|
||||
height: 371px;
|
||||
padding: 6px 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-header .layout-header-bar {
|
||||
position: absolute;
|
||||
margin: 9px 14px;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-footer {
|
||||
background-color: #e4e7ed;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-menu-demo .layout-footer > a {
|
||||
color: #000;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.menu-demo-header {
|
||||
background-color: #17a2b8;
|
||||
line-height: 50px;
|
||||
@ -453,34 +67,6 @@
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.calendar .table-week tbody .none {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.calendar .table-week tbody .less {
|
||||
border-radius: var(--bs-border-radius);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 4px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.calendar .table-week tbody .ch {
|
||||
background: #28a745;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.calendar .table-week tbody .en {
|
||||
background: #007bff;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.page-layout-demo-list {
|
||||
margin: 0;
|
||||
}
|
||||
@ -524,71 +110,6 @@
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.coms-cate {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coms-cate:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.coms-cate .badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-left: 1rem;
|
||||
font-size: .65rem;
|
||||
}
|
||||
|
||||
.coms-demo {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.coms-demo .card img {
|
||||
max-width: calc(100%);
|
||||
}
|
||||
|
||||
.coms-demo .card .card-header {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.coms-demo .card .card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.coms-demo a {
|
||||
width: calc(100%);
|
||||
height: calc(100%);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.coms-demo .card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: box-shadow .3s linear;
|
||||
}
|
||||
|
||||
|
||||
.coms-search {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.coms-search .row {
|
||||
padding: 1rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.coms-search-filter {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.8),rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
.listview-demo {
|
||||
height: 626px;
|
||||
}
|
||||
@ -746,260 +267,10 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: var(--bs-border-radius);
|
||||
transition: border .3s linear;
|
||||
}
|
||||
|
||||
.color:hover {
|
||||
border: 2px solid #28a745;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.color3 {
|
||||
background-color: #e83e8c;
|
||||
}
|
||||
|
||||
.color4 {
|
||||
background-color: #ffe484;
|
||||
}
|
||||
|
||||
.color5 {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.color6 {
|
||||
background-color: #4a3275;
|
||||
}
|
||||
|
||||
.color1,
|
||||
.layout.is-page.color1 .layout-header {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-side .layout-banner {
|
||||
background-color: #3e84d0
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-header-bar {
|
||||
background-color: #2b7cd0;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color1 .layout-drawer:hover {
|
||||
background-color: #3184dc;
|
||||
}
|
||||
|
||||
.color2,
|
||||
.layout.is-page.color2 .layout-header {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-side .layout-banner {
|
||||
background-color: #24903d
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-header-bar {
|
||||
background-color: #258c3c;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color2 .layout-drawer:hover {
|
||||
background-color: #24903d;
|
||||
}
|
||||
|
||||
.color3,
|
||||
.layout.is-page.color3 .layout-header {
|
||||
background-color: #e83e8c;
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-side .layout-banner {
|
||||
background-color: #c5417e
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-header-bar {
|
||||
background-color: #c73477;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color3 .layout-drawer:hover {
|
||||
background-color: #c5417e;
|
||||
}
|
||||
|
||||
.color4,
|
||||
.layout.is-page.color4 .layout-header {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-side .layout-banner {
|
||||
background-color: #e4af10
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-header-bar {
|
||||
background-color: #e2b221;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color4 .layout-drawer:hover {
|
||||
background-color: #e4af10;
|
||||
}
|
||||
|
||||
.color5,
|
||||
.layout.is-page.color5 .layout-header {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.color6,
|
||||
.layout.is-page.color6 .layout-header {
|
||||
background-color: #6610f2;
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-side .layout-banner {
|
||||
background-color: #4b0cb3
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-side {
|
||||
background-color: #212529;
|
||||
color: var(--bb-disabled-bg);
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-footer {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-header-bar {
|
||||
background-color: #4b0ab5;
|
||||
border-color: #014186;
|
||||
}
|
||||
|
||||
.layout.is-page.color6 .layout-drawer:hover {
|
||||
background-color: #4b0cb3;
|
||||
}
|
||||
|
||||
.layout.is-page .layout-right {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.widget .dropdown-body h3 {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.widget .dropdown-body h4 {
|
||||
color: #444444;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.widget .dropdown-body small {
|
||||
color: #999999;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.widget .dropdown-item > div:not(.progress):last-child {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.widget .dropdown-item {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.widget .progress {
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.widget .dropdown-item.active,
|
||||
.widget .dropdown-item:active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.widget .dropdown-item:not(:nth-of-type(odd)):active {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.btn-fade {
|
||||
--bb-button-circle-width: 40px;
|
||||
--bb-button-circle-height: 40px;
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 0 8px #211b50;
|
||||
transition: opacity .3s linear;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn-fade:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-update {
|
||||
--bs-btn-bg: #8759ff;
|
||||
--bs-btn-hover-bg: var(--bs-btn-bg);
|
||||
--bs-btn-active-bg: var(--bs-btn-bg);
|
||||
bottom: 5rem;
|
||||
right: 1rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-update img {
|
||||
width: 55%;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.cell-demo {
|
||||
background-color: var(--bs-table-striped-bg) !important;
|
||||
}
|
||||
@ -1201,23 +472,6 @@
|
||||
min-height: var(--bb-height);
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.intro .card {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 568px) {
|
||||
.split-demo {
|
||||
height: 200px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.split-demo-horizontal {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.popover-demo input,
|
||||
.tooltip-demo input {
|
||||
@ -1229,24 +483,6 @@
|
||||
word-break: break-all;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.intro .card {
|
||||
border-color: #dce3e8;
|
||||
height: 263px;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.intro .card:hover,
|
||||
.coms-demo .card:hover {
|
||||
box-shadow: 0 1px 7px 0 rgba(0,0,0,0.05), 0 2px 8px 0 rgba(0,0,0,0.07), 0 3px 9px 0 rgba(0,0,0,0.06), 0 5px 10px 0 rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.intro .card p, .intro .card, .intro .card h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@ -1259,17 +495,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1050;
|
||||
height: var(--bs-header-height);
|
||||
}
|
||||
|
||||
.modal-open .navbar-header {
|
||||
z-index: 1040;
|
||||
}
|
||||
|
||||
.chart {
|
||||
max-width: 740px;
|
||||
}
|
||||
@ -1297,53 +522,4 @@
|
||||
.home-section {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.welcome-header {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.donate .barcode {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.footer-body {
|
||||
padding: 3rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.coms-search {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.coms-search.hide {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.welcome .bar {
|
||||
height: 456px;
|
||||
}
|
||||
|
||||
.welcome-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.welcome .bar {
|
||||
height: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.print-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
.form-inline .form-label + .switch,
|
||||
.form-inline .form-label + .form-checkbox {
|
||||
.form-inline .form-label + .form-check {
|
||||
padding: var(--bb-row-control-padding) 0;
|
||||
}
|
||||
|
||||
|
||||
@ -408,7 +408,7 @@
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.table-row .table-cell label:not(.form-checkbox) {
|
||||
.table-row .table-cell label:not(.form-check) {
|
||||
font-weight: bold;
|
||||
width: var(--bb-table-cardview-label-width);
|
||||
margin-bottom: 0;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user