r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Update Find styling to new design (#401)

Browse source 
* Update Find styling

* Update placeholder text
This commit is contained in:
Katyayani Singh 2017-07-28 21:08:47 +05:30 committed by Cassie Tarakajian
parent 983248ccb7
commit fa98306b9a
3 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/styles/abstracts/_variables.scss
View file

@ -44,6 +44,7 @@ $themes: (
input-text-color: #333, input-text-color: #333,
input-border-color: #b5b5b5, input-border-color: #b5b5b5,
about-list-text-color: #4a4a4a, about-list-text-color: #4a4a4a,
search-background-color: #ebebeb
), ),
dark: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
@ -79,6 +80,7 @@ $themes: (
input-text-color: #333, input-text-color: #333,
input-border-color: #b5b5b5, input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4, about-list-text-color: #f4f4f4,
search-background-color: #ebebeb
), ),
contrast: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
@ -113,6 +115,7 @@ $themes: (
input-text-color: #333, input-text-color: #333,
input-border-color: #b5b5b5, input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4, about-list-text-color: #f4f4f4,
search-background-color: $white
) )
); );

15
client/styles/components/_editor.scss
View file

@ -85,13 +85,15 @@
*/ */
.CodeMirror-dialog { .CodeMirror-dialog {
position: absolute; position: fixed;
top: 0; top: 0;
right: 0; left: 50%;
margin-left: - #{365/2/$base-font-size}rem;
z-index: 10; z-index: 10;
min-width: 365px; width: 100%;
max-width: #{365 / $base-font-size}rem;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
@ -118,6 +120,13 @@
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: #{12 / $base-font-size}rem; margin-bottom: #{12 / $base-font-size}rem;
@include themify() {
background-color: getThemifyVariable('search-background-color');
border: solid 0.5px getThemifyVariable('button-border-color');
}
&:focus {
background-color: $white;
}
} }
.CodeMirror-search-count { .CodeMirror-search-count {

2
client/utils/codemirror-search.js
View file

@ -223,7 +223,7 @@ export default function(CodeMirror) {
var queryDialog = ` var queryDialog = `
<h3 class="CodeMirror-search-title">Find</h3> <h3 class="CodeMirror-search-title">Find</h3>
<input type="text" class="search-input CodeMirror-search-field" placeholder="Search for" /> <input type="text" class="search-input CodeMirror-search-field" placeholder="Find in files" />
<div class="CodeMirror-search-actions"> <div class="CodeMirror-search-actions">
<div class="CodeMirror-search-modifiers button-wrap"> <div class="CodeMirror-search-modifiers button-wrap">
<button <button