Issue 266: Sketch Settings design
This commit is contained in:
saumya1906
Cassie Tarakajian
parent
6b6ff7ca22
commit
67dd614651
2 changed files with 65 additions and 43 deletions
|
|
@ -75,9 +75,9 @@ class Preferences extends React.Component {
|
|||
<Tabs>
|
||||
<TabList>
|
||||
<div className="preference__subheadings">
|
||||
<Tab><h4 className="preference__subheading1">General Settings</h4></Tab>
|
||||
<h4 className="preference__subheading2">Sketch Settings</h4>
|
||||
<Tab><h4 className="preference__subheading2">Accessibility</h4></Tab>
|
||||
<Tab><h4 className="preference__subheading">General Settings</h4></Tab>
|
||||
<Tab><h4 className="preference__subheading">Sketch Settings</h4></Tab>
|
||||
<Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
|
||||
</div>
|
||||
</TabList>
|
||||
<TabPanel>
|
||||
|
|
@ -235,6 +235,15 @@ class Preferences extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<br></br>
|
||||
<div className="preference">
|
||||
<h4 className="preference__title">Add a p5.js or an external library</h4>
|
||||
<h4 className="preference__sketch1">Add a script library resource field</h4>
|
||||
<h4 className="preference__title">Security Protocol</h4>
|
||||
<h4>Serve over HTTPS</h4>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="preference">
|
||||
<h4 className="preference__title">Accessible text-based canvas</h4>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
marhin-left: #{19 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('heading-text-color');
|
||||
}
|
||||
|
|
@ -69,7 +68,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.preference {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -129,7 +127,7 @@
|
|||
width: #{44 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.preference__subheading1 {
|
||||
.preference__subheading {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
&:hover {
|
||||
|
|
@ -139,47 +137,12 @@
|
|||
}
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
height: #{25 / $base-font-size}rem;
|
||||
text-align: left;
|
||||
margin-top: #{30 / $base-font-size}rem;
|
||||
margin-left: #{5 / $base-font-size}rem;
|
||||
margin-bottom: #{0.1 / $base-font-size}rem;
|
||||
margin-right: #{60 / $base-font-size}rem;
|
||||
font-family: Montserrat;
|
||||
width: #{100 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.preference__subheading2 {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
&:hover {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
|
||||
}
|
||||
}
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
height: #{25 / $base-font-size}rem;
|
||||
text-align: left;
|
||||
margin-top: #{30 / $base-font-size}rem;
|
||||
margin-left: #{46 / $base-font-size}rem;
|
||||
margin-bottom: #{0.1 / $base-font-size}rem;
|
||||
font-family: Montserrat;
|
||||
}
|
||||
|
||||
.preference__subheading3 {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
&:hover {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
|
||||
}
|
||||
}
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
height: #{25 / $base-font-size}rem;
|
||||
text-align: left;
|
||||
margin-top: #{30 / $base-font-size}rem;
|
||||
margin-left: #{48 / $base-font-size}rem;
|
||||
margin-bottom: #{0.1 / $base-font-size}rem;
|
||||
width: #{78 / $base-font-size}rem;
|
||||
font-family: Montserrat;
|
||||
width: #{98 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.preference__vertical-list {
|
||||
|
|
@ -189,6 +152,22 @@
|
|||
padding-left: #{25 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.preference__sketch1{
|
||||
width: #{601 / $base-font-size}rem;
|
||||
height: #{100 / $base-font-size}rem;
|
||||
font-family: Montserrat;
|
||||
font-size: #{14 / $base-font-size}rem;
|
||||
line-height: 1.43;
|
||||
text-align: left;
|
||||
margin-left: #{5 / $base-font-size}rem;
|
||||
margin-top: #{40 / $base-font-size}rem;
|
||||
margin-bottom: #{10 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
border-bottom: 1px dashed getThemifyVariable('button-border-color');
|
||||
}
|
||||
}
|
||||
|
||||
.preference__radio-button {
|
||||
@extend %hidden-element;
|
||||
}
|
||||
|
|
@ -228,3 +207,37 @@
|
|||
.preference__option.preference__canvas:not(:last-child) {
|
||||
padding-right: #{14 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
/*.tooltip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
/*.tooltip .tooltiptext {
|
||||
margin-top: #{0 / $base-font-size}rem;
|
||||
margin-bottom: #{50 / $base-font-size}rem;
|
||||
margin-left: #{130 / $base-font-size}rem;
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-color: $p5js-pink transparent transparent $p5js-pink;
|
||||
padding: 5px 0;
|
||||
border-radius: 5px;
|
||||
webkit-border-radius: 20px;
|
||||
moz-border-radius: 20px;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
background-color: $p5js-pink;
|
||||
vertical-align: top;
|
||||
/* Position the tooltip text - see examples below! */
|
||||
/* content: ' ';
|
||||
position: absolute;
|
||||
left: #{15 / $base-font-size}rem;
|
||||
-webkit-margin-before: 0em;
|
||||
-webkit-margin-after: 0em;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
/*.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}*//*/*/
|
||||
Loading…
Reference in a new issue