mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-04-06 22:08:51 +00:00
Refactor:
- use lowercase and hyphen name for new component according to Sass Guidelines - change every uses by hand (thanks to my stupid IDE WebStorm)
This commit is contained in:
committed by
Francis Lachapelle
parent
5980f8e90e
commit
b7adf2814d
@@ -9,11 +9,11 @@
|
||||
<div id="messageEditor">
|
||||
<md-content class="md-padding">
|
||||
<form>
|
||||
<div class="Pseudo-input-container">
|
||||
<label class="Pseudo-input-label">
|
||||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="From"/>
|
||||
</label>
|
||||
<!--<div class="Pseudo-input-field">-->
|
||||
<!--<div class="pseudo-input-field">-->
|
||||
<md-select name="from"
|
||||
data-ng-model="message.editable.from">
|
||||
<md-option ng-value="identity" data-ng-repeat="identity in identities">{{identity}}</md-option>
|
||||
@@ -22,8 +22,8 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="Pseudo-input-container">
|
||||
<label class="Pseudo-input-label">
|
||||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
|
||||
@@ -35,8 +35,8 @@
|
||||
</tags-input>
|
||||
|
||||
</div>
|
||||
<div class="Pseudo-input-container">
|
||||
<label class="Pseudo-input-label">
|
||||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Cc"/>
|
||||
</label>
|
||||
<div class="PseudoField-inputLike">
|
||||
@@ -55,8 +55,8 @@
|
||||
<input type="text" name="subject" ng-model="message.editable.subject"/>
|
||||
</md-input-container>
|
||||
|
||||
<div class="Pseudo-input-container">
|
||||
<label class="Pseudo-input-label">
|
||||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Attachments"/>
|
||||
</label>
|
||||
<div class="pseudoInput-text">
|
||||
|
||||
@@ -12,20 +12,20 @@
|
||||
|
||||
<div class="msg-header-content">
|
||||
<h3 class="sg-md-title-msg" data-ng-bind="message.subject"><!-- subject --></h3>
|
||||
<div class="PseudoField--compact">
|
||||
<label class="PseudoField-label">
|
||||
<div class="pseudo-input-container--compact">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="From"/>
|
||||
</label>
|
||||
<div class="PseudoField-inputLike">
|
||||
<div class="pseudo-input-field">
|
||||
<a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Pseudo-input-container--compact">
|
||||
<label class="PseudoField-label">
|
||||
<div class="pseudo-input-container--compact">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<div class="PseudoField-inputLike">
|
||||
<div class="pseudo-input-field">
|
||||
<a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@ tags-input .host:active {
|
||||
}
|
||||
|
||||
tags-input .tags {
|
||||
@extend .Pseudo-input-field;
|
||||
@extend .pseudo-input-field;
|
||||
padding: 0;
|
||||
line-height: 2 * $mg;
|
||||
word-wrap: break-word;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
/*! pseudo-input.scss */
|
||||
|
||||
|
||||
/// Component: Pseudo-input
|
||||
/// Component: pseudo-input
|
||||
/// This component mimics the presentation of form fields according to Google's
|
||||
/// Material Design specs (www.google.com/design/spec/components/text-fields.html)
|
||||
/// It's used in message headers but could --and should-- be reused
|
||||
/// The Pseudo-input-container element serves as a... container for it's two children:
|
||||
/// The pseudo-input-container element serves as a... container for it's two children:
|
||||
/// -label and -input-field
|
||||
///
|
||||
/// Typical use:
|
||||
/// <div class="Pseudo-input-container">
|
||||
/// <label class="Pseudo-input-label">Some text</label>
|
||||
/// <p class="Pseudo-input-field">Other input-like text</p>
|
||||
/// <div class="pseudo-input-container">
|
||||
/// <label class="pseudo-input-label">Some text</label>
|
||||
/// <p class="pseudo-input-field">Other input-like text</p>
|
||||
/// </div>
|
||||
///
|
||||
/// ----------------------------------------------------------------------------
|
||||
@@ -30,13 +30,13 @@ $input-border-width-focused: 2px !default;
|
||||
$input-line-height: 26px !default;
|
||||
$input-padding-top: 2px !default;
|
||||
|
||||
.Pseudo-input-container {
|
||||
.pseudo-input-container {
|
||||
display: block; // Should be (reset to ?) a plain block element
|
||||
padding: 0 2px;
|
||||
|
||||
}
|
||||
|
||||
.Pseudo-input-label {
|
||||
.pseudo-input-label {
|
||||
display: inline-block;
|
||||
margin-top: $mg;
|
||||
color: $colorGrayLight;
|
||||
@@ -45,7 +45,7 @@ $input-padding-top: 2px !default;
|
||||
line-height: $sg-line-height-1;
|
||||
}
|
||||
|
||||
.Pseudo-input-field {
|
||||
.pseudo-input-field {
|
||||
display: block;
|
||||
margin-bottom: $line;
|
||||
padding: $line 0 0 0;
|
||||
@@ -53,8 +53,8 @@ $input-padding-top: 2px !default;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.Pseudo-input-field--underline {
|
||||
@extend .Pseudo-input-field;
|
||||
.pseudo-input-field--underline {
|
||||
@extend .pseudo-input-field;
|
||||
border-bottom: 1px solid $colorGrayLighter;
|
||||
&:focus,
|
||||
&:active,
|
||||
@@ -66,8 +66,8 @@ $input-padding-top: 2px !default;
|
||||
|
||||
// The specs dimensions are too large to fit with angular-material
|
||||
// Here's a modifier
|
||||
.Pseudo-input-container--compact {
|
||||
.Pseudo-input-label {
|
||||
.pseudo-input-container--compact {
|
||||
.pseudo-input-label {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user