updated green check mark

This commit is contained in:
bill bittner 2017-10-27 15:15:05 -07:00
parent c833a741fb
commit 671acec218
7 changed files with 45 additions and 25 deletions

View file

@ -56,6 +56,11 @@ body, .flex-container--column {
justify-content: space-between; justify-content: space-between;
} }
.flex-container--left-bottom {
justify-content: flex-start;
align-items: baseline;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -72,6 +77,11 @@ h3, p {
font-size: x-large; font-size: x-large;
} }
.text--large {
font-size: 2rem;
}
.pull-quote { .pull-quote {
font-size: 3rem; font-size: 3rem;
margin-top: 1rem; margin-top: 1rem;
@ -238,8 +248,7 @@ a, a:visited {
} }
/* ALIGNMENT */ /* ALIGNMENT */
. .align-content-left {
align-content-left {
text-align: left; text-align: left;
} }
@ -262,7 +271,7 @@ align-content-left {
/* ERROR MESSAGES */ /* ERROR MESSAGES */
.info-message { .info-message--success, .info-message--failure {
font-size: medium; font-size: medium;
margin: 0px; margin: 0px;
@ -328,21 +337,22 @@ option {
cursor: pointer; cursor: pointer;
} }
.text--large { #claim-name-input {
font-size: 2rem;
} }
.url-text--primary, .url-text--secondary { #input-success-claim-name {
margin:0px;
padding:0px;
} }
.url-text--primary { .span--relative {
color: black; position: relative;
} }
.url-text--secondary { .span--absolute {
color: #9b9b9b; position: absolute;
bottom: 0px;
right: 0px;
} }
/* modifiers */ /* modifiers */
@ -378,6 +388,19 @@ option {
width: calc(100% - 1em - 2px); width: calc(100% - 1em - 2px);
} }
.url-text--primary, .url-text--secondary {
margin:0px;
padding:0px;
}
.url-text--primary {
color: black;
}
.url-text--secondary {
color: #9b9b9b;
}
/* BUTTONS */ /* BUTTONS */
button { button {

View file

@ -76,7 +76,7 @@
margin: 0px; margin: 0px;
} }
.info-message { .info-message--success, .info-message--failure {
font-size: small; font-size: small;
} }

View file

@ -4,7 +4,7 @@
</form> </form>
<div id="primary-dropzone" class="dropzone row row--margined row--padded row--tall flex-container flex-container--column flex-container--justify-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="triggerFileChooser('siofu_input', event)"> <div id="primary-dropzone" class="dropzone row row--margined row--padded row--tall flex-container flex-container--column flex-container--justify-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
<div id="primary-dropzone-instructions"> <div id="primary-dropzone-instructions">
<p class="info-message-placeholder info-message info-message--failure" id="input-error-file-selection" hidden="true"></p> <p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p>
<p>Drag & drop image or video here to publish</p> <p>Drag & drop image or video here to publish</p>
<p class="fine-print">OR</p> <p class="fine-print">OR</p>
<p class="blue--underlined">CHOOSE FILE</p> <p class="blue--underlined">CHOOSE FILE</p>

View file

@ -1,5 +1,5 @@
<form id="publish-channel-form"> <form id="publish-channel-form">
<p id="input-error-channel-name" class="info-message-placeholder info-message info-message--failure"></p> <p id="input-error-channel-name" class="info-message-placeholder info-message--failure"></p>
<div class="row row--wide row--short"> <div class="row row--wide row--short">
<div class="column column--3 column--sml-10"> <div class="column column--3 column--sml-10">
<label class="label" for="new-channel-name">Name:</label> <label class="label" for="new-channel-name">Name:</label>
@ -7,7 +7,7 @@
<div class="input-text--primary"> <div class="input-text--primary">
<span>@</span> <span>@</span>
<input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="checkChannelName(event.target.value)"> <input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="checkChannelName(event.target.value)">
<span id="input-success-channel-name" class="info-message info-message--success"></span> <span id="input-success-channel-name" class="info-message--success"></span>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
<form id="channel-login-form"> <form id="channel-login-form">
<p id="login-error-display-element" class="info-message-placeholder info-message info-message--failure"></p> <p id="login-error-display-element" class="info-message-placeholder info-message--failure"></p>
<div class="row row--wide row--short"> <div class="row row--wide row--short">
<div class="column column--3 column--sml-10"> <div class="column column--3 column--sml-10">
<label class="label" for="channel-login-name-input">Name:</label> <label class="label" for="channel-login-name-input">Name:</label>

View file

@ -16,7 +16,7 @@
<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}> <div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
<div class="row row--padded row--no-top row--no-bottom row--wide"> <div class="row row--padded row--no-top row--no-bottom row--wide">
<!--error display--> <!--error display-->
<p id="input-error-channel-select" class="info-message-placeholder info-message info-message--failure"></p> <p id="input-error-channel-select" class="info-message-placeholder info-message--failure"></p>
<!--channel login/create select--> <!--channel login/create select-->
<div class="column column--3"> <div class="column column--3">
<label class="label" for="channel-name-select">Channel:</label> <label class="label" for="channel-name-select">Channel:</label>

View file

@ -1,19 +1,16 @@
<div class="row row--padded row--wide"> <div class="row row--padded row--wide">
<!--error display--> <!--error display-->
<p id="input-error-claim-name" class="info-message-placeholder info-message info-message--failure" hidden="true"></p> <p id="input-error-claim-name" class="info-message-placeholder info-message--failure" hidden="true"></p>
<!--url selection--> <!--url selection-->
<div class="column column--3 column--sml-10"> <div class="column column--3 column--sml-10">
<label class="label">URL:</label> <label class="label">URL:</label>
</div><div class="column column--7 column--sml-10"> </div><div class="column column--7 column--sml-10 input-text--primary span--relative">
<div class="input-text--primary">
<span class="url-text--secondary">spee.ch /</span> <span class="url-text--secondary">spee.ch /</span>
<span id="url-channel" class="url-text--secondary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span> <span id="url-channel" class="url-text--secondary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span>
<span id="url-no-channel-placeholder" class="url-text--secondary tooltip" {{#if user}}hidden="true"{{else}}{{/if}}>xyz<span class="tooltip-text">This will be a random id</span></span> <span id="url-no-channel-placeholder" class="url-text--secondary tooltip" {{#if user}}hidden="true"{{else}}{{/if}}>xyz<span class="tooltip-text">This will be a random id</span></span>
<span id="url-channel-placeholder" class="url-text--secondary tooltip" hidden="true">@channel<span class="tooltip-text">Select a channel above</span></span> <span id="url-channel-placeholder" class="url-text--secondary tooltip" hidden="true">@channel<span class="tooltip-text">Select a channel above</span></span> /
/
<input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)"> <input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
<span id="input-success-claim-name" class="info-message info-message--success"></span> <span id="input-success-claim-name" class="info-message--success span--absolute"></span>
</div>
</div> </div>
</div> </div>