Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

styling the status form

This commit is contained in:
Nicolas Constant 2018-09-23 17:44:54 -04:00
parent 418ac5df03
commit 1e1feb0c4b
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
5 changed files with 93 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/floating-column/add-new-account/add-new-account.component.scss
View File

@ -1,2 +1,2 @@
@import "variables";
@import "panel";
@import "panel";

15
src/app/components/floating-column/add-new-status/add-new-status.component.html
View File

@ -1,6 +1,19 @@
<div class="panel">
<h3 class="panel__title">new message</h3>
<form (ngSubmit)="onSubmit()">
<!-- <label>Please provide your account:</label> -->
<input type="text" class="form-control form-control-sm" [(ngModel)]="titleHandle" name="titleHandle" autocomplete="off" placeholder="Title (optional)" />
<!-- <textarea rows="4" cols="50"> -->
<textarea class="form-control form-control-sm" style="min-width: 100%" rows="5" placeholder="What's in your mind?"></textarea>
<select class="form-control form-control-sm form-control--privacy" id="privacyHandle">
<option>Public</option>
<option>Unlisted</option>
<option>Follows-only</option>
<option>DM</option>
</select>
<button type="submit" class="btn btn-sm btn-custom-primary">TOOT!</button>
</form>
</div>
</div>

35
src/app/components/floating-column/add-new-status/add-new-status.component.scss
View File

@ -1,2 +1,35 @@
@import "variables";
@import "panel";
@import "panel";
@import "buttons";
$btn-send-status-width: 60px;
.form-control {
margin-bottom: 5px;
&--privacy{
display: inline-block;
width: calc(100% - 5px - #{$btn-send-status-width});
}
}
.btn-custom-primary {
display: inline-block;
width: $btn-send-status-width;
position: relative;
top: -1px;
left: 5px;
// background-color: orange;
// border-color: orange;
// color: black;
font-weight: 500;
// &:hover {
// }
// &:focus {
// border-color: darkblue;
// }
}

33
src/sass/_buttons.scss Normal file
View File

@ -0,0 +1,33 @@
@import "variables";
.btn-custom-primary {
background-color: $btn-primary-color;
border-color: $btn-primary-color;
color: $btn-primary-font-color;
font-size: 14px;
&:hover,
&:focus,
&:active,
&:active {
background-color: $btn-primary-color-hover;
border-color: $btn-primary-color-hover;
box-shadow: none;
} // &:focus {
// background-color: $btn-primary-color-hover;
// border-color: $btn-primary-color-hover;
// outline: none;
// }
// &:active {
// background-color: $btn-primary-color-hover;
// border-color: $btn-primary-color-hover;
// outline: none;
// }
// &:active:focus {
// background-color: $btn-primary-color-hover;
// border-color: $btn-primary-color-hover;
// outline: none;
// }
// &:visited {
// outline: none;
// }
}

16
src/sass/_variables.scss
View File

@ -6,20 +6,26 @@ $color-primary: #141824;
$color-secondary: #090b10;
$default-font-size: 15px;
$small-font-size: 12px;
$btn-primary-color: #515a62;
$btn-primary-color: #254d6f;
$btn-primary-color: #444f74;
$btn-primary-color-hover: darken($btn-primary-color, 10);
$btn-primary-font-color: white;
// TEST 1
$status-primary-color: #fff;
$status-secondary-color: #353e64;
$status-secondary-color: #4e5572;
$status-links-color: #d9e1e8;
// $status-primary-color : #8f93a2;
// $status-primary-color : lighten(#8f93a2, 30);
// $status-links-color : #b2ccd6;
// Block dispositions
$stream-selector-height: 30px;
$stream-column-separator: 7px;
$stream-column-width: 320px;
$stream-column-width: 320px;
//Bootstrap cuistomization
$enable-rounded : false;