tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Toggle buttons improved.

pull/103/head
Sebastian Stehle 9 years ago
parent
561b093c45
commit
0873660114
6 changed files with 73 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/Squidex/Views/Account/Login.cshtml
  2. 10
      src/Squidex/app/theme/_bootstrap.scss
  3. 4
      src/Squidex/app/theme/_mixins.scss
  4. 16
      src/Squidex/app/theme/_static.scss
  5. 6
      src/Squidex/app/theme/_vars.scss
  6. 55
      src/Squidex/wwwroot/theme.html

14
src/Squidex/Views/Account/Login.cshtml
View File

@ -11,25 +11,23 @@
<img class="profile-logo" src="~/images/logo-small.png" />
<div class="container">
<div class="row">
<div class="col-6">
<div class="row text-center">
<div class="btn-group profile-headline">
@if (Model.IsLogin)
{
<a class="profile-headline active" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">Login</a>
<a class="btn btn-toggle btn-primary" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">Login</a>
}
else
{
<a class="profile-headline" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">Login</a>
<a class="btn btn-toggle" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">Login</a>
}
</div>
<div class="col-6 profile-headline">
@if (!Model.IsLogin)
{
<a class="profile-headline active" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">Signup</a>
<a class="btn btn-toggle btn-primary" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">Signup</a>
}
else
{
<a class="profile-headline" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">Signup</a>
<a class="btn btn-toggle" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">Signup</a>
}
</div>
</div>

10
src/Squidex/app/theme/_bootstrap.scss
View File

@ -325,23 +325,23 @@ a {
}
&.btn-primary {
@include build-toggle-button($color-theme-blue);
@include build-toggle-button($color-theme-blue, $color-badge-primary-background);
}
&.btn-info {
@include build-toggle-button($color-theme-blue);
@include build-toggle-button($color-theme-info, $color-badge-info-background);
}
&.btn-danger {
@include build-toggle-button($color-theme-error);
@include build-toggle-button($color-theme-error, $color-badge-danger-background);
}
&.btn-success {
@include build-toggle-button($color-theme-green);
@include build-toggle-button($color-theme-green, $color-badge-success-background);
}
&.btn-warning {
@include build-toggle-button($color-theme-orange);
@include build-toggle-button($color-theme-orange, $color-badge-warning-background);
}
}

4
src/Squidex/app/theme/_mixins.scss
View File

@ -10,11 +10,11 @@
}
}
@mixin build-toggle-button($color) {
@mixin build-toggle-button($color, $background) {
& {
color: $color;
border-color: $color;
background: lighten($color, 40%);
background: $background;
z-index: 1000;
}
}

16
src/Squidex/app/theme/_static.scss
View File

@ -24,21 +24,7 @@ noscript {
// Lightweight, table like headline.
&-headline {
& {
color: $color-text-decent;
display: block;
margin-bottom: 1rem;
font-size: 1.3rem;
font-weight: normal;
text-align: center;
text-transform: uppercase;
}
&.active {
color: $color-text;
cursor: pointer;
pointer-events: none;
}
margin: 0 auto 2rem;
}
// Fix logo on the top right corner of the screen.

6
src/Squidex/app/theme/_vars.scss
View File

@ -19,8 +19,8 @@ $color-extern-microsoft-icon: #1b67b7;
$color-extern-github: #191919;
$color-extern-github-icon: #4a4a4a;
$color-theme-blue: #398cfb;
$color-theme-blue-dark: #3082f2;
$color-theme-blue: #3389ff;
$color-theme-blue-dark: #297ff6;
$color-theme-blue-lighter: #65a6ff;
$color-theme-blue-light: #9ebeea;
$color-theme-blue-lightest: #d9e8fc;
@ -34,6 +34,8 @@ $color-theme-orange-dark: #a65b00;
$color-theme-error: #eb3142;
$color-theme-error-dark: #c00;
$color-theme-info: #5bc0de;
$color-dark1-background: #2e3842;
$color-dark1-foreground: #6a7681;
$color-dark1-border1: #37424c;

55
src/Squidex/wwwroot/theme.html
View File

@ -214,6 +214,61 @@
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
</p>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-toggle btn-primary">
Active
</button>
<button class="btn btn-toggle">
Inactive
</button>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-toggle btn-warning">
Active
</button>
<button class="btn btn-toggle">
Inactive
</button>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-toggle btn-danger">
Active
</button>
<button class="btn btn-toggle">
Inactive
</button>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-toggle btn-success">
Active
</button>
<button class="btn btn-toggle">
Inactive
</button>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-toggle btn-info">
Active
</button>
<button class="btn btn-toggle">
Inactive
</button>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">

Write Preview
Loading…
Cancel
Save